Web信息系统设计基础第3章动画设计软件Flash.ppt

第三章 Flash CS3入门及制作实例 内容提要 p3.1 Flash CS3的工作环境简介 p3.2 基本绘图工具 p3.3 基本动画制作 p3.4 动画制作实例 3.1 Flash CS3的工作环境简介 菜单栏 时间轴 舞台 工具箱 属性面板 浮动面板 时间轴 时间轴：用于组织和控制文档内容在一定时间内播放的图层 数和帧数 舞台 工作区（舞台的后台 ） 常用面板 p “属性”面板：舞台的下方 p “对齐”面板：“窗口”|“对齐” p “颜色”面板：“窗口”|“颜色” p “样本”面板：颜色库面板 p “信息”面板：在编辑操作的过程中为用户提供一些相关的信息 。 p “场景”面板：显示了当前动画的场景数量和播放的先后顺序 p “变形”面板：对选定对象执行缩放、旋转、倾斜和创建副本的 操作 p “动作”面板：方便使用Flash的脚本编程语言ActionScript而专门 提供的操作界面 p “组件”面板：动作集合 3.2 基本绘图工具（工具箱） p选择工具 p部分选取工具 p直线工具 p套索工具 p钢笔工具 p矩形工具 p铅笔工具 p刷子工具 p任意变形工具 p渐变变形工具 p墨水瓶工具与 颜料桶工具 p滴管工具 p橡皮擦工具 p文本工具 3.3 基本动画制作 基本动 画类型 特点 逐帧动 画 对每帧画进行控制保存每一帧的数据 形状补 间动画 保存帧之间不同的数据在一个关键帧 中绘制一个形状， 然后在另一个关键帧 中更改该形状或绘制另一个形状 动作补 间动画 一个对象在两个关键帧 分别定义不同的属性并在两个关 键帧 之间建立运动渐变 关系 遮罩动 画 遮罩层的操作(水波、万花筒、百页窗、 放大镜、望远镜 ) 引导路 径动画 自定义运动路径 3.3.1 逐帧动画方法与实例 创建逐帧动画的几种方法： p 1用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐 帧动画。 p 2绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧帧的画出帧内容。 p 3文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。 p 4指令逐帧动画 在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 p 5导入序列图像 可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish 、swift 3D等）产生的动画序列。 3.3.1 逐帧动画方法与实例 p 例1：奔驰的汽车 p 步骤1：新建一个大小为550*400的动画文件，在第1帧处按F6插 入关键桢。 p 步骤2：选择“文件|导入|导入到舞台”，将小汽车的图片导入到舞 台上 p 步骤3：单击第2帧，插入关键桢(F6) ，选中舞台上的小汽车并水 平平移一段距离。 p 步骤4：单击第3帧，插入关键桢(F6) ，选中舞台上的小汽车继续 水平平移一段距离。 p 步骤5：按照3和4的步骤重复几次直至小骑车平移到最右边。 p 步骤6：同时按下Ctrl+回车键，即可观看最后的动画效果。 3.3.1 逐帧动画方法与实例 p例2：奔驰的骏马-（导入连续图片 ） p步骤1：新建一个影片文档，在“属性”面板上设置文件 大小为460290像素，“背景色”为白色。 如下图所示。 3.3.1 逐帧动画方法与实例 p步骤2：创建背景图层。将当前图层重命 名为“背景”，选择第一帧，选择菜单命令“ 文件|导入|导入到舞台”，将背景图片导 入舞台中，在第8帧处按F5键插入普通帧 ，使帧内容延续到第8帧。 p步骤3：导入素材到库。选择菜单命令“ 文件|导入|导入到库”，在弹出的对话框 中找到素材所在的文件夹，按Ctrl+A，把 素材全部选中，再点击右下角的“打开”按 钮，这样所有的素材都导入到库中。如左 图所示。 3.3.1 逐帧动画方法与实例 p步骤4：将马的图片添加到舞台上。插入一个新的图层并选中第 1帧，单击库里名为“马1”的图形元件，按住鼠标左键拖动到舞台上 ，然后释放鼠标，这样“马1”图形就拖到舞台上了。选中第2帧，按 F7键插入7个空白关键帧，依次在各个空白关键帧上，分别从库里 拖出“马2”、“马3”、“马4”、“马5”、“马6”、“马7”、“马8”到舞台上 ，时间轴上所有空白关键帧都变成关键帧了。下图为导入的图片序 列。 3.3.1 逐帧动画方法与实例 p步骤5：调整对象位置。单击“时间轴”面板下方的“编辑多个帧” 按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择“绘制 全部”命令。最后执行“编辑”菜单下的“全选”命令，此时时间轴和 场景效果。此时时间轴和场景效果如下图所示。 p步骤6：测试存盘 。 3.3.2 形状补间动画实例 p例：变形文字 p步骤1：新建一个文档。在“属性”面板中设置影片的大 小为500400像素，背景色为白色。 p步骤2：选中“工具栏”中的“文本工具”，在舞台上单击 并输入大写字母“A”，选中字母“A”，在文本“属性”面板 中设置字体为“黑体”、字号“96”、“粗体”、颜色为“红色 ”（#FF0000）。 p步骤3：在第10、20、30帧处分别按F6键建立关键帧， 用“文本工具”将第10帧的文字改为“B”、颜色改为“绿色 ”（#00FF00），将第20帧的文字改为“C”、颜色改为“蓝 色”（#0000FF），将第30帧的文字改为“D”、颜色改为“ 黄色”（#FFFF00）。 3.3.2 形状补间动画实例 p步骤4：分别选择各关键帧的文字，选择菜单命令“修 改|分离”，将各关键帧上的文字打散。 p步骤5：创建形状补间动画。分别选择第1、10、20帧 ，将其“属性”面板中的“补间”设为“形状”。设置后时间 轴如图所示。 p步骤6： Ctrl+Enter快捷键 预览动画 3.3.3 动作补间动画方法与实例 p两种方式： p1) 先创建好两个帧的状态，然后在两个关键帧 之间建立动作补间关系。 p2) 先创建好起点关键帧，然后给此帧赋予动作 补间模式，再去创建终点关键帧，两帧之间就 建立了动作补间关系。 3.3.3 动作补间动画方法与实例 p动作补间动画的属性面板 p“缓动” 选项: -1到-100 :动画运动速度从慢到快，朝运动结束的方向加速补间。 1到100:动画运动的速度从快到慢，朝运动结束的方向减慢补间。 默认 :补间帧之间的变化速率是不变的 3.3.3 动作补间动画方法与实例 p动作补间动画的属性面板 p“旋转”选项: p无:禁止元件旋转 p自动:使元件在需要最小动作的方向上旋转对象一 次 p顺时针或逆时针+N:使元件在运动时顺时针或逆 时针旋转相应的圈数 3.3.3 动作补间动画方法与实例 p 例：跳动的弹球，且落地时还有弹性的效果。 p 步骤1：新建一个文档。在“属性”面板中设置影片的宽为300像素 ，高为300像素，背景色为白色。 p 步骤2：绘制图形。 p 选择菜单命令“文件”|“导入”|“导入到库”，选择弹球图片后，将弹 球导入到库。 p 在绘制时，最好是选择菜单命令“视图”|“网格”|“显示网格”， 在舞台上显示网格。 p 步骤3：选择菜单命令“插入”|“新建元件”，新建图形元件名称填 为弹球并将库中的弹球位图拖动到舞台上。 p 步骤4：回到场景编辑界面，打开“库”面板，将图形元件“弹球” 从库中拖到舞台上。 p 步骤5：创建动画。 注意 3.3.3 动作补间动画方法与实例 p （1）在第20帧按F6键插入关键帧，按向下的方向键将 图形放到场偏下的位置，模拟弹球着地的样子。为了模 拟弹球着地时被压缩的样子，应该在随后的几帧里将图 形压缩再恢复。在第25帧处按F6键插入关键帧，将图形 进行压缩，即上下端点距离缩短，左右距离拉长，但图 形的着地点不应该变化，所以压缩前必须记住最下端的 位置。压缩完后，将图形下移到刚才记下的位置上。 p （2）单击第20帧，选择菜单命令“编辑”|“时间轴”|“复 制帧”，复制这一帧，再单击第30帧，选择菜单命令“编 辑”|“时间轴”|“粘贴帧”，把第20帧的内容粘贴过来。在 这一帧上，弹球将恢复原形，准备跳起。 p （3）按照第（2）步的方法，将第1帧的内容复制到第 50帧。这一弹球将完成一个循环。 3.3.3 动作补间动画方法与实例 p （4）现在为每一帧的运动加上渐变。由于重力作用， 图形下落的时候加速，上升的时候减速，所以在第1帧 的属性中将“补间”设置为“动画”，将“缓动”值改为-60 。如下图： 3.3.3 动作补间动画方法与实例 p （5）在第20帧至第25帧之间右击，在弹出的快捷菜单 中选择“创建补间动画”命令。在第25帧至第30帧之间右 击，在弹出的快捷菜单中选择“创建补间动画”命令。在 第30帧的属性中将“补间”设置为“动画”，将“缓动”值改 为60。创建后的时间轴如下图： p步骤5：测试动画。按Ctrl+Enter快捷键测试动画。 3.3.4 遮罩动画方法与实例 p 1.遮罩和遮罩的创建 p 1）遮罩及其作用 遮罩动画是Flash中的一个很重要的动画类型，很多效 果丰富的动画都是通过遮罩动画来完成的。在Flash的 图层中有一个遮罩图层类型，为了得到特殊的显示效果 ，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层 下方的对象可以通过该“视窗”显示出来，而“视窗”之外 的对象将不会显示。 在Flash动画中，“遮罩”主要有2种用途，一个作用是用 在整个场景或一个特定区域，使场景外的对象或特定区 域外的对象不可见，另一个作用是用来遮罩住某一元件 的一部分，从而实现一些特殊的效果。 3.3.4 遮罩动画方法与实例 p 2）创建遮罩的方法 （1）创建遮罩 （2）构成遮罩和被遮罩层的元素 （3）遮罩中可以使用的动画形式 p 3）遮罩层的基本原理： 能够透过该图层中的对象看到“被遮罩层”中的对象及其 属性（包括它们的变形效果），但是遮罩层中的对象中 的许多属性如渐变色、透明度、颜色和线条样式等却是 被忽略的。比如，我们不能通过遮罩层的渐变色来实现 被遮罩层的渐变色变化。 3.3.4 遮罩动画方法与实例 要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层 。 可以用“Actions”动作语句建立遮罩，但这种情况下只能 有一个“被遮罩层”，同时，不能设置_Alpha属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在gif动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线 ，无法编辑，可以按下遮罩层时间轴面板的显示图层轮 廓按钮，使之变成，使遮罩层只显示边框形状，在这种 情况下，你还可以拖动边框调整遮罩图形的外形和位置 。 在被遮罩层中不能放置动态文本。 技巧 3.3.4 遮罩动画方法与实例 p例：扫描文字 p步骤1：新建一个Flash文档。 p步骤2：按Ctrl+F8快捷键插入一个“图形”元件 ，并命名为“文字”。选中“工具栏”中的“文本工具 ”在舞台上单击，输入文字“HELLO,FLASH!”， 然后在下面的“属性”面板中设置字体为“Arial Black”、字号为“45”、颜色任意。文字元件如图 。 3.3.4 遮罩动画方法与实例 p步骤3：按Ctrl+F8快捷键插入一个“图形”元件，并命 名为“彩条”。将工具箱中的填充颜色设置为彩色。 选择工具箱中的“矩形工具”，画出如图3-67所示彩条。注 意，彩条的宽度应长于文字的宽度。 3.3.4 遮罩动画方法与实例 p步骤4：单击文档窗口右上方的“场景”按钮，回到主 场景中。从“库”面板中拖动图形元件“彩条”到舞台上适 当的位置。 p步骤5：右击当前图层，在弹出的快捷菜单中选择“插 入图层”命令，在当前图层的上方插入一个新的图层“图 层2”。从“库”面板中拖动图形元件“文字”到舞台上 。 3.3.4 遮罩动画方法与实例 p步骤6：在“图层2”的第30帧处按F5键，插入普通帧 。在“图层1”的第30帧处按F6键，插入关键帧。 p步骤7：在“图层1”的第1帧至第30帧之间右击鼠标， 在弹出的菜单中选择“创建补间动画”命令。选择“图层 1”的第15帧，用工具箱中的选择工具选中彩条，拖动向 向右平移，使第一个字母与矩形的左边线对齐。 p步骤8：右击“图层2”，在弹出的快捷菜单中选择“遮 罩层”命令，将“图层2”图层设置成遮罩层，这时“图层 1”自动成了被遮罩层。 p步骤9：本例制作完成，按Ctrl+Enter快捷键预览动 画。 3.3.5 引导路径动画方法与实例 p1)创建引导层和被引导层 方法 ： 3.3.5 引导路径动画方法与实例 p 2)引导层和被引导层中的对象 引导层是用来指示元件运行路径的，所以“引导层”中的 内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具 或画笔工具等绘制出的线段。 而“被引导层”中的对象是跟着引导线走的，可以使用影 片剪辑、图形元件、按钮、文字等，但不能使用形状。 由于引导线是一种运动轨迹，不难想象，“被引导”层中 最常用的动画形式是动作补间动画，当播放动画时，一 个或数个元件将沿着运动路径移动。 方法 ： 3.3.5 引导路径动画方法与实例 p3)向被引导层中添加元件 “引导动画”最基本的操作就是使一个运动动画“附着”在 “引导线”上。所以操作时特别得注意“引导线”的两端， 被引导的对象起始、终点的2个“中心点”一定要对准“引 导线”的2个端头，如下图所示： 方法 ： 3.3.5 引导路径动画方法与实例 p 1)“被引导层”中的对象在被引导运动时，还可作更细致 的设置，比如运动方向，在“属性”面板上，选中“调整 到路径”复选框，对象的基线就会调整到运动路径。而 如果选中“对齐”复选框，元件的注册点就会与运动路径 对齐。 p 2)引导层中的内容在播放时是看不见的，利用这一特点 ，可以单独定义一个不含“被引导层”的“引导层”，该引 导层中可以放置一些文字说明、元件位置参考等。 p 3)在做引导路径功，拖动对象时，对象的中心会自动吸 附到动画时，按下工具箱中的“对齐对象”按钮 ，可以 使“对象附着于引导线”的操作更容易成路径端点上。 p 4)过于陡峭的引导线可能使引导动画失败，而平滑圆润 的线段有利于引导动画成功制作。 技巧 ： 3.3.5 引导路径动画方法与实例 p 5)向被引导层中放入元件时，在动画开始和结束的关键 帧上，一定要让元件的注册点对准线段的开始和结束的 端点，否则无法引导，如果元件为不规则形，可以点击 工具箱中的“任意变形工具”，调整注册点。 p 6)如果想解除引导，可以把被引导层拖离“引导层”，或 在图层区的引导层上单击右键，在弹出的菜单上选择“ 属性”，在对话框中选择“一般”，作为正常图层类型。 p 7)如果想让对象作圆周运动，可以在“引导层”画一根圆 形线条，再用“橡皮擦工具”擦去一小段，使圆形线段出 现2个端点，再把对象的起始、终点分别对准端点即可 。 p 8)引导线允许重叠，比如螺旋状引导线，但在重叠处的 线段必需保持圆润，让Flash能辨认出线段走向，否则 会使引导失败。 技巧 ： 3.3.5 引导路径动画方法与实例 p例：小球沿着弯曲道路运动 p 1新建一个文档。在“属性”面板中设 置影片的大小为500400像素，背景色 为黑色。 p 2选择菜单命令“视图”|“网格”|“显示网格”，在舞台上显示网格线。 p 3绘制曲线。选中“工具箱”中的“钢笔工具”，在“颜色”设置里将笔触颜 色设为红色（#FF0000）。首先在场景中单击 ，出现一个控制点，然 后在它的右斜上方单击并拖动鼠标，直到第1个控制点和第2 个控制点间 出现圆滑的曲线满意松开鼠标。再在第2个控制点的右斜下方单击并拖动 鼠标，这时在第2个控制点和第3个控制点间出现圆滑的曲线。最后在第3 个控制点的右斜上方单击并拖动鼠标，这时在第3个控制点和第4个控制 点间出现圆滑的曲线。绘制成的曲线如右下图所示。 p 如果绘制的曲线不满意，可以用选中选择工具 指向需要修整的地方，鼠标指针变成 时拖 动鼠标即可调整曲线的弯曲度 3.3.5 引导路径动画方法与实例 p 4右击当前图层名，在弹出的快捷菜单中选择“插入图层”命令， 插入一个新的图层。单击“工具箱”中的“椭圆工具”，设置笔触颜色 为无、填充颜色为蓝色（#0000FF）。按住Shift键并在场景上拖动 鼠标，绘制一个大小适中的圆。 p 5添加引导层。在“图层2”图层的名称上右击，在弹出的快捷菜单 中选择“添加引导层”命令。此时“时间轴”上新增加了一个引导层。 p 6选中“图层1”图层中的曲线，按Ctrl+C快捷键，然后选中“引导 层”图层，按Ctrl+V快捷键在引导层上粘贴曲线图形。拖动“引导层 ”图层上的曲线到“图层1”图层中曲线的正上方，使两条曲线间隔大 约刚才绘制的圆的直径的路离。 p 7用“工具箱”中的“橡皮擦工具”，将“引导层”图层中的曲线的最 高的地方擦去一小块、最低的地方也擦去一小块。此时曲线被分成 3部分。 3.3.5 引导路径动画方法与实例 p 8拖动“图层2”图层中的圆，使圆的注册点对准“引导 层”图层中第1段曲线的起始位置。移动“图层1”图层中 的曲线，使之与圆外切，擦除该曲线的起始点到圆的切 点之间的一段曲线 。用“选择工具”对“图层1”图层中的 曲线整形，使之与“引导层”图层的曲线平行，擦除“引 导层”图层中曲线末尾多余的部分。效果如图： 3.3.5 引导路径动画方法与实例 p 9单击“图层1”图层中的第30帧，按F5键插入普通帧（使第1帧的 内容延续到这一帧）。 p 10单击“引导层”图层中的第30帧，按F5键插入普通帧。 p 11单击“图层2”图层中的第10帧，按F6键插入一个关键帧。拖动 圆，使圆的注册点对准“引导层”图层的第1 段曲线的结束点。 p 12分别单击“图层2”图层的第11、20、21、30帧，按F6键插入关 键帧。拖动圆，使圆的注册点分别对准“引导层”图层的第2段曲线 的起始点、结束点，第3段曲线的起始点、结束点。 p 13创建动作补间动画。分别在“图层2”图层的第1帧至第10帧之间 、第11帧至第20帧这间、第21帧至第30帧之间右击，在弹出快捷菜 单中选择“创建补间动画”命令。 p 14本例制作完成，按Ctrl+Enter快捷键预览动画。 3.4 动画制作实例 p摇曳的烛光 p溪流效果 3.4 动画制作实例一-摇曳的烛光 p步骤1：新建一个文档。背景色 黑色，其他默认。 p步骤2：选择“插入”|“新建元件” ，将元件命名为“光圈”，类型为“ 影片剪辑”。 p步骤3：在工具栏中，笔触色禁 止，填充色放射状，在颜色面板 中，将类型设置为放射状，三个 色标：左FFFF00 Alpha100%， 中FFFF6E Alpha77%，右 FFFFCC Alpha0%，如图。 用椭圆工具画个圆，全居中： 3.4 动画制作实例一-摇曳的烛光 p步骤4：第15、第30帧加上关键帧，点中第15帧， 再点修改变形缩放和旋转，缩放150。如左图： p步骤5：在图层1上点一下，这样整个图层都被选中了 (时间轴为黑色了)，再在属性面板里“补间“，选择“形 状“。释放下鼠标，时间帧面板的背景色变为淡绿色， 在起始帧和结束帧之间有一个长长的实线箭头，表示形 状补间动画创建好了。 3.4 动画制作实例一-摇曳的烛光 p步骤6：选择“插入”|“新建元件”，将元件命 名为“蜡烛”，类型为“影片剪辑”。选择“文件 ”|“导入”|“导入到库”，导入本实例中使用的 蜡烛烛身，如图所示。将库中的元件蜡烛位 图拖入到场景中。在第30帧处插入帧，延长 到30帧，并将图层上锁。 p步骤7：在图层1上新建图层，画火苗。笔触色禁止， 填充色线性：左FFFF99 Alpha100%，右FFFF1B Alpha30%，画椭圆，并用部分选择工具整调形状使该 椭圆的形状像火苗。 3.4 动画制作实例一-摇曳的烛光 p步骤8：在图层2第30帧插入关键帧，在第1帧到第30 帧之间创建形状补间动画，如下图所示。 p步骤9：在图层2第8帧 插入关键帧，选中火焰， 点击右键选择“分离”。用 部分选择工具调整形状， 第14帧插入关键帧，继续 调整。以此类推，第 20 、 26帧都插入关键帧做调整 ，可以只做火苗伸长和压 缩，做成上下窜动，也可 以再加上左右摆动。 3.4 动画制作实例一-摇曳的烛光 p步骤10：在图层2上新建图层，点第1帧，从库中把 元件光圈拖入摆放在适当的位置并调整好大小，在属性 面板里“颜色”里Alpha设置为50%，如图3-80所示。 p步骤11：回到 场景中，从库里 把蜡烛元件拖到 场景中，摆放好 ， Ctrl+Enter 即 可观看到蜡烛火 焰摇曳的效果。 3.4 动画制作实例二-溪流效果 p步骤1：新建一个