flash教程制作交互式动画

Flash的交互动画设计介绍

随着互联网技术的发展，基于Flash的交互动画广泛的应用于互联网的每一个角落，给人们的生活学习带来了巨大便利，下面是为大家搜索整理的Flash的交互动画设计介绍，欢迎参考阅读，希望对大家有所帮助!

随着信息技术带来的科技进步，如今网络媒体已经高度发达，交互动画以及互动技术广泛的应用于互联网的每一个角落，给人们的生活学习带来了巨大便利。与此同时，互联网的迅猛发展带来的庞大用户群，也为形式多样、内容丰富、动感十足的Flash成为当下热门话题提供了受众基础。随着许多精品Flash交互动画的出现，基于Flash的交互动画设计不断受到各界人士的关注和青睐，其传播的方式也逐渐走出单一的网络传播途径，走向传统媒体与新兴媒体。随着 Flash技术本身的成熟与无线网络的发展，基于flash的交互动画也将在不远的将来走向更多的国内手机用户，实现 Flash 网络传播的新的跨越。

1、基于Flash的交互性的分析

交互(interactive)，在计算机中意思为，参与活动的对象，可以相互交流，双方面互动。无论是何种交互，必须由三个部分来组成：交互方式、交互响应和交互结果[1]。交互方式指人和计算机打交道的抽象方式，是创作者为了传达特定信息，采用必要的技术手段构成的形式，可以分为基于对象和基于活动的两类[2]。基于对象的交互方式是模拟现实世界的对象，例如，计算器应用程序，是对传统真实计算器的模拟。基于活动的交互方式包括指示、对话、操作和导航、探索和浏览，比如按钮、图形元件、文本输入框或选择判断组件等，是创作者为参与者留下的进入作品的信息输入口，它决定了动画作品的外在形式。交互响应是参与者在交互过程中所采取的动作，交互结果则是响应的结果。

在这个瞬息万变的年代，人与人之间的交流和互动变得越来越容易，通过不同的网络平台，资讯的传递一秒千年，而交互性动画又有别于一般性的传统的动画，其播放过程中的内容发展可以受到浏览者特定操作的影响，因而在动画播放的时间顺序方面，会改变固有的线性的或循环的播放顺序，形成一种受制于受众的操作结果的播放顺序和方式。这种在播放时间方面的开放性改变，会促使受众对于动画的内容进行主动的挖掘，获得丰富的信息，从而扩大了受众从动画传递内容中所接受的信息。因此，交互性的设计就越来越被大家重视和推崇。

伴随着互联网在中国的普及，人们越来越关注于如何更加灵活的呈现网络的交互性，促进通过网络的交流与沟通，又同时能流畅的展现细节而不影响用户的使用体验。

以互联网为主要生存环境的FLASH 动画进入了人们的视线，FLASH 动画以其短小精致、制作简单、形式多样等特性深受人们的喜爱。Flash 是美国Adobe 公司设计的一种二维动画软件，产生于上世纪九十年代中期，Flash 最早期的版本称为Future Splash Animator。经过数年的发展，其软件功能不断加强，应用空间不断拓展。基于FLASH的动画文件占用空间非常小，有利于在各种网络带宽的互联网上传播;另外，Flash交互动画的开发周期短，简便易学，制作成本低。大部分 flash小游戏都是可以由一个人***完成的，所以游戏的画面、情节、美工等都比较简单。因此使得Flash成为人们喜闻乐见的一种信息传播载体。

2、Flash所具有的交互性技术优势

由于Flash动画的网络特性，这种交互被应用在网站建设和网络游戏之中，Flash已成为网页制作和网络互动的主要技术手段。交互性是新媒体艺术最重要的一个特征，也是Flash动画区别于传统动画的本质特征。Flash的交互性优势表现在以下三个方面：

2.1支持事件响应和交互功能

在Flash动画中，每个对象(符号或帧)都可以有自己的事件响应。设计者可以通过预先设置事件响应达到对动画控制的目的。Flash 软件中包含的带有动画效果的按钮和菜单，在 Flash 软件中可以随意创建按钮、多级弹出式菜单、复选框等进行交互设计。

2.2利用 ActionScript 代码，实现交互功能设计

ActionScript 是一种基于 ECMAScript 的面向对象编程语言，用来编写Adobe Flash 电影和应用程序，还可以设计各种各样的简单的和复杂的游戏。因此，Flash具有交互性技术优势，用户通过点击、选择等动作决定事件的运行过程和结果。

2.3组件为Flash交互动画设计提供了更多的方式

