网页设计与制作 第16章：动画元件制作和外部素材的导入.ppt

16.5 综合案例 《网页设计与制作》 图16-27 蝴蝶身体的绘制及填充 2）新建图形元件，命名左翅，用【钢笔工具】画翅膀的轮廓，用【选择工具】对其进行修改，将其调整为下图所示16-28所示。填充颜色为左翅的上半部分为线性填充，填充颜色从左至右依次为：#FF9900,#FFCC00,#FEFE45,#FFFF99；左翅的下半部分的填充为放射性的填充，颜色从左至右依次为：#FDD32D,#FFCC00,#FEFE45,#323201,填充色板如图16-所示，用工具调整颜色填充，其效果如图16-28所示。 16.5 综合案例 《网页设计与制作》 左翅上线性填充色板 左翅下放射状填充色板 图16-28 左翅元件的制作 16.5 综合案例 《网页设计与制作》 3）在左翅元件上插入图层2，用【线条工具】在左翅的上部绘制若干线段，线条的个数根据需要，这里绘制三条，并用【选择工具】进行调整，线条的颜色为：#FF9900,在“颜色”面板中设置其透明度为80%，然后用椭圆工具绘制小圆形，填充设置为系统调色板中的 红色球形填充，然后放置到如图16-29所示的位置，最后将笔触删除，效果如图。 图16-29 左翅斑点的制作 16.5 综合案例 《网页设计与制作》 4）新建图形元件，命名蝴蝶，从库中拖入蝶身和左翅元件，把左翅复制，选择“修改｜变形｜水平翻转”，将左翅变为右翅，组装成蝴蝶如下图16-30所示。 图 16-30 制作蝴蝶元件 （5）新建一个影片剪辑元件，取名为蝴蝶动画。从库中将刚才做好的蝴蝶元件拖动到该动画元件中，此时在时间轴的第一个关键帧上，调整蝴蝶元件该剪辑的中心，然后选中第2帧，新建一个关键帧，且【任意变形工具】将蝴蝶元件压扁一些，依次逐步增加关键帧，每一帧调整的越细腻，将来的动画的流畅性越好，在这个案例中做5帧，如图16-31所示。 16.5 综合案例 《网页设计与制作》 注：在压扁的时候一定要将变形中心移动到正中间，这样两个翅膀的缩进才会一致。 图16-31 制作蝴蝶动画 图16-32 蝴蝶动画剪辑 （6）然后继续插入第6个关键帧，此时将第4帧的内容复制到第6帧，第3帧的复制到第7帧，依次类推，最终复制完成。也可选中第1到第4帧，复制并从第6帧开始粘贴，然后选中第6帧到第9帧，对其进行翻转帧操作，如图16-32。 至此一个蝴蝶扇动翅膀人影片剪辑动画就做好了，你可以将做好的蝴蝶影片剪辑动画元件放到在上一个案例中制作的花朵元件中，就可以制作出一个蝴蝶在花上飞动的动画了 第16章：动画元件制作和外部素材的导入 《网页设计与制作》 16.4.3 按钮元件制作 在flash中元件中，另一种类型就是按钮，当鼠标指针移动到按钮之上或单击按钮时，将产生按钮事件，或改变按钮的外观。要使一个按钮在影片中具有交互性，需要先制作按钮元件，再由按钮元件在场景中的实例去为它分配相应的交互式的动作。在Flash中，按钮有4个状态，分别如下： （1）“弹起”即UP状态，鼠标指针没有移动到按钮上的状态； （2）“指针经过”即Over状态，鼠标移动到按钮上，但没有单击该按钮； （3）“按下”即Down状态，鼠标移动到按钮并单击该按钮； （4）“点击”即Hit状态，此状态可以定义鼠标事件响应的热点区域，即鼠标事件在按钮上的响应范围和鼠标事件的动作。当没有设置“点击状态”的区域，鼠标事件的响应区域为“弹起”状态时我区域大小。同时“点击”帧的内影片中不显示。 第16章：动画元件制作和外部素材的导入 《网页设计与制作》 本案例以制作一个闪烁的星星按钮为例，当鼠标移动到按钮上时，显示一个闪烁的星星，具体的步骤发下。 （1）新建一个Flash文档，550*450，背景是黑色。 （2）新建一个闪烁星星的影片剪辑star，即利用图形的绘制工具绘制一个五角星，将其转换为图形元件，然后将该图形工具拖到star影片剪辑的第1个关键帧，并利用透明度设置其的闪烁效果，共30帧，第5帧一个关键帧，如图16-33所示。 图16-33 “闪烁的星星”影片剪辑元件 第16章：动画元件制作和外部素材的导入 《网页设计与制作》 （3）单击“插入｜新建元件”，名称为“star1”，类型为“按钮”，如图16-34所示。 图16-34 “star1”按钮 （4）在打开的star1按钮窗口的时间轴下，“弹起”状态为空白帧，选择“指针经过”状态，并插入关键帧，将刚才制作好的star闪烁的星星的影片剪辑拖动到当前帧下，然后再选择“按下”状态，将其转换为关键帧，将“点击”状态转换为关键帧，如图16-35所示。 图16-35 “star1”按钮的状态 第16章：动画元件制作和外部素材的导入 《网页设计与制作》 （5）回到主场景，将刚才制作好的星星按钮star1放到