flash动画制作从基础学习到精通教学教程.ppt

《flash动画制作从基础学习到精通教学教程.ppt》由会员分享，可在线阅读，更多相关《flash动画制作从基础学习到精通教学教程.ppt（77页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第6章 动画制作软件Flash MX,初识Flash 动画制作基础 简单动画制作 高级动画制作 作品的输出,一、初识Flash,用户界面 菜单栏 标准工具栏 控制工具栏 绘图工具栏 浮动面板 时间轴面板 属性面板 工作区,（图见下页）,（图见下页）,时间轴面板,属性面板 如文字工具的属性面板。,一、初识Flash,2. 绘图工具 箭头工具、精选工具和套索工具 直线工具和铅笔工具 钢笔工具 椭圆工具和矩形工具 笔刷工具 自由形变工具 渐变工具 墨水瓶工具和颜料桶工具 吸管工具 橡皮擦工具 视图移动工具 缩放工具,一、初识Flash, 箭头工具（Arrow Tool）、精选工具（Subselect

2、 Tool）和套索工具（Lasso Tool）。 他们的主要功能都是选择 箭头工具 选取和移动对象、修正对象轮廓、旋转或缩放对象。 精选工具 对曲线、圆形、矩形等图形对象的外形进行编辑调整。若图形对象是组件，必须先解散。 套索工具 使用圈选方式来选取对象，它可以圈出不规则形状。,一、初识Flash,箭头工具 用来选择或移动对象 选择对象方法：单击对象的内部区域（或轮廓线），选中该对象的内部区域（或轮廓线）； 双击对象的内部区域（或轮廓线），选中该对象的内部区域和轮廓线（或轮廓线）；拖放鼠标圈出一个矩形，该矩形中的区域被选中。 选项栏：自动对齐（Snap to Objects）绘制、移动、旋转或

3、调整的对象将自动对齐； 平滑处理（Smooth）对直线和形状进行平滑处理； 平直处理（Straighten）对直线和形状进行平直处理。,一、初识Flash,精选工具 使用该工具选中对象后，对象将显示出一条带有节点（空心小方块）的蓝色线条。 套索工具 选择不规则区域，或选择位图中不同颜色的区域（必须事先用Modify/Break Apart命令将其打碎）。 包括： 魔术棒（Magic Wand）可根据颜色选择对象的不规则区域； 多边形（Polygon Mode）可选择多边形区域；,一、初识Flash, 直线工具（Line Tool）和铅笔工具（Pencil Tool）。 用于在工作区中绘制线条。

4、 直线工具 只能画直线。 按住Shift键，拖放鼠标可以绘制垂直、水平直线或45斜线。 铅笔工具 画直线或曲线。 所画线条包括：Straighten（平直）、Smooth（平滑）、Ink（墨水）三种模式。,一、初识Flash, 钢笔工具（Pen Tool）。 可以绘制连续线条与贝塞尔曲线，且绘制后还可以配合精选工具来加以修改。用钢笔工具绘制的不规则图形，可以在任何时候重新调整。,一、初识Flash, 椭圆工具（Oval Tools）和矩形工具（Rectangle Tools）。 绘制椭圆或矩形。配合Shift键，可绘制圆或正方形。 笔刷工具（Brush Tool）。 填充工作区中任意区域的颜色

5、。 它与铅笔工具不同，笔刷工具画出的是填充区，而铅笔工具则是线条。,一、初识Flash, 自由形变工具（Free Transform Tool） 可对选定对象进行缩放、旋转、扭曲等形变。,一、初识Flash, 渐变工具（Gradient Tool）。 改变图形对象中的渐进色的方向、深度和中心位置等。 （a）使用渐变工具前 ； （b）使用渐变工具后。,一、初识Flash, 墨水瓶工具（Ink Bottle Tool）和颜料桶工具（Paint Bucket Tool）。 墨水瓶工具 更改线条的颜色和样式； 颜料桶工具 更改填充区域的颜色。包括：缺口大小（Gap Size）和锁定填充（Lock Fi

