简单的Flash动画.docx

1、简单的Flash动画第3章 简单的Flash动画本章要点 Flash动画的原理及帧的概念 逐帧动画的制作 动作补间动画的制作 形状补间动画的制作 知识准备 Flash动画的原理小时候看过露天电影的朋友可能都看过放映员手上拿的电影胶片，它由一格一格的画面组成，咱们所看到的电影就是由这一格一格的静止画面持续播放而形成的。由于景物在人眼视网膜上的成像有一个短暂的停留，当每秒钟播放的画面数在25幅以上时，咱们就看到了超级生动、流畅的电影。同理，Flash动画也是利用人眼的视觉误差，在1秒钟内持续播放12幅以上的静止画面，由于前后画面内容差距不大，给人错觉恍如是持续运动的动画。 Flash动画中的帧帧是

2、组成Flash动画的大体单位，也是学习Flash必需掌握的重点内容。一、帧的概念帧就是在最小时间单位中出现的画面，一帧就是一个画面。利用flash制作动画，简单来讲就是要在时间轴上肯定动画的每一帧需要显示什么内容。二、帧的类型时间轴中的每一个小方格就代表一个帧，一帧用来寄存Flash动画中某一时刻的画面。帧是组成动画的大体单位，可分为关键帧、普通帧和空白关键帧三种。他们在时间轴中各自的表示方式如图所示。1)关键帧对象可发生转变的帧（如起始帧、结束帧），其中包括一幅静止的画面。在时间轴上用一个黑色小圆圈表示。2)普通帧内容永远与其前面的关键帧完全相同，在制作动画时，可用普通帧延长动画的播放时间。

3、在时间轴上用一个空心矩形表示。3)空白关键帧其中没有任何内容，主要用于画面与画面之间的距离效果。在时间轴上用空心小圆圈表示。 Flash动画的类型1.逐帧动画每一帧都是关键帧，帧的内容都是由用户给出的，适合制作相邻关键帧中对象转变不大的动画。2.补间动画用户制作好若干关键帧后，由Flash通过计算生成中间各帧，使得画面从一个关键帧过渡到另一个关键帧，这种动画又可以分为“运动补间动画”和“形变补间动画”，一般情况下制作者只要肯定“起始帧”和“结束帧”即可。 简单动画制作 制作逐帧动画【例1】制作一个小球“从左到右转动”的动画，并导出为影片。制作步骤：1）新建一个空白文档执行菜单栏“文件”菜单“新

4、建”子菜单，在出现的“新建文档”对话框当选择“Flash文档”，然后点击右下角的“肯定”按钮。2）设置文档的大小和背景色单击菜单栏菜单“修改”“文档”，出现“文档属性”对话框，设置文档大小为500200像素、背景色为白色、帧频（每秒钟播放的帧数）和标尺单位不变，如图所示。3）显示标尺和网格线单击菜单栏“视图”“标尺”及“视图”“网格”“显示网格”，在场景区显示标尺和网格线；单击菜单栏“视图”“网格”“编辑网格”，在出现的“网格”对话框中设置网格线的颜色为灰色、宽度和高度均为20px，如图所示。4）创建第1幅画面用鼠标单击“时间轴”的桢1，在场景区的左侧第二网格处画一个不带边线、5050的蓝色小

5、球，如图所示。5）创建第2幅画面鼠标单击时间轴的第二桢，执行菜单栏“插入”“时间轴”“关键帧”（或按F6键），此时默许选中小球，利用键盘方向键(向右箭头)将小球向右移动一个网格，如图所示。6）创建第3-10幅画面同理，创建第310关键帧，每一帧将小球向右移动一个网格，如图所示。至此，一个包括10帧内容的逐帧动画就创建成功了7）查看效果执行菜单栏“控制”菜单下的“测试影片”子菜单（或用快捷键ctrl+enter），可以看到一个小球循环从左往右运动，证明动画创建成功；8）保留动画一般情况下有两种保留方式，即：直接保留：执行菜单“文件”“保留”，文件类型为.fla，此类型文件必需在Flash环境下才

