信息技术应用
计算机二维动画制作
根据教材制作讲稿
2008.2.
第一章 电脑动画概述
1.1 动画起源 1
使用图像形式记录物体动作和时间的过程。
1.2 动画的生理学基础 2
形象刺激在最初显露后，能在视网膜上停留若干时间。
这样，各种分开的刺激迅速地连续显现时，
在视网膜上的刺激画面信号会重叠起来，所有影像就成为连续进行的了。
动画的生理学基础：视觉暂留现象。
动画技术的开创者
1.3 什么是动画 3
动画的定义：利用逐格拍摄或制作连续放映而成的影片或视觉艺术。
逐帧动画：拳击脚踢
动画的帧：动画和电影中的每一张画面称为帧。
帧频（刷新率）：每秒播放画面的数量。
动画 12 帧/秒，电 影 24 帧/秒，电视 25 帧/秒（PAL制式） 。
1.6 什么是计算机动画 6
计算机图形学和艺术相结合的产物。
1.7 计算机动画的用武之地 6
计算机动画用途：
电影电视特技、广告、商业广告、电视片头、动画片、游艺场所、
计算机辅助教育、科学计算可视化、军事、建筑设计、飞行模拟等 。
1.8 二维动画与三维动画 7
二维动画：在制作图形仅存在横向和纵向的内容，
在坐标上即X，Y坐标轴，不存在深度（即Z坐标轴）。
三维动画：存在X，Y，Z三个纬度。
1.8.2 计算机二维动画软件 7
日本Celsys 株式会社的Retas Pro，
法国MediaPegs 公司的Pegs，
美国 Macromedia 公司的 Flash。
基于矢量图形的Flash动画尺寸可以随意调整缩放，
不会影响图形文件的大小和质量。
只要用少量向量数据即可描述一个复杂的对象，
占用的存储空间只是位图的几千分之一，非常适合在网络使用。
流式技术允许用户在动画文件全部下载完之前播放已下载的部分。
交互设计功能使动画制作者可随心所欲地控制动画，
且赋予了用户更多的主动权。
基于矢量图形的Flash动画尺寸可以随意调整缩放，
不会影响图形文件的大小和质量。
只要用少量向量数据即可描述一个复杂的对象，
占用的存储空间只是位图的几千分之一，非常适合在网络使用。
流式技术允许用户在动画文件全部下载完之前播放已下载的部分。
交互设计功能使动画制作者可随心所欲地控制动画，
且赋予了用户更多的主动权。
1.8.3 计算机三维动画 9
每帧画面都是根据三维模型的运算数据在计算机内部生成的，
制作三维动画首先要创建物体模型，
然后让这些物体在空间中运动，如 移动、旋转、变形、变色。
再通过打灯光等生成栩栩如生的画面。
三维动画制作可分为以下七个阶段：
1 、动画规划（Storyboarding）
2 、建模（Modeling）
3 、贴图（Texture Mapping）
4 、灯光和场景设置 （Light or scene buliding）
5 、动画设置（Animation）
6 、渲染（Rendering）
7 、后期合成（Postproduction）。
1.9 计算机动画的教与学 10
艺术教育将提高学生的艺术素质与修养，
而技术教育要提高学生的制作能力。
动画展示：感受Flash 动画 桌球动画
2.1 Flash操作及界面
定制操作界面：窗口/面板设置/训练布局/进入简洁的操作环境。
案例2.1：初次认识Flash MX2004操作界面
案例2.2 用Flash MX2004打开和测试动画文档
案例2.3 在舞台上绘制对象
2.2 Flash动画制作基本流程
Flash动画制作基本流程
一是创意脚本写作，想制作动画的大致轮廓。
二是素材准备，包括图片、声音、甚至外来视频影片等。
三是具体动画的制作，设定好动画基本参数，如选择背景、
设定动画画面的大小、动画的播放速度，
需要导入哪些现成的图像、声音文件。
案例2.4 制作自己的签名动画
案例2.5 输出你的签名动画
案例2.6 “配乐太空图展”的素材导入
案例2.7 动画 “配乐太空图展”的制作
2.3 创建Flash舞台对象
案例2.8 “Loading 等待动画”动画边框制作
案例2.9 “Loading 等待动画”动画制作
2.4 时间轴和帧
帧频 fps（frames per second）：每秒播放的帧数。
案例2.10 “跳跃的网址” 动画制作
案例2.11-2.12 “数字时代”动画制作前半部分
案例2.13 “数字时代”流动的数字
2.5编辑舞台对象
选择舞台上的对象：单击或拖动鼠标框选对象。
修改和编辑：用工具栏的工具、用属性面板改动参数、
用“修改”菜单下的选项。
案例2.15 “日出” 动画制作前部分——“太阳制作”
案例2.16 “日出” 动画制作后部分——“太阳运动”
2.6 图形、文字的形状动画 50
形状、动作动画：决定起点关键帧和终点关键帧，
电脑生成中间的形状补间、动作补间。
形状、动作动画：决定起点关键帧和终点关键帧，
电脑生成中间的形状补间、动作补间。
形变动画：形状变化（对象大小、形状变形），
自动实现颜色、图形位置的变化。
案例2.17-2.18 会变形的图形
案例2.19 有切换效果的太空图展
案例2.20 123 粗糙变形
案例2.21 “123 精确变形”
3.1 元件、库、实例
| 动作对象 | 关键帧对象 | |
| 形状动画 | 舞台图形 | 分离状态 |
| 动作动画 | 库元件的舞台实例 | 组合状态 |
案例3.1：初次认识Flash的库、元件、实例（P66）
库元件的舞台实例可以改变大小、方向和颜色。
改变库元件会影响舞台实例，
改变舞台实例不会影响库元件。
元件库中的图形和影片有区别。
案例3.2：飞过田野的小鸟（P69）
每层动画对象只能有一个，用两层制作两只小鸟的不同飞行方向。
3.2 创建元件
元件的实例可以在舞台上的任何时间、以任何方式出现任意多次。
Flash中元件类型：影片剪辑、图形、按钮。
影片剪辑和图形本身：可以多帧或单帧。
多帧影片剪辑在舞台上实例的重要特点：
不管舞台的时间轴有多少帧，这些实例都会反复循环播放自己内部的动画。
案例3.3：旋转的风车（P72）
案例3.4：影片剪辑和图形的区别（P74）
| 独立时间轴 | 表示图形 | |
| 图形 | 无 | 静态 |
| 影片剪辑 | 有 | 动态 |
案例3.5：天使飞来（P76）
一个影片剪辑元件 bar 宽高 50*100 变到 50*300，
在多层不同时间位置引入元件实例，
产生在不同时间播放高度变化的 bar。
3.3 动作动画（P83）
动作动画
动作动画：动画对象进行一些规则运动。
包括位置（x,y轴方向）的移动、对象大小（x,y轴方向）变化、
对象Alpha透明度的变化几种基本形式。
动画制作：
设置动作的起点关键帧和动作的终点关键帧，
中间的帧由电脑自行运算完成。
规则的运动动画可以由软件完成。非规则的动画需要逐帧手工完成。
动作动画设置：
在开始和结束的2个关键帧中，必须有且仅有一个已存在于库中的元件，
进行动作动画的每层仅可以有1个元件。
案例3.7--3.8：文字片头动画（P83）
案例3.9：卡通美女秀（P92）
文档属性：背景深绿色，尺寸 600*400。
建立图形元件“mm”：
拖入 6 张图片：mm1 mm2 mm3 mm4 mm5 mm6，
前 2 张拖入 2 次，共 8 张 300*230 图片。
按图片宽 300 的间距设置坐标：
mm1(0,0) mm2(300,0) mm3(600,0) mm4(900,0)
mm5(1200,0) mm6(1500,0) mm1(1800,0) mm2(2100,0)。
场景1中建立 mm 层，第 1 帧拖入图形元件，使图形对齐舞台左边。
第 200 帧插入关键帧，使图形对齐舞台右边，建立动作动画。
建立衔接流畅的循环动画：要求循环开始画面和结束画面相同。
案例3.10：幻影文字 fywz.rar“open your eyes”94
相同的动作的动画复制在不同图层上，
使图形延时出现，加大透明度。
案例3.11 飞越群山的鸟（P98）
背景图形元件 Alpha 70%，
从左下角对齐舞台经300帧后移动到右上角对齐舞台。
案例3.12 飞越云海的飞机 102
背景图像左上角对齐舞台， 经 200 帧后，
添加场景：窗口/设计面板/场景/添加场景。
案例3.13 恐龙宝宝环球旅行（P106）
图片矢量化处理：
阈值小：矢量化图形细腻，动画文件尺寸大。
阈值大：矢量化图形简单，动画文件尺寸小。
案例3.14 战斗机翱翔蓝天（P109）
帧属性“简易”参数
加速为负，减速为正，匀速为0。
案例3.15 发光文字（P113）
“动态光”影片剪辑元件制作：
“静态光”由长变短、水平翻转、由短变长。
案例3.16 流光溢彩的风景图（P116）
“彩光”图形元件：线性填充透明色块，色块 Alpha 10% 20% 相间，
两个相同透明色块连接成长条，放在风景图像上左右滚动。
全局函数/时间轴控制、浏览器/网络、影片剪辑控制
4.1在动画中使用按钮
案例4.1 可变形的旋转艺术字（P122）
按钮层第 1 帧的动作命令：stop();
按钮的动作命令：
on (release) {
play();
}
案例4.2 听话的卡通熊（P126）
“停止”按钮的动作语句：BBXX.gotoAndStop(1);
“动作”按钮的动作语句：BBXX.play(1);
案例4.3 音乐点播动画（P128）
遮盖影片剪辑元件：白色填充矩形色块，
第 1 帧、第 60 帧通过混色器分别调整 Alpha 为 100%、0，
形状动画产生由不透明到透明的淡入效果。
第 60 帧动作命令：stop();
场景 1：
选择音乐
遮盖层
按钮层：第 1 帧动作命令：stop();
流行歌曲按钮动作命令：
stopAllSounds();
gotoAndPlay("场景 2",1);
轻音乐歌曲按钮动作命令：
stopAllSounds();
gotoAndPlay("场景 3",1);
古典歌曲按钮动作命令：
stopAllSounds();
gotoAndPlay("场景 4",1);
场景 2：
播放音乐
音乐层：遮盖、流行歌曲音乐。
按钮层：第 1 帧动作命令：stop();
背景图像
返回按钮动作命令：
gotoAndPlay("场景 1",1);
场景 3、场景 4：
类似场景 2 ，只需改变音乐和背景图像。
4.2创建个性化按钮
案例4.4-4.5 可爱小猫展示（P134）
4.3遮罩与遮罩动画
案例4.6 图案文字（P145）
文字遮罩彩条 文字遮罩风景
案例4.7 美丽的蝴蝶图展（P148）
每隔 50 帧展示一幅图像，
遮罩层用矩形色块创建由小到大的形状动画，
使被遮罩的图像产生逐步展示的效果。
案例4.8 “管中窥豹” 式看图（P152）
案例4.9 “万花筒”（P157）
4.4动画设计、制作的综合案例
案例4.10 地球和月亮动画模型（P162）
4.4动画设计、制作的综合案例
案例4.11 立体艺术字展示
案例4.12 光照射文字效果展示
案例4.13 背光照射文字（P179）
1）黄色字层：输入“背光照射文字”，大小80。
2）黄字遮罩层：线性渐变白色填充块，大小 500*200，
从上到下 Alpha 100% 到 0%。
第 60 帧插入关键帧，第 1 帧白色填充块压扁，大小 500*20，
设置为形状动画。
3）光线层：复制遮罩层的所有帧。
案例4.14 闪闪发光的文字效果（P182）
* 案例4.15 展示小猫（P185）
* 案例4.16 放大相片（P192）
* 案例4.17 水波涟漪（P196）
1）文档属性：大小 550*400。
2）风景图像层：大小 550*200，
3）倒影图像层：风景图像垂直翻转生成倒影，大小 550*200。
4）涟漪倒影层：略微放大倒影，大小 558*204。
5）涟漪遮罩层：绘制浅蓝色线框，粗细 2 的椭圆，
然后转换成“涟漪”影片剪辑元件。
6）“涟漪”影片剪辑元件：第 1 到 第 60 帧椭圆由小变大。
复制图层 1 第 1 到 第 60 帧，
逐层向后 5 帧粘贴到 2、3、4、5、6 层。
7）水面层：线性渐变蓝色填充块，大小 550*200，
从上到下 Alpha 0% 到 50%。
阶段复习一
1.编辑舞台对象
2.动画帧的操作
3.逐帧动画制作
4.形状动画制作
5.元件、实例
6.动作动画
7.动作动画技巧
8.应用按钮和简单脚本
9.遮罩与遮罩动画
动作脚本的对象与属性
舞台上的对象被称为实例，图形实例不能命名，
影片剪辑类型的实例可以被命名，动作脚本可以控制实例。
实例的特征：高、宽、透明度、x,y 坐标等。
动作脚本迈步走
动作脚本编辑器环境由两部分组成：
“动作”工具箱：
每个动作脚本语言元素在该工具箱中都有一个对应的条目。
“脚本”窗格：键入代码的区域。
动作脚本大跨步
舞台对象（影片剪辑的实例）、实例的属性、动作脚本。
动作脚本在帧中、在影片剪辑中的作用。
5.1动作脚本的对象与属性
案例5.1可定位的球
案例5.2可变化宽度和高度的球
案例5.3可变化透明度的球
案例5.4可变形的球
案例5.5可旋转的风扇
案例5.6可移动并增减透明度的球
5.2动作脚本起步
案例5.7让脚本语句反复循环执行
案例5.8自己移动的球
案例5.9远去的球体I
案例5.10远去的球体II
案例5.11远方飞来的球体
5.3动作脚本迈步走
案例5.12重复运动的球
案例5.13克隆许多球
案例5.14远方飞来的许多球体
案例5.15 远方飞来的许多球体
案例5.16,5.17,5.18克隆程序生成的旋转风扇
5.4动作脚本大跨步
案例5.19至案例
5.23 ，四处碰壁的球
案例5.24风扇克隆与删除
案例5.25 炫目风扇群
案例5.26 炫目风扇群
案例5.27 放射阳光
line 影片剪辑：宽 10 到 100。
36 line 影片剪辑：
把 line 影片剪辑元件复制成 36 条阳光线，间隔 10°。
for(i=0;i<36;i++){
duplicateMovieClip('line','L'+i,i);
setProperty("line"+i,_rotation,10*i);}
案例5.28 中国龙
1.“龙”字图形 long ：wh 50*60 xy -25,-30
2.“龙”字影片剪辑 longMC 坐标变化：
起始：wh 50*60 xy -25,-30
升高：wh 50*60 xy -25,-200
返回：wh 50*60 xy -25,-30
3.把“龙”字影片剪辑 longMC 实例复制成 18 个环形“龙”字，
间隔 20°。
for(i=1;i<18;i++)
{duplicateMovieClip("z","z"+i,i);
setProperty("z"+i,_rotation,20*i);}
读取外部文件
loadMovie 语句直接读取外部图片。
自定义函数
函数（function）：函数和变量一样，都在时间轴上定义。
定义函数的语法：
function 函数名（参数1，参数2，参数3……）
{ 函数内部的语句 }
时间对象
当前年、月、日、星期、时、分、秒、毫秒等时间相关的数据。
数学对象的随机函数
Flash的数学对象（Math）：不需要使用new（构造函数）来创建实例，
直接使用“Math.方法”来获取数学方面的功能。
声音对象
使用new（构造函数）来创建实例，
使用“Sound.方法”来获取声音方面的功能。
6.1读取外部文件
案例6.1 至 案例6.4 电子相册
6.2影片剪辑控制及自定义函数
案例6.5 自定义光标I（P270）
鸽子按钮加入命令，实现拖动鸽子，其它动物回到原位。
on(press) {
startDrag("pigeon",true);
{horse._x=160;horse._y=150}
{dog._x=270;dog._y=150}
}
停止按钮加入命令，实现停止拖动，所有动物回到原位。
on(press) {
stopDrag();
{pigeon._x=55;pigeon._y=150}
{horse._x=160;horse._y=150}
{dog._x=270;dog._y=150}
}
案例6.6 自定义光标II
6.3时间对象
案例6.7 计算器（P275）
输入文本：以文字形式输入变量，关联变量 a,b。
动态文本：以文字形式输出变量，关联变量 c。
运算按钮：加按钮调用函数 on(press){cal("+");}
场景 1 第 1 帧加入动画脚本：
function cal(kk){
var kk;
if(kk=="+")
c=int(a)+int(b);
if(kk=="-")
c=int(a)-int(b);
if(kk=="*")
c=int(a)*int(b);
if(kk=="/")
c=int(a)/int(b);
}
案例6.8 数字时间
1.动态文本变量名：year month date h m s
供动画脚本调用时使用。
2.ActionScript 2.0 类（内置类）：
核心/Date/new Date/方法/getDate。
3.引用舞台对象：加上主时间轴舞台“_root”说明。
_root.onEnterFrame=function(){
myd=new Date();
year=myd.getFullYear();
month=myd.getMonth()+1;
date=myd.getDate();
h=myd.getHours();
m=myd.getMinutes();
s=myd.getSeconds();
}
案例6.9 模拟时钟
6.4数学对象的随机函数
案例6.10 抽奖程序（P286）
1）创建“数字”影片剪辑元件，在其中创建动态文本实例“n”。
2）场景 1 中创建“数字”影片剪辑元件实例“num1”，
加入[开始][选定]按钮。
3）场景 1 实例“num1”加入动作命令：
onClipEvent (enterFrame) {
if(!_root.isdone)
this.n.text=int(10*Math.random());}
4）场景 1 第 1 帧加入动作命令：
isdone=false;
for(i=2;i<=6;i++){
duplicateMovieClip("num1","num"+i,i);
setProperty("num"+i,_x,i*50)}
5）场景 1 中，
[开始]按钮加入动作命令：
on(release){
isdone=false;}
[选定]按钮加入动作命令：
on(release){
isdone=true;}
案例6.11 雪花飘飘
1）创建“雪花”图形元件，颜色 #00CCFF，Alpha 30%。
2）创建“雪花”影片剪辑元件，圆形宽高 20*20 白色放射性填充，
Alpha 中心 100%，边缘 0%。
3）场景 1 创建“雪花”影片剪辑元件实例“snow”,
该实例加入动作命令，实现雪花向右下方降落，
控制雪花向下、向右超出舞台时返回舞台左上。
onClipEvent (enterFrame) {
this._x++;
this._y+=5;
if(this._y>400)
{this._y-=400}
if(this._x>550)
{this._x-=550}
}
4）场景 1 第 1 帧加入动作命令，实现复制雪花后随机分布在舞台上，
随机变量 d 控制在 50 到 100，用 d 作为雪花缩放比率。
snow(30);
function snow (n) {
for(i=1;i<=n;i++)
{ duplicateMovieClip('snow','snow'+i,i);
setProperty('snow'+i,_x,550*Math.random());
setProperty('snow'+i,_y,400*Math.random());
d=50+50*Math.random();
setProperty('snow'+i,_xscale,d);
setProperty('snow'+i,_yscale,d);
}
}
案例6.12 点击出星
动作/全局函数/影片剪辑控制/
on(release), onClipEvent, duplicateMovieClip。
1.星星层：创建“星”实例，命名为 star。
场景 1 第 1 帧加入动作命令，使鼠标吸附“星”。
i=0;
startDrag("star",true);
动态文本：以文字形式输出变量，关联变量 i。
2.按钮层：拖入只有感应区的按钮，感应区的大小能完全覆盖舞台。
按钮加入动作命令，点击后能复制大小随机的“星”。
on(press){
duplicateMovieClip("star","star"+i,i);
eval("star"+i)._width=5+30*Math.random();
eval("star"+i)._height=eval("star"+i)._width;
i++;
}
6.5声音对象
案例6.13--6.14 点歌器
6.6键盘对象
案例6.15用键盘控制的飞机I
案例6.16--6.17用键盘控制的飞机II
字跟鼠标（P319）
1）创建文字影片剪辑元件 wz1 -- wz7，
分别输入文字：网、络、天、地、8、2、8，大小 30。
2）右击文字影片剪辑元件 wz1/键接/为动作脚本导出，标识符 wz1；
继续为 wz2 -- wz7 设置标识符。
3）场景 1 第 1 帧加入动作命令，
使文字影片剪辑元件 "wz"+i 生成实例 "z"+i。
for(i=1;i<8;i++){
attachMovie("wz"+i,"z"+i,i);
}
继续设置字坐标("z"+j)._x，文字跟随鼠标。
_root.onEnterFrame=function(){
for(j=1;j<8;j++){
dx=(eval('z'+j)._x-_xmouse)/222*(8-j);
dy=(eval('z'+j)._y-_ymouse)/222*(8-j);
eval('z'+j)._x-=dx;
eval('z'+j)._y-=dy;
}
}
阶段复习二
1.动作脚本的对象与属性
2.动作脚本形成动画的事件
3.动作脚本语句和语法
1）实例属性（P203）
this._x ._y
._width ._height
._xscale ._yscale
._alpha ._rotation
2）全局函数
时间轴控制、浏览器/网络、影片剪辑控制
时间轴控制
gotoAndPlay, gotoAndStop, play, stop, stopAllSounds
主时间轴控制（P284）
-root.onEnterFrame, function。
浏览器/网络
fscommand, loadMovie
影片剪辑控制（P270）
onClipEvent(load), onClipEvent(EnterFrame),
on(press), on(release),
duplicateMovieClip, removeMovieClip, loadMovie,
getProperty, setProperty,
startDrag, stopDrag。
3）语句
条件/循环：if, for, while, switch。
4）ActionScript 2.0 类（内置类）：（P282）
核心/Date/new Date/方法/getDate。
Date,
getYear, getMonth, getDate,
getHours, getMinutes, getSeconds。
5）键盘对象（P306）
Key.LEFT, Key.RIGHT, Key.UP, Key.DOWN, Key.SPACE。
附 录 用 Sound Forge 处理声音素材
运用Sound Forge处理声音素材
歌曲“春天的故事”片断处理案例
阶段1:打开Sound Forge软件
阶段2:精确选择、剪切
阶段3:了解修改音频文件的属性
阶段4:改变声音文件的播放频率
阶段5:存盘参数，为声音文件减肥
阶段6:录音和调整
总复习
1.动画制作总结
2.动作脚本编写
