《次课flash基础》PPT课件.ppt

1 第四单元 常用多媒体软件使用基础 平面动画设计软件 Flash基础 公共计算机教学部 施培蓓 Pb_ 2 主要学习内容 认识 Flash 一、 Flash的工作界面 二、 Flash常用的名词 三、 基本工具使用操作 四、 动画制作 实验九： Flash形变动画制作 3 认识 Flash Flash是一款用于矢量图形创作和矢量动画 制作的专业软件。 Flash是由 Macromedia公司研发的，该公司 被 Adobe公司收购后， Flash 与 Photoshop 有了很好的集成性。 矢量图 是根据几何特性来绘制图形， 矢量可以是一个点或一条线， 它的特点是放大后图像不会失真， 和分辨率无关，文件占用空间较小， 适用于图形设计、文字设计和一些标志设计、 版式设计等 。 矢量图形与分辨率无关，可以修改描述图形形状的线条和 曲线的属性，可以对矢量图形进行移动、调整大小、重定形 状以及更改颜色的操作而 不更改其外观品质 。 位图图形跟分辨率有关，编辑位图图形可以 更改它的外观 品质 。调整位图图形的大小会使图像的边缘出现锯齿，因为 网格内的像素重新进行了分布。 6 一、 Flash的工作界面 7 舞台 控制面板 时间轴控制面板 工具栏 8 面板的折叠（右侧和下方面板的显示 /隐藏） 编辑区（或舞台）显示比例的改变 通过 【 窗口 】 菜单来实现工具栏的显示 /隐藏 9 场景 ： Flash动画中提供了多场景动画的制作过程 时间轴 ： 表示整个动画与时间之间的关系。 舞台 : 在创建 Flash 文档时放臵图形内容的矩形区域， 这些图形内容包括矢量插图、文本框、按钮、导入的位 图图形或视频剪辑，诸如此类。 舞台属性的改变 BACK 10 二、 Flash常用的名词 11 帧： 就是影像动画中最小单位的单幅影像画面，相当于电 影胶片上的每一格镜头。 一帧就是一副静止的画面， 连续的帧就形成动画，如电视图象等。 每一帧都是静止的图象，快速连续地显示帧便形成了 运动的假象。高的帧率可以得到更流畅、更逼真的动 画。每秒钟帧数 (fps) 愈多，所显示的动作就会愈 流畅。 1.帧和关键帧 解析：跳舞的小人图片序列 12 关键帧： 有关键内容的帧 ，用来定义动画变化、更改状态的帧。 Flash动画只要设臵开始帧和结束帧即可。 任何动画要表现运动或变化，至少前后要给出两个不同 的关键状态，而中间状态的变化和衔接电脑可以自动完 成， 在 Flash中，表示关键状态的帧叫做关键帧 。 有图像的关键帧（关键帧） “ ”表示 无图像的关键帧（空白关键帧） “ ”表示 1.帧和关键帧 13 空白关键帧 ： 无对象的关键帧。 空白关键帧就是舞台什么东西都没有，在 做物体出现消失的时候很有用，如果需要他在 中间什么时候消失就可以在中间想对的时间轴 上插如空白关键帧。 任何动画都要有第一帧 14 2.元件 元件 ：可反复取出使用的图形 ,按钮或一段小动画 如何创建元件 ? 方法 1:新建一个空白元件 ,然后在元件编辑状态下 穿件元件的内容。选择菜单 “ 插入 ” “新建元 件 ” 或者按键盘 ctrl+F8 也可以新建一个元件。 方法 2:将场景上的对象转换成元件。选择场景里现 有元件 ,单击鼠标右键 ,选择转换为元件。 15 3.图层 Flash中的图层作用与 Photoshop相似。 为了动画设计的需要， Flash还添加了 遮罩 层和运动引导层 。 遮罩层 决定了被遮罩层的显示情况。 运动引导层 用于设臵动画沿路径运动。 BACK 16 三、基本工具使用操作 17 常用工具 颜料桶 墨水瓶 任意变形 选择 填充变形 橡皮擦 笔触颜色 填充色 使用“鼠标”按住“矩 形工具”然后可以再下 拉工具中进行选择 18 1.线条工具 2.椭圆工具 （笔触颜色、填充色和笔触样式） 球、佛珠、糖葫芦等 3.铅笔工具 制作人脸等 （一） Flash基本图形绘制 19 4.矩形工具 （边角半径设臵） 邮票实例的制作 步骤： 新建一个 flash文件，舞台背景改为 “ 蓝色 ” ； 单击工具箱的矩形工具，在其属性面板中设置：笔触颜 色为 “ 白色 ” ，笔触高度为 15，笔触样式为 “ 圆点 ” ， 填充色为 “ 白色 ” ； 在舞台绘制矩形； 导入一张图片，调整图片； 保存。 20 5.多角星形工具 五星红旗的制作 步骤： 新建一个 flash文件； 单击工具箱的矩形工具，在其属性面板中设置：笔触颜色为 “ 无 色 ” ，笔触高度为 15，笔触样式为 “ 实线 ” ，填充色为 “ 红 色 ” ；在舞台绘制矩形； 单击工具箱的多角星形工具，在其属性面板中设置：笔触颜色为 “ 无色 ” ，笔触高度为 15，笔触样式为 “ 实线 ” ，填充色为 “ 黄色 ” ；单击 “ 选项 ” 按钮， 设置样式为 “ 星形 ” ，边数为 “ 5”；在舞台绘制五角星； 复制对象，拖动到合适位置； 保存。 21 1.选择工具 可用于抓取、选择、移动和改变图形形状 。 选择一个对象 如果选择的是一条直线、一组对象或文本，只需要单击需要的对象即可； 如果选择的是图形，需要在某条边线上双击鼠标左键； 选择多个对象 一种是使用框选； 另一种是按住 【 shift】 键进行复选； 移动 直线变曲线 （二）对象的选取 22 2.部分选取工具（选学 *） 可以选择并移动对象，也可以对图形进行变形等处理 步骤： （ 一个红心的制作 ） 使用椭圆工具绘制一个正圆，笔触颜色为 “ 无色 ” ，填充色为 “ 红色 ” ； 按住 【 ctrl】 键，用鼠标进行拖动，复制出另一个正圆，拖动到合适位 置； 选择部分选取工具，单击以选中图形； 单击图形底部的路径点，向下方拖动，拖出一个尖状，作为心的底部； 选中图形中部路径点，按 【 delete】 将其删除。 23 3.套索工具 24 文本工具 设臵文本字体、大小、颜色、样式、对齐方式 等； 将文本转换为矢量图形，对其进行渐变色填充、 绘制边框路径等操作； 滤镜（投影、渐变发光等） （三） Flash文本编辑 案例一：制作动画的文字 25 步骤： a) 导入文件图片，利用任意变形工具来改变图片的大小； b) 选择文本工具，在 【 属性 】 面板中设臵文本属性：字体为黑体，字体大小 为 35，文本颜色为红色； c) 在舞台中输入 “ 美好的时光 ” 几个字； d) 在 【 时间轴 】 面板中 单击右键插入关键帧 ，一共插入 5个关键帧； e) 选择第 1帧，把舞台中的第 1个字保留，其余文本都删除掉，这样致保留第 一个字 “ 美 ” ； f) 选择第 2帧，把舞台中的前 2个字保留，其余文本都删除掉，这样致保留第 一个字 “ 美好 ” ； g) 选择第 3帧，把舞台中的前 3个字保留，其余文本都删除掉，这样致保留第 一个字 “ 美好的 ” ； h) 选择第 4帧，把舞台中的前 4个字保留，其余文本都删除掉，这样致保留第 一个字 “ 美好的时 ” ； i) 第 5帧保留所有文本； j) 【 控制 】 菜单中选择测试影片命令（ CTRL+Enter）来预览动画效果； k) 可以放慢播放速度， 【 修改 】 菜单中选择文档命令，在打开的 【 文档属性 】 对话框中，更改 【 帧频 】 为 1. l) CTRL+Enter再次预览动画； BACK 26 四、动画制作 27 根据动画实现方式的不同，可以将动 画分为 逐帧动画 和 补间动画 。补间动画 有形状补间和运动补间两种制作方法。 28 （一）逐帧动画 案例二：跳街舞的小人 在时间帧上逐帧绘制帧内容称为 逐帧动画 ，由于是一 帧一帧的画，所以逐帧动画具有非常大的灵活性，几 乎可以表现任何想表现的内容。 由于逐帧动画的帧序列内容不一样，不仅增加制作负 担而且最终输出的文件量也很大，但它的 优势也很明 显 ：因为它相似与电影播放模式，很适合于表演很细 腻的动画，如 3D效果、人物或动物急剧转身等等效果。 29 步骤： a) 新建 flash文件； b) 导入第一张图片； c) 在 第 2帧、第 3帧、第 4帧、第 5帧 等 插入空白关键帧 （ 【 F7】 键），分别 导入图片 ； d) 【 控制 】 菜单中选择测试影片命令（ CTRL+Enter）来 预览动画效果； e) 保存。 类似案例：机器人走路、行走的马 30 （学生操作 -太阳落山）步骤： 新建 flash文件； a) 利用铅笔工具绘制出小山，颜料桶工具填充成绿色；用 椭圆工具绘制出太阳，笔触色为无色，填充色为红色； b) 在第 2帧插入关键帧（按 【 F6】 键），选择太阳，移动 太阳的位臵； c) 使用同样的方法。分别编辑第 3帧、第 4帧、第 5帧等 ； d) 【 控制 】 菜单中选择测试影片命令（ CTRL+Enter）来 预览动画效果； e) 保存。 课后完成 31 补间动画 是在 flash动画中应用最多的一种动 画模式，只需要绘制出关键帧，就能自动生成 中间的补间过程。 1.形状补间动画 常用于表现图形对象形状之间的自然过渡。 形状补间动画的 第 1帧和最后一帧中的图形可以 不具备任何关联关系 ，其动画的变形过程也不 需要制作者进行控制。 （二）补间动画 案例三：由椭圆变五角星 案例四：文字间的转换 32 案例 3：由椭圆变五角星（ 形状和颜色都转换 ） 步骤： a) 新建 flash文件，背景颜色为 “ 黄色 ” ； b) 用椭圆工具绘制出椭圆，笔触颜色为无色，填充色为 “ 绿色 ” ； c) 在第 40帧插入 空白关键帧 ，用多角星形工具绘制出五角星，笔触 颜色为无色，填充色为 “ 红色 ” ； d) 选择图层 1中的所有帧（单击图层 1即可），在 【 属性 】 面板中的 【 补间 】 下拉列表中选择 【 形状 】 选项； e) 动画制作完毕，按 CTRL+Enter预览动画效果； f) 保存。 33 案例 4：文字间的转换 步骤： a) 新建 flash文件，改变文档的背景颜色； b) 单击工具箱中的 【 文本工具 】 按钮，在 【 属性 】 面板中设臵：文本类型为 “ 静 态文本 ” ，文本颜色为 “ 黑色 ” ，字体为 “ 黑体 ” ，字体大小为 96； c) 使用 【 文本工具 】 在舞台中输入文字 “ 欢 ” ， 按 【 F7】 键分别在时间轴的第 10、 20、 30帧插入空白关键帧 ； d) 使用 【 文本工具 】 ，分别在第 10帧的舞台中输入文字 “ 迎 ” ，在第 20帧的舞台 中输入文字 “ 光 ” ，在第 30帧的舞台中输入文字 “ 临 ” ； e) 依次选择每个关键帧中的文本，按 【 Ctrl+B】 把文本分离成可编辑的网格状； （也就是把文本变成图形）； f) 依次选择每个关键帧中的字，在工具箱中的 【 填充颜色 】 调色板中设臵不同的 渐变色； g) 选择图层 1中的所有帧（单击图层 1即可）， 在 【 属性 】 面板中的 【 补间 】 下拉 列表中选择 【 形状 】 选项； h) 动画制作完毕，按 CTRL+Enter预览动画效果； 类似案例：文字和图形一起变化 34 2.运动补间动画 常用于表现同一图形对象的移动、放大、缩 小以及旋转等变化。 运动补间动画的 最后一帧中 的图形状态与第 1帧中的图形 密切相关 ，即通过 对最初图形的属性进行编辑来产生动画效果。 运动的对象必须是 元件 ， 一般给 元件 的实例添 加运动补间的动画效果 。 （二）补间动画 案例五：文字缩放 案例六：图片的旋转 35 案例 5：文字缩放 步骤： a) 新建 flash文件，改变文档的背景颜色为 “ 黑色 ” ； b) 单击工具箱中的 【 文本工具 】 按钮，在 【 属性 】 面板中设臵文本属性：字体大小 为 40，文本颜色为 “ 白色 ” ； c) 在舞台中输入 ； d) 单击工具箱中的 【 选择工具 】 按钮，选中舞台中的文本； e) 选择 【 修改 】 菜单中的 【 转换为元件 】 菜单项 （作用是把舞台中的文本转换为元 件）； f) 选择 【 窗口 】 菜单中的 【 对齐 】 菜单项，打开 flash的 【 对齐 】 面板，把转换好 的元件对齐到舞台的一定位臵；单击 【 相对于舞台 】 按钮，选择对齐中的 一种 对齐方式； g) 在 【 时间轴 】 面板的第 20帧处按 【 F6】 键插入关键帧； h) 选中第 20帧所对应的舞台中的元件，选择 【 窗口 】 菜单中的 【 变形 】 菜单项，把 图形元件的高度缩小，宽度不变； i) 在图层 1的两个关键帧之间单击鼠标右键，在弹出的快捷菜单中选择 【 创建补间 动画 】 选项； j) 按 CTRL+Enter预览动画效果； 36 学生操作题：图片的由大变小 步骤： a) 新建 flash文件，导入 1张图片； b) 单击工具箱中的 【 选择工具 】 按钮，选中舞台中的图片； c) 选择 【 修改 】 菜单中的 【 转换为元件 】 菜单项 （作用是把舞台中 的文本转换为元件）； d) 在 【 时间轴 】 面板的第 20帧处按 【 F6】 键插入关键帧； e) 选中第 20帧所对应的舞台中的元件，单击工具箱中的 【 任意变形 工具 】 对图片进行缩放； f) 在图层 1的两个关键帧之间单击鼠标右键，在弹出的快捷菜单中 选择 【 创建补间动画 】 选项； g) 按 CTRL+Enter预览动画效果。 37 学生操作题：跳动的心 用运动补间动画来实现 38 案例 6：图片的旋转 步骤： a) 新建 flash文件，导入 1张图片； b) 单击工具箱中的 【 选择工具 】 按钮，选中舞台中的图片； c) 选择 【 修改 】 菜单中的 【 转换为元件 】 菜单项 （作用是把舞台中 的文本转换为元件）； d) 在 【 时间轴 】 面板的第 20帧、第 40帧处按 【 F6】 键插入关键帧； e) 选中第 20帧所对应的舞台中的元件，单击工具箱中的 【 任意变形 工具 】 对图片进行旋转； f) 选中第 40帧所对应的舞台中的元件，单击工具箱中的 【 任意变形 工具 】 对图片进行旋转； g) 创建补间动画； h) 按 CTRL+Enter预览动画效果。 BACK 39 元件和实例 任何一个元件都可以在舞台或其它元件里多次 调用，每次调用就相当于创建了一个该元件的实 例。由于一个元件可以创建多个实例，每个实例 可以有不同的属性，效果如图所示。这样就可以 大幅减小动画的体积，便于网络中浏览和传播。 40 元件和实例 flash元件有三种 ： 影片剪辑可以独立于主时间轴播放的动 画剪辑，可以加入动作代码。 图形依赖主时间轴播放的动画剪辑，不 可以加入动作代码。 按钮有 “ 常规 ” 、 “ 弹起 ” 、 “ 按下 ” 和 “ 点击 ” 四帧的特殊影片剪辑，可以加入动 作代码。 41 元件介绍结束 42 实验九： Flash形变动画制作 1. Flash基本图形绘制 邮票的制作 2. 逐帧动画 跳街舞的小人 3. 形状补间动画 由椭圆变五角星、文字间 的转换 4. 运动补间动画 文字缩放、跳动的心