第3节 基本动画制作(一)Flash高级商务动画设计(PPT全)(袁野版) (2)

1、q【目的】【目的】q1掌握矢量图制作的方法和技巧。q2掌握把位图作为填充色进行填充的技巧和方法。q3部分选取工具和钢笔工具的使用技巧。q4.帧，图层的概念。q5.掌握传统补间动画制作方法和技巧。q【重点】【重点】q1雨伞制作技巧。q2把位图当作颜色进行填充。q3工具箱中部分选取工具和钢笔工具的使用。q4，对做好的矢量图进行传统补间动画q【难点】【难点】q1.部分选取工具和钢笔工具的灵活使用。qq动画电影的组成层次可分为：动画电影（movie）场景（scene）帧（frame）。q帧进行Flash动画制作的最基本的单位，是时间轴上的最小单位，是通用的动画计量单位。q在时间轴上，每个小方格（亦称影

2、格）即为一帧，其内容可包括：图形、音频、素材符号、嵌入对象等。2.1帧的概念4 4q空帧：q空帧不是真正意义上的帧，而只是在时间轴上一个矩形小方块，在这些矩形方块里可以放入帧。q空白关键帧：q空白关键帧就像一张白纸，可以在上面可以放入图形、声音、各种素材和其他多种对象。q关键帧：q在空白关键帧中放入对象，形成了关键帧。关键帧是特殊的帧，可以定义动画中的变化，包括对象的运动和特点(如大小和颜色)。q普通帧：q在时间轴上，普通帧总是在关键帧的后面。前面关键帧的内容可以一直显示在随后的每个普通帧中，直到到达另一个关键帧为止。q过渡帧：q过渡帧包含了一系列帧，往往处于两个关键帧之间。利用过渡帧可以制作

3、两种过渡动画：运动过渡和形状过渡。5q关键帧在时间轴上显示为实心的圆点q空白关键帧在时间轴上显示为空心的圆点q普通帧在时间轴上显示为灰色或白色填充的小方格q在关键帧后面显示为灰色q在空白关键帧后面显示为白色q过渡帧在时间轴上显示为浅绿色或浅紫色q表示“形状过渡帧”，颜色为浅绿色q表示“运动过渡帧”，颜色为浅紫色6 6关关键键帧帧普普通通帧帧空空帧帧空空白白关关键键帧帧过过渡渡帧帧普普通通帧帧q插入帧q选择帧；q创建帧；q复制帧；q删除帧；q清除帧q移动帧q翻转帧q改变帧频率（播放频率）。在默认情况下，Flash动画的播放频率是24fps（每秒24帧）。q图层是Flash为制作复杂动画作品而引入

4、的一种手段，相当于一张透明的玻璃纸。q分为：Normal（普通）、Guide（引导）、Guided（被引导）、Mask（遮罩）和Masked（被遮罩）。q在FlashCS4中，使用引导层，可以使元素沿着所创建的路径运动；而使用遮罩层，可以创建如探照灯、聚光灯或颜色转变灯动画效果。q将不同对象放在不同层上，可以轻松制作场景复杂的动画。比如在绘制、编辑、粘贴和重新定位单一图层上的元素时，不会影响到其他图层上的元素，而且每个场景都可以创建任意数量图层。使用图层还可以避免错误删除或编辑对象的失误。9 9q图层操作q选择图层，按鼠标右键，在快捷菜单中选择操作。q通过图层工具栏进行操作q常用的图层操作q创

5、建新普通图层。q创建新引导图层q删除图层q将普通图层转化为遮罩图层10q在图层名称上右击鼠标，在快捷菜单中选择“属性”，打开“图层属性”对话框，可设置图层的各种属性。Flash作为一款著名的二维动画制作软件，最主要的功能也就是制作动画。在Flash CS4中，基本动画类型主要有逐帧动画、形状补间动画和传统补间动画3种。u逐帧动画u形状补间动画 u传统补间动画动画效果有着各自的优势和不足。q逐帧动画q在连续动画的相邻两帧中，画面一般地仅有微小的变化；q每一帧都是关键帧；q每帧画面的制作。借助“描图纸”按钮，在上一帧的基础上略作修改。使用其他绘图软件制作系列文件，文件名采用连续的编号，如a01、a