组件是 Flash 应用程序的一部分，主要通过在交互组件中与应用程序进行交互来做出响应。 典型交互组件的响应可以是回答一个问题(如，填空)，从真或假中进行选择(如，判断、单选或多选)，或单击屏幕的某个区域(如，选取某个图形)。因此，利用组件可以实现填空、判断、选择、拖放、热区等多种形式多样、而又丰富的交互活动。可以很容易实现用键盘、鼠标控制图形对象，实现交互小游戏的开发和设计。

3、Flash交互动画的应用领域

Flash动画交互性改变了传统动画的线性叙事方式，使使用者可以置入其中，根据个人需要使动画以非线性叙事的方式呈现出来，充分调动了的积极性，从而引导使用者为了获得信息或愉悦体验而进行一系列人机交互。进一步符合了广大受众对于个性化的要求，被广泛的运用到人们的日常生活当中，具有很强的实用性。

Flash 动画同时是一门新兴的艺术与科学相结合而形成的、具有非常广泛学科优势的综合性艺术形式[4]。在 Flash 动画的创作和制作过程，实际上就是多种艺术门类和科学技术的综合过程，因此，Flash交互动画具备很高的实用价值和艺术价值。Flash 动画应用领域十分广泛——网站建设、广告宣传、教育教学、故事短片、游戏等，下面对几种领域作一下着重介绍。

3.1网站建设

基于Flash的交互动画网站(如图1所示)色彩艳丽、风格独特，使得页面生动而富有吸引力。

Flash交互动画特别适合网站建设，几乎所有的网页界面里都可以见到Flash交互动画。在网站建设中，广告、字幕、网站窗口、按钮等都可以用 Flash 交互动画来制作，由于 Flash 动画的应用，网页界面一改过去的简单、枯燥，而变得动感、多变、时尚、艺术感强、内容更丰富，迎合了现代人的要求。

3.2广告宣传

由于 Flash 动画交互性强的特点，很多企业用 Flash动画进行企业产品的展示，生动活泼的展现公司产品。例如，迪斯尼公司的宣传广告(如图2所示)就用色彩明快的Flash交互动画展示了特有的公司主题，充分体现了符合少年儿童年龄特点的活泼和可爱，吸引消费者的关注。

3.3教育教学

用Flash动画可以将文字、图形、图像、动画、声音、视频集成于一体，设计出精彩有趣的多媒体学习课件，并具有一定的交互功能，被广泛应用在计算机辅助教学中。它使教学内容丰富多彩，形象直观，使那些原本枯燥无味的知识变得富有趣味性，使学生产生极大的好奇心，从而激发了学生学习的兴趣。例如，我们在讲解逐帧动画理论的时候，就可以利用Flash动画课件来辅助学生更快理解(如图3所示)。通过直接使用Flash设计交互动画，先向学生展示1.2.3幅图片，让学生观察区别，再连续播放，产生国旗飘动效果，就很直观的向学生展示了逐帧动画的应用了。

3.4故事短片

Flash 动画技术门槛低，取材广泛，几乎所有的文学作品、相声作品、小品、流行音乐，都能改编为动画作品。学生在经过一段时间学习后，就能掌握设计Flash交互动画的基本要领了。例如，在2010年学生带领学生制作的《升国旗》、《金色的秋》两部动画作品里(如图4所示)，学生以身边的故事为蓝本，用细腻的感情勾画出了青年人内心对于美好的描述。

3.5游戏

由于使用Flash的动画可以实现交互控制，操作起来十分简便，可以很好地将向量图的灵活性和精确性与声音、位图、视频融合起来，并且文件占用存储空间小，因而 Flash动画技术被广泛的应用于各种游戏制作。由于Flash的动画形式多样、内容丰富、色彩艳丽、交互性强，从而深受广大用户的喜爱。《疯狂猜猜猜》，就是一款利用Flash交互技术实现的动画游戏，在互联网和移动设备上都能够使用，并能带给用户很好的游戏体验。由于大受欢迎，排在17173网站的最受欢迎小游戏首位。

4、Flash中交互动画设计方法

Flash 中提供的ActionScript 程序语言使Flash 具有了交互功能，动画的交互过程叫行为，它包含两个部分：一是事件，一是事件引发的动作。通常情况下，计算机程序就是计算机分步执行的一系列指令语句，甚至一些简单的计算机程序仅包括几个步骤指令以及程序的结束指令。然而，在Flash中提供的ActionScript 程序可以保持运行、等待用户输入或等待其它事件发生。Flash交互中的“事件”是确定计算机执行哪些指令以及何时执行的机制。从本质上讲，“事件”就是所发生的、ActionScript 能够识别并可响应的事情。

