2D 动画脚本语言设计

多媒体设计与制作专业教研室 王正友

sppc

能力（技能）目标1 、掌握影片剪辑加载字节数计算；2 、掌握 url 文档加载；3 、掌握缓冲移动公式。

知识目标1 、影片剪辑加载（流处理）的字节数

MovieClip.getBytesLoaded() 、指定的影片剪辑的大小MovieClip.getBytesTotal() ；

2 、将来自特定 URL 的文档加载到窗口中 getURL() ；3 、缓冲移动公式： this._x=this._x+(_root.newx-this._x)/n 。

模块 03 进阶（情境 07-08 ）

情境 07 动画预载— FLASH 载入等待 Loading— 漂亮的“楼顶”

sppc

知识点：①影片剪辑加载（流处理）的字节数② 影片剪辑的大小

动画演示（源文件 3-7.fla ）

sppc

脚本语言使用载入字节数判断 loading 代码：1 、使用格式b=getBytesTotal();a=getBytesLoaded();参数说明：getBytesTotal() 获取总的字节数、 getBytesLoaded(); 已经下载的字节数。2 、用法举例b=getBytesTotal(); // 获取总的字节数a=getBytesLoaded(); // 已经下载的字节数onEnterFrame=function(){// 进入帧时 , 进行判断

if (a == b) { // 如果载入的字节数等于总的字节数 delete this.onEnterFrame // 删除进入帧 gotoAndPlay("frame"); // 转入到你要播

放的帧 } else {

a=getBytesLoaded(); // 已经下载的字节数

percent=int(a/b*100)+"%"; // 计算已经下载的百分比 }} // 把上面方法放入第 1 帧就可以了。

sppc

使用载入的帧数判断 用 Action 语法 if frame is loaded 来实现 , 新建一层，这层专门放 Action第 1 帧：if FrameLoaded (" 场景 ", frame) { // 假如场景中祯数已经载入

goto and play() // 跳至并播放某某祯 ( 自己设定 )} 第 2 帧：gotoand lay(" 场景 1", 1) // 跳至并播放第 1 祯循环再加上一个 load MC 循环播放在这两帧的中间，就 OK 了。

此语句的缺点是，它只能判断欲载程序是否到某一帧。可是如果此帧的后面有许多音乐或位图，播放以后还是不流畅的。

脚本语言

sppc

添加脚本① 在播放按钮图标的 MC 上输入：onClipEvent(load){ _root.stop(); this._visible=0; }onClipEvent(enterFrame){ // 影片剪辑与帧频同步触发以下动作

load=int(_root.getBytesLoaded()/_root.getBytesTotal()*100);// 计算下载字节数的百分比_root.xianshi.shuzi=" 已下载： "+load+"%"; // 动态显示下载进度_root.xianshi.jindutiao._width=2*load; // 进度条总长 200 像素，所以百分数乘２if(_root.getBytesLoaded()==_root.getBytesTotal()){ // 下载的字节数等于文件的字节数时执行后面命令了。

this._visible=1;_root.xianshi._visible=0; }

}on(release){

_root.play();}

sppc

交互分析

① 一个有播放图标的 MC 写入 Loading 和 play 脚本。② 一个命名为“ xianshi” 的 MC 嵌套若干用于辅助显示的元件，此实例有进度条、动态文本、和一个有帧帧动画的 MC 。③以上两个 MC单独放在一个图层的第 1 帧，第 2 帧加空白关键帧，或将该图层的从第 2 帧起以后的帧完全删除。④令影片开始处于等待状态，检测影片的总长度和下载的长度，并时刻进行比较，当下载完全部或大部后开始播放。要点分析①Loading 的核心就是 _root.getBytesLoaded() 和_root.getBytesTotal() 的比较，这个实例是_root.getBytesLoaded()==_root.getBytesTotal() ，即下载100% 的 SWF 文件，其实根据网速，可以调整到下载大部分后就可以开始播放，余下部分是在播放过程中继续下载，如：_root.getBytesLoaded()>_root.getBytesTotal()*80/100 ，这样可以减少下载等待时间又可保证播放的连贯性。② 在本地机上测试 Loading 的方法是键入【 Ctrl+Enter】。

sppc

上机实验十七

发挥各自的想象力，制作出漂亮的“楼顶”。

sppc

情境 08 导航条—漂亮的菜单

动画演示（源文件 3-8.fla ）

知识点：①将来自特定 URL 的文档加载到窗口中②缓冲移动公式

sppc

脚本语言

获取超链接命令1 、使用格式getURL(url,windows)参数说明：（ 1 ） url ：是一个字符串，表示文档的 URL 。（ 2 ） windows ：是一个可选的字符串，用来指定应将文档加载到其中的窗口或 HTML框架。2 、用法举例制作一个按钮，并给该按钮添加如下动作代码：on (press) {

getURL("http://www.sppc.edu.cn", "_blank");}运行结果：单击该按钮会打开一个网页。

sppc

脚本语言

缓冲移动公式缓冲公式是在 Flash Action Script编程应用中最常用到的一个公式。运用缓冲公式，可以很自然地模拟物体在阻力作用下的运动。许多精美的韩国导航菜单就是用缓冲公式的原理设计的。1 、使用格式缓冲公式的原理可以用下图表示：|← （目标位置 -mc._x ）→ | ●_____________________| MC 目标 根据牛顿的物体运动定律，在零阻力的情况下物体运动的速度是恒定的，其速度可以表示为 v=s/t ；缓冲运动是模拟阻力环境下的物体运动，是一种匀减速运动，图中 MC向右运动，其离目标位置越来越近，上面公式中的 S 也越来越小（图中的 s 的变化是这样的：目标位置 -mc._x 。当 MC向右运动一段，目标位置 -mc._x 就尖小一段）。在匀速运动的公式中看来，单位时间不变， s 减小，速度 v 也要跟着减小，直到最后静止下来。

SPPC

效果文件 简单匀速 .fla

mc._x = 50;onEnterFrame = function () {

mc._x += 5;if( mc._x >

500){ mc._x = 50;}

};

缓冲公式可以这样表示： mc._x += ( 目标位置 -mc._x)* 缓冲系数 公式中的缓冲系数就是每次循环靠近给定值或鼠标的系数，而达到缓

冲的效果。不同的缓冲系数可以得到不同的运动效果，大家可以自己改动一下这个系数试试运动效果。当然，缓冲系数的值必须小于 1 ，这点很容易在数学上做出解释。

脚本语言

sppc

2 、用法举例1)首先在场景上画一个圆或导入一个立体球， 并转换成Movieclip, 命名为 mc 。2) 在场景的第一个 frame 上使用这个代码： (500 为目标坐标距离例如：鼠标坐标距离）mc._x = 100;onEnterFrame = function() {

mc._x += (500 - mc._x) * .1;}3)测试影片你应该会看到圆形会从左边开始向右移动，之后慢慢地停下来。那么原因是什么呢？