6、能播放。导出为影片：执行菜单“文件”“导出”“导出影片”，在出现的对话框中，输入文件名，文件类型为.swf，此类型文件可直接播放。将该动画直接保留为“”，并导出为影片“”，比较二者文件大小，并别离打开它们查看效果，体会两种格式动画的区别。总结： 一、制作逐帧动画时，关键帧的数量和内容可以自行设定，但两个相邻的关键帧上的内容必需维持合理的持续性。二、从上例可以看到，若是动画每一帧的内容都由制作人自行设定，工作量是超级庞大的。事实上，动画的制作是由制作人之作好若干关键帧，再由Flash通过计算生成中间各帧，这种动画又可以分为“运动补间动画”和“形变补间动画”。 制作动作补间动画动作补间动画可以通过

7、Flash自动运算功能，对对象的移动、缩放、旋转、颜色渐变等转变进行处置。需要特别说明的是动作补间动画只适用于文字、位图和元件的实例。一、元件与实例1）元件的概念元件是Flash中可以反复利用的一个“模板”，它可以是图形、按钮或一段小动画。2）元件的创建【例2】新建一个名为“ball”的小球元件。1)新建一个空白文件；2)执行菜单栏“插入”菜单“新建元件”，出现如图所示的“创建新元件”对话框，在“名称”文本框中输入元件名称“ball”， “行为”栏当选择元件的类型“图形”。各行为的作用如下：图形：一般用来创建可反复利用的静止对象。按钮：用于创建动画的交互控制按钮，用以响应鼠标事件，如滑过、单击

8、等。影片剪辑：是一段动画且可独立播放，当播放主动画时，影片剪辑元件也在循环播放。3)单击“肯定”按钮，创建了名为“ball”的空白图形元件并进入元件编辑区。在元件编辑区的上边有一个图形元件图标，其后显示图形元件的名称，如图所示；4)在元件的场景中绘制一个红色不带边线的小球；5)制作好的元件保留在“库”面板中，可执行菜单“窗口”“库”，打开“库”面板查看。3）实例的概念按照元件生成的对象称为实例，一个元件可以生成多个实例。二、利用实例【例3】制作一个小球“从左到右转动”的动画，并导出为影片。制作步骤：1）新建一个空白Flash文档，执行菜单栏“文件”菜单“保留”，将文件保留为“”；2）执行“修改

9、”菜单“文档”，设置动画的大小为500200像素，背景色为白色；3）执行“视图”菜单“网格”“显示网格”，在场景区显示网格；4）执行“插入”菜单“新建元件”，新建一个名为“ball”，类型为“图形”的小球元件，并用例2所讲方式绘制一个小球；5）执行“编辑”菜单“编辑文档”，返回到动画的主场景中。为避免机械出现意外，用“文件”菜单“保留”，及时保留中间结果；6）执行“窗口”菜单“库”，打开“库”面板，如图所示，选中“ball”元件，将其拖动到主场景的左侧适合位置，此时系统自动创建了第一关键帧，表现形式是黑色的小圆圈，内容是按照元件“ball”生成的一个实例，如图所示；7）在时间轴的第20帧单击，

10、按键盘上的F6键插入关键帧，此时可以看到，自动生成的2-19帧为普通帧，表现形式是空心矩形，内容自动与前一关键帧相同；8）在20帧处将用鼠标将小球拖动到场景的右边，如图所示；9）鼠标单击选中第一桢，执行“窗口”“属性”，打开“属性”面板。如图所示，在“补间”下拉列表框当选择“动作”选项，此时可以看到在第1桢到第20桢之间产生了一条背景为淡紫色的箭头线，表示Flash已成功计算出“小球从场景左侧运动到场景右边”的中间列位置，自动创建动画成功。可以用鼠标点击2-19帧，查看中间列位置；10）用快捷键“Ctrl+Enter”测试影片，查看效果；11）按键盘F2键保留文件“”，执行“文件”“导出”“导

