网页制作技术教程-第五章 Flash 动画设计

网页制作技术教程

第5章

Flash 动画设计

第五章 Flash 动画设计

网页制作技术教程

本章教学目的① ② ③ ④ ⑤ 掌握Flash 的基本操作 掌握Flash 基础绘图 熟练掌握元件和实例创建和编辑方法 熟练掌握简单动画的创建方法 掌握交互动画的创建方法

第五章 Flash动画设计

网页制作技术教程

目 录

第一讲 Flash 概述与基础绘图 第二讲 Flash简单动画制作 第三讲 Flash交互动画制作

第五章 Flash动画设计

网页制作技术教程

第一讲 Flash 概述与基础绘图[教学内容] 5.1.1 Flash 8简介 5.1.2 开始页 5.1.3 Flash 8的工作窗口 5.2.1 基础绘图 5.2.2 时间轴 5.2.3 元件与库 5.2.4 创建文本与导入素材 [教学重点和难点] 线条与图形的绘制与属性设置、时间轴 的操作、元件的创建与实例化、文本 的创建、导入素材第五章 Flash动画设计

网页制作技术教程

5.1 Flash概述5.1.1 Flash 8简介 5.1.2 开始页 5.1.3 Flash 8的工作窗口

第五章 Flash动画设计

网页制作技术教程

5.1.1 Flash 8简介Flash 8是由美国Macromedia公司于2005年推出的一 款交互式矢量动画制作软件。可使用它来创建包含图形、动 画、声音、视频、演示文稿和包含丰富媒体的交互式矢量动 画，这种文件占用存储空间非常小，便于网上传播。 Flash可以制作出一种扩展名为.SWf的动画文件，它可以 插入到网页中，也可以单独成为网页。Flash与 Dreamweaver、Fireworks等软件配合使用，可以快速制作 精彩的网页、创建出有特色的网站。Flash采用“流”的播 放形式，可以边下载边观看。这些都是它迅速广泛流行的重 要原因。Flash制作的动画在安装了Flash Player插件的浏 览器中才可以播放。Flash可以在使用很小内存的情况下， 实现高质量的矢量图形和交互式动画的制作。第五章 Flash动画设计

网页制作技术教程

5.1.2 开始页

列出了Flash 最近打开过 的项目，单 击其中任何 一个项目名 称，即可快 速调出相应 的Flash文档。

列出了一些Flash 8提供的模板类型， 单击其中一个模 板类型的图标按 钮或名称，即可 弹出“从模板新 建”对话框

列出了可以创建的项目，单 击“Flash文档”项目，即可 新建一个普通的Flash文档， 进入Flash 8的工作环境。

第五章 Flash动画设计

网页制作技术教程

5.1.3 Flash 8的工作窗口

标题栏 主工具栏 文档选项卡 工具箱

菜单栏 面板 时间轴

舞台工作区

“库”面板

“动作”面板 “属性”面 板

第五章 Flash动画设计

网页制作技术教程

5.1.3 Flash 8的工作窗口1.主工具栏主工具栏有15个按钮，如图所示。主工具栏中各按钮的作用如表所示。 将鼠标指针移到各按钮之上，会显示该按钮的中文名称。

保存 新建

剪切

粘贴

重做

平滑

旋转 与倾 斜

对齐

打开

打印

复制

撤消

对齐对象

伸直

缩放

2.工具箱工具箱提供了用于图形绘制和图形编辑的各种工具。将鼠标指针移到各 按钮之上，

会显示该按钮的中文名称。其中各工具按钮的名称与作用如下表所 示。第五章 Flash动画设计

网页制作技术教程

5.1.3 Flash 8的工作窗口

第五章 Flash动画设计

网页制作技术教程

5.1.3 Flash 8的工作窗口3.舞台工作区在创建或编辑一段Flash影片时离不开舞台，像导演指挥演员演戏一样， 要给演员一个排练演出的场所，这在Flash中被称为舞台。新建一个Flash文档 时，窗口中有一个白色的矩形区域，就是舞台工作区，只有在舞台工作区内的

对象才能够作为影片输出和打印。舞台工作区是绘制图形和输入文字、编辑图 形、文字和图像等对象的矩形区域，也是创建动画的区域。图形、文字、图像 画面和动画等对象的展示也可以在舞台工作区中进行。

