Flash绘图基础元件帧逐帧动画渐变动画造型设计

《Flash绘图基础元件帧逐帧动画渐变动画造型设计》由会员分享，可在线阅读，更多相关《Flash绘图基础元件帧逐帧动画渐变动画造型设计（78页珍藏版）》请在金锄头文库上搜索。

1、l Flash绘图基础l 元件l 帧l 逐帧动画l 渐变动画l 造型设计一、初识Flash1. 用户界面菜单栏标准工具栏控制工具栏绘图工具栏浮动面板时间轴面板属性面板工作区（图见下页图见下页）（图见下页图见下页）时间轴面板属性面板 如文字工具的属性面板。一、初识Flash2. 绘图工具箭头工具、精选工具和套索工具直线工具和铅笔工具钢笔工具椭圆工具和矩形工具笔刷工具自由形变工具渐变工具墨水瓶工具和颜料桶工具吸管工具橡皮擦工具视图移动工具缩放工具 一、初识Flash 箭头工具（Arrow Tool）、精选工具（Subselect Tool）和套索工具（Lasso Tool）。 他们的主要功能都是选

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

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

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

5、ransform Tool） 可对选定对象进行缩放、旋转、扭曲等形变。一、初识Flash 渐变工具（Gradient Tool）。 改变图形对象中的渐进色的方向、深度和中心位置等。（a）使用渐变工具前 ； （b）使用渐变工具后。一、初识Flash 墨水瓶工具（Ink Bottle Tool）和颜料桶工具（Paint Bucket Tool）。墨水瓶工具 更改线条的颜色和样式；颜料桶工具 更改填充区域的颜色。包括：缺口大小（Gap Size）和锁定填充（Lock Fill）两个选项。缺口大小 决定如何处理未完全封闭的轮廓，锁定填充 决定Flash填充渐变的方式。一、初识Flash 吸管工具（Ey

6、edropper Tool）。 从工作区中拾取已经存在的颜色及样式属性，并将其应用于别的对象中。一、初识Flash 橡皮擦工具（Eraser Tool）。 完整或部分地擦除线条、填充及形状。选项栏：擦除模式（Eraser Mode）、水龙头（Faucet）和橡皮擦形状（Eraser Shape）。擦除模式选项用于选择擦除图画区域的方式，包括：Erase Normal（普通，擦除线条和填充）、Erase Fills（擦除填充）、Erase Lines（擦除线条）、Erase Selected Fills（擦除所选区域）和Erase Inside（擦除内部）。水龙头选项可以快速擦除线条或填充颜色。

7、选择水龙头后，在工作区中单击要擦除的线条或填充区域（选择的区域或封闭区域）。橡皮擦形状选项 用于设置橡皮擦的外形。一、初识Flash 视图移动工具（Hand Tool）。 用于移动工作区使其便于编辑，其功能相当于移动滚动条。选择该工具后，使用鼠标在工作区中拖动页面即可调整。一、初识Flash 缩放工具（Zoom Tool）。 用于调整工作区的显示比例。选项栏：放大（Enlarge）和缩小（Reduce）。l Flash绘图基础l 元件l 帧l 逐帧动画l 渐变动画l 造型设计元件元件实例实例实例实例实例实例实例实例实例实例实例实例实例实例元件元件建立元件两种方法先画后转先画后转先建后画先建后画

8、编辑元件两种方法双击元件双击元件双击实例双击实例实例实例的编辑的编辑位置、大小、旋转、位置、大小、旋转、 颜色、透明度颜色、透明度alphal Flash绘图基础l 元件l 帧l 逐帧动画l 渐变动画l 造型设计 帧、图层和场景动画电影的组成层次可分为：动画电影（movie）场景（scene）帧（frame） 。帧 是Flash动画的基本组成元素，也是Flash作品的基本播放单位。在时间轴上，每个小方格（亦称影格）即为一帧，其内容可包括：图形、音频、素材符号、嵌入对象等。帧、图层和场景图层 是是FlashFlash为制作复杂动画作品而引入的一为制作复杂动画作品而引入的一种手段，相当于一张透明的

