精通动画制作，制作七夕相会动画

2023-11-17 理论教育版权反馈

【摘要】：本案例利用“补间动画”技术制作了一个“七夕相会”的动画。图4.37 “七夕相会”动画的某一个画面1.设置“文档属性”启动Adobe Flash CS6后，新建一个文档，选择动作脚本为ActionScript 2.0。执行“文件”→“保存”菜单命令，将新文档保存，并命名为“七夕相会”。

【案例概述】

本案例利用“补间动画”技术制作了一个“七夕相会”的动画。通过本案例的学习，读者主要可以掌握“补间动画”的制作方法和特点。部分效果如图4.37所示。

图4.37 “七夕相会”动画的某一个画面

【实现过程】

1.设置“文档属性”

启动Adobe Flash CS6后，新建一个文档，选择动作脚本为ActionScript 2.0。设置文档大小为712×400像素，背景为白色。执行“文件”→“保存”菜单命令，将新文档保存，并命名为“七夕相会”。

2.导入素材

把素材文件夹里的所有图片和声音文件导入到文档的库中。

3.制作元件

Step1 新建一个影片剪辑元件，命名为“月亮”，进入元件编辑状态，在舞台上绘制一个直径为132的圆形，无笔触颜色，填充颜色为浅黄色（#FFFF99）。

Step2 新建一个影片剪辑元件，命名为“牛郎”，进入元件编辑状态，把库中的“牛郎织女.jpg”拖到舞台上，将该位图分离，分离后先用“套索工具”把牛郎先圈取出来，删除其他内容，接下来用“魔术棒”选择剩余的背景，选中后，按【Delete】键删除，如果还有多余的背景存在，用橡皮擦工具擦除。扣取出来的牛郎如图4.38所示，把人物放在舞台中央位置。返回“场景1”。

Step3 新建一个影片剪辑元件，命名为“织女”，进入元件编辑状态，用Step2同样的方法把织女从位图“牛郎织女.jpg”中扣取出来，并放在舞台中央位置，返回“场景1”。

Step4 新建一个图形元件，命名为“牛郎织女”，进入元件编辑状态，把库中的“牛郎”元件和“织女”元件分别拖放到舞台上，并调整元件的位置，如图4.39所示。

图4.38 “牛郎”元件里的内容

图4.39 “牛郎织女”元件里的内容

Step5 新建一个影片剪辑元件，命名为“相会”，进入元件编辑状态，把库中的“牛郎织女”元件拖到舞台的中央位置，在“图层1”的第30帧处插入一个普通帧，选中“图层1”的第1帧到第30帧之间的任意一帧，执行“插入”→“补间动画”菜单命令。用鼠标右键单击“图层1”的第10帧，在弹出的快捷菜单中选择“插入关键帧”→“旋转”命令，如图4.40所示，然后用“任意变形工具”单击第10帧处的元件实例，并将实例顺时针旋转一个角度，如图4.41所示。用同样的方法在“图层1”的第20帧和第30帧处分别插入同样的关键帧，并对第20帧处的实例逆时针旋转一定的角度，如图4.42所示，第30帧处的实例与第1帧处的实例一样，恢复初始角度。返回“场景1”。

图4.40 快捷菜单的选择

图4.41 “相会”元件第10帧处的实例效果

图4.42 “相会”元件第20帧处的实例效果

Step6 新建一个影片剪辑元件，命名为“玫瑰心”，进入元件编辑状态，把库中的“玫瑰心.png”拖到舞台中央位置，返回“场景1”。

Step7 新建一个影片剪辑元件，命名为“love”，进入元件编辑状态，把库中的“玫瑰.jpg”拖到舞台上，然后用文本工具在位图旁边输入文本“love”，设置字体为“Impact”，字号为90点。然后执行“修改”→“分离”菜单命令两次。单击工具箱里的“墨水瓶工具”，设置笔触颜色为黑色，然后在分离好的文字边缘处添加边框，添加好后的效果如图4.43所示。然后按【Delete】键，将边框内的填充颜色删除，删除后的效果如图4.44所示。然后调整旁边的图片大小，锁定宽高比，设置宽度为245，然后按【Ctrl+B】快捷键，将位图分离，然后将线框文字拖到分离后的位图上，接着删除文字以外的部分，最终效果如图4.45所示。返回“场景1”。

图4.43 给分离后的文本加边框(www.chuimin.cn)

图4.44 删除填充颜色后的效果

图4.45 love最终效果图

4.动画制作

Step1 把“图层1”重命名为“背景”，然后把库中的“鹊桥.jpg”拖到舞台上，调整到合适位置，在“图层1”的第260帧处插入普通帧。

Step2 新建一个图层，重命名为“月亮”，然后把库中的“月亮”元件拖到舞台的下方，通过“属性”面板给实例添加“发光”滤镜效果，参数设置如图4.46所示。