6、02、a03等。q补间动画q只需在重要处定义关键帧，Falsh会自动创建关键帧间的内容；q渐变动画区分为传统补间动画传统补间动画 和形状补间和形状补间q渐变有问题用虚线表示。当需要在动画中展示移动位置、改变大小、旋转、改变色彩、改变透明度等效果时，就可以使用传统补间动画了。在制作传统补间动画时，用户只需对最后一个关键帧的对象进行改变，其中间的变化过程即可自动形成，因此大大减小了工作量。它可以用于补间实例、组和类型的位置、大小、旋转和倾斜，以及表现颜色、渐变颜色切换或淡入淡出效果。在传统补间动画中要改变组或文字的颜色，必须将其变换为元件。 1515q传统补间动画的概念q传统补间动画给对象在两个关

7、键帧分别定义不同的属性，如颜色、大小、方位、角度等q在两个关键帧之间建立一种变化关系q位移首尾关键帧中元件位置改变q缩放首尾关键帧中元件大小的q旋转q扭曲变形q颜色渐变等首尾关键帧中元件的颜色、alpha值等发生改变q传统补间动画的对象通常是元件、组合、文本块等q传统补间动画的特点q只对单一的对象有效，包括影片剪辑、图形元件、按钮、文字、位图、组合等等q分离的对象必须组合或转换成元件才能创建传统补间动画q创建一个新图层；q在起始帧位置，插入一个空白关键帧；q在空白关键帧中制作和编辑画面内容（为元件或组合、文字等）；q单击时间轴中的结束帧位置，插入另一个关键帧；q在结束关键帧中编辑画面内容；q右

8、键创建传统补间动画，并设置运动参数；q保存文件。注：传统补间动画首尾帧间有淡紫色背景。q用菜单或右键创建传统补间1818q动画头尾必须是关键帧，两关键帧中间被带有一个黑箭头和浅紫色背景的中间过渡帧分开(如图层1所示)q如果两关键帧中间的黑箭头变为虚线，代表传统补间动画创建错误q缺少开始或结束关键帧(如图层3,4所示)q关键帧的对象是分离的(如图层2,所示)1919q选择传统补间动画中间任何一帧，打开传统补间动画的属性面板，设置属性q缓动：使动画加速或减速运动q旋转：实现元件或组的顺时针或逆时针旋转q调整到路径：使元件或组按照指定的路径有方向的进行运动q同步：使影片剪辑元件动画在主动画中能准确的

9、完成循环q实例实例2-1 彩色立体文字传统补间动画彩色立体文字传统补间动画q【实例说明】【实例说明】将文字放大与缩小。q【技术要点】【技术要点】将彩色立体文字组合；插入关键帧；会使用工具箱中“任意变形工具”。2222q启动FLASHCS4，菜单上，文件打开，在“打开”对话框中，找到“练习1.fla”文件，并单击该文件，点击“打开”按钮q用鼠标点击工具箱中的箭头工具，在舞台上拖出一个矩形将整个彩色立体文字包围（即选中舞台上所有的文字）。q右键转换为图形元件（F8）。q用鼠标在时间轴第15帧上点右键插入关键帧，在时间轴第30帧上点右键插入关键帧。q用鼠标单击第15帧，再用鼠标单击工具箱上的“任意变

10、形工具”，此时舞台上的彩色立体文字周围出现八个黑色的小方块，缩小该元件；q在第1帧至第15帧中任意帧上单击鼠标右键创建传统补间，在第15帧至第30帧中任意帧上单击鼠标右键创建传统补间q更新到作业模板的第一题。q实例实例2-2 软盘顺时针（逆时针）旋转软盘顺时针（逆时针）旋转q【实例说明】【实例说明】制作软盘旋转动画。q【技术要点】【技术要点】将库中的元件放入舞台；插入关键帧；创建传统补间；属性设置：元件顺时针旋转。2525q启动FLASHCS4，菜单上，文件打开，在“打开”对话框中，找到实例2创建的“练习2.fla”文件，并单击该文件，点击“打开”按钮。设置文档大小为600*600q菜单上，窗

11、口库，打开库面板。用鼠标点中库列表中的软盘元件，并将其拖到舞台上来。q在时间轴第20帧上点击鼠标右键插入关键帧。q在第1帧至第20帧之间任一帧上点击鼠标右键创建传统补间；q用鼠标单击时间轴上中间任意帧，单击舞台右侧“属性”图标，展开对象的属性面板，设置旋转为“顺时针”2626q在第21帧上点击鼠标右键插入关键帧。任意变形工具将元件中心移到右下角。q在第40帧上点击鼠标右键插入关键帧。q在第21帧至第40帧之间任意帧上点击鼠标右键创建传统补间；q用鼠标单击时间轴上中间帧，单击舞台右侧“属性”图标，展开对象的属性面板，设置旋转为“顺时针”q观看动画结果：菜单上，文件发布预览Flashq保存结果，并

