Flash是美国的MACROMEDIA公司于1999年6月推出的优秀网页动画设计软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。我们之所以要使用FLASH，是因为HTML语言的功能十分有限，无法达到我们的预期设计，以实现令人耳目一新的动态效果，在这种情况下，我们就更需要一种既简单直观又功能强大的动画设计工具，而Flash的出现正好满足了这种需求。

本专题由浅入深、系统、全面地介绍了Macromedia公司最新推出的网页动画制作软件——Flash MX的操作方法和动画制作技巧。在全面分析了Flash MX各项功能的基础上，重点针对该软件在动画制作中的应用进行讲解。专题的前一部分涉及了计算机动画基础和Flash MX的基本操作，后面为读者准备了9个经典动画实例以供读者实践。通过这些实例，读者将掌握对象的创建、对象的编辑与调整、创建简单的动画、图层的操作与动画应用、调整声音文件、动作函数、动画的交互控制、对象的定义技术以及Flash动画的优化及发布等内容。现在大家准备好了吗？来跟我一起学习吧！

动 画 概 述

    动画在英文里是Animation，也就是说动画与运动是分不开的。世界上著名的动画艺术家—— 英国人约翰·哈拉斯(John Halas)曾指出：“运动是动画的本质。”比如，当我们在电影院里看电影或在家里看电视时，会感到画面中人物和动物的运动是连续的。但是如果仔细看一段电影胶片，就会看到所有的画面并不是连续的。如图1-1所示。这是因为电影胶片通过一定的速率投影在银幕上才有了运动的视觉效果，这种现象可以由法国人皮特·罗杰特(Peter Roget)提出的视觉暂留(persistence of vision)的原理来解释。



　　图1-1 一段电影胶片
　　有一个著名的试验，在一个黑暗的房间里放置两盏间距为1~2m的小灯，使这两盏小灯以25~400ms的时间间隔交替点亮和熄灭。这时，会看到一盏小灯在两个位置之间跳来跳去，而不是两盏灯交替点亮和熄灭。这就是视觉残留的原因，当一盏灯熄灭时，在短时间内其光亮仍会保留在人的视网膜上，而此时，另一盏灯又点亮了，观者会产生一种错觉，会在视觉上将两个灯混为一盏灯，给人的感觉是只有一盏灯跳来跳去。
　　前面讲述了电影的原理，其实动画的发明早于电影。它是1820年由英国博士约翰·巴利斯(John Paris)发明的。当时，他的做法是利用一根绳子系在一个正反两面都有画面的圆盘两端，如图1-2所示，捻动绳子使圆盘绕绳子中心轴旋转，可以看到由正反两面组合在一起的“动画”效果。



　　图1-2 约翰•巴利斯的发明
　　另一个动画装置是由约瑟夫·普拉泰奥(Joseph Plateau)发明的。这个设备装有一个手把，上面有一根细轴，轴的两端连着两个可以转动的轮盘。其中一个轮盘上面画着一圈小画面，每一个画面就是一帧。而另一个圆盘上对应地挖有细长的矩形孔，如图1-3所示。观者位于挖孔的圆盘一侧拨动圆盘，透过矩形孔进行观看，一次仅观察到一帧，且时间仅为几分之一秒。此原理如同后来发明的放映机的快门。



　　图1-3 约瑟夫·普拉泰奥的发明
　　其后由英国人威廉· 霍纳尔(William Horner)于1834年发明了一个重要的动画工具 “魔轮”。这是一个可以旋转的圆筒，手工绘制的画片镶嵌在它的内表面，在筒子四周等距离地刻有狭缝。当圆筒旋转时，可以通过一个个狭缝看到依次转过的活动画面，如图1-4所示。



　　图1-4 威廉·霍纳尔的发明
　　早在电影发明之前，一个叫爱得伍特·谬伯力杰(Eadweard Muy Bridge)的人，用最原始的方法把一匹正在奔跑的马的一系列形象记录在胶片上。他采用的方法是：使用多个相机，每一个相机的快门都拴着一条绳子。这样，当马跑过时，依次拉动快门，将马腿的动作先后拍摄下来。后来他发明了一个把各个画面投影到屏幕上的装置，类似于现在的电影放映机，这个装置使用了一个绘有画面的玻璃圆片，如图1-5所示。当圆片旋转时，通过这个装置可以看到马奔跑的动画。不过有一个遗憾，一个动画周期只有半秒钟，时间太短了，而且内容不再翻新。