6、ll）两个选项。 缺口大小 决定如何处理未完全封闭的轮廓， 锁定填充 决定Flash填充渐变的方式。,一、初识Flash, 吸管工具（Eyedropper Tool）。 从工作区中拾取已经存在的颜色及样式属性，并将其应用于别的对象中。,一、初识Flash, 橡皮擦工具（Eraser Tool）。 完整或部分地擦除线条、填充及形状。 选项栏：擦除模式（Eraser Mode）、水龙头（Faucet）和橡皮擦形状（Eraser Shape）。 擦除模式选项用于选择擦除图画区域的方式，包括：Erase Normal（普通，擦除线条和填充）、Erase Fills（擦除填充）、Erase Lines（

7、擦除线条）、Erase Selected Fills（擦除所选区域）和Erase Inside（擦除内部）。 水龙头选项可以快速擦除线条或填充颜色。选择水龙头后，在工作区中单击要擦除的线条或填充区域（选择的区域或封闭区域）。 橡皮擦形状选项 用于设置橡皮擦的外形。,一、初识Flash, 视图移动工具（Hand Tool）。 用于移动工作区使其便于编辑，其功能相当于移动滚动条。选择该工具后，使用鼠标在工作区中拖动页面即可调整。,一、初识Flash, 缩放工具（Zoom Tool）。 用于调整工作区的显示比例。 选项栏：放大（Enlarge）和缩小（Reduce）。,二、动画制作基础,动画的类型

8、帧、图层和场景 符号和实例 动画制作流程,1. 动 画 的 类 型,Flash生成的动画文件，其扩展名默认为.fla和.swf。前者只能在Flash环境中运行；后者可以脱离Flash环境独立运行。 动画的制作方式 帧动画和造型动画 在Flash中，帧动画亦称逐帧动画（Frame by Frame Animation）或影格连续动画；造型动画则称为渐变动画（Tweened Animation）。,1. 动 画 的 类 型,逐帧动画 在连续动画的相邻两帧中，画面一般地仅有微小的变化； 每一帧都是关键帧； 每帧画面的制作。 借助“描图纸”按钮，在上一帧的基础上略作修改。 使用其他绘图软件制作系列文件

9、，文件名采用连续的编号，如a01、a02、a03等。,1. 动 画 的 类 型,渐变动画 只需在重要处定义关键帧，Falsh会自动创建关键帧间的内容； 渐变动画区分为“移动渐变”（motion tween）和“形状渐变”（shape tween）； 移动渐变动画 首末帧间是淡蓝色的背景； 形状渐变动画 首末帧间是淡绿色的背景； 渐变有问题用虚线表示。,2. 帧、图层和场景,动画电影的组成层次可分为： 动画电影（movie）场景（scene）帧（frame） 。 帧 是Flash动画的基本组成元素，也是Flash作品的基本播放单位。在时间轴上，每个小方格（亦称影格）即为一帧，其内容可包括：图形、

10、音频、素材符号、嵌入对象等。,2. 帧、图层和场景,图层 是Flash为制作复杂动画作品而引入的一种手段，相当于一张透明的玻璃纸。 将不同对象放在不同层上，可以轻松制作场景复杂的动画。 分为：Normal（普通）、Guide（引导）、 Guided（被引导）、Mask（遮罩）和Masked（被遮罩）。,2. 帧、图层和场景,场景 复杂的Falsh动画中，几个互相联系但性质不一样的镜头。 相当于影视作品中的分镜头。 动画 动画就是利用人类视觉暂留的特性，快速播放一系列静态图像，从而产生动态的效果； 标准的动画播放速度是：2430幅/秒。,2. 帧、图层和场景,分辨率 分辨率是衡量图像细节表现能力

11、的一个尺度； Flash中分辨率的设置决定了动画最后显示的区域大小。,2.1 帧的种类,关键帧 指一段动画中处于起始、结束等关键位置的帧。 静止帧 指关键帧前后的一或多个具有静止内容的相邻帧。在时间轴上，灰色表示已有内容的静止帧，白色表示空静止帧。 中间过渡帧 指过渡动画中两个关键帧之间的所有帧，其颜色由过渡类型决定。,2.2 帧的操作, 选择帧； 创建帧； 复制帧； 删除帧； 改变帧频率（播放频率）。 在默认情况下，Flash动画的播放频率是12fps（每秒12帧）。,2.3 图层的操作,图层操作区。,初始界面,编辑后界面,2.3 图层的操作,Normal（普通）； Guide（引导）； G

