Animate动画设计与制作实例教程（Animate CC 2019） 课件 项目七 制作动画片.pptx

Animate动画设计与制作实例教程

（AnimateCC2019）;项目七制作动画片;学习目标

掌握代码片段和模板的使用方法；

掌握鱼儿游、猫和老鼠、简单爱动画片的制作方法。;7.1.1代码片段

代码片段是Animate中预先编写好的ActionScript3.0代码段，可以方便地添加到项目里，利用“代码片段”面板里提供的动作立即给项目添加交互功能。可以使用代码片段添加能影响舞台上行为的代码，添加能在时间轴中控制播放头移动的代码，还可以将创建的新代码片段添加到面板中。

使用代码片段控制对象，对象必须是影片剪辑、按钮或者文本，必须在“属性”面板中为对象添加实例名，代码片段不能直接添加到对象上，只能添加到时间轴的帧中。

;执行“窗口”“代码片段”命令，可以打开“代码片段”面板，如图7-1所示。可以为ActionScript文档、HTML5Canvas文档和WebGL文档添加交互代码。;1．使用代码片段添加ActionScript代码

在影片主时间轴上的任意一个关键帧以及影片剪辑元件里的任意一个关键帧，都可以添加ActionScript代码。在编译后的项目播放过程中，当播放到某一帧时，如果其中包含代码，它们就会被执行。

2．将自定义代码片段添加到“代码片段”面板

（1）在“代码片段”面板中，从面板菜单中选择“新建代码片段”。在弹出的对话框中，为自定义的代码片段输入标题、工具提示文本和JavaScript或ActionScript3.0代码。

（2）单击“自动填充”按钮，可以将“动作”面板中选择的任何代码添加进去。

（3）在“动作”面板中，查看新添加的代码并根据片段开头的说明替换必要的参数。;Animate的模板为用户创作各种常见动画题材提供了很大便利，有许多模板可供创作使用，如照片幻灯片模板、测验模板、移动内容模板等。;7.2.1案例效果分析

本实例制作一群小鱼在水中游来游去的小动画，主要学习元件的使用方法。效果如图7-10所示。

本实例使用5个绘制鱼儿不同形态的图形元件组成一个影片剪辑元件，由影片剪辑元件内部放置图形元件的顺序和帧数来控制鱼儿的动作，然后导入背景图片，并将影片剪辑元件放置在合适的位置创建补间动画，完成本实例的制作。;图7-10;7.2.2设计思路

本例在元件的不同关键帧中改变鱼儿的形状，以形成鱼儿在水中不断穿梭、翻腾的动画效果。

7.2.3相关知识和技能点

（1）Animate中的形状为分散的状态，在绘制鱼儿形状时，每出现一处重叠的线条，鱼儿形状就被分割成分散的形状。在调整颜色时要注意，鱼儿身体是由多个分散的色块构成的，要统一调配颜色。

（2）将5个形态不同的鱼儿图形元件放置在一个影片剪辑元件中，再对影片剪辑元件设置补间动画改变设置，从而制作鱼儿游来游去的效果。;（1）启动AnimateCC2019，按Ctrl+N组合键，新建一个Animate文件。

（2）按Ctrl+F8组合键，弹出“创建新元件”对话框，在“名称”文本框中输入“1”，选择类型为“图形”，如图7-11所示。

（3）单击“确定”按钮，进入该元件的编辑窗口，选择工具箱中的“铅笔”工具，在“舞台”的中心绘制鱼儿的轮廓，如图7-12所示。;?图7-11????????????????????????????????????????图7-12;（4）在“属性”面板中设置填充色为#FFBA94，使用“颜料桶”工具填充鱼的身体部分，如图7-13所示。

（5）更改填充色为#FF9A63，填充鱼的头部，如图7-14所示。

（6）更改填充色为#FF7939，填充鱼身上的花纹，如图7-15所示。

（7）删除鱼儿轮廓线，如图7-16所示。至此，“1”元件完成。;??图7-13??????????????????图7-14??????????????????图7-15??????????????????图7-16;（8）按Ctrl+L组合键打开“库”面板，选中“1”元件，用鼠标右键单击，在弹出的快捷菜单中选择“直接复制”命令，弹出“直接复制元件”对话框，修改文件名为“2”，如图7-17所示。;（9）单击“确定”按钮，进入“2”元件的编辑窗口，选择“任意变形”工具和“选择”工具，调整鱼儿的形状。

（10）重复步骤（8）、（9）的操作，复制出“3”“4”“5”元件，并依次调整鱼儿的形状，如图7-18所示。

（11）按Ctrl+F8组合键新建元件，命名为“鱼儿”，选择元件类型为“影片剪辑”，如图7-19所示。

（12）单击“确定”按钮，进入新建影片剪辑元件的编辑窗口，从“库”面板中将“1”元件拖到如图7-20所示的位置。;图7-18;??图7-1