Step3 用鼠标右键单击“月亮”图层第1帧到第260帧之间的任意一帧，在弹出的快捷菜单中选择“创建补间动画”，然后用鼠标右键单击“月亮”图层的第60帧，弹出的快捷菜单中选择“插入关键帧”→“位置”命令，然后将第60帧上的实例拖到舞台的上方位置，此时第1帧到第60帧之间元件实例的运动轨迹会显示在舞台上，如图4.47所示。

Step4 新建一个图层，重命名为“角色1”，从库中把“牛郎”元件拖到舞台上，并调整位置，使之站在拱形鹊桥的左侧，然后在“角色1”图层的第90帧处插入一个关键帧，在“角色1”图层的第90帧处单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”，再用鼠标右键单击“角色1”图层的第120帧，在弹出的快捷菜单中选择“插入关键帧”→“位置”命令，将第120帧上的实例拖到舞台中间靠右位置，并使角色站在桥上。此时第90帧到第120帧之间元件实例的运动轨迹会显示在舞台上，但此时的运动轨迹是直线，如图4.48所示。利用“选择工具”调整运动轨迹的平滑度，效果如图4.49所示。选中“角色1”图层的第121帧到260帧，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”。

图4.46 “月亮”元件实例的发光滤镜参数设置

图4.47 “月亮”元件实例的运动轨迹

图4.48 “牛郎”元件实例的直线运动轨迹

图4.49 “牛郎”元件实例的曲线运动轨迹

Step5 新建一个图层，重命名为“角色2”，从库中把“织女”元件拖到舞台上，并调整位置，使之站在拱形鹊桥的右侧，然后在“角色2”图层的第90帧处插入一个关键帧，在“角色2”图层的第90帧处单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”。再用鼠标右键单击“角色2”图层的第120帧，弹出的快捷菜单中选择“插入关键帧”→“位置”命令，将第120帧上的实例拖到舞台中间靠右位置，并使角色站在桥上，此时第90帧到第120帧之间元件实例的运动轨迹会显示在舞台上，但此时的运动轨迹是直线，利用“选择工具”调整运动轨迹的平滑度。选中“角色2”图层的第121帧到260帧，单击鼠标右键，在弹出的快捷菜单中选择“删除帧”。

Step6 新建一个图层，重命名为“相会”，在该图层的第121帧处插入一个关键帧，然后把库中的“相会”元件拖到舞台上，位置可以参照舞台上“牛郎”和“织女”元件实例的位置。

Step7 新建一个图层，重命名为“心”，在该图层的第121帧处插入一个关键帧，然后把库中的“玫瑰心”元件拖到舞台上，调整实例位置，使得“玫瑰心”实例放在“相会”实例的上方，让两个人物角色能够显示在心内部。选中舞台上的“玫瑰心”实例，通过“属性”面板设置该实例的Alpha值为0%。

Step8 用鼠标右键单击“心”图层的第121帧，在弹出的快捷菜单中选择“创建补间动画”，然后再用鼠标右键单击该图层的第150帧，在弹出的快捷菜单中选择“插入关键帧”→“颜色”命令，选中第150帧处的“玫瑰心”实例，通过“属性”面板，把实例的Alpha值改为100%。

Step9 新建一个图层，重命名为“文本”，用文本工具在舞台左上角输入“七夕相会”，设置字号为28点，字体为“黑体”，颜色为黄色（#FFFF33）。选中舞台上的文本“七夕相会”，执行“修改”→“转换为元件”菜单命令，在弹出的对话框中设置元件名称为“文本”，类型为“影片剪辑”，单击“确定”按钮。选中“文本”图层的第40帧，按【F6】键。然后用鼠标右键单击“文本”图层的第40帧，在弹出的快捷菜单中选择“3D补间”。打开“动画编辑器”，选中第40帧，设置“旋转Y”的属性值为360。。

Step10 用鼠标右键单击“文本”图层第1帧到第40帧之间的任意一帧，在弹出的快捷菜单中选择“另存为动画预设”命令，会弹出“将预设另存为”对话框，设置名称为“3D旋转”，单击“确定”按钮。

Step11 新建一个图层，重命名为“love”，在该图层的第151帧处插入一个关键帧，然后把库中的“love”元件拖到舞台的左下角，位置可参见图4.37。

Step12 选中“love”图层第151帧处的元件实例，执行“窗口”→“动画预设”菜单命令，打开“动画预设”面板，在“自定义预设”文件夹下选择“3D旋转”，单击“应用”按钮。

Step13 新建一个图层，重命名为“音乐”，选中该图层的第1帧，打开“属性”面板，设置声音名称为“鹊桥会.wav”，同步为“数据流”。

Step14 保存文档，测试影片。

【技术讲解】

精通动画制作，制作七夕相会动画

相关推荐