理论教育 实例:网页制作中形状渐变动画的应用

实例:网页制作中形状渐变动画的应用

时间:2023-11-04 理论教育 版权反馈
【摘要】:图14-44在网格上画出五角星单击“选择”工具,在网格上拖动选择整个五角星图形。图14-45填充图形颜色至此绘制了一个用于形状渐变的起始图形。图14-46制作结束帧的文字图14-47将整行文字分离为单个字符4.制作形状渐变补间动画选中起始帧,在“属性”面板中,从“补间”列表中选择“形状”,如图14-48所示。

实例:网页制作中形状渐变动画的应用

下面结合一个实例,介绍制作形状渐变动画的方法。

【例14-5】实现从图形向文字的渐变动画,效果如图14-42所示。

图14-42 图形向文字渐变动画实例

1.创建影片文档

(1)单击“文件”菜单→“新建”命令,在“新建文档”对话框中选择“Flash文档”后,单击“确定”按钮,新建一个影片文档。

(2)右键单击工作区,在快捷菜单中选择“文档属性”命令,如图14-43所示,打开“文档属性”对话框,设置文件大小为320×180像素,背景颜色为白色,单击“确定”按钮。

图14-43 “文档属性”对话框

2.制作起始帧的图形

(1)右键单击工作区,在快捷菜单中选择“网格”→“显示网格”选项,如图14-44所示。

(2)单击工具箱中的“线条”工具,在网格上连续画出直线,组成一个五角星图形。

图14-44 在网格上画出五角星

(3)单击“选择”工具,在网格上拖动选择整个五角星图形。

(4)单击“颜料捅”工具,选择一种颜色,单击五角星内部,如图14-45所示。

图14-45 填充图形颜色

至此绘制了一个用于形状渐变的起始图形。注意,不能直接使用元件、文字和位图。如果是符号或文字,需要利用“取消组合”或“分散到图层”命令,分散到图层中;如果是导入的位图,需要通过“转化位图为矢量图”命令进行矢量化处理后,才能实现形状渐变动画。

3.制作形状渐变的结束帧

(1)在第35帧的位置,右键单击,在快捷菜单中选择“插入空白关键帧”命令,以此作为结束帧。(www.daowen.com)

(2)在结束帧中,单击工具箱中的“文本”工具,在舞台上添加文字“闪客”,如图14-46所示,并在“属性”面板中设置文字的字体和大小等。

(3)单击“选择”工具,选中整个文字内容。

(4)右键单击选中的文字内容,在快捷菜单中单击“分离”命令,将添加的文字分离,此时将整行文字分离为单个字符,如图14-47所示。

(5)再执行一次“分离”命令,将各个字符分离为形状。

图14-46 制作结束帧的文字

图14-47 将整行文字分离为单个字符

4.制作形状渐变补间动画

(1)选中起始帧,在“属性”面板中,从“补间”列表中选择“形状”,如图14-48所示。

(2)在“缓动”列表中选择88,在“混合”列表中选择“分布式”。

(3)按Enter键初步预览各帧变化情况,如图14-49所示。

图14-48 设置形状渐变动画属性

图14-49 检查各帧变化情况

5.测试存盘

(1)单击“控制”菜单→“测试影片”命令,观察动画效果。

(2)修改调试至满意后,单击“文件”菜单→“保存”命令,保存文件名为flasher.fla。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