11、出影片”，在出现的“导出影片”文本框中，选择适合的保留位置，并输入文件名“”。提示：上例中肯定对象运动的起点和终点，由计算机自动计算中间各帧的位置，这样生成的动画对象是做匀速运动，若是对象存在加速度，即做非匀速运动如何实现呢？若是对象在移动的同时颜色发生转变、旋转及大小缩放呢？其实，这些效果都可以通过“属性“面板来实现。【例4】在上例基础上实现小球运动的同时颜色、大小及速度发生转变。制作步骤：1）打开已有的flash文档。执行菜单“文件”“打开”，在出现的“打开”对话框中找到上例保留的文件“”，选中打开；2）鼠标单击选中第20帧（此时默许选中第20帧上的所有对象），鼠标在空白处单击取消对所有对

12、象的选择，然后在小球上单击单独选中小球，此时“属性”面板内容变成选中小球实例的属性，包括实例宽和高度、位置、名称、颜色等，如图所示；3）修改实例颜色。单击“属性面板”的“颜色：”下拉列表框右边的箭头，出现如右图所示5个选项，各部份功能如下：无：取消实例的颜色效果。亮度：用于设置实例的亮度，100%最亮为白色，-100%最暗为黑色。色调：用于从头设置实例的色调。Alpha：用于设置实例的不透明度。取值范围为0%-100%，100%为完全不透明状态，恍如一堵墙；0%为完全透明状态，恍如透明玻璃；介于二者之间的数字为半透明状态。高级：主要用于对实例的颜色、亮度和透明度的综合调整。本例选择“色调”选项

13、，此时“颜色”栏如图所示，单击颜色调节框，在弹出的颜色列表当选择色调颜色为绿色（#00FF00）。固然也可以通过第二行的RGB（红、绿、蓝）三原色数值框来改变实例的色调，本例绿色其对应RGB值别离为0、25五、0。颜色调节框右边的数值框，用来设置RGB颜色对实例的影响程度，数值越大，影响越大，数值为0时没有任何影响。大家可以现场试一下。4）修改实例大小。方式一：在属性面板的宽度区输入100，高度区输入100；方式二：执行“窗口”菜单“设计面板” “变形”，在出现的变形面板中，输入缩放比例150，如图所示；方式三：若是无需精准缩放，也可通过“修改”菜单 “变形” “缩放”，当实例周围出现如图所示

14、的8个调节框时，利用调节框来调整大小。5）改变实例运动的速度。鼠标单击选中第1帧，在“属性面板”的“简易”文本框中输入正值100，让小球做减速运动。“简易”文本框可用来改变实例运动的速度，负值（-1到-100）表示速度愈来愈快，正值（1到100）表示速度愈来愈慢。本例中， 6）保留文件。选择“文件”-“另存为”，将文件另存为“”，并导出相应影片。总结：本例中，涉及到下列知识点，你都掌握了吗？1）调整实例颜色； 2）调整实例大小； 3）调整实例运动速度【例5】“文字旋转”效果的实现。制作步骤：1）新建一个空白Flash文档，执行“文件”菜单“保留”，将文件保留为“”；2）执行“修改”菜单“文档”

15、，设置动画的大小为200200像素，背景色为白色；3）用“视图”菜单 “标尺”，在场景区显示标尺；4）在垂直标尺处按住鼠标左键向右拖出一条绿色引导线到水平标尺100像素处，一样在水平标尺处按住鼠标左键向下拖出一条引导线到垂直标尺100像素处，两引导线的交点即为场景区的中心点，如图所示；5）单击工具栏中的文本工具，将鼠标光标移到场景中，当其变成+A形状时，按住鼠标左键拖动，出现一个虚线框，将虚线框拖至适当大小后，释放鼠标将出现一个文本框 ，利用“属性” 面板设置字体为“隶书”，字号40，颜色为“#990000”，如图所示：6)在文本框中输入文字“江海学院”，单击工具栏中的选择工具，然后在适才所写

