Flash课件制作实例.doc

《Flash课件制作实例.doc》由会员分享，可在线阅读，更多相关《Flash课件制作实例.doc（13页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、常规教学中基础图形的动画制作项目一：Flash简介目标：1、认识flash软件2、了解flash的界面构成一、认识FlashFLASH是Macromedia公司推出的一种优秀的矢量动画编辑软件，FLASH8.0是其最新的版本。利用该软件制作的动画尺寸要比位图动画文件如GLF动画尺寸小的多，用户不但可以在动画中加入声音，视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站。通过简介的学习，大家应熟悉FLASH动画的特点，FLASH8.0的界面组成元素。二、什么是 FlashFlash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash

2、可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。要在 Flash 中构建应用程序，可以使用 Flas

3、h 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。在 Flash 中创作内容时，需要在 Flash 文档文件中工作。Flash 文档的文件扩展名为 .fla (FLA)。Flash 文档有四个主要部分：舞台时间轴库面板动作面板ActionScript 代码舞台是在回放过程中显示图形、视频、按钮等内容的位置。时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。

4、如上图所示ActionScript代码设计窗口Action Script 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 Action Script 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash 包括两个版本的 Action Script，可满足创作者的不同具体需要。Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 Action Script 添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。完成 Flas

5、h 文档的创作后，可以使用【文件】|【发布】命令发布它，快捷键SHIFT+F12。这会创建文件的一个压缩版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播放 项目二：抛物线课件目标：1、掌握新建影片的方法2、学会基本形状的绘制方法3、会使用任意变形工具4、掌握对齐工具的使用方法 课件效果 运行课件，界面上有课件标题、坐标轴、抛物线和抛物线公式，效果如图 2-1 所示。图 2-1 课件运行效果 操作步骤 ：一、 新建影片文档 运行 Flash 8 ，选择【文件】 | 【新建】命令或按快捷键

6、Ctrl+N ，在弹出的【新建文档】窗口中，选择【新建 Flash 文档】，单击【确定】按钮新建一个影片文档。 按 Ctrl+J 打开文档属性对话框，参数如图 2-2 所示，选择【文件】 | 【保存】命令将文件保存为“抛物线 .fla ”。图 2-2 设置影片文档属性 二、绘制坐标轴 1、设置视图网格。选择【视图】 | 【网格】 | 【编辑网格】命令，在弹出的【网格】对话框中，选中【显示网格】和【对齐网格】选项，其它参数保持不变，单击【确定】按钮，如图 3 所示。 图 3 【网格】对话框 2、绘制 x 轴。选择工具箱中的线条【线条工具】，在【属性】面板中，设置粗细为“ 2 ”，【填充色】为黑色

7、，在场景中画一条水平线作为 x 轴。 知识链接：用线条工具绘制时按住 Shift 键可以画出垂直、水平和 45 度方向的直线；用椭圆工具绘制时按住 Shift 键可以画出正圆；用铅笔工具绘制时按住 Shift 键可以轻松画出正交直线。 再用【线条工具】画一个三角形，填充色为黑色，用【箭头工具】选中三角形的边线，将其删除。选择工具箱中的【任意变形工具】，单击【选项】里的【缩放工具】，将其缩小到合适程度。把三角形拖放到直线右边作为坐标轴的箭头，按 Ctrl+G 键，将直线和三角形组合。 知识链接：按住 Shift 键可以同时选中多个对象。 画一组直线作为数轴的刻度，选中刻度，用【缩放工具】 将其缩

8、小到合适程度。选中轴和刻度，选择【窗口】 | 【对齐】命令打开【对齐面板】，如图 2-4 所示。 图 2-4 对齐面板在【对齐面板】上单击【水平居中】按钮和【垂直居中】按钮，选中所有图形按 Ctrl+G 组合，完成效果如图 2-5 所示。图 2-5 完成的 x 轴 知识链接：在工具箱中我们可以利用任意变形工具直接对图形进行缩放、旋转等操作。但如果缩放、旋转要求精确的话，我们就可以在变形面板中进行设置。 3、绘制 y 轴。选中 x 轴，选择【编辑】 | 【复制】命令或按 Ctrl+C 键，复制 x 轴，再选择【编辑】 | 【粘帖到中心位置】命令或按 Ctrl+V 键粘帖。 知识链接：按住 Ctr

9、l 键，用鼠标拖动图形，可以快速复制原图形。 选择【修改】 | 【变形】 | 【逆时针旋转 90 度】命令，得到 y 轴，用【箭头工具】调整好位置，完成后效果如图 2-6 所示。图 2-6 完成后的坐标轴知识链接：选择【窗口】 | 【变形】命令，选中图形，在【变形面板】中设置需要旋转的角度，按【复制并应用变形】按钮，可以精确的复制出若干旋转角度相同的图形。 三、绘制抛物线 用【线条工具】在 y 轴的上半轴画一条水平直线，将鼠标放在直线上，当光标变成圆弧形时拖动鼠标，将直线调整成为一条曲线，并使曲线最低点位于坐标原点。完成效果如图 2-7 所示。图 2-7 完成的坐标知识链接：直线与 y 轴的交

10、叉点，一定要是直线的中心点，绘制出的抛物线才以 y 轴为对称轴。 四、输入文字 选择【文本工具】 , 设置文本参数如图 2-8 所示，为坐标轴输入标注。 图 2-8 设置文本参数用同样的方法输入课件标题、公式。 五、测试并保存文档 选择【控制】 | 【测试影片】命令，或按快捷键 Ctrl+Enter 测试课件。完成后，按 Ctrl+S 将课件保存。 案例总结：这一例我们通过绘制一个简单的抛物线来掌握 Flash 8 中部分绘图工具的使用方法，熟悉对齐面板和变形面板的操作以及辅助工具的应用。在制作课件过程中，制作方法不是一层不变的，我们可以通过不同的方法达到同样的效果，这就要求在练习过程中不断的

11、摸索，找出最捷径、最行之有效的办法。项目三：荷塘月色 目标：1、掌握导入位图的方法 2、掌握在 Flash 中位图的处理方法 3、会使用套索工具 4、掌握任意变形工具中的封套 本实例是表现中学语文课文荷塘月色的一个图形课件，这个课件的制作充分应用了 Flash 位图和矢量图的处理能力，通过图形、图像将荷塘月色的课文意境表现了出来，利用这个课件辅助教学，不但使学生直观地感受到作者在课文中描写的情景，而且给学生带来美的感受。如图 3-1 所示是课件运行的效果。 图 3-1 课件运行效果 制作步骤 一、创建影片和导入位图 1、新建影片文档。选择【文件】 | 【新建】命令或按快捷键 Ctrl+N ，新

12、建一个 Flash 影片文档，设置舞台尺寸为 660 480 ，其它参数保持默认值。 2、导入位图。选择【文件】 | 【导入】命令，弹出【导入】对话框，在对话框中选择所需要的图片文件，单击【打开】按钮，导入课件所需的荷花图像文件，如图 3-2 所示。 图 3-2 导入位图 知识链接：在 【导入】对话框中，按下 Ctrl 键，依次单击图像文件，可同时选中要导入的多个图像文件。 导入到文档中的图像会自动分布在场景的舞台上，按 Delete 键，将场景中的图像文件全部删除，此时图像文件已经保存在【库】中。打开【库】面板可以看到导入的位图对象，如图 3-3 所示。 图 3-3 【库】面板中的位图 知识

13、链接：导入的位图在【库】面板中的名称就是图像的文件名，它们的【种类】标识为【位图】，注意观察它们的图标，它们具有独特的图标，和其他类型的对象的图标不一样。【库】面板中的这些位图对象也象图形元件一样，你可以随时将它们拖放到场景中使用。 二、去掉位图的背景 我们导入到 Flash 中的位图往往有背景，这对课件效果有很大的影响，也不利于课件整体风格的设计，可以想象，漂亮的图像下面有一块白色或黑色的背景将多么难看。下面我们就讨论一下在 Flash 中如何去掉图像的背景。 1、分离位图。新建“荷花 1 ”图形元件，在【库】面板中单击“荷花 1 ”图像名称，选中荷花图像，将图像拖到场景中央，如图 3-4

14、所示。 图 3-4 拖放【库】面板中的位图对象 此时，我们对荷花图像无法进行修改，因为 Flash 将导入的图像作为单个的对象处理，要进行编辑修改，必须将位图分离。 选择【修改】 | 【分离】命令，或按快捷键 Ctrl+B 将荷花位图图像分离，如图 3-5 所示。 图 3-5 分离位图 2、擦除背景。选择工具箱中的【索套工具】 ，在工具箱的下端，单击【选项】中的【魔术棒属性】按钮 ，弹出【魔术棒设置】对话框，在【阈值】中输入“ 20 ”，在【平滑】下拉菜单中选择【平滑】选项，如图 3-6 所示。 图 3-6 【魔术棒设置】对话框 说明 ：【 阈 值】是用来定义选取范围内，相邻像素色值的接近程度

15、，数值越高，选取的范围越宽。如果输入数值为 0 ，那么只有同所单击处像素色值完全一致的像素才会被选中 . 在有些软件如 PhotoShop 中用容差来表示。 按键盘上的 Esc 键，或单击取消对图形的选择。在工具箱的下端，选择【魔术棒】 ，单击荷花图像背景，按 Delete 键，删除选中的背景，如图 3-7 所示。 图 3-7 用【魔术棒】擦除背景 知识链接：对于大片的相同或者相近色，用 【魔术棒】 能比较方便地去除背景。如果要去掉的背景比较复杂，可直接用【索套工具】 或者 【选项】中的【 多边形模式 】 。 继续用【魔术棒】 选中白色背景区域将其擦除。在显示图像比例的下拉菜单中放大显示比例，

16、选择工具箱中的【橡皮擦工具】 ，在【橡皮擦形状】下拉菜单中，选择一个较小的圆形橡皮擦，将不干净的边缘小心地擦除，完成后如图 3-8 所示。 图 3-8 去掉背景的荷花 用同样的方法处理“荷花 2 ”位图，处理完成后如图 3-9 所示。 图 3-9 处理完成的“荷花 2 ”图形元件 三、创建其他图形元件 1、创建弧形图形元件。选择【插入】 | 【新建元件】命令，弹出【新建元件】对话框，在【新建元件】对话框中，输入元件的【名称】为“弧形”，选择【行为】为【图形】，如图 3-10 所示。 图 3-10 【新建元件】对话框 选择工具箱中的【钢笔工具】，勾出三角形，用【箭头工具】调整出弧形。选择【窗口】

17、 | 【混色器】命令，设置填充色为由白色到黄绿色的线性渐变色，填充弧形。选择【填充变形工具】调整渐变色，完成后如图 3-11 所示。 图 3-11 绘制弧形 插入新图层，将两个图层分别命名为“弧形”和“阴影”，图层结构如图 3-12 所示。 图 3-12 图层结构 将弧形粘贴到【阴影】图层，并将填充色修改为黑色，完成后如图 3-13 所示。 图 3-13 完成后的“弧形”图形元件 2、创建诗词图形元件。新建“诗词”图形元件，选择【文本工具】，在【属性】面板中，设置文本属性如图 3-14 所示。 图 3-14 设置文本属性 在编辑场景中，输入文本，按 Ctrl+B 将文字打散。选择【窗口】 |

18、【混色器】命令，设置填充色为由白色到淡蓝色的线性渐变色，填充文字，完成后如图 3-15 所示。 图 3-15 制作完成的“诗词”图形元件 3、创建标题图形元件。新建“标题”图形元件，选择【文本工具】，在【属性】面板中，设置文本属性如图 3-16 所示。 图 3-16 设置文本属性 在编辑场景中，输入“荷塘月色”，按 Ctrl+B 将文字打散。选中所有，选择工具箱中的【任意变形工具】，单击【选项】下的【封套】按钮 ，文字周围出现若干控制点，将光标放在控制点上，拖动控制点调整文字形状，如图 3-17 所示。 图 3-17 用【封套工具】调整文字形状 选择【颜料桶工具】，在【混色器】面板中将填充色设

19、置为由淡蓝色到深蓝色的线性渐变色，填充文字。单击工具箱中的【墨水瓶工具】，将【笔触颜色】设置为黄色，为文字描边，完成后如图 3-18 所示。 图 3-18 完成后的标题 4、创建背景图形元件。新建“背景”图形元件，选择【矩形工具】，在【混色器】面板中将【填充】色设置为由淡绿色到深绿色的线性渐变色，将【笔触颜色】设置为无色。在场景中画一个矩形，选择【填充变形工具】调整渐变色，调整后如图 3-19 所示。 图 3-19 完成的背景图形元件 四、布局场景 1、插入图层。从元件编辑场景返回到“场景 1 ”，单击【插入图层】按钮，再插入四个图层，将图层分别命名为“背景”、“标题”、“荷花”、“弧形”和“