在Flash中，交互是设计绝大部分“事件”的目的，许多事件都与用户交互有关。我们通过对“事件”的设计，来实现用户的交互体验。例如，用户点击按钮，或者按下鼠标或者键盘等等。在ActionScript语言执行的过程中，Flash如同在等待用户的响应，即事件的触发，而后运行时间引发的动作，即执行事件制定的特定的ActionScript 代码。因此，创建交互式动画的关键是设置当指定的事件发生时要执行的动作。用户的响应对“事件”的触发，既可以在动画播放到特定帧时触发动作，也可以在用户单击按钮或按键时触发动作设计着可以为事件的响应设计一定的动作。事件一般包含鼠标事件、帧事件、电影片段事件等等，动作脚本也可以有很多，可由开发者根据需要来设计和编写ActionScript 代码。

通常Flash交互动画作品主要是借助鼠标、键盘的移动或点击来实现。例如，下面这个脚本语言代码是为了实现当用户单击按钮时，开始播放当前的影片剪辑的事件。其中，“playButton” 是按钮的实例名称，而 this 是表示“当前对象”的代指名称：

this.stop();

function playMovie(event：MouEvent)：void

{

this.play();

}

playButton.addEventListener(MouEvent.CLICK， playMovie);

通过上面的脚本语言代码就实现了在用户响应交互动画的点击动作时，触发播放影片的事件了。Flash交互动画的最主要的互动形式就是通过对按钮的点击。当鼠标经过或者点击Flash 中嵌入的 “动态按钮”时，就会链接到下一个窗口。而有时，按钮除了具有链接的使用功能，还具有了装饰作品的***意义。

