Flash中交互动画的应用研究

曲小纳

摘 要：现在越来越多的网站开始频繁使用动画，动画以其动态性、交互性和良好的兼容性为网络技术带来新的客户体验。文章对动画在网页设计与制作中的应用做了简单分析。

关键词：动画；网页设计；网页制作

中图分类号：TP317.4 文献标识码：A 文章编号：1006-8937（2015）20-0087-02

随着动画技术的发展，flash动画已经成为网页设计人们所关注的一种动画发展趋势。

作为网站的一个重要视觉组成元素，在网页设计中合理地使用Flash技术，能增加与浏览者的互动性，使网页更加生动，更加有吸引力，也恰好满足了大众的这一审美需求。

1 flash动画特点

Flash之所以能够在短短的几年内风靡全球，和它自身鲜明的特点是分不开的。

在网络动画软件竞争日益激烈的今天，Adobe公司正凭借其对Flash的正确定位和雄厚的开发实力，使Flash的新功能层出不穷，从而奠定了Flash在网络交互动画上不可动摇的霸主地位。

Flash动画的特点，主要有以下几个方面。

①体积小

FLASH的编辑对象大部分是矢量图形，它只需要用很少的矢量数据便可以描述相当复杂的对象，因而生成的文件体积特别小。

②适用于网络传播

Flash动画可以放置于网页中，供浏览者欣赏和下载，可以利用这一优势在网上广泛传播，比如Flash制作的MV比传统的MTV更容易在网络上传播，而且网络传播无地域之分，也无国界之别。

③交互性强

这是Flash得以称雄的最主要的原因之一，通过使用交互功能，观众不仅能够欣赏到动画，且借助于鼠标触发交互功能，从而实现人机对话。

④节省成本

使用Flash制作动画，极大地降低了制作成本，可以大大减少人力、物力资源的消耗。同时Flash全新的制作技术可以让动漫制作的周期大大缩短，并且可以做出更酷更炫的效果。

⑤跨媒体

Flash动画不仅可以在网络上传播，同时也可以在电视甚至电影中播放，大大拓宽了它的应用领域。

⑥更具特色的视觉效果

凭借Flash交互功能强等独特的优点，Flash动画有更新颖的视觉效果，比传统动画更能亲近观众。

2 flash的基础动画

2.1 图形编辑

绘图和编辑图形是制作Flash动画的基本功，只有基本功扎实，才能使用Flash绘图和编辑图形。在绘图的过程当中要学习怎样使用元件来组织图形元素。

2.2 补间动画

在flash帧动画中，从起始帧到结束帧动画中间的过程就是补间动画。另外flash可以补间图形的颜色，创建渐变的颜色切换或使实例淡入或淡出，要补间组或类型的颜色，必须把它们变为元件。补间动画是Flash动画设计的核心，也是Flash动画的最大优点，它有动画补间和形状变化补间两种形式。

动画补间：实际是在起始帧和结束帧之间对某个或者多个属性的参数进行改变而形成的动画。

形状变化补间：适用于图形对象，将一种形状变化成另一种形状的动画，只要设置起始帧的形状和结束帧的形状，中间的帧通过flash自动形状拟合方式插值。

2.3 遮 罩

遮罩的原理就是将某层作为遮罩层，遮罩层的下一层是被遮罩层，一个遮罩层可以罩多个被遮罩层。遮罩就好比一个镜子，镜子照哪儿，哪儿就显现，遮罩层决定形状，被遮罩层决定显示的内容。

3 Flash交互动画的应用实例

Flash交互动画实际就是浏览者在观赏动画的同时，可以自由控制动画的播放进程。

制作单击按钮后跳转到不同画面效果有以下几个步骤。

3.1 制作三个按钮

创建“第一个窗口”按钮。

{1}执行菜单中的“插入”/“新建元件”，在弹出的对话框中，如图1所示，输入“第一个窗口”，单击“确定”。

{2}制作“第一个窗口”按钮上的文字效果，如图2所示。

创建“第二个窗口”按钮”按钮，方法同上。

3.2 交互动画的应用

①单击时间轴上方的按钮，从弹出的下拉列表中选择“场景1”选项，然后新建第一个窗口层，从“库”面板中将第一个窗口元件、第二个窗口元件、第三个窗口元件拖入到舞台，放置位置如图3所示。

②右击舞台中的“第一个窗口”元件，从弹出的快捷菜单中选择“动作”命令，然后再“动作”面板右侧输入语句：on（prese）{gotoAndplay（“场景1”，1）；}，如图4所示。

同理，右击“第二个窗口”元件，从弹出的快捷菜单中选择“动作”命令，然后在“动作”面板右侧输入语句：on（prese）{gotoAndplay（“场景2”，1）；}

同理，右击“第二个窗口”元件，从弹出的快捷菜单中选择“动作”命令，然后在“动作”面板右侧输入语句：on（prese）{gotoAndplay（“场景3”，1）；}。

③同理，进入“场景2”，然后新建第二个窗口层，从“库”面板中将“第一个窗口”元件、“第二个窗口”元件、“第三个窗口”元件拖入舞台。第二个窗口元件设置与上一步的动作相同。

④同理，进入“场景3”，然后新建第三个窗口层，从“库”面板中将“第一个窗口”元件、“第二个窗口”元件、“第三个窗口”元件拖入舞台。第三个窗口元件设置与上一步的动作相同。

⑤至此，整个动画制作完毕。

参考文献：

[1] 杨帆.Flash MX 2004动画制作标准教程[M].北京：中国电力出版社，2005.

[2] 涂杰.Flash技术的网站交互式设计[J].艺海，2010，（7）.