20、诗词”。图层结构如图 3-20 所示。 图 3-20 图层结构 2、布局场景。从【库】中将创建好的图形元件分别拖放到相应的图层上，调整好位置和大小。完成布局后的画面如图 3-21 所示。图 3-21 完成布局后的画面项目四：汉字的演变目标：1、掌握创建元件的方法2、掌握创建影片剪辑MC的方法3、掌握创建简单的形变动画的方法4、掌握遮罩层的基本运用5、掌握创建按钮的方法 6、会创建简单脚本 课件效果运行课件，首先播放的是一个片头：山、太阳和月亮慢慢变幻，成为我们现在使用的文字，然后出现本课件用几种不同字体书写的标题汉字的演变。单击界面右下角的动态按钮播放，课件以“上”、“下”、“好”和“车”四个

21、字为例，介绍了汉字从象形文字演变到行书的过程。四个汉字分别以动态的过程演示，再配以文字说明，使学生对演字的演变过程有了很清楚的认识。如图4-1是课件运行的一个画面。图4-1 课件运行效果操作步骤：一、创建课件元件1、新建影片文档。按Ctrl+N新建影片文档，设置背景色为“#”，其它参数保持默认值。2、创建“象形文字”图形元件。新建“象形文字”图形元件，用绘图工具在舞台中绘制山、太阳和月亮，效果如图4-2所示图形。图4-2 绘制的“象形文字”图形元件 3、创建“甲骨文”图形元件。新建“甲骨文”图形元件，用【铅笔工具】绘制出“鱼”、“羊”、“车”的文字的甲骨文，再用【文本工具】输入文本，完成效果如

22、图4-3所示图4-3 完成的“甲骨文”图形元件 4、创建“标题”MC元件。新建“标题”MC元件，将“象形文字”图形元件中的图形复制并粘帖到该MC元件的编辑环境中，选择【修改】|【时间轴】|【分散到图层】命令，将三个图形分别放置一个图层，并重新将图层命名为“山”、“日”、“月”，删除【图层1】。知识链接：元件可以反复使用，在制作动画中使用元件可以大大减小文件的体积和加快动画的播放速度。图库就象仓库一样存放了编辑动画的各种元件，这些元件可以随时调出使用。在制作动画时将元件从图库中拖放到舞台工作区（即：场景）中，就生成了该元件的一个实例。元件只是一种标志，真正在舞台工作区中表演的是元件的实例，元件仍

23、在图库中。图形元件是可以反复使用的图形，它可以是只有一帧的静止图片，也可以制作成由多个帧组成的对象，在图形元件中不能添加交互行为和声音控制。影片剪辑元件用来制作独立于当前场景时间轴的动画，它是主动画的一个组成部分，当播放主动画时，影片剪辑元件也在循环播放。按钮元件用于创建动画的交互控制按扭，它包含4个不同状态的帧即：“弹起”（按钮的正常状态）、“指针经过”（将鼠标移到按钮上）、“按下”（用鼠标按下按钮）、“点击”（响应按钮事件的区域范围，只有当鼠标进入到这一区域时，按钮才开始响应鼠标的动作）。在【山】图层的第25帧插入关键帧，将该帧上的山图形删除，用【文本工具】输入“山”字，按Ctrl+B将字

24、体分离为形状，创建第1帧到第25帧的形状补间动画。按Enter键预览图形的变化情况，如果形状变化杂乱无章，单击第1帧，选择【修改】|【形状】|【添加形状提示】命令，或按Ctrl+Shift+H为山图形添加提示帧，将形状提示拖放到要标记的几个点上，如图4-4所示。 图4-4 为山添加提示帧 单击第25帧将形状提示移动与第1帧相对应的点。再按Enter键播放动画，观察形状补间过程，反复调整直到变化有规律为止。按照同样的方法分别创建【日】图层和【月】图层的形状补间动画。5、创建动态按钮元件。新建一个按钮元件，并命名为“播放”。在【弹起】帧用【铅笔工具】绘制一个甲骨文的“车”字，选中整个图形，将其转换

