基本动画的制作.doc

第7章 基本动画的制作基本动画的制作 课堂练习制作LOADING下载条【练习知识要点】使用矩形工具、任意变形工具、形状补间动画命令制作下载条的动画效果。使用文本工具添加文字效果，如图7-1所示。【效果所在位置】光盘/Ch07/效果/制作LOADING下载条. fla。图7-17.6.1 导入图片（1） 选择“文件 新建”命令，在弹出的“新建文档”对话框中选择“Flash文件”选项，单击“确定”按钮，进入新建文档舞台窗口。按Ctrl+F3键，弹出文档“属性”面板，单击“大小”选项后面的按钮，在弹出的对话框中将舞台窗口的宽度设为600，高度设为260，单击“确定”按钮。（2） 选择“文件 导入 导入到舞台”命令，在弹出的“导入”对话框中选择“Ch07 素材 制作LOADING下载条 背景”文件，单击“打开”按钮，文件被导入到舞台窗口中。选择“选择”工具，选中图片，在位图“属性”面板中将“宽”选项设为600，“高”选项设为260，按Enter键确定操作，图片大小将其改变并拖曳到舞台窗口的中心位置，效果如图7-2所示。将“图层1”改名为“背景”，选中“背景”图层的第60帧，按F5键，在该帧上插入普通帧，如图7-3所示。 图7-2 图7-3（3）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“下载框”。选择“文件 导入 导入到舞台”命令，在弹出的“导入”对话框中选择“Ch07 素材 制作LOADING下载条 下载框”文件，单击“打开”按钮，文件被导入到舞台窗口中，将图片移动到舞台窗口的下方，效果如图7-4所示。图7-47.6.2 制作下载条变色效果（1）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“颜色条”。选择“矩形”工具，在工具箱中将笔触颜色设为无，将填充颜色设为绿色（#00FF00）。在下载框的左侧绘制出一个矩形图形，效果如图7-5所示。 （2）选中“颜色条”图层的第60帧，按F6键，在该帧上插入关键帧，如图7-6所示。选择“任意变形”工具，在矩形周围出现变换框，选中矩形右侧中间的控制手柄，向右拖曳到适当的位置，效果如图7-7所示。 图7-5 图7-6 图7-7（3）选择“窗口 颜色”命令，弹出“颜色”面板，在“类型”选项的下拉列表中选择“线性”，选中色带上左侧的控制点，将其设为淡紫色（#FFAADD），选中色带上右侧的控制点，将其设为深紫色（#A30784），如图7-8所示。选择“颜料桶”工具，在矩形上由上至下拖曳渐变色，效果如图7-9所示。 图7-8 图7-9（4）选择“选择”工具，选中“颜色条”图层的第1帧，选择帧“属性”面板，在“补间”选项的下拉列表中选择“形状”，如图7-10所示。在“颜色条”图层的第1帧到第60帧之间生成补间动画，如图7-11所示。 图7-10 图7-117.6.3 制作文字动画效果（1）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“文字”。调出“库”面板，在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“文字”，勾选“图形”选项，单击“确定”按钮，新建一个图形元件“文字”，如图7-12所示，舞台窗口也随之转换为图形元件的舞台窗口。便于观看将背景色设为黑色。（2）选择“文本”工具，在文本工具“属性”面板中进行设置，在舞台窗口中输入需要的白色文字“LOADING .”，效果如图7-13所示。选中“图层1”的第2帧，按F6键，在该帧上插入关键帧，如图7-14所示。 图7-12 图7-13 图7-14（3）将鼠标拖曳到文字右上方的圆形控制点上，按住鼠标向右拖曳，将文本框扩大，这时，圆形控制点变为方形控制点，效果如图7-15所示。将输入光标放置在文字的最后，按Del键，输入一个点，效果如图7-16所示。 图7-15 图7-16（4）用相同的方法，在“图层1”的第3帧、第4帧、第5帧、第6帧上分别插入关键帧，并且每插入一帧，都要在文字后面添加一个点，效果如图7-17所示。单击“时间轴”面板下方的“场景1”图标，进入“场景1”的舞台窗口。将“库”面板中的“文字”元件拖曳到“文字”图层的舞台窗口中，效果如图7-18所示。 图7-17 图7-18（5）在“时间轴”面板中，将“颜色条”图层拖曳到“下载框”图层的下方，如图7-19所示。舞台窗口中的效果如图7-20所示。LOADING下载条制作完成，按Ctrl+Enter键，效果如图7-21所示。 图7-19 图7-20图7-21 课堂练习制作饮料广告【练习知识要点】使用创建补间动画命令制作动画效果。使用文本工具添加文本。使用任意变形工具改变图像的大小，如图7-22所示。【效果所在位置】光盘/Ch07/效果/制作饮料广告.fla。图7-227.7.1 制作彩条动画效果（1）选择“文件 新建”命令，在弹出的“新建文档”对话框中选择“Flash文件”选项，单击“确定”按钮，进入新建文档舞台窗口。按Ctrl+F3键，弹出文档“属性”面板，单击“大小”选项后面的按钮，在弹出的对话框中将舞台窗口的宽度设为300，高度设为450，将背景颜色设为灰色（#999999），单击“确定”按钮。（2）选择“文件 导入 导入到库”命令，在弹出的“导入到库”对话框中选择“Ch07 素材 制作饮料广告 彩条”文件，单击“打开”按钮，文件被导入到“库”面板中，如图7-23所示。图7-23（3）单击“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“彩条动”，勾选“影片剪辑”选项，单击“确定”按钮，新建影片剪辑元件“彩条动”，如图7-24所示，舞台窗口也随之转换为影片剪辑元件的舞台窗口。图7-24（4）将“库”面板中的图形元件“彩条”拖曳到舞台窗口中心位置。在图形“属性”面板中将“宽”和“高”选项均设为450，如图7-25所示。选中“图层1”的第170帧，按F6键，在该帧上插入关键帧，如图7-26所示。 图7-25 图7-26（5）用鼠标右键单击“图层1”的第1帧，在弹出的菜单中选择“创建补间动画”命令，创建补间动画，如图7-27所示。调出帧“属性”面板，在“旋转”选项的下拉列表中选择“顺时针”，如图7-28所示。 图7-27 图7-28（6）选择“文件 导入 导入到库”命令，在弹出的“导入到库”对话框中选择“Ch07 素材 制作饮料广告 草梅、果汁、橙子、猕猴桃、西瓜”文件，单击“打开”按钮，文件被导入到“库”面板中，如图7-29所示。图7-297.7.2 制作文字框效果（1）单击“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“文字1”，勾选“图形”选项，单击“确定”按钮，新建图形元件“文字1”。选择“文本”工具，在文本工具“属性”面板中进行设置，在舞台窗口中输入黑色文字“清爽美味”，效果如图7-30所示。图7-30（2）选择“选择”工具，选中文字，按住Alt键的同时，拖曳文字到适当的位置，复制文字，将文字填充为普蓝色（#ACFFFF），效果如图7-31所示。用步骤1到步骤2的方法制作图形元件“文字2”，输入的文字为“香甜爽口”，“库”面板效果如图7-32所示。 图7-31 图7-32（3）单击“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“文字框”，勾选“图形”选项，单击“确定”按钮，新建图形元件“文字框”。选择“窗口 颜色”命令，弹出“颜色”面板，将笔触颜色设为蓝色（#006699），填充色设为白色，将“Alpha”选项设为75，选择“矩形”工具，在舞台窗口中绘制一个矩形，效果如图7-33所示。图7-33（4）选择“文本”工具，在文本工具“属性”面板中进行设置，分别在舞台窗口中输入深蓝色（#0000CC）文字“酷夏”和白色文字“冰点茶”，选择“选择”工具，分别选中文字并拖曳到适当的位置，效果如图7-34所示。按住Alt键的同时，拖曳文字“冰点茶”，到适当的位置，复制文字，将其填充为天蓝色（#66CCFF），效果如图7-35所示。 图7-34 图7-35（5）选择“椭圆”工具，调出椭圆工具“属性”面板，将笔触颜色设为橙色（#FFCC00），“笔触高度”选项设为6，将填充色设为无，如图7-36所示。按住Shift键的同时，分别在舞台窗口中绘制3个大小不等的圆，选中所有圆，按Ctrl+G键进行组合，并拖曳到适当的位置，效果如图7-37所示。 图7-36 图7-377.7.3 制作水果图片闪光动画（1）单击“时间轴”面板下方的“场景1”图标，进入“场景1”的舞台窗口。将“图层1”重新命名为“彩条”。将“库”面板中的影片剪辑元件“彩条动”向舞台窗口拖曳2次，并到窗口的中心位置，选中第1次拖曳的影片剪辑“彩条动”，在“属性”面板中的将“宽”和“高”选项均设为547.3，如图7-38所示。（2）选中第2次拖曳的影片剪辑元件“彩条动”，在影片剪辑“属性”面板中将“宽”和“高”选项都均为240.9，如图7-39所示。调出“变形”面板，将“旋转”选项设为8.5，如图7-40所示，按Enter键确定操作，图形的角度被改变，效果如图7-41所示。 图7-38 图7-39 图7-40 图7-41（3）选中“彩条”图层的第65帧，按F5键，在该帧上插入普通帧，如图7-42所示。单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“果汁”，如图7-43所示。将“库”面板中的图形元件“果汁”拖曳到舞台窗口的中心位置。选中“果汁”图层的第10帧，按F6键，在该帧上插入关键帧，如图7-44所示。 图7-42 图7-43 图7-44（4）选中“果汁”图层的第1帧，选择“任意变形”工具，在舞台窗口中选中“果汁”实例元件，元件周围出现控制手柄，按住Shift键的同时，选中右上方的控制手柄，向右上方拖曳将其覆盖整个舞台窗口。用鼠标右键单击“果汁”图层的第1帧，在弹出的菜单中选择“创建补间动画”命令，创建补间动画，如图7-45所示。图7-45 （5）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“猕猴桃”。选中“猕猴桃”图层的第14帧，在该帧上插入关键帧。将“库”面板中的图形元件“猕猴桃”拖曳到舞台窗口中果汁的右下方，效果如图7-46所示。图7-46（6）分别选中“猕猴桃”图层的第16帧、第18帧、第20帧，在选中的帧上插入关键帧，如图7-47所示。选中“猕猴桃”图层的第14帧，在舞台窗口中选中“猕猴桃”实例元件，调出图形“属性”面板，在“颜色”选项的下拉列表中选择“色调”，将填充色设为白色，舞台窗口中的效果如图7-48所示。 图7-47 图7-48（7）用步骤6的方法对“猕猴桃”图层的第18帧进行同样的操作。单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“西瓜”。选中“西瓜”图层的第20帧，在该帧上插入关键帧。将“库”面板中的图形元件“西瓜”拖曳到舞台窗口中，调出“变形”面板，将“旋转”选项设为13.5，如图7-49所示，按Enter键确定操作，图形的倾斜度被改变，效果如图7-50所示。 图7-49 图7-50（8）分别选中“西瓜”图层的第22帧、第24帧、第26帧，在选中的帧上插入关键帧。选中“西瓜”图层的第20帧，在舞台窗口中选中“西瓜”实例元件，调出图形“属性”面板，在“颜色”选项下拉列表中选择“色调”，将填充色设为白色，如图7-51所示。用步骤6的方法对“西瓜”图层的第24帧进行同样的操作。（9）单击“时间轴”面板下方的“插入图层”按钮，创建两个新图层并将其命名为“橙子”、“草梅”。用步骤6的方法依次对“橙子”、“草梅”图层进行操作，只需将插入的首个关键帧移到前一层的最后一个关键帧的位置上即可，如图7-52所示，效果如图7-53所示。 图7-51 图7-52 图7-537.7.4 制作文字旋转动画效果（1）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“文字框”。选中“文字框”图层的第41帧，在该帧上插入关键帧。将“库”面板中的图形元件“文字框”拖曳到舞台窗口中，选择“任意变形”工具，文字框周围出现变换框，将中心点拖曳到文字框的左上角，并将文字框绕着中心点旋转到合适的角度，效果如图7-54所示。（2）选中“文字框”图层的第47帧，在该帧上插入关键帧，在舞台窗口中选中“文字框”实例元件，将其绕着中心点旋转到合适的角度并调整其位置，效果如图7-55所示。 图7-54 图7-55（3）用鼠标右键单击“文字框”图层的第41帧，在弹出的菜单中选择“创建补间动画”命令，生成创建补间动画，如图7-56所示。（4）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“文字1”。选中“文字1”图层的第50帧，在该帧上插入关键帧。将“库”面板中的图形元件“文字1”拖曳到舞台窗口中，选择“任意变形”工具，文字周围出现变换框，将中心点拖曳到文字的左下角，并将文字绕着中心点旋转到合适的角度，效果如图7-57所示。 图7-56 图7-57（5）选中“文字1”图层的第54帧，在该帧上插入关键帧，在舞台窗口中选中“文字1”实例元件，选择“任意变形”工具，将其绕着中心点旋转到合适角度，效果如图7-58所示。（6）用鼠标右键单击“文字1”图层的第50帧，在弹出的菜单中选择“创建补间动画”命令，创建补间动画，如图7-59所示。 图7-58 图7-59（7）单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“文字2”。用步骤4到步骤6的方法对其进行操作，只需将位置移动，插入的首帧位置移到52帧即可，如图7-60所示，舞台窗口中的效果如图7-61所示。饮料广告制作完成，按Ctrl+Enter键即可查看效果，如图7-62所示。 图7-60 图7-61 图7-62 课后习题制作变色标志【习题知识要点】使用改变帧数命令制作标志图形的变色效果。使用对齐面板将所有的标志图形进行对齐。使用变形面板调整图形的大小，如图7-63所示。【效果所在位置】光盘/Ch07/效果/制作变色标志.fla。图7-637.8.1 导入图片（1）选择计算机中的任意文件夹，选择“工具 文件夹选项”命令，如图7-64所示，在弹出的“文件夹选项”对话框中单击“查看”选项卡，进入相应的对话框，在“高级设置”选项框中勾选“隐藏已知文件类型的扩展名”选项，如图7-65所示，单击“确定”按钮，将计算机中所有文件的扩展名进行隐藏（此方法是为了避免导入后缀为.png的素材图片时，素材名称冲突而引起问题）。 图7-64 图7-65（2）选择“文件 新建”命令，在弹出的“新建文档”对话框中选择“Flash文件”选项，单击“确定”按钮，进入新建文档舞台窗口。按Ctrl+F3键，弹出文档“属性”面板，单击“大小”选项后面的按钮，在弹出的对话框中将舞台窗口的宽度设为350，高度设为350，将背景颜色设为黑色，单击“确定”按钮。（3）选择“文件 导入 导入到库”命令，在弹出的“导入”对话框中选择“Ch07 素材 制作变色标志 标志图形”文件，单击“打开”按钮，文件被导入到“库”面板中，如图7-66所示。图7-667.8.2 制作标志变色效果（1）在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“一个标志动”，勾选“图形”选项，单击“确定”按钮，新建一个图形元件“一个标志动”，舞台窗口也随之转换为图形元件的舞台窗口。将“库”面板中的图形元件“标志图形”拖曳到舞台窗口中，如图7-67所示。分别选中“时间轴”面板中的第8帧、第16帧、第23帧、第30帧，按F6键，在每个帧上插入关键帧，如图7-68所示。 图7-67 图7-68（2）选中第8帧，调出“变形”面板，在面板中进行设置，如图7-69所示，按Enter键确定操，图形实例将缩小，如图7-70所示。选中图形实例，选择图形“属性”面板，在“颜色”选项的下拉列表中选择“色调”，将颜色设为绿色（#99FF00），如图7-71所示。 图7-69 图7-70 图7-71（3）改变颜色后效果如图7-72所示。选中“时间轴”面板中的第16帧，在“变形”面板中勾选“约束”复选框，将“宽度”选项设为40，“高度”选项也随之变换为40，按Enter键确定操作，图形实例将缩小。选中图形实例，选择图形“属性”面板，在“颜色”选项的下拉列表中选择“Alpha”，将其值设为0，如图7-73所示，效果如图7-74所示。 图7-72 图7-73 图7-74（4）选中“时间轴”面板中的第23帧，在“变形”面板中勾选“约束”复选框，将“宽度”选项设为70，“高度”选项也随之变换为70，按Enter键确定操作，图形实例将缩小。选中图形实例，选择图形“属性”面板，在“颜色”选项的下拉列表中选择“色调”，将颜色设为蓝色（#33CCFF），如图7-75所示，改变颜色后效果如图7-76所示。（5）用鼠标右键分别单击“时间轴”面板中的第1帧、第8帧、第16帧、第23帧，在弹出的菜单中选择“创建补间动画”命令，创建补间动画，效果如图7-77所示。 图7-75 图7-76 图7-777.8.3 制作一排标志变色效果（1）在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“一排标志动”，勾选“图形”选项，单击“确定”按钮，新建一个图形元件“一排标志动”，如图7-78所示，舞台窗口也随之转换为图形元件的舞台窗口。（2）在“时间轴”面板中将“图层1”重新命名为“第一个”。将“库”面板中的图形元件“一个标志动”拖曳到舞台窗口中。选中“第一个”图层的第30帧，按F5键，在该帧上插入普通帧。单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“第二个”，如图7-79所示。再将元件“一个标志动”拖曳到“第二个”图层的舞台窗口中，并放置在上个图形元件实例的下方，效果如图7-80所示。 图7-78 图7-79 图7-80（3）用相同的方法再创建新图层，并将它们分别命名为“第三个”、“第四个”、“第五个”，如图7-81所示。将图形元件“一个标志动”分别拖曳到每个新创建的图层中，并在舞台窗口中将它们竖直排列，效果如图7-82所示。（4）选中舞台窗口中的5个元件实例，调出“对齐”面板，在面板中单击“左对齐”按钮，元件实例以左边线为基准进行对齐；单击“垂直居中分布”按钮，如图7-83所示，元件实例将以相等的间距进行排列，效果如图7-84所示。选中“第二个”图层中的元件实例，选择图形“属性”面板，在“第一帧”选项的文本框中输入3，如图7-85所示。 图7-81 图7-82 图7-83 图7-84 图7-85（5）按Enter键确定操作，“第二个”图层中的元件实例将发生变化，效果如图7-86所示。选中“第三个”图层中的元件实例，选择图形“属性”面板，在“第一帧”选项的文本框中输入5，按Enter键确定操作，元件实例发生变化，效果如图7-87所示。选中“第四个”图层中的元件实例，选择图形“属性”面板，在“第一帧”选项的文本框中输入7，按Enter键确定操作，元件实例发生变化，效果如图7-88所示。选中“第五个”图层中的元件实例，选择图形“属性”面板，在“第一帧”选项的文本框中输入9，按Enter键确定操作，元件实例发生变化，效果如图7-88所示。 图7-86 图7-87 图7-88 图7-897.8.4 制作所有标志变色效果（1）在“库”面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“所有标志动”，勾选“图形”选项，单击“确定”按钮，新建一个图形元件“所有标志动”，如图7-90所示，舞台窗口也随之转换为图形元件的舞台窗口。（2）在“时