大学计算机-卓越-第6章-项目10

1、大学计算机面向实践与创新能力培养第6章 多媒体技术与信息可视化卓越工程师培养计划提纲3项目10：实践操作引导4项目10：拓展与创新第6章 多媒体技术与信息可视化项目10：Flash制作汽油发动机原理动画12项目10：知识和技能储备项目10 Flash制作汽油发动机原理动画项目10项目描述利用Flash制作汽油发动机原理动画。熟悉Flash制作动画的一般过程，学习动画作品的创意。熟悉和掌握Flash中基本图形的绘制方法、元件的使用、基本动画的制作。使用ActionScript制作交互动画。掌握Flash设计技巧，为深入学习动画制作奠定基础。汽油发动机的基本部件是气缸、活塞、连杆和曲轴。气缸将可燃

2、混合气封闭并使其在气缸中燃烧，活塞、连杆和曲轴一起工作，将可燃气体燃烧爆炸产生的能量转化为旋转运动，整个过程分为进气冲程、压缩冲程、燃烧冲程和排气冲程。将发动机工作原理以动画课件的方式展现，能更直观地让学生理解其原理。为突出重点，本项目只演示了凸轮推动止推阀实现进气和排气、缸内燃气燃烧做功推动活塞的动画，其他如曲轴连杆等机械传动方面的动画，这里不涉及。项目10 Flash制作汽油发动机原理动画项目10 Flash制作汽油发动机原理动画项目10 Flash制作汽油发动机原理动画首先运用Flash的图形绘制工具制作图形元件，如凸轮、止推阀、缸壁、喷油嘴、火花塞、进气和排气管道等，再把图形元件组合为

3、影片剪辑元件。主要的动画可以分解为几个方面。凸轮旋转、止推阀在凸轮的推动下上下运动，实现闭合或打开进气门、排气门，通过逐帧动画实现。活塞的上下运动，主要是位置的移动，主要使用补间动画实现。但活塞在曲轴连杆的推动下运动，并非匀速，所以使用了部分逐帧动画。项目10 Flash制作汽油发动机原理动画进气和排气用箭头示意，使用补间动画实现。喷油嘴喷油效果通过遮罩动画实现。可燃混合气进入气缸后被压缩，再被点燃，最后被排出。在所有的变化中，可燃气既要充满气缸的每个角落，但又要完全限制在气缸内部，可燃气点燃效果和气体在气缸内的变化用逐帧动画实现。动画播放和暂停使用ActionScript语言实现。项目10

4、知识和技能储备项目10知识和技能储备Flash是Web动画的标准，目前已发展为集动画创作、应用程序开发于一身的创作软件，为创建动画、交互式Web站点、桌面应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。Flash作品可包含图形、图像、声音、视频等丰富类型的媒体素材，无论是制作简单的动画，还是开发Flash应用程序，都可以得心应手，配合内置的ActionScript 3.0语言可开发高级的交互式应用。项目10 知识和技能储备Flash作品的优点是文件容量小、适用范围广、图像质量高、下载速度快、交互性强和可跨平台播放。在动画短片、音乐MV、电子贺卡、多媒体课件、交互式游戏产品、广告网络

5、广告和动态网站制作等方面得到广泛应用。项目10 知识和技能储备1 Flash动画设计流程(1) Flash动画的创意 Flash动画创意之魂 Flash动画创意实现的手段 Flash动画创意遵循的原则(2) Flash动画制作剧本策划、角色设计、制作环节项目10 知识和技能储备2 初识Flash(1) Flash工作界面(2) 图形绘制矢量图形是是制作高质量而又个性鲜明的动画的基础。绘制图形时，先在“工具箱”中选择相应工具，在“属性”面板设置工具属性，如“笔触颜色”、“笔触大小”、“填充颜色”等，之后在舞台开始绘制图形。工具箱属性面板项目10 知识和技能储备绘制好的图形可进一步编辑修改，如使用

6、“墨水瓶工具”修改图形边框颜色、“颜料桶工具”修改填充颜色、“任意变形工具”调整位置、变形、多个图形的对齐、“选择工具”和“部分选取工具”编辑图形形状等。绘制对象还是形状线条工具绘制对象或形状的区别项目10 知识和技能储备(3) Flash动画制作环境动画由多个帧组成，帧中的内容随着时间的改变而发生变化，从而形成动画。如果同一时刻动画内容较多，可把内容组织到不同的图层。时间轴（Timeline）时间轴用于组织和控制动画在时间段内的图层和帧中的画面内容，Flash动画文档由若干帧组成，组成动画的每一个画面就是一个帧，帧越多，动画需要播放的画面也越多，播放时间越长。项目10 知识和技能储备图层就像

