制作基本动画11.pptx

动画的基本类型认识动画的标识方法 各类动画的制作原理认识动画的标识方法 根据Flash动画的生成原理和制作方法，可以将Flash动画分为逐帧动画和补间动画，其中补间动画又分为形状补间动画和动作补间动画。要制作Flash动画，首先要认识各种动画的标识方法。不同动画类型，其表示方法也不同，下面分别介绍。如图10-1所示就是各种动画对应的帧表示方式。图10-1（a）（b）（c）（d）（e）形状补间动画：形状补间动画中各关键帧之间用浅绿色背景的黑色箭头表示。动作补间动画：动作补间动画中各关键帧之间用浅蓝色背景的黑色箭头表示。未产生动画：当两个关键帧之间是由虚线连接起来时，表示这两个关键帧之间的动画没有创建成功，或在创建动画时操作错误。包含动作的动画：如果一个关键帧上有小写的“a”符号，它表示制作者为这个关键帧添加了Actions语句，关于Actions语句的使用将在后面详细介绍。帧标签：如果一个关键帧上有一个小红旗，且后面标注有文字，表示已为该帧命名，这些文字表示帧的标签或注释。如图10-1(e)中表示帧的名称为“bird”。各类动画的制作原理 Flash动画的制作过程就是用户决定每一帧中显示什么内容的过程，只要将每一帧中的内容制作好了，播放动画时Flash会自动一帧一帧地播放出来。动画类型不同，动画的制作方法和生成原理都不相同，下面分别讲解。逐帧动画东 逐帧动画是指由许多连续的关键帧组成的动画，制作者在动画的每个关键帧中创建不同的内容，当播放动画时，Flash就会一帧一帧地显示每一帧中的内容。如图10-2所示就是一个逐帧动画，动画中的每一帧都是关键帧。图10-2如果不是特别需要，建议不采用逐帧动画的方式。因为逐帧动画的工作量非常大，而且如果技术不熟练，还可能使动画不自然，效果不好。逐帧动画具有如下特点。逐帧动画由许多关键帧组合而成，相邻关键帧中的对象变化不大。逐帧动画中的每一帧都是关键帧，需要用户对每个关键帧中的画面进行控制，工作量很大。相对于补间动画来说，逐帧动画的体态比较雍肿，文件很大，占用较大的内存。补间动画 补间动画包括动作补间动画和形状补间动画。最基本的补间动画由两个关键帧和它们之间的帧组成。如图10-3所示就是一个形状补间动画。图10-3与逐帧动画相比，补间动画具有以下几个特点。制作方法简单方便。只需要为动画的第一个关键帧和最后一个关键帧创建内容，两个关键帧之间帧的内容由Flash自动生成，不需要人为处理。相对于逐帧动画来说，补间动画更为连贯自然。因为逐帧动画是由手工控制，帧与帧之间的过渡很可能会不自然、不连贯，而补间动画除了两个关键帧由手工控制外，中间的帧都由Flash自动生成，技术含量很高，因此过渡更为自然连贯。相对于逐帧动画来说，补间动画的文件更小，占用内存少。制作形状补间动画制作一般的形状补间动画 制作可控的形状补间动画 形状补间动画就是平常所说的变形动画，它是指形状逐渐发生变化的动画，图形的变形不需要人工干预，只需确定变形前的画面和变形后的画面，中间的变化过程交由Flash自动完成。制作一般的形状补间动画 在观看Flash动画时，常常看到各式各样的场景：燃烧的蜡烛、水滴掉入水里荡起的涟漪、一只狗变成了一只猫这些变化是怎样形成的呢？下面通过一个由天使变魔鬼的实例来揭开变形的内幕。其具体操作如下。（1）新建一个文件，在其中导入图片“天使.wmf”，并将其缩至适当大小，然后按【Ctrl+B】键将其打散，如图10-4所示。图10-4形状动画只能在打散的图片或文字之间进行，因此，在导入图片后必须先将其打散，才能创建动画。（2）在第30帧按【F7】键插入空白关键帧，导入图片“魔鬼.wmf”，将其缩至适当大小，然后按【Ctrl+B】键将其打散，如图10-5所示。图10-5在改变魔鬼的位置和大小时应注意：其位置和大小都应与天使大致相同，这样在以后变形时会更真实。（3）选中第1帧，在“属性”面板的“补间”下拉列表框中选择“形状”选项，其他设置如图10-6所示。这时第1帧和第30帧之间出现绿色背景的箭头，表示已在它们之间创建了形状补间动画，如图10-7所示。图10-6图10-7 （4）按【Ctrl+Enter】播放动画即可看到变形的过程，如图10-8所示为变化过程中的一帧。图10-8制作可控的形状补间动画 可控的形状补间动画是指通过形状提示来控制原始图形与新图形之间的变化过程，使得对象之间的变形不是随机的，而是有规律的。形状提示是指在制作形状补间动画时，将一个图形上的某点转换到另外一个图形上的某个点上。通过形状提示可以控制图形间对应部位的变形，从而制作出各种各样有趣的变形效果。下面制作一个从1变成2的变形动画，并用形状提示来控制1与2之间的变化。其具体操作如下。（1）新建一个文件，在其中输入“1”，并设置为“Benguiat Bk BT、150、黑色、加粗、倾斜”，如图10-9所示。图10-9 （2）在第30帧按【F6】键插入关键帧，将其中的“1”改为“2”，依次将第1帧和第30帧中的数字按【Ctrl+B】键将其打散。（3）选中第1帧，在“属性”面板的“补间”下拉列表框中选择“形状”选项，在第130帧之间创建形状补间动画，如图10-10所示。按【Ctrl+Enter】键播放动画，观察其效果。图10-10 （4）选中第1帧中的1，选择修改形状添加形状提示菜单命令或按【Ctrl+Shift+H】键，此时1的中心会出现一个包括英文字母“a”的红色圆圈，这就是形状提示，如图10-11所示。图10-11 （5）将形状提示 移动到图形上合适的位置，这里移动到1的左上角。（6）单击第30帧，会发现2上也出现一个形状提示，将形状提示移动到2的左上角，同时红色的形状提示变为绿色，如图10-12所示。这样1的左上角在变形后将移到2的左上角。图10-12 （7）单击第1帧，按【Ctrl+Shift+H】键再添加一个形状提示，将该形状提示移动到1的右上角。（8）单击第30帧，2上出现一个相同的形状提示，将形状提示移动到2的右上角，同时红色的形状提示变为绿色，如图10-13所示。这样1的右上角在变形后将移到2的右上角。图10-13 （9）用相同的方法添加适当数量的形状提示，使起点帧的某些点与终点帧的某些点相对应，如将1的左下角变为2的左下角，1的右下角变为2的右下角。即可控制1到2的变形过程。如图10-14所示为1的形状提示，如图10-15所示为2的形状提示。如图10-16所示为变形过程中的一帧。图10-14图10-15图10-16 用鼠标右键单击起始帧中的形状提示，将弹出如图10-17所示的快捷菜单，在该快捷菜单中可以进行如下操作。图10-17选中某个形状提示，将该形状提示拖到场景以外的任何地方即可删除单个形状提示。选择“添加提示”命令可以再添加一个形状提示。选择“删除提示”命令可以删除当前形状提示。选择“删除所有提示”命令可以删除所有的形状提示。默认情况下，“显示提示”命令前面有一个“”标记，选择“显示提示”命令，清除前面的“”可以隐藏形状提示，如果要再次选择形状提示，只需选择视图显示形状提示菜单命令或按【Ctrl+Alt+H】键即可。制作色彩变幻动画 色彩变幻动画实际是形状补间动画的一种，其制作原理和方法与形状补间动画是相同的，只是它改变的是对象的颜色而非形状。利用色彩的变化可以制作出许多意想不到的效果。下面制作一个变色文字效果，以使读者掌握色彩变幻动画的制作方法。其具体操作如下。（1）新建一个文件，将舞台大小设置为300400，导入图片“珠宝.jpg”，并在第70帧按【F5】键沿用帧，如图10-18所示。图10-18 （2）新建一个图层，在第一帧中输入文字“珠光宝气”，并设置为“方正琥珀简体、74、黄色、加粗”，如图10-19所示。图10-19 （3）按两次【Ctrl+B】键将文字打散，然后在第30帧插入关键帧，选中第30帧中的文字，在“属性”面板中单击图标，在弹出的颜色列表中选择线性渐变颜色，如图10-20所示。图10-20 （4）选中第1帧，在“属性”面板的“补间”下拉列表框中选择“形状”选项，在第130帧之间创建形状补间动画，如图10-21所示。图10-21 （5）在第40帧插入关键帧，使线性渐变的颜色保持10帧的时间，然后将第1帧复制到第70帧。（6）在第40帧和第70帧之间创建形状补间动画，如图10-22所示。图10-22 （7）按【Ctrl+Enter】键播放动画，可以看到文字颜色不断变化，如图10-23所示。图10-23 前面在创建几个形状补间动画时，都用到了“属性”面板，如图10-24所示。下面介绍该面板中各个选项的含义。图10-24帧：在该文本框中可以输入帧的标签名称，以便以后调用。补间：该下拉列表框用于设定补间的模式，包括“无”、“形状”和“动作”3个选项。“无”表示不创建动画，“动作”用于创建动作补间动画，“形状”用于创建形状补间动画。简易：用于设定对象的变化速度。正数表示变化由快到慢；负数表示变化由慢到快；默认值为0，表示对象变化做匀速运动。混合：下拉列表框中包括“分布式”和“角形”两个选项。其中“分布式”可以使对象的形状变化过渡得更随意自然。“角形”可使对象在形状变化过程中保持关键帧上图形的棱角，适用于有尖锐棱角的图形变换。制作动作补间动画 动作补间动画可以使对象发生位置移动、缩放、旋转、颜色渐变等变化。这种动画只适用于文字、位图和实例，被打散的对象不能产生动作渐变，除非将它们转换为元件或组合。动作补间动画只对某个图层上单一的对象有效，如果想让一个动画中的多个对象一起动，必须将它们分别放在不同的图层上分别产生动作渐变。制作动作补间动画的过程实际就是在两个关键帧上分别定义不同的属性，如对象的大小、位置、角度等，然后在两个关键帧之间建立一种运动渐变关系。下面制作一个瓢虫在绿叶上爬行的动画，其具体操作如下。（1）新建一个文件，导入图片“叶子.jpg”，调整其大小，使其能覆盖整个舞台，然后在第120帧按【F5】键沿用帧，如图10-25所示。图10-25 （2）新建一个图层，在第1帧中导入图片“瓢虫.eps”，调整到适当大小，选中瓢虫，选择修改转换为元件菜单命令，打开“转换为符号”对话框，在其中进行如图10-26所示的设置。图10-26 （3）单击 按钮，即可将瓢虫转换为图形元件，并将其移动到叶子的左下角，如图10-27所示。图10-27 （4）在第120帧按【F6】键插入关键帧，并将瓢虫从叶子的左下角移动到右上角。（5）用鼠标右键单击第1帧，在弹出的快捷菜单中选择“创建补间动画”命令，即可在第1帧和第120帧之间创建动作补间动画，如图10-28所示。图10-28 （6）按【Ctrl+Enter】键播放该动画，会发现瓢虫慢慢地从叶子的左下角爬到叶子的右上角，如图10-29所示。图10-29在创建动作补间动画时，除了可用快捷菜单命令创建动画外，还可以在“属性”面板中进行设置。只需在其中的“补间”下拉列表框中选择“动作”选项即可。在“属性”面板的“补间”下拉列表框中选择“动作”选项后，“属性”面板如图10-30所示。图10-30该面板与形状补间动画的“属性”面板类似，下面介绍它与形状补间动画的“属性”面板不同的选项。：选中该复选框可使对象在运动时按比例缩放。如在上面的例子中，如果要让瓢虫逐渐变小，可以将最后一帧的瓢虫缩小，然后选中该复选框。旋转：该下拉列表框中有“无”、“自动”、“顺时针”、“逆时针”4个选项。“无”表示不旋转对象，“自动”表示对象以最小的角度进行旋转，“顺时针”表示对象沿顺时针方向旋转到终点位置，“逆时针”表示对象沿逆时针方向旋转到终点位置。如果选择“顺时针”或“逆时针”选项，其后都会出现“次”文本框，用于设置旋转次数。：使对象沿设置的路径运动，并随路径的改变而改变角度。：使动画在主场景中首尾连续地循环播放。：使对象沿路径运动时，自动捕捉路径。制作逐帧动画 逐帧动画是指在每个帧上都有关键性变化的动画，它由许多单个的关键帧组合而成，此方式适合制作相邻关键帧中的对象变化不大的动画。下面制作一个采粉的蝴蝶来练习逐帧动画的制作。其具体操作如下。（1）新建一个文件，将舞台大小设为300200像素，导入图片“花.jpg”，将该图片缩至适当大小，使其刚好能覆盖舞台，如图10-31所示。图10-31 （2）新建一个名为“蝴蝶”的影片剪辑元件，在其中导入图片“蝴蝶.eps”，用任意变形工具 将其缩至适当大小，并旋转为如图10-32所示的形状。图10-32 （3）按【Ctrl+B】键将蝴蝶打散，在第2帧插入关键帧，选中打散的蝴蝶，单击任意变形工具 将鼠标光标移至右方中间的控制柄上，当其变为双向箭头时，按住【Alt】键，再按住鼠标左键向内拖，使蝴蝶向内收缩一些，如图10-33所示。图10-33 （4）在第3帧插入关键帧，将鼠标光标移至右方中间的控制柄上，当其变为双向箭头时，按住【Alt】键，再按住鼠标左键向内拖，使蝴蝶向内再收缩一些，如图10-34所示。图10-34 （5）在第4帧插入关键帧，用同样的方法将蝴蝶再向内收缩一些，如图10-35所示。图10-35 通过上面的操作，实现了蝴蝶向内收翅膀的动作，下面制作蝴蝶翅膀向外展开的动作，由于展开的动作与收缩的动作相反，因此可以通过翻转帧的方法来实现蝴蝶翅膀的展开动作。（6）选中第13帧，用鼠标右键单击，在弹出的快捷菜单中选择“复制帧”命令，再用鼠标右键单击第5帧，在弹出的快捷菜单中选择“粘贴帧”命令。（7）选中第57帧，用鼠标右键单击，在弹出的快捷菜单中选择“翻转帧”命令，即可在第57帧实现蝴蝶翅膀展开的动作，如图10-36所示。图10-36 （8）单击 图标回到场景中，新建一个图层，然后打开“库”面板，将其中的“蝴蝶”元件拖放到如图10-37所示的位置。图10-37 （9）按【Ctrl+Enter】键播放动画，最终效果如图10-38所示。图10-38上机实战网页广告动画 制作企业网站片头 在本课上机实战中将制作两个动画，一个是网页广告动画，二是企业网站片头动画。运动的网页广告主要通过几个动作补间动画来实现，而下雨时的涟漪效果主要通过几个形状补间动画来实现。通过本次练习，读者可进一步掌握制作动作补间动画和形状补间动画的方法和技巧。对于没有练习到的逐帧动画，读者可结合课堂讲解自行练习（本节上机实战的素材可到http:/www.dx-下的【下载专区】【程序代码】中下载）。网页广告动画 本次练习将为“心爱珠宝超市”制作一个网页上的小广告条动画，如图10-39所示为动画中的两个画面。图10-39 制作的具体操作如下。（1）新建一个文件，并将背景大小设为400100像素，背景色为黄色，将图层1重命名为“珠宝1”，导入图片“珠宝1”，用任意变形工具将该图片按比例缩小，使其高度与舞台相等，并放置在舞台的左方，如图10-40所示。图10-40 （2）选择修改转换为元件菜单命令，在打开的“转换为符号”对话框中选中单选项，在“名称”文本框中输入“1”，如图10-41所示。图10-41 （3）在第13帧插入关键帧，然后选中第1帧，将该图片按比例放大，旋转180，并放置在舞台的左上方，如图10-42所示。图10-42 （4）选中第1帧，在“属性”面板中进行如图10-43所示的设置。然后在第158帧按【F5】键沿用帧。图10-43 （5）新建一个图层，并命名为“珠宝2”，在第25帧插入关键帧，导入图片“珠宝2”，用任意变形工具 将该图片按比例缩小，使其高度与舞台相等，并放置在舞台的右方，如图10-44所示。图10-44 （6）选择修改转换为元件菜单命令，将该图片转换为名为“2”的图形元件。（7）在第37帧插入关键帧，然后选中第25帧，将该图片按比例放大，旋转180，并放置在舞台的右上方，如图10-45所示。图10-45 （8）选中第25帧，在“属性”面板中按如图10-43所示进行设置。然后在第156帧按【F5】键沿用帧。（9）新建一个图层，并命名为“心动价格”，在第50帧插入关键帧，输入文字“心动价格”，设置为“方正琥珀简体、51、红色”，并将其转换为元件，如图10-46所示。图10-46 （10）在第52帧插入关键帧，选中第50帧中的文字，将其缩小，并放置在适当位置，如图10-47所示。图10-47 （11）用鼠标右键单击第50帧，在弹出的快捷菜单中选择“创建补间动画”命令，在第50帧和第52帧之间创建动作补间动画。（12）将第50帧依次复制到第54、58、62、66帧，将第52帧依次复制到第56、60、64、68帧，然后在各个关键帧之间创建动作补间动画，如图10-48所示。图10-48 （13）在第158帧插入关键帧，选中第158帧中的文字“心动价格”，在“属性”面板中将其Alpha值设为0%。（14）用鼠示右键单击第68帧，在弹出的快捷菜单中选择“创建补间动画”命令，在第68帧和第158帧之间创建动作补间动画。（15）新建一个图层，并命名为“1380”，在第70帧插入关键帧，在“心动价格”的右下方输入“1”，并设置为“Alfbet、51、红色、加粗、倾斜”，如图10-49所示。图10-49 （16）在第76帧插入关键帧，并在1后面输入3，在第81帧插入关键帧，在3后面输入8，在第86帧插入关键帧，在8后面输入0，在第92帧插入关键帧，在8后面输入“元”字，并设为“文鼎水管体、51、红色、加粗、倾斜”，如图10-50所示。图10-50 （17）选中第92帧中的文字“1380元”，并将其转换为图形元件，然后在第158帧插入关键帧。选中第158帧中的文字，在“属性”面板中将其Alpha值设为0%。然后在第92帧和158帧之间创建动作补间动画。（18）新建一个图层，并命名为“珠宝超市”，在第112帧插入关键帧，在舞台中间输入文字“心爱珠宝超市”，将其设置为“文鼎火柴体、51、白色”，再将该文字复制一份，将颜色改为“红色”，将红色的文字移到白色文字的左上方一点，得到一个红心白边的立体字效果，如图10-51所示。图10-51 （19）将第（18）步输入的文字转换为图形元件，然后在第158帧插入关键帧，选中第112帧中的文字，在“属性”面板中将其Alpha值设为0%。然后在第112帧和158帧之间创建动作补间动画。（20）新建一个图层，并命名为“底图”，将其移至所有图层的下方。创建一个名为“3”的图形元件，在其中导入图片“珠宝3”“珠宝13”，将每张图片都按比例缩小，使它们的高度均为100，然后依次排列成一排，如图10-52所示。图10-52 （21）新建一个名为“移动”的影片剪辑元件，将图形元件“3”拖放到“移动”的元件编辑区中，在“属性”面板中将其Alpha值设为50%，在第200帧插入关键帧，将“3”向右移动420个单位，然后在第1帧和第200帧之间创建动作补间动画。（22）单击图标回到场景中，选中“底图”层的第1帧，将元件“移动”拖动到场景中，使其右边沿与舞台的右边界对齐。在第200帧插入关键帧，选中第200帧，在“动作-帧”面板中输入stop();语句。（23）完成动画的所有图层和帧如图10-53所示，按【Ctrl+Enter】键播放动画，最终效果如图10-39所示。图10-53制作企业网站片头制作需要的元件 编辑场景 本次练习将制作一个企业网站片头动画，最终效果如图10-54所示。其中涉及到3个形状补间动画的制作：企业的标志不断旋转，下面的等待条不断变形、企业标志由一根线条变形而成。图10-54制作需要的元件 制作的具体操作如下。（1）新建一个文件，将背景色设为蓝色，新建一个名为“圆”的影片剪辑元件，在元件编辑场景中绘制一个适当大小的圆环，并将圆环填充为黑色。（2）复制一个圆环，在“混色器”中将圆环的填充色设为黑白相间的线性渐变，然后将复制的圆环移动到黑色圆环的左上方一点，形成圆环的立体效果，如图10-55所示。图10-55 （3）在第30帧插入关键帧，选中该帧中的立体圆环，单击填充变形工具 ，再单击圆环，圆环四周出现几个控制柄，将鼠标光标移到右上角的圆形控制柄上，当其变为 时按住鼠标左键顺时针拖动，改变颜色线形渐变的方向，如图10-56所示。当旋转到90时松开鼠标。图10-56 （4）选中第1帧，在“属性”面板的“补间”下拉列表框中选择“形状”选项，其他设置如图10-57所示。图10-57 （5）将第1帧复制到第60帧，用相同的方法在第30帧和第60帧之间创建形状补间动画。至此圆环的旋转动画制作完成。（6）新建一个名为“线条”的影片剪辑元件，在图层1中绘制一个无填充颜色的墨绿色矩形框，并在“混色器”中将线条颜色的透明度设置为60%。（7）用相同的方法在墨绿色矩形框内部绘制一个深绿色矩形框，使线条与墨绿色矩形框连接。再依次在矩形内部绘制越来越小的矩形框，而且线条的颜色应越来越浅，最终效果如图10-58所示。然后在第36帧按【F5】键沿用帧。图10-58 （8）新建一个图层，在第1帧的矩形框中心绘制一个小圆，将其颜色设为由外到内是黑-绿-黄的放射状渐变，大小为（5,5）。在第35帧插入关键帧，用任意变形工具 将其水平拉长，直到矩形框。然后在第1帧和第35帧之间创建形状补间动画，如图10-59所示。图10-59 （9）为了使线条的形状变化不断循环出现，需要为该动画添加一个gotoAndPlay(1);语句，在图层2中将第1帧复制到第36帧，选中第36帧，在“动作”面板中输入gotoAndPlay(1);。（10）新建一个名为“waiting”的影片剪辑元件，在元件编辑区中输入“waiting”，并将其设置为“Tahoma、37、黄色、加粗”。（11）在第5帧插入关键帧，在“waiting”后面绘制一个黄色的小圆，如图10-60所示。图10-60 （12）在第7帧插入关键帧，在小圆的右面复制一个小圆，在第9帧插入关键帧，在小圆的右面再复制一个小圆。用相同的方法依次在第11、13、15帧中添加一个小圆，使小圆一个一个地出现。（13）在第17帧插入关键帧，在“动作”面板中为第17帧添加gotoAndPlay(1);语句。如图10-61所示。图10-61编辑场景 其具体操作如下。（1）单击 图标，回到场景中，将图层1重命名为“圆环”，打开“库”面板，将元件“圆”拖放到如图10-62所示的位置。图10-62 （2）新建一个图层，并命名为“标志”，在第1帧中绘制如图10-63所示的流线形图形，并将其设置为黄色，如图10-63所示。图10-63 （3）在第30帧插入关键帧，用任意变形工具 将流线形图形的中心控制点移动到图形的左下角，然后通过“变形”面板将其重制3个图形，并移动到圆的中间。再流线型图形复制一份，将复制的图形设置为由黑到白的放射状渐变，并移到黄色图形的左上方，形成立体感，再在圆的下方绘制两个如图10-64所示的图形。图10-64 （4）在第1帧和第30帧之间创建形状补间动画，并为第30帧添加stop();语句。（5）新建一个图层，并命名为“线条”，在第30帧插入关键帧，将元件“线条”拖放到标志的下方。（6）新建一个图层，并命名为“waiting”，在第30帧插入关键帧，将元件“waiting”拖放到线条的下方，并缩至适当大小，如图10-65所示。图10-65 （7）新建一个图层，并命名为“文字”，在舞台下方输入文字“兴扬科技”和网址“http:”，“兴扬科技”为“文鼎中特广告体、25、黄色、加粗”，网址为“Times New Roman、19、黄色、加粗”。完成后的效果和时间轴如图10-66所示。图10-66上机操作题 （1）根据本章所讲的制作逐帧动画的方法制作一个蝴蝶采花的动画，如图10-67所示。图10-67 （2）制作一个变色文字的动画，效果如图10-68所示。图10-68