12、更新作业模板中的第二题。p箭头工具选取和移动对象、修正对象轮廓，调整调整曲线曲线、旋转或缩放对象。p部分选取工具用来显示线段或对象轮廓上的锚点（贝塞尔曲线），移动锚点或路径来改变图形的形状。p铅笔工具画直线或曲线。所画线条包括：Straighten（平直）、Smooth（平滑）、Ink（墨水）三种模式。窗口/颜色，打开颜色面板，可以创建和编辑纯色、渐变填充、位图填充，调制出大量的颜色，以设置笔触，填充色及其透明度。q实例实例2-3 制作小雨伞的图形元件制作小雨伞的图形元件q【实例说明实例说明】绘制雨点打落在小雨伞上的图案效果。q【技术要点技术要点】先绘制一个“小雨滴”的矢量图，转换为元件；利用

13、矩形工具、直线工具绘制雨伞和黑夜，并利用箭头工具调整曲线轮廓得到外框图，再借助图案填充变形工具完成雨滴的填充效果。3131q本例将元件“小雨伞”创建在“作业模板2.fla”的库中。启动FlashCS4，菜单上，文件打开，在“打开”的对话框上，找到“作业模板2.fla”文件所在的文件夹位置，点击此文件，再点击“打开”按钮。菜单上，插入新建元件，在打开的“创建新元件”对话框上，“名称”后面输入：小雨伞，“行为”后面选中“图形”单选按钮；q选中工具箱中的“铅笔铅笔”工具，绘制小雨滴的轮廓。然后选中工具箱的“填充”工具，填充色为黑色，点击雨滴外面空白处，结果如图所示。q文件/导出/导出图像,20*20

14、,存小雨滴.jpg到桌面，删除场景中雨滴。3232 选择工具箱中的矩形工具，设置边框线颜色为黑色，填充色为无，在舞台上拖动鼠标绘制一个300X200的矩形框（借助“属性”面板进行精确设置。5.选择工具箱中的箭头工具，在舞台上的空白处单击，取消对绘制矩形框的选取，然后移动鼠标指针到矩形框的下边中间位置，当鼠标指针显示为弧线形状时，按下鼠标左键并向上拖动，更改矩形最下面一条边的形状6.选择工具箱中的直线工具，在曲线上方绘制两条直线段作为伞的尖，删除多余线段之后的图案如图所示。3333q选择工具箱中的铅笔工具，在“选项”区中设置铅笔工作模式为“平滑”，在舞台上绘制伞沿（可使用箭头工具对曲线部分进行调

15、整。q选择工具箱中的矩形工具，设置笔触颜色为黑色，填充色为无，在伞的下方绘制伞的手柄，使用箭头工具将伞柄上、下两端调整为弧形（可以将图形放大后进行调整)。q菜单上，窗口颜色，打开“颜色”面板，在“类型”下拉列表框中选择“位图”选项，点导入按钮，找到“小雨滴.jpg”，从而设定其为填充位图。3434q选择工具箱中的颜料桶工具，在雨伞上方区域中单击，以雨滴填充，如图所示。q选中工具箱中的填充变形工具，在位图填充区域上单击鼠标，此时出现填充变形句柄，将鼠标指针移动到不同句柄上，可以对填充部分进行旋转、缩放等操作。q选择工具箱中的颜料桶工具，设置填充色为粉红色（#FF00FF），在雨伞伞面和伞柄上单击

16、，将它们填充为粉红色。q选择工具箱中的箭头工具，选中雨滴填充部分的外边框线、伞面和伞柄的外框线，并按【Delete】键将它们删除.q回到场景1，文件保存。q实例实例2-4 制作蝙蝠制作蝙蝠q实例实例2-4 制作蝙蝠的图形元件制作蝙蝠的图形元件q【实例说明实例说明】绘制绘制一只呲牙咧嘴的蝙蝠图案。q【技术要点技术要点】使用椭圆工具绘制椭圆，使用部分选取工具更改椭圆外观形；使用直线工具绘制直线，使用箭头工具将直线变成曲线；使用铅笔工具随手画线。3737q本例将元件“蝙蝠”创建在“作业模板2.fla”的库中。启动FlashCS4，菜单上，文件打开，在“打开”的对话框上，找到“作业模板2.fla”文件