7、堆叠在一起的多张幻灯胶片一样，每个图层都包含一个或多个显示在舞台中的不同对象。时间轴的主要组成部分是图层、帧和播放头。时间轴顶部的时间轴标题指示帧编号，播放头指示当前在舞台中显示的帧，播放动画文档时，播放头从左向右移动，在时间轴底部显示所选的帧编号、当前帧速率以及到当前帧为止的运行时间。时间轴面板是创建动画的基础面板。选择“窗口时间轴”命令（Ctrl+Alt+T），可打开或隐藏“时间轴”面板。项目10 知识和技能储备帧时间轴右方的每一个小方格代表一个帧，一个帧包含了动画中某个时刻的画面，Flash的帧分为普通帧、关键帧和空白关键帧，在时间轴中不同帧的标识不同。 普通帧：在时间轴上能显示实例对象

8、，但不能对实例对象进行编辑操作的帧。普通帧一般处于关键帧后方，其作用是延长关键帧动画的播放时间。项目10 知识和技能储备 关键帧：有关键内容的帧，即动画在播放过程中呈现关键性动作或关键性内容的帧。不同的关键帧分布在时间轴上，播放时就会呈现出动态的视觉效果。 空白关键帧：它是关键帧的一种，其中没有任何内容。如果舞台上没有任何内容，那么插入的关键帧相当于空白关键帧。帧的编辑操作包括“选择帧、插入帧、删除帧、移动帧、复制帧、清除关键帧、清除帧转换帧、翻转帧”等，在帧查看区域右击鼠标，弹出的菜单中提供了帧操作命令。另外在时间轴底部有一排绘图纸按钮，能同时显示、编辑多个帧的内容；在时间轴右上角可设置帧的

9、显示状态。项目10 知识和技能储备图层图层的概念和Photoshop的图层类似，图层在图形绘制、创建特殊效果方面具有重要意义。Flash提供了多种类型的图层供用户选择，每种类型的图层均有图层的基本属性。 普通图层启动Flash后，默认情况下只有一个普通图层，单机时间轴左下角的“新建图层”按钮可新建一个普通图层。项目10 知识和技能储备 遮罩层与被遮罩层遮罩层的作用是对下一图层（即被遮罩层）进行遮盖。在遮罩层中可以绘制出各种形状，并且可以填充任意颜色。被遮罩的部分是可见部分，需把遮罩层和被遮罩层同时锁定才可看到遮罩效果。在需要设置为遮罩层的图层上右击鼠标，选择快捷菜单中的“遮罩层”命令，即可将该

10、图层转换为遮罩层，下方的图层自动变为被遮罩层。项目10 知识和技能储备 引导层与被引导层这种类型的图层可以设置引导线，用来引导被引导层中的图形依照引导线进行移动。在需要放置引导的图层上右击，选择快捷菜单中的“引导层”命令，即可将该图层变为引导图层，它下面图层中的对象将被引导。引导层中的所有内容只是在制作动画时作为引导路径，并不出现在作品的最终效果中。项目10 知识和技能储备 文件夹图层文件夹图层可以将层分组，被放到同一个文件夹中的层可以作为整体来设置显示模式，还可以收起来，以节省界面空间。图层操作包括新建图层、删除图层、重命名图层、设置图层的属性、设置图层状态（显示与隐藏图层、锁定图层和显示图

11、层的轮廓）。项目10 知识和技能储备场景和舞台场景是动画元素的活动空间，就像电影或多幕舞台剧一样，一部动画的场景可以不止一个，新建动画文件后，默认的场景为“场景1”。要查看影片中的特定场景，选择“视图转到”命令，再从其子菜单中选择场景的名称。场景包括舞台和工作区，就像在摄影棚中拍摄电影一样，摄影棚可以看作是场景，而镜头对准的地方就是舞台，舞台是编辑和播放动画的矩形区域。在舞台上可以依据时间轴的当前帧位置放置“道具”、安排“演员”等，这些称之为动画元素，如绘制的图形、制作的按钮、导入的位图图像、声音、视频剪辑等对象项目10 知识和技能储备3 使用元件元件（Symbol）是影片中可重复使用的动画元

12、素，且多次使用不会显著增加文件的大小。影片中的每个元件都具有独立的工作区、图层和时间轴。创建元件时可以使用图形、位图、组合、声音，甚至是其他元件，但不可以将元件置于其自身内部。Flash元件包括图形元件、影片剪辑元件和按钮元件3种类型，每一种元件都具有独特的属性。项目10 知识和技能储备 图形元件（Graphic）通常用于存放静态的对象。在使用时限制较多，例如，在元件中不能添加声音，元件的实例不能指定名称，也不能在AS中被引用。 影片剪辑元件（Movie clip）是影片中的动画片段。是用途最广、功能最多的元件类型。某个影片剪辑元件如果具有多个帧，则添加到舞台上的实例会自动按其时间轴进行回放，

