专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Flash教程 » flash遮罩层:Flash 8 遮罩动画详解及例子 »正文

flash遮罩层:Flash 8 遮罩动画详解及例子

来源: 发布时间:星期五, 2009年1月23日 浏览:16次 评论:0
  在Flash8.0作品中我们常常看到很多眩目神奇效果而其中不少就是用最简单“遮罩”完成如水波、万花筒、百页窗、放大镜、望远镜……等等

  那么“遮罩”如何能产生这些效果呢?

  在本节我们除了给大家介绍“遮罩”基本知识还结合我们实际经验介绍些“遮罩”应用窍门技巧最后提供 2个很实用范例以加深对“遮罩”原理理解

  在Flash8.0中实现“遮罩”效果有 2种做法种是用补间动画思路方法种是用actions指令思路方法在本节中我们只介绍第种做法

1.遮罩动画概念   (1)什么是遮罩

  “遮罩”顾名思义就是遮挡住下面对象

  在Flash8.0中“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方“被遮罩层”中内容目地个遮罩动画中“遮罩层”只有“被遮罩层”可以有任意个

  (2)遮罩有什么用

  在Flash8.0动画中“遮罩”主要有2种用途个作用是用在整个场景或个特定区域使场景外对象或特定区域外对象不可见个作用是用来遮罩住某元件部分从而实现些特殊效果

2.创建遮罩思路方法   (1)创建遮罩

  在Flash8.0中没有个专门按钮来创建遮罩层遮罩层其实是由普通图层转化你只要在要某个图层上单击右键在弹出菜单中把“遮罩”前打个勾该图层就会生成遮罩层“层图标”就会从普通层图标变为遮罩层图标系统会自动把遮罩层下面层关联为“被遮罩层”,在缩进同时图标变为如果你想关联更多层被遮罩只要把这些层拖到被遮罩层下面就行了如图3-5-1所示



图3-5-1 多层遮罩动画

  (2)构成遮罩和被遮罩层元素

  遮罩层中图形对象在播放时是看不到遮罩层中内容可以是按钮、影片剪辑、图形、位图、文字等但不能使用线条如果定要用线条可以将线条转化为“填充”

  被遮罩层中对象只能透过遮罩层中对象被看到在被遮罩层可以使用按钮影片剪辑图形位图文字线条

  (3)遮罩中可以使用动画形式

  可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段从而使遮罩动画变成个可以施展无限想象力创作空间

3.应用遮罩时窍门技巧遮罩层基本原理是:能够透过该图层中对象看到“被遮罩层”中对象及其属性(包括它们变形效果)但是遮罩层中对象中许多属性如渐变色、透明度、颜色和线条样式等却是被忽略比如我们不能通过遮罩层渐变色来实现被遮罩层渐变色变化 要在场景中显示遮罩效果可以锁定遮罩层和被遮罩层 可以用“AS”动作语句建立遮罩但这种情况下只能有个“被遮罩层”同时不能设置_alpha属性 不能用个遮罩层试图遮蔽另个遮罩层 遮罩可以应用在g动画上 在制作过程中遮罩层经常挡住下层元件影响视线无法编辑可以按下遮罩层时间轴面板显示图层轮廓按钮使的变成使遮罩层只显示边框形状在种情况下你还可以拖动边框调整遮罩图形外形和位置 在被遮罩层中不能放置动态文本 例子:红星闪闪

图3-5-2 红星闪闪

  知识提要

将线条转化为填充 创建遮罩动画 使用变形面板 任意变形工具中“注册点”应用 学习使用橡皮工具中“水笼头”工具和擦除线条   (1)创建影片文档

  1、设置影片文档属性

  执行【文件】|【新建】命令在弹出面板中选择【常规】|【Flash文档】选项后点击【确定】按钮新建个影片文档在【属性】面板上设置文件大小为400*400象素【背景色】为黑色(在教程中我们为了更好显示场景中内容背景色设为了深蓝色)如图3-5-3所示



图3-5-3 文档【属性】面板

  (2)创建元件

  1、 创建“闪光线条”元件

执行【插入】|【新建元件】命令新建个图形元件名称为“闪光线条”选择工具栏上直线工具在场景中画直线在【属性】面板上作如图3-5-5设置



图3-5-5 闪光线条【属性】面板参数设置

  2、 创建“闪光线条组合”元件

  执行【插入】|【新建元件】命令新建个图形元件名称为“闪光线条组合”如图3-5-6所示