主要的代码为 mc._x += (500 - mc._x) /10;为了方便大家理解， 我们就把这个代码一步步的分析一下吧。开始我们设定 mc 的 _x 为 100 ， onEnterFrame会让代码不断

的循环，那么接下来 mc._x 就会是：

脚本语言

效果文件 简单缓动1.fla

SPPC

mc._x 新位置 = mc._x + (500 - mc._x) /10;

mc._x 新位置 = 100 + (500 - 100) /10;

mc._x 新位置 = 100 + (400) /10;

mc._x 新位置 = 100 + 40;

mc._x 新位置 = 140; // 第一次圆形移动到的位置再次循环，把得到的 mc._x 再次代入：mc._x 新位置 = mc._x + (500 - mc._x) /10;

mc._x 新位置 = 140 + (500 - 140)/10;

mc._x 新位置 = 140 + (360) /10;

mc._x 新位置 = 140 + 36;

mc._x 新位置 = 176; // 第二次圆形移动到的位置那么接下来一直不停的循环， mc._x 的值一直增加，而运算公式

（ 500 - mc._x) 就会越来越少，但（ 500 - mc._x)永远不会是 0 ，只能无限接近 0 ，到最后移动的距离也会越来越近，直到肉眼看不出在移动，这就是缓冲的公式了。

脚本语言

sppc

交互分析

导航条也是菜单的一种，是网页上普遍都用到的一个种便捷的翻阅形式，形式多种多样，我们这里是一个简单的实例。基本思路①制作菜单，类型为 MC ，上面有文字标识，嵌套在标签剪辑中，