13、除非使用AS控制其回放。创建好的影片剪辑元件默认会会成为MovieClip类的一个实例，因此具有MovieClip类的属性和方法。项目10 知识和技能储备 按钮元件（Button）用于在动画中实现交互，对鼠标事件（如单击、滑过等）作出响应。在制作交互性较强的Flash游戏时，按钮元件无处不在。弹起：鼠标指针没有滑过按钮或单击按钮后又立刻释放时的状态。指针经过：表示鼠标指针经过按钮时的外观。按下：表示鼠标单击按钮时的外观。点击：表示用来定义可以响应鼠标事件的最大区域。如果这一帧没有图形，鼠标的响应区域则由指针经过和弹起两帧的图形来定义。项目10 知识和技能储备元件创建好后，存放在“库”面板中，不

14、同元件显示图标不同。从“库”中把元件拖动到舞台生成该元件的一个实例，实例在舞台上可单独编辑，不会影响元件，在“属性”面板可设置实例的有关属性；但反过来，如果编辑修改了元件，Flash会更新文档中该元件的所有实例。项目10 知识和技能储备4 Flash基本动画制作(1) 逐帧动画逐帧动画由多个连续的关键帧组成，通过连续表现关键帧中的对象，从而产生动画效果。由于每个帧都是关键帧，所以动画效果细腻自然，适合表达连续的动作，如奔跑动作、煽动翅膀的动作等。项目10 知识和技能储备(2) 补间形状动画通过两个关键帧中矢量图形的形状差异，由Flash在关键帧之间自动添加变化过程（过渡帧）的动画类型，用于表现

15、两个形状的过渡变化。在两个关键帧处绘制两个矢量形状，在两个关键帧之间点击鼠标右键，在弹出菜单中选择“创建补间形状”命令。如果使用组合或位图对象制作补间形状动画，应使用（修改分离 Ctrl+B）分离对象或打散位图，有时甚至需要多次分离。项目10 知识和技能储备项目10 知识和技能储备(3) 传统补间动画根据同一对象在两个关键帧中（大小、位置等）属性的不同，由Flash在关键帧之间自动添加变化过程的动画类型，用于表现同一对象在不同时间段的属性变化。在两个关键帧中插入同一对象，修改两个帧中对象的某些属性不同，在两个关键帧之间点击鼠标右键，在弹出菜单中选择“创建传统补间”命令。补间动画的主要元素是元件

16、，分离的对象组合后（修改组合 Ctrl+G）才能使用。项目10 知识和技能储备项目10 知识和技能储备(4) 补间动画在传统补间动画中也可以不插入第二个关键帧，只在后面的帧中改变对象的属性值来创建动画补间动画。补间动画只需要第一个关键帧，而且增加了3D效果支持。在第一个关键帧的鼠标弹出菜单中选择“创建补间动画”命令，Flash会自动创建持续时间为1秒钟左右的补间动画，左右拖动最后一帧可以调整持续时间，在持续时间范围内右击鼠标，在弹出菜单中选择“调整补间”命令，时间轴展开为补间调整界面。项目10 知识和技能储备(5) 遮罩动画透过遮罩层中的形状、字体和实例等对象，去看被遮罩层中的对象。如果遮罩层

17、中没有对象，被遮罩层中的对象将无法显示。设计时首先要分析动画的整体效果，确定哪些元件放到遮罩层，哪些元件放到被遮罩层。Flash中没有专门的遮罩层，遮罩层由普通层转换而来，设计时在作为遮罩层的图层上点击鼠标右键，在弹出菜单中选择“遮罩层”命令，普通层转换为遮罩层，再次点击该命令，遮罩层还原为普通层。项目10 知识和技能储备项目10 知识和技能储备(6) 引导动画利用引导线引导物体沿着引导线做运动的动画，只要固定物体在线段上运动的初始点和结束点，物体就可以沿着这条线段运动。引导物体运动的线段称之为引导线，必须是打散的图形，位于引导层，运动的物体位于被引导层，被引导层必须位于引导层的下方。项目10