9、玻璃纸。种手段，相当于一张透明的玻璃纸。将不同对象放在不同层上，可以轻松制作场景复杂的动画。分为：Normal（普通）、Guide（引导）、 Guided（被引导）、Mask（遮罩）和Masked（被遮罩）。帧、图层和场景 场景复杂的Falsh动画中，几个互相联系但性质不一样的镜头。相当于影视作品中的分镜头。 动画动画就是利用人类视觉暂留的特性，快速播放一系列静态图像，从而产生动态的效果；标准的动画播放速度是：2430幅/秒。帧、图层和场景 分辨率分辨率是衡量图像细节表现能力的一个尺度；Flash中分辨率的设置决定了动画最后显示的区域大小。2.1 帧的种类关键帧 指一段动画中处于起始、结束等关

10、键位指一段动画中处于起始、结束等关键位置的帧。置的帧。静止帧 指关键帧前后的一或多个具有静止内容指关键帧前后的一或多个具有静止内容的相邻帧。在时间轴上，灰色表示已有内容的静的相邻帧。在时间轴上，灰色表示已有内容的静止帧，白色表示空静止帧。止帧，白色表示空静止帧。中间过渡帧 指过渡动画中两个关键帧之间的所指过渡动画中两个关键帧之间的所有帧，其颜色由过渡类型决定。有帧，其颜色由过渡类型决定。2.2 帧的操作 选择帧； 创建帧； 复制帧； 删除帧； 改变帧频率（播放频率）。 在默认情况下，Flash动画的播放频率是12fps（每秒12帧）。2.3 图层的操作图层操作区。图层操作区。初始界面插入按钮插

11、入按钮层状态按钮层状态按钮删除按钮删除按钮编辑后界面2.3 图层的操作Normal（普通）；（普通）；Guide（引导）；（引导）；Guided（被引导）；（被引导）；Mask（遮罩）；（遮罩）；Masked（被遮罩）；（被遮罩）；Folder（图层夹）。（图层夹）。 图层的类型。图层的类型。2.3 图层的操作Guide和和Guided 引导层用于制作被引导层中对象的运动引导层用于制作被引导层中对象的运动路线。路线。被引导层实质上是一个普通层，其中的被引导层实质上是一个普通层，其中的对象将沿着引导层指引的轨迹运动。对象将沿着引导层指引的轨迹运动。引导层中的运动路线可使用铅笔工具制引导层中的运动

12、路线可使用铅笔工具制作。作。图层的类型图层的类型引导层作用 引导与它相关联图层中对象的运动轨引导与它相关联图层中对象的运动轨迹或定位。迹或定位。 在引导层内创建网格、图形或其他对在引导层内创建网格、图形或其他对象，可在绘制图形时起到辅助作用。象，可在绘制图形时起到辅助作用。 引导层在输出的电影中不会出现。引导层在输出的电影中不会出现。引导层分类 普通和运动普通：普通：只起到辅助绘图和绘图定位的只起到辅助绘图和绘图定位的作用。作用。运动：运动：在制作动画时，可以起到设置在制作动画时，可以起到设置运动路径的向导作用。运动路径的向导作用。引导层一个向导层可以与多个普通层关联，其方法是用鼠标把一个普通

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

14、的情况下才能预览。定的情况下才能预览。图层的类型图层的类型2.3 图层的操作Folder图层夹（图层夹（Layer Folder）相当于文）相当于文件夹，用于对图层进行分类，方便件夹，用于对图层进行分类，方便管理。管理。 图层的类型图层的类型2.3 图层的操作 添加（插入）一个新图层。 调整图层顺序。 改变图层状态。编辑编辑/ /不可编辑；不可编辑；显示显示/ /隐藏；隐藏；锁定锁定/ /解锁；解锁；轮廓轮廓/ /非轮廓。非轮廓。 设置图层属性。 删除图层。5种基本操作种基本操作2.4 场景(Scene)应用 显示场景面板：Modify/Scene1. 设置新场景添加 按钮或Insert/Sc