12、uided（被引导）； Mask（遮罩）； Masked（被遮罩）； Folder（图层夹）。,图层的类型。,2.3 图层的操作,Guide和Guided 引导层用于制作被引导层中对象的运动路线。 被引导层实质上是一个普通层，其中的对象将沿着引导层指引的轨迹运动。 引导层中的运动路线可使用铅笔工具制作。,图层的类型,引导层,作用 引导与它相关联图层中对象的运动轨迹或定位。 在引导层内创建网格、图形或其他对象，可在绘制图形时起到辅助作用。 引导层在输出的电影中不会出现。,引导层,分类 普通和运动 普通：只起到辅助绘图和绘图定位的作用。 运动：在制作动画时，可以起到设置运动路径的向导作用。,引导层

13、,一个向导层可以与多个普通层关联，其方法是用鼠标把一个普通层的名字拖曳到运动向导层的下面一层。 将引导层转换为普通层 方法一：右单击该向导层单击快捷菜 单中的Guide。 方法二：选中向导层，在图层属性对话 框中选中Normal单选项。,2.3 图层的操作（续）,Mask和Masked 遮罩层的作用就是将其下面的图层（被遮罩层）遮住。 遮罩层可以看作一块挡板，在其中绘制的任何图形都相当于把这部分挖去，可以通过挖去的窟窿看到下面图层的内容。 遮罩动画中的遮罩层和被遮罩层只有在锁定的情况下才能预览。,图层的类型,2.3 图层的操作,Folder 图层夹（Layer Folder）相当于文件夹，用于

14、对图层进行分类，方便管理。,图层的类型,2.3 图层的操作, 添加（插入）一个新图层。 调整图层顺序。 改变图层状态。 编辑/不可编辑； 显示/隐藏； 锁定/解锁； 轮廓/非轮廓。 设置图层属性。 删除图层。,5种基本操作,2.4 场景(Scene)应用,显示场景面板：Modify/Scene 设置新场景 添加 按钮或Insert/Scene； 删除 按钮或 Ctrl+按钮（无确认框）； 复制 按钮，新场景名后有一copy； 改名 双击场景名； 查看 单击场景名或View/Goto/。,2.4 场景(Scene)应用,调整场景的显示 放大或缩小 单击工具箱View区中的 按钮； 选择工具箱Op

15、tions区中的 或 按钮 Alt+单击反相操作。 放大指定区域 在放大或缩小方式下，在区域中拖出一个矩形，系统自动设置放大比例。 移动页面使用工具箱View区中的 按钮。,应用标尺及网格 标尺 View/Rulers； 显示网格 View/Grid/Show Grid； 编辑网格 View/Grid/Edit Grid。 设置参数 设置 File/Preferences； Undo Levels（撤销次数） 最多200次。,2.4 场景(Scene)应用,3. 符号和实例,符号 可以重复使用的图像、动画或按钮。 符号是构成动画的基本单位，它可节省存储空间，加快动画播放速度。 实例（Insta

16、nce） 是符号在场景上的具体体现，即在工作区中的符号。,3. 符号和实例,符号的分类：图形（Graphic）、按钮（Button）和电影片段（Movie Clip）。 图形可以是任意静态图形、也可以是受主时间轴（场景中的时间轴）控制的动画。 按钮是指可以通过鼠标点击（或滑过、移离等）完成一定的交互功能的符号。 电影片段是指可以独立于主时间轴的动画片段。,3. 符号和实例,新建一个符号 Insert/New Symbol命令。 或 Ctrl+F8 创建新符号 用箭头工具选择场景中的元素Insert/Convert to Symbol输入名称选择类型单击OK。 创建空符号 Insert/New

