flash动画设计与制作项目教程 项目一.docx

1、flash动画设计与制作项目教程 项目一项目一、认识设计环境教学目标1. 了解Flash的发展、应用领域、制作流程及相关知识2. 了解Flash CS3的工作界面3. 了解Flash CS3一些常用术语4. 掌握Flash CS3的基本操作任务1、绘制水果训练目标1. 了解Flash的发展历史及动画的设计原则2. 了解Flash动画的应用领域及制作流程3. 绘制水果效果如下图所示知识链接1. Flash概述Flash是美国Adobe公司推出的一款多媒体动画制作软件。它是一种交互式动画设计工具，可以把音乐、音效、动画以及多种元素融合到一起，制作出高品质的动态效果。Flash动画有别于GIF动画，

2、它在很大程度上减小了文件的大小，提升了网络传输的效率, Flash已经成为一个跨平台的多媒体标准。2. FLASH特点1) 使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量，画面永远保持清晰，不会出现类似位图的锯齿现象；流式播放技术使得动画可以边播放边下载，从而避免网页浏览者的长时间等待。2) 高超的压缩性能。通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放，非常适合在网络上进行传播与

3、播放。3) 把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的“身材”。4) 多样的文件导入导出格式：Flash支持多样的文件导入导出，不仅可以输出.fla动画格式，还可以.avi、.gif、.html、.mov、.smil、和可执行文件的.exe等多种文件格式输出。即便用户不会使用这些相关软件的制作也一样可以用Flash解决。大部份的位图图像格式和矢量图文件格式都可以在Flash中导入， Flash也支

4、持大部分视频音频格式的导入和输出。能够制作影音俱佳的多媒体动画。5) 优秀的交互功能：通过ACTION和FS COMMAND可以实现强大的交互功能，真正的实现了人机对话。另外，它与当今最流行的网页设计工具DreamWeaver配合默契，可以直接嵌入到网页的任意位置，非常方便。3. FLASH的应用领域在现阶段，FLASH应用的领域主要有以下几个方面：1) 娱乐短片这是当前国内最火爆，也是广大FLASH爱好者最热衷应用的一个领域，就是利用FLASH制作动画短片，以供大家娱乐。是一个发展潜力很大的领域。其中最典型的代表如“小破孩”、“大话三国”和“小小作品”等，如图所示。 2) 网站片头使用Fla

5、sh制作的动画片头相对于传统的图片和GIF动画，可以实现视觉冲击力更强的表现效果。网站以片头作为过渡页面，在片头中播放一段简短精美的动画，就如同电视的栏目片头一样，可以在很短的时间内把自己的整体信息传播给访问者，增强访问者的印象。如图所示。3) 网站广告这是最近两年开始流行的一种形式。有了FLASH，广告在网络上发布才成为了可能。而且根据调查资料显示，国外的很多企业愿意采用FLASH制作广告，因为它既可以在网络上发布，同时也可以存成视频格式在传统的电视台播放。一次制作，多平台发布，所以必将会越来越得到更多企业的青睐。如图所示。 4) MTV这也是一种应用比较广泛的形式。在一些FLASH制作的网

6、站，如“闪客帝国”等，几乎每周都有新的MTV作品产生。在国内，用FLASH制作MTV也开始有了商业应用，如图所示。 5) Flash导航条和Flash整站点FLASH按钮功能非常强大，是制作菜单的首选。通过鼠标的各种动作，可以实现动画、声音等多媒体效果。有很多网站都采用Flash技术搭建，给用户以全新的体验，如图所示。6) 小游戏利用FLASH开发“迷你”小游戏，把网络广告和网络游戏结合起来，让受众参与其中，大大增强广告效果，如图所示。 7) 产品展示由于FLASH有强大的交互功能，所以一些大公司，如Dell、三星等，都喜欢利用它来展示产品。可以通过方向键选择产品，再控制观看产品的功能、外观等

7、，互动的展示比传统的展示方式更胜一筹，如图所示。 8) 应用程序开发的界面传统的应用程序的界面都是静止的图片，由于任何支持ActiveX的程序设计系统都可以使用FLASH动画，所以越来越多的应用程序界面应用了FLASH动画，如金山词霸和瑞星杀毒软件的安装界面，如图所示。9) 开发网络应用程序目前FLASH已经大大增强了网络功能，可以直接通过XML读取数据，又加强与ColdFusion、ASP、JSP和Generator的整合，所以用FLASH开发网络应用程序肯定会越来越广泛的被应用，如图所示。4. 新建文件制作Flash动画之前必须新建一个Flash文件，这也是制作动画的第一步，通常新建Fla

8、sh文件有以下3种方法：（1）启动Flash CS3后，出现“开始页”界面，在“新建”栏中单击“Flash文件（ActionScript 3.0）”选项即可新建一个Flash文件。（2）单击“主工具栏”中的“新建”按钮，也即可创建一个Flash文件。（3）选择“文件”“新建”命令或按【Ctrl+N】键，打开 “新建文档”对话框中选择“Flash文件（ActionScript 3.0）”选项，单击“确定”按钮即可。在“新建文档”对话框中单击“模板”标签，在其中选择相应的模板类型，这里选择“广告”下的“46860（横幅）”，单击“确定”按钮即可新建一个基于模板的Flash文件。5. 保存文件对于制

9、作过程中的Falsh文件，要不间断地进行保存，便于当软件或计算机出现异常时Flash文件的数据不丢失。制作完Flash文件，也应将其保存起来，便于以后使用。保存Flash文件常用有以下两种方法：（1）选择“文件”“保存”命令或按【Ctrl+S】键即可。如果用户之前并未保存过此文档，那么将打开 “另存为”对话框，选择保存的位置，为文档命名并选择保存类型后，单击“保存”按钮即可。（2）单击“主工具栏”中的“保存”按钮即可。具体保存方法与“保存”命令相同。在Flash CS3中，为什么选择的是“保存”命令，而弹出的是“另存为”对话框？因为这是软件自身的设置，在Flash软件中首次保存文档都显示“另存

10、为”对话框，不是用户的失误操作。 6. 关闭文件 当不需要使用当前的动画文件时，需要将其关闭，关闭Flash有“关闭当前文档”和“关闭软件”两方面。具体操作说明如下： （1）关闭当前文档选择“文件”“关闭”命令或按【Ctrl+W】键或单击文档窗口右上角的按钮将其关闭。如果此文档没有保存，将打开“Adobe Flash CS3”对话框让用户确认是否需要保存当前文档，用户可以根据情况单击相应的按钮。（2）关闭软件选择“文件”“退出”命令或按【Ctrl+Q】键或单击软件窗口右上角的按钮将退出软件程序。如果此文档没有保存，将打开“Adobe Flash CS3”对话框让用户确认是否需要保存当前文档，用

11、户可以根据情况单击相应的按钮。 7. 打开文件 如果要编辑或查看一个已有的Flash文件，只需要打开此Flash文件即可。打开Flash文件常用有以下两种方法：（1）选择“文件”“打开”命令或按【Ctrl+O】键，打开 “打开”对话框，然后在“查找范围”下拉列表框中选择要打开的文档所在的位置，再在“文件名”下拉列表框中输入要打开文档的文件名，或直接在列表中选中要打开的文件图标，最后单击“打开”按钮即可。（2）单击“主工具栏”中的“打开”按钮，具体操作方法与“打开”命令相同。8. 测试影片 在Flash动画制作过程或完成动画制作后，要对动画进行效果测试，这就是通常所说的发布动画。对于动画文件的测

12、试，最简单的方法就是按【Ctrl+Enter】键或选择“控制”“测试影片”命令，即可测试并浏览动画效果。按【Ctrl+Enter】键或选择“控制”“测试影片”命令后，除了测试动画文件的效果外，还将在保存源文件的目的文件夹下生成一个扩展名为.SWF的文件 。操作步骤及要求1绘制大鸭梨1) 新建一个Flash文档，按【Ctrl+S】组合键另存为“绘制水果”。2) 选择“椭圆工具”在舞台上绘制一个椭圆，然后再用“选择工具”调整椭圆形状，再用“铅笔工具”绘制一条曲线，如下图所示。3) 选择“颜料桶工具”为鸭梨填充颜色为：#FFCC00，然后用“铅笔工具”绘制一些小点，如下图所示。 2绘制樱桃1) 新建

13、图层2，选择“椭圆工具”在舞台上绘制两个正圆，再用“铅笔工具”绘制两条曲线，如下图所示。2) 选择“颜料桶工具”为樱桃填充颜色为：#FF3300。效果如下图所示。 3绘制西瓜1) 新建图层3，选择“椭圆工具”，将笔触颜色设置为：黑色，高度设置为：2，填充设置为：无，在舞台上绘制一个正圆；再选择“铅笔工具”，将笔触颜色设置为：#666600，高度设置为：5，绘制一条曲线，如下图所示。2) 选择“颜料桶工具”为西瓜填充颜色：#669900。然后选择“刷子工具”，设置刷子大小，再设置填充颜色为：#99CC00,在填充区域内绘制西瓜纹，效果如下图所示。 4绘制西瓜瓤1) 新建图层4，选择“直线工具”，

14、将笔触颜色设置为：黑色，高度设置为：2，在舞台上绘制下图所示形状。2) 选择“颜料桶工具”为西瓜瓤填充颜色：#FF3265，然后设置颜色：#99CC00，为瓜皮填充颜色。然后选择“刷子工具”，设置刷子大小和形状，再设置填充颜色为黑色,在填充区域内绘制西瓜仔，效果如下图所示。 评价标准序号评价内容评价标准分值1大鸭梨形状逼真，颜色适当。202樱桃形状逼真，颜色适当。253西瓜形状逼真，颜色适当。304西瓜瓤形状逼真，颜色适当。25作业布置1上机练习Flash文档的新建、保存、打开与关闭操作。2绘制下图所示图像效果。任务2、奔跑的豹子训练目标1了解Flash CS3的工具界面组成2熟悉各部分面板的

15、功能作用3掌握各种flash术语的含义及作用4掌握在Flash中制作简单动画的基本方法5创建如图所示豹子奔跑的动画知识链接Flash工作界面运行Adobe Flash CS3以后，会出现Adobe Flash CS3界面，如图所示。Adobe Flash CS3的工作环境包括标题栏、菜单栏、主工具栏（第一次运行时需要手动设置显示出来，单击菜单栏中【窗口】【工具栏】【主工具栏】）、时间轴、舞台工作区、工具箱、状态栏和其他各种对话框等，如图所示。接下来对界面上的不同组件做进一步的介绍。标题栏用过windows其他程序的用户都会知道，任何一个windows应用程序窗口或文档窗口的最上方都有标题栏，标

16、题栏的主要作用就是显示当前运行的主要应用程序和文档名，flash也是一样。在标题栏的最左侧有一个flash标志，用鼠标单击，会出现应用程序窗口控制菜单，可以对应用程序窗口的尺寸、位置及打开关闭操作进行控制。1. 菜单栏菜单栏位于标题栏的下方。每个菜单下面都有子菜单，有的菜单下还包括三级、四级子菜单。用鼠标单击菜单名，就可以打开下拉式菜单，从中选择相应的选项来完成各种操作。主工具栏FlashCS3的主工具栏提供了一些常用的工具，它由一组带有通用的象形示意的按钮组成，形象直观地表现出各个图标的功能，如图所示。工具箱Flash CS3的工具箱的功能非常强大，在默认状态下工具箱位于窗口左侧单列竖排放置

17、。用户可通过鼠标拖动，将它放在桌面任何位置。通过工具箱上一系列按钮，用户可完成对象选择、图形绘制，文本录入与编辑、对象控制与操作等工作。单击颜色填充区域，会弹出一个颜色选取框。时间轴时间轴用来显示编辑图层和帧。用于组织和控制影片内容在一定时间内播放的层数和帧数。与胶片一样，Flash影片的长度由它的帧决定。图层就像层叠在一起的幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。时间轴状态显示在时间轴的底部，它指示所选的帧编号、当前帧、当前帧频以及到当前帧为止运行的时间。舞台工作区舞台工作区就是Flash CS3的主要工作窗口。在舞台上，我们可以对flash的内容进行编辑，舞台也是flash

18、影片播放的区域，其中灰色区域的内容，在影片发布以后是不可见的。面板和属性检查器默认工作界面的右侧和下侧是浮动面板区域和属性检查器，它们功能强大并且在工作中最为常用。Flash中有很多面板，可以在主菜单中把它们打开或关闭，Flash可以根据需要自定义工作区，如图所示。使用面板和属性检查器，可以查看、组合和更改资源及其属性。可以显示、隐藏面板和调整面板的大小，也可以组合面板并保存自定义的面板设置，从而能更容易地管理工作区。属性检查器在操作时实时显示结果，以反映正在使用的工具和资源，从而能够快速访问常用功能，使操作更具有交互性。对Flash的操作界面有了初步的认识后，在真正动手做动画之前，先了解一下

19、Flash的常用术语，好对Flash有一个概念性的了解。2. 对象在Flash中创建的各种线条、图案、声音元素统称为对象。帧(Frame)我们知道一段动画（电影）是由一幅幅的静态的连续的图片所组成的，在这里称每一幅的静态图片为“帧”。一个个连续的“帧”快速切换就形成了一段动画，帧是Flash中最小的时间单位。根据帧的作用区分，可以将帧分为普通帧（包括普通帧和空帧）、关键帧（包括关键帧和空白关键帧）、过渡帧（包括形状过渡帧和运动过渡帧）三类，如图所示。图层（Layer）图层可以看成是叠放在一起的透明的胶片，如果层上没有任何东西的话，就可以透过它直接看到下一层，所以可以根据需要，在不同层上编辑不同

