中职 网页动画制作项目一 游泳的小鸭电子课件

中职网页动画制作项目一游泳的小鸭电子课件（高教版）中职网页动画制作项目一游泳的小鸭电子课件（高教版）项目一游泳的小鸭——初识FlashCS4

任务一

了解Flash基础知识

任务二熟悉FlashCS4工作界面

任务三制作小鸭游泳动画

任务四测试导出与发布动画【知识加油站】

实战演练飞行的纸飞机

拓展训练多变的纸飞机目录任务一了解Flash基础知识[本任务目标]:了解Flash的应用及动画原理

[本任务重点]:1.了解Flash应用2.掌握Flash的动画原理项目任务上一页下一页一、Flash简介

Flash是美国的Macromedia公司推出的一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的动态效果。Flash动画生成的文件体积较小，提升了网络传输的效率；其强大的平面设计功能使得动画设计时无须其他的软件辅助，大大地增加了设计上的效率；极高的程序控制功能(ActionScript)，可以创造互动性极佳的网页，吸引更多人的兴趣。Flash自面市以来以其简单易学、功能强大、适应范围广泛等特点，得到了迅猛的发展与普及，逐步奠定了在多媒体互动软件中的霸主地位。项目任务上一页下一页项目任务上一页下一页二、Flash的应用

1．广告宣传片：Flash广告是使用Flash动画的形式宣传产品的广告，主要用于在互联网上进行产品、服务或者企业形象的宣传。近几年Flash发展势头迅猛，因为它既可以在网络上发布，同时也可以存为视频格式在传统的电视台播放。一次制作，多平台发布，所以越来越得到更多企业的青睐。

2．网站建设：Flash具有良好的动画表现能力，生成的文件体积很小，可以很快显示出来，所以现在的网页中越来越多的使用Flash动画来装饰页面的效果。其强大的后台技术支持Html与网页编程语言的使用，使得Flash在制作网站上具有良好的优势。

3．游戏制作:Flash是目前制作网络交互动画最优秀的工具，支持动画、声音以及视频，并且利用ActionScript语句编制程序，再配合Flash强大的交互功能来制作一些游戏，比如热门游戏植物大战僵尸和经典小游戏连连看、泡泡龙等。

项目任务上一页下一页

4．娱乐短片：这是当前国内最火爆，也是广大Flash爱好者最热衷应用的一个领域。由于采用矢量技术这一特点，Flash非常适用于制作动画短片，再配上适当的音乐，比传统的方式更具有吸引力，而且Flash动画文件很小，更适合网络传播。Flash短片作品包括卡通动漫、电子贺卡和MTV等。

5．多媒体课件：Flash课件以文字为基础，配合图像、声音、动画等手段，可以从多方面刺激学生的感官，激发学生的兴趣，使得学生真正成为学习的主体。随着网络教学和远程教学的需要，利用Flash制作多媒体课件已经成为课件制作的主流。

6．手机应用：Flash作为一款跨媒体的软件在很多领域得到应用，尤其是Adobe公司逐渐加大了Flash对手机的支持，使用Flash可以制作出手机的应用动画，包括Flash手机屏保、Flash手机主题、Flash手机游戏、Flash手机应用工具等，随着手机浏览器FlashLite版本不断提升，以及各款手机对Flash的不断支持，Flash在手机方面的应用越来越广。当然Flash的应用远远不止这些，它在电子商务与其他媒体领域也得到了广泛的应用，在此仅列出一些主要的应用范围，相信随着Flash技术的发展，Flash的应用范围将会越来越广泛。

项目任务上一页三、Flash动画原理

动画是通过连续播放一系列画面，给视觉造成连续变化的画面。它的基本原理与电影、电视一样，都是利用了一种视觉原理。医学已证明，人类的眼睛具有“视觉暂留”的特性，就是说当人的眼睛看到一幅画或一个物体后，它的影像就会投射到我们的视网膜上，如果这个物体突然移开，它的影像仍会在我们的眼睛里停留一段极短的时间，在0.1秒内不会消失。这时如果有另一个物体在这段极短的时间内出现，我们将看不出中间有断续的感觉，因为在前一个影像尚未消失时，后一个影像已经产生，并与前一个影像融合在一起，这就是“视觉暂留”原理。为此，一个动态的运动过程就可以分解为多个静态画面。如图1-1所示，武士挥拳的连续动作可以根据其运动规律和关键动作分解为下面六幅画面，当这些画面以低于0.1秒的速度播放时，我们就感觉武士挥拳动起来了，而不必去关心两个画面之间武士动作是怎样的。图1-1武士挥拳分解画面

Flash制作动画时也是采用这一原理，我们采用时间轴来控制动画的播放时间，利用帧来记录每一幅静态画面，这样上面的六幅画面就可以用六个关键帧（记录关键动作的帧）来记录，而两个关键帧之间武士动作的衔接我们不用考虑，由计算机来帮助我们完成。所以说用Flash制作动画非常简单、易学。

[本任务目标]:认识FlashCS4工作界面

[本任务重点]:1、工具面板2、时间轴面板项目任务上一页下一页任务二熟悉FlashCS4工作界面项目任务上一页下一页单击【开始】菜单→【程序】→【AdobeFlashCS4Professional】命令或双击桌面上的快捷图标启动FlashCS4应用程序。默认情况下，每次启动时系统都会自动弹出启动向导对话框，如图1-2所示，用于快速访问最近使用过的文件、创建不同类型的文件以及使用教程资源等。项目任务上一页下一页在新建或打开一个Flash文档后，就可以进入FlashCS4默认的工作界面，工作界面由标题栏、菜单栏、文档选项卡、舞台、时间轴面板、工具面板、属性面板和其它多个控制面板等组成，如图1-3所示。项目任务上一页下一页一、标题栏

标题栏位于FlashCS4工作界面的最上方，利用标题栏右侧的“基本功能”下拉列表框，可以根据自己的需要切换工作界面的外观。；“基本功能”右侧的搜索栏，可以方便地搜索Adobe官网中的帮助信息。此外，通过单击标题栏右侧的3个窗口控制按钮可以将窗口最小化、最大化和关闭。二、菜单栏（1）【文件】：该菜单主要用于操作和管理动画的文件，包括比较常用的新建、打开、保存、导入、导出和发布等。（2）【编辑】：该菜单主要用于对动画对象进行编辑操作，如复制、粘贴等。（3）【视图】：该菜单主要用于控制工作区域的显示效果，如放大、缩小以及是否显示标尺、网格和辅助线等。（4）【插入】：该菜单主要用于向动画中插入元件、图层、帧和场景等。（5）【修改】：该菜单主要用于对对象进行各项修改，包括变形、排列、对齐以及位图、元件、形状进行各项修改等。（6）【文本】：该菜单主要用于对文本进行编辑，包括大小、字体、样式等属性。（7）【命令】：该菜单主要用于管理与运行通过历史面板保存的命令。（8）【控制】：该菜单主要用于控制影片播放，包括测试影片、播放影片等。（9）【调试】：该菜单主要用于调试影片中的ActionScript脚本。（10）【窗口】：该菜单主要用于控制各种面板的显示与隐藏，包括时间轴、工具以及各种浮动面板。（11）【帮助】：该菜单提供了FlashCS4的各种帮助信息。项目任务上一页下一页工具面板是制作Flash动画过程中使用最频繁的面板，默认情况下位于工作界面的右侧，分为“工具区”、“查看区”、“颜色区”和“选项区”4个功能区域，如图1-4所示。（1）工具区：包含了Flash中最常用的绘图工具、填充工具和编辑工具。（2）查看区：用于改变舞台的显示比例及显示区域。（3）颜色区：用于设置笔触颜色和填充颜色。（4）选项区：用于设置工具的选项，选择不同的工具时，选项区会有所变化。三、工具面板四、时间轴面板项目任务上一页下一页时间轴面板用于组织和控制文档内容在一定时间内播放的层数和帧数，就像剧本决定了各个场景的切换以及演员出场的时间顺序一样。如图1-5所示时间轴面板分为左右两个部分，左边为图层控制区，右边为帧控制区。（1）图层控制区中的图层由上到下排列，上面图层中的对象会叠加到下面图层的上方，在图层控制区可以对图层进行各种操作，如创建图层、删除图层、显示和锁定图层等。（2）帧控制区对应左侧的图层控制区，每一个图层对应一行帧系列。在FlashCS4中，动画是按时间轴由左向右顺序播放的，每播放一格即一帧，一帧对应一个画面，对动画进行的编辑操作实际上就是对帧进行的编辑操作。如插入帧、删除帧、复制帧和移动帧等。项目任务上一页五、属性面板属性面板是一个非常实用而又比较特殊的面板，在属性面板中没有固定的参数选项，它会随着选择对象的不同而出现不同的选项设置，这样就可以很方便地设置对象属性。当打开多个文档后，单击文档名称形成的文档选项卡可以切换当前编辑的文档，单击文档右侧的按钮可以关闭相应的文档。舞台是用户创作何编辑动画内容的场所，如图1-所示，在工具面板中选择绘图或编辑工具，并在时间轴面板中选择需要处理的帧后，就可以在舞台中绘制或编辑该帧上的图形了。需要注意的是，位于舞台外的内容在播放动画时不会被显示。六、文档选项卡七、舞台[本任务目标]:学习Flash制作动画的方法与过程