图3-5-6 创建闪光线条元件

  从库中将名为“闪光线条”元件拖入新元件编辑窗口场景中在X轴上位置为-200Y轴为20然后单击工具栏上任意变形工具此时元件中心会出现个小白点它就是对象“注册点”用鼠标左键按住它拖到场景中心处松手

  图3-5-7中“1”显示是注册点在元件中心时情形“2”显示是注册点已拖到场景中心时情形



图3-5-7 移动注册点到场景中心

  然后执行【窗口】|【设计面板】|【变形】命令打开变形面板选中【旋转】角度为15度连续按下【复制并应用变形】按钮在场景中复制出效果如图3-5-8所示



图3-5-8 变形面板及复制好元件

  在时间轴关键帧上点选中全部图形执行【修改】|【分散】命令把线条打散再执行【修改】|【形状】|【将线条转化为填充】命令将线条转变为形状

  3、 创建“闪光”元件

  执行【插入】|【新建元件】命令新建个影片剪辑名称为“闪光”如图3-5-9所示



图3-5-9 创建“闪光”元件

  单击【确定】后进行“新元件编辑窗口”接着把库里名为“闪光线条组合”元件拖到场景中对齐中心点复制此元件在第30帧处加关键帧再回到第1帧中建立补间动作动画【属性】面板上设置顺时针旋转

  然后新建在第1帧中执行【编辑】|【粘贴到当前位置】命令使 2层中“闪光线条组合”完全重合再执行【修改】|【变形】|【水平翻转】命令让复制过来线条和第线条方向相反在场景中形成交叉图形

  在第30帧处建立关键帧在第1帧中建立动作补间动画【属性】面板上设置逆时针旋转最后将此层设为遮罩层如图3-5-10所示图中显示是“闪光”元件时间轴面板和各图层中动画设置



图3-5-10“闪光”元件编辑界面

  4、 创建“红星”元件

  执行【插入】|【新建元件】命令新建个图形元件名称为“红星”我们要在这个元件中画个漂亮红星为了画好红星我们分 9步来叙述具体画法图3-5-11中“1-9”数字表示这 9个步骤



图3-5-11 红星 9步画法

  第按住sht键从场景中心向上画根黄色线条如图3-5-11中“1”所示

  第 2步选择工具箱中任意变形工具,在画好线条上点这里线条中心出现个白色小园点我们叫它“注册点”如图3-5-11中“2”所示

  第 3步鼠标左键按住这个小白点拖到线条最下端这是我们要让线条要以下端为中心旋转复制如图3-5-11中“3”所示

  第 4步执行【窗口】|【设计面板】|【变形】打开变形面板各参数设置如图3-5-12

  按下【复制并应用变形】按钮 4次就会在场景中每隔72度复制出根线条 5个线条顶端构成 5角星 5个顶点如图3-5-11中“4”所示



图3-5-12 变形面板

  第 5步用绿色线条分别连接 5根线条顶端 5角星模样已经出来了如图3-5-11中“5”所示

  第 6步用白色线条分别连接 5角星中心和上步连线中点如图3-5-11中“6”所示

  第 7步选择工具栏上橡皮工具 在工具栏下面选项中选择“水笼头”工具在多余线段上点去除线段修整好 5角星如图3-5-11中“7”所示

  第 8步用油漆筒工具给 5角星上色每个角左右颜色可略有区别增加立体感如图3-5-11中“8”所示

  第 9步:再选择橡皮工具点开旁边小 3角在“擦除线条”前打勾如图3-5-13所示



图3-5-13 擦除线条

  用橡皮工具擦去红星上线条颗漂亮红星就做成了如图3-2-11中“9”所示

  窍门技巧:在Flash8.0中还可以用更简单思路方法画红星选择工具栏上多角星形工具如图3-5-14



图3-5-14 多角星形工具-



图3-5-15 多角星形工具选项设置面板-

  (3)创建动画

  回到主场景中把“闪光”元件拖入第 2层新建 2层第 3层中拖入“红星”元件在场景下方写下白色“闪客启航电影制片厂”文字完成后时间帧面板及场景如图3-5-16所示



图3-5-16 时间轴及场景

  按Ctrl+Enter组合键测试动画此时你欣赏着自己亲手做“闪闪红星”动画心中再回想下“遮罩”在动画中作用是否已经感受到“遮罩”这功能神奇?

0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: