flash课件制作实例

常规教学中基础图形的动画制作 项目一：Flash 简介 目标： 1、认识 flash软件 2、了解 flash的界面构成 一、认识 Flash FLASH是 Macromedia公司推出的一种优秀的矢量动画编辑软件，FLASH8.0 是其最新的版本。利用该软件制作的动画尺 寸要比位图动画文件如 GLF动画尺寸小的多，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式 的影片或者具有完备功能的网站。通过简介的学习，大家应熟悉 FLASH动画的特点，FLASH8.0 的界面组成元素。 二、什么是 Flash Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个 内容单元称为应用程序，即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果，构建包含丰富 媒体的 Flash 应用程序。 Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一 点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位 图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。 要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定 义如何以及何时使用各个元素来创建设想中的应用程序。 在 Flash 中创作内容时，需要在 Flash 文档文件中工作。Flash 文档的文件扩展名为 .fla (FLA)。Flash 文档有四 个主要部分： 舞台是在回放过程中显示图形、视频、按钮等内容的位置。 时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高 图层中的图形显示在较低图层中的图形的上方。 库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。如上图所示 舞台 时间轴 库面板 动作面板 ActionScript 代码 Action Script 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示 一幅新图像，还可以使用 Action Script 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同 的工作方式。Flash 包括两个版本的 Action Script，可满足创作者的不同具体需要。 Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 Action Script 添加到文档的内置行为，以及 可以添加到媒体对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。 完成 Flash 文档的创作后，可以使用【文件】|【发布】命令发布它，快捷键 SHIFT+F12。这会创建文件的一个压缩 版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的 应用程序进行播放 项目二：抛物线课件 目标： 1、掌握新建影片的方法 2、学会基本形状的绘制方法 3、会使用任意变形工具 4、掌握对齐工具的使用方法 课件效果 运行课件，界面上有课件标题、坐标轴、抛物线和抛物线公式，效果如图 2-1 所示。 图 2-1 课件运行效果 操作步骤 ： 一、 新建影片文档 运行 Flash 8 ，选择【文件】 | 【新建】命令或按快捷键 Ctrl+N ，在弹出的【新建文档】窗口中，选择【新建 Flash 文档】，单击【确定】按钮新建一个影片文档。 ActionScript 代码设计窗 口 按 Ctrl+J 打开文档属性对话框，参数如图 2-2 所示，选择【文件】 | 【保存】命令将文件保存为“抛物线 .fla ”。 图 2-2 设置影片文档属性 二、绘制坐标轴 1、设置视图网格。选择【视图】 | 【网格】 | 【编辑网格】命令，在弹出的【网格】对话框中，选中【显示网格】 和【对齐网格】选项，其它参数保持不变，单击【确定】按钮，如图 3 所示。 图 3 【网格】对话框 2、绘制 x 轴。选择工具箱中的线条【线条工具】，在【属性】面板中，设置粗细为“ 2 ”，【填充色】为黑色，在 场景中画一条水平线作为 x 轴。 知识链接： 用线条工具绘制时按住 Shift 键可以画出垂直、水平和 45 度方向的直线；用椭圆工具绘制时按住 Shift 键可以画出正 圆；用铅笔工具绘制时按住 Shift 键可以轻松画出正交直线。 再用【线条工具】画一个三角形，填充色为黑色，用【箭头工具】选中三角形的边线，将其删除。选择工具箱中的 【任意变形工具】，单击【选项】里的【缩放工具】，将其缩小到合适程度。把三角形拖放到直线右边作为坐标轴的箭头， 按 Ctrl+G 键，将直线和三角形组合。 知识链接： 按住 Shift 键可以同时选中多个对象。 画一组直线作为数轴的刻度，选中刻度，用【缩放工具】 将其缩小到合适程度。选中轴和刻度，选择【窗口】 | 【对齐】命令打开【对齐面板】，如图 2-4 所示。 图 2-4 对齐面板 在【对齐面板】上单击【水平居中】按钮和【垂直居中】按钮，选中所有图形按 Ctrl+G 组合，完成效果如图 2-5 所示。 图 2-5 完成的 x 轴 知识链接： 在工具箱中我们可以利用任意变形工具直接对图形进行缩放、旋转等操作。但如果缩放、旋转要求精确的话，我们就可以 在变形面板中进行设置。 3、绘制 y 轴。选中 x 轴，选择【编辑】 | 【复制】命令或按 Ctrl+C 键，复制 x 轴，再选择【编辑】 | 【粘帖 到中心位置】命令或按 Ctrl+V 键粘帖。 知识链接： 按住 Ctrl 键，用鼠标拖动图形，可以快速复制原图形。 选择【修改】 | 【变形】 | 【逆时针旋转 90 度】命令，得到 y 轴，用【箭头工具】调整好位置，完成后效果如图 2-6 所示。 图 2-6 完成后的坐标轴 知识链接： 选择【窗口】 | 【变形】命令，选中图形，在【变形面板】中设置需要旋转的角度，按【复制并应用变形】按钮，可以精 确的复制出若干旋转角度相同的图形。 三、绘制抛物线 用【线条工具】在 y 轴的上半轴画一条水平直线，将鼠标放在直线上，当光标变成圆弧形时拖动鼠标，将直线调整成 为一条曲线，并使曲线最低点位于坐标原点。完成效果如图 2-7 所示。 图 2-7 完成的坐标 知识链接： 直线与 y 轴的交叉点，一定要是直线的中心点，绘制出的抛物线才以 y 轴为对称轴。 四、输入文字 选择【文本工具】 , 设置文本参数如图 2-8 所示，为坐标轴输入标注。 图 2-8 设置文本参数 用同样的方法输入课件标题、公式。 五、测试并保存文档 选择【控制】 | 【测试影片】命令，或按快捷键 Ctrl+Enter 测试课件。完成后，按 Ctrl+S 将课件保存。 案例总结： 这一例我们通过绘制一个简单的抛物线来掌握 Flash 8 中部分绘图工具的使用方法，熟悉对齐面板和变形面板的操 作以及辅助工具的应用。在制作课件过程中，制作方法不是一层不变的，我们可以通过不同的方法达到同样的效果，这就 要求在练习过程中不断的摸索，找出最捷径、最行之有效的办法。 项目三：荷塘月色 目标： 1、掌握导入位图的方法 2、掌握在 Flash 中位图的处理方法 3、会使用套索工具 4、掌握任意变形工具中的封套 本实例是表现中学语文课文荷塘月色的一个图形课件，这个课件的制作充分应用了 Flash 位图和矢量图的处理能 力，通过图形、图像将荷塘月色的课文意境表现了出来，利用这个课件辅助教学，不但使学生直观地感受到作者在课 文中描写的情景，而且给学生带来美的感受。如图 3-1 所示是课件运行的效果。 图 3-1 课件运行效果 制作步骤 一、创建影片和导入位图 1、新建影片文档。选择【文件】 | 【新建】命令或按快捷键 Ctrl+N ，新建一个 Flash 影片文档，设置舞台尺寸为 660 480 ，其它参数保持默认值。 2、导入位图。选择【文件】 | 【导入】命令，弹出【导入】对话框，在对话框中选择所需要的图片文件，单击【打 开】按钮，导入课件所需的荷花图像文件，如图 3-2 所示。 图 3-2 导入位图 知识链接： 在 【导入】对话框中，按下 Ctrl 键，依次单击图像文件，可同时选中要导入的多个图像文件。 导入到文档中的图像会自动分布在场景的舞台上，按 Delete 键，将场景中的图像文件全部删除，此时图像文件已经 保存在【库】中。打开【库】面板可以看到导入的位图对象，如图 3-3 所示。 图 3-3 【库】面板中的位图 知识链接： 导入的位图在【库】面板中的名称就是图像的文件名，它们的【种类】标识为【位图】，注意观察它们的图标，它们具有 独特的图标，和其他类型的对象的图标不一样。【库】面板中的这些位图对象也象图形元件一样，你可以随时将它们拖放 到场景中使用。 二、去掉位图的背景 我们导入到 Flash 中的位图往往有背景，这对课件效果有很大的影响，也不利于课件整体风格的设计，可以想象，漂 亮的图像下面有一块白色或黑色的背景将多么难看。下面我们就讨论一下在 Flash 中如何去掉图像的背景。 1、分离位图。新建“荷花 1 ”图形元件，在【库】面板中单击“荷花 1 ”图像名称，选中荷花图像，将图像拖到场 景中央，如图 3-4 所示。 图 3-4 拖放【库】面板中的位图对象 此时，我们对荷花图像无法进行修改，因为 Flash 将导入的图像作为单个的对象处理，要进行编辑修改，必须将位图 分离。 选择【修改】 | 【分离】命令，或按快捷键 Ctrl+B 将荷花位图图像分离，如图 3-5 所示。 图 3-5 分离位图 2、擦除背景。选择工具箱中的【索套工具】 ，在工具箱的下端，单击【选项】中的【魔术棒属性】按钮 ，弹出【魔术棒设置】对话框，在【阈值】中输入“ 20 ”，在【平滑】下拉菜单中选择【平滑】选项，如图 3-6 所 示。 图 3-6 【魔术棒设置】对话框 说明 ：【 阈 值】是用来定义选取范围内，相邻像素色值的接近程度，数值越高，选取的范围越宽。如果输入数值为 0 ，那么只有同所单击处像素色值完全一致的像素才会被选中 . 在有些软件如 PhotoShop 中用容差来表示。 按键盘上的 Esc 键，或单击取消对图形的选择。在工具箱的下端，选择【魔术棒】 ，单击荷花图像背景，按 Delete 键，删除选中的背景，如图 3-7 所示。 图 3-7 用【魔术棒】擦除背景 知识链接： 对于大片的相同或者相近色，用 【魔术棒】 能比较方便地去除背景。如果要去掉的背景比较复杂，可直接用【索套工具】 或者 【选项】中的【 多边形模式 】 。 继续用【魔术棒】 选中白色背景区域将其擦除。在显示图像比例的下拉菜单中放大显示比例，选择工具箱中的 【橡皮擦工具】 ，在【橡皮擦形状】下拉菜单中，选择一个较小的圆形橡皮擦，将不干净的边缘小心地擦除，完成后 如图 3-8 所示。 图 3-8 去掉背景的荷花 用同样的方法处理“荷花 2 ”位图，处理完成后如图 3-9 所示。 图 3-9 处理完成的“荷花 2 ”图形元件 三、创建其他图形元件 1、创建弧形图形元件。选择【插入】 | 【新建元件】命令，弹出【新建元件】对话框，在【新建元件】对话框中， 输入元件的【名称】为“弧形”，选择【行为】为【图形】，如图 3-10 所示。 图 3-10 【新建元件】对话框 选择工具箱中的【钢笔工具】，勾出三角形，用【箭头工具】调整出弧形。选择【窗口】 | 【混色器】命令，设置填 充色为由白色到黄绿色的线性渐变色，填充弧形。选择【填充变形工具】调整渐变色，完成后如图 3-11 所示。 图 3-11 绘制弧形 插入新图层，将两个图层分别命名为“弧形”和“阴影”，图层结构如图 3-12 所示。 图 3-12 图层结构 将弧形粘贴到【阴影】图层，并将填充色修改为黑色，完成后如图 3-13 所示。 图 3-13 完成后的“弧形”图形元件 2、创建诗词图形元件。新建“诗词”图形元件，选择【文本工具】，在【属性】面板中，设置文本属性如图 3-14 所 示。 图 3-14 设置文本属性 在编辑场景中，输入文本，按 Ctrl+B 将文字打散。选择【窗口】 | 【混色器】命令，设置填充色为由白色到淡蓝色 的线性渐变色，填充文字，完成后如图 3-15 所示。 图 3-15 制作完成的“诗词”图形元件 3、创建标题图形元件。新建“标题”图形元件，选择【文本工具】，在【属性】面板中，设置文本属性如图 3-16 所 示。 图 3-16 设置文本属性 在编辑场景中，输入“荷塘月色”，按 Ctrl+B 将文字打散。选中所有，选择工具箱中的【任意变形工具】，单击 【选项】下的【封套】按钮 ，文字周围出现若干控制点，将光标放在控制点上，拖动控制点调整文字形状，如图 3- 17 所示。 图 3-17 用【封套工具】调整文字形状 选择【颜料桶工具】，在【混色器】面板中将填充色设置为由淡蓝色到深蓝色的线性渐变色，填充文字。单击工具箱 中的【墨水瓶工具】，将【笔触颜色】设置为黄色，为文字描边，完成后如图 3-18 所示。 图 3-18 完成后的标题 4、创建背景图形元件。新建“背景”图形元件，选择【矩形工具】，在【混色器】面板中将【填充】色设置为由淡绿 色到深绿色的线性渐变色，将【笔触颜色】设置为无色。在场景中画一个矩形，选择【填充变形工具】调整渐变色，调整 后如图 3-19 所示。 图 3-19 完成的背景图形元件 四、布局场景 1、插入图层。从元件编辑场景返回到“场景 1 ”，单击【插入图层】按钮，再插入四个图层，将图层分别命名为 “背景”、“标题”、“荷花”、“弧形”和“诗词”。图层结构如图 3-20 所示。 图 3-20 图层结构 2、布局场景。从【库】中将创建好的图形元件分别拖放到相应的图层上，调整好位置和大小。完成布局后的画面如图 3-21 所示。 图 3-21 完成布局后的画面 项目四：汉字的演变 目标： 1、掌握创建元件的方法 2、掌握创建影片剪辑 MC的方法 3、掌握创建简单的形变动画的方法 4、掌握遮罩层的基本运用 5、掌握创建按钮的方法 6、会创建简单脚本 课件效果 运行课件，首先播放的是一个片头：山、太阳和月亮慢慢变幻，成为我们现在使用的文字，然后出现本课件用几种不同字 体书写的标题汉字的演变。单击界面右下角的动态按钮播放，课件以“上”、“下”、“好”和“车”四个字为例， 介绍了汉字从象形文字演变到行书的过程。四个汉字分别以动态的过程演示，再配以文字说明，使学生对演字的演变过程 有了很清楚的认识。如图 4-1是课件运行的一个画面。 图 4-1 课件运行效果 操作步骤： 一、创建课件元件 1、新建影片文档。按 Ctrl+N新建影片文档，设置背景色为“#663300”，其它参数保持默认值。 2、创建“象形文字”图形元件。新建“象形文字”图形元件，用绘图工具在舞台中绘制山、太阳和月亮，效果如图 4-2所示图形。 图 4-2 绘制的“象形文字”图形元件 3、创建“甲骨文”图形元件。新建“甲骨文”图形元件，用【铅笔工具】绘制出“鱼”、“羊”、“车”的文字的 甲骨文，再用【文本工具】输入文本，完成效果如图 4-3所示 图 4-3 完成的“甲骨文”图形元件 4、创建“标题”MC 元件。新建“标题”MC 元件，将“象形文字”图形元件中的图形复制并粘帖到该 MC元件的编辑环境 中，选择【修改】|【时间轴】|【分散到图层】命令，将三个图形分别放置一个图层，并重新将图层命名为“山”、“日” 、“月”，删除【图层 1】。 知识链接： 元件可以反复使用，在制作动画中使用元件可以大大减小文件的体积和加快动画的播放速度。图库就象仓库一样存放了编 辑动画的各种元件，这些元件可以随时调出使用。在制作动画时将元件从图库中拖放到舞台工作区（即：场景）中，就生 成了该元件的一个实例。元件只是一种标志，真正在舞台工作区中表演的是元件的实例，元件仍在图库中。 图形元件是可以反复使用的图形，它可以是只有一帧的静止图片，也可以制作成由多个帧组成的对象，在图形元件中不能 添加交互行为和声音控制。 影片剪辑元件用来制作独立于当前场景时间轴的动画，它是主动画的一个组成部分，当播放主动画时，影片剪辑元件也在 循环播放。 按钮元件用于创建动画的交互控制按扭，它包含 4个不同状态的帧即：“弹起” （按钮的正常状态） 、 “指针经过” （将鼠标 移到按钮上） 、 “按下” （用鼠标按下按钮） 、 “点击” （响应按钮事件的区域范围，只有当鼠标进入到这一区域时，按钮才开 始响应鼠标的动作） 。 在【山】图层的第 25帧插入关键帧，将该帧上的山图形删除，用【文本工具】输入“山”字，按 Ctrl+B将字体分离 为形状，创建第 1帧到第 25帧的形状补间动画。 按 Enter键预览图形的变化情况，如果形状变化杂乱无章，单击第 1帧，选择【修改】|【形状】|【添加形状提示】 命令，或按 Ctrl+Shift+H为山图形添加提示帧，将形状提示拖放到要标记的几个点上，如图 4-4所示。 图 4-4 为山添加提示帧 单击第 25帧将形状提示移动与第 1帧相对应的点。再按 Enter键播放动画，观察形状补间过程，反复调整直到变化有规 律为止。 按照同样的方法分别创建【日】图层和【月】图层的形状补间动画。 5、创建动态按钮元件。新建一个按钮元件，并命名为“播放”。在【弹起】帧用【铅笔工具】绘制一个甲骨文的 “车”字，选中整个图形，将其转换为“字”MC 元件。双击舞台上的图形进入“字”MC 元件编辑环境中，如图 4-5所示。 图 4-5 “字”MC 元件编辑环境 按 F7在第 4帧插入一个空白关键帧，用【铅笔工具】在舞台上绘制一个金文的“车”，按照同样的方法在图层的第 8 帧、第 12帧插入空白关键帧并输入“车”的各种文字。这样，在按钮【弹起】帧便放置了一个动态的 MC元件。单击 【时间轴】上的【播放】按钮回到按钮编辑环境中，在【指针经过】帧插入空白关键帧，输入一个隶书的“车”，最后在 【点击】帧插入关键帧，绘制一个矩形来定义鼠标响应区域，一个动态的按钮便制作完成。 二、布局场景 单击【编辑场景】按钮回到【场景 1】编辑环境中，将【图层 1】重新命名为【标题】,将【标题】MC 元件拖放到舞台 上，调整好位置和大小。 插入两个图层，并重新命名为“按钮”和“边框”。在【边框】图层，分别在舞台的上下方绘制两个细长的黄色矩形，作 为界面的边框，用【文本工具】在上边框上输入课件标题。在【按钮】图层，将制作好的按钮元件拖放到舞台的右下角， 调整好位置大小。 三、创建动画过程 1、创建【象形文字】图层和【甲骨文】图层动画效果。在【标题】图层的上方插入两个图层，分别命名为“象形文字” 和“甲骨文”。在“象形文字”第 2帧插入一个空白关键帧，将【库】中的“象形文字”图形元件拖放到舞台上，调整好 位置和大小。在该图层的第 17帧和第 37帧插入关键帧，在【属性】面板中，将第 37帧上元件实例的【Alpha】值修改为 “0%”,创建第 17帧到第 37帧的动作补间动画。 按照同样的方法创建【甲骨文】图层渐显和渐隐的动画效果。 2、创建【上】图层文字变化的动画效果。插入一个新图层，重新命名为“上”。在该图层的第 100帧插入一个空白关 键帧，用【铅笔工具】绘制一个金文写法的“上”字，在第 125帧和第 150帧插入关键帧。将第 150帧上金文写法的“上” 字修改为籀文写法的“上”字，创建第 125帧到第 150帧之间的形状补间动画。 单击第 125帧，按 Ctrl+Shift+H添加提示帧，将形状提示拖放到要标记的几个点上。再单击第 150帧将形状提示移动与第 125帧相对应的点。按 Enter键播放动画，观察“上”字的形状补间过程，反复调整直到变化有规律为止。 两样在该图层的第 175帧到第 200帧插入关键帧，将第 200帧上籀文写法的“上”字修改为小篆文写法的“上”字， 创建第 125帧到第 150帧之间的形状补间动画。 单击第 175帧，按 Ctrl+Shift+H添加提示帧，将形状提示拖放到要标记的几个点上。再单击第 200帧将形状提示移动 与第 175帧相对应的点。按 Enter键播放动画，观察“上”字