鼠标滑过时可以改变字的大小。②主场景中水平排开外观一致的标签剪辑 MC ，嵌套在标签里的文

字也是 MC ，这里分别是：首页、二页、三页、四页。③用外形和标签同样大的 MC 作为光标，内部有形状补间，第 1 帧

要设定 stop 。④作一类型为 MC 的光标，给其加动作，可以“弹性”地向某点靠

近，意思就是移动方式不要一步到位，避免呆板，就是为好看。⑤当鼠标滑过某一个标签，光标就以颜色和宽度变化的形态逐步向这

点靠近。⑥单击标签都有一个链接地址被打开，转向指定的页面。⑦设定限制，当鼠标移出范围后，光标以初始形态停在最后滑过的标

签上。

sppc

添加脚本① 在标签 1 ，实例 b1 ，上输入：（标签 1 在 MC 剪辑的下面）on (rollOver) {//鼠标滑过

h = 1;i = 1;_root.newx = this._x; // 将这 MC 的坐标 X 的值赋与_root.newx

}on (rollOut) {//鼠标滑出

h = 0;}onClipEvent (enterFrame) { // 以帧频频率执行以下动作

if (h == 1) {//当变量 h 等于 1 ，就是鼠标滑过此 MC 时，执行以下动作

if (i>0 && i<21) { //i 同时满足大于 0 ，小于 21 的条件

this.z._xscale = 100+i*1.8;// 嵌套在此 MC里的“ z”水平比例增加 i*1.8this.z._yscale = 100+i*1.8;// 嵌套在此 MC里的“ z”垂直比例增加 i*1.8_root.mc._xscale = 100-i*10;//主场景的“ mc”水平比例减少 i*10_root.mc.play();i++;

}

sppc

} else {//当变量 h 不等于 1 ，就是鼠标滑出此 MC 时，执行以下动作

if (i>1 && i<22) {this.z._xscale = 100+i*1.8;// 嵌套在此 MC里的“ z”水平比例减少 i*1.8this.z._yscale = 100+i*1.8;// 嵌套在此 MC里的“ z”垂直比例减少 i*1.8i--;

}}

}on (press) {

getURL("http://bbs.flasher123.com/", "_blank ");}

添加脚本

sppc

② 在光标 MC 上输入： ( 此 MC叠加在标签 1 上）onClipEvent (load) {

root.newx = this._x; // 设一变量取得此 MC 的横坐标点 }onClipEvent (enterFrame) {

this._x = this._x+(_root.newx-this._x)/5;// 不断地将变量 newx 与 MC 的横坐标值的差的 1/5 加上 MC 的横坐标值，赋值到新的 MC 的横坐标值，变量 newx 与 MC 的横坐标值的差是在趋于 0 的变化中。 if (_root._ymouse>75 || _root._ymouse<25 || _root._xmouse<12 || _root._xmouse>534) {//满足其中的任一条件，就执行后面语句，为的是避免在光标变化过程中鼠标移出后有没展开的状态 .

this._xscale = 100;}

}③标签 2 ， 3 ， 4 实例 b2 ， b3 ， b4 上脚本同标签 1 ，实例 b1 。

添加脚本

sppc

①this._x=this._x+(_root.newx-this._x)/5 ，一个缓冲移动公式，是不断地将变量 newx 与 MC 的横坐标值的差的 1/5 加上 MC 的横坐标值，赋值到新的 MC 的横坐标值，变量 newx 与 MC 的横坐标值的差是在趋于 0 的变化中，这样就可实现逐步靠近目标的效果。还可以用具体的数值代入公式中，那样对分析理解其作用，是比较简便的方法，熟练掌握后还可以增加抖动率 ( 一个由大逐渐变小直至 0 的的一个变量 ) ，会更好看。

②if(_root._ymouse>75||_root._ymouse<25||_root._xmouse<12||_root._xmouse>534) ，“逻辑或”条件判断，满足其中的任一条件，就执行后面语句，这里是为的避免在光标变化过程中鼠标移出后有没展开的状态，因为光标在移动过程中有宽度变化。

要点分析

sppc

上机实验十八

动画演示（源文件 3-8-1fla ）设计一个纵向排列的菜单。

Thank you