17、Symbol输入名称选择类型单击OK 进入符号编辑模式。,3. 符号和实例,编辑符号 在库面板中双击需编辑符号的名称。,3. 符号和实例,创建实例 创建符号的新实例 选择关键帧Window/Library将Library窗口中的符号拖至场景中。 更改实例的颜色效果Brightness （明暗）、Tint（浓淡）、Alpha（透明度）、advanced（特殊效果）。 分离实例 切断实例和符号之间的链接，使之成为一组独立的形状和线条。 选中实例Modify/Break Apart,4. 动画制作流程, 打开新影片文件并安排场景； 插入动画元件（帧、图层等）； 设定动画效果并测试动画； 使用 Fil

18、e/Save 命令保存扩展名为 .fla 的 Flash 动画文件； 输出影片。,三、简单动画制作,逐帧动画 运动渐变动画 形状渐变动画,1. 逐帧动画, 创建一个新图层； 在起始帧位置插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容； 在编辑完成的关键帧后插入另一空白关键帧进行编辑，使之与上一帧略有不同； 重复步骤的操作，创建其他各帧，直至全部制作完毕； 保存文件。 注：若每帧的画面已用其他绘图软件制作成系列图片文件，则 两步可并为一步，即使用 File/Import命令导入系列图片文件。,1. 逐帧动画,例6-3 利用骏马飞奔的系列图片制作动画操作步骤如下： 选择File / New

19、命令或单击Main工具栏中的New按钮； 选择File / Import命令，在Import对话框中选择系列图片中的第一幅图片文件； 系统将提示“该文件似为系列文件的一部分，是否需要输入全部系列？”； 单击“是”按钮，这一系列图片即按序号逐帧插入； 选择File / Save命令，保存文件。,演示,2.运动渐变动画,制作运动渐变动画的限制条件 运动对象只能是文字、符号或组合体； 运动不能发生在多个对象之间； 被操作对象只能在同一层上。,2.运动渐变动画,运动渐变动画的制作过程 创建一个新图层； 在起始帧位置，插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容； 单击时间轴中的结束帧位置，插

20、入另一个关键帧（或空白关键帧）； 在结束关键帧中编辑画面内容； 创建运动动画，并设置运动参数； 保存文件。,注：运动渐变动画首尾帧间有淡蓝色背景，并有黑色箭头表示，若出现虚线表示渐变过程有问题。,2.运动渐变动画,例6-4 制作一幅动画，将字符串“Flash运动动画”从右往左平移，文字颜色为蓝色。 操作步骤如下： 单击Main工具栏中的New按钮； 编辑起始关键帧。在第1帧工作区中右端输入字符串Flash运动动画； 编辑结束关键帧。单击时间轴的第30帧，按F6创建一关键帧，将文字拖至工作区的左端； 将鼠标移至时间轴的第1帧，单击鼠标右键打开快捷菜单，选择Create Motion Tween命

21、令； 单击播放工具栏中的播放按钮，观看播放效果； 选择File / Save或File / Export Movie命令。,演示,3.形状渐变动画,制作运动渐变动画的限制条件 起始帧和结束帧中的运动对象只能是形状； 当运动对象是文字、符号或组合体时，必须先通过打散命令将它们打散。 判定形状的方法 当使用鼠标单击所选择的对象时，对象会被小圆点覆盖。,3.形状渐变动画,形状渐变动画的制作过程 创建一个新图层； 在起始帧位置插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容； 单击时间轴中的结束帧位置，插入一个（空白）关键帧，在其中编辑制作形状； 在属性面板中单击Tween右侧文本框的下拉箭头选

22、择Shape选项，创建形变动画； 保存文件。,3.形状渐变动画,说明 若编辑的内容为非形状，必须使用Modify / Braek Apart（打散对象）命令将对象转换为形状，一次不行可执行多次。 形状渐变动画首尾帧间有淡绿色背景，并有黑色箭头表示，若出现虚线表示渐变过程有问题。,3.形状渐变动画,例6-7 制作一个由圆渐变为矩形的动画 操作步骤如下： 单击Main工具栏中的New按钮，创建一个新文件。 编辑起始关键帧。在第1帧工作区中绘制圆。 编辑结束关键帧。在第30帧工作区中绘制矩形。 将鼠标移至时间轴的第1帧，在属性面板中单击Tween右侧文本框的下拉箭头选择Shape选项。 单击播放工具

