05实验五 计算机动画设计与制作

实验五计算机动画设计与制作一、实验目的1、理解计算机动画原理，制作方法及技术手段。

2、认识计算机动画的各种类型，如关键帧动画、逐帧动画、遮罩动画等。

3、认识二维矢量动画制作软件Flash，学会简单平面动画的制作。

二、实验环境1、一台计算机。

2、安装Adobe Flash CS3。

三、实验内容1、利用图层的遮罩效果制作出闪闪红星动画效果。

2、利用Flash中图形元件的特性制作出变幻风车动画效果。

3、使用Action Script2.0脚本语言制作出湖面落雨动画效果。

4、使用Action Script3.0脚本语言制作出随鼠标洒落的烟花动画效果。

四、实验步骤实验内容一：闪闪红星1、新建一个文档，保存为“闪闪红星”，大小为500×500像素，帧率为15。

2、按Ctrl+F8创建一个新元件，类型为图形，名称为line。

选择直线工具，设置线宽为5，颜色为红色，在元建编辑区绘制一条直线，使用“修改-形状-将线条转换为填充”将其转换为填充，如图所示。

3、按Ctrl+F8创建一个新元件，类型为影片剪辑，名称为line1。

从库中拖入图形元件line，使用自由变形工个调其位置和旋转中心，打开变形工具面板，设置旋转角度为10º，多次单击“复制并应用变形”按钮，得到如图所示图形。

先在组合状态下将其调整到元件中心位置，再将其取消组合并分离到不可分离为止。

4、在库面板中复制元件line1得到新元件line2。

在库面板中双击line2进入其编辑区，对其做水平面翻转，改变其填充颜色为蓝色，效果如图所示。

5、回到场景中，将元件line1拖入场景中，利用对齐面板将其摆放在场景中央。

6、新建一个图层，将元件line2拖入场景中，并摆放在场景中央。

7、新建一个图层，命名为“五角星”，选择多边形工具，设置其为星形，5边，填充色为红色，在场景中央绘制一五角星，覆盖场景中央空白区域。

8、选择所有图层的第61帧，按F5插入普通帧。

选择图层2的61帧按F6插入关键帧，打开“修改-变形-缩放与旋转”对话框，设置旋转角度为180 º，如图所示，单击确定。

9、选择图层2第1帧，设置其补间为动画，效果如图所示。

10、选择图层2，单击右键，在弹出的快捷菜单中设置图层属性为遮罩，如图所示。

11、按Ctrl+S保存文件，按Ctrl+Enter发布影片。

实验内容二：变幻风车1、新建一文档，命名为“变幻风车”。

2、按Ctrl+F8创建一图形元件，命名为“cir”，选择椭圆工具，设置线条色为无，填充色为蓝色，按下Shift键在元件中央绘制一个直径为50的圆。

3、按Ctrl+F8创建一影片剪辑，命名为“c_cir”，将cir拖入编辑区，利用对齐面板将其摆放中元件中央，为别在图层的5、10、15、20按F6插入关键帧，将第5帧的图形大小改为原来的75%，色调为红色，第10帧的图形大小改为原来的50%，色调为黄色，第15帧的图形大小改为原来的75%，色调为青色。

分别在1、5、10、15帧设置补间动画。

4、按Ctrl+F8创建一影片剪辑，命名为“5c_cir”，新建4个图层，在每个图层的第1帧拖入c_cir元件，在属性面板中将元件类型改为图形，播放方式为循环，起始帧分别为1、3、5、7、9，调整各元件位置，将所有图层的第20帧设为普通帧。

5、按Ctrl+F8创建一影片剪辑，命名为“r5c_cir”，将5c_cir拖入编辑区，使用自由变形工具调整其位置及旋转中心点，选择第20帧，按F6插入关键帧，选择图层的第1帧，在属性面板上设置补间为动画，顺时针旋转一周。

6、按Ctrl+F8创建一影片剪辑，命名为“4r5c_cir”，新建3个图层，在每个图层的第一帧将r5c_cir拖入编辑区，在属性面板中将元件类型改为图形，播放方式为循环，起始帧都为1，调整各元件位置、角度及旋转中心点，将所有图层的第20帧设为普通帧。

7、回到场景中，新建3个图层，在每个图层的第一帧拖入一个4r5c_cir元件，在属性面板中将元件类型改为图形，播放方式为循环，起始帧分别为1、5、10、15，将所有图层的第20帧设为普通帧，分别改变2、3、4图层的帧位置，调整各元件位置，效果如图所示。

8、按Ctrl+S保存文件，按Ctrl+Enter发布影片。

实验内容三：湖面落雨1、建立新文档，注意脚本语言版本为Action Script2.0，命名为“湖面落雨”，设置背景色为深蓝色，帧率为30。

2、按Ctrl+F8创建图形元件，名称为“雨滴”，选择直线工具，颜色为白色，绘制如图所示图形。

3、按Ctrl+F8创建图形元件，名称为“水波”，选择椭圆工具，线条色为白色，填充色为无，绘制如图所示图形，执行“修改-形状-将线条转换为填充”将其改变为填充区域。

4、按Ctrl+F8创建影片剪辑元件，名称为“下雨”，将雨滴元件拖入的元件编辑区中，用对齐面板将其设置在中央靠上位置，在图层的第5帧插入关键帧，选择第1帧，将雨滴沿着落雨方向移动到其斜上方，并在该帧设置补间动画，如图所示。

