实例5 设置卡通图片变色动画
实例说明
本实例中，将指导读者设置卡通图片变色的动画。动画内容为在卡通图片中，设置小女孩的花裙和头花颜色逐渐变化的过程。通过本实例的制作使读者加深学习Flash CS3中补间动画的运用。
技术要点
在制作本实例时，通过导入素材图像，将各个图层中的图片在不同帧处添加关键帧，并设置补间动画，完成图片逐渐变色的效果。
在制作Flash动画时，应注意将花裙（头花）与花裙阴影（头花阴影）的颜色设置为同一色调。在本实例中，将为读者详细讲解上述动画设置方法，如图5-1所示为动画完成后的截图。
图5-1 卡通图片变色动画
1 打开Flash CS3，在菜单栏执行“文件”/“新建”命令，打开“新建文档”对话框，在该对话框中的“常规”面板中，选择“Flash文件（ActionScript 3.0）”选项，如图5-2所示，单击“确定”按钮，退出该对话框，创建一个新的Flash文档。
图5-2 新建文档
2 在“属性”检查器中单击“文档属性”按钮，打开“文档属性”对话框，设置文件的尺寸的宽为“550像素”，高为“450像素”，设置背景颜色为“白色”，设置帧频为“12”，标尺单位为“像素”，如图5-3所示，单击“确定”按钮，退出该对话框。
图5-3 “文档属性”对话框
3 在菜单栏执行“文件”/“导入”/“导入到舞台”命令，打开“导入”对话框，打开本书附带光盘中的“帧与关键帧的设置”/“实例5：设置卡通图片变色动画”/“素材.psd”文件，单击“确定”按钮，打开“将‘素材.psd’导入到舞台”对话框，如图5-4所示。选择左侧“检查要导入的Photoshop图层”显示窗的所有图层，选择“具有可编辑图层样式的位图图像”单选按钮，将其转换为具有可编辑图层样式的位图图像，并单击“确定”按钮，退出该对话框。
图5-4 将素材图像导入到舞台
4 选择所有图层中的图片，在“属性”检查器中设置其X轴位置为0，Y轴位置为0，如图5-5所示。
图5-5 调整素材图片的位置
5 在时间轴面板中选择“人物背景”层的第30帧，右击鼠标，在弹出的快捷菜单中选择“插入帧”命令，使该层的图片在第1～第30帧之间显示。
6 选择“左侧花裙”层的第15帧，右击鼠标，在弹出的快捷菜单中选择“插入关键帧”命令，在该帧处插入关键帧。
7 执行菜单栏中的“窗口”/“属性”/“属性”命令，打开“属性”检查器，然后选择第15帧中的图像，在“属性”检查器中单击“颜色”下三角按钮，在弹出的下拉列表框中选择“色调”选项，将“颜色”设置为绿色（R：102、G：204、B：0），将“色彩数量”设置为100%，如图5-6所示。
图5-6 设置“属性”检查器
8 选择“左侧花裙”层中的第1帧，右击鼠标，在弹出的快捷菜单中选择“创建补间动画”命令，使该图像在第1～第15帧之间创建补间动画。
9 单击第30帧，按下键盘上的F6键插入关键帧，然后在“属性”检查器设置该帧处图像的“颜色”为“橙色”（R：255、G：153、B：0），如图5-7所示。
图5-7 设置“属性”检查器
10 选择“左侧花裙”层中第15帧，右击鼠标，在弹出的快捷菜单中选择“创建补间动画”命令，使该图像在第15～第30帧之间创建补间动画。
11 分别在“左侧花裙阴影”层的第15帧和第30帧插入关键帧，然后设置第15帧处的图片颜色为“深绿色”（R：102、G：153、B：0），第30帧处的图片颜色为“橘黄色”（R：255、G：102、B：0）。
12 使“左侧花裙阴影”层的图片分别在第1～第15帧、第15～第30帧之间创建补间动画。
13 选择“右侧花裙”层的第15帧，插入关键帧。然后在“属性”检查器中将该帧处图像“颜色”设置为“淡紫色”（R：204、G：102、B：255），如图5-8所示。
图5-8 设置“属性”检查器
14 使“右侧花裙”层中的图片在第1～第15帧之间创建补间动画。
15 选择第30帧，按下键盘上的F6键插入关键帧，然后在“属性”检查器设置该帧中图像的“颜色”为“绿色”（R：153、G：255、B：51），如图5-9所示。
图5-9 设置“属性”检查器
16 使“右侧花裙”层中的图片在第15～第30帧之间创建补间动画。
17 分别在“右侧花裙阴影”层的第15帧和第30帧插入关键帧，然后设置第15帧处的图片颜色为“淡紫色”（R：204、G：102、B：255），第30帧处的图片颜色为“绿色”（R：153、G：255、B：51）。
18 使“右侧花裙阴影”层的图片分别在第1～第15帧、第15～第30帧之间创建补间动画。
19 接下来参照“左侧花裙”层的设置方法设置“左侧头花”层的补间动画；参照“右侧花裙”层的设置方法设置“右侧头花”层的补间动画；参照“左侧花裙阴影”层的设置方法设置“左侧头花阴影”层的补间动画；参照“右侧花裙阴影”层的设置方法设置“右侧头花阴影”层的设置方法。
20 现在本实例就全部完成了，按下键盘上的Ctrl+Enter组合键，测试影片效果如图5-10所示。如果读者在编辑过程中遇到什么问题，可以打开本书附带光盘中的“帧与关键帧的设置”/“实例5：设置卡通图片变色动画”/“卡通图片变色.fla”文件，该文件是本实例的完成效果。
图5-10 卡通图片变色动画效果