17、所在的文件夹位置，点击此文件，再点击“打开”按钮。q菜单上，插入新建元件，在打开的“创建新元件”对话框上，“名称”后面输入：蝙蝠，“行为”后面选中“图形”单选按钮;单击“确定”按钮，打开“蝙蝠”元件的编辑窗口。q在时间轴窗口中将“图层1”更名为“身体”（双击文字“图层1”，然后将“图层1”改为“身体”，鼠标点击舞台任意点q菜单上，视图网格编辑网格，打开“网格”对话框，选中“显示网格”复选框，再设置网格大小为20px20px。3838q工具箱中的椭圆工具，设置描绘颜色为黑色，填充颜色为无，在舞台上拖动鼠标绘制一个椭圆。选取工具箱中的“部分选取工具”，点击舞台上的椭圆对象，此时椭圆出现节点句柄，如

18、图所示。3939q使用工具箱中的部分选取工具在右侧节点上按下鼠标左键并向右拖动，更改椭圆形状，如图1。按照同样的方法，将椭圆左侧节点向左拖动，如图2所示。q将椭圆下方的两个节点向内调整，如图3所示。4040q单击时间轴窗口左下方的“插入图层”按钮，在“身体”图层之上新增“图层2”，将其改名为“头部”图层。q选择工具箱中的椭圆工具，在身体上方绘制一个椭圆，如图1所示。q在“头部”图层上新建“翅膀”图层，选择工具箱中的直线工具，在身体左侧绘制翅膀原型，如图2所示。q工具箱中的箭头工具，将直线更改为曲线，如图3所示。4141q选择工具箱中的箭头工具，在左翅膀边框线上双击鼠标，同时选中翅膀上的所有线段

19、（如果没有全部选中，可能是因为连接部位有断点，此时按住【Shift】键，用鼠标依次点击未选中的线段）。菜单上，编辑拷贝，再菜单上，编辑粘贴到当前位置，则在原处复制了一个左翅膀。q菜单上，修改变形水平翻转，将复制的左翅膀水平翻转变成蝙蝠的右翅膀，按键盘上向右移动的方向箭头，调整右翅膀的位置，4242q在“翅膀”图层上新建“耳朵”图层，选择工具箱中的直线工具，在头部上方绘制左耳朵雏形，如图1所示。q选择工具箱中的箭头工具，将耳朵的直线更改为曲线，然后复制左耳朵成为右耳朵，如图2所示。4343q按下【Shift】键的同时依次单击时间轴窗口中的每个图层，自动选中舞台上的所有图形对象。菜单上，编辑剪切，

20、然后单击“身体”图层的第一帧，菜单上，编辑粘贴到当前位置（此时，只有“身体”图层第一帧中有图形对象，且相交在一起）。q使用工具箱中的箭头工具依次单击多余的线段，然后按【Delete】键删除之，如图所示。4444q删除时间轴窗口中除“身体”图层之外的其它所有图层，再在“身体”图层之上新建“脸部”图层。q菜单上，查看网格显示网格，关闭网格显示功能。q选择工具箱中的铅笔工具，设置铅笔工作模式为“平滑”，在“脸部”图层第一帧对应的舞台上绘制蝙蝠的脸部，同时再添加几根头发。q选择工具箱中的颜料桶工具，设置填充颜色为灰色（#999999），为蝙蝠着色，如图所示。q回到场景1，保存q练习练习2.1 对花雨伞

21、做如作业对花雨伞做如作业2样张样张.swf的旋转的旋转动画q步骤：q打开作业模板.flaq创建影片剪辑元件t1q具体 操作步骤为：菜单-新建元件，名称t1,类型选影片剪辑q勾选actionscript导出和在帧1中导出q然后在t1的影片剪辑编辑中里利用元件“小雨伞”做传统补间动画。q修改脚本：选中第一题按钮，右键/动作，将语句_root.attachMovie(t11, ball_1, 1)修改成_root.attachMovie(“t1”, “ball_1”, 1)即可q练习练习2.2 对蝙蝠做如作业对蝙蝠做如作业2样张样张.swf的旋转的旋转动画q步骤：q打开作业模板.flaq创建影片剪辑元件t2q具体 操作步骤为：菜单-新建元件，名称t1,类型选影片剪辑q勾选actionscript导出和在帧1中导出q然后在t2的影片剪辑编辑中里利用元件“蝙蝠”做传统补间动画。q修改脚本：选中第二题按钮，右键/动作，将语句_root.attachMovie(t21, ball_2, 1)修改成_root.attachMovie(“t2”, “ball_2”, 1)即可q练习练习2.3 对填充文字做如作业对填充文字做如作业2样张样张.swf的旋转的旋转动画q步骤步骤q打开作业模板.flaq制作元件“文字”（提示：利用文本工具创建文字对象，字