Transcript 多媒体应用基础 - 计算机与软件学院

计算机
动画技术
4.1 计算机动画基础
传统动画：
通常认为第一部动画影片是由
J.Stewart Blackton于1906年创作
的滑稽脸的幽默面。
1946年美国创作第一部长篇真
人与动画合演的动画片《南方之歌》。
制作流程：根据剧本中的人物和活动场景，先用铅笔画在动画纸
上，然后用钢笔把线条描在透明的化学板(赛璐璐)上，再用毛笔
在化学板的反面涂上各种颜色。把已绘制好的背景和人物合在一
起，放在平面的摄影台上，由摄影师一张一张地拍成电影胶片，
再冲洗出电影影像。
4-2
计算机
动画技术
4.1 计算机动画基础
在拍摄动画片大闹天宫时，几十位动画工作
者花了近两年的时间才完成,共绘制了600多万张
图画。
美国迪士尼公司于1937年
创作的第一部长达83分钟的
大型动画片《白雪公主和七个
小矮人》，共绘制了两亿张草
图，最后用来拍摄的图画有
250 000张。
4-3
计算机
动画技术
4.1 计算机动画基础
计算机动画：1964年,Bell实验室的Ken
Knowlton博士制作了第一部计算机动画片。
1971年，被称为计算机动画之父的Nestor
Burtnyk和Marceli Wein 提出了计算机产生关
键帧动画技术,并应用该技术开发了MSGEN二
维动画系统。
《玩具总动员》
《侏罗纪公园》
《泰坦尼克号》
4-4
计算机
动画技术
4.1 计算机动画基础
一、动画与计算机动画
动画是通过一定速度播放的连续画面来显示
运动和变化的过程。其含义有：
①播放速度：24 f/s、25 f/s、30 f/s。
②运动过程：动画的本质。
③变化过程：色彩变化、光强变化。
计算机动画是借助于计算机生成一系列连续
图像并动态播放的计算机技术。
4-5
计算机
动画技术
4.1 计算机动画基础
二、计算机动画的分类
1.按动画的系统功能分类
第一级：用于交互产生、着色、存储、检索
和修改图像，不考虑时间(图像编辑器)。
第二级：实现中间帧的计算。
第三级：提供形体的操作(平移、旋转)。
虚拟摄像机的操作(镜头推移)。
第四级：定义角色。
第五级：智能动画系统(自学习能力)。
4-6
计算机
动画技术
4.1 计算机动画基础
2.按动画的制作原理分类
⑴二维动画(计算机辅助动画)
二维动画可实现中间帧生成，即根据两个关
键帧生成所需的中间帧(插补技术)。
二维动画系统的功能(第二级)
①中间帧画面生成
②着色
③预演
④后期制作
4-7
计算机
动画技术
4.1 计算机动画基础
⑵三维动画(计算机生成动画)
三维动画是采用计算机技术来模拟真实的三
维空间(虚拟真实性)。
三维动画系统的功能(第三、四级)
①定义角色
②构造几何造型
③设置运动和灯光
④调整材质和贴图
⑤生成连续画面
4-8
计算机
动画技术
4.1 计算机动画基础
三、计算机动画文件格式
1.GIF(Graphics Interchange Format)
在一个文件中同时存储若干幅静止图像，并进而形
成连续的动画。
2.SWF(Shock Wave Flash)
Flash软件的专用格式，支持矢量图形和点阵图像，
可与HTML文件充分结合，广泛应用于网页。
3.FLIC(FLI/FLC)
Autodesk公司在其2D/3D动画制作软件中采用的
彩色动画文件格式，FLIC是FLC和FLI的统称。
4-9
计算机
动画技术
4.1 计算机动画基础
4.QTM（Quick Time）
Apple公司的动画文件格式，能通过Internet
提供实时的数字化信息流、工作流与文件回放，可
用于保存音频和运动视频信息。
5.VRML（Virtual Reality Modeling
Language）
面向Web，用于建立真实世界的场景模型或虚
构三维世界的场景建模语言，具有平台无关性。
4-10
计算机
动画技术
4.1 计算机动画基础
四、计算机动画的应用
1.影视广告
主要用于制作电视广告、电视片头、卡通片、
电影片头和电影特技等。
电视广告：计算机动画可制
作出神奇的视觉效果，以取得特
殊宣传效果和艺术感染力。
电影《玩具总动员》：没有真人演员表演的
故事片，这部长达77分钟的影片全部由计算机
动画和计算机合成图像组成。
4-11
计算机
动画技术
4.1 计算机动画基础
2.工程设计
计算机辅助设计/制图，正朝着利用计算机动
画的后期预览发展。
工程图纸设计完后，指定立体模型材质，制
作三维动画。如机械运动的效果、楼房建筑的
透视和整体视觉效果。
4-12
计算机
动画技术
4.1 计算机动画基础
3.飞行模拟
飞行模拟器：它能训练飞行员模拟起飞和着
陆、操纵各种手柄、观察各种仪器以及在舷窗能
看到机场跑道或自然景象等。
在航天、导弹等复杂的系统工程中，先建立
模型，再用计算机动画模拟真实系统的运行，调
节参数，获得最佳运行状态。
4-13
计算机
动画技术
4.1 计算机动画基础
4.教育与娱乐
教育：利用计算机动画可将各种现象或模型
形象生动地表现出来，如化学反应时分子结构变
化、机器结构模型拆装。
娱乐：利用计算机动画产生模拟环境，使人
有身临其境的感觉。
4-14
计算机
动画技术
4.1 计算机动画基础
5.科学计算可视化
通过计算机动画将科学计算过程及结果转换
为图形或图像并显示出来，如计算标量数据场、
流体动力学分析等。
4-15
计算机
动画技术
4.1 计算机动画基础
6.虚拟现实技术
利用计算机动画模拟产生一个三维空间的虚
拟环境系统。
视觉、听觉、触觉、嗅觉等。
4-16
计算机
动画技术
4.2 计算机动画的制作环境
一、计算机硬件与软件环境
1.硬件配置
图形工作站：SGI、SUN、IBM、HP
高档微型机：Pentium、Macintosh
输入设备：图形输入板、扫描仪
输出设备：视频输出、胶片输出
4-17
计算机
动画技术
4.2 计算机动画的制作环境
2.软件环境
⑴系统软件
操作系统、诊断程序、开发环境和工具
⑵动画软件
二维动画软件：
TOONZ：二维卡通动画制作系统
SGI/IRIX，PC/Windows
4-18
计算机
动画技术
4.2 计算机动画的制作环境
RETAS PRO：专业二维动画制作系统
适用于PC、Apple机
USAnimation：二维卡通制作系统
代表作——《美女和野兽》
点睛辅助动画制作系统：我国第一个拥有
自主版权的计算机辅助制作动画系统。
代表作——《海尔兄弟》
4-19
计算机
动画技术
4.2 计算机动画的制作环境
三维动画软件：
Softimage 3D：擅长于卡通造型和角色
动画，如《侏罗纪公园》中恐龙的制作。
MAYA：擅长于人物或动物动画，如《泰
坦尼克号》中许多画面的制作。
3DS Max：广泛应用于的三维建模、动画、
渲染软件，制作高质量动画、广告等。
Poser：专门用来制作人体，它可以产生各
种类型的人物，如男人、女人、小孩等。
4-20
计算机
动画技术
4.2 计算机动画的制作环境
二、二维动画基本制作过程
1.二维动画制作与三维动画制作的区别
二维动画制作在方法上沿用传统的动画制作
技术，关键帧画面需手工绘制，对动画人员的绘
画艺术能力要求较高。
三维动画的制作是由物体建模、设计材质、
放置灯光和摄像机、设置动画和渲染输出等一系
列过程来完成的。传统手绘方法被完全取消，更
多取决于计算机和相应软件的性能，更注重动画
人员在技术方面的操作能力。
4-21
计算机
动画技术
4.2 计算机动画的制作环境
2.二维动画基本制作过程
(1)前期策划。包括制定企划草案，进行市场调研，
创作文学剧本与分镜头剧本，以及美术设计等方面。
(2)素材制作。根据前期策划收集或者绘制合适的素
材。素材包括背景图片、音效、视频剪辑等多种形式。
(3)动画制作。首先需要根据动画分镜头剧本中的每
个小画面设计角色动作并为动画角色设计每个镜头的关
键画面，然后利用绘图工具绘制动画中的关键帧画面，
再利用Flash制作中间帧等。
4-22
计算机
动画技术
4.2 计算机动画的制作环境
⑷调试优化。优化动画节奏、色彩、声音以及播放
效果等的过程，保证作品的最终效果与质量。
⑸测试动画。在不同配置的电脑上对动画进行播放、
下载等测试，根据测试结果对动画作品进行调整和优化，
保证动画在不同环境下保持良好的播放效果。
⑹发布动画。根据动画的用途、使用环境进行输出
格式、画面品质和声音等的设置，用于网络传播的动画
作品应充分考虑网速对动画播放速度的影响，权衡设置。
4-23
计算机
动画技术
4.2 计算机动画的制作环境
三、三维动画基本制作过程
⑴建模。是动画师根据前期的造型设计，通过三维
建模软件在计算机中绘制出角色模型的过程。
⑵材质贴图。材质就是对模型赋予生动的表面特性，
如物体的颜色、透明度、反光度、反光强度、自发光及
粗糙程度等。贴图是指把二维图片通过软件的计算贴到
三维模型上，形成表面细节和结构。
4-24
计算机
动画技术
4.2 计算机动画的制作环境
⑶灯光。设置灯光目的是最大限度地模拟自然界的
光线类型和人工光线类型。
⑷摄像机控制。依照摄影原理在三维动画软件中使
用摄影机工具，实现分镜头剧本设计的镜头效果。摄影
机功能只有情节需要才使用，不是任何时候都使用。
⑸动画。根据分镜头剧本与动作设计，运用已设计
的造型在三维动画制作软件中制作出一个个动画片段。
4-25
计算机
动画技术
4.2 计算机动画的制作环境
⑹渲染。渲染是指根据场景的设置、赋予物体
的材质和贴图、灯光等，由程序绘出一幅完整的
画面或一段动画。
⑺合成剪接。主要是将之前所做的动画片段、
声音等素材，按照分镜头剧本的设计，通过非线
性编辑软件的编辑，最终生成动画影视文件。
4-26
计算机
动画技术
4.3 计算机动画的设计方法
一、计算机动画创意
计算机动画是高科技与艺术创作的结合，它
需要科学的设计和艺术构思，这些在制作之前的
方案性思考，称为创意。
创意有宏观和微观两个层面。
宏观(战略创意)：指整个设计行动的统筹安排
(战略策划高度)。
微观(战术创意)：指具体动画作品的意境构思
及手法选择(小点子、小安排)。
4-27
计算机
动画技术
4.3 计算机动画的设计方法
创意思考的技巧：
①拟人：把事物人格化，使之具有人的灵性
和感情，从而使作品内容具体形象、生动活泼。
②反成：人们对某种事物的认识往往形成思
维定势，按常规去表现该事物，难免落入俗套。
如果一反常规，改变事物的形态，反而给人耳目
一新、出其不意的感觉。
③夸张：对事物固有的形态、特点作出出人
意料的发挥，往往能强烈的表达作品主题思想。
4-28
计算机
动画技术
4.3 计算机动画的设计方法
二、动画动作的设计
1.动画时间的分配
动画时间：一个动作要用几帧来完成。
放映速度：24 f/s、25 f/s、30 f/s
动画电影：只画12张，重复1次→1秒
人类
急跑＝4 f、快跑＝8 f、慢跑＝12 f
大象
一个完整步子＝1～1.5 s
小猫
一个完整步子≤0.5s
老鹰
一个翅膀循环＝9 f
麻雀
一个翅膀循环＝2 f
4-29
计算机
动画技术
4.3 计算机动画的设计方法
2. 物体运动规律及设计方法
自然物体都有重量、结构和一定的柔韧性，
动画制作时还要考虑牛顿定律。
⑴旋转物体
当物体抛向空中或降落地面时，其重心沿
抛物线运动，到顶点时
速度减慢，下降时速度加
快。不规则的物体在运动
过程中还要旋转。
4-30
计算机
动画技术
4.3 计算机动画的设计方法
⑵振动物体
快速振动：
弹簧片的震动
柔性振动：
旗帜的飘动
⑶往复运动物体
4-31
计算机
动画技术
4.3 计算机动画的设计方法
3.动物动作规律及设计方法
⑴飞鸟类
鸟越大，翅膀动作越慢；鸟越小，翅膀动
作越快。
4-32
计算机
动画技术
4.3 计算机动画的设计方法
⑵昆虫类
多数昆虫都有翅膀，但其扇动速度远快于普
通鸟类，这就需要用一种特殊方法来处理(翅膀
模糊技术)。
4-33
计算机
动画技术
4.3 计算机动画的设计方法
⑶兽类
四条腿的兽类在运动时，必须注意前腿动作
如何与后腿动作相配合。如牛的右前腿向前时，
右后腿在后；在右前腿向后时，右后腿向前。
兽类
牛、马
跨步时间
1ｓ
大象
猫
1.5ｓ
0.5ｓ
4-34
计算机
动画技术
4.3 计算机动画的设计方法
4.人物动作规律及设计方法
⑴人的走路动作
左右两脚交替向前。为了保持身体的平衡当
左脚向前时左手向后摆动，当右脚向前时右手
向后摆动。
4-35
计算机
动画技术
4.3 计算机动画的设计方法
⑵人的奔跑动作
身体重心前倾，两手自然握拳，手臂成屈曲
状，双脚的跨步动作幅度较大，头的高低变化也
比走路动作大。
4-36
计算机
动画技术
4.3 计算机动画的设计方法
⑶人的面部表情
面部的动作变化能体现人物的情绪和性格，
但也更加复杂。
4-37
计算机
动画技术
4.3 计算机动画的设计方法
三、影视片头的设计
1.片头设计的长度
电视栏目片头的时间长度：20ｓ
电视台台标的时间长度：30ｓ
2.电影片头的设计
电影片头可以通过把影片最扣人心弦的核心
展示出来，可只提问题不解决问题。
二维动画：人物、动物等柔软复杂实体
三维动画：变形、真实感强的造型物体
4-38
计算机
动画技术
4.3 计算机动画的设计方法
3.电视片头的设计
电视节目片头：5、12、20、60ｓ
新闻、评论类：严肃庄重
文艺、少儿类：轻松活泼
电视栏目片头：12～20ｓ
字幕是电视栏目片头
设计中主要的艺术设计形
象，这是以线为主的点、
线、面组合的表现艺术。
4-39
4.4 矢量动画制作软件
计算机
动画技术
一、Flash概述
1.Flash的发展简史
年代
早期
1996年11月
1997年6月
1998年5月
1999年6月
版本
Future Splash
Animator
Flash 1.0
Flash 2.0
Flash 3.0
Flash 4.0
描述
6人小组，最大用户是Microsoft、
Disney
Macromedia收购
199.95
交互式矢量动画标准/299
Flashempire.com/299
4-40
计算机
动画技术
4.4 矢量动画制作软件
续表
年代
2000年8月
2002年3月
2003年8月
2005年10月
2007年7月
2008年9月
2010年4月
2011年4月
版本
Flash 5.0
Flash MX
Flash MX 2004
Flash 8.0
Adobe Flash CS3
Adobe Flash CS4
Adobe Flash CS5
Adobe Flash CS5.5
描述
闪客：编程、美术/399
499
499/699
增强了对视频支持
Adobe Creative Suite
3D转换，反向运动与骨骼工具
代码片段面板、Deco绘制工具
HTML5、移动平台
4-41
计算机
动画技术
4.4 矢量动画制作软件
2.基本功能
绘图功能：可以使用Flash完成图形绘制、特
殊字形处理等方面工作。
动画功能：即使没有绘画基础也可以使用
Flash提供的动画工具,编辑从外部导入的图像，
制作出动画。
编程功能：Flash提供了几百个关键词,用来制
作交互式动画。
以上3部分功能是相对独立的。
4-42
计算机
动画技术
4.4 矢量动画制作软件
3.动画特点
Flash动画是一种交互的矢量动画，能在低数
据传输率下实现高质量的动画效果。
矢量图形：任意调整图形或色块的颜色
交互式动画：用户对动画进行控制
流式播放技术：边下载边播放
多种文件格式：图形图像、声音、视频
插件工作方式：Flash Player插件
4-43
计算机
动画技术
4.4 矢量动画制作软件
4.应用领域
MTV、动画短片、广告、交互游戏等。
4-44
计算机
动画技术
4.4 矢量动画制作软件
5.工作界面
标题栏、菜单栏、工具栏、工具箱
4-45
计算机
动画技术
4.4 矢量动画制作软件
4-46
计算机
动画技术
4.4 矢量动画制作软件
舞台和工作区：创作时观看作品的场所
属性面板：取决于当前选定的内容，可显示
当前文档、帧或工具的信息和设置。
时间轴面板：用于组织和控制文档内容在一
定时间内播放的层数和帧数。
4-47
计算机
动画技术
4.4 矢量动画制作软件
二、Flash基本操作
[例题]制作一个移动的变色圆。
①打开Flash，选择红色。
②选择椭圆工具，在舞台左上方画一个小圆。
③右击第30帧，选择插入空白关键帧。
④选择蓝色，在舞台右下方画一个较大圆。
⑤选中第1帧，属性面板/补间→形状。
⑥选择控制/播放。
4-48
计算机
动画技术
4.4 矢量动画制作软件
(1)创建Flash文件
文件/新建，工具栏→“新建”按钮
(2)设置文档属性
修改/文档，属性面板→文档属性
尺寸
用于设置动画的尺寸(宽度×高度)
背景颜色 用于设置文档的背景颜色
帧频
用于设置影片的播放速度(f/s)
标尺单位 设置表示文档尺寸的单位
4-49
计算机
动画技术
4.4 矢量动画制作软件
(3)简单动画制作
①新建文件→设置影片属性(400×300)
②导入背景图片：文件/导入
调整图像大小→第36帧选择“插入帧”
③插入新图层：单击“插入图层”按钮
④输入文本：文本工具(隶、60、红)
图层2→5 f深、10 f圳、15 f大、20 f学
⑤设置移动动画：补间/动作
⑥加入背景音乐：文件/导入
4-50
计算机
动画技术
4.4 矢量动画制作软件
(4)预览动画
控制/测试影片(Ctrl+Enter)
(5)保存动画文件
文件/保存或另存为(myfirst.fla)
(6)输出动画文件
文件/导出影片
myfirst.swf—Flash播放文件
myfirst.avi—视频文件
myfirst.gif—动画GIF
4-51
计算机
动画技术
4.4 矢量动画制作软件
1.绘图工具
椭圆工具、矩形工具、线条工具
铅笔工具、文本工具、钢笔工具
2.图形编辑
选择工具、次选工具、套索工具
颜料捅工具、墨水瓶工具、橡皮工具
任意变形工具、填充变形工具
喷涂刷工具、Deco工具
4-52
计算机
动画技术
4.4 矢量动画制作软件
3.图形对象
(1)对齐对象
(2)合并对象
联合，交集，打孔，裁切
(3)组合与分离对象
(4)排列对象
4-53
计算机
动画技术
4.4 矢量动画制作软件
4.特效
(1)文本特效
选择“文本工具”创建文本，设置为“动态文
本”，然后执行“文本”→“可滚动”命令。
(2)滤镜特效
投影，模糊，发光，斜角，渐变发光，渐变斜
角，调整颜色
4-54
计算机
动画技术
4.4 矢量动画制作软件
5.图像导入
使用Flash,除了可以绘制矢量图形外，还可
以从外部导入位图，以便制作出更加丰富的动
画。
4-55
计算机
动画技术
4.4 矢量动画制作软件
三、基本动画制作
Flash的动画原理与电影的成像原理一样，
是利用人眼的视觉暂留现象。
Flash创建动画有两种方法：
逐帧动画：帧帧连续动画(工作量大)
补间动画：运动补间动画(平移、转动)
形状补间动画(变形)
关键帧、帧(普通帧或内插帧)
4-56
计算机
动画技术
4.4 矢量动画制作软件
1.逐帧动画
逐帧动画是构成动画的每一帧的内容都是
由一幅绘制的图像组成的。
例如： 骏马奔驰
4-57
计算机
动画技术
4.4 矢量动画制作软件
2.运动补间动画
⑴创建平移动画
球的运动
⑵创建引导动画
指定路径运动
4-58
计算机
动画技术
4.4 矢量动画制作软件
3.形状补间动画
形状动画描述在一段时间内将一个对象转变
成另一个对象的过渡过程。
⑴创建形状动画
形状的变化
⑵创建遮罩动画
探照灯效果
4-59
计算机
动画技术
4.4 矢量动画制作软件
4.骨骼动画
通过骨骼系统和反向运动工具，为一系列独立的
元件添加骨骼，制作类似于图形链的动画效果。
5.3D动画
4-60
计算机
动画技术
4.4 矢量动画制作软件
四、元件与库资源
1.元件
元件是指在Flash创作环境中创建过一次的图形、按
钮或影片剪辑，一旦被创建，自动添加到库中，可重复
使用。
⑴图形元件
⑵按钮元件
⑶影片剪辑元件
4-61
计算机
动画技术
4.4 矢量动画制作软件
2.元件的创建
3.元件的编辑
4.图库元件的使用
4-62
计算机
动画技术
4.4 矢量动画制作软件
五、声音与视频
Flash中可导入音频和视频文件，并对其添加
特效，设置事件。
(1)音频导入
(2)添加特效
(3)事件设置
4-63
计算机
动画技术
4.4 矢量动画制作软件
六、动画美学
动画美学的主要内容：
①注重画面结构布局，为动画主体留出活动
空间。
②动画画面调度设计，主要在镜头移动、纵
深运动、平面运动等模式。
③动画制作符合视觉规律。
固定不动的物体构成背景的主要对象，起到画面均衡的作用。
低速运动的物体给人以平稳的感觉。
高速运动能够引起特别注意，起到着力渲染的作用。
4-64
计算机
动画技术
4.4 矢量动画制作软件
④把握动画的运动节奏
动画主体的运动节奏通过对时间的掌握进
行控制。就帧动画而言，动画的运行速度与帧
间的位置差成正比。
⑤造型设计、动作设计
造型设计将主要针对文字的形态、设备的
人格化、界面的风格等方面进行。动作设计则
针对动作主体的运动模式以及运动时间进行规
划。
4-65
计算机
动画技术
4.5 动画在游戏中的应用
一、Flash游戏的特点
①强大而简便的交互功能，很适合用于制作游戏。
②图形处理速度方面存在瓶颈。
③不能随意存取本地硬盘数据。
④对三维功能支持有限。
Flash是一个集美工、动画与编程于一体的集
成开发环境，编程方式与其他纯程序开发的编程
方式有所不同。
4-66
计算机
动画技术
4.5 动画在游戏中的应用
Flash作品的结构
4-67
计算机
动画技术
4.5 动画在游戏中的应用
二、ActionScript语言基础
1. 概述
ActionScript语言是Flash提供的一种动作脚本语言，
可对关键帧按钮、影片剪辑添加脚本，制作交互动画 。
4-68
计算机
动画技术
4.5 动画在游戏中的应用
2. 基本语法
①常量与变量。
关键字var声明变量，变量名区分大小写，严格
指定数据类型。
var number1:int;
var number1:int, number2:int,
number3:int=0;
简单数据类型：boolean、string，int、Number
等。
复杂数据类型:Array、Object、MovieClip等。
4-69
计算机
动画技术
4.5 动画在游戏中的应用
②运算符和表达式。
算术运算符是用来处理四则运算的符号。
+、-、*、/、%、++、-字符串运算符使用加法运算符来完成。
逻辑运算符通常用来测试真假值。
<、>、<=、>=、==、!=、&&、||、!、
===、!==。
赋值运算符用来为变量或者常量赋值。
=、+=
4-70
计算机
动画技术
4.5 动画在游戏中的应用
④大括号。用大括号“{}”将一个语句块或是一句
表达式结合在一起。
onClipEvent (frame) {
H.stop(); }
⑤小括号。 小括号“（）”用于定义和调用函数
或相关参数，还可以更改表达式中的运算顺序，组
合到小括号中的运算总是最先执行。
trace(1+2*3);
// 7
trace((1+2)*3);
// 9
4-71
计算机
动画技术
4.5 动画在游戏中的应用
⑥分号。用分号“；”来结束一条语句。
⑦字母大小写。 除关键字以外，其他动作脚本是
不严格区分大小写的，关键字是指有特殊含义的保
留字符，如var, void, function, continue等。
⑧注释。使用注释语句（注释符号为“//”）向程
序中添加注释信息，使用户更易于理解程序。
function Add(x1,x2) {……} // 定 义 Add
函数
4-72
计算机
动画技术
4.5 动画在游戏中的应用
3.ActionScript基本语句
①条件判断语句
if(x>0) {
x++;
}
else {
x--;
}
switch(temperature){
case1:
trace(“晴天”); break;
case2:
trace(“多云”); break;
case3:
trace(“小雨”); break;
default:
trace(“冰雹”); break;
}
4-73
计算机
动画技术
4.5 动画在游戏中的应用
②循环控制语句：
var sum:int=0;
for(var i:int=1; i<=10; i++) {
sum+=i;
}
trace(“1+2+3+…+9+10=” +sum);
var sum:int=0;
while(i<=10) {
sum+=i;
i++;
}
trace(“1+2+3+…+9+10=” +sum);
do
{
sum+=i;
i++;
}while(i<=10)
4-74
计算机
动画技术
4.5 动画在游戏中的应用
③函数。函数可将重复的运算封装在一起，有利于
代码的重用。内建函数，自定义函数。
function myfunc (var_1:Type, var_2:Type, …, var_n:Type):Type {
return “一些数据或者变量”;
}
例如：
function add(x:Number, y Number):Number {
return (x+y);
}
adAdd(7,8);
4-75
计算机
动画技术
4.5 动画在游戏中的应用
4.制作台历实例
4-76
计算机
动画技术
4.5 动画在游戏中的应用
三、Flash游戏的交互编程
1. Flash的内置类的使用
Flash提供了一些内置类以便完成各种核心的编程
应用和专用的编程应用，主要分为核心内置类和专
用类。
所有内置类均可在动作面板的动作工具箱中找到。
在使用专用类之前，需先用import语句显示导入它
的包或者命名空间。
4-77
计算机
动画技术
4.5 动画在游戏中的应用
//Moviclip类的使用实例
mc.graphics.beginFill(0xFFFF00);
import flash.display.MovieClip;
mc.graphics.drawRect(0,0,80,80);
import flash.events.MouseEvent;
mc.addChild(txt);
import flash.geom.Point;
mc.addEventListener(MouseEvent.MOUSE_DOWN,dragMC);
import flash.text.TextField;
mc.addEventListener(MouseEvent.MOUSE_UP,stopDragMC);
var mc:MovieClip=new MovieClip();
function dragMC(evt:MouseEvent){
mc.startDrag();
var txt:TextField=new TextField();
TextField(mc.getChildByName("insName")).text="开始拖动";
mc.x=50;
mc.y=50;
}
txt.text="请拖动我";
function stopDrag(evt:MouseEvent){
txt.selectable=false;
mc.stopDrag();
txt.x=10;
txt.y=30;
TextField(mc.getChildByName("insName")).text="停止拖
动";
txt.name="insName";
}
4-78
计算机
动画技术
4.5 动画在游戏中的应用
2. 事件模型
基于文档对象模型（DOM）的事件模型，
主要包含３个概念：事件流、事件对象和事件
侦听器。
事件流是事件实例在显示对象层次结构中
的穿行过程。
4-79
计算机
动画技术
4.5 动画在游戏中的应用
4-80
计算机
动画技术
4.5 动画在游戏中的应用
事件对象是承载事件信息以及一些事件处理
方法的对象。
所有的用户输入都会产生事件，包括鼠标事件
（MouseEvent）、键盘事件（KeyboardEvent）；
组件在状态改变时也会产生事件，一些外设也会向
Flash发送事件，例如Camera、Microphone会发
出激活（Active）事件和状态（status）事件等。
Flash Player API定义了一个Event类，作为所有事
件类的基类。
4-81
计算机
动画技术
4.5 动画在游戏中的应用
事件侦听器解决的是如何响应事件的问题。
要使一个对象侦听某个事件，首先要使用
addEventListener方法注册事件侦听器。
事件接受对象.addEventListener(事件类.事件类
型,事件处理函数);
function 事件处理函数(事件实例:事件类){
//此处为响应事件而执行的脚本
}
4-82
计算机
动画技术
4.5 动画在游戏中的应用
3.Flash游戏的延迟循环模式
Flash游戏程序中，一些关键代码会要求间
隔一段时间后重新执行。例如角色走路，需要
根据速度参数的值，每过一个时间间隔往某个
个方向移动某段距离，直到完成为止。
两种延迟循环模式：
帧跳转。
使用 ENTER_FRAME事件。
4-83
计算机
动画技术
4.5 动画在游戏中的应用
①帧跳转。使用帧跳转是最常用也是最简单
的循环模式，典型的是三帧模式或四帧模式。
初始化
1
关键代码
2
跳转
3
结果
4
4-84
计算机
动画技术
4.5 动画在游戏中的应用
② 使用ENTER_FRAME事件。
ENTER_FRAME事件是每经过一帧的间隔就会自动
触发的事件，所有显示对象都具有接收并处理
enterFrame事件的能力。而且即使不在显示对象层次
关系中也一样。其语法如下：
var mc:MoveieClip;
mc.addEventListener(Event.ENTER_FRAME,
doSomething);
function doSomething(evt:Event){
//每过一帧间隔执行一遍这里的代码
}
4-85
计算机
动画技术
4.5 动画在游戏中的应用
4.帧动作(帧事件)
关键帧→动作，普通帧、空白帧×动作
定义关键帧动作：可直接将语句加入到右
侧的语句栏。
默认情况下,Flash动画播放到最后会自动
返回到第一帧并重新播放。如果动画播放完
后想要停在最后的位置，就需要在最后一帧
加入Stop语句。
例如：两球碰撞动画范例。
4-86
计算机
动画技术
4.5 动画在游戏中的应用
5.按钮动作
定义按钮动作的方法：
①打开动画文件，在图层最上方新建一个
图层，命名为按钮动作，并选择第1帧。
②单击窗口/其他面板/公用库/按钮，在
circle buttons中选择stop、play图标，并
将其拖动到舞台上。
③选择stop按钮，然后展开动作面板→全
局函数→影片剪辑控制→双击on。
4-87
计算机
动画技术
4.5 动画在游戏中的应用
鼠标事件的类别
press
当指定的按钮被按下时触发此事件，
即单击鼠标左键时触发
release
releaseOutside
当指定的按钮被单击时，释放鼠标
时触发此事件
在按钮外放开
rollOver
rollOut
dragOver
移动
移开
拖曳
dragOut
拖曳离开
4-88
计算机
动画技术
4.5 动画在游戏中的应用
④将光标置于动作面板右边窗口中的大括
号之间，单击展开窗口左边的时间轴控制，双
击stop()。
⑤用同样的方法给play按钮加动作。
stop()改为play()
⑥单击控制/测试影片。
4-89
计算机
动画技术
4.5 动画在游戏中的应用
四、游戏动画制作实例
乌龟赛跑
4-90
计算机
动画技术
4.5 动画在游戏中的应用
①新建“赛场”图层，绘制赛场，在终点
处放置四面旗帜。
②添加“tort”图层，分别将四只乌龟放
置在赛场的起跑线的左侧。
③添加“按钮”图层，新建四个“这只会
赢”的btn_thiswin按钮，并分别放置在起跑
线的右侧，这些按钮让游戏者去猜哪只乌龟会
赢。
4-91
计算机
动画技术
4.5 动画在游戏中的应用
④添加“action”图层，图层第1帧的动作
脚本用来对游戏初始化，它对应着游戏开始
时乌龟静止的画面，第1帧代码如下：
this.stop();
//等待输入
_root.truewinner = 0; //胜利的乌龟
_root.guesswinner = 0; //玩家猜的乌龟
4-92
计算机
动画技术
4.5 动画在游戏中的应用
在第2帧中添加代码，利用随机数来设
置乌龟的爬行速度，代码如下：
_root.mob1._x
_root.mob2._x
_root.mob3._x
_root.mob4._x
=
=
=
=
_root.mob1._x
_root.mob2._x
_root.mob3._x
_root.mob4._x
+
+
+
+
(random(10)
(random(10)
(random(10)
(random(10)
/
/
/
/
10
10
10
10
+
+
+
+
random(1));
random(1));
random(1));
random(1));
4-93
计算机
动画技术
4.5 动画在游戏中的应用
在第3帧中添加代码，判断哪只乌龟先到
达终点，即为胜出，代码如下：
if
if
if
if
if
(_root.mob1._x>488) { _root.truewinner = 1; }
(_root.mob2._x>488) { _root.truewinner = 2; }
(_root.mob3._x>488) { _root.truewinner = 3; }
(_root.mob4._x>488) { _root.truewinner = 4; }
(_root.truewinner != 0) {
if (_root.guesswinner == _root.truewinner) {
_root.gotoAndStop(4);
}
else {
_root.gotoAndStop(5);
}
} else {
_root.gotoAndPlay(2);
}
4-94
计算机
动画技术
4.5 动画在游戏中的应用
拼图游戏
4-95
计算机
动画技术
4.5 动画在游戏中的应用
[例]深圳大学校园风景相册
交互式动画
从窗口/共享库/Buttons选择两个按钮。
新增图层→单击第一帧→调出动作帧面板
→切换到专家模式。
4-96
计算机
动画技术
4.5 动画在游戏中的应用
square._alpha = 0;
whichPic = 1;
next.onPress = function()
{
if (whichPic<10 && !fadeIn && !fadeOut)
{
fadeOut = true;
whichpic++;
input = whichPic;
}
};
4-97
计算机
动画技术
4.5 动画在游戏中的应用
back.onPress = function()
{
if (whichPic>1 && !fadeIn && !fadeOut)
{
fadeOut = true;
whichpic--;
input = whichPic;
}
};
4-98
计算机
动画技术
4.5 动画在游戏中的应用
_root.onEnterFrame = function()
{
if (square._alpha>10 && fadeOut)
{ square._alpha -= 10; }
if (square._alpha<10)
{ loadMovie("pictrue/m"+whichPic
+".jpg","square");
fadeOut = false;
fadeIn = true;
}
4-99
计算机
动画技术
4.5 动画在游戏中的应用
if (square._alpha<100 && fadeIn && !fadeOut)
{ square._alpha += 10; }
else { fadeIn = false; }
if (input>10) { input = 10; }
if (Key.isDown(Key.ENTER))
{
fadeOut = true;
whichpic = input;
}
};
inputField.onKillFocus=function() {
input = whichPic;
};
4-100
计算机
动画技术
4.5 动画在游戏中的应用
点弹球游戏
4-101
计算机
动画技术
本章小结
☆动画、动画的播放方式
☆计算机动画的定义
☆计算机动画的分类(5个等级)
☆计算机动画的制作环境
硬件配置、软件配置
☆计算机动画的设计方法
☆动画制作软件Flash
☆动画在游戏中的应用
4-102