　　图1-5 一个绘有画面的玻璃圆片
　　还有一种可以看到动画效果的方法是快速翻书(flipbook)。其实是将动画系列的各帧画面分别画在每页纸上，然后按顺序装订好。这时快速翻动按顺序装订好的页面，就可看到各帧画面连续播放的效果。
　　20世纪20年代初期，工艺流程有了改进：背景画与动画主体这两部分画面分开，描线与上色这两道工序分开。于是，1928年沃尔特·迪斯尼(Walt Disney)电影制片厂首先开始制造动画片(或叫卡通片)。著名的“米老鼠”(Mickey Mouse)和“唐老鸭”(Donald Duck)就是这一时期优秀卡通形象的代表。
　　注释：
　　卡通是英文Cartoon的音译，意思就是漫画和夸张。动画艺术家采用夸张和拟人的手法。将一个个可爱的卡通形象搬上了银幕，因而把动画片也称为卡通片。

[ 本帖最后由 scy1127 于 2008-7-2 17:25 编辑 ]

色彩的含义

　　在自然界中有最丰富的色彩资源，比如阳光、花草、天空、大海等，它们自身的颜色已被人们不知不觉地接受、认同并形成一种意识，一种独特的感觉。很多人对颜色的感觉或联想都是相似的，这种特点叫做“共通性”，这是出于传统习惯的缘故。因此不同的颜色能给观众以沉静、活泼、温暖、寒冷等直接的感受，也可以形成热烈、冷漠、朴素、典雅、清爽、愉快等感觉。大家习惯以某种颜色表示某种特定的意义，于是该颜色就变成了某事物的象征。颜色的意义在世界上也具有共通性，但由于民族习惯不同也会存在很大差异。下面首先对一些内涵表达强烈的颜色做一些介绍。

　　红色，是火的色彩，也是血的颜色，首先给人的感觉是温暖、兴奋、热烈、坚强和威严，所以我们的国旗使用红色赋予了革命的含意。在西方，据说耶稣的血是葡萄酒色，所以又表示圣餐和祭奠。粉红色是健康的表示，而深红色则意味着嫉妒或暴力，被认为是恶魔的象征。除此之外，红色也给人以警告、恐怖、危险感，所以应用于交通信号的停止信号，消防系统的标志色等。

　　黄色，属于暖色，代表光明、欢悦，色相温柔、平和。在中国过去是帝王的象征色，有高贵、尊严的含义，一般人不得使用。黄色在古罗马也被当作高贵色。东方佛教喜爱雅素、脱俗，常用黄色暗示超然物外的境界，基督教同样作为犹太衣服的颜色；有时黄色也代表娇嫩、幼稚。

　　绿色是大自然的代表色，象征春天、新鲜、自然和生长，也用来象征和平、安全、无污染，比如我们常说的绿色食品，同时绿色也是未成年人的象征。绿色在西方有另一种含意是嫉妒的恶魔。

　　蓝色给人幽雅、深刻的感觉，有冷静和无限空间的意味，也表示希望、幸福。在西方，蓝色象征着名门贵族。但蓝色也是绝望凄凉的同义语。在日本，也用蓝色表示青年、青春或者少年等年轻的一代。同时，蓝色也是联合国规定的新闻象征颜色。

　　紫色也具有高贵庄重的内涵，日本和中国在过去都以服色来表示等级，用紫色是最高级的。至今在某些仪式上仍旧用做紫幕、方绸巾等。在古希腊，紫色作为国王的服装专用色。总之，紫色意味着高贵的世家。

　　白色，通常是优美轻快、纯洁、高尚、和平和神圣的代语。自然界中雪是白色的、云是白色的。因此，白色给人以素雅、寒冷的印象；有时也代表脆弱、悲哀之意。不同的民族对它有不同的好恶。中国和印度以白象和白牛，作为吉祥和神圣的象征。日本的老道与和尚喜欢穿白衣服。西方结婚的新娘穿白色婚纱。相反，中国办丧事却用白色孝服。