15、ene；删除 按钮或 Ctrl+按钮（无确认框）；复制 按钮，新场景名后有一copy；改名 双击场景名；查看 单击场景名或View/Goto/。2.4 场景(Scene)应用2. 调整场景的显示放大或缩小单击工具箱View区中的 按钮；选择工具箱Options区中的 或 按钮 Alt+单击反相操作。放大指定区域 在放大或缩小方式下，在区域中拖出一个矩形，系统自动设置放大比例。移动页面使用工具箱View区中的 按钮。3. 应用标尺及网格标尺 View/Rulers；显示网格 View/Grid/Show Grid；编辑网格 View/Grid/Edit Grid。4. 设置参数设置 File/P

16、references；Undo Levels（撤销次数） 最多200次。2.4 2.4 场景场景(Scene)(Scene)应用应用3. 符号和实例符号 可以重复使用的图像、动画或按钮。符号是构成动画的基本单位，它可节省存储空间，加快动画播放速度。实例（Instance） 是符号在场景上的具体体现，即在工作区中的符号。3. 符号和实例符号的分类：图形（Graphic）、按钮（Button）和电影片段（Movie Clip）。图形可以是任意静态图形、也可以是受主时间轴（场景中的时间轴）控制的动画。按钮是指可以通过鼠标点击（或滑过、移离等）完成一定的交互功能的符号。电影片段是指可以独立于主时间轴的

17、动画片段。3. 符号和实例新建一个符号 Insert/New Symbol命令。或 Ctrl+F8创建新符号 用箭头工具选择场景中的元素Insert/Convert to Symbol输入名称选择类型单击OK。创建空符号 Insert/New Symbol输入名称选择类型单击OK 进入符号编辑模式。3. 符号和实例编辑符号 在库面板中双击需编辑符号的名称。3. 符号和实例创建实例创建符号的新实例 选择关键帧Window/Library将Library窗口中的符号拖至场景中。更改实例的颜色效果Brightness （明暗）、Tint（浓淡）、Alpha（透明度）、advanced（特殊效果）。分

18、离实例切断实例和符号之间的链接，使之成为一组独立的形状和线条。 选中实例Modify/Break Apartl Flash绘图基础l 元件l 帧l 逐帧动画l 渐变动画l 造型设计1. 动 画 的 类 型Flash生成的动画文件，其扩展名默认为.fla和.swf。前者只能在Flash环境中运行；后者可以脱离Flash环境独立运行。动画的制作方式 帧动画和造型动画在Flash中，帧动画亦称逐帧动画（Frame by Frame Animation）或影格连续动画；造型动画则称为渐变动画（Tweened Animation）。1. 动 画 的 类 型逐帧动画在连续动画的相邻两帧中，画面一般地仅有微

19、小的变化；每一帧都是关键帧；每帧画面的制作。借助借助“描图纸描图纸”按钮，在上一帧的基础上略作按钮，在上一帧的基础上略作修改。修改。使用其他绘图软件制作系列文件，文件名采用使用其他绘图软件制作系列文件，文件名采用连续的编号，如连续的编号，如a01a01、a02a02、a03a03等。等。1. 动 画 的 类 型渐变动画只需在重要处定义关键帧，Falsh会自动创建关键帧间的内容；渐变动画区分为“移动渐变”（motion tween）和“形状渐变”（shape tween）；移动渐变动画移动渐变动画 首末帧间是淡蓝色的背景；首末帧间是淡蓝色的背景；形状渐变动画形状渐变动画 首末帧间是淡绿色的背景；

