搜索
第三章Flash平面动画制作教学目标教学重点、难点教学内容本章小结第三章Flash平面动画制作教学目标通过这章的学习，学生可以熟练的掌握逐帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画这5种动画的制作方法和技巧。第三章Flash平面动画制作教学重点与难点逐帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画的制作方法和设计技巧。第三章Flash平面动画制作本章计划授课14学时教学内容3.1Flash平面动画制作概述3.2“新年快乐”案例3.3“世界杯集锦”案例3.4“闪闪的红星”遮罩动画案例3.5“蝴蝶飞”引导动画案例3.6“走路的小青蛙”逐帧动画案例3.7“贺卡”综合动画案例3.1Flash平面动画制作概述本节内容1.Flash平面动画的基本概念2.Flash平面动画的基本制作方法3.平面动画的设计技巧3.1Flash平面动画制作概述一、Flash平面动画的基本概念动画——任何随着时间而发生的位置或者形态上的改变。Flash动画是由一个个“帧”上的图片连接而成的，帧是动画最基本的单位。舞台——是制作动画的地方，在播放器中播放动画时，只有舞台中的对象被显示。工作区域——舞台和周围的灰度区域场景——是动画的另一个组成部分是“场景”的变换，就像一部电影不可能只在一个地方拍摄一样，制作Flash动画也需要有不同的场景。3.1Flash平面动画制作概述二、Flash平面动画的基本制作方法1、逐帧动画——将动画的每一帧均设置为关键帧，通过改变每一个关键帧中的图像而产生动画效果。逐帧动画是Flash所提供的最基本的动画形式。2、补间动画——补间动画是Flash提供的一种最有效的动画形式。无论是创建角色动画或者动作动画，甚至最基本的按钮效果，补间都是必不可少的。CS5中补间动画可以分为补间动画、形状补间动画和传统补间动画。3.1Flash平面动画制作概述二、Flash平面动画的基本制作方法3、遮罩动画——遮罩动画是将一个图层设置为遮罩层，此图层中的对象将相应地转换为遮罩对象。其它图层则为被遮罩层，这些图层的对象被遮罩对象所屏蔽的那部分才可显示。4、引导动画——引导动画实际上是在运动补间动画的基础上添加一个引导图层，该图层有一条可以引导运动方向的引导线，使另一个图层中的对象依据此引导线进行运动的动画。3.1Flash平面动画制作概述三、Flash平面动画的设计技巧注意以下几个要点：1．要想吸引观众，最重要的是让动作具有一定的含义。2．动作应该支持动画的内容和主题。3．动作可以像文章和颜色一样传达情绪、感情和个性。4．在日常生活中仔细观察动作并记录下来，建立一个创建动画时的“资源库”。5．动作的设计要符合自然规律。3.2“新年快乐”案例本节内容1.案例效果2.操作步骤3.技术要点4.练习3.2“新年快乐”案例一、案例效果重点与难点：形状补间动画的特点、创建方法，及如何设置形状提示点来控制形状补间动画的中间过程。3.2“新年快乐”案例二、操作步骤1.新建文档并命名启动AdobeFlashCS5后，新建一个文档，对背景颜色和舞台大小进行相应的设置，保存文档，命名为“新年快乐”。2.设置背景图片将“图层1”改名为“背景”，把素材中的背景图片文件“烟花”导入到舞台，并设置宽为400、高为300，居中对齐，扩展到100帧。锁定图层。3.2“新年快乐”案例二、操作步骤3．绘制灯笼第一步：插入4个新图层，分别命名为“新”、“年”、“快”、“乐”。将“贺”、“新”、“禧”三个图层锁定。单击“新”图层的第20帧，按F6键增加一个关键帧。利用“矩形工具”和“椭圆工具”绘制如下左“灯笼”图形：3.2“新年快乐”案例二、操作步骤第二步：分别在“年”、“快”、“乐”图层中第20帧单击F6键添加关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如下图。3.2“新年快乐”案例二、操作步骤4．绘制“新年快乐”四个文字在对应的图层40帧位置，文字位置与灯笼位置对应。3.2“新年快乐”案例二、操作步骤5．给此四个图层均在第60帧和第80帧添加一个关键帧。选中“新”、“年”、“快”和“乐”4个图层的第20帧复制到4个图层的第80帧位置。6.同时选中“新”、“年”、“快”和“乐”4个图层中的20～40帧之间的任意帧右击选择“创建补间形状”，再用同样的方法在第60～80帧之间也创建形状补间动画。7、测试影片，保存文件，并导出影片。3.2“新年快乐”案例三、技术要点1、制作形状补间动画形状补间动画的方法有如下三种：（1）选择开始关键帧和结束关键帧间的任何一帧，在“属性”面板中设置。（2）右击开始关键帧和结束关键帧间的任何一帧，在快捷菜单中选择“创建补间形状”。（3）单击开始关键帧和结束关键帧间的任何一帧，选择【插入】【时间轴】【创建补间形状】菜单项。注意：FLASH只能对一些简单的形状进行形状补间,不能对一个组、元件或者可编辑的文字运用形状补间。3.2“新年快乐”案例三、技术要点2.设置形状提示点在已经创建了一个基本的形状补间动画后，可以按照以下步骤添加形状提示点：（1）开始关键帧中选择一个形状，然后单击【修改】【形状】【添加形状提示】菜单项（2）在开始关键帧的形状上确定一个点，用【箭头工具】进行选择并移动第一个形状提示点，把它放在形状上一个用户想要其与最终形状中的一块区域进行匹配的区域上。3.2“新年快乐”案例三、技术要点（3）当把播放头移动到形状补间动画的结束帧上时，会看到一个与放在开始帧上的标了字母的形状提示点相匹配的另一个标了相同字母的形状提示点。当结束关键帧中的形状提示点的颜色由红色变成了绿色，而在开始关键帧中的形状提示点由红色变成了黄色，则表示形状提示点已经与作品建立了正确的连接。（4）将播放头在时间轴上移动预览新的形变过程。不停地加入形状提示点，或对它们进行重新定位，直到动画产生出了理想的形变过程。3.2“新年快乐”案例四、练习1、制作一个笑脸到哭脸的变脸形变动画，效果如下图所示。（提示：笑脸系列形状可采用【文本工具】输入，字体采用“Windings”，输入大写字母“L”则可输入一个笑脸，其它两张脸对应着大写字母“K”和“L”。）3.2“新年快乐”案例四、练习2、制作一个变手的形变动画，并通过设置形状提示点来控制手指之间的对应变换位置。动画中手的姿势如下图所示。（提示：手的系列形状可采用“文本工具”输入，字体采用“Windings”，输入大写字母“A”～“G”实现）3.3“世界杯集锦”案例本节内容1.案例效果2.操作步骤3.技术要点4.练习3.3“世界杯集锦”案例一、案例效果重点与难点：传统补间动画的制作方法和技巧，及如何设置旋转、运动的快慢和逐渐消失的效果。3.3“世界杯集锦”案例二、操作步骤1.新建文档并命名启动AdobeFlashCS5后，新建一个文档，对背景颜色和舞台大小进行相应的设置，保存文档，命名为“世界杯集锦”。2．创建世界杯图形符号导入文件名为“世界杯图1”～“世界杯图6”的图片文件，分别对应生成名为“图1”～“图6”的图形元件3.3“世界杯集锦”案例二、操作步骤3.创建“Loading”文本的拉伸效果第一步：新建一个名称为“Loading”的影片剪辑元件。第二步：选用【文本工具】输入文字“Loading……”，在“属性”面板中设置此文字的字体为“黑体”，字号为25，字体颜色为白色。用Ctrl+B将文字打散。将第1帧复制到第2帧至第13帧。鼠标单击第1帧，只保留“L”字母，删除其它字符图形。从第2帧开始逐步增加字符图形直至第13帧。鼠标单击第18帧，按F5键增加一个扩展帧。3.3“世界杯集锦”案例二、操作步骤4.创建“光线”图形符号第一步：新建名称为“光线”的图形元件。第二步：利用“椭圆工具”绘制如下图的光线效果：3.3“世界杯集锦”案例二、操作步骤5．创建“光束”影片剪辑3.3“世界杯集锦”案例二、操作步骤6．设置背景图片导入背景图片到场景1中，选择本案例对应的素材文件夹中的背景图片文件“背景”。设置此图片的宽为400、高为300。通过设置“对齐”面板选项，使背景图片位于舞台中央。7．创建“光”图层创建新图层命名为“光”，将影片剪辑“光束”拖至舞台中央，并扩展制120帧。3.3“世界杯集锦”案例二、操作步骤8．创建“Loading”图层创建新图层命名为“Loading”，将影片剪辑“Loading”拖至舞台左下角。并扩展制120帧。9．创建宇宙图片动画第一步：创建新图层命名为“图片1”，将图形符号“图1”拖到舞台左端，并将图形符号缩小。单击第10帧按F6插入关键帧，水平移动图形符号“图1”的位置至屏幕中央，并放大。单击第20帧按F6插入关键帧，在“属性”面板中设置“颜色”选项为“Alpha”，值为“0%”。鼠标右击第1帧至第10帧之间，在弹出的快捷菜单中选择“创建传统补间动画”。3.3“世界杯集锦”案例二、操作步骤第二步：按照以上方法，可设计“图片2”至“图片6”从舞台边缘的不同位置沿着不同的角度由小变大，或直接或旋转地进入舞台中央，然后再慢慢淡出消失掉。10．测试影片，保存文件，并导出影片3.3“世界杯集锦”案例三、技术要点1、制作传统补间动画创建传统补间动画的方法有如下2种。(1)右击开始关键帧和结束关键帧间的任何一帧，在弹出的快捷菜单中单击“创建传统补间”菜单项。(2)单击开始关键帧和结束关键帧间的任何一帧，单击“插入”“传统补间”菜单项。注意：如果要对一个图像制作传统补间动画，要先把它变成组件(按Ctrl+G组合键)或者元件。3.3“世界杯集锦”案例三、技术要点2.创建补间动画在cs4之前的FLASH版本在制作动画的时候基本都是定头、定尾、做动画(开始帧、结束帧、创建动画动作)。而从flashcs4开始，就演变为只要定头，然后鼠标在哪一帧操作场景中的对象时，时间轴自动添加关键帧。所以制作补间动画演变为：定头、做动画(开始帧、选中对应帧、改变对象位置)。3.3“世界杯集锦”案例三、技术要点3.设置旋转的运动效果旋转的运动效果是使实例在运动的同时旋转。设置方法是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后，再通过“属性”面板中的来设置。其中“旋转”项用于设置旋转的方式，有“无”、“自动”、“顺时针”、“逆时针”4个选项；后面的“x”项用于设置从运动补间动画开始到结束元件旋转的次数。3.3“世界杯集锦”案例三、技术要点4.设置运动的快慢效果时快时慢的运动效果也是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后，再通过“属性”面板中的来设置的。其中“缓动”项用于调节对象运动过程中的速度比例关系，正数表示先快后慢，负数表示先慢后快，零值表示动作匀速变化；后面的“铅笔”用于打开“自定义缓入/缓出”面板。3.3“世界杯集锦”案例三、技术要点5.设置物体逐步消失的效果逐步消失的运动效果主要是通过设置运动补间动画的结束关键帧中物体的“Alpha”值为“0%”来实现的，此设置可通过“属性”面板中的色彩效果样式中的“Alpha”值项来完成。3.3“世界杯集锦”案例四、练习(1)制作一个红色小球旋转运动的动画。要求小球先从舞台的左上角顺时针旋转两周到达舞台底端中央，旋转的速度是先慢后快，形状是由小变大；再从底端中央逆时针旋转两周到达舞台右上角，要求旋转的速度是先快后慢，形状是由大变小直至消失。(2)自行制作一个人走路的影片剪辑制作一个人从舞台左边走到舞台右边的运动动画。3.4“闪闪的红星”遮罩动画案例本节内容1.案例效果2.操作步骤3.技术要点4.练习3.4“闪闪的红星”遮罩动画案例一、案例效果重点与难点：遮罩动画的制作方法与技巧。3.4“闪闪的红星”遮罩动画案例二、操作步骤1．新建文档并命名启动AdobeFlashCS5后，新建一个文档，背景颜色和舞台大小都使用默认，保存文档，命名为“闪闪的红星”。2.绘制“放射圆”元件第一步：使用“工具箱”中的椭圆工具和线条工具绘制一个粗细为4的椭圆和直线。并用变形工具把直线的中心点调整至圆的中心点.如下图：3.4“闪闪的红星”遮罩动画案例二、操作步骤第二步：打开“窗口”菜单中的“