20、的动画而互不影响，并在放映时得到合成的效果。在Flash中打开图层属性面板，如图所示，可以看到图层有普通层、遮罩/被遮罩、引导/被引导层这五类。场景(Scene)电影需要很多场景，并且每个场景的对象可能都是不同的。与拍电影一样，Flash可以将多个场景中的动作组合成一个连贯的电影。场景的数量是没有限制的，可以通过场景(Scene)面板来完成对场景的添加/删除操作，并可以拖拽其中各场景的排列顺序来改变播放的先后次序，如图所示。元件（symbol）元件又称作符号，是指电影里的每一个独立的元素，可以是文字、图形、按钮、电影片段等，就象电影里的演员、道具一样。一般来说，建立一个flash动画之前，先要

21、规划和建立好需要调用的元件，然后在实际制作过程中随时可以使用，如图所示。实例（Instance）当把一个元件放到舞台或另一个元件中时，就创建了一个该图符的实例，也就是说实例是元件的实际应用。元件的运用可以缩小文档的尺寸，这是因为不管创建了多少个实例，Flash在文档中只保存一份副本。同样，运用元件可以加快动画播放的速度。动作脚本（ActionScript）ActionScript是Flash的脚本语言，与JavaScript相似，ActionScript是一种面向对象编程语言。Flash使用ActionScript给电影添加交互性。在简单电影中，Flash按顺序播放电影中的场景和帧，而在交互电

22、影中，用户可以使用键盘或鼠标与电影交互。操作步骤及要求1新建一个Flash文档，按【Ctrl+S】组合键另存为“奔跑的豹子”。2导入动画所需要的草原背景，执行菜单“文件导入导入到舞台”命令，将素材文件“草原.jpg”导入到场景中。用选择工具调整图片在舞台上的位置，使其居于舞台的中央，选择第50帧，按【F5】键，添加普通帧。3创建豹子的影片剪辑元件。执行菜单“插入新建元件”命令，在打开的“创建新元件”对话框中输入名称“豹子”，在选择类型“影片剪辑”，如下图所示：4在影片剪辑“豹子”的编辑状态下，执行菜单“文件导入导入到舞台”命令，从相应的路径下找到图片“豹子.fif”执行导入操作，这样在库中就建

23、立了一个豹子原地跑动的影片剪辑元件，如下图所示：5单击插入图层按钮，新建一个图层，从库面板中将名称为“豹子”的元件拖放到舞台上，并放置在舞台的左侧。6选中豹子所在层的第50帧，按【F6】键插入一个关键帧，并把该帧的“豹子”实例移动到舞台的右侧，并将尺寸适当缩小一点。7用鼠标右键单击图层2的第1帧，从弹出的快捷菜单中选择“创建补间动画”命令，如下图所示，这样豹子奔跑的动画就创建好了。评价标准序号评价内容评价标准分值1草原背景导入草原背景并设置大小与位置202豹子影片剪辑元件导入豹子图片并创建为影片剪辑元件303将豹子动画制作在舞台上完成豹子由左向右奔跑的动画50作业布置制作如图所示“森林中的小兔

24、”动画效果。知识拓展3. 使用标尺在Flash中，若要显示标尺，可以执行菜单“视图标尺”命令，此时可以将标尺显示出来，如左下图所示。 默认情况下，标尺的度量单位为像素，用户可以对其进行更改。执行菜单“修改文档”命令，打开“文档属性”对话框，在标尺单位下拉列表中选择一种合适单位即可，如右下图所示。使用网格执行菜单“视图网格显示网格”命令，可以显示或隐藏网格线，如左下图所示。 另外，用户还可以根据需要对网格的颜色和大小进行修改，还可以设置贴紧至网格及贴紧精确度。执行菜单“视图网格编辑网格”命令，在弹出的“网格”对话框中进行相应的设置即可，如右下图所示。使用辅助线如果显示了标尺，在垂直标尺或水平标尺上按住鼠标左键并拖动到舞台上，辅助线就被绘制出来了，它的默认颜色为绿色，如左下图所示。 通过执行菜单“视图辅助线编辑辅助线”命令，可以修改辅助线的颜色等如右下图所示。