18、 知识和技能储备项目10 知识和技能储备现实中很多对象的运动轨迹都不是直线，如随风飘落的树叶、水中游动的鱼儿、飞翔的小鸟等，这些动画都可以利用引导动画实现。Flash中没有专门的引导层，引导层由普通层转换而来，设计时在作为引导层的图层上点击鼠标右键，在弹出菜单中选择“引导层”命令，普通层转换为引导层，再次点击该命令，引导层还原为普通层。项目10 知识和技能储备5 使用声音和视频(1) 使用声音（MP3、WAV等）Flash中有事件声音和音频流两种声音类型，事件声音全部下载后才能开始播放，除非明确停止，否则将一直连续播放，比如响应鼠标事件的声音；音频流在前几帧下载了足够的数据后就开始播放，一般与

19、时间轴同步，以便在网上播放，比如Flash MV中的声音。音频文件导入到“库”，再从“库”面板拖动到图层，利用“属性”面板设置“效果”、“同步”等参数。项目10 知识和技能储备导入到库的声音声音同步方式声音图层把“库”面板中的声音拖动到使用位置（某个帧的位置），可能需要插入空白关键帧。项目10 知识和技能储备(2) 使用视频（FLV、F4V等）影片中使用视频，可采用从Web服务器渐进式下载视频、在Flash文档中嵌入视频两种方式。第一种方式需要把视频先上传到Flash Media Server（专门针对传送实时媒体而优化的服务器解决方案），第二种则是将持续时间较短的小视频直接嵌入到Flash文

20、档中，然后将其作为SWF文件的一部分发布。执行菜单命令“文件导入导入视频.”，根据向导提示完成视频导入。导入视频向导部署到FMS服务器的视频，给出URL链接导入视频向导选择要导入的本地视频文件，下方选择视频使用的方式项目10 知识和技能储备6 影片的测试与发布(1) 影片的测试：控制菜单下的命令项目10 知识和技能储备(2) 影片的发布：文件菜单下的相关命令、fla swf项目10 知识和技能储备7 ActionScript 3.0语言ActionScript（简称AS）是Flash内置的一种编程语言，ActionScript 3.0版本，已成了真正的面向对象编程（OOP）语言。在交互动画、动

21、画特效制作、Web程序设计、Flash游戏制作等方面，AS都有广泛应用。(1) ActionScript编程基础 变量和常量 数据类型项目10 知识和技能储备(2) 类和对象AS中的每个对象都由类定义，类是对象的抽象表示形式，用来存储有关对象可保存的数据类型及对象可表现的行为的信息。可将类视为某一类对象的模板，在类定义中可以包括变量、常量以及方法，前者用于保存数据值，后者是封装绑定到类的行为的函数。在影片中可使用AS的内置类，用户也可创建自己的类。项目10 知识和技能储备(3) 对象的属性、方法和事件AS的任何类都可以包含属性、方法和事件三种特性。属性用于描述对象，方法是可以由对象执行的操作，

22、事件是所发生的、能够识别并可响应的事情，是确定计算机执行哪些代码以及何时执行的机制。当AS程序正在运行时，Adobe Flash Player在等待某些事件的发生，当某个事件发生时，就将运行为该事件指定的特定AS代码事件驱动。事件可以由用户触发，如用户单击按钮或按下键盘上的某个键，也可以由系统自动触发，如加载影片剪辑等。项目10 知识和技能储备为响应特定事件而执行特定操作的技术称为事件处理。在编写事件处理的代码时，需要知道三个重要元素：事件源：发生事件的是哪个对象？事件源也称为事件目标。事件：对象的哪个事件发生了？因为许多对象都会触发多个事件。响应：当事件发生时，希望执行哪些操作？编写处理事件

23、的AS代码，都会包括这三个元素，并且代码将遵循以下基本结构：function eventResponse(eventObject: EventType): void/此处是为响应事件而执行的动作eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);项目10 知识和技能储备编写好了事件处理函数，需要告知事件源对象（发生事件的对象，如按钮）在该事件发生时调用函数，可通过调用该对象的addEventListener()方法来实现此目的（所有具有事件的对象都具有addEventListener()方法）。addEventLi