　　黑色，代表黑暗和恐怖，意喻死亡、悲哀，属不吉利色。它表示一种深沉、神秘，使人产生凄寒和失望的意念。但把黑和其他颜色相配时却显出黑色的力量和个性，如黑白相衬，显得精致、新鲜、有活力。在黑色衬托下可以使用各种非常刺激的冷暖颜色，因为它有调和色彩的作用。

色彩的对比

　　通过上面的介绍，相信读者也会联想身边的事物，它们为什么使用这种颜色，以及这种颜色赋予该事物的独特意义。一切颜色不但具有不同的特性，而且各种色彩之间也产生相关性及相对性。评价一种颜色是浑浊还是新鲜，是明快还是暗淡，是寒冷还是温暖，一定要和其他色彩发生相互关系才能进行判断，单独用一种颜色是无法评价的。下面我们根据颜色的多种特性进行辩证理解。

　　首先，从颜色的冷暖开始比较，例如，所有的色彩纯度一样，感觉最强的首先是橙黄，其次是红，再次是黄、绿、紫、青、蓝。红、橙黄属于暖色，紫介于寒暖之间，习惯上也称之为中间色。其实，中间色也存在某种程度的寒暖差异。绿介于青和黄之间，若偏黄一些则显暖，具有膨胀和发扬的感觉。凡是冷色，都具有沉着和收缩的感觉。凡是比较浑浊的色彩，在人的视觉上就产生了一种脏的感觉。有浊必有清，凡是比较纯正的色彩一般产生鲜明感。色彩相关性体现在类似和对比这两个方面，两者都可从颜色的寒暖、明暗、清浊的特性上找到区别。

　　所有色彩除了本身具有不同冷暖特性之外，还由于黑白含量的多少会造成明色和暗色的差别。因此，每一种色彩都形成各种深浅不同的色调。当两种不同色彩放在一起进行比较时，首先会产生明暗上的对比效果。而色彩的对比并不局限于上面所述的这些。如果把一种华丽的颜色和朴素的颜色放在一起，把光滑的和粗糙的放在一起，也将发生不同对比效果。尤其是那些特性不明显的色彩，也可以通过对比的方法，使它们的性格鲜明起来。

　　如果配合得好，鲜艳的颜色不仅不会掩盖另一个晦暗的颜色，而且，还可以提高它的色彩效果。比如，一种灰颜色，把它放在暖色旁边，它就有些偏冷，如果把它放在冷色旁边，看上去就有些偏暖的感觉。色彩还有一个特性就是从面积上进行对比。例如，大面积界限分明的色调使一幅画具有力量和生气。在深暗的色调中如以面积较小的亮色调相衬托，会赋予肃穆、庄重的感觉。

　　色彩的对比效果可以做到很强烈，也可以做到很柔和，但要注意，突出的色彩使用太多会造成注意力的分散，只会破坏构图的统一。在追求某种艺术效果时，往往可以利用物质材料的本色来产生，以更好地体现自然美。关于“对比美”这个法则可以运用在不同的手法中。为满足主观的要求，应注意材料的制约性与色彩、环境之间的互相关系。特别应注意色彩与色彩之间、材料与材料之间、环境与主体之间的既相互制约又相互补充的辩证关系。

　

色彩的构成

　　构成是将几个单元重新组合成为一个新单元的过程。它是一种与造型有关的概念，也是现代造型设计用语。在这里将介绍色彩构成：色彩构成是指配色方面的平衡、分隔、节奏、强调、协调等方法的使用。

　　● 平衡
　　重色和轻色、明色和暗色、强色和弱色、膨胀色和收缩色等都是相对立的色彩，配色时应改变其面积和形状以保持平衡。
不同量的各种颜色，由于比较的结果就会形成均衡或不均衡的感觉。要达到均衡，配备颜色时要考虑到屏幕上、下、左、右以及两个对角关系上的均衡，不要把很强或很弱的颜色孤立在一边。同时，也要注意每种颜色的面积大小变化，这也是均衡的关键。

　　● 分隔
　　主画面颜色的面积大小和变化是均衡的关键，分隔也是如此，主要是在配色时，在交界处嵌入别的颜色，从而使原配色分离，以此来补救色彩间因类似而过分弱或因对比而过分强的缺陷。