20、首末帧间是淡绿色的背景；渐变有问题用虚线表示。动画制作流程 打开新影片文件并安排场景； 插入动画元件（帧、图层等）； 设定动画效果并测试动画； 使用 File/Save 命令保存扩展名为 .fla 的 Flash 动画文件； 输出影片。简单动画制作 逐帧动画 运动渐变动画 形状渐变动画1. 逐帧动画 创建一个新图层； 在起始帧位置插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容； 在编辑完成的关键帧后插入另一空白关键帧进行编辑，使之与上一帧略有不同； 重复步骤的操作，创建其他各帧，直至全部制作完毕； 保存文件。注：若每帧的画面已用其他绘图软件制作成系列图片文件，则 两步可并为一步，即使用

21、 File/Import命令导入系列图片文件。2.运动渐变动画 制作运动渐变动画的限制条件 运动对象只能是文字、符号或组合体； 运动不能发生在多个对象之间； 被操作对象只能在同一层上。2.运动渐变动画 运动渐变动画的制作过程 创建一个新图层； 在起始帧位置，插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容； 单击时间轴中的结束帧位置，插入另一个关键帧（或空白关键帧）； 在结束关键帧中编辑画面内容； 创建运动动画，并设置运动参数； 保存文件。注：运动渐变动画首尾帧间有淡蓝色背景，并有黑色箭头表示，若出现虚线表示渐变过程有问题。补间动画补间动画实例的一个样子实例的一个样子实例的另外一个样子实

22、例的另外一个样子结束帧结束帧起始帧起始帧3.形状渐变动画 制作运动渐变动画的限制条件 起始帧和结束帧中的运动对象只能是形状； 当运动对象是文字、符号或组合体时，必须先通过打散命令将它们打散。判定形状的方法 当使用鼠标单击所选择的对象时，对象会被小圆点覆盖。3.形状渐变动画 形状渐变动画的制作过程 创建一个新图层； 在起始帧位置插入一个空白关键帧； 在空白关键帧中制作和编辑画面内容； 单击时间轴中的结束帧位置，插入一个（空白）关键帧，在其中编辑制作形状； 在属性面板中单击Tween右侧文本框的下拉箭头选择Shape选项，创建形变动画； 保存文件。3.形状渐变动画 说明 若编辑的内容为非形状，必须

23、使用Modify / Braek Apart（打散对象）命令将对象转换为形状，一次不行可执行多次。 形状渐变动画首尾帧间有淡绿色背景，并有黑色箭头表示，若出现虚线表示渐变过程有问题。1. 遮罩动画遮罩层的作用。 可以透过遮罩层内的图形看到其下面图层的内容，而不可以透过遮罩层内的无图形处看其下面图层的内容。 可制作图像文字、电影文字、图像的动态切换和探照灯效果等。遮罩动画至少要有两个层（遮罩层和被遮罩层）的配合才能完成 。创建遮罩层。 右单击需设为遮罩层的普通层层名单击快捷菜单中的Mask。注意：若该层下面有一普通层，系统将自动为其与遮罩层建立关联，即将其设为被遮罩层。1. 遮罩动画建立与取消普

24、通层与遮罩层的关联。建立：方法一：用鼠标将已经存在的普通层拖曳到遮 罩层下面。方法二：在建立一个新的遮罩层的同时系统自动 与其下面的普通层建立关联。具体操 作：选中一个普通层，在图层属性对话 框中选中Mask单选项。取消：方法一：用鼠标将被遮罩的图层拖曳到遮罩层 的上面。方法二：选中被遮罩图层，在图层属性对话框 中选中Normal单选项。1. 遮罩动画操作步骤如下： 单击Main工具栏中的New按钮。 制作运动文字层，并取名为Text：将图层重命名为Text；在第1帧工作区中输入“文字变色动画”，并使用箭头工具将其调整到运动开始位置；在第30帧按F6键创建关键帧，使用箭头工具将文字调到结束位置