[本任务重点]:1、图片素材的导入2、动画的制作方法项目任务上一页下一页任务三制作小鸭游泳动画1．新建文件启动FlashCS4后，在如图1-2所示的启动向导中选择“Flash文件（ActionScript2.0）”选项即可新建一个Flash文档。2．导入河流背景

如图1-7所示，在菜单栏中单击【文件】菜单→【导入】→【导入到舞台】命令，打开如图1-8所示的“导入”对话框，选择光盘中“素材与实例→project01→素材”目录下的背景河流.jpg文件，单击“打开”按钮，导入图片后的舞台如图1-9所示。一、导入素材项目任务上一页下一页项目任务上一页下一页3．修改河流图层因为导入的背景图片太大，超出了舞台的范围，所以要对图片进行调整。单击【窗口】菜单→【信息命令】，打开如图1-10所示的信息面板，调整背景河流图片的尺寸，参数为宽度550，高度400，按回车键确认。然后在下面的时间轴面板里双击“图层1”，把名字改成“背景河流”并按回车键确认，如图1-11。图层调整后的舞台如图1-12所示。

图1-10信息面板

图1-11修改图层名

图1-12图层调整后的舞台项目任务上一页下一页4．导入小鸭图片首先要在背景河流的图层上新建一个图层。选中“背景河流”图层，使其为蓝色（表示该图层为当前正在编辑的图层），单击时间轴面板左下方的“新建图层”按钮，新建一个名为“图层2”的图层，按“背景河流”图层修改名称的方法，将“图层2”改为“小鸭子”，如图1-13所示。然后按背景河流的导入方法导入光盘中“素材与实例→project01→素材”目录下的卡通小鸭子.png文件，导入后的舞台如图1-14所示。项目任务上一页下一页5．修改小鸭子

单击【窗口】菜单→【信息】命令，在信息面板中调整小鸭子图片的尺寸，参数为宽度100，高度100，按回车键确认。调整小鸭子后的舞台如图1-15所示。项目任务上一页下一页二、制作动画

1．制作开始帧

选择“小鸭子”图层，单击时间轴面板右侧第一帧，将小鸭子拖动到舞台的右下角，如图1-16所示。项目任务上一页下一页2．制作结束帧

拖动时间轴面板右下方的水平滚动条，显示出第70帧，然后选择“小鸭子”图层中的第70帧，单击鼠标右键在弹出菜单中选择【插入关键帧】命令，如图1-17所示。然后再按此方法在“背景河流”图层中的第70帧处插入关键帧，完成后时间轴如图1-18所示。

项目任务上一页下一页项目任务上一页下一页然后再选择小鸭子图层，把小鸭子拖动到舞台的左下角，这是动画结束时，小鸭子所在的位置，如下图1-19所示。

3．创建动画选取从1到70帧当中的任意一帧，单击鼠标右键，在弹出菜单中选择“创建传统补间”命令，完成小鸭游泳动画，如图1-20所示。项目任务上一页下一页三、保存文件

动画制作完成后要进行保存。为了有效的管理所创作的flash文件，在D盘创建名为“flash”的文件夹，在该文件夹内创建名为“project01”的子文件夹，在该子文件夹内再创建名为“实例”的下级文件夹，依次类推，在flash文件夹中创建14个文件夹，文件夹名称序号依次递增。单击【文件】菜单→【保存】命令或按【Ctrl+S】快捷键，打开“另存为”对话框，如图1-21所示，保存路径为d:\flash\project01\实例，输入文件名“游泳的小鸭.fla”，保存类型为默认类型，最后单击“保存”按钮，就完成了文件的保存。

项目任务上一页[本任务目标]:学习Flash发布动画的方法

[本任务重点]:熟练掌握导出动画的方法任务四测试、导出与发布动画项目任务上一页下一页1.在工作界面中测试在制作动画过程中，按下【Enter】键，可以测试动画在时间轴上的播放效果；反复按【Enter】键可以在暂停测试和继续测试之间切换。2.在播放器中测试若希望测试动画的实际播放效果，可以单击【控制】菜单→【测试影片】命令或按【Ctrl+Enter】快捷键，打开测试窗口，就可以在播放器中进行测试了，如图1-22和图1-23所示。要想关闭测试窗口，可以选择测试窗口中【文件】菜单→【关闭】命令或单击窗口右上角的【关闭】按钮。一、测试动画项目任务上一页下一页

在Flash软件中制作的动画只是fla格式的源文件，不能在播放器中播放，必须将其进行导出。Flash导出的动画格式通常为swf格式，这是Flash动画特有的文件格式。此外，还可以导出为其他图像、图形、声音和视频格式文件。1.导出影片选择“文件”菜单->“导出”->“导出影片”命令，弹出如图1-24所示的导出影片对话框。在保存类型下拉列表框中列出了Flash导出常用的动画文件格式，选择一种格式，给文件命名，然后单击保存按钮就完成导出操作了。二、导出动画项目任务上一页下一页（1）SWF影片（*.swf）：选择该项，不需任何设置可以将其导出为Flash特有的swf格式文件。（2）WindowsAVI（*.avi）：选择该项，在弹出的导出WindowsAVI对话框中可以设置选项，从而将文档导出为Window视频，但是会丢弃所有的交互性。（3）QuickTime（*.mov）：选择该项，可以将文档导出为QuickTime文件，使之可以以视频流的形式或通过DVD进行分发，或者可以在视频编辑应用程序（如AdobePremierePro）中使用。（4）动画GIF（*.gif）：选择该项，在弹出的导出GIF对话框中可以设置选项，从而将文档导出为GIF小动画，以便在网页中使用。（5）WAV音频（*.wav）：选择该项，在弹出的导出WindowsWAV对话框中可以设置声音格式，从而将当前文件中的声音文件导出为单个的WAV文件。（6）图像序列：选择其它选项则可以将文档导出为不同格式的图像序列文件。项目任务上一页下一页2.导出图像选择【文件】菜单→【导出】→【导出图像】命令，弹出“导出图像”对话框。可以将单帧图像保存为bmp、jpg、gif、png等格式的图像。3.制作exe格式动画