16、文字上单击选中文字，按住鼠标左键将文字拖到场景的中心位置，如图所示；7)在时间轴的第20帧单击，按“F6”插入关键帧；8)鼠标单击选中第一桢，在“属性”面板的 “补间”下拉列表框当选择“动作”选项，在“旋转”下拉列表框当选择“顺时针”选项，并输入旋转次数为“1”，如图所示；9)用键盘组合键“CtrlEnter”组合键查看结果并导出影片。10)总结：在本例中，补充了两个知识点，请大家仔细体会：（1）利用标尺进行定位；（2）文字的录入及编辑；（3）所有能创建动作补间动画的对象，如元件的实例、文字等都有一个一路点：选择该对象时，其周围围都有淡蓝色的方框出现，这一点，你注意到了吗？ 制作形状补间动画形

17、状补间动画是指形状逐渐发生转变的动画，描述了在一段时间内将一个对象变形为另一具对象的进程。在Flash中，用户可以变形或过渡对象的形状、颜色、透明度、大小及位置。需要特别说明的是形状补间动画只适用于“形状（直接用画图工具绘制出来的对象）”，而元件、群组、位图及文字，必需先将它们分解，然后再做形变，具体实现办法后面会详细介绍。【例6】“圆到矩形”形变效果的实现。制作步骤：1）新建一个空白Flash文档，执行“文件”菜单“保留”，将文件保留为“”；2）执行“修改”菜单“文档”，设置动画的大小为400400像素，背景色为白色；3）用鼠标单击“时间轴”的桢1，在场景区的中间画一个边线为黑色、填充色为黄

18、色的椭圆；4）利用“工具面板”中的选择工具拉一个框同时选中椭圆的边线和填充色，在“属性”面板中可以看到对象为“形状”，表示它符合创建形状补间动画的条件。在“属性”面板里设置椭圆宽度和高度都为100，如图所示；5）鼠标单击选中第25帧并按“F6”键，此时Flash自动在该帧创建关键帧，且内容与帧1相同，利用“面板工具”中的选择工具拉一个框同时选中椭圆的边线和填充色，按键盘上的【delete】键删除椭圆，并在该帧重画一个100100的矩形（大小也可以自定）；6）鼠标单击选中第1帧，在“属性”面板的“补间”下拉列表框当选择“形状”选项，此时可以看到在第1帧到第25帧之间产生了一条背景为淡绿色的箭头线

19、，表示Flash已成功计算出对象“从圆转变成矩形”的中间各状态，自动创建动画成功。可以用鼠标点击1-25帧，查看形变中间各状态，如图所示；7）保留、查看结果及导出影片。【例7】“直线延伸”效果的实现。制作步骤：1）新建一个空白Flash文档，执行“文件”菜单“保留”，将文件保留为“”；2）执行“修改”菜单“文档”，设置动画的大小为400200像素，背景色为白色；3）用鼠标单击“时间轴”的桢1，利用“直线”工具在场景区的左侧画一条短直线；4）利用“属性”面板设置直线的宽度为30，高为3，颜色为黑色，如图所示；5）鼠标单击选中第25帧并按“F6”键，此时Flash自动在该帧创建关键帧，且内容与帧1

20、相同，在该帧选择直线，利用“属性”面板设置其宽度为300；6）鼠标单击选中第1帧，在“属性”面板的“补间”下拉列表框当选择“形状”选项，此时可以看到在第1帧到第25帧之间产生了一条背景为淡绿色的箭头线，表示Flash已成功计算出“直线从短到长”的中间各状态，自动创建动画成功。7）保留、查看结果及导出影片。【例8】字符转变效果：“江-海-学-院”的实现。制作步骤：1）新建一个空白Flash文档，执行“文件”菜单“保留”，将文件保留为“”；2）执行“修改”菜单“文档”，设置动画的大小为200200像素，背景色为白色；3）用“工具面板”上的文本工具，在第一帧的场景区中间写上文字“江”；4）用“工具面

21、板”的“选择”工具在文字上单击选中文字，在“属性面板”中设置字体为“隶书”，字号96，并利用键盘方向键或“属性面板”的位置文本框将其微调至场景区中心；5）在帧1五、30、45帧按“F6”别离插入关键帧，这三帧内容默许与第一关键帧相同为“江”字，其它普通关键帧内容与其前一关键帧同；6）将第15关键帧的文字改成“海”鼠标单击帧15，Flash自动选中该帧所有内容，“江”字周围围出现淡蓝色方框；鼠标单击选中工具栏中的文本工具A，然后光标在场景区淡蓝色方框内“从左向右”拖动选中江字，从头输入“海”字取代原来的“江”字。 7）用一样的方式将30帧的内容改成“学”字，45帧内容改成“院”字；8）将各关键帧

