网页的平面动画
作品欣赏
| 计算机系00级02班彭炜 |  |
| Flash相册 |  |
| Flash镜头 |  |
| 精美小吃 |  |
【返回】
Flash基本知识
1.什么是 Flash
Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。
Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。
要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。
在 Flash 中创作内容时，需要在 Flash 文档文件中工作。Flash 文档的文件扩展名为 .fla (FLA)。
Flash 文档有四个主要部分：
舞台是在回放过程中显示图形、视频、按钮等内容的位置。
时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。
库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。
ActionScript 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 ActionScript 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash 包括两个版本的 ActionScript，可满足创作者的不同具体需要。
Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 ActionScript 添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。
完成 Flash 文档的创作后，可以使用文件】→【发布】命令发布它。这会创建文件的一个压缩版本，其扩展名为.swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播放。有关 Flash Player 的介绍，请参阅关于 Flash Player。
2.关于Flash文件
Flash 可与多种文件类型一起使用。每种类型都具有不同的用途。下表描述了每种文件类型及其用途：
FLA 文件是您在 Flash 中使用的主要文件。它们是包含 Flash 文档的媒体、时间轴和脚本基本信息的文件。
SWF 文件是 FLA 文件的压缩版本。它们是在 Web 页中显示的文件。
AS 文件指 ActionScript 文件。如果您希望将某些或全部 ActionScript 代码保存在 FLA 文件以外的位置，则可以使用这些文件。这些文件有助于代码的管理，此外,如果有多人为 Flash 内容的不同部分而工作，这些文件也很有帮助。
SWC 文件包含可重新使用的 Flash 组件。每个 SWC 文件都包含一个已编译的影片剪辑、ActionScript 代码以及组件所要求的任何其它资源。
ASC 文件是用于存储将在运行 Flash Communication Server 的计算机上执行的 ActionScript 的文件。这些文件提供了实现与 SWF 文件中的 ActionScript 结合使用的服务器端逻辑的功能。
JSFL 文件是可用于向 Flash 创作工具添加新功能的 JavaScript 文件。
FLP 文件指 Flash 项目文件（仅对于 Flash Professional ）。您可以使用 Flash 项目在一个项目中管理多个文档文件。Flash 项目可让您将多个相关文件组织在一起以创建复杂的应用程序。
3.了解工作区
以下部分详细介绍了 Flash 工作区的工具、面板和其它元素。
使用【开始】页
只要在不打开文档的情况下运行 Flash，便会显示开始页。通过开始页，可以轻松地访问常用操作。
开始页包含以下四个区域：
打开最近项目，用于打开最近的文档。也可以通过单击打开【图标显示】→打开【文件】对话框 。
创建新项目，它列出了 Flash 文件类型，如 Flash 文档和 ActionScript 文件。可以通过单击列表中所需的文件类型快速创建新的文件。
从模板创建，它列出创建新的 Flash 文档最常用的模板。可以通过单击列表中所需的模板创建新文件。
扩展，它链接到 Macromedia Flash Exchange Web 站点，您可以在其中下载 Flash 的助手应用程序、Flash 扩展功能以及相关信息。
4.Flash面板
5.Flash文档的编辑(详见Flash帮助文档）
（1） 新建文件
帧
关键帧
空白关键帧
时间轴
层
文件夹
场景
（2）保存文件
（3）打开文件
【返回】
Flash平面动画
1. 逐帧动画
“逐帧动画”。这是一种常见的动画手法，它的原理是将一个动画的连续动作分解成一张张的图片，把每一张图片用关键帧描绘出来，Flash将这些关键帧连续播放，形成动画效果。
2.补间动画
“补间动画”也称为过渡动画，因为只需在动画的两端（起始端和结束端）建立关键帧，由Flash 系统通过计算生成中间各帧，使得画面从一个关键帧过渡到另一个关键帧。
（1）“补间”动画分类：
“补间动作”动画
“补间形状”动画
（2）动画的特点
对于补间动作动画来说，用户可以分别在不同时间定义实例、群组、文本块的位置、尺寸或方向。此外，也可创建沿路径运动的渐变动画。
动作（动画）补间动画的变形对象必须是位图、字符、组合或元件实例，不能是矢量图形，如果对象为矢量图形或两个以上对象时，必须转换为元件或组合；关键帧内对象的大小、位置、颜色、透明度不同，才能形成动画。
补间形状动画中，用户可以分别在不同的时间改变形状或绘制其他形状，Flash会自动在两个时间点之间创建中间形状。
（3）补间形状动画
通过创建补间形状动画，可创建类似变形效果。对象最初以某一形状出现，随着时间的推移，起初的形状将逐步转变为另外的一个形状。同时，Flash还可以对形状的位置、大小和颜色进行过渡。
创建补间形状动画，可先在舞台上创建一个形状。然后创建动画的结束关键帧，并在该关键帧上创建一个新的形状或改变原有的形状。最后选择起始关键帧和结束关键之间的任意一帧，在“帧”属性面板中的“补间”下拉列表框中选择了“形状”选项即可。
实例：茄子变苹果
（4）补间动作动画
创建补间动作动画，可使用如下两种方法：
方法一：为动画创建开始关键帧与结束关键帧，并在“帧”属性面板中“补间”下拉列表框中选择“动作（动画）”选项。
方法二：创建动画的第1个关键帧，选择【插入】→【创建补间动画】菜单，在希望结束的帧上加入一关键帧，移动对象到新位置，Flash将自动创建结束关键帧。
实例：滚动小球
（5）使用形状提示
形状提示就是在变形的初始图形与结束图形上，分别指定一些变形关键点，并使这些点在起始帧中和结束帧中一一对应，这样Flash就会根据这些点的对应关系来计算变形的过程。使用形状提示可以控制较为复杂的形状渐变。 在Flash中可设置26个变形关键点。
操作:
选择起始帧→【修改】→【形状】→【添加形状提示】
移动形状提示点使到起始帧上的形状提示点变为黄色，结束帧上的形状提示点变为绿色为止。提示点为红色表明没有放置到曲线上。
3.遮罩动画
在 Flash中遮罩是指一个范围，它可以是一个矩形区域，是一个圆，也可以是字体，甚至是随意画的一个区域。任何一个不规则形状的范围同样都可用做遮罩。
遮罩层的图形，在演示中是不显示的，它只是给定一个区域，在遮罩层的下面，设定为被遮罩的图层只能在该区域内显示。
实例1：图形遮罩——地球自转
实例2：文字遮罩——移动文字广告
4.轨迹动画
制作补间动作动画时，用户可以通过设置运动路径，使补间实例、组或文本块沿绘制的路径进行运动。在设置沿路径运动的补间动作动画时，需要先创建特定的运动引导图层，并绘制运动路径，然后将动画对象设置于运动路径上即可。
在Flash中，引导层也被称做辅助层，它在画图时起着辅助作用。在Flash MX中，用户可以创建引导层，然后将其他图层上的对象与在引导层上创建的对象对齐。引导层不出现在发布的Flash影片中。引导层可以分为两种：普通引导层和运动引导层。
普通引导层用直尺图标表示，起到辅助静态定位作用。
运动引导层用弧线图标表示，在制作影片时起到运动路径的引导作用。
普通引导层是在普通层的基础上建立的，运动引导层则是一个新的层，在应用中必须指定是哪个层上的运动路径。
一个运动引导层可以与一个或多个图层关联，只要将选中的图层拖动到运动引导层下面即可。
实例1：跳动的球
实例2：行星与地球
5.元件
元件指在Flash中创建的图形、按钮或影片剪辑，可以自始至终在影片或其他影片中重复使用。
图形元件(Graphic)：即可重复使用的图片。
按钮元件(Button)：在Flash中，所有的按钮都是元件。
影片剪辑(Movie clip)：一段小电影，变成元件后，让它什么时候播放就什么时候放。
元件只需创建一次，然后即可在整个文档或其他文档中重复使用。元件可以包含从其他应用程序中导入的插图。
实例是指位于舞台上或嵌套在另一个元件内的元件副本，它可以与它的元件在颜色、大小和功能上有较大的差别。当元件被修改时，场景中的实例也将随着被更新。
在Flash 中，每个元件都可以有自己的时间轴、场景和完整的图层。在创建元件时，可以根据需要选择元件类型，不同类型的元件将决定用户在影片中如何使用该元件。其特点如下：
图形元件：用于制作静态图像，以及附属于主影片【时间轴】的可重用的动画片段。
图形符号可以是静态图片、图像、声音或动画。它是Flash 中最简单的一种符号，用于制作一些静态图形。它不具有交互性，即声音和动作将被忽略。
按钮元件：用于创建响应鼠标单击、移动或其他动作的交互按钮。
它可以在电影中创建交互式按钮．它有4种不同状态，即 Up，Over、Down和Hit。在Flash MX2004中，首先要为按钮设计不同状态的外观，然后为按钮的实例分配动作。
创建按钮符号时，Flash将自动为其创建4帧。前3帧分别对应着鼠标在3种不同状态下的外观，第4帧定义了按钮响应鼠标事件的相应区域和动作。与普通的连续帧不同，它们并不连续播放。Flash根据鼠标相对于按钮的不同位置和动作来播放不同的帧。
为了在交互式的动画中响应鼠标动作，首先应在舞台上生成一个按钮符号的实例，然后为按钮实例添加动作。但动作应被添加在按钮实例上，而非按钮符号上。
在Flash 中，这4个状态如下：
Up(弹起)状态：鼠标没有指在按钮上时．按钮处于弹起状态。
Over(经过)状态：鼠标移动到了按钮上面，但没有按下时的状态。
Down(按下)状态：鼠标移动到了按钮上面并单击左健时，按钮处于按下状态。单击鼠标右键时，则可弹出快捷菜单。
Hit(单击)状态：与前3种状态不同，在这种状态下可以定义响应鼠标事件的动作和区域。
影片剪辑元件：用来制作可重复使用的，独立于主影片时间轴的动画片段。
创建元件的方法
将舞台的对象转换为元件
选中欲转换为元件的对象→【命令】菜单→【插入】→【转换为元件】→键入元件名称→注册(确定元件中心点在对象的位置) →【确定】
创建新元件
命令菜单→插入→转换为元件→键入元件名称→注册(确定元件中心点在对象的位置) →确定
编辑元件的方法
在当前位置编辑
双击欲编辑元件
或选中舞台中的实例→单击鼠标右键→在当前位置编辑
在元件编辑模式下编辑
双击【库】面板内的元件图标
或单击鼠标右键→单击鼠标右键→编辑
在新窗口中编辑
选中舞台中的实例→单击鼠标右键→在新窗口中编辑
实例
用户在Flash中创建一个元件后，该元件并不能直接应用到场景中。若要将元件应用于舞台中，就需要创建其实例。创建实例就是将元件从【库】面板拖到舞台中，实例是元件舞台中的具体体现。
库
在Flash中，【库】面板存储了在Flash文档中创建的元件以及导入的文件，如视频剪辑、声音剪辑、位图和导入的矢量图形等内容。用户通过共享库资源，可以方便地在多个Flash电影中使用一个库中的资源，大大提高了动画的制作效率。
Flash为用户提供了大量的元件，如各种按钮、声音、学习交互等，用户可根据需要进行选择。
实例1：图片的淡入淡出
实例2：按钮
实例3：hit 应用
【返回】
ActionScript脚本语言
动作脚本语言是 Macromedia Flash 重要的一部分，它给设计和开发人员带来了很多方便。通过使用动作脚本，您可以根据运行时间和加载数据等事件控制文档播放；为文档添加交互性，使之响应按钮单击等用户操作；将内置对象（例如按钮对象）与内置的相关方法、属性和事件结合使用；创建自定义类和对象；创建更加短小精悍的应用程序（相对于使用用户界面工具创建的应用程序），所有这些都可以通过可重复利用的代码来完成。
动作脚本是一种面向对象的脚本语言，可用于控制 Flash 内容的播放方式。在后续的课程中，您将了解动作脚本如何演化为动作脚本 2.0 以包含一组核心的语言元素，使开发面向对象的程序更加方便。
现在将使用动作脚本来完成以下任务：
按照推荐的方法来命名实例
初始化文档
应用动作脚本语法
定位动作脚本参考文档
向动作脚本添加注释
编写函数
复制和修改函数
检查语法和测试应用程序
关于动作脚本编辑器环境
动作脚本编辑器环境由两部分组成。右侧部分是【脚本】窗格，这是键入代码的区域。左侧部分是一个【动作】工具箱，每个动作脚本语言元素在该工具箱中都有一个对应的条目。
在【动作】面板中，【动作】工具箱还包含一个脚本导航器，脚本导航器是 FLA 文件中具有关联动作脚本的位置的可视化表示形式；您可以在这里浏览 FLA 文件以查找动作脚本代码。如果您单击脚本导航器中的某一项目，则与该项目关联的脚本将出现在【脚本】窗格中，并且播放头将移到时间轴上的该位置。如果您双击脚本导航器中的某一项，则该脚本会被固定。
【脚本】窗格的上方还有若干按钮：
您可以直接在【脚本】窗格中编辑动作、输入动作参数或删除动作。您还可以双击【动作】工具箱中的某一项或【脚本】窗格上方的【添加(+)】 按钮，向【脚本】窗格添加动作。
实例: 循环环绕字
文档大小为：300 X 60（像素）
创建名为：dtext的影片剪辑。
在dtext的影片剪辑输入动态文本属性如下：
变量名为：letter
2．输入动画脚本
选择场景1图层1
//Frame 1
//定义圆环在动画中的位置(画布的中心)
xos =100;
yos = 30;
sineof = 0;
magnitude = 200;
rspeed = 0.004;
sb = 0.18;
//设定圆环中动态显示的文本内容，你可以根据自己的需要修改
myText = "网 页 设 计 与 制 作 ";
myLength = myText.length;
i = 1;
//依次将你设置的动态文本中的每个字母放置到复制的动画片段dtext中
for (i; i<=myLength; i++) {
duplicateMovieClip ("dtext", "char"+i, i);
_root["char"+i]._x = xos;
_root["char"+i]._y = yos;
_root["char"+i].letter = myText.charAt(i-1);
}
//Frame 2
i = 1;
//获取当前鼠标坐标，并换算圆环中各文字的偏移及旋转角度
xm = _root._xmouse;
nxm = ((xos-xm)-2*(xos-xm))/6*rspeed;
for (i; i<=myLength; i++) {
//离视线越远的文字越小，并且透明度越小，从而产生层次及立体感
nxn = Math.cos(sineof+sb*i)*100;
xsubval = Math.abs(Math.cos((sineof+sb*i)/2)*100);
_root["char"+i]._x = Math.sin(sineof+sb*i)*magnitude+xos;
_root["char"+i]._alpha = xsubval;
_root["char"+i]._xscale = nxn;
_root["char"+i]._yscale = xsubval+15;
}
sineof += nxm;
//Frame 3
gotoAndPlay(_currentframe-1);
3．载入影片剪辑dtext
选择场景1图层2，拖入影片剪辑dtext并命名为dtext（实例名称为dtext）
实例效果
【返回】