23、栏中的播放按钮，观看播放效果。 保存文件 。,演示,3.形状渐变动画,例6-8 制作一个由圆渐变为一行字的动画 本例中的结束帧是文字而不是形状，因此不能象上例一样直接制作形变动画，必须先将其打散并转换为形状。 操作步骤如下： 单击Main工具栏中的New按钮，创建一个新文件。 编辑起始关键帧。在第1帧工作区中绘制一个椭圆。 编辑结束关键帧： 再第30帧工作区中输入“形状渐变”4个字； 选中“形状渐变” （被蓝色框线包围）； 选择Modify / Break Apart命令，将整行字拆为单字； 选择Modify / Break Apart命令，将单字拆为字形。 将鼠标移至时间轴的第1帧，在属性面

24、板中单击Tween右侧文本框的下拉箭头选择Shape选项。 单击播放工具栏中的播放按钮，观看播放效果。 保存文件 。,演示,四、高级动画制作,遮罩动画 声音动画 行为动画,1. 遮罩动画,遮罩层的作用。 可以透过遮罩层内的图形看到其下面图层的内容，而不可以透过遮罩层内的无图形处看其下面图层的内容。 可制作图像文字、电影文字、图像的动态切换和探照灯效果等。 遮罩动画至少要有两个层（遮罩层和被遮罩层）的配合才能完成 。 创建遮罩层。 右单击需设为遮罩层的普通层层名单击快捷菜单中的Mask。 注意：若该层下面有一普通层，系统将自动为其与遮罩层建立关联，即将其设为被遮罩层。,1. 遮罩动画,建立与取消

25、普通层与遮罩层的关联。 建立： 方法一：用鼠标将已经存在的普通层拖曳到遮 罩层下面。 方法二：在建立一个新的遮罩层的同时系统自动 与其下面的普通层建立关联。具体操 作：选中一个普通层，在图层属性对话 框中选中Mask单选项。 取消： 方法一：用鼠标将被遮罩的图层拖曳到遮罩层 的上面。 方法二：选中被遮罩图层，在图层属性对话框 中选中Normal单选项。,1. 遮罩动画,例6-9 制作一个动画，使其中的文字能在运动中改变颜色。 解 根据题意，可以先制作一个运动文字层作为遮罩层（mask），另外再制作一个被遮罩层（masked），在其中导入一幅背景画作为运动中文字的颜色。,1. 遮罩动画,操作步骤

26、如下： 单击Main工具栏中的New按钮。 制作运动文字层，并取名为Text： 将图层重命名为Text； 在第1帧工作区中输入“文字变色动画”，并使用箭头工具将其调整到运动开始位置； 在第30帧按F6键创建关键帧，使用箭头工具将文字调到结束位置； 将鼠标移到时间轴的第1帧，单击鼠标右键打开快捷菜单，选择Create Motion Tween命令，创建运动动画。,1. 遮罩动画, 制作背景层，并取名为BG： 单击图层操作区中的Insert Layer（插入层）按钮，插入一个图层并重命名为BG； 选择File / Import命令，导入背景图片文件。 调整图层顺序。在图层操作区，将BG层拖到Tex

27、t层下面。 将Text层和BG层分别设为mask层和masked层：将鼠标移到图层操作区的Text层，单击鼠标右键打开快捷菜单，选择Mask命令。 单击播放工具栏中的播放按钮，观看播放效果。 保存文件 。,演示,2. 声音动画,导入声音文件 选择File/Import命令，打开Import对话框； 选择声音文件，单击“打开”按钮，该声音文件即加入库面板中； 选择Window/Library命令，打开库面板； 将库面板中的声音文件拖至某一帧的工作区中，该帧的时间轴上即出现一表示声音的符号。,2. 声音动画,编辑声音 在时间轴面板上单击有声音符号的那一帧，在Properties面板将显示有关声音的