22、内容变成适合做“形状补间动画”的形状鼠标单击选中帧1，然后用“工具面板”的选择工具在“江”上单击选中文字，属性栏就出现了文字“江”的各属性，可以看到它的类型是“静态文本”，而不是“形状”，如图所示，所以还不能直接做“形状补间动画”；执行“修改”菜单“分离”，可以看到“江”字周围的淡蓝色方框消失，而以黑底白点取代之，同时属性栏“江”的类型变成了“形状”，如图所示；在1五、30、45各帧也执行“修改”菜单“分离”，别离将“海”、“学”、“院”三个字也从“静态文本”变成“形状”。9）鼠标先点击第一帧，然后按住键盘【shift】不放，再点击45帧，就同时选中了1-45帧；10）在“属性”面板的“补间”

23、下拉列表框当选择“形状”选项，此时可以看到时间轴上每两个关键帧之间都产生了一条背景为淡绿色的箭头线，表示Flash已成功计算出“字符转变”的中间各状态，自动创建动画成功。11）保留、查看结果及导出影片。提示：通过本例或许大家已经知道对于其它不能直接做“形状补间动画”的对象（如元件、群组、位图等），也能通过“修改”-“分离”，先变成“形状”，然后再做形变更画。不相信？那就当即去试一下吧。好了，至此咱们已经把有关简单动画制作的相关知识都讲完了，你都学会了吗？它们可都是学习下一章“复杂的Flash动画制作”的基础哦。 综合实例【例9】“旋转风车”的制作。知识准备：三角形的绘制Flash没有现成的三角

24、形工具，三角形是通过矩形变形取得的，具体步骤如下：1）单击“工具面板”中的矩形工具，然后在“工具面板”的颜色区域中单击设置“笔触颜色”的按钮，弹出颜色列表，单击按钮，设置矩形无边线；2）在“工具面板”的颜色区域中单击设置“填充色”的按钮 ，弹出颜色列表，选择“黄色”，设置矩形填充色为黄色；3）光标移到场景区，在起点按下左键向右下方拖动鼠标后松开，即完成了一个任意大小矩形的绘制；4）单击“工具面板”左上角的“选择工具”，单击选中矩形，在“属性面板” 的“实例宽度”区域中输入矩形宽度50，在“实例高度”区域中输入矩形高度80，所绘矩形如图所示；5）单击选中“工具面板”的“选择工具”，将光标移到所绘

25、矩形的右上角（注意万万不要选中矩形），此光阴标箭头右下角的虚框变成一个直角，按住鼠标左键将右上角拖到左上角的位置，这时可以看到一个三角形已出现了，如图所示；制作步骤：1）新建一个空白Flash文档，执行“文件”菜单“保留”，将文件保留为“”；2）执行“修改”菜单“文档”，设置动画的大小为300300像素，背景色为白色；3）叶片元件的制作执行“插入”-“新建元件”，新建一个名为“leaf”，类型为“图形”的元件；在“leaf”元件的编辑区绘制一个无边线，填充色为黄色，大小为45*90的矩形；用鼠标将矩形的上方的两个角拖动到上方边的中间，使之变形为一个等腰三角形；将光标移到等腰三角形的一个腰上（注

26、意不要选中三角形），此光阴标箭头右下角的虚框变成一个弧形，按住鼠标左键向外拖出一个弧形，如图所示；用一样方式将三角形的另一个腰及底边也变形成弧形，如图所示；为了使叶片旋转时不致发生偏离的情况，将叶片尖端指向十字定位中心，并利用“属性面板”调整叶片大小为35*100，如图所示。 4）风车元件的制作新建一个名为“windmill”，类型为“图形”的元件；在“windmill”元件的编辑区，将“库面板”中的“leaf”元件拖动到编辑区中心；选中叶片，执行菜单“编辑”“复制”（Ctrl+C），再执行菜单“编辑”“粘贴到当前位置”（Ctrl+Shift+V）将叶片复制在原来的位置上；执行菜单“修改”“变