第五章 Flash动画设计

网页制作技术教程

【任务5-1-1】新建文档与舞台属性的设置

【操作要求】 在D:\root\unit5文件夹中新建文件夹，名称为 y5-01。新建一个帧频为20fps,影片大小为400像 素×300像素，背景色为黄色(#FFFF00)的影片 源文件，以y5-01.fla为文件名保存到 D:\root\unit5\y5-01\文件夹下。

第五章 Flash动画设计

网页制作技术教程

5.2 Flash的基本操作5.2.1 5.2.2 5.2.3 5.2.4 5.2.5 5.2.6 5.2.7 基础绘图 时间轴 元件与库 创建文本与导入素材 动作补间动画 形状补间动画 路径动画

第五章 Flash动画设计

网页制作技术教程

5.2.1 基础绘图Flash除了具备优秀的动画处理功能外，它还具备出 色的矢量绘图功能。1.绘制线条绘制线条可以使用“线条工具”按钮、“钢笔工具”按钮、“铅笔工具” 按钮等。

第五章 Flash动画设计

网页制作技术教程

【任务5-1-2】绘制线条

【操作要求】 在D:\root\unit5\y5-01\文件夹下的y5-01.fla文 件的舞台工作区中绘制一条直线，一条曲线。直线 要求水平，长度为175像素、笔触颜色为黑色(# 000000)、笔触样式为“极细”;曲线为上弦弧线， 线粗为2个像素。

第五章 Flash动画设计

网页制作技术教程

5.2.1 基础绘图2.绘制图形通常在使用椭圆、矩形和多角星形工具绘图前应先设置笔触属性。 使用铅笔和线条工具绘制出的是一个对象，而用椭圆、矩形和多角星形工具 绘制出的有填充的图形由两个对象组成：一个是轮廓线，另一个是填充。这 两个对象是独立的，可以分离，分别操作。例如画完一个多边形图形后，单 击工具箱中的“选择工具”按钮，再将鼠标指针移到椭圆内，单击选中填充 后拖动鼠标，即可把填充移开，如图所示。

在对象绘制模式下绘制的图形，自动组合成一个整体， 不会出现上述现象，当选中对象时，对象的四周出现一 个蓝色的框。在工具箱的选项栏中单击“对象绘制”按钮 如右图所示，即可进入对象绘制模式。 对象绘制模式第五章 Flash动画设计

网页制作技术教程

【任务5-1-3】绘制基本图形

【操作要求】

在D:\root\unit5\y5-01\文件夹下y5-01.fla文件 的舞台工作区中添加如图5-2-9所示图形，并以原文 件名进行保存。

第五章 Flash动画设计

网页制作技术教程

5.2.2 时间轴时间轴又称时间线，用来贯穿和组织每个影片内容， 而使之成为一个完整流畅的动画。与电影中的胶片一样， Flash影片播放的基本单位叫做帧。一帧就是一幅画面， 一帧帧画面按一定的速率播放，就形成动画。影片中的图 层就像很多层叠在一起包含图像的透明玻璃一样，每个图 层都包含一个或多个显示在舞台中的不同图像，而一部复 杂的Flash影片可以包含各种功能不同的图层。时间轴的 具体工作就是将这些层和层中的帧进行有机的组合，进而 控制影片的正常播放。 帧频在Flash动画中用来衡量动画播放的速度，通常 以每秒播放的帧数为单位(fps,帧/秒)。Flash8的默认 帧率是12帧/秒。第五章 Flash动画设计

网页制作技术教程

【任务5-2-1】图层操作

【操作要求】 在D:\root\unit5文件夹中新建文件夹，名称为 y5-02。新建一个帧频为20fps,影片大小为400像 素×300像素，背景色为白色(#FFFFFF)的影片 源文件，在时间轴中添加3个图层，从上到下分别命 名为“按钮”、“小球”、“背景”,并将“背景” 层进行锁定，“小球”层进行隐藏，以y5-02.fla为 文件名保存到D:\root\unit5\y5-02\文件夹下。第五章 Flash动画设计

本文来源：https://www.bwwdw.com/article/48ni.html