Flash动画设计教程.docx
《Flash动画设计教程.docx》由会员分享，可在线阅读，更多相关《Flash动画设计教程.docx（52页珍藏版）》请在冰豆网上搜索。
Flash动画设计教程
第1章Flash综述
Flash是美国Macromedia公司出品的一款集动画设计、游戏、Web网站开发等功能于一身的优秀软件。
Flash开拓了多媒体制作与网页设计的新领域，给用户更多的想象空间和技术支持，用户可以结合个人的创意制作出有声有色的动画作品、交互游戏及互动性网站作品。
1.1Flash的发展
Flash最初的设计者是乔纳森·盖伊（JonathanGay）。
乔纳森·盖伊是一位相当有天分的程序员，在高中时代他就设计出了同步声音和平滑图像的游戏——空降兵，之后又设计出了另一款游戏——黑暗城堡。
在这些游戏的开发过程中，他积累了丰富的声音和图像处理经验，这为他日后设计Flash软件打下了坚实的基础。
1993年乔纳森·盖伊成立了FutureWave软件公司，致力于图像方面的研究工作。
本书以Flash8简体中文版为工作环境，系统地讲解Flash软件知识，重点讲解Flash动画的制作技巧和方法，让您尽情体验Flash8的精彩。
1.2Flash动画特点
Flash动画是一种交互式的矢量动画，能够在低文件数据传输率下实现高质量的动画效果。
除此之外，相对于其他动画而言，Flash动画还具有以下显著特点：
（1）矢量图形：
通过Flash8提供的绘图工具箱，可以方便地绘制任意形状的线条、色块和文字，可以方便地实现矢量线条向矢量色块的转换，对矢量色块的加粗、柔化等，同时还可以任意调整图形或色块的颜色。
（2）交互式动画：
一般的动画制作软件只能制作标准的顺序动画，如3dsmax等，此类动画只能连续播放，而Flash8借助ActionScript的强大功能，不仅可以制作出各种精彩的顺序动画，还可以制作出复杂的交互式动画，以便用户对动画进行控制。
交互式动画是Flash的一个重要特点，它有效地扩展了动画的应用领域。
（3）流式播放技术：
Flash动画采用流式播放形式，用户在观看动画时，可以不用等到动画文件全部下载完毕即可开始观看。
这样就实现了动画的快速显示，减少了用户的等待时间。
（4）高质量的图像：
矢量图可以真正无限放大，能够始终显示全部图像，并且不会因为放大而降低图像的显示质量。
对于一般的位图，放大到一定倍数时，就会看到图像边缘的一个个锯齿状的色块。
（5）多种多样的文件格式：
在Flash8中可以导入多种类型的文件格式，如图形、图像、声音和视频文件等，这使动画能够灵活地适应各个领域的需要。
（6）文件的数据量小：
网络速度即网络数据的传输速度，它是网页文件的一种重要限制，是网络中最重要的一项指标。
所以，如何将内容丰富的网页在网络上快速传输，即减少网络文件的数据量一直是人们关注的问题。
Flash以它较小的数据量占据了网络领域的一席之地。
因为Flash是基于矢量图的，它只需少量的矢量数据就可以描述一个相当复杂的对象，与位图相比，数据量大大降低，只有几千分之一。
这样，Flash就有效地解决了多媒体与大数据量的矛盾，成为网络上非常流行的软件。
（7）插件工作方式：
虽然必须安装AdobeFlashPlayer插件后才能使用浏览器播放Flash动画，但是相对于其他动画的播放方式来说已经相当简单了。
此插件是一个免费的共享软件，在许多网站上都可以找到。
如果没有此插件，可以从Adobe公司的网站（）下载。
Flash也并不是十全十美，比如它不直接支持3D。
随着用户的制作水准越来越高，对影片的质量要求也越来越高，有时会希望做一些3D的物件来增强视觉效果，而这是Flash的弱项，必须通过第三方的工具来建立3D模型，然后再由Flash来引入。
1.3Flash8的工作环境
安装了Flash8简体中版软件后，在Windows系统的“开始”|“程序”菜单中就会出现一个Macromedia程序组，单击其中的MacromediaFlash8就会启动Flash8软件，进入Flash8的工作环境。
1.3.1Flash8工作环境简介
1．开始页
图1-1Flash8开始页
2．工作窗口
图1-2Flash8的工作窗口
Flash8的工作窗口由标题栏、菜单栏、主工具栏、文档选项卡、编辑栏、时间轴、编辑区和舞台、工具箱以及各种面板组成。
1.3.2主工具栏
在Flash8中，可以通过执行“窗口”|“工具栏”|“主工具栏”命令，将主工具栏显示或关闭。
如果主工具栏的位置影响到操作，则可以通过拖动的方法将其移动到屏幕的其他位置，也可以将其浮动于界面之上，如图1-3所示。
图1-3主工具栏
1.3.3工具箱
Flash8的工具箱如图1-4所示。
使用工具箱中的工具，可以绘制、涂色、选择和修改图形，并可以更改舞台的视图，它分为4个区域：
●工具区域：
包含绘画、涂色和选择工具。
选中其中的某个工具按钮，就激活了相应的操作功能。
●查看区域：
包含“手形工具”按钮和“缩放工具”按钮，都是用来查看对象的。
●颜色区域：
包含“笔触颜色”按钮和“填充颜色”按钮，用于修改线条颜色和区域的填充颜色。
●选项区域：
显示选定工具的各种属性选项，这些属性选项会影响工具的涂色或编辑操作。
图1-4Flash8的工具箱
1.3.4舞台
舞台是放置动画内容的矩形区域，这些动画内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑，诸如此类。
图1-6舞台
1.3.5面板
1．面板的基本操作
2．“帮助”面板
“帮助”面板对Flash的所有创作功能和ActionScript语言进行了详尽的说明。
可以随时按F1功能键将“帮助”面板打开，如图1-8所示。
利用该面板，可以对软件的使用或动作脚本语言进行查询。
图1-8“帮助”面板
3．“时间轴”面板
“时间轴”面板如图1-9所示，它是用来管理不同场景中的图层和处理帧的。
图1-9“时间轴“面板
4．“属性”面板
“属性”面板位于编辑区的下方，它会随选择对象的不同而不同。
当对Flash文档进行编辑时，“属性”面板中出现有关文档的属性，如图1-10所示。
图1-10文档属性面板
5．“动作”面板
“动作”面板可以创建和编辑对象或帧的ActionScript代码，主要由动作工具箱、脚本导航器和脚本窗格组成，如图1-11所示。
关于此面板的详细应用，会在后面的章节中具体讲解。
图1-11“动作”面板
6．“滤镜”面板
Flash8新增了滤镜功能，从而大大增强了其设计方面的能力。
这项新特性对Flash动画的制作产生了巨大影响。
它几乎颠覆了长期以来“Flash设计能力欠缺”的固有偏见，使人不得不对其刮目相看。
默认情况下，“滤镜”面板和“属性”面板、“参数”面板组成一个面板组，如图1-12所示。
图1-12“滤镜”面板
7．“对齐”面板
“对齐”面板如图1-13所示。
使用“对齐”面板，可以对编辑区中多个对象进行排列、分布、匹配大小、调整间隔等操作，使布局整齐美观。
图1-13“对齐”面板
8．“信息”面板
利用“信息”面板（如图1-14所示）可以查看选定对象的大小、位置、颜色和鼠标指针的信息。
图1-14“信息”面板
9．“变形”面板
“变形”面板可以对选定对象执行缩放、旋转、倾斜和创建副本的操作。
图1-15“变形”面板
10．“混色器”面板
打开Flash8的“混色器”面板，会发现界面比以前有了改变，如图1-16所示。
图1-16“混色器”面板
11．“库”面板
“库”面板如图1-18所示。
该面板存储为了在Flash文档中使用而创建或导入的媒体资源，还可以包含已添加到文档中的组件。
图1-17自定义渐变填充
图1-18“库”面板
12．“行为”面板
“行为”面板如图1-19所示。
利用该面板，无需自己编写代码就可为动画添加交互性，如转到Web页、从库中加载声音及控制声音的播放、控制嵌入视频的回放、控制影片剪辑的播放及触发数据源等。
“行为”面板的上方有一排功能按钮，它们是：
图1-19“行为”面板
13．“场景”面板
一个动画可以由多个场景组成，“场景”面板中显示了当前动画的场景数量和播放的先后顺序。
图1-20“场景”面板
14．“历史记录”面板
“历史记录”面板能跟踪自创建或打开某个文档以来执行的步骤列表。
列表中的项目数默认为100。
选择“编辑”︱“首选参数”命令，可以在弹出的“首选参数”对话框中更改列表中显示的项数。
图1-21所示标示出了该面板的组成。
图1-21“历史记录”面板
1.3.6网格、标尺和辅助线
网格、标尺和辅助线是Flash中用于精确绘制和定位对象的辅助工具。
可以在Flash文档中放置辅助线，然后使对象贴紧至辅助线，也可以打开网格，然后使对象贴紧至网格。
图1-23拖出的辅助线
1.4简单Flash动画的制作
图1-25实例效果图
下面介绍实例制作的步骤。
1．新建Flash文档和设置文档属性
图1-26“新建文档”对话框
图1-27“文档属性”对话框
2．导入动画素材
图1-28实例“库”面板
4．保存并测试动画
5．文件的导出
图1-29“导出FlashPlayer”对话框
6．文件的发布
图1-30“发布设置”对话框
7．文件的关闭与打开
1.5本章小结
本章首先介绍Flash的发展史和Flash动画的特点，然后详细介绍了Flash8简体中文版的工作界面以及各种面板，最后以一个简单Flash动画的制作为例，介绍了Flash动画制作的整体过程。
在学完本章之后，读者应该熟悉Flash8的工作环境，掌握制作Flash动画的一般操作步骤。
第2章静态图像制作
Flash提供了很多实用的矢量绘图工具。
这些工具功能强大而且使用简单，对于初学者来说，不需要太多的绘图专业技能就能绘制出很漂亮的静态图像。
通过线条、颜色的设置，一幅幅精美的图像跃然纸上。
本章通过几个实例引导大家学会手工绘图。
2.1简单制作
2.1.1眼球的制作
图2-8最终效果图
2.1.2放大镜的制作
图2-12最终效果图
2.1.3齿轮的制作
图2-13最终效果图
2.1.5制作精美的珠链
图2-28最终效果图
2.2复杂画图
图2-36最终效果图
2.3本章小结
本章通过几个手工绘图实例讲述了Flash工具箱中各种绘图工具的使用方法和技巧，以及各种面板（“属性”面板、“混色器”面板和“变形”面板）在绘图中的应用。
利用这些绘图方法和技巧，可以画出生动活泼、颜色鲜明的图形图像。
第3章动画制作
Flash最主要的功能就是制作动画，它具有强大的动画制作功能和卓越的视听表现力。
Flash动画分为两大类：
逐帧动画和补间动画。
在逐帧动画中，需要为每一帧创建图像；而在补间动画中，只需在动画的起始和结束处建立关键帧，制作关键帧中的图像，两个关键帧中间的过渡帧中的内容均由Flash系统自动生成。
补间动画是一种很有效的动画创建方式。
3.1动画原理
动画是通过人眼视觉暂留原理，快速地播放连续、具有细微差别的静止图像内容，让原本固定不动的图像变得生动起来。
人眼所看到的影像大约可以在脑海中暂存1/16秒，如果在暂存的影像消失之前，观看另一张连续动作的影像，便能产生活动画面的幻觉。
实验证明，如果动画的画面刷新率为24帧/秒左右，即每秒放映24幅画面，则人眼看到的就是连续的画面效果。
3.2时间轴、帧和图层
3.2.1时间轴
图3-1“时间轴”面板
3.2.2帧的基本概念和操作
1．关键帧
关键帧是定义动画变化的帧。
2．普通帧
普通帧显示为一个个的小方格。
3．帧标签和帧注释
帧标签用于标识时间轴中的关键帧，用红三角加标识名表示。
4．帧的操作
（1）改变帧的播放频率。
（2）选择帧。
图3-2选择帧
（3）创建普通帧。
（4）创建关键帧。
（5）创建空白关键帧。
（6）移动帧。
（7）复制帧。
（8）删除帧。
（9）翻转帧。
3.2.3图层及其基本操作
图层是Flash中最基本最重要的概念之一。
图层就像透明的醋酸纤维薄片一样，在舞台上一层层地向上叠加。
在不包含内容的图层区域中，可以看到下面图层中的内容。
1．添加图层
单击“时间轴”面板图层区左下角的“插入图层”按钮
，可在当前所编辑的图层的上面插入一个新图层。
也可以在当前图层上右击，在快捷菜单中选择“插入图层”命令，在当前层上面新增一个图层。
2．图层重命名
Flash系统默认的图层名称为“图层1”、“图层2”、……、“图层n”，可以根据图层上的对象功能给图层重命名。
双击图层名，此时出现一个文本框，只要在其中输入新的图层名即可，如图3-4所示。
3．调整图层的叠放次序
若想改变图层的叠放次序，把要移动的图层拖拽到指定的位置即可。
4．选取图层
要对图层进行修改，需要在“时间轴”面板的图层区中选择该图层以激活它。
图层区中图层名称旁边的铅笔图标
表示该图层处于活动状态，该层也称为当前图层。
一次只能有一个图层处于活动状态（尽管一次可以选择多个图层）。
5．删除图层
选取要删除的图层，将其拖拽到图层编辑区右下角的“删除图层”按钮
即可。
或者选取要删除的图层，然后单击“删除图层”按钮。
也可以在要删除的图层上右击，在快捷菜单中选择“删除图层”命令。
6．设置图层的几种编辑状态
（1）绘图编辑状态。
（2）图层显示/隐藏状态。
单击图层区的眼睛图标
。
（4）设置启动/关闭轮廓线状态。
7．引导层和遮罩层
在Flash中有两种特殊的图层：
引导层和遮罩层，如图3-9所示。
图3-9引导层和遮罩层示意图
8．图层文件夹
当时间轴上的图层太多时，可以通过创建图层文件夹，然后将图层放入其中来组织和管理这些图层。
可以在时间轴中展开或折叠图层文件夹，而不会影响在舞台中看到的内容。
3.3逐帧动画
逐帧动画（FrameByFrame）是最传统的动画方式。
其原理是在“连续的关键帧”中分解动画动作，使其连续播放而成为动画。
1．制作模拟玫瑰花开放的逐帧动画
rose1.gifrose2.gifrose3.gifrose4.gif
图3-12玫瑰花开放的分解图片
2．制作逐笔模拟书写“鸟巢”二字的逐帧动画
图3-20逐帧动画的第2帧
3.4补间动画
所谓补间动画，是指只要制作好起点关键帧和终点关键帧的内容，并在起点关键帧中定义补间动画类型，Flash就会自动制作出中间过渡帧的动画效果。
Flash可以创建两种类型的补间动画：
补间动画和补间形状。
下面介绍补间动画的制作方法。
3.4.1制作补间动画
补间动画的制作方法是：
首先在需要产生补间动画的起点关键帧处定义动画对象的位置、大小、颜色、透明度、旋转、倾斜、滤镜效果等属性，再在该补间动画的终点关键帧中改变该对象的这些属性，最后在起点关键帧中定义补间动画类型为“补间动画”，Flash就会根据这些变化自动产生完成这些属性渐变过程的中间帧。
3.4.2补间动画的参数设置
定义了补间动画后，在该补间动画的起始关键帧上单击，帧“属性”面板会变成如图3-28所示。
通过“属性”面板可以进一步设置补间动画的相应参数，从而使得动画效果更丰富。
3.4.3制作补间动画实例
1．旋转的风车
图3-378个叶片
2．跳动的球
图3-39“跳动的球.fla”的“库”面板
图3-41“球”图层的第60帧
图3-49投影图形
3.4.4制作补间形状
和补间动画不同的是，补间形状动画的对象只能是形状。
在补间形状中，在一个关键帧绘制一个形状，然后在另一个关键帧更改该形状或绘制另一个形状，Flash会自动内插二者之间的帧的值或形状来创建动画。
组、实例和位图图像均不能作为补间形状动画的对象（除非把它们分离成形状）。
要对文本应用补间形状，必须将文本分离两次，从而将文本转换为形状。
补间形状动画可以在两个关键帧之间制作出形变的效果，使一个形状看起来随时间变化成另一个形状。
Flash还可以补间形状的位置、大小、颜色和透明度。
1．圆变方
图3-51创建图形元件yuan图3-52创建图形元件fang
2．燃烧的蜡烛
图3-60最终效果图
3．延伸的直线
图3-61时间轴
4．动感球体
图3-65形状变化
3.4.5补间形状的参数设置
定义了补间形状后，在“补间形状”的起始关键帧上单击，帧“属性”面板会变成如图3-66所示。
通过“属性”面板可以进一步设置补间形状的相应参数，从而使动画效果更丰富。
图3-66动作补间动画的“属性”面板
3.4.6使用形状提示
形状补间动画看似简单，实则不然，Flash在“计算”两个关键帧中的图形的差异时，远不如想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得很乱，这时，“形状提示”功能会大大改善这一情况。
形状提示会标识起始形状和结束形状中相对应的点。
1．添加形状提示的方法
图3-67添加形状提示后各帧的变化
2．添加形状提示的技巧
（1）“形状提示”可以连续添加，最多能添加26个。
（2）按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。
（3）确保“形状提示”是符合逻辑的。
（4）形状提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具箱“选项”下面的“吸咐开关”
，这样会自动把“形状提示”吸咐到边缘上，如果发觉“形状提示”仍然无效，则可以用工具箱中的放大工具
单击形状，放大到2000倍，以确保“形状提示”位于图形边缘上。
3．数字转换
为了说明形状提示的妙用，在场景中写两个数字“1”，让它们同时变形，一个加形状提示，一个不加形状提示，看看这两个变形有什么不同。
3.5元件和实例
元件是Flash动画最主要的动画元素。
在动画制作中，将频繁使用的图形、按钮或电影剪辑等对象做成元件，可以无限调用，不必每次都重新编辑对象。
Flash中的元件被创建后自动保存在文档的“库”中，在动画制作时可以直接从“库”中将需要的元件拖拽到场景中使用，此时场景中的元件的具体应用称为实例。
实例来源于元件，但又具有独立于元件的属性，例如实例的大小、旋转、色彩浓淡、透明度、亮度等属性。
对实例属性的修改不会影响到与之对应的元件，但当编辑“库”中的元件时，所有与之相关的实例也会随之变化。
3.5.1元件的类型
Flash8中的元件有3种类型。
图形元件：
通常用于存放静态的图像，也能用来创建动画，在动画中可以包含其他元件实例。
按钮元件：
其主要作用是为动画提供交互功能。
影片剪辑元件：
动画中最具有交互性、用途最多、功能最强的部分之一。
在Flash动画中，影片剪辑元件的实例可以被命名，这样就可以利用行为对该影片剪辑元件的实例进行控制，创造出许多特殊的动画效果。
3.5.2创建元件
在Flash中，元件的创建方法一般有两种：
一种是新建元件；另一种是将舞台上的对象转换为元件。
1．新建元件
图3-69“创建新元件”对话框
2．转换为元件
图3-70“转换为元件”对话框
3.5.3编辑元件
3.5.4影片剪辑元件
图3-73“马”图层第60帧
3.5.5按钮元件
按钮元件与图形元件和影片剪辑元件不同，它的默认方式是由一个图层的4个关键帧组成，分别对应按钮的“弹起”、“指针经过”、“按下”、“点击”4种状态。
在实际应用中，可以根据需要给按钮添加新的图层。
图3-81动感导航条
3.6本章小结
本章首先介绍Flash动画原理，接着介绍Flash动画制作的基础——帧和图层的概念及基本操作，然后通过实例详细介绍了3种基本Flash动画（逐帧动画、动作补间动画和形状补间动画）的制作方法。
本章最后介绍了Flash动画最主要的动画元素——元件及其实例。
通过认真学习本章内容，并跟着本章的实例积极练习实践，读者应掌握逐帧动画、形状补间动画和动作补间动画的制作方法，在这之后，便可以进入Flash影片创作的成长历程。
第4章引导路径动画
单纯依靠设置关键帧，有时仍然无法实现一些复杂的动画效果，有很多运动是弧线的或不规则的，如月亮围绕地球旋转、鱼儿在大海里遨游等，若要在Flash中做出这种效果需要“引导路径动画”。
4.1小球运动
在Flash“时间轴”面板的图层区中，有一个“添加运动引导层”按钮
，引导层就是用来摆放对象运动路径的图层，它所起的作用在于确定指定对象的运动路线。
比如让一个球按指定的路线移动。
图4-3圆球运动路线
4.2飞翔的天使
图4-15“天使”补间动画的第1帧
4.3圆弧运动
图4-28图层1的第20帧
4.4碰撞实验
下面我们来做一个简单的物理碰撞实验的模拟。
橘黄色的小球从空中落下，落地瞬间与地上静止的绿色小球发生碰撞，两球均沿不同轨迹飞出界面。
图4-31引导层第18帧
4.5雪花的制作
图4-42导入背景图后的“场景1”
4.6本章小结
本章通过几个由简到繁的实例讲解了为动作补间动画添加引导线，从而制作引导路径动画的操作方法。
物体运动可以通过添加引导线来改变运动轨迹。
通过本章的学习，读者应掌握引导路径动画的制作方法和技巧。
第5章遮罩动画
遮罩是Flash动画创作中所不可缺少的——它是Flash动画设计三大基本功能中重要的出彩点。
使用遮罩配合补间动画，用户可以创建更多丰富多彩的动画效果，例如图像切换、火焰背景文字、管中窥豹等都是实用性很强的动画。
并且，从这些动画实例中，用户可以举一反三，创建更多实用性更强的动画效果。
遮罩的原理非常简单，但其实现的方式多种多样，特别是和补间动画以及影片剪辑元件结合起来，可以创建各种形式的动画效果。
5.1运动字符
Flash可以处理矢量图与位图，矢量图的优点在于，不论怎样调整它的大小，文件本身所占空间不会改变；位图则不行，重新调整位图的大小会改变图像的像素排布，因此，位图图像变大则文件所占空间变大，位图图像缩小则文件所占空间变小。
在Flash中，请尽可能地使用矢量图，而且在做成元件时请尽可能地变小，因为在应用到时可以将其变大而不会增加整个动画所占的空间。
5.2摄影机
摄影机投射出光束，光束照射的地方显示出文字信息，没有灯光的地方则漆黑一片。
本实例的重点在于遮罩的思路以及“旋转点”的改变。
制作思路：
可以在最底层摆放文字，第二层放灯光，灯光要能转动。
第二层作为遮罩层，也就是说第二层灯光打到的地方才能显示第一层的文字；由于在整个动画中摄影机图标始终可见，我们可以再建一个新层即第三层来放摄影机图标。
摄影机也要能够转动，而且还要能够与第二层的光束转动同步。
图5-17光束与摄影机同步
5.3变幻的风景
文字成为遮罩层，而被遮罩的风景图片通过文字反映出来，同时从左向右移动。
制作思路：
文字成为遮罩，那么文字的尺寸必须大点才能显示出比较连续的下层图片信息；文字不能移动，那么风景图片就得移动，我们可以把一组图片输入到Flash中并由这一组图片共同组成一个元件，最后给风景图片做个位移动画，并将文字层设为遮罩层即可。
图5-24拖入场景
图5-25移动图片
5.4百叶窗
百叶窗的制作思路：
将两幅不同的图片导入并分别放置在不同的图层（图层1和图层2），制作一个矩形变化的影片剪辑元件，放置于图层3。
图5-34 最终效果图
5.5
升级会员 