播放Flash动画需要专门的Flash动画播放器，即FlashPlayer。如果计算机中安装了Flash软件或用于播放Flash动画的其他插件，则可以观看动画，否则就看不到动画效果。针对这一情况，我们介绍一种将swf格式转换为exe格式的方法，使得动画可以在任何计算机上都能顺利演示。通过资源管理器找到刚才导出的“游泳的小鸭.swf”动画文件，双击它，此时打开FlashPlayer动画播放器并进行播放。在FlashPlayer动画播放器中，单击【文件】菜单→【创建播放器】命令，弹出“另存为”对话框，此时保存类型为“播放器（*.exe）”类型,选择好路径，在“文件名”文本框中输入“游泳的小鸭.exe”，如图1-25所示，单击“保存”按钮，就可以将swf文件转为exe文件了。项目任务上一页下一页三、发布动画完成了动画的制作并测试无误后，除了可以将其导出外，还可以将其发布，Flash影片的发布格式有多种，可以直接将影片发布为swf格式，也可以发布为html、gif、jpeg和png等格式。选择【文件】菜单→【发布设置】命令，弹出如图1-26所示的“发布设置”对话框。在“格式”选项卡中的类型一栏中勾选上哪项，就会发布哪种类型的文件，同时“发布设置”对话框中就会增加该项的设置选项卡。单击某个选项卡就能打开该项的设置窗口，图1-27是Flash文件设置项，图1-28是HTML文件设置项。一般我们采用系统默认值即可，最后单击“发布”按钮就完成发布操作了。图1-26发布设置对话框图1-27Flash文件设置项图1-28HTML文件设置项项目任务上一页【知识加油站】Flash中的图层项目任务上一页下一页

Flash中的图层就像透明的玻璃纸一样，我们可以在一张张透明的玻璃纸上分别作画，然后再将它们按一定的顺序一层层地向上叠加，上面的物体会盖住下面的物体。Flash是以层的概念来存储影片的，类似与Photoshop中的层，区别在于Photoshop中的层是静止的，而Flash中的层是运动的。在制作一个动画影片时，往往在一个层中很难完成，应为在同一层中不能同时控制多个对象，通过增加层，我们就可以在一层中编辑小鸭游泳的动画而在另一层中使用旋转文体的变形动画，各层的操作互相独立，互不影响，也正因为如此，我们才可以制作出复杂、绚丽的动画效果。

一、Flash中的图层项目任务上一页下一页二、图层的基本操作

1.创建新图层与图层文件夹创建新图层与图层文件夹有三种方式，分别为：（1）通过按钮创建：单击时间轴面板左下方的新建图层按钮创建新图层，每单击一次就会创建一个新的普通图层，名字为“图层n”（数字n是从2开始逐个累加的），如图1-29所示。同样的单击新建图层文件夹按钮也可以创建图层文件夹，如图1-30所示。（2）通过菜单创建：单击【插入】菜单→【时间轴】→【图层】或【图层文件夹】命令，同样可以创建图层和图层文件夹。

（3）通过快捷菜单创建：在时间轴面板左侧图层处单击鼠标右键，在弹出的快捷菜单中选择【插入图层】或【插入文件夹】命令，也可以创建图层和图层文件夹。新建完图层或图层文件夹后，可以双击它的名字，此时该名字会呈蓝色并闪动光标，然后就可以为图层或图层文件夹重命名了。项目任务上一页下一页

