冀教版信息技术五上第二课《动画制作工具flash》课件

FlashFlash动画制作动画制作 uuFlash Flash 概述、工作界面、基本术语概述、工作界面、基本术语 uu基本操作：基本操作：绘制轮廓线、填充、画 圆、画方框、擦除图形、移动图形 uu动画制作：动画制作：逐帧动画、过渡动画、 引导层动画、遮罩动画、Alpha通道 、声音的导入、发布与输出 1 uuFlash Flash 概述概述 uu工作界面工作界面 uu基本术语基本术语 2 Flash Flash 概述概述 Flash Flash 是美国是美国MacromediaMacromedia公司推出的一款公司推出的一款 非常优秀的基于矢量图形的交互式动画设非常优秀的基于矢量图形的交互式动画设 计软件。计软件。 它可以将音乐、声效、动画以及富有新意它可以将音乐、声效、动画以及富有新意 的界面等多媒体元素融合在一起，制作出的界面等多媒体元素融合在一起，制作出 高品质的动画效果。高品质的动画效果。 它可应用在网页设计、它可应用在网页设计、MTVMTV、电子贺卡、广电子贺卡、广 告制作、游戏制作以及课件制作。告制作、游戏制作以及课件制作。 3 动画文件格式 FLA (可编辑源动画) SWF (网页成品动画) AVI (视频) GIF (网页成品动画) 动画形式 帧动画、矢量动画 可实现交互功能、附加同步声音 教学进程 4 Flash 8 Flash 8 工作界面工作界面 5 FlashFlash基本术语基本术语 uu 时间轴时间轴 uu 帧帧 uu 图层图层 uu 场景场景 uu 元件、实例元件、实例 uu 对象对象 6 时间轴时间轴 时间轴位于主工具栏的下面，是用来进行时间轴位于主工具栏的下面，是用来进行 动画创作和编辑的主要工具，分为两大部动画创作和编辑的主要工具，分为两大部 分：层控制区和时间轴分：层控制区和时间轴控制区控制区，如图所示，如图所示 。 7 图示图示 帧（帧（FrameFrame） 构成Flash动画的基本组成元素,几种类型: 8 图层图层(Layer )(Layer ) 图层就像透明的胶片，每个图层上所绘图层就像透明的胶片，每个图层上所绘 制的对象按制的对象按一定的顺序重叠在一起，形一定的顺序重叠在一起，形成成复复 杂的动画。每个杂的动画。每个每个图层都有各自的时间每个图层都有各自的时间 轴轴。在。在Flash Flash 中图层分为普通层、遮罩层、中图层分为普通层、遮罩层、 运动引导层。运动引导层。 9 图图2 2 场景面板场景面板 场景场景（SceneScene） 场景如同场景如同拍电影的不同场所，一个影片可拍电影的不同场所，一个影片可 以有一个也可以有多个场景，每个场景以有一个也可以有多个场景，每个场景是是 FlashFlash作品中相对独立的一段动画内容作品中相对独立的一段动画内容. . 10 元件、实例元件、实例 元件元件：存放在库中可反复取出使用动画元：存放在库中可反复取出使用动画元 素素 实例实例：将元件从库中拖到舞台上就形成了：将元件从库中拖到舞台上就形成了 这个元件的一个实例这个元件的一个实例. . 一个元件可以产生多个实例，当元件更新一个元件可以产生多个实例，当元件更新 后，舞台上的所有实例全部更新，但修改后，舞台上的所有实例全部更新，但修改 实例的属性对元件没有丝毫影响。实例的属性对元件没有丝毫影响。 说明：说明：为了方便，在场景中引入的实例也简为了方便，在场景中引入的实例也简 称为元件。称为元件。 图示图示 11 图 示 12 对象（对象（ObjectObject） FalshFalsh中的动画都是由对象组成的，对象可以分中的动画都是由对象组成的，对象可以分 为为: : 形状形状 通过绘图工具绘制产生的如园、矩形等形状；对象通过绘图工具绘制产生的如园、矩形等形状；对象 被选中，以网点所覆盖，对象不是整体，各部分的形状、被选中，以网点所覆盖，对象不是整体，各部分的形状、 大小都可以改变。大小都可以改变。 组组 将形状通过将形状通过“修改修改| |组合组合”命令转换成为组对象，对命令转换成为组对象，对 象是个整体，只能改变组对象的大小、角度等操作。组对象是个整体，只能改变组对象的大小、角度等操作。组对 象通过象通过“修改修改| |分离分离”命令打散转变为形状对象。命令打散转变为形状对象。 元件元件 通过通过“插入插入”菜单的菜单的“| |新建元件新建元件”或或“转换为元件转换为元件 ”命令创建的元件，在场景中引用，其实质也是组。命令创建的元件，在场景中引用，其实质也是组。 文本文本 通过工具箱的通过工具箱的“文本工具文本工具”产生。产生。 13 uu基本操作：基本操作： 绘制轮廓线、填充、画圆、 画方框、擦除图形、移动图形 14 界面特点与绘制工具 (1) 双击 Flash软件图标 (2) 选择“文件 / 新建”菜单 (此步不可省略，否则窗口尺寸有误) 菜单栏 工具栏 动画层控制 帧控制 动画编辑窗口 辅助工具 属性工具栏 (辅助工具) 教学进程 15 设置动画尺寸及其他 (1) 单击底部“属性”工具条 操作步骤 (2) 单击“尺寸”按钮 (3) 输入“尺寸”数值 (5) 输入“帧频” fps (取值1225) (4) 单击“背景颜色”框 确定动画窗口背景色 (6) 确定标尺单位 (像素、英寸、厘米、毫米等) (7) 单击“设为默认值”按钮，保存当前设置 (8) 单击“确定”按钮 (9) 单击“属性”标题栏，关闭 教学进程 16 动画的画法 (1) 选择铅笔工具 (2) 选择铅笔颜色 (3) 选择轮廓模式 (4) 描绘轮廓 直线化直线化 平滑平滑 墨水瓶墨水瓶 绘制轮廓线 (1) 选择颜料桶工具 (2) 选择填充模式 (渐变、单色均可) (3) 选择封闭模式 (4) 单击图形内部 填充颜色 渐变渐变 渐变渐变 单色单色 填充颜色 教学进程 17 画图形 (2) 选择圆内单色或渐变色 (3) 画圆 (鼠标椭圆 /Shift+鼠标正圆) (1) 选择画圆工具 (2) 选择单色或渐变色 (3) 单击“圆角” 按钮，设置圆角 画空心图形 在调色板中选择“没有” 画圆 (4) 画方框 (鼠标任意 /Shift+鼠标正方) (1) 选画方框工具 画方框 教学进程 18 处理图形 (1) 选择橡皮工具 (3) 选择橡皮尺寸 (2) 选择擦除模式 (4) 擦除图形 (2) 移动图形 擦除图形 移动图形 (1) 选择箭头工具 边框和填充颜色是不同的图形，若想整体移动， 须用鼠标左键划定编辑区域，然后整体移动。 说明 教学进程 19 北京北京 BEIJINGBEIJING 输入文字 (1) 选择文本工具 (2) 鼠标左键划出文本框 (3) 输入文本内容 (4) 光标条覆盖文本 (6) 鼠标对准文本输入框，移动文字 (7) 单击非文本输入区结束 北京 BEIJING (5) 单击“属性” 工具栏，设置字体、字号、颜色、对齐方式等 单击文本，可再次修改文字 教学进程 20 动画动画制作制作 1.1.逐帧动画逐帧动画 2.2.过渡动画过渡动画( (形状补间、动作补间形状补间、动作补间) ) 3.3.引导层动画引导层动画 4.4.遮罩层动画遮罩层动画 5.5.添加声音添加声音 21 逐帧逐帧动画动画 逐帧动画: 每一帧的画面都需要自己制作。逐帧动画的体积 一般比较大。 例8.10 ：显示数字计数器，在显示数字5这帧时停留时间长 些。 设计思想： (1)在时间轴第1帧输入数字1 ，其它帧插入关键帧，将数字 改变，在数字5后的帧间隔长一些； (2)“修改|文档”将帧的播放速度由默认12改为4，使显示 速度慢一些。 例：制作文字滚动的动画文字 在关键帧依次增加文字 22 过渡动画过渡动画 uu 过渡动画:可以做出位移、旋转、缩放、颜色 改变等动画效果。 u 制作方法:改变两个关键帧的位置、形状、颜 色和大小等属性来完成。也可通过几个层之间 动画的叠加来实现。 u实现过渡动画:通过“补间”来实现两个关键 帧之间的动画变化；有两种“补间”： “动作补间”：关键帧是矢量图（组、元件 ）； “动画补间”：关键帧是分离的图形。 23 例8.11 “形状补间” ，使用改变帧形状的方 法制作由圆形变为方形、三角形的动画。 例8.12 “动画补间” 利用两个图层实现两个 球碰撞的效果。 设计思想：利用元件、两个图层的时间轴实 现两球碰撞的模拟； 场景中的网格便于定位，通过“查看|网格| 显示网格”来设置。 24 引导层动画引导层动画 引导层动画: 使运动的对象沿着特定的路径运动，运动 的对象可以是实例、组合及文本块，而引导层中的路 径必须是矢量图形。 例8.13 利用引导层使对象沿指定曲线运动的动画。 设计思想： “插入|新建元件” 建立一个元件，作为运动对象； 在图层1不同帧引用元件； 添加运动层，用铅笔画一条光滑运动轨迹； 在图层1对象定位在运动曲线上，作”动作补间”。 25 遮罩层动画遮罩层动画 遮罩层动画:遮罩层的内容就好比一个洞，透过这个 洞，我们可以看到下面的层。遮罩层的对象可以 是填充的形状、文字和实例。 例8.14 制作探照灯效果的动画。 设计思想：利用遮罩层运动的圆遮罩下面的文字 ，形成探照灯的效果。 例8.16 使用图层的遮罩技术滚动显示彩色文字，文 字颜色使用一幅图片来填充。 设计思想：在图层1有运动的图片； 在图层2有所需的文字，设置为遮罩层 。 26 AlphaAlpha通道应用通道应用 Alpha通道:是指元件对象颜色的透明度，应 用在对象由近到远逐渐变淡的过程。 例8.15 通过改变文本的位置、颜色和大小 的方法制作逐渐消失的文字。 注意： 使用Alpha通道属性的对象必须是元 件或组，不能是分散的图形。 27 声音的导入与使用声音的导入与使用 声音在动画中占有相当重要的地位，它在 整个动画过程中起着画龙点睛的作用。一 个精彩的的动画，配以合适的背景音乐， 将会使作品生动起来，变得更加精彩。 添加声音过程 1. 导入声音 2. 在场景中加入使用声音 3. 声音属性设置（音效、播放） 28 1.1.导入声音导入声音 u 使用“文件”“导入” 命令; u 选择.wav或.mp3格式的文 件，将其导入到库中; 如果想获得较好的音效， 可导入22kHz、16位立体声 格式的声音文件；如果为 了提高动画文件的传输速 度，则应导入8kHz、8位单 声道格式的声音文件。 29 2.2.在场景中加入声音在场景中加入声音 库面板中将声音文件拖到关键帧上 3.声音属性设置 效果：有淡入淡出等 同步方式四种： 事件：某个动作触发；播放前必须下载完才播放;动画 停止，声音也要播完; 可能会同时听到多个声音。 开始：与事件相似；区别是要播完原来的； 不会同时听到多个声音 停止：立即停止播放当前帧的声音; 数据流：边下载边播放；动画停止，声音停止。 30 发布与输出 制作完动画之后，可以把生成的动画导出 为后缀名为.swf的动画播放文件，也可以 把它发布为影片，生成网页浏览器支持的 HTML、GIF、JPEG文件。 当动画导出为影片或者是完成HTML文档 的创建后，就可以上载给有MIME类型文 件、能识别Flash影片的浏览器，任何带 有Flash播放器（Shockwave Flash Player）的浏览器都可以播放它。 31 发布的过程为： 发布设置 选择“文件|发布设置”命令， 指定要发布的文件格式和文件名。每种图形 格式都有相应的选项，在选择了一种图形格 式发布时Flash会自动嵌入该图形的HTML代 码。 发布 设置完成后可直接单击发布按钮， 或关闭对话框后选择“文件|发布”命令。 32 制作帧动画 绘制图形 7.1.3 选择“插入/关键帧”选项，增加新的帧 (新的帧自动复制前一帧的内容) 增加关键帧 在新的帧中绘制图形 增加图层 (用于两个以上的动画合成) (1) 选择“插入/图层”选项，增加新图层 (2) 在新图层中绘制图形，增加关键帧 演播动画效果 (1) 选择“窗口/工具栏/控制栏”，打开控制栏 (2) 选择“控制/循环播放”，连续观察动画效果 停 首 倒 播 进 尾 显示网格，方便编辑 鼠标右键单击动画编辑窗口 选择“网格/显示网格” 为方便编辑，打开所有工具 (1) 选择“窗口/工具栏”菜单 (2) 分别选中： 主要栏 状态栏 控制栏 教学进程 33 制作自动动画 直线移动动画 (4) 鼠标右键单击第1帧，选择“创建动画动作” (6) 预览动画效果，图形从第1帧的位置移动到第20帧的位置 7.1.4 (1) 在第1帧中画 一个图形 (2) 鼠标右键单击某一帧，如第20帧 选择“插入关键帧” (3) 单击“ ”工具，移动图形 (5) 鼠标右键单击第20帧，选择“创建动画动作” 自动动画只用到两个关键帧 用鼠标单击第1帧和第20帧，可调整图形的初始位置和终了位置 教学进程 34 自由路径移动动画 (3) 单击铅笔工具 (10) 预览动画效果 (1) 制作直线 移动动画 (5) 画自由路径 (2) 单击 (添加引导图层)按钮 (4) 选择“平滑”效果 (6) 单击图形图层 (7) 单击“ ”工具 (8) 单击第1帧，把图形置于路径的起始位置 (9) 单击最后1帧，把图形置于路径的终了位置 教学进程 35 为动画添加声音 (2) 指定文件类型和声音文件 (3) 单击“打开”按钮 (4) 单击某个动画图层 操作步骤 (5) 单击“属性”工具栏 (6) 在“声音”框中指定声音文件 (7) 指定“同步”对象 (事件、开始、停止、数据流) (8) 预览动画