flash课件制作入门

Flash 课件制作入门 Flash 是 Macromedia 公司的三大网页设计利器之一，主要用于网页动画的制作。 由于它采用了流控制技术、矢量技术、插件技术、关键帧和渐变技术等一系列新的技 术，使得制作出来的动画具有短小精悍、声情并茂以及交互性强等特点，所以一经推 出，就受到了广大动画制作者特别是网页设计者的青睐，被广泛用于网页动画的设计、 多媒体软件的开发以及广告、电子贺卡、电子名片、Flash MTV、卡通片等的制作，成 为当今最流行的软件之一。 从以前的 Flash 1、Flash 2、Flash 3、 Flash 4，到现在流行的 Flash 5，以及 最热门的 Flash MX，Flash 系列软件的功能得到了不断的完善和加强，Flash 在网页制 作中的应用也越来越广泛。特别是新近推出的 Flash MX 2004 更是允许设计人员和开发 人员在影片内容中将视频、文本、音频和图形等进行有机的整合，从而使得 Flash 动画在 交互营销、动态演示、电子教学以及应用程序用户界面等领域中获得了更为广泛的应用。 由于 Flash 动画具有体积小、放大后不失真、交互能力强、制作简便、可以边下载 边运行、可以输出多种格式的电影文件等诸多优点，使得它在多媒体课件制作中的应 用也越来越广泛。Flash 课件与以前我们经常用到的 PowerPoint、Authorware、FrontPage 课件相比具有画面流畅，文件较小，在网络上传输速度快等特点，因此 Flash 尤其适合网 络课件的制作。网站设计人员使用 Flash 可以创建出导航控件、动画 Logo、具有同步声音 效果的动画，完整的 Flash 网页，甚至完全的 Flash 站点。更为重要的是，Flash 可以将很 多特殊符号嵌入到文件之中，从而使理工科网络课程制作中的遇到的很多困难都迎刃而解。 在理工科课程中，多含有大量的公式，其中包括数学符号、物理量等特殊符号，这些特殊 符号在 Windows 操作系统大多都没有对应的字体，一般需要课件制作人员自行安装字体来 解决，但又不能直接将这些特殊符号嵌入到网页中，否则在没有相应字体的客户端浏览器 中将不能正确显示，所以必须借助其它的辅助工具将这些特殊符号转化为 GIF、JPG 等格 式的图片，然后再发布于网页中，但排版时又需要用 CSS 定位，还要结合 JavaScript，VBScript 等技术来制作，可见操作起来是多么的麻烦和困难。采用 Flash 制作， 则可以轻松克服上述缺点。用 Flash 制作的文件，在浏览器中看到的效果和制作时的效果 将完全相同，所以在 Flash 制作的课件中，可以灵活运用各种字体，调整版面结构，使界 面变得更加美观。 本教程将以 Flash 5 为基础，通过一个完整 Flash 课件的制作，引导您一步一步地进入 令人神往的 Flash 闪烁新世界。 第一节 FLASH 5 简介 一、FLASH 5 的用户界面及常用面板 图 1 Flash 5 用户界面 Flash 5 用户界面的主要组成： Stage(舞台 ):：进行绘画和编辑动画的场所。 Tools(工具箱) ：由许多创作动画所需的实用工具组成。 Timeline(时间轴)：可以有效的组织和控制组成动画的各种元素,使这些元素随着时间的推移 而产生各种形式的动感变化，从而最终成为一部生动精彩的动画。 Panels(浮动面板) Flash 5 有的浮动面板有种之多。Flash 5 的这些浮动面板几乎已经囊 括了工具菜单的所有功能，绝大部分的操作都可以通过这些浮动面板来轻松实现。熟悉了 这些浮动面板的使用方法，就可以在动画创作过程中轻车熟路，游刃有余。 1、信息面板（INFO） 信息面板显示编辑中各种对象的信息，如图 2 所示，如类型、大小、位置（坐标）和 颜色，以及鼠标的当前坐标等等。当我们改变对象的大小、颜色、位置等属性时，信息面 板会即时反映出来。信息面 板非常实用的一个功能就是， 如果用鼠标拖动不能精确确 定对象的大小，或不能精确 定位对象在编辑区中的位置 时，可以直接在大小输入框 或坐标输入框中输入精确到 0.1 的像素值，来精确确定对象 的大小或位置。输入完毕后 回车即可使输入生效。 图 2 信息面板 信息面板 调色板面板 字符面板 实体面板 舞台 工具 箱 显示比例 时间轴 窗口 在通常情况下，Flash 5 把几个面板组合在一起，构成一个组合面板标签式面板。 这样使用更方便，不至于占去太多的屏幕空间。当然也可以把它们拆分开来，用鼠标按住 标签往外拖即可变为独立的面板，要组合时又可以把它拖回去。图 2 所示的信息面板里就 组合了 Info 面板、Transform 面板、Stroke 面板和 Fill 面板。 2、填充面板（Fill） 填充面板提供了 4 种填充方式：Solid（纯色填充） 、Linear Gradient（线性渐变填充） 、 Radial Gradient（辐射状渐变填充）和 Bitmap（位图填充） 。填充面板如图 3 所示。 图 3 填充面板 Solid（纯色填充） 选择纯色（单色）填充方式，只能从调色板或屏幕上的任意地方选取一种颜色来填充， 如图 4 所示。 图 4 纯色（单色）填充方式 Linear Gradient（线性渐变填充） 选择线性渐变填充方式，可以使用线性渐变色填充。在线性渐变填充面板中，可以左 右移动颜色滑块，调整滑块代表的颜色在渐变色中的位置。单击其中的某个滑块（即选中 该滑块） ，然后单击调色板色块，弹出调色板，从中选取一种颜色，可以改变当前滑块代表 的颜色。设置好渐变色后，从工具箱中选择油漆桶工具，即可用设定的渐变色填充图案。 如果对自己设置的渐变色感觉满意，需要保存起来供以后使用，可以单击保存按钮，把它 保存到颜色样本面板（Color Swatches）中。以后打开颜色样本面板，即可在该面板的下部 选用所保存的渐变色。线性渐变填充方式及效果如图 5 所示。 图 5 线性渐变填充方式 Radial Gradient（辐射状渐变填充） 选择辐射状渐变填充方式，可以得到辐射状渐变效果。设置方法与线性渐变填充相似。 辐射状渐变填充方式及效果如图 6 所示。 图 6 辐射状渐变填充方式 Bitmap（位图填充） 选择位图填充方式，可 以使用导入的位图填充图案， 得到各种各样的填充效果。 位图填充方式及效果如图 7 所示。 图 7 位图填充方式 3、描绘面板（Stroke） 描绘面板用来设置 Flash 绘画工具（如直线工具、钢笔工具、椭圆工具、矩形工具、铅笔 工具等）的笔画样式、粗细和颜色。Flash 5 的描绘面板与 Flash 4 不同的是，调节笔画粗 细的方式改用滑杆，且所见即所得，使用更加方便。描绘面板如图 8 所示。 图 8 描绘面板 单击笔画样式选择菜单的下三角按钮，弹出笔画样式选择菜单。从中选择不同的样式 （Flash 5 设置了 7 种笔画样式） ，然后选择不同的颜色，通过调整滑杆调整笔画的粗细， 即可画出不同的描绘效果。描绘效果如图 9 所示。 图 9 描绘效果 4、转换面板（Transform） 转换面板右下角有两个按钮：应用按钮和复原按钮。单击应用按钮，首先拷贝一份源对象， 然后可对拷贝 的对象应用转 换处理。单击 复原按钮，可 以撤消最近一 次的转换操作。 图 10 所示的是 使用应用按钮 得到的转换效果。 图 10 变形效果 5、字符面板（Character ） 使用字符面板（Character Panel） ，可以检查和设置字体类型、字体大小、颜色、字距、行 距和基线移位，还可以设置文本链接，如图 11 所示。 图 11 字符面板 6、帧面板与场景面板（Frame 帧的设置如图 4 所示。 图 4 第 1 个关键帧的设置 第 2 个关键帧的 Action 代码如下： /:text.scroll = /:text.scroll-1; 帧的设置如图 5 所示。 图 5 第 2 个关键帧的设置 即执行到第 2 格时，会提示场景上的 Text Field（变量名为 Text）将目前所显示的行数 往上移一行。 第 3 个关键帧的 Action 代码如下： gotoAndPlay (2); 帧的设置如图 6 所示。 图 6 第 3 个关键帧的设置 即与第 2 帧实现循环。 (5) 复制影片片段组件 “up”，并命名为“down” 。更改第 2 个关键帧的 Action 代码如 下： Set Variable:“/:text.scroll“=/:text.scroll+1。 即执行到第 2 格时，会告知场景上的 Text Field（变量名为 Text）将目前所显示的行数 往下移一行。 (6) 安排影片场景。 本例中有一块区域表示 Text Field 大小范围，上下分别用横线划分出相应的区域。 放置 Text Field：放置一个 Text Field 在横线区域的里面，设定变量名称为 Text，其 他设置如图 7 所示。 图 7 Text Field 设置 将影片片段“up”导入场景并定义实体名称为 Up；将影片片段“down”导入场景 并定义实体名称为 Down。影片片段“up”和影片片段“ down”的设置如图 8 所示。导入 场景过程如图 9 所示。 图 8 影片片段“up”和“down”的 Instance 参数 导入按钮。导入两个按钮“Animated button”，一个箭头朝上，一个箭头朝下。可以 用 Modify-Transform-Flip Vertical 命令使箭头朝下。加两条线是为了美观，并没有实际 意义，可有可无，实际效果如图 10 所示。 图 10 导入按钮 设定箭头朝上按钮的 Actions 代码如下： on (press) tellTarget (“/up“) gotoAndPlay (2); on (release) tellTarget (“/up“) gotoAndPlay (1); 表示按下此按钮时，会告知“up”播放，放开按钮时，会跳回第 1 格并停止。 设顶箭头朝下按钮的 Actions 代码如下所示： on (press) tellTarget (“/donw“) gotoAndPlay (2); on (release) tellTarget (“/donw“) gotoAndPlay (1); 即表示按下此按钮时，会告知“text down”播放，放开时，会跳回第 1 格并停止。 设定场景 Actions 代码如下： loadVariablesNum (“text.txt“, 0); 即表示把变量载入到电影的场景里。 (7) 选择菜单 Control-Test Movie，测试影片。 四、从外部文件中读取变量实例 图 1 页面布局 具体制作步骤如下： (1) 首先，我们要新建一个动画，用文字工具做几个 Textfield，然后分别在“文本框 1”、 “文本框 2” 和“文本框 3”中选择它们的“Text Options”，在“variable”项上填 Name、Date 和 Content，并在“HTML” 、 “Word wrap”、 “Selectable”选项上打勾，文本设 置如图 2 所示。 图 2 文本设置 (2) 用鼠标右键单击动画的第一帧，选择 Action，写入图 3 所示的命令。 图 3 Action 命令 (3) 在 Flash 文件同目录下新建一个名为 0.txt 的文本文件，文本内容如下： &name=Flash 网页设计实例与技巧 &date=2003/6/06 &content=你有没有想过制作一个完全的 Flash 站点呢？也许有的 朋友会说：“那更新起来岂不是很麻烦？每次对 fla 做改动都要重新 上传一遍 swf！” 其中 Name、Date 和 Content 就是刚才设置的变量名称， “=”后面的文字就是要显示的 文本。 (4) 导出影片，完成制作。 从这个简单的实例中我们可以看出，Flash5 的 Load movie/Load Variables from file 的功 能是很强大的，为网站的动态维护提供了一条无需第三方软件支持的新手段。如果运用得 适当，我们完全可以做到以前需要 ASP、CGI、Generator 等软件才能实现的功能。 第六节 元件的应用 Flash 的组件共有影夹、按钮、图片三种类型，前面我们分别对它们进行了讲解 ，现在试着组合运用它们制作动态的网站导航条按钮。 一制作思路 一共有两个按钮，分别是“菜单一“与“菜单二“；当鼠标移上按钮后字体由深蓝色 变为绿色，同时弹出下层的动态菜单；动态菜单有自己的变化，先是由窄窄的一条线 扩展成为按钮，然后按钮上的字逐渐显现；“子菜单一“完全显示后再弹出“子菜单二“ 。重点在第 (7) 点如何让多种组件协同作战。 二制作步骤 1演戏之前先搭好台子，通过 Modify(修改)/Movie(电影)命令，将场景的背景 色改为蓝色。 2现在开始安排演员即制作组件。这个动画需要哪些组件呢？既然是动态导航栏 上的按钮，那么“菜单一“与“菜单二“两个主按钮不可或缺；鼠标移上主按钮后，弹出 两个子菜单，那么还需要两个子菜单组件，由于子菜单组件不需要再引发出动作，所 以不需要制作成按钮，图片(Graphic)属性就行了；由于鼠标移上主按钮时播放的是一 段动画，因此两个主按钮的鼠标移上动作(Over)还需要两个影夹组件。最后还需要一 个组件，作为“互动学校“首页的背景。 制作： (1)先制作背景组件(Symbol 1)，新建图片组件(Graphic)，然后在工作区上部 输入“互动学校栏目构成“字样。字体下面画一无轮廓矩形，颜色稍浅一点。如图一： 图一 (2)制作“菜单一“按钮(Symbol 2)。新建按钮组件(Button)，在 Up(一般状态) 帧里面画一圆角矩形，Coner 设为 10 就行了，并在 Stroke (描边)面板上将轮廓宽 度设为 2 ，轮廓色为深蓝色，填充色为白色，画出的矩形如图二： 图二 新建一层(Layer 2)，然后输入深蓝色字体“菜单一“，字体大小要合适，结果如图 三： 图三 提示：输入字体不需要另建一层，新建一层的目的在于对字体进行大小调整时以 免干扰层一的内容。 由于鼠标移上的动画还没做好，现在我们暂时将“菜单一“按钮放在一边，等动画 做好后再放入按钮的 Over(鼠标移上)帧内。 (3)制作“菜单二“按钮(Symbol 3)，由于它跟“菜单一“按钮只有字体的不同，其 他都是一样的，所以我们直接进入“菜单一“按钮，按住 Shift 键同时选中两层，Edit (编辑)/Copy(拷贝)，然后进入“菜单二“按钮，Edit(编辑)/Paste(粘贴)，又一个“菜 单一“图形出现了。选中字体工具(Text Tool)放到“菜单一“的字体旁边，会出现一个 字体输入的提示框，选中“菜单一“字样并将其改为“菜单二“。如图四： 图四 同理，由于鼠标移上的动画还没做好，现在暂时不向此按钮的 Over(鼠标移上)帧 放内容。点按 Scene 1(场景一)图标退出按钮组件的编辑。 (4)新建一个图片组件作为“子菜单一“上的按钮(Symbol 4)。制作一个圆角矩形 ，并在矩形左边添加一条深蓝色线。具体设置请见第(2)点。结果如图五： 图五 (5)新建一个图片组件用以放置“子菜单一“按钮上的字体(Symbol 5)。在制作时 ，最好先将刚才做好的按钮拉进工作区，然后再输入“子菜单一“字样并依据按钮大小 进行调整，最后再将拉进来的按钮删了，该组件就只剩下字样了。如图六： 图六 提示：为什么不把“子菜单一“上的字体直接放到第(4)步来做？这是因为在动画播 放过程中，先是按钮弹出的动画，紧接着才是字体显现的动画，它们隶属于不同的过 程，因此有必要将它们制作成分开的组件。 (6)现在来制作“子菜单二“(Symbol 6)。 由于“子菜单二“跟“子菜单一“不同，它的按钮与字体只有一个逐渐显现的效果， 它们隶属于同一个过程，因此可以集中处理。前面已经制作好“子菜单一“按钮以及上 面的字样，我们将它们直接拷贝过来，然后将按钮左边的横线删除，并在上部加入竖 线。结果如图七： 图七 (7)现在开始制作响应鼠标移入事件的按钮动画(Symbol 7)。 新建一个组件，属性设为影夹(Movie Clip)，进入工作区。 在这个动画中包含三个过程：鼠标移入“菜单一“后，“子菜单一“的按钮逐渐弹出 ；“子菜单一“弹出完毕后，“子菜单一“字样逐渐显现；“子菜单一“字样显示完毕后，“ 子菜单二“逐渐显现。 A第一层的动画(Layer 1)： 我们按照动画的先后顺序进行制作：在第一层的第一帧，将 Symbol 4 放入，弹 出动画将延续 15 帧，因此在第 15 帧插入关键帧(Keyframe)；所谓的弹出动画，只 不过是 Symbol 4 组件由窄窄的一条竖线变成一个完整的按钮的过程，因此它属于缩 放变形动画，我们只需要在第一帧将 Symbol 4 组件压缩成一条窄窄的竖线，然后创 建一个动作就行了。 在进行缩放前，我们先把“洋葱皮“视图模式打开，以便进行多帧编辑：点按时间 轴下面的图标，时间轴会变成如图八的样式： 图八 图八的时间轴上出现了两个圆圈，它们分别代表洋葱皮的起始帧与终止帧，凡是 在这个范围内的帧都可在同时间进行显示。现在我们把右边的圆圈拉到第 15 帧，时 间轴会变成如图九的样子： 图九 工作区中的内容也会有所变化，从第一帧到第十帧的内容全显示出来了。如图十 ： 图十 提示：洋葱皮模式的作用在上面说得很清楚，它主要是用来进行多帧编辑的工具 ，在进行起始帧与终止帧的元素精确定位时，它常常是必不可少的步骤。 光是洋葱皮模式还不够，我们在层面板上把此层改为“外框模式“，改变后层面板 如图十一： 图十一 工作区中的内容也变了，只剩下各帧的轮廓图，如图十二： 图十二 前面我们也说过，组件有个注册点，它是缩放与旋转操作的参照点，因此有必要 先改变 Symbol 4 的注册点再进行缩放。选中第一帧中 Symbol 4 组件，Modify(修改)/ Transform(变形)/Edit Center(中心编辑点)，然后将注册点拉到与第十五帧左边起始 位置的重合点上。同时清除从第 2 帧到第 15 帧的内容，因为它们的注册点不符合。 完成后再重新在第 15 帧插入关键帧，此时所有帧的注册点都一致了。前面我们做的 从第 1 帧到第 15 帧的过渡，只是用来进行原理解说，没有其他用处。如图十三： 图十三 提示：将第一帧的 Symbol 4 组件进行缩窄是不是非要改变注册点位置？你可以 试着不改变，将它缩窄后再用鼠标将其拖到第 15 帧左边界上，这种效果也是一样的 。 提示：如果没有“洋葱皮效果“与外框模式的支持，你能如此轻易地确定注册点位 置吗？ 现在将第一帧的 Symbol 4 尽量向左缩窄(Modify/Transform/Scale)，如图十四 ： 图十四 缩窄后，从第一帧向第十五帧创建动作，鼠标右键并在弹出菜单中选 Creat Moti on Tweening(创建移动渐变)，如图十五： 图十五 B第二层的动画(Layer 2)： “子菜单一“的按钮图形显示完毕，现在该进行“字菜单一“字样(Symbol 5)逐渐显 示的动画了。因为第一层按钮图形的显示动画在第十五帧停止，因此第二层字样显示 的动画则应该从第十五帧开始。 选中第二层(Layer 2)的第十五帧，插入关键帧(Keyframe)，并将 Symbol 5 组件 拖入工作区，注意其位置，要跟层一的按钮图形相得益章。如图十六： 图十六 想让你的字体动画延续多少帧？这里我们让其延续 13 帧，因此在第 28 帧处插 入关键帧，如图十七： 图十七 现在回到第二层(Layer 2)的第 15 帧，并通过 Effect (效果)面板将其 Alpha ( 透明度)值改为 24% ，并创建从第 15 帧到 28 帧的动画，完成后时间轴如图十八： 图十八 C第三层的动画(Layer 3)： “子菜单一“的动画全部完成，现在该播放“子菜单二“(Symbol 6)逐渐显现的动画 了。由于“子菜单一“全部动画延续了 28 帧，因此第三层的“子菜单二“动画从第 28 帧开始进行。 新建一层(Layer 3)并选中第 28 帧，插入关键帧(Keyframe)，并将 Symbol 6 拖 入工作区。请注意它的位置，应该与前面两层的组件相适应。如图十九： 图十九 提示：应该在第一层将按钮背景也显示出来才能显示出按钮的外框来，因此应该 将第一层的动画延续到第 28 帧。 我们要让“子菜单二“的动画延时 12 帧即 1 秒钟，因此在第 40 帧处插入关键帧 ，然后回到第 28 帧，通过 Effect (效果)面板将其 Alpha (透明度)值改为 10% ， 如图二十： 图二十 创建从第 28 帧到第 40 帧的动画，完成后时间轴如图二十一： 图二十一 D后期调整： “子菜单二“显示完毕后并不是立即回到第一帧重新播放第一帧内容，而是有 5 帧 的延迟展示，因此我们在第三层(Layer 3)的第 45 帧插入过渡帧(Frame)，完成后时 间轴如图二十二： 图二十二 在整个动画中，Layer 1 与 Layer 2 的内容始终可见，因此回到第二层与第一层 ，并分别为它们插入第 45 帧的过渡帧，完成后时间轴如图二十三： 图二十三 “菜单一“的动画全部完成。 (8)“菜单二“的动画制作：(Symbol 7 Copy) 明白了第 (7) 点的制作原理就可以很轻松地制作此类动画了，我们在此偷个懒， 将菜单一的动画拷贝过来作为菜单二的动画，因此本组件的名字为 Symbol 7 Copy ， 表示是 Symbol 7 的拷贝。如图二十四： 图二十四 (9)现在把“菜单一“的动画拖到按钮中去： 进入“菜单一“按钮(Symbol 2)，在第一层(Layer 1)与第二层(Layer 2)的 Over(