5、新建一个图层，在图层第5帧按F6插入关键帧，将水波元件拖入元件场景中并放置在中央位置，在图层的第25帧按F6插入关键帧，打开“缩放与旋转”对话框，设置缩放为500%，单击确定。

6、选择放大后的水波，在属性面板“颜色”下拉列表框中设置alpha值为0%(放大后水波完全透明)，选择水波图层第5帧，设置补间动画。

为了使效果更加逼真，可再新建两个图层，将水波图层中设置动画部分的帧复制到新图层的相应位置，效果如图所示。

7、回到场景中，将下雨元件拖入场景放置在舞台外侧，在属性面板中设置影片剪辑元件的实例名称为“rain”。

8、新建一个图层，选择新图层第1帧，打开动作面板，在其中输入如下程序段：if(n<50){duplicateMovieClip("rain","rain"+n,n);setProperty("rain"+n,_x,px=random(550));setProperty("rain"+n,_y,py=random(400));setProperty("rain"+n,_xscale,50+py/8);setProperty("rain"+n,_yscale,50+py/8);setProperty("rain"+n,_alpha,50+py/8);n++;}else{n=1;}9、选择两个图层的第2帧，按F5插入普通帧。

10、按Ctrl+S保存文件，按Ctrl+Enter发布影片。

实验内容四：烟花1、找一张夜景图片，将其处理为500×300像素大小，保存为JPEG格式。

2、新建一个大小为500×300像素，帧频为30fps的空白文档，注意脚本语言版本为Action Script 3.0。

按Ctrl+R组合键导入上述夜景图片文件，然后设置其坐标为(0，0)，如图1所示，再采用前面的方法在“属性”面板中添加Main文档类。

图1 导入背景3、按Ctrl+F8组合键新建一个影片剪辑(名称为Star_mc)，进入该影片剪辑的编辑区域，然后按住Shift+Alt组合键的同时使用“椭圆工具”在该影片剪辑的中心点绘制一个圆形。

图2 绘制圆形提示：图形的填充色类型为“放射状”，第1个色标颜色为(R:255，G:0，B:0)，第2个色标颜色为(R:153，G:0，B:0)，第3个色标颜色为(R:153，G:0，B:0)，Alpha为0%。

4、新建一个star图层，再单击“工具箱”中的“多角星形工具”按钮，并在“属性”面板中设置好该工具的参数，然后按住Shift+Alt组合键的同时在影片剪辑的中心点绘制一个如图3所示的星形。

图3 绘制多角星形5、使用“选择工具”调整好星形的顶点位置，如图4所示。

图4 调整顶点6、选择调整好的多角星形，然后原位复制出一份，按Ctrl+Alt+S组合键打开“缩放和旋转”对话框，设置缩放为40%，再设置其颜色为白色，如图5所示。

图5 拷贝并缩放图形7、返回到“场景1”，按Ctrl+F8组合键新建一个影片剪辑(名称为Magic_mc)，再设置填充类型为“放射状”，第1个色标颜色为(R:255，G:255，B:255)，第2个色标颜色为(R:255，G:255，B:204)，第3个色标颜色为(R:255，G:204，B:0)，第4个色标颜色为(R:255，G:102，B:0)，第5个色标颜色为(R:153，G:0，B:0)，Alpha为0%，然后按住Alt键的同时使用“矩形工具”以该影片剪辑中心点为起点绘制一个如图6所示的矩形。

图6 绘制矩形8、使用“任意变形工具”选择矩形，然后按Ctrl+T组合键打开“变形”面板，设置旋转为45°，再单击“重制选区和变形”按钮，复制出3份图形，如图7所示。

图7 复制图形9、复制出5个图形，然后将其调整成如图8所示的颜色，再将复制出的图形转换为影片剪辑，并将其分别命名为01、02、03、04和05 。

图8 复制图形10、将01、02、03、04和05 影片剪辑分别放置在Magic_mc图层的5个关键帧上，然后分别为其添加不同的“发光”滤镜，再新建一个AS图层，最后在“动作-帧”面板中输入stop()：程序，如图9所示。

图9 应用滤镜效果11、采用前面的方法分别为Magic_mc和Star_mc影片剪辑添加元件类，如图10所示。

图10 添加元件类12、新建一个ActionScript文件，将其命名为Main，然后将其保存在该实例的文件夹中，再编写如下代码。

/*** 该类为主程序类* @author student* @version 0.1*/package {import flash.display.Sprite;import flash.display.MovieClip;import flash.events.Event;import flash.events.MouseEvent;import flash.ui.Mouse;public class Main extends Sprite {private var star:MovieClip;public function Main() {Mouse.hide();this.star = new Star_mc();addChild(star);stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler); }private function moveHandler(e:MouseEvent):void {this.star.x = stage.mouseX;this.star.y = stage.mouseY;var _mc = new Magic_mc();_mc.x = stage.mouseX;_mc.y = stage.mouseY;addChild(_mc);_mc.addEventListener(Event.ENTER_FRAME, RemoveDrop);}private function RemoveDrop(event:Event) {var _mc:MovieClip = event.target as MovieClip;if (_mc.scaleX <= 0) {_mc.removeEventListener(Event.ENTER_FRAME, RemoveDrop); removeChild(_mc);}//trace(this.numChildren)}}}代码提示：该文档类基本包含了“星星洒落”实例中Main文档类的知识，此外第18行代码为Mouse 类的hide()方法，用于隐藏鼠标指针，在使用该方法前必须先导入Mouse类(如第11行代码)。