WEB动画制作与设计课件：高级动画（一）

高级动画制作高级动画制作高级动画制作1、了解引导层的特点及引导层动画的制作原理；2、掌握运动引导层的动画制作方法；3．了解遮罩层的特点及遮罩的动画制作原理；4、掌握遮罩的动画制作方法；【课堂学习目标】【案例学习目标】本案例将使用绘图工具制作引导层，使用创建补间动画命令制作动画。【案例知识要点】1、了解引导层的特点；2、能使用铅笔工具绘制线条并添加运动引导层；3、能够使用创建补间动画命令制作出飘落的花瓣效果。【课堂案例】—制作“飘落的花瓣”1、图层的基本操作（1）创建图层

选择“插入>时间轴>图层”命令来创建一个新的图层，或在“时间轴”面板下方单击“插入图层”按钮，创建一个新的图层。【理论知识】——制作引导层动画1、图层的基本操作（2）选取图层

在“时间轴”面板中选中该图层即可。当前图层会在“时间轴”面板中以深色显示，铅笔图标表示可以对该图层进行编辑。

按住Ctrl键的同时，用鼠标在要选择的图层上单击，可以一次选择多个图层；按住Shift键的同时，用鼠标单击两个图层，在这两个图层中间的其他图层也会被同时选中。【理论知识】——制作引导层动画1、图层的基本操作（3）排列图层

点选需要移动的图层，按住鼠标不放，拖动图层到指定位置松开即可。（4）复制、粘贴图层

首先单击要复制的图层，选择“编辑>时间轴>复制帧”命令，然后创建一个新的图层，选中新的图层，选择“编辑>时间轴>粘贴帧”命令，在新建的图层中粘贴复制过来的内容。【理论知识】——制作引导层动画1、图层的基本操作（5）删除图层有以下两种方法：A、先选中要删除的图层，在面板下方单击“删除图层”按钮，即可删除选中图层；B、选中要删除的图层，按住鼠标不放，将其向下拖曳到“删除图层”按钮上进行删除。【理论知识】——制作引导层动画1、图层的基本操作（6）重命名图层有以下两种方法：A、双击“时间轴”面板中的图层名称，名称变为可编辑状态，输入要更改的图层名称即可。B、可选中要修改名称的图层，选择“修改>时间轴>图层属性”命令，在弹出的“图层属性”对话框中修改图层的名称。【理论知识】——制作引导层动画【理论知识】——制作引导层动画2．图层文件夹（1）创建图层文件夹有两种方法：A、选择“插入>时间轴>图层文件夹”命令，在“时间轴”面板中创建图层文件夹。B、还可单击“时间轴”面板下方的“插入图层文件夹”按钮。【理论知识】——制作引导层动画2．图层文件夹（2）删除图层文件夹有两种方法：A、在“时间轴”面板中选中要删除的图层文件夹，单击面板下方的“删除图层”按钮。B、还可在“时间轴”面板中选中要删除的图层文件夹，将其向下拖曳到“删除图层”按钮上进行删除。【理论知识】——制作引导层动画3．普通引导层（1）创建普通引导层有两种方法：

A、鼠标右键单击“时间轴”面板中的某个图层，在弹出的菜单中选择“引导层”命令，该图层转换为普通引导层，此时，图层前面的图标变为

。B、在“时间轴”面板中选中要转换的图层，选择“修改>时间轴>图层属性”命令，在弹出的对话框中的“类型”选项组中选择“引导层”单选项，单击“确定”按钮，选中的图层转换为普通引导层。【理论知识】——制作引导层动画3．普通引导层（2）将普通引导层转换为普通图层有两种方法：

A、鼠标右键单击“时间轴”面板中的引导层，在弹出的菜单中选择“引导层”命令，引导层即可以转换为普通图层，此时，图层前面的图标变为

。B、中引导层，选择“修改>时间轴>图层属性”命令，在弹出的对话框中“类型”选项组中选择“一般”单选项，单击“确定”按钮。【理论知识】——制作引导层动画4．引导层动画原理（1）引导层的作用

引导层是设置对象运动路径的导向，使与之相链接的被引导层中的对象沿着路径运动。（2）引导路径的绘制

引导层上的路径必须是利用“钢笔”工具、“铅笔”工具、“线条”工具、“椭圆”工具、“矩形”工具或“刷子”工具所绘制的曲线。