24、stener()方法有两个参数，第一个是要响应的特定事件的名称，第二个是事件响应函数的名称。单击playButton按钮播放mcRabbit元件的AS代码：function playMovie(event: MouseEvent): voidmcRabbit.play();playButton.addEventListener(MouseEvent.CLICK, playMovie); 项目10 知识和技能储备(4) 常用编程元素 运算符 注释：/、/*/ 流控制：条件语句、循环语句（5）函数函数（function）是程序中可重复调用的代码块，使用前需要先定义。如果将函数定义为类的一部分或者将

25、它附加到对象的实例，则函数称为对象的方法，作为对象的方法调用；如果以其它方式定义函数，则可独立调用。项目10 知识和技能储备例如，下面的代码定义一个名为traceParameter的函数，参数aParam为String类型，将字符串“Hello!”作为参数值来调用该函数：function traceParameter(aParam: String) trace(aParam); /在Flash输出窗口输出参数aParam的值traceParameter(Hello!); /调用函数，传递参数项目10 知识和技能储备调用函数时，利用函数名，小括号内加上参数的实际值，注意参数实际值的类型和个数必须

26、和定义函数时的参数一致。如果没有参数，直接写小括号。如果函数作为类的方法，则应先创建类的实例（对象），通过对象调用函数。如下面的random函数是Math类的方法，通过调用该方法实例化对象randomNum。var randomNum: Number = Math.random();项目10 知识和技能储备(5) 使用包在AS代码中使用包（package）组织代码，有利于共享代码并尽可能减少命名冲突。AS的大部分内容都划分到flash包中，如果希望使用位于某个包内部的特定类，则必须导入该包或该类。例如，使用ActionScript内置的包：import flash.display.MovieC

27、lip;/导入MovieClip类import flash.events.MouseEvent;/导入MouseEvent类import flash.events.KeyboardEvent;/导入KeyboardEvent类项目10 知识和技能储备(6) 使用ActionScript构建应用程序 将代码存储在Flash时间轴的帧中将AS代码添加到影片或影片剪辑元件的时间轴中的任何帧，播放头进入该帧时执行。这种组织代码的方式在构建较大的应用程序时，会变得越来越难以维护，也不利于在不同的项目之间共享代码。编写代码时，按F9键或执行“窗口动作”命令打开“动作”面板窗口。在时间轴中选择编写代码的帧，

28、在编辑区输入代码，代码保存在.fla文件中。项目10 知识和技能储备将代码存储在ActionScript文件中如果项目中包括重要的AS代码，或者希望在不同的Flash项目间共享AS代码，则最好在单独的AS源文件（扩展名为.as的文本文件）中组织代码，代码源文件（.as）和影片文件（.fla）保存在同一文件夹下。可以采用以下两种方式之一来设置AS文件的结构。非结构化AS代码方式编写AS代码行（包括语句或函数定义），就像直接在时间轴的帧中写AS代码一样。项目10 知识和技能储备新建AS源文件后，进入“脚本”面板窗口编写代码，完成后把文件保存到和fla相同的文件夹下。选择影片文件时间轴中的第一帧，按

29、F9键打开“动作”面板窗口，在编辑区用include语句访问源文件中的代码。格式为：include sample.as /访问代码源文件sample.as项目10 知识和技能储备非使用ActionScript类定义定义一个AS类，通过创建该类的一个实例并使用它的属性、方法和事件来访问该类中的AS代码，这和使用AS内置类的方式一样。新建AS类后，会自动新建一个类的编辑窗口，并自动生成基本的类代码。类代码编写完成后把文件保存到和fla相同的文件夹下。在影片的“属性”面板的“类”位置指定类名称。项目10 实践操作引导项目10实践操作引导1 创建动画文件新建Flash文档，类型选择“ActionScr

30、ipt 3.0”，属性保持默认值不变，保存文件为“汽油发动机原理.fla”。项目10 实践操作引导2 制作图形元件本项目用到的图形元件包括“气缸壁、气缸盖、活塞、止推阀、止推阀凸轮、火花塞、喷油嘴、点火时的爆破星形（红色、黄色各1个）、进气排气管道、进气排气箭头、喷油形状，喷油遮罩形状、混合气变化形状”等。喷油遮罩形状点火黄色点火红色气体变化喷油嘴火花塞活塞凸轮止推阀进气排气箭头进气排气管道喷油形状缸壁缸盖项目10 实践操作引导注意几点：工具箱下方“对象绘制”按钮按下、不按下的区别。“修改”菜单下的“组合”和“分离”命令的使用。“选择工具”和“部分选取工具”的使用。灵活使用图层绘制复杂对象。“墨水瓶”和“颜料桶”工具的使用。项目10 实践操作引导3 制作影片剪辑元件制作一个名为“缸体”的影片剪辑元件，把“气缸壁、气缸盖、火花塞、喷油嘴、进气排气管道”组合在一起。项目10 实践操作引导4 制作按钮元件项目中用到“播放”和“暂停”两个按钮，名称分别为playButton和pauseButton。两个按钮的制作方法相同。文字Play圆形背景播放标识项目10 实践操作引导5 动画制作(1) 利用“缸体”影片剪辑元件制作持续40帧的动画。(2) 制作制作喷油动画 - 遮罩动画。(3) 制作活塞运动动画