要在在Flash中操作图层或图层文件夹，就必须先选中它。图层或图层文件夹的选择方式有三种，其操作方法与Windows中文件的选择方式相似，被选中的图层或图层文件夹会以蓝色背景显示。（1）选取单个图层或图层文件夹：在时间轴面板左侧的图层或图层文件夹名称处单击，即可将该图层或图层文件夹选中。（2）选择多个连续的图层或图层文件夹：在时间轴面板中先点击要选的第一个图层或图层文件夹，然后按住【Shift】键，同时选择要选的最后一个图层或图层文件夹，这样就将这两个图层或图层文件夹之间的所有图层或图层文件夹都选中了。（3）选择多个不连续的图层或图层文件夹：在时间轴面板中按住【Ctrl】键，同时点击你要选的图层或图层文件夹，松开【Ctrl】键后，你所点击图层或图层文件夹就被选中了。2.选择图层与图层文件夹项目任务上一页下一页在Flash中添加图层或图层文件夹是按自下向上的顺序进行的，在动画制作的过程中，用户可能需要调整图层或图层文件夹的顺序。可按如下方法进行：（1）更改图层或图层文件夹顺序：选择好要移动的图层或图层文件夹，按住鼠标左键，将其拖动到所需位置即可。（2）将图层或图层文件夹移动到目标图层文件夹中：选择好要移动的图层或图层文件夹，按住鼠标左键，将其拖动到目标图层文件夹中，那么该图层文件夹下就会出现你所拖动的图层或图层文件夹。3.调整图层与图层文件夹顺序4.显示与隐藏图层与图层文件夹在Flash中图层或图层文件夹默认情况下是处于显示状态的，但有时为了控制动画方便可以将某些图层或图层文件夹隐藏起来，在发布SWF文件时可以选择是否包括这些隐藏的图层或图层文件夹。具体方法如下：（1）显示或隐藏全部图层或图层文件夹：在时间轴面板中单击“显示或隐藏所有图层”按钮，就可以将所有图层或图层文件夹隐藏起来。此时所有图层右侧的黑点显示为红叉，表示隐藏，再次点击按钮，红叉又显示为黑点，表示所有图层或图层文件夹显示，如图1-31、图1-32所示。项目任务上一页下一页（2）显示或隐藏单个图层或图层文件夹：选择好要显示或隐藏的图层或图层文件夹，然后点击该单个图层或图层文件夹右侧的黑点，当黑点显示为红叉，表示隐藏，再次点击红叉又显示为黑点，表示该图层或图层文件夹显示。项目任务上一页下一页5.锁定与解除图层与图层文件夹默认情况下Flash中的图层或图层文件夹都处于解锁状态，但是Flash动画中有很多对象，在编辑某个图层中的对象时有可能对其它图层中的对象进行误操作，为此可以将不需要的图层或图层文件夹暂时锁定，需要时再解锁就行了。具体操作如下：（1）锁定或解锁全部图层或图层文件夹：在时间轴面板中单击“锁定或解除锁定所有图层”按钮，就可以将所有图层或图层文件夹锁定，此时所有图层右侧的黑点显示为。再次点击按钮，又显示为黑点，表示所有图层或图层文件夹解锁。（2）锁定或解锁单个图层或图层文件夹：选择好要显示或隐藏的图层或图层文件夹，然后点击该单个图层或图层文件夹右侧的黑点，当黑点显示为，表示锁定，再次点击又显示为黑点，表示该图层或图层文件夹解锁。如图1-33、图1-34所示项目任务上一页下一页6.删除图层与图层文件夹在使用Flash制作动画时经常会出现一些没用的图层或图层文件夹，我们可以将它们快速删除。方法如下：（1）选择需要删除的图层或图层文件夹，然后点击时间轴面板左下方的“删除”按钮，即可删除所选图层或图层文件夹。（2）首先选择需要删除的图层或图层文件夹，然后将其拖动到时间轴面板左下方的“删除”按钮处，同样可以将图层或图层文件夹删除。在进行删除操作时，图层和空的图层文件夹可以直接删除，但是非空的图层文件夹删除时会弹出如图1-35所示的提示框，询问是否将该图层文件夹中嵌套的图层和图层文件夹也一并删除，如果选择“是”，则将所有嵌套的图层和图层文件夹删除；如果选“否”，则不会删除图层文件夹。项目任务上一页下一页7.图层属性的设置图层创建后，可以通过“图层属性”对话框修改图层的属性。点击【修改】菜单栏→【时间轴】→【图层属性】命令，或选择图层快捷菜单中的【属性】命令，弹出“图层属性”对话框，如图1-36所示。项目任务上一页下一页项目任务上一页（1）名称：用于图层的重命名。（2）显示：用于设置该图层处于显示状态还是隐藏状态。（3）锁定：用于设置该图层处于锁定状态还是解锁状态。（4）类型：用于设置图层的种类，一共有5个单选项。一般：表示是普通图层；遮罩层：表示该图层是遮罩层，遮罩层的对象可以镂空的显示出其下面被遮罩图层中的对象；被遮罩层：表示该层为被遮罩层，与遮罩层结合使用可以制作遮罩动画；文件夹：表示将该层设置为“文件夹”