《flashcs4中文版模块教程模块12遮罩和引导线动画1剖析》由会员分享，可在线阅读，更多相关《flashcs4中文版模块教程模块12遮罩和引导线动画1剖析（39页珍藏版）》请在金锄头文库上搜索。
1、模块十二 遮罩和引导线动画,模块十二遮罩和引导线动画,重点提示： 图层的运用 遮罩动画的原理及制作 引导线动画的原理及制作,模块十二遮罩和引导线动画,子模块一 Flash CS4的简介 子模块二 引导线动画的原理及制作 工作情境一 制作“探照灯”动画 工作情境二 制作“反色文字”动画 工作情境三 制作“七星瓢虫”动画 模 块 小 结 模 块 训 练,子模块一 Flash CS4的简介,一、图层管理 1图层编辑 （1）添加图层 单击【时间轴】面板左下角的按钮。 选择【插入】【时间轴】【图层】命令。 在【时间轴】面板中的图层上右击，在弹出的快捷菜单中选择【插入图层】命令。 （2）删除图层有以下两种
2、方法： 在【时间轴】面板中右击要删除的图层，在弹出的快捷菜单中选择【删除图层】命令。 选中要删除的图层，单击【时间轴】面板下方的按钮。,子模块一 Flash CS4的简介,2设置图层状态 （1）隐藏图层： 隐藏图层有以下3种方法： 单击图层名称右边的隐藏栏即可隐藏图层，再次单击隐藏栏即可取消隐藏该图层。 在图层隐藏栏中上下拖动鼠标指针，即可隐藏多个图层或者取消隐藏多个图层。 单击隐藏图标，可以将所有的图层隐藏，再次单击隐藏图标则会取消隐藏所有图层。 （2）锁定图层：单击按钮 ，可锁定某些图层。,子模块一 Flash CS4的简介,二、遮罩动画原理及制作 1遮罩动画的概念 （1）遮罩：为了得到特
3、殊的显示效果，用户可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示出来。 （2）遮罩的作用：在Flash动画中遮罩主要有两种用途，一种是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一种是用来遮住某个元件的一部分，从而实现一些特殊的效果。,子模块一 Flash CS4的简介,2创建遮罩的方法 在Flash中没有一个专门的按钮可以创建遮罩层，遮罩层其实是由普通图层转化的。只要在某个图层上右击，在弹出的快捷菜单中选择【遮罩层】命令，该图层就会成为遮罩层，图层图标就会从普通层图标变为遮罩层图标，系统会自动把遮
4、罩层下面的图层关联为“被遮罩层”。在缩进的同时图标变为被遮罩层图标。如果想关联多个遮罩层，则只要把这些图层拖到被遮罩层下面即可。,子模块一 Flash CS4的简介,3应用遮罩时的技巧 要在场景中显示遮罩效果，用户可以锁定遮罩层和被遮罩层。 可以单击图层显示轮廓按钮，使之成为线框模式，让被遮罩层能显示出来。 4遮罩动画制作的注意事项 不能用遮罩层遮罩另一个遮罩层。 不能在被遮罩层中放置动态文本。 遮罩可以用于使用.gif图片生成的动画中。,子模块二 引导线动画的原理及制作,一、引导线动画的概念 将一个或多个图层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式称为“引导线动画”，
5、这种动画形式可使一个或多个元件完成曲线或不规则运动形式。,子模块二引导线动画的原理及制作,二、创建引导线动画的方法 1创建引导层和被引导层：右击普通图层，在快捷菜单中选择“添加传统运动引导层”命令，则可创建该图层为引导层，新添加的图层为被引导层。 2.引导层和被引导层中的对象：引导层是用来指示元件运行路径的，所以引导层中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出来的线段。而被引导层中的对象是跟着引导线运动的，可以使用影片剪辑、图形元件、按钮和文字等，但不能应用形状。 3向被引导层中添加元件：被引导的对象起始点和终点的2个“中心点”一定要对准“引导线”的2个端头。,工作
6、情境一 制作“探照灯”动画,一、工作情境描述及效果 工作情境描述 通过模拟扫描敌后方的探照灯效果，用户可以熟悉遮罩动画的创建和使用技巧。在本案例中分别涉及图层、元件和遮罩动画。具体分析如表12-1所示。,工作情境一 制作第一个Flash动画,表12-1 “探照灯”动画工作任务分析表,工作情境一 制作第一个Flash动画,工作情境效果 “探照灯”动画的最终效果如图12-1所示 。,图12-1 探照灯动画的最终效果,工作情境一 制作第一个Flash动画,二、工作情境详解 （1）新建一个Flash动画文档，在工作区右上角的下拉列表中选择【显示全部】选项。 （2）选择【文件】【导入】【导入到舞台】命令
7、，导入一张图片。单击工具栏中的【对齐】按钮，单击【相对于舞台】按钮、【匹配宽度】按钮、【匹配高度】按钮、【水平中齐】按钮、【垂直中齐】按钮，按快捷键将图片转换为图形元件，如图12-2所示。 （3）选中元件，在【属性】面板的【样式】下拉列表中选择【亮度】选项，调整数值为-60%，调整后的图形元件如图12-3所示。,工作情境一 制作第一个Flash动画,图12-2 转换为图形元件 图12-3 亮度值调整后的图形元件,工作情境一 制作第一个Flash动画,（4）单击【时间轴】面板左下方的【新建图层】按钮，新建一个图层，然后从【库】面板中将图形元件拖放到舞台中央，与【图层1】中的图形元件重叠。 （5）
8、再单击【时间轴】面板的左下方的【新建图层】按钮，新建一个图层，然后选择工具箱中的【椭圆工具】，在舞台上绘制一个模仿探照灯大小的椭圆，颜色可任意选择，按快捷键将其转换为图形元件，如图12-4所示。,图12-4 绘制椭圆,工作情境一 制作第一个Flash动画,（6）分别在【图层1】和【图层2】的第30帧处按快捷键插入帧，再分别在椭圆图层的第15帧和第30帧。按快捷键插入关键帧。在第15帧将椭圆移动一个位置，使用【任意变形工具】将其放大，再在第30帧将椭圆移动到另外一个位置，使用【任意变形工具】将其缩小，如图12-5所示。,图12-5 椭圆两个关键帧的位置和大小比较,工作情境一 制作第一个Flash
9、动画,（7）在每段中间任选一帧并右击，在弹出的快捷菜单中选择【创建传统补间】命令。右击椭圆图层的名称，在弹出的快捷菜单中选择【遮罩层】命令，这时【时间轴】面板如图12-6所示。 （8）这时按键预览动画，用户可以看到椭圆经过图片时照亮图片的动画效果。 （9）在【库】面板中右击“元件2”，在弹出的快捷菜单中选择【直接复制】命令，弹出如图12-7所示的对话框，在其中单击【确定】按钮，产生一个名为“元件2副本”的元件。,图12-6 【时间轴】面板,图 12-7 【直接复制元件】对话框,工作情境一 制作第一个Flash动画,（10）双击“元件2副本”，进入其编辑状态，然后在【颜色】面板中设置填充为透明黑
10、色到黑色的放射状渐变，如图12-8所示。选择【渐变变形工具】调整其中心点和范围，如图12-9所示。,图12-8 【颜色】面板 图12-9 填充变形,工作情境一 制作第一个Flash动画,（11）单击【场景1】超链接返回场景中，单击【新建图层】按钮，新建一个图层，将“元件2副本”拖放到与“元件2”重合的位置，如图12-10所示，在移动的过程中会出现对齐标准线。,图12-10 放置“元件2副本”,工作情境一 制作第一个Flash动画,（12）分别在新椭圆图层的第15帧和第30帧处按快捷键插入关键帧。在第15帧将椭圆移动到遮罩的位置，利用【任意变形工具】将其放大，使其与“元件2”重合，再在第30帧将
11、椭圆移动到遮罩的位置，利用【任意变形工具】将其缩小，使其与“元件2”重合，如图12-11所示。,图12-11 两个关键帧中椭圆与遮罩重合,工作情境一 制作第一个Flash动画,（13）在每段中间任选一帧并右击，在弹出的快捷菜单中选择【创建补间动画】命令，这时【时间轴】面板如图12-12所示。 （14）按键预览动画，或者组合键测试动画，看到如图12-1所示探照灯经过的动画效果。,图12-12【时间轴】面板,工作情境二 制作“反色文字”动画,一、工作情境描述及效果 工作情境描述 反色文字动画即文字在黑色背景里是白字，进入白色背景就变成了黑字，这也是巧妙运用遮罩动画实现的特殊效果。在本案例中分别涉及
12、图层、文字、遮罩动画。具体分析如表12-2所示：,工作情境二 制作“反色文字”动画,表12-2 “反色文字”动画工作任务分析表,工作情境二 制作“反色文字”动画,工作情境效果 “反色文字”动画的最终效果如图12-13所示。,图 12-13 “反色文字”动画最终效果,工作情境二 制作“反色文字”动画,二、工作情境详解 （1）新建一个Flash动画文档，设置背景色为红色，在工作区右上角的下拉列表中选择【显示全部】选项。 （2）选择【矩形工具】，在【属性】面板中设置边框颜色为无，填充颜色为黑色。然后在舞台上绘制一个矩形，单击工具栏中的【对齐】按钮，打开【对齐】面板，单击【相对于舞台】按钮、【匹配宽度
13、】按钮、【水平中齐】按钮和【垂直中齐】按钮，然后使用【选择工具】选中矩形右半边，如图12-14（a）所示。在【属性】面板中设置填充颜色为白色，制作出左半边黑色，右半边白色的背景，如图12-14（b）所示。,工作情境二 制作“反色文字”动画,（a） （b） 图12-14 “反色文字”动画,（3）单击时间轴左下角的【新建图层】按钮，新建一个图层，将图层1的黑白背景复制到图层 2 中，然后选中图层 2，选择【修改】【变形】【水平翻转】命令，将图层 2 中的变成左白右黑的背景，如图12-15所示。,图12-15 图层2左白右黑背景,工作情境二 制作“反色文字”动画,（4）单击时间轴左下角的【插入图层】
14、按钮 ，新建一个图层，选择工具箱中的【文本工具】，在【属性】面板中设定文字大小为 96，颜色可以任意设置，字体为ArialBlack，然后在舞台上输入FLASH CS4。 （5）分别在图层1和图层2的第30帧处按快捷键插入帧，在文字层的第1帧将文字移动到舞台右侧。选中文字层的第30帧，按快捷键插入关键帧，将文字移动到舞台左侧。在中间任选一帧并右击，在弹出的快捷菜单中选择【创建传统补间】命令，文字运动前后的画面如图12-16所示。,工作情境二 制作“反色文字”动画,图12-16 文字运动前后的画面,（6）右击文字层的名称，在弹出的快捷菜单中选择【遮罩层】命令，将文字作为遮罩，左白右黑作为被遮罩，
15、那么就会在左黑右白的背景中显示如图12-13所示的反色字了，这时的【时间轴】面板如图12-17所示。,工作情境二 制作“反色文字”动画,（7）按键预览动画，或者按组合键测试动画。,图12-17 【时间轴】面板,工作情境三 制作“七星瓢虫”动画,一、工作情境描述及效果 工作情境描述 通过制作“七星瓢虫”动画，用户可以进一步熟悉引导线动画的制作方法与技巧，在播放过程中可以看到七星瓢虫在图书上按一定路线移动的动画效果。在本案例中分别涉及图层和引导线动画。具体分析如表12-3所示。,工作情境三 制作“七星瓢虫”动画,表12-3 “七星瓢虫”动画工作任务分析表,工作情境三 制作“七星瓢虫”动画,工作情境
16、效果 “七星瓢虫”动画的最终效果如图12-18所示。,图12-18 “七星瓢虫”动画的最终效果,工作情境三 制作“七星瓢虫”动画,二、工作情境详解 （1）新建一个Flash动画文档，命名为“瓢虫”，设置场景大小为500像素300像素，背景颜色为黄灰色。 （2）选择【文件】【导入】【导入到舞台】命令，导入图像素材“书.jpg”到舞台上，将其作为背景图形。 （3）新建【图层2】，在场景中用绘图工具绘制瓢虫的图形，如图12-19所示。 （4）选中【图层 2】并右击，在弹出的快捷菜单中选择【添加传统运动引导层】命令，如图12-20所示。,工作情境三 制作“七星瓢虫”动画,（5）选中引导层的第1帧，选择【铅笔工具】，在选项工具区域中选择“平滑”模式，然后在舞台上绘制一条平滑的曲线作为引导路径，如图12-21所示。,图12-21 绘制曲线,图12-19 绘制瓢虫的图形 图12-20 添加引导层,工作情境三 制作“七星瓢虫”动画,（6）在引导层和图层1的第6
