运动补间动画

第三节运动补间动画(三):专题制作

教学目的：通过简单动画制作来熟悉FLASH各项功能使用，并使学生掌握：影片属性的设置；元件的建立方法；图片的导入，文字元件的建立，文字属性设置与多彩文字制作。椭圆工具的使用及椭圆颜色属性的设置方法；打开库及将库中的组件放入舞台的方法；初步了解帧、关键帧的概念及如何插入关键帧；如何选择对象和移动对象；移动动画的实现方法；属性面板的使用；新建和保存文件；理解Flash的两种文件格式:fla 和 swf。

教学重点：理解关键帧的概念及如何插入关键帧。

教学时间：1～2课时

教学过程：

先示范一遍：①图片放大并且消失于舞台②图片淡入、停留并且飞向舞台外③④从舞台外飞入，停留，飞出舞台⑤图片从上到下或者从左到右移动等

案例一：图片放大并且消失于舞台

一、建立新动画

1、运行Flash 这时系统启动并自动建立了一个新文件

▲执行：“文件/新建”菜单命令可以新建一个的影片文件（或者ctrl+n）2、设置舞台属性：

左键单击舞台——属性----文档大小

在弹出的影片属性对话框中可以修改:

(1)舞台尺寸(尺寸)(2)背景色(点黑三角) (3) 帧频即播放速度(一般每秒12帧的播放速度比较合适)(4)选用何种标尺单位(点黑三角，一般用像素)等。这里我们设定如下图1。

图1，影片属性的设置

二、建立元件

1．新建图形元件（运动动画中运动的对象必须作成元件，即演员化装）。

执行“插入----新建元件”菜单命令（或按Ctrl+F8）进入建立元件的对话框窗口，给元件起名（最好用拼音名或数字名,比如lianghui1,也可以是中文名字），选择类型是图形。然后按确定按钮。马上就进入到创建元件的编辑状态。

2．在建立任何元件的时候，要执行选中建立的元件图符----窗口---设计面板------信息（即编辑区域图形的信息）----修改X=0，Y=0。这样做的目的是图形的中心与元件编辑区域的中心重合。同时也可在信息里修改图象的宽、高。便于操作。或者点对齐按钮，相对于舞台水平与垂直中齐，图片中心就与编辑区域的中心对齐（注意告诉学生，在这里可以画图，可以写字，可以导入图片等来创建元件，并示范文字或者画矢量图：如小球）

三、建立运动动画

1、设置起始位置：

(1)图片元件做好后，点击时间轴右上角的回到主场景。(所以元件的运行都必须在场景上进行，想让图片动起来，就必须到场景里设置)

(2)按Ctr+L打开符号库，发现里面已经有一个做好了的图片元件。在预览窗口中把该元件拖动到场景舞台上放到中心部分（可利用对齐面板调整）。我们同时还注意到时间轴的第1帧上的小圆圈已经由空心变成了实心，表明该帧不再为空，变为关键帧。

注释：符号库：不论我们创建什么样元件符号，都会自动的加入到Flash符号库中。可以通过窗口----库—或者快捷键Ctrl+L打开符号库。

▲符号库是flash的符号管理中心，在库中可以看到每个符号的名称，类型，使用次数和修改日期等重要参数，在符号上单击鼠标，就可以在空白区域里看到符号图形或者波形，如果是影片片段符号，还可以进行播放。

▲编辑符号：要编辑已经做好的符号，只需要在符号库中双击那个符号的图标，这样就进入了符号的编辑状态，在符号编辑状态绘图与在场景中绘图的方法是完全一样的。如图：

图3，图形符号的编辑模式

▲对符号更改名称，在符号库中要改名的符号名称上单击鼠标右键，在弹出菜单里选择重命名既可。

▲符号的类型：

★图形符号一般是只有一个帧的静止图片。一个比较长的FLASH动画要使用大量的图形符号。图形符号有时可以制作成由多个帧组成的动画，但

不能对它添加动作和声音控制。

★按钮符号是用于创建动画的交互控制按钮，它有4个不同的状态：鼠标抬起、鼠标滑过、鼠标按下和鼠标单击。分别制作4个状态的内容可以

创建的按钮。（演示公共库中的按钮）

★影片片段符号，就是一段动画，它可以独立于时间轴的播放。它的制作与制作动画的过程是一样的，只是影片片段是一个符号，被放在符号库

而已。

2、设置目的位置：

(1)、在时间轴第30帧单击鼠标左键，该帧变蓝表示被选。

(2)、按F6键插入一个关键帧，单击选中图片元件，利用自由变形工具把图片等比例放大到合适大小（配合SHIFT键）。

(3)、单击选中时间轴上的第1帧，单击选中图片元件，利用自由变形工具把图片等比例缩小到合适大小（配合SHIFT键）。然后单击下面的属性面板，点击补间后面的黑三角,在其下的下拉菜单中选动作。或者单击选中时间轴上的第1帧，然后右键单击，在弹出的对话框里选择创建补间动画。