28、属性； 单击Edit按钮，打开编辑声音窗口； 编辑完成，单击OK按钮 。,2. 声音动画,例6-12 为按钮1.fla增加声音功能，然后保存在按钮2.fla中。当鼠标移到按钮上时能发出“当”的一声，按下鼠标时可发出一段短音乐，以上两段音效分别由Ding.wav和Tada.wav提供。 操作步骤如下： 选择File / Open命令或单击Main工具栏中的打开按钮，在出现的打开对话框中选择按钮1.fla，然后单击“打开”按钮。 选择File / Import命令，打开导入对话框，导入声音文件Ding.wav和Tada.wav。, 选择Window / Library命令或按功能键F11打开库面板

29、。 双击库面板中的“按钮”符号，进入“按钮”符号的编辑状态。 单击图层操作区的插入层按钮，插入一个新的图层Layer2。 单击Layer2层的Over帧，按F6键创建关键帧，将库面板中的声音符号Ding拖入工作区。 单击Layer2层的Down帧，按F6键创建关键帧，将库面板中的声音符号Tada拖入工作区。 按快捷键Ctrl+Enter观看播放效果。 选择File / Save As，将结果保存在按钮2.fla中。,演示,2. 声音动画,3. 行为动画,行为动画 通过人工操作（如鼠标单击）来控制动画的动作。 行为动画是通过一种类似于脚本的简化语言（Action Script）实现对动画的控制的

30、。,3. 行为动画,Flash中的行为只能添加到： Keyframe（关键帧）； Button（按钮）； Movie Clip（电影片段）。 与时序有关的行为（如到达某一时刻就执行某一行为）必须添加到关键帧上。 与事件相关的行为（如单击鼠标就执行某一行为）必须添加到按钮上。,3. 行为动画,按钮操作事件的编码一般采用如下的格式： on（鼠标事件） 对事件的响应语句 ,3. 行为动画,例6-14 制作一个由行为控制的动画。当单击对象时它开始顺时针旋转，再次单击对象就停止旋转。单击次数为奇数开始旋转，偶数则停止旋转。 操作步骤如下： 单击Main工具栏中的New按钮。,3. 行为动画, 制作能旋转

31、的对象符号Rotate。 选择Insert/New Symbol命令，在对话框中输入符号名Rotate，选择符号类型为Movie Clip，单击OK按钮。 在第1帧导入Button.jpg文件。 单击时间轴的第30帧，按功能键F6创建关键帧。 创建旋转动画。单击时间轴的第1帧，在属性面板中单击Tween下拉列表框右侧的箭头选择Motion选项；然后在Tween下方新弹出的Rotate选项左、右两个文本框分别选择及输入CW(顺时针)和1。,3. 行为动画, 制作能旋转的对象符号Rotate。 编码。选择Window/Actions命令，打开Action面板。 在右边的文本输入区中输入代码如下：

32、stop()；停止播放 i = 1； 变量i用于控制对象是否旋转 单击第30帧，在文本输入区输入如下代码： gotoAndPlay(2)； 转去播放第2帧，制作对象的连续旋转,3. 行为动画, 单击时间轴的第1帧，将库面板中的Rotate符号拖至工作区。在Action面板的文本输入区输入如下代码： i = -i；注意，是场景的第一帧，不是movie clip的第一帧 在行为面板的Navigate to other scripts下拉列表中选择Actions for No instance name assigned Rotate选项，在Action面板的文本输入区输入如下代码： on (pre

33、ss) if (i eq -1) gotoAndPlay(2); if (i eq 1) gotoAndPlay(1); ,3. 行为动画, 按下快捷键Ctrl+Enter，观看播放效果。单击右上角下面的关闭按钮，关闭播放窗，返回编辑窗。 选择File/Save命令，保存Action1.fla。 选择File/Export Movie命令，保存Action1.swf文件 。,演示,五、作品的输出,Flash常用的输出文件格式。 1Flash Player（*.swf）文件； 2Windows AVI（*.avi）文件； 3Quick Time（*.mov）文件； 4Animated GIF（*.gif）文件； 5Adobe Illustrator Sequence（*.ai）文件序列； 6JPEG Sequence（*.jpg）文件序列； 7Windows Metafile（*.wmf）、Adobe Illustrator（*.ai）、Bitmap（*.bmp）、JPEG Image（*.jpg）、GIF Image（*.gif）等文件。,本节完成,如果不明白可以咨询作者。,