　　● 节奏
　　平衡和分隔也是体现画面节奏的重要因素，节奏是通过色调、明度、纯度的某种变动和往复，以及色彩的协调、对照和照应而产生的，以此来表现出色彩的运动感和空间感。这个节奏取决于形态配置的和谐。为了效果更好，可使色调变化作渐变的效果。

　　● 强调
　　强调是通过面积较小的鲜明色改善整体单调的效果，强调是使颜色之间紧密联系并且平衡的关键，应贯穿于整体。比如，在大面积的暖色中加一小块较冷的色彩，或在一大块亮颜色上放一小块暗的色彩，也可反之，这样可以打破画面的呆板。也就是说我们运用颜色的各种对比方法来达到强调的目的，我们往往使用红和绿、黄和紫、橙黄和青做对比。

　　● 协调
　　协调就是以某颜色为主调，调和色彩，使各色之间统一联系、互相呼应和感觉协调，以此来表现统一的感觉。协调决定了一幅作品的成败，主要指冷暖色和明暗调的统一，整体被哪种色调所支配。可以说有几种不同的主调，就有几种不同的协调效果。
要掌握协调的规律其实很简单，就是记住各种颜色的浓淡、冷暖以及明暗的搭配变化，比如黄与橙、蓝与绿、青与紫、浅绿与深蓝、浅黄与深橙等。

Flash MX新功能

　　在Flash爱好者的急切盼望之下， Macromedia在3月4日终于发布了其最新的版本—— Flash MX。该版本一经推出，国内闪客们的激情又一次沸腾起来，纷纷对其进行了大规模的测试，大家都想一睹为快。新版Flash MX已不再只是当初那款动画设计制作软件，不仅有Windows版还有Mac版，可支持Mac OS X。Flash MX较Flash的以前版本，无论是在操作界面、图像处理方面，还是在Action Script脚本语言、 文件的支持格式和发布等方面都做了不小的改变。Flash MX除具备满足网络应用的增强型工具外，还包括其他一些新特点。下面将从操作界面、图像处理和ActionScript脚本语言方面来介绍Flash MX的新增功能，让广大闪客们更全面、更透彻地了解超炫超酷的Flash MX。

　　1. 完善的组件支持
　　Flash MX的技术向面向对象又大大地前进了一步，Flash MX中已经引进了组件(Component)的概念。在Flash MX的面板中我们可以看到它内置的7个组件，例如文本框、单选按钮、复选框、下拉列表框等，而这些组件在Flash 5中还必须费劲地去绘制和编写。这是一个可喜的进步，因为这将意味着以后可以拥有更多的Flash界面和动画资源，更重要的是，它们都是完全独立的。一个人开发出来后可以让很多人使用，从这个意义上说，这就像Delphi的VCL控件，Visual Basic、Visual C++的ocx控件一样。

　　2. 脚本支持CodeInsight技术
　　在Flash MX的脚本编辑器中，使用了类似于Delphi、Visual Basic、Visual C++等编程工具的CodeInsight技术，也就是说，在一个对象的名字后面打上一个点，这个对象的所有属性和方法会有列表出现，这样就可以大量减轻设计者的记忆强度，提高开发效率。

　　3. 脚本编辑器支持查找和替换
　　代码的编辑一直是Flash脚本编辑器的最大弱点，在Flash MX中，这一点得到了很大程度的改进。 首先是代码的提示功能，比如循环结构、判断分支结构等都有详细的提示，减少了出错的可能；其次是代码的查找和替换功能，代码编辑会非常方便；再有就是允许外部书写代码然后导入，让读者可以方便地选择自己习惯的编辑器去编写代码。

　　4. 支持麦克风和摄像头
　　一直作为网络交互多媒体先锋的Flash，在Flash MX版本中新增了支持麦克风和摄像头的技术，通过 Flash MX强大的交互性功能，再配合联机聊天和交互视频交流，将会创造出一个划时代的多媒体潮流。

　　5. 支持视频流播放
　　让众多闪客们期待的视频功能终于在Flash MX中得到了实现，Flash MX中加入了对流式视频的支持，这是一个巨大的进步。

　　6. 文件支持更广泛
　　Flash MX所支持的文件类型有所增加，除了Flash MX所支持的全部类型外，还新增了Windows media (.wmv，.asf)，digital video(.dv，.dvi)，对视频文件的支持也完善了很多，可直接导入AVI文件，还可设置不同压缩率以改变文件的大小。