27、形”“缩放”，则新复制的叶片周围围出现调节框，叶片中间的不圆圈为变形中心，如图所示；用鼠标将叶片的变形中心移到叶片尖端，如图所示；执行菜单“窗口”“设计面板”“对齐”，打开“变形面板”，在旋转(Rotate)项下输入45，单击键盘上的回车符，新复制的叶片将围绕旋转中心顺时针旋转45度，如图所示；用一样的方式再复制出6个叶片，组成八个叶片的风车，如图所示。注意，复制其他叶片时，每次旋转时将“变形面板”中的旋转角度值多加45度。5）执行“编辑”菜单“编辑文档”，返回到动画的主场景中。为避免机械出现意外，用“文件”-“保留”，及时保留中间结果；6）执行“窗口”菜单“库”，打开“库”面板，选中“win

28、dmill”元件，将其拖动到主场景的中间位置，此时系统自动创建了第一关键帧，表现形式是黑色的小圆圈，内容是按照元件“windmill”生成的一个实例；7）光标单击选中第30帧，按“F6”插入关键帧；8）选中第1帧，在“属性面板”的“补间”下拉列表框当选择“动作”，并设置旋转方式为“逆时针3次” ；9）执行菜单“控制”“测试影片（Ctrl+Enter）”查看结果；10）通过修改旋转次数适当调整风车的旋转速度，保留并导出影片。【例10】制作一个从左向右正在行驶的汽车。分析：1）汽车向前行驶，位置发生转变，属于“动作动画”，动作动画的对象必需为元件，故应制作汽车元件；2）汽车向前行驶的同时，轮子在转

29、动，故转动的轮子也应做成元件（类型为“影片剪辑” ）；3）对象转动也属于“动作动画”，故在制作转动的轮子前应先制作静态的轮子元件。操作步骤：1）新建一空白文档，并命名为“”2）新建静态车轮元件执行菜单“插入”“新建元件”，元件名为“wheel”，类型为“图形”；在元件“wheel”的编辑窗口中间，利用“放大镜”工具在窗口单击将窗口放大为200%，如图所示；利用“椭圆”工具，以“”为标志的窗口中心绘制一个大小为15*15，边线为黑色、精细为2，填充色为灰色的小圆，然后再绘制一个大小为50*50，边线颜色为黑色、粗细为8，无填充色的大圆；如图所示；利用“直线”工具在两个圆之间绘制粗细为3的黑色直线

30、，如图所示；利用“选择”工具拖动直线变形为曲线（注意不要选择直线），如图所示；3）新建转动车轮元件新建名为“go wheel”，类型为“影片剪辑”的元件；打开“库”面板，将元件“wheel”拖动到元件“go wheel”的编辑窗口以“”为标志的中心；在20帧处按“F6”创建关键帧；鼠标选中第1帧，在“属性面板”的“补间”下拉列表框当选择“动作”，并设置旋转方向为“顺时针”，次数为“2”，如图所示；4）新建汽车元件新建名为“car”，类型为“图形”的元件，并执行菜单“视图”“缩放比例”“100%”，设置窗口以100%的方式显示；利用“矩形工具”、“铅笔工具”、“颜料桶工具”及“橡皮檫工具”配以适当变形绘制自已喜欢的车身，如图所示；将“库面板”中的元件“go wheel”拖动的车身的车轮位置，如图所示；5）鼠标单击时间轴 “场景1”，返回到动画的主场景中，单击选中第1帧，将“库面板”的元件“car”拖到场景的左侧；6）在30帧按“F6”创建关键帧，并在该帧将汽车拖动到场景右边；7）在第1帧创建“动作补间”；8）测试并保留影片。总结： （1）本例涉及了元件的第三种类型-“影片剪辑”，各类型作用再回顾一下：图形：一般用来创建可反复利用的静止对象。按钮