1、Flash 动画设计教程,课程的主要内容,Flash 动画基础,绘制图形,对象的编辑,帧-帧动画,导向移动动画,形状过渡动画,旋转动画,遮罩动画,Flash 特点、图像知识、Flash工作环境介绍。,绘图工具的使用、各种形状的绘制方法。,文字、形状、图像的修改与编辑。,动画的基础知识，帧-帧动画实例。,旋转动画的制作过程与实例。,导向移动动画的制作过程与实例。,形状过渡动画的制作过程与XYZ变换实例。,遮罩动画的制作过程与实例。,第1章 Flash 中文版基础知识,什么是 Flash？Flash 是由美国Macromedia公司出品的矢量绘图和动画制作软件。1998年，Macromedia公司
2、收购了一家很小的计算机公司，同时将该公司开发的网络发布插件FutureSplash更名为Flash 2，取得了意想不到的效果。以后继续开发升级，很快就推出了Flash 3，使Flash被商业界接受。1999年6月推出Flash 4，更加受到各方面的重视。2000年9月发布了Flash 5，引起了市场的强烈反应。2002年3月推出了Flash MX。2004年推出Flash 2004 MX。2005年推出Flash 8.0，此时Flash已不能再被称为矢量图形软件，因为它的处理能力已延伸到了视频、矢量、位图和声音。 Flash如此受到人们欢迎的主要原因是，它可以在使用很小字节量的情况下，实现高质
3、量的矢量图形和交互式动画的制作。目前，Flash文件的格式已成为网络动画的标准格式，是发布网络多媒体的首选网页设计工具。Flash不仅可用于网页制作，还可以应用于交互式多媒体软件的开发、多媒体教学和游戏等。,1.1 Flash 的主要特点,简单易学： 操作界面友好，使用方便。 采用浮动面板，面板安排更合理。 绘图工具简单易学，可以更简便地绘制各种矢量图形。 与Macromedia公司的其他产品配合密切。尤其是和Dreamweaver和Fireworks等组合成一体，成为“梦幻组合”，使制作网页更方便。功能强大： 具有较强的矢量绘图和动画制作功能。绘制的图像质量高，制作的动画和网页数据量小。 较
4、强的多媒体技术。具有很强的导入和发布功能，可以导入位图、MP3、 AVI、 QuickTime等格式文件。 可以充分调用Flash文件内部库中的文件，重复利用资源。 Flash MX具有自己的脚本语言。它所有的编程方式和编程思想都符合面向对象的语言形式。,数字图像知识,数字图像的种类有两种：点阵图、矢量图。1、点阵图点阵图也叫位图，它由许多颜色不同、深浅不同的小圆点(像素)组成。像素是组成图像的最小单位，许许多多的像素构成一幅完整的图像。在一幅图像中，像素越小，数目越多，则图像越清晰。点阵图可以表现得更自然和更逼真，更接近于实际观察到的真实场景。点阵图的缺点：图像文件一般较大，在将它放大、缩小
5、和旋转时，会产生失真。,矢量图,矢量图由一些基本图元组成，这些图元是一些几何图形，如：点、线、矩形、多边形、圆和弧线等。这些几何图形均可由数学公式计算后获得。矢量图的图形文件是绘制图形中各图元的命令。显示矢量图形时，需要相应的软件读取这些命令，并将命令转换成组成图形的各个图元。由于矢量图是采用数学描述方式的图形，所以通常由它生成的图形文件相对比较小，图形颜色的多少与文件的大小基本无关。另外，在将它放大、缩小和旋转时，不会象点阵图那样产生失真。,1.2 Flash的工作环境,工具箱,标题栏,主要工具栏,调色版面板,菜单栏,时间轴,舞台工作区,“属性”面板,颜色样本面板,一、菜单栏与主要工具栏,菜
6、单栏菜单栏在标题栏的下边，菜单栏有十个主菜单。Flash 8.0 菜单的形式与其他Windows软件的菜单形式相同，都遵循基本相同的规定。主要工具栏主要工具栏也叫常用工具栏，它有16个按钮，其中一些按钮都是标准化的，如新建、打开、保存、剪切、复制、粘贴等。另外一些按钮则是用于绘图编辑，如平滑、直线、对齐对象等按钮。,二、Flash 工具箱,工具箱提供用于图形绘制和图形编辑等的各种工具。工具箱内从上到下分为四个栏：工具栏，查看栏，颜色栏，选项栏。,三、面板,在Flash中提供了许多面板（也叫浮动面板），利用这些面板，可以完成绘制图形、加工文字、制作动画等许多操作。通过 “窗口”菜单，可以打开不同
7、的面板窗口。,混色器面板,颜色样本面板,属性面板,四、舞台,舞台，就是绘制图形和编辑图形、图像的矩形区域，也是创作影片动画的区域。在创建或编辑一段Flash影片时，我们离不开舞台，这是排练演出的场所。1. 舞台工作区大小与颜色的设置单击菜单“修改”-“文档” 或单击属性面板中的“文档属性”按钮，打开文档属性对话框。在尺寸栏可以设置舞台工作区的大小，默认单位为像素(px)，最大可设置为2880px2880px，最小为1px1px。在文档属性对话框中，单击“背景颜色”按钮，会弹出颜色面板，选中一种颜色，完成工作区的颜色设置。帧频：影片的播放速度，默认12fps，即每秒播放12帧画面，对于在 Web
8、 站点播放的动画，8fps到12fps就足够了。2.舞台工作区显示比例的调整在舞台的右上方，有一个可改变舞台工作区显示比例的下拉列表框，通过它可以调整舞台工作区显示比例。,3. 网格和标尺在舞台中，为了使对象准确定位，可以在舞台的上边和左边加入标尺，或在舞台工作区显示网格。通过菜单“视图”“标尺”，可以在舞台上边和左边出现标尺。通过菜单“视图”“网格”“显示网格”，舞台工作区内显示网格4. 舞台工作区的两个控制工具工具箱内“查看”栏中提供了两个舞台工作区的控制工具，一个是手形工具，另一个是缩放工具。手形工具：选择手形工具，鼠标移入舞台工作区后鼠标指针变为手的形状，按下鼠标左键并拖曳，可以在舞台
9、工作区的不同部位进行查看。缩放工具：单击按下工具箱内的“缩放工具”按钮，在工具箱“选项”栏中会出现放大和缩小两个按钮，可以实现对舞台工作区的放大和缩小显示。,舞台,五、时间轴,时间轴是动画和视频类软件中的一个重要概念。通俗地讲，时间轴就好象导演的剧本，它决定了各个场景的切换以及演员出场、表演的时间顺序。Flash 把动画按时间分解成帧，时间轴用于组织和控制影片内容在一定时间内播放的层数和帧数。它是处理帧和图层的地方，帧和图层是对象和动画的组成部分。将一些图形图像按照一定的时间、空间顺序播放，就形成了动画，而“时间轴”可以表现和记录动画的全部信息，是控制动画流程最重要的手段。,时间轴的组成 每一
10、个动画都有与它相应的时间轴。时间轴窗口可以分为左右两个区域，左边区域是图层控制区域，它主要用来进行各图层的操作；右边区域是帧控制区域，它主要用来进行各帧的操作。所谓图层就相当于舞台中演员所处的前后位置。图层靠上，相当于该图层的对象在舞台的前面。在同一个纵深位置处，前面的对象会挡住后面的对象。(1) 图层控制区域：它上边第一行是所有图层的控制栏，有三个按钮：显示、锁定和轮廓线。图层控制区域的下边是图层工作区，其内有许多行，每行表示一个图层。(2) 帧控制区域：它上边的第一行是时间轴帧数标示区，用来标注随时间变化所对应的帧号码。下边是帧工作区，它给出各帧的属性信息。有一个小黑点的是关键帧(即动画起
11、点、终点或转折点的帧)。,1.3 创建第一个Flash影片,基本步骤：1. 新建动画影片文件，同时设置影片的基本属性。影片的尺寸为500px宽、300px高，背景为浅灰色。2. 输入文字，进行必要的设置。使用 “文本工具”在舞台工作区输入文字“第1个Flash影片”，字体为楷体，10号，粗体，黄色。使用箭头工具将文字置于舞台的正中间。3. 创建文字由小到大逐渐扩展的动画右键单击时间轴图层1的第1帧，在快捷菜单（右键单击）中选择“创建补间动画”。单击时间轴的第30帧，按F6键，即创建了从第1到第30帧的动画。时间轴处于第30帧处时，选中文字，使用“任意变形工具”调整文字尺寸，将文字调大。,4.
12、增加图层和绘制立体球图形在图层1上增加新图层2，单击图层2第1帧，在舞台左下角画一个小立体彩球。 5. 创建红色立体球从左下角向右上角直线移动的动画单击图层2第30帧，按F6键创建关键帧。按住Shift键，选中1到30帧的所有单元格，单击菜单“插入”“时间轴”“创建补间动画”。选中第30帧，将彩球移到舞台的右上角处，再调整大小。 将此动画文件调试后保存。,1. 播放Flash动画的几种方法 直接按Enter键，即可在舞台窗口内播放动画。 使用“控制栏”面板播放： 通过菜单“窗口”“工具栏”“控制器”，打开“控制器”，单击相应按钮进行操作。 通过菜单“控制”“测试影片”（快捷键：Ctrl+回车键
13、），即可在播放窗口内播放动画。 2. 保存与打开Flash动画：与其它软件操作类似。这里应注意文件的扩展名为.fla 3. Macromedia Flash Player (独立播放器)是一个独立的应用程序，它的名字是SAFlashPlayer。使用它可以播放SWF 格式的文件。直接双击swf类型的文件，就可以打开Flash Player播放器，同时播放该动画文件。,Flash动画的播放与保存,第 2 章 绘制图形,制作 Flash 动画前，一定要准备好素材，素材的来源有三种：一、导入外部素材，如图片、声音和视频等；二、 Flash “库” 中的元件；三、 用 Flash 的绘图工具绘制。矢量
14、图形一般可以看成是由线条和填充物组成；矢量图形的着色有两种：线条的着色和填充物的着色；可以着单色，也可以着渐变色和位图。 本章主要内容： 介绍绘图工具的使用方法、设置颜色、图形属性等。,1.1 Flash 的基本操作,1. 选取对象：单击“箭头工具”按钮，然后可以选择对象。 选择一个对象：单击一条线或填充物，可以选中该线或填充物。 选取多个对象：按住Shift键，同时依次单击各对象；或用鼠标画矩形，可以将矩形区域中的所有对象都选中。 2. 移动对象：利用箭头工具选中一个或多个对象，拖动鼠标。 如果按住Shift键，同时拖动被选的对象，可以将选中的对象沿 45 度的整数倍角度移动。 按键盘上的光
15、标移动键，可以微调对象的位置。 3. 复制对象：移动对象的同时按Ctrl键，可以复制对象。也可以打开“变形面板”(菜单: 窗口变形)进行“复制与变形”操作。 4. 删除对象：选中要删除的对象，然后按 Delete 键或退格键。,2.1 颜色的设置和绘制图形,Flash 提供了很多设置和修改颜色的方法，其中“颜色样本”和“混色器”面板是最常用的处理颜色的工具面板。,一、“颜色样本”面板通过菜单“窗口”“颜色样本”，可以调出“颜色样本”面板。它提供了各种不同的颜色样本供选择使用，在它的底部是渐变填充效果样式按钮，单击其中一个，即可迅速获得相应的渐变填充色设置。另外，单击颜料桶等工具也会出现与“颜色
16、样板”一样的“填充颜色”面板。,通过菜单“窗口”“混色器”，可以调出“混色器”面板。 可以实现填充类型有： 纯色、线性、放射状和位图。,混色器面板,设置渐变效果： 对于“线性”和“放射状”填充方式，用户可以自己设置颜色渐变的效果。如移动关键点、改变关键点的颜色、增加关键点等。,绘制有填充物的椭圆和矩形,绘制有填充物的椭圆使用工具箱中的“椭圆工具”，设置线条类型、线条颜色和填充色，在舞台工作区内拖动鼠标，即可绘制有填充物的椭圆图形。在绘制时，如果按Shift键，可绘制正圆。 绘制有填充物的矩形使用工具箱中的“矩形工具”，设置线条类型、线条颜色和填充色，在舞台工作区内拖动鼠标，即可绘制有填充物的矩
17、形图形。如果在绘制时，按Shift键，可绘制正方形。,实例1：立体彩球,制作步骤：1、新建一个文件和导入一幅图像设置舞台的尺寸为 600Px200Px，白色背景；导入一幅图像，使用“任意变形”工具，调整适当的尺寸，然后将该图层锁定。2、绘制第1和第2个立体彩球在图层1上插入图层2，单击“椭圆工具”按钮，绘制正圆，无轮廓线，填充为放射状的红到黑色；使用箭头工具，按Ctrl键拖动红色彩球，复制一个相同的立体彩球，使用油漆桶工具，改变彩球亮点的位置为左上方。3、绘制第3个立体彩球复制第3个立体彩球，通过调整渐变色调整条关键点的颜色，将填充设置成红到白色的放射状填充效果。,2.2 线条的绘制与设置,使
18、用“线条工具”绘制直线单击工具箱中的线条工具按钮，在属性面板设置线的颜色、粗细和线型，在舞台工作区内拖动鼠标，可以绘制各种长度和角度的直线。同时按 Shift 键，可以绘制水平、垂直和45角的线条。 使用“椭圆工具”绘制椭圆轮廓线单击工具箱中的椭圆工具按钮，在属性面板设置轮廓线的颜色、粗细和线型，在舞台工作区拖动鼠标，即可画出椭圆。同时按 Shift 键，可以画正圆。 使用“矩形工具”绘制矩形轮廓线单击工具箱中的矩形工具按钮，在属性面板设置轮廓线的颜色、粗细和线型，在舞台工作区拖动鼠标，即可画出矩形。同时按 Shift 键，可以画正方形。,线条属性设置,一、设置线的颜色以下操作一般应首先要选中
19、操作对象。使用“笔触颜色”面板设置线的颜色将鼠标移到颜色板内的色快上单击即可；或在颜色输入框输入六位十六进制数#RRGGBB来设置颜色。使用“混色器”面板设置线的颜色在颜色板上用鼠标单击选择；或在右边的红、绿、篮输入框中输入R、G、B值。二、设置线型线型包括线的形状、线的粗细和线的颜色等。线型的设置可由线的“属性”面板来完成。,刷子工具的使用,使用刷子工具，可以创建某些特殊效果。刷子参数设置：刷子宽度、刷子形状和刷子模式，其中刷子模式设置如下：,原始图像 1.标准绘画 2.后面绘画 3.颜料选择 4.颜料填充 5.内部绘画,1、标准绘画模式：新画的线条覆盖同一层中的原有图形。2、后面绘画模式：
20、可在空白区域涂色，不影响原有线条和填充。3、颜料选择模式：只能在选择的图形区域里画线条。4、颜料填充模式：只能在空白区域和原图形的填充区域内绘制线条。5、内部绘画模式：只能在起始点所在的图形区域中绘制线条。,实例2：荷塘月色,荷塘月色的风景图画。漆黑的夜晚，圆圆的月亮照映在湖水中，倒挂的垂柳，深篮色的湖面上漂浮着片片荷叶。给人一种美丽、幽静的感觉，好像置身于迷人的风景之中。,制作过程,1、设置：创建新 Flash 文件，舞台大小 300260px，灰色(#999999)背景。 2、月亮：用椭圆工具画一个黄色的圆形月亮图形。 3、湖面：使用矩形工具在舞台的下半部绘制深篮色的矩形湖面。 4、垂柳：
21、使用刷子工具，设置深绿色，最小的竖形笔型画垂柳。 5、荷叶：在舞台的外边绘制深绿色椭圆，之上画小圆和直线，形成荷叶。 6、组合：用箭头工具选中荷叶图形，通过菜单“修改”“组合”，将它们组合。 7、复制：按Ctrl键，用鼠标拖动荷叶，进行荷叶的复制，放在湖面的不同位置。 8、变形：使用任意变形工具，调整荷叶的大小和旋转角度。 9、倒影：设置填充色为黄色，使用刷子工具，画出月亮的倒影。 10、保存：保存文件“荷塘月色.fla”。,2.3 钢笔工具的使用,使用钢笔工具可以绘制精确的直线、曲线、多边形等。 直线：单击直线的起点，然后松开鼠标，移到终点再双击鼠标。折线：单击折线的起点，依次单击转折点，最
22、后在终点双击鼠标。多边形：单击多边形的起点，然后依次单击各端点，最后单击多边形的起点。,绘制曲线：有两种方法。（1）先绘直线再定切线：单击起点，松开鼠标，移动鼠标到下一点处单击，产生一条线段，同时（不要松开鼠标左键）拖动鼠标改变切线的方向，从而确定曲线形状。（2）先定切线再绘曲线：单击起点，不松开鼠标，拖动鼠标形成切线，然后松开鼠标，再单击下一节点处，产生一条两点间的曲线。,2.4 铅笔工具的使用,使用铅笔工具，可以像我们真的在使用一支铅笔一样，绘制直线、曲线和其它任意形状。Flash 还可以自动对其进行加工，例如变直、平滑等处理。使用铅笔工具时，首先要设置线型和颜色，并且要选择一种绘画模式：
23、,伸直模式：可以绘制直线，并且将接近三角形、椭圆、矩形和正方形的形状转换为这些常见的几何形状。平滑模式：可以绘制平滑曲线。墨水模式：可以绘制接近徒手画出的线条。,实例3：树叶图形,树叶图形由几片树叶和几条叶茎组成，制作过程如下： 1、创建新文档，尺寸为300px宽、260px高，白色背景。 2、设置钢笔工具：线宽2，笔触颜色为深绿色，填充为绿色放射性渐变。 3、画树叶的外形：使用钢笔工具，画出树叶的外形；使用任意变形工具，对树叶的形状进行调整；使用线条工具，在树叶上绘制几条直线。 4、树叶组合与复制：通过菜单“修改”“组合”命令，将树叶组合。然后按 Ctrl 键同时拖动鼠标进行树叶的复制操作。
24、 5、画粗叶茎：使用铅笔工具，深绿色，线宽 6，画一条粗叶茎。线宽3，画几条细叶茎。 6、最后调整树叶的大小和位置。,2.5 橡皮擦工具的使用,使用“橡皮擦”工具，可以快速擦除舞台上的任何内容。橡皮形状下拉列表框：可选择橡皮擦的形状与大小。橡皮模式按钮：可以设置擦除方式，各擦除模式意义如下：“标准擦除”模式：可以擦除同一层上的笔触和填充。“擦除填色”模式：只擦除填充，不影响笔触。“擦除线条”模式：只擦除笔触，不影响填充。“擦除所选填充”模式：只擦除当前选定的填充，并不影响笔触。“内部擦除”模式：只擦除橡皮擦笔触开始处的填充。水龙头按钮：可擦除所单击的整个填充或线段。,2.6 墨水瓶和颜料桶工具
25、的使用,墨水瓶工具墨水瓶工具的作用是改变线条的属性，例如线的颜色、粗细和类型等。另外，使用墨水瓶工具还可以为没有轮廓线的填充物增加轮廓线。颜料桶工具使用颜料桶工具，可以设置和修改填充物的颜色属性，也可以填充封闭图形内部为某一颜色属性。,实例4：国画展厅,国画展厅的制作步骤,1. 绘制轮廓线和地面(1) 设置舞台区大小为500260px。单击“视图”“网格”“编辑网格”，设置网格水平、垂直间距均为10px，选择“显示网格”复选框。(2) 使用线条工具，绘制展厅、地面的布局线条图形。(3) 使用颜料桶工具，给展厅地面的格子内填充黑白相间的颜色。,2. 填充图像(1) 单击“文件”“导入”“导入到库
26、”菜单命令，将一幅“灯”图像和五幅国画图像导入到“库”面板。(2) 在“混色器”面板的填充风格下拉列表框中，选中“位图”选项，将“灯”图像用油漆桶工具填充到上边的梯形内部。(3) 使用填充变形工具，单击填充的“灯”图像，拖动鼠标调整图像的大小和位置，形成房顶的吊灯图像效果。(4) 将“库面板”中的三幅国画图像依次拖到工作区，调整图像的大小，填充到展厅正面。选中整个图像并组合。(5) 将“库面板”中的一幅国画拖到工作区，调整大小，打碎。使用“任意变形工具”调整形状，使其与左边的梯形形状一致。同样方法将另一幅国画填充到另一梯形中。,第3章 创建文本和导入外部对象,本章主要内容： 创建文本 导入图像 导入声音和视频,