　　7. 支持动态声音导入
　　以前必须在制作前事先将声音文件导入到Flash中，而现在可以在Flash播放的过程中利用loadSound()直接导入mp3。
语法如下：
sound1= new Sound();
sound1.loadSound("demo.mp3",0)
sound1.start();
stop();
其中 sound1.loadSound("demo.mp3",0) 表示导入的mp3是 event sound，必须使用 sound1.start()才能播放。
另一种用法：
sound1= new Sound();
sound1.loadSound("demo.mp3",1)
则为流式播放，即边下载边播放。

　　8. 新增了影片模板功能
　　就像用Dreamweaver可以制作网页模板一样，Flash MX也可以制作动画模板，增强了动画的复用性，大大提高了批量制作动画时的效率。

　　9. 新增的键盘响应功能
　　Flash MX对Actions键盘响应功能做了改进，现在能够像鼠标响应一样方便地获取。如按下(onKeyDown)和释放(onKeyUp)事件。另外，还可以根据场景中的MC事件或者按钮等设置监听键盘事件列表，将键盘事件传送到有需要处理的MC中。
　　用法如下：
　　(1) 设置键盘监听列表：
Key.addListener(_root.b1);
Key.addListener(_root.b2); //_root.b1 _root.b2为场景中的MC
(2) 编写键盘响应处理程序：
_root.b1.onKeyDown = function() {
trace("key1 is down");
};
_root.b1.onKeyUp = function() {
trace("key1 is up");
};
_root.b2.onKeyDown = function() {
trace("key2 is down");
};
_root.b2.onKeyUp = function() {
trace("key2 is up");
};
　　在Flash MX中，只要设置了键盘监听列表，那么每当有按键按下的时候,所有列表里的对象都触发键盘响应事件。而对于onKeyDown，有区别于鼠标的onPress事件的地方, 如果始终按住按键不松开的话，将会连续不断地触发onKeyDown事件，因此编程的时候要格外注意，通常可以设置一个状态变量来判断是否第一次触发。

　　10. 编程语言的内部对象支持
　　Flash MX默认情况下将Array、String、XML转换为内部对象，大大提高了运行速度。Action中增加了一个内置对象：Client/Server，这样用Flash就可以直接编写服务器端的程序，完全用Flash架构起一个站点也不是不可能的事情了。

场景(Scene)、帧(Frame)和符号(Symbol)

　　Flash里的场景就像电影里的分镜头一样，由Flash动画中既相互联系又性质不同的一组镜头组成，我们知道，每一部电影都不可能用一个镜头来拍摄。因为这既不符合人的视觉习惯，又减弱了作品的感染力。动画的制作与此类似，复杂的动画需要多个场景，Flash通过场景的切换来实现与影视作品一样的分镜头效果。

　　帧是动画制作过程中的一个最为重要的概念，因为动画其实就是利用人视觉上的停顿现象来实现的，我们可以把帧看作动画中的一个暂停镜头。动画片的最小长度单位是格，在Flash MX中叫帧，当按一定的速率播放时就会产生动画效果。我们平常所看的电影是按每秒24帧的播放速率播放的，而在Flash MX中默认的播放速率为每秒12帧，该播放速率可以根据不同的输出要求来更改。在Flash MX中，帧大致分为关键帧与中间帧(原画与中间画)，关键帧往往表示动作的极限位置，在这些关键帧之间的过渡画面是中间帧。图2-1显示了一个由正方形变成正圆形的动画，图中标出了两个关键帧和中间帧。



　　　　关键帧 　　　　　　　　　　中间帧 　　　　　　　　　　　　关键帧
　　图2-1 正方形变成正圆形的动画
　　符号在Flash里相当于场景中的演员，在Flash中，所有的图形(Graphic)、按钮(Button)或电影剪辑(Movie Clip)统称为符号，所有的符号都被放在符号库里，符号可以在动画创建过程中无限制地被重复调用，甚至可以被其他任何动画无限制地重复调用，而整个文件的大小不会增加，这一点很重要。合理地用好符号可以有效地节省磁盘空间，减少文件尺寸，缩短动画制作周期。另外，Flash的动画是经常被用到网络上的，而动画文件的尺寸大小对网络的传输速度影响非常大。