【理论知识】——制作引导层动画4．引导层动画原理（3）引导层动画原理引导层动画是通过创建引导层来实现的。将一个或多个图层链接到一个引导层，使一个或多个对象沿同一条路径（引导线）运动的动画形式就叫“引导层动画”。【理论知识】——制作引导层动画4．引导层动画原理（4）引导线的特点A、引导线是绘制在引导层中。B、引导线可以是任意的有起点和终点的连续线条；C、引导线在动画发布后是不可见的；D、引导线可以引导一个或多个对象运动。1．导入图片（1）新建一个Flash文件，设置舞台窗口的“宽度”设为400像素，“高度”设为550像素。（2）按Ctrl+L组合键，调出“库”面板，将“素材>制作飘落的花瓣>底图、蝴蝶”文件导入到“库”面板中。（3）将“库”面板中的位图“底图”拖曳到舞台窗口中，设置其宽为400像素，高为550像素，使图片在舞台窗口的正中位置。【课堂案例】—制作“飘落的花瓣”1．导入图片（4）创建新的图层并将其命名为“蝴蝶”。将“库”面板中的位图“蝴蝶”拖曳到舞台窗口中。选择位图“属性”面板，设置其宽为138像素，高为130.5像素，X坐标为18，Y轴坐标为34，将蝴蝶图片放置在舞台窗口的左上方。（5）选择“文件>导入>导入到库”命令，将素材“花瓣1”文件导入到“库”面板中。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（1）创建“新建元件”，在弹出“创建新元件”对话框中“名称”选项的文本框中输入“花瓣动1”，选择“影片剪辑”类型，单击“确定”按钮，新建一个影片剪辑元件“花瓣动1”，舞台窗口也随之转换为影片剪辑元件的舞台窗口。单击“图层1”上单击鼠标右键选择“添加传统引导层”命令，为“图层1”添加运动引导层。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（2）选择“铅笔”工具，设置“笔触颜色”设为黑色，选中工具箱下方“选项”选项组中的平滑选项，在引导层上绘制出一条曲线，效果如图左所示。选中引导层的第55帧，按F5键插入普通帧，选中“图层1”的第1帧，将“库”面板中的图形元件“花瓣1”拖曳到舞台窗口中，放在曲线上方的端点上，效果如图右所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（3）选中“图层1”的第55帧，按F6键插入关键帧，用选择工具将第55帧中的花瓣移动到曲线下方的端点上，效果如图所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（4）用鼠标右键单击“图层1”中的第1帧，在弹出的菜单中选择“创建补间动画”命令，在第1帧和第55帧之间生成动作补间动画。（5）创建新的影片剪辑元件“花瓣动2”，单击“图层1”上单击鼠标右键选择“添加传统引导层”命令，为“图层1”添加运动引导层。选择“铅笔”工具，在引导层上绘制出一条曲线，效果如图所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（6）选中引导层的第65帧，按F5键插入普通帧。选中“图层1”的第1帧，将“库”面板中的图形元件“花瓣1”拖曳到舞台窗口中，放在曲线上方的端点上，效果如图所示。选中“图层1”的第65帧，按F6键插入关键帧。用选择工具将第65帧中的花瓣移动到曲线下方的端点上，效果如图所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（7）用鼠标右键单击“图层1”中的第1帧，在弹出的菜单中选择“创建传统补间动画”命令，在第1帧～第65帧生成动作补间动画，如图所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（7）同样的方法创建影片剪辑元件“花瓣动3”。单击“时间轴”面板下方的“添加运动引导层”按钮，为“图层1”添加运动引导层。选择“铅笔”工具，在引导层上绘制出一条曲线。选中引导层的第85帧，按F5键插入普通帧。选中“图层1”的第1帧，将“库”面板中的图形元件“花瓣1”拖曳到舞台窗口中，放在曲线上方的端点上。选中“图层1”的第85帧，按F6键插入关键帧。用选择工具将第85帧中的花瓣移动到曲线下方的端点上。在第1帧和第85帧之间生成动作补间动画。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（8）单击“时间轴”面板下方的“场景1”图标，进入“场景1”的舞台窗口。单击“时间轴”面板下方的“插入图层“按钮，创建新图层并将其命名为“花朵1”。选中图层“花朵l”，将“库”面板中的影片剪辑元件“花瓣动1”拖曳到舞台窗口中，效果如图所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（9）同样将“库”面板中的影片剪辑元件“花瓣动2”拖曳到舞台窗口中，放置在其他花瓣的旁边，效果如左图所示。将影片剪辑元件“花瓣动3”也拖曳到舞台窗口中，效果如右图所示。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（10）选中“底图”图层的第85帧，按F5键，在该帧上插入普通帧。选中“蝴蝶”图层的第85帧，按F5键，在该帧上插入普通帧。选中“花朵1”图层的第85帧，按F5键，在该帧上插入普通帧。单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“花朵2”。选中图层“花朵2”图层的第15帧，按F6键，在该帧上插入关键帧。【课堂案例】—制作“飘落的花瓣”2．绘制引导线制作落花效果（11）选中第15帧，将“库”面板中的影片剪辑元件“花瓣动1”拖曳到舞台窗口中，放置在其他花瓣的旁边，效果如左图所示。将影片剪辑元件“花瓣动2”拖曳到舞台窗口中，效果如中图所示。将影片剪辑元件“花瓣动3”拖曳到舞台窗口中，效果如右图所示。飘落的花瓣效果制作完成，按Ctrl+Enter组合键即可查看效果。【课堂案例】—制作“飘落的花瓣”