理论教育 网页设计与制作遮罩动画

网页设计与制作遮罩动画

时间:2023-11-04 理论教育 版权反馈
【摘要】:注意,遮罩层和它下层被遮罩的图层有严格的上下层关系,次序绝不可以颠倒。下面用一个实例介绍遮罩动画的制作方法。图14-51“创建新元件”对话框在“属性”面板中,修改图片的尺寸,如图14-52所示。图14-54设置遮罩层分别单击两个图层中的“锁定”按钮,取消锁定状态,此时图像变为遮罩前状态,如图14-55所示。图14-56设置补间动画图14-57插入关键帧并移动圆5.测试存盘执行“控制”→“测试影片”命令,观察动画效果。

网页设计与制作遮罩动画

遮罩层也叫蒙板,是Flash中一种特殊的图层。它本身是一个不会被显示的图形区域,利用特殊的遮罩关系,可以实现对它下层被遮罩的图层显示区域或显示范围的控制。注意,遮罩层和它下层被遮罩的图层有严格的上下层关系,次序绝不可以颠倒。

遮罩动画制作的一般步骤为:制作一段运动渐变动画或形状渐变动画;添加一个图层,并设置属性为遮罩层;在遮罩层和被遮罩层之间建立关联关系,实现遮罩动画的效果。

下面用一个实例介绍遮罩动画的制作方法。

【例14-6】利用遮罩技术实现探照灯效果(显示探照灯照射之处的景物),如图14-50所示。

图14-50 探照灯效果

1.创建影片文档

单击“文件”菜单→“新建”命令,在弹出的“新建文档”对话框中选择“Flash文档”,单击“确定”按钮,新建一个影片文档。

2.制作元件

(1)单击“库”面板中的“新建元件”按钮,在弹出的“创建新元件”对话框中定义元件名称为“cir”,类型为“图片”,如图14-51所示,单击“确定”按钮。

(2)单击工具箱中的“椭圆”工具,在工作区中拖动画出一个圆。

3.制作背景层

(1)切换到场景中。

(2)单击“文件”菜单→“导入”→“导入到舞台”命令,在“导入”对话框中选择一幅图片作为背景。

图14-51 “创建新元件”对话框

(3)在“属性”面板中,修改图片的尺寸,如图14-52所示。

图14-52 设置图片尺寸

(4)在“显示比例”下拉列表中设置显示比例为50%。

(5)单击舞台外的区域,在“文档属性”对话框中进行设置,文件大小为600×450像素

4.制作遮罩效果

(1)单击时间轴中的“插入图层”按钮插入一个图层2,如图14-53所示。(www.daowen.com)

(2)双击图层1名称处,将其改为picture;双击图层2名称处,将其改为circle。

(3)单击图层circle,将元件cir拖入场景中。

图14-53 插入图层

(4)右键单击图层circle,在快捷菜单中选择“遮罩层”命令,如图14-54所示,此时图层picture自动内缩,变成被遮罩层,并且这两个图层被自动锁定。舞台中除了圆所在处,图片其他区域为空白。

图14-54 设置遮罩层

(5)分别单击两个图层中的“锁定”按钮,取消锁定状态,此时图像变为遮罩前状态,如图14-55所示。

图14-55 取消锁定状态

(6)选中circle层,在第35帧处右键单击,在快捷菜单中选择“插入关键帧”命令。

(7)选中picture层,在第35帧处右键单击,在快捷菜单中选择“插入帧”命令。

(8)选中circle层,在“属性”面板中设置“补间”为“动画”项,如图14-56所示。

(9)分别在第1~35帧中间,任选若干帧,设置其为关键帧,并移动圆至不同的位置,如图14-57所示。

(10)单击时间轴中的“锁定所有图层”按钮,将两图层设置为锁定状态。

图14-56 设置补间动画

图14-57 插入关键帧并移动圆

5.测试存盘

执行“控制”→“测试影片”命令,观察动画效果。如果满意,执行“文件”→“保存”命令,保存文件名为worldofwarcraft.fla。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