图4在帧属性里设置运动动画

（4）、为了使图片多停留一会让观众看清楚，可以添加帧或者关键帧保持静止状态（即不创建运动动画），在这里添加关键帧，60处F6，停留一会需要文字图片淡出，必须要创建下一步动画，所以还要继续添加关键帧90处F6。（5）、60帧处图片元件属性不做变化，在90帧处选中图片元件，把它移动到舞台的上端。

（6）90帧处创建补间动画，动画就做成了。

▲图片放大并且淡出时间轴状态。（图5）

这时时间轴窗口的状态如图5所示，第1帧和第30、60和90帧之间出现了一个实线箭头，且背景变成淡紫色，表示这两段帧之间有两段运动动画。如果帧与帧之间出现了虚线，表示过渡不成功，需要重新查看每一个关键帧及其属性。30与60帧没有运动动画，图片处于静止状态。

四、测试效果：

执行“控制\测试影片”菜单命令，或者按下Ctrl+Enter预览窗口，以全屏预览动画，或者执行窗口---工具栏----控制器，按播放钮播放动画，可以看到小球从舞台的左上角匀速移动到下部又均匀的移动到右上部。

五、存盘

执行“文件/保存”菜单命令(或按Ctrl+S键)，在弹出的对话框中输入存档文件名，确定。这时系统会把源文件用*.fla格式存档，是可编辑文件。执行“文件/导出影片”保存成*.swf的电影文件，不可编辑，可观看文件。

六：学生练习，解答学生在制作过程中遇到问题。提醒注意：作好之后保存起来，以备下面做

作业：

1、了解一个Flash 动画的整个制作过程；（动手制作），图片自己找

案例二：图片淡入、停留，放大淡出

目的：在掌握动画基础上进一步练习，达到熟练制作基本动画，并引导学生进行动画创意。

一、打开保存的案例一源文件

二、新建元件

1)插入/新建组件：命名,类型为图片；选择对象-----窗口——信息——

x=0,y=0,使图片的中心与编辑区域中心重合。或者点对齐按钮，相对于舞台水平与垂直中齐，图片中心就与编辑区域的中心对齐

四、创建动画

1) 回到场景1，新建图层2（为什么呢？层使得舞台对象有层次感，修

改起来方便，如果所有对象放到一层里，动画显得单调，放到不同图层可以在同一时间内可以同时播放多个动画，建议我们对舞台上每个对象都设置不同图层。最好一个对象占一图层），图层命名。在91帧处F7插入一空白关键帧（▲空白关键帧表示它是没有内容的关键帧。如果新建一文件，flash 则会在第1帧处自动创建一个空白关键帧即一空位置。在空白关键帧，才能创建各种对象。）图层2第一帧是自动生成空白关键帧，但是我们不需要在第一帧处放对象，需要在91处放对象，所以要在此处先创建空白关键帧，占一空位置，然后在此帧处才能创建对象。

2）将图1元件从图库中拖放到舞台上中心位置。此时在第91处自动生成了一关键帧。

2)用鼠标单击第121帧（根据动画需要可以延长或者缩短帧数）。此时帧

变成蓝色。按f6键添加关键帧。

3)在91处修改图1元件属性，修改ALPHA值为0%，121处不做修改，创

建动画。完成图片淡入过程。但需要停留一段时间再消失。需要创建另外一段动画。

4）在155，200帧处分别F6，在200处修改元件属性，放大变形并移动图片到舞台的合适位置，然后创建动画。

5）分别在240和275帧处F6，修改275帧处图片的属性透明度为0

4、测试影片：控制/测试影片或者ctrl+enter。测试影片效果。

5、存盘：

1)存成flash文件：格式为*.fla。选择路径，输入文件名，确定。

2)输出可播放文件：格式为*.swf。文件/导出影片。设置参数导出。

3)输出动画文件：格式为*.gif。文件/导出影片。

③从舞台外飞入，停留，飞出舞台⑤图片从上到下或者从左到右移动等做法原理如上案例。

图层3，4，5做法同上原理。（学生自己做，力求有创意）

注意：每做好一图层，可以锁定图层，避免下一图层受到影响

知识点：FLASH动画原理。FLASH动画是以时间轴为基础的动画，是以时间为顺序，由先后排列的一系列帧组成。帧是在动画里最小时间单位里出现的画面，帧频率和帧的多少决定了动画的时间长短，例如FLASHMX默认是12帧/秒，这就意味着每一秒要显示12帧动画，如果动画共有36帧，整个动画就播放3秒。实际上，FLASH动画制作过程就是决定动画每一帧显示什么内容的过程。利用FLASH绘图工具栏，可以绘制出动画中一帧的显示内容。如果象传统动画一样自己绘制动画的每一帧，这在FLASH中成为逐帧动画，另外，FLASH提供了更为简单的动画制作方法，利用关键帧处理技术生成补间动画，补间动画可分为运动动画和形状动画。