还有一类Flash交互动画在设计脚本是的主要目的是为了丰富画面，一般常见的形式有鼠标跟随、磁铁鼠标和三维鼠标跟随。有时为了更好实现互动效果，我们会通过使用在 Flash 中设计的`鼠标指针来代替标准鼠标指针(如图6所示)，可以将用户的鼠标移动更紧密地集成到 SWF 文件中。

而想要实现这个非常容易集中用户注意力的交互动画效果却并不复杂。首先，创建一个用来代替原有鼠标指针的影片剪辑，并将这个剪辑的实例放置在舞台上。 在舞台上选择该影片剪辑实例。 在“属性”面板中的讲实例的名字命名为 new_mc。

在时间轴中选择第 1 帧，然后在“动作”面板中添加下面的代码：

Mou.hide();

new_mc.onMouMove = function() {

this._x = _xmou;

this._y = _ymou;

updateAfterEvent();

};

这时测试影片就会得到想要看到的指针若隐若现的动画效果了。通常这个应用会广泛用于交互动画中，根据设计者制作的形式多样、图形各异的代替鼠标指针的影片剪辑，通过位图、矢量图、声音等元素的融合，鼠标指针在交互动画中就会有丰富的变化和效果，从而使浏览和使用者获得更好的视觉体验。

Flash 中提供的ActionScript脚本语言的功能也随着Flash版本的更新，在逐渐的完善和强大。随着设计者对于编程语言的深入学习和研究，ActionScript脚本语言中提供的丰富的计算机语言元素：常量、变量、运算符、表达式、函数、属性、动作、对象等等，为设计者们提供了更宽广的交互设计平台。

5、总结和展望

Flash软件从1995年诞生以来，从作为一个交互插件发展成为综合的数字动画、交互式Web站点、桌面应用程序以及手机应用程序开发和创作编辑环境。Flash已经逐步成为一种动画创作与应用程序开发于一身的创作软件。这其中离不开Flash软件开发团队的不懈努力，同时也是众多Flash交互动画设计者们十几年来努力研究Flash使用方法、提升Flash交互功能实现效果的结果。

由于Flash动画的交互设计功能实现的方式不唯一，途径和表现形式也丰富多样，因而在追求Flash交互动画设计技术提高的同时，我们也应当注重Flash交互动画设计过程中所体现出的艺术性。

Flash是计算机技术与动画艺术相结合的产物，技术的不断发展使Flash交互动画的艺术表现空间更加广阔，而Flash交互动画的艺术性又使得广大设计者不断追求计算机技术的提高。因而，在这个周而复始Flash 交互动画的不断创作和实践过程中，技术和艺术得到了充分的结合。从而不断拓展Flash交互动画的应用领域，不断推动Flash交互动画向着更有影响力的方向发展。

动作脚本交互式动画设计

从实质层面上看，动作脚本也即Flash提供给我们的一些运算符与对象。Flash中脚本命令被简单地称之为工作脚本，英文表示为ActionScript。Flash的应用，为我们营造了更多逼真的动画效果，让交互性变成可能，当点击按钮，便可实施人机交互，这便需要使用到动作脚本。代码控制在动作脚本中，组成了Flash交互性不可缺少的一部分。将动作脚本方法应用在Flash，简单地划分为以下两种形式，一种形式是，将脚本编写到对象上，如，影片剪辑元件，另一种种形式是，将脚本编写到时间轴上的关键帧。

1、Flash中不易分清的概念

FLASH动画的各个对象的位置关系是按照一定的层状结构展现各对象间的位置关系。其根为场景。各场景是相对***的动画，FLASH设置各场景播放顺序，逐个衔接各动画场景，所以我们看到的动画是持续的，在编辑过程中，各场景实例是不能够应用在其余场景中的，最好应用在相同场景编辑中。对场景播放顺序，设置时，借助窗口一面板一场景。对具体的一个场景而言，和其余场景结构是相同的。均涵盖了一个或多个图层。

2、动画的设计与实现

2.1动画实现的目标

动画多是为了让文字紧随鼠标来变动，以鼠标作为圆心，进行圆周运动，此外，文字颜色表现出色彩变动。

2.2动画原理的分析

①窗口鼠标、文字、舞台坐标间的位置关系。鼠标移动同时，文字也要移动，同时围绕鼠标做圆周运动，文字坐标值指的是圆周上的某点。鼠标坐标值紧随鼠标移动而改变，同时，文字鼠标值也相应发生改变。默认的坐标原点O:(0，0)位在窗口左上角，圆心O:(h，k)代表鼠标在窗口舞台上的坐标值，在坐标系中，也就是将圆心O不再是，而被移到了(h，k)。按照圆心O:(h，k)，再次将直角坐标系构建起来，P点表示的圆心为点(h，k)，半径为r，为圆上一点坐标，是文字坐标位置所表示的区域。鼠标的坐标值(h，k)、P点的坐标值(x，y)二者之间的关系可用下述公式来表示：。事实上，Flash里对三角函数里的角做出了规定，其单位要为“弧度”，1度与π/180弧度是相等的，Flash中的P点的坐标可用下述公式来表示：arkyarhx180/.(sin()),180/.(cos()。在本次获得的动画效果中，需要的文字对象数目为N个，以鼠标为中心做圆周运动，圆周上面的平均分配的P点坐标数目需要N个，各P点坐标的表示则为：180/())./360sin((.)),180/()./360cos(()xryiNhriNkfal[1]。圆周上的i代表的是圆周上的第几个文字。应当引起主要的一点是，P点坐标指的是文本域注册点的坐标值，在实践当中，要将文本域中心点移至P点位置。②关键的处理函数。Math．random()函数能够形成随意的小数，处在0～1间，Math．round()函数以四舍五入的形式获得相似整数，两者整合起来，应用在文字随机颜色创建中，让文字颜色不断表现出色彩变换；对addEventListener事件侦听函数，当有数值出现改变，其按照变化后的数值对其余变量数值做出新的计算。

2.3动画实现的流程

第一步，新建Flash的文档，把舞台大小设置为550px×400px；第二步，新建影片剪辑元件，将其名字命名为apple，把眼球图形绘制到元件编辑窗口中，设定其半径为50，采用对齐工具，在眼球圆心中放入注册点，和途中的点B(a，b)保持对应关系；第三步，绘制左圆形眼眶，左眼眶中心(150，150)，绘制右圆形眼眶，右眼眶中心(400，150)，半径R=100，全部放置在场景编辑窗口中，和点A(m，n)保持对应关系；第四步，将2个apple元件实例于库面板中拖出来，一个命名为left_apple，表示左眼球，另一个命名为right_apple，表示右眼球；第五步，根据以动画原理分析为根据，同时结合获得的计算公式，将相应代码添加至图层1的第一帧中；第六步，装饰动画，把眉毛添加到眼睛上，同时将含微笑的嘴巴放到眼睛的下部，显得更逼真；第七步，经过测试，并得到影片。

3、结论

本次研究使用了Flash的动作脚本，让交互性动画生动地呈现出来，对脚本中的部分参数，做出设置，生成各种动画效果，如，变量d能够对文字的转动频率实施调控，计算公式d+=0．05中，0．05数值发生改变后，产生的文字转动频率是不同的，值变小，文字转动变慢，值变大时，文字转动变快，+/－号在公式中可以对文字的转动方向进行调控，变成顺时针/逆时针；文字字号大小设置公式公式format.在文字转动过程中，同时将文字调下或调大。像上述设置，结合实际需求，做出相应调整。切实掌握动作脚本，便能营造出各类交互性动画效果。