　　● 图形(Graphic)：可以制作一个静止的图形，也可以制作成一段独立的动画，但是该动画的播放效果受到主场景中的时间轴控制，而且它不具备交互功能。

　　● 按钮(Button)：可以接收读者的鼠标事件，通过操作鼠标达到交互的目的。读者可以利用此功能制作一些有鼠标控制的特殊动态效果。下面为读者展示了按钮的4个状态，如图2-2所示，从左到右分别是默认状态、触摸状态、单击状态和相应热区，最后一种状态在动画中是看不见的，也可以说是隐藏状态。



　　图2-2 按钮的4种状态
　　● 电影剪辑(Movie Clip)： 与图形相似，都拥有独立的时间轴和坐标系。也可以制作一个静止的图形，但它具备交互功能，可以受语句的控制，随时调用。

[ 本帖最后由 scy1127 于 2008-7-3 09:28 编辑 ]

群组(Group)、取消群组(Ungroup)和打散(BreakApart)

　　普通群组是将多个或单个对象定义为一个整体，但互相又不影响的操作。这样将有利于对对象的管理。如图2-3所示，左侧为群组前的对象，它们各部分是分散的，比如头部和身体是分离的；右侧为群组后的对象，其五官、手臂等各部分被组成为一个整体，可以明显看出，后者编辑起来会更加方便。

    当读者需要对其中任何一个部件单独编辑时，可以在该对象上双击鼠标进入其组件编辑模式，也可以按下Ctrl+Shift+G组合键取消群组，将各部分分离。打散可以作为取消群组来操作，可将群组的整体打散为相互分离的部件，它还有一个重要的功能，就是可以将文字和导入的位图打散，这样就可以使用各种工具对文字和位图进行编辑，比如，可以将文字打散进行渐变填充，如图2-4所示；也可以使用橡皮擦工具对位图进行擦除，如图2-5所示。

　

图2-3 群组操作展示



图2-4 编辑打散文字



图2-5 编辑打散位图

[ 本帖最后由 scy1127 于 2008-7-3 09:35 编辑 ]

运动变形(Motion Tween)和形状变形(Shape Tween)

　　Tween变形指两个关键帧之间的中间帧。运动变形和形状变形是两种不同的动画效果，它决定中间的内容。运动变形从字面上解释为一个符号从一个关键帧到另一个关键帧之间的移动动画。其实这是一个概括的说法，在运动变形动画中的符号可以同时进行旋转、缩放、透明度或变色等变形，如图2-6所示。形状变形可以解释为由一个图形变换到另一个图形的动画，如图2-1所示由正方形变成正圆形。但是该变形动画不支持符号，也就是说Graphic、Button和Movie Clip都不能产生变形动画，必须经过打散处理的对象才能进行变形动画。在Flash里直接绘制的图形均为打散状态。



图2-6 运动变形效果

层(Layer)

　　层的概念与其他图形图像处理软件、动画软件中的同名概念类似。在Flash中的层有3种类型，一种是普通层，相当于传统动画片中的透明片，每一张透明片上都有一些不同对象或对象的某一部分，再由这些透明片叠合而成一幅完整的画面。图2-7给出了4张透明片，也可以说是4个图层，其中小孩的五官、头、手臂和身体等分别画在4张透明片上，叠合在一起组合成一幅完整画面的效果。



图2-7 由4个图层组成的画面

　　另一种是蒙板层(Mask)，与蒙板层相对的是被蒙板层(Masked)，在蒙板层上的对象相当于一个蒙板，其形状将影响被蒙板层对象的效果，当被蒙板层上的对象在蒙板层对象的范围之内就会显示，在蒙板层对象的范围之外就会隐藏。图2-8给出了一个蒙板示意图。



图2-8 蒙板示意图

　　最后一种是动作引导层(Guide)，与其相对的是被引导层(Guided)，首先在引导层上绘制路径，然后将被引导层上绘制的符号捕捉到引导层路径的两个端点上，使用运动变形就可以产生符号沿路径运动的动画，如图2-9所示。



图2-9 动作引导层的应用

[ 本帖最后由 scy1127 于 2008-7-3 10:58 编辑 ]