注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

Flash遮罩动画详解及实例  

2009-06-03 21:30:37|  分类: flash课件制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在Flash8.0的作品中,我们常常看到很多眩目神奇的效果,而其中不少就是用最简单的“遮罩”完成的,如水波、万花筒、百页窗、放大镜、望远镜……等等。

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

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

  在Flash8.0中实现“遮罩”效果有二种做法,一种是用补间

  (1)什么是遮罩

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

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

  (2)遮罩有什么用

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

  (1)创建遮罩

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

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

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

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

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

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

实例一:红星闪闪

Flash遮罩动画详解及实例 - 白云飘飘 - .

图3-5-2 红星闪闪

  知识提要 将线条转化为填充 创建遮罩动画 使用变形面板 任意变形工具中“注册点”的应用

  (1)创建影片文档

  1、设置影片文档属性

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

  (2)创建元件

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

执行【插入】|【新建元件】命令,新建一个图形元件,名称为“闪光线条”。选择工具栏上的直线工具Flash遮罩动画详解及实例 - 白云飘飘 - .,在场景中画一直线,在【属性】面板上作如图3-5-5设置。

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

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

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

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

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

图3-5-7

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

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

  3、 创建“闪光”元件

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

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

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

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

  4、 创建“红星”元件

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

图3-5-11 红星的九步画法

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

  第二步,选择工具箱中的任意变形工具Flash遮罩动画详解及实例 - 白云飘飘 - .,在画好的线条上点一下,这里,线条的中心出现一个白色的小园点,我们叫它“注册点”。如图3-5-11中的“2”所示。

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

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

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

图3-5-12 变形面板

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

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

  第七步,选择工具栏上的橡皮工具 Flash遮罩动画详解及实例 - 白云飘飘 - .,在工具栏下面的选项中选择“水笼头”工具Flash遮罩动画详解及实例 - 白云飘飘 - .,在多余的线段上点一下,去除线段,修整好的五角星如图3-5-11中的“7”所示。

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

  第九步:再选择橡皮工具Flash遮罩动画详解及实例 - 白云飘飘 - .,点开Flash遮罩动画详解及实例 - 白云飘飘 - .旁边的小三角,在“擦除线条”前打勾,如图3-5-13所示。

Flash遮罩动画详解及实例 - 白云飘飘 - .

图3-5-13 擦除线条

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

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

  (3)创建动画

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

Flash遮罩动画详解及实例 - 白云飘飘 - .

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

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

 

二、  水波的制作方法

水波制作方法

一、准备工作

  打开Flash 8,新建文件,尺寸默认550*400,点图层1的第一帧导入有水的照片,调整和场景一样大。居中。然后利用修改-分离(Ctrl+B)将图片打散备用。

  二、分离流水

  选择“套索工具”中的“魔术棒”并适当设计“魔术棒属性”中的“限度”和“平滑”度,在打散的图片中将流水部分全部选出并复制。

  说明:

  1、这样做是为了将来实现水动而树和草不动;

  2、因为流水部分分散和颜色不同,应注意调节魔术棒属性中的限度;

  3、各处流水的复制可分步完成。

  三、创建遮罩

  1、增加图层2,锁定图层1。点图层2的第一帧点编辑---粘贴到当前

位置。将复制流水粘贴在原来位置(透明度为60%),将本层中的“流水”全部选中,用键盘的方

向键往下走两下。

  说明:这是将来水流效果中关键的一步,图2为复制的流水。

  2、在图层2的上面新建一个图层3,点第一帧在照片的上边框画一无边框的长于照片宽度的细长矩形条,有黑箭头点中它,按住Ctrl键往下拖,一直摆满照片,间距不要太大。

  3、创建移动动画:摆满后点中第一帧全部选中矩形条,点插入--转换为元件--图形--确定,在图层3的20(15)帧插入关键帧(F6)在图层3的20(15)帧用键盘方向键往下走一段(想让水波慢就往下走的少点想快或者大就多走点)点中图层3的第一帧创建动作补间。[右击图层3的第一帧复制帧,右击图层3的第40(30)帧粘贴帧,创建动作补间。]

  4、创建遮罩:选择图层3,单击右键,在弹出菜单中选择遮罩(点中图层3点右键--点遮罩层)。此时水流效果已经形成,我们可以用控制栏中的播放观察一下效果,若不合适可重新调节。

  四、尾声

  1、加入声音:新建一个图层4,选择一段合适的水流声,导入后,再插到此层。

  2、加入场景:将刚刚建立流水的电影夹拖放至场景中,调整大小和位置使之与整个电影匹配,如图2。

                                                            Flash遮罩动画详解及实例 - 白云飘飘 - .

                                          图2

  3、测试影片:通过Ctrl+Enter键来测试一下整体效果吧,还满意吗?

  4、影片输出:现在,我们可以将自己的杰作输出为Flash电影了。

1.新建文件,尺寸默认550*400.

2.点图层1的第一帧导入有水的照片,调整和场景一样大。居中。

点中照片点拷贝。

3.增加图层2,锁定图层1。点图层2的第一帧点编辑---粘贴到当前

位置。点修改--分离打散照片。点中图层2的照片,用键盘的方

向键往下走两下,错开图层2与图层1的照片用套索工具圈出不是

水的地方,按Delete键删除。

在图层1图层2的40帧按F5延长。增加图层3,点第一帧在照片的上边

框画一无边框的长于照片宽度的细长矩形条,有黑箭头点中它,按住

Ctyl键往下拖,一直摆满照片,间距不要太大。摆满后点中第一帧全

部选中矩形条,点插入--转换为元件--图形--确定,在图层3的40帧

插入关键帧(F6)在图层3的40帧用键盘方向键往下走一段(想让水

波慢就往下走的少点想快或者大就多走点)点中图层3的第一帧创建

动作补间,再点中图层3点右键--点遮罩层。OK了!测试存盘。

  其它动画制作

  评论这张
 
阅读(377)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017