25、；将鼠标移到时间轴的第1帧，单击鼠标右键打开快捷菜单，选择Create Motion Tween命令，创建运动动画。1. 遮罩动画 制作背景层，并取名为BG：单击图层操作区中的Insert Layer（插入层）按钮，插入一个图层并重命名为BG；选择File / Import命令，导入背景图片文件。 调整图层顺序。在图层操作区，将BG层拖到Text层下面。 将Text层和BG层分别设为mask层和masked层：将鼠标移到图层操作区的Text层，单击鼠标右键打开快捷菜单，选择Mask命令。 单击播放工具栏中的播放按钮，观看播放效果。 保存文件 。演示演示2. 声音动画导入声音文件 选择File/

26、Import命令，打开Import对话框； 选择声音文件，单击“打开”按钮，该声音文件即加入库面板中； 选择Window/Library命令，打开库面板； 将库面板中的声音文件拖至某一帧的工作区中，该帧的时间轴上即出现一表示声音的符号。2. 声音动画编辑声音 在时间轴面板上单击有声音符号的那一帧，在Properties面板将显示有关声音的属性； 单击Edit按钮，打开编辑声音窗口； 编辑完成，单击OK按钮 。 选择Window / Library命令或按功能键F11打开库面板。 双击库面板中的“按钮”符号，进入“按钮”符号的编辑状态。 单击图层操作区的插入层按钮，插入一个新的图层Layer2。

27、 单击Layer2层的Over帧，按F6键创建关键帧，将库面板中的声音符号Ding拖入工作区。 单击Layer2层的Down帧，按F6键创建关键帧，将库面板中的声音符号Tada拖入工作区。 按快捷键Ctrl+Enter观看播放效果。 选择File / Save As，将结果保存在按钮2.fla中。 演示演示2. 声音动画3. 行为动画行为动画 通过人工操作（如鼠标单击）来控制动画的动作。行为动画是通过一种类似于脚本的简化语言（Action Script）实现对动画的控制的。3. 行为动画Flash中的行为只能添加到：Keyframe（关键帧）；Button（按钮）；Movie Clip（电影片

28、段）。与时序有关的行为与时序有关的行为（如到达某一时刻就执（如到达某一时刻就执行某一行为）行某一行为）必须添加到关键帧上。必须添加到关键帧上。与事件相关的行为与事件相关的行为（如单击鼠标就执行某（如单击鼠标就执行某一行为）一行为）必须添加到按钮上。必须添加到按钮上。3. 行为动画按钮操作事件的编码一般采用如下的格式：on（鼠标事件） 对事件的响应语句3. 行为动画 制作能旋转的对象符号Rotate。选择Insert/New Symbol命令，在对话框中输入符号名Rotate，选择符号类型为Movie Clip，单击OK按钮。在第1帧导入Button.jpg文件。单击时间轴的第30帧，按功能键F

29、6创建关键帧。创建旋转动画。单击时间轴的第1帧，在属性面板中单击Tween下拉列表框右侧的箭头选择Motion选项；然后在Tween下方新弹出的Rotate选项左、右两个文本框分别选择及输入CW(顺时针)和1。3. 行为动画 制作能旋转的对象符号Rotate。编码。选择Window/Actions命令，打开Action面板。在右边的文本输入区中输入代码如下： stop()；停止播放 i = 1； 变量i用于控制对象是否旋转单击第30帧，在文本输入区输入如下代码： gotoAndPlay(2)； 转去播放第2帧，制作对象的连续旋转3. 行为动画 单击时间轴的第1帧，将库面板中的Rotate符号拖

30、至工作区。在Action面板的文本输入区输入如下代码： i = -i；注意，是场景的第一帧，不是movie clip的第一帧 在行为面板的Navigate to other scripts下拉列表中选择Actions for No instance name assigned Rotate选项，在Action面板的文本输入区输入如下代码：on (press) if (i eq -1) gotoAndPlay(2);if (i eq 1) gotoAndPlay(1);3. 行为动画 按下快捷键Ctrl+Enter，观看播放效果。单击右上角下面的关闭按钮，关闭播放窗，返回编辑窗。 选择File/

31、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）等文件。