25、为“字”MC元件。双击舞台上的图形进入“字”MC元件编辑环境中，如图4-5所示。图4-5 “字”MC元件编辑环境按F7在第4帧插入一个空白关键帧，用【铅笔工具】在舞台上绘制一个金文的“车”，按照同样的方法在图层的第8帧、第12帧插入空白关键帧并输入“车”的各种文字。这样，在按钮【弹起】帧便放置了一个动态的MC元件。单击【时间轴】上的【播放】按钮回到按钮编辑环境中，在【指针经过】帧插入空白关键帧，输入一个隶书的“车”，最后在【点击】帧插入关键帧，绘制一个矩形来定义鼠标响应区域，一个动态的按钮便制作完成。二、布局场景单击【编辑场景】按钮回到【场景1】编辑环境中，将【图层1】重新命名为【标题】,将【

26、标题】MC元件拖放到舞台上，调整好位置和大小。插入两个图层，并重新命名为“按钮”和“边框”。在【边框】图层，分别在舞台的上下方绘制两个细长的黄色矩形，作为界面的边框，用【文本工具】在上边框上输入课件标题。在【按钮】图层，将制作好的按钮元件拖放到舞台的右下角，调整好位置大小。三、创建动画过程1、创建【象形文字】图层和【甲骨文】图层动画效果。在【标题】图层的上方插入两个图层，分别命名为“象形文字”和“甲骨文”。在“象形文字”第2帧插入一个空白关键帧，将【库】中的“象形文字”图形元件拖放到舞台上，调整好位置和大小。在该图层的第17帧和第37帧插入关键帧，在【属性】面板中，将第37帧上元件实例的【Al

27、pha】值修改为“0%”,创建第17帧到第37帧的动作补间动画。按照同样的方法创建【甲骨文】图层渐显和渐隐的动画效果。2、创建【上】图层文字变化的动画效果。插入一个新图层，重新命名为“上”。在该图层的第100帧插入一个空白关键帧，用【铅笔工具】绘制一个金文写法的“上”字，在第125帧和第150帧插入关键帧。将第150帧上金文写法的“上”字修改为籀文写法的“上”字，创建第125帧到第150帧之间的形状补间动画。单击第125帧，按Ctrl+Shift+H添加提示帧，将形状提示拖放到要标记的几个点上。再单击第150帧将形状提示移动与第125帧相对应的点。按Enter键播放动画，观察“上”字的形状补间

28、过程，反复调整直到变化有规律为止。两样在该图层的第175帧到第200帧插入关键帧，将第200帧上籀文写法的“上”字修改为小篆文写法的“上”字，创建第125帧到第150帧之间的形状补间动画。单击第175帧，按Ctrl+Shift+H添加提示帧，将形状提示拖放到要标记的几个点上。再单击第200帧将形状提示移动与第175帧相对应的点。按Enter键播放动画，观察“上”字的形状补间过程，反复调整直到变化有规律为止。按照同样的方法，创建【上】图层中从小篆到隶书，从隶书到草书，从草书到楷书以及从楷书到行书各个阶段，“上”字的变化过程。3、创建其它文字图层动画效果。插入三个图层，分别命名为“下”、“好”和“

29、车”，按照创建【上】图层动画效果的方法，创建这三个图层的动画效果。局部图层结构如图4-5所示。图4-5 实现字体演变过程动画效果局部图层结构 最后在【边框】图层上方插入一个新图层，重新命名为“文本”，按Enter键播放动画，在每种文字变化的地方插入关键帧，为其配上文字说明。四、定义动作脚本插入一个新图层，重新命名为【AC】，在该图层的最后一帧插入空白关键帧。在第1帧和最后一帧分别定义停止动作“stop();”。单击舞台上的按钮元件实例，在动作面板中定义动作脚本为：on (press) gotoAndPlay(2);至此，课件全部制作完毕，如图4-7所示，是课件的图层结构。 图4-7 整个课件制

30、作完成后的图层结构。案例总结：本节课件实例，主要应用的形状补间动画。遮罩层直接作用于位于该图层下的图层，要将多个图层组织在一个遮罩层之下创建复杂的动画效果，可以将这些图层直接拖放到遮罩层下。对于按钮元件，各帧上不但可以放置静态的图形元件，还可以放置动态的影片剪辑元件，我们可以根据各个帧的状态，放置不同的元件制作不同状态的按钮。拓展练习：将项目三荷塘月色课件补充完整要求：1、为原课件添加一个“开始”按钮，使用者点击时开始播放。 2、为课件再添加一个播放的画面，显示如下的场景：月亮和课文缓缓升起至屏幕正中停止。（背景任然采用原背景）课文如下：曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。