使用Flash制作遮罩动画

实验8.2使用Adobe Flash Professional制作

遮罩动画。

【实验目的】

1、掌握图层的概念，遮罩层的设置。

2、掌握元件的使用和补间动画的创建。

3、掌握遮罩动画的制作流程。

【实验环境】

Window7+Photoshop+Adobe Flash Professional

【实验内容】

1、在Flash动画中，遮罩动画一类最常见的动画效果，我们常常看到的许多眩目神奇的动

画效果，而其中不少就是用最简单的遮罩完成的，如探照灯、万花筒、百页窗、放大镜……等等，比如下图所示望远镜动画。

2、本实验利用Adobe Flash Professional来完成这样一个望远镜动画。通过本实验，实验者

能掌握Flash动画的基本制作原理，了解相关的场景、图层、遮罩、关键帧、元件等概念。

【实验指导】

一、用Photoshop创建动画所用素材,一幅为清晰的图片，一幅为该图片的模糊化，模糊化

的方法如下所述。

1、用Photoshop 打开一幅花朵丰富的图片，如下图所示。

2、在菜单栏中选择“滤镜”->“模糊”->“镜头模糊”

3、在弹出“镜头模糊”窗口中设置“半径”变大，让图片看起来模糊，设置完成后单击“确定”按钮，图片如下所示。

4、在菜单栏中选择“文件”->“存储为”，打开“存储为”窗口，给文件命名“模糊郁金香”，选择“格式(F):”为“JPEG(*.JPG;*.JPEG;*.JPE)”后单击“保存”按钮。在弹出的“JPEG选项”窗口中将图像品质设为“最佳”，然后单击“确定”按钮。

二、用Adobe Flash Professional创建望远镜动画。

1、启动Adobe Flash Professional，选择“创建”->“ActionScript3.0”后，界面如下所示。

2、在菜单栏中选择“文件”->“导入”->“导入到库”，

3、选择刚才的制作的素材“模糊郁金香.jpg”,然后单击“打开”按钮，实现对该幅图片的导入到库。重复以上2-3的操作，将“郁金香.jpg”图片也导入到库，可以看到库中有了这两幅图片。

4、将库中的“郁金香.jpg”用鼠标左键拖拽到场景1中，如下图所示，图片较大，在工具栏的“任意变形工具”

任意变形工具

5、把图片修剪到合适大小，并双击“图层1”将图层名称改为“清晰”。

6、单击“新建图层”图标，创建一个新的图层。

7、将“图层2”命名为“模糊”，并将库中的“模糊郁金香.jpg”用鼠标左键拖拽到场景1中，同样修改该图片的大小，使得与刚才那幅图片大小一样。

8、再次单击“新建图层”图标，创建一个新的图层，将该图层命名为“遮罩层”。

9、创建用于遮罩的矩形，单击菜单栏的“插入”，选择“新建元件”

10、在弹出窗口内，将名称修改为“Square”,然后单击确定。

11、在右侧工具栏中选择“矩形工具”，然后在元件编辑场景中绘制一个矩形（矩形的颜色无所谓）。

12、单击窗口左上角的场景图标，回到场景1的编辑窗口。

13、选择“遮罩层”的第1帧，将库中的Square元件拖拽到场景中，

第1帧

14、鼠标左键拖拽同时选中三个图层第50帧。

15、单击鼠标右键选择“插入关键帧”

16、选中“遮罩层”图层，然后单击鼠标右键，单击选择“遮罩层”

17、选择“遮罩层”的第10帧，单击鼠标右键，选择“插入关键帧”，

18、将Square元件拖拽到场景中的一个新位置。

19、在工具栏中选择“任意变形工具”，将Square变形。

20、在1和10这两关键帧之间任选择一帧，单击鼠标右键选择“创建传统补间”

21、对第20帧，第30帧，第40帧重复上述17~19操作，设置Square的位置、形状，完成之后如下图所示。

22、单击菜单栏的“控制”，选择“测试影片”->“在Flash Professional中”

23、在弹出窗口内观看影片的效果。

24、单击菜单栏的“文件”，选择“导出”->“导出影片”

25、在弹出窗口内选择保存路径，并给影片命名为“美丽花朵”后单击“保存”按钮，完成影片制作。

26、可以在ie等浏览器中观看保存的“美丽花朵.swf”影片。