实验三 利用Flash制作形变动画

实验三利用Flash制作形变动画

实验目的

1 ．理解形状补间和动作补间动画的基本原理。

2 ．掌握形状补间和动作补间动画的区别。

3 ．能进行形状补间和动作补间动画的制作。

实验学时

2 学时

实验原理

1 ．形状补间动画

（1）形状补间动画的概念

在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间帧的值或形状的变化来创建的动画被称为“形状补间动画”。

（2）构成形状补间动画的元素

形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用元件或文字，则必需先“打散”，再变形。

（3）形状补间动画在时间帧面板上的表现

形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如图1所示。

图1 “形状补间”动画的表现形式

（4）认识形状补间动画的属性面板

“缓动”选项：

在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入具体的数值，形状补间动画会随之发生相应的变化。

取值在1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。

取值在1 到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减速补间。

默认情况下取值为0，补间帧之间的变化速率是不变的。

“混合”选项：

“混合”选项中有二项供选择。

“角形”选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。

“分布式”选项：创建的动画中间形状比较平滑和不规则。

2 ．动作补间动画

（1）动作补间动画的概念

在Flash的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flash 根据二者之间帧的值的变化所创建的动画被称为动作补间动画。

（2）构成动作补间动画的元素

构成动作补间动画的元素是元件，包括影片剪辑、图形、按钮等等。除了元件,文字也可以作为动作补间动画的对象。但如果是形状，必须把形状“组合”或者转换成“元件”后才可以实现动作补间动画。

（3）动作补间动画在时间帧面板上的表现

动作补间动画建好后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧

之间有一个长长的箭头，如图2所示。

图2 “动作补间”动画的表现形式

（4）动作补间动画的属性面板同形状补间动画。

实验内容与步骤

1 ．形状补间动画的制作

实例：“樱花节”的形状补间动画

（1）新建文档，设置其背景色和文档大小。

（2）选择“文件”菜单中的“导入”，将光盘中的素材图片“樱花1.jpg”、“樱花2.jpg”、“樱花3.jpg”（光盘/Course/Flash/sucai.rar）导入至库。

（3）选择“图层1”的第1帧，该帧默认情况下为空白关键帧。从库中将“樱花1”拖放至舞台，该图片与舞台默认大小一致，为550*400像素，此时只需打开对齐面板，使图片相对应于舞台水平中齐和垂直中齐即可。

（4）选中图片，选择“修改”菜单中的“分离”命令或使用快捷键Ctrl+B，将位图分离。然后选择椭圆工具，笔触色设置为“黑色”，填充色为无色，在图片中央绘制一个正圆，如图3所示。最后选中椭圆外的内容，按Delete键删除。图3 编辑图片

（5）同理，分别在第5、10帧处插入空白关键帧，将“樱花2”和“樱花3”放置于第5、10帧，并进行同样的编辑操作。

（6）在第15帧处插入关键帧，将樱花图片的黑色线条去除。

（7）在第35帧处插入空白关键帧，使用文本工具输入文字“第三届樱花节”，设置文字的字体、字号和颜色，使文字相对于舞台水平中齐和垂直中齐。然后选

中文字，两次使用Ctrl+B分离文字，文字外边框消失，此时文字被分离为矢量形状。

（8）将鼠标置于第15-35帧中的任意一帧上（第35帧除外），打开“属性”面板，将“补间”类型设置为“形状”，即可实现樱花向文字的变化。“属性”面板如图4所示。

图4 形状补间的属性面板

（9）在第45帧处插入关键帧，使樱花变化为文字后可在“第三届樱花节”停留10帧的时间，不致于一闪而过。然后文字“第三届樱花节”再向“即将开幕”变化。

（10）在第65帧处插入空白关键帧，输入文字“即将开幕”，设置文字的字体、字号、颜色并居中，同样将文字分离两次成矢量形状。最后创建45帧向65帧变化的形状补间。

（11）在66、67、68、69、70处分别按下F6插入关键帧，选中每一个关键帧对应的内容，然后在工具箱中的“填充色”中设置不同的颜色对“即将开幕”进行填充。

（12）在第80帧处按下F5插入普通帧，使“即将开幕”延长至80帧。最后保存文件，并测试影片观看动画效果。该动画的帧的分布如图5所示。

图5 帧的分布

2 ．动作补间动画的制作

实例：“樱花节”的动作补间动画

（1）新建文档，设置其背景色为白色、文档大小为550*400。

（2）插入一个图形元件，命名为“文字”，在这个图形元件的第1帧中输入文字“第三届樱花节”，并使文本相对于舞台居中。

（3）回到场景，将“文字”这个元件拖放到图层1的第一帧中，注意“文字”在场景中的位置，将其先放在白色舞台外的右上角。如图9所示位置。

（4）在第5帧插入一个关键帧，将文本沿水平方向拖动到舞台上的右上角。如图10所示位置。在这两帧中要注意，元件不能被分离。