Flash动画实用技术之Loading...制作浅析

　　在观看Flash制作的网站或MTV时，总要面临一个等待的问题。如果在漫长的等待中没有一个加载等待动画进行提示的话，大多数观看者将会选择放弃。所以，为较大的Flash产品制作一个等待动画是很重要的。等待动画可以是一个简单的下载提示画面，可以是一段小的动画，也可以是一个好玩的小游戏。下面我们先来制作一个简单的加载画面，用来显示加载进度的百分比数值。加载百分比数值的公式为：加载百分比 = （目前载入的帧数/总帧数）x 100。



　　1．新建一个Flash文档，单击“属性”面板中的“尺寸”按钮，打开“文档属性”面板设置场景大小为200px x 80px，背景为#025C90，帧频为12fps。

　　2．点选“工具”面板里的“文本”工具，如图1所示设置“属性”面板。并在“场景 1”中单击鼠标左键，输入文字“载入进度”。

图1
　　3．点选“文本”工具，如图2所示设置“属性”面板。并在文字“载入进度”右边单击鼠标左键，创建一个动态文本，该文本就是用来显示动画下载进度的。

图2
　　4．点选刚才创建的动态文本框，在其“属性”面板的“变量”里输入“加载进度”。如图3所示。图3
　　5．点选“场景 1”的第1帧，按快捷键F9打开“动作”面板，键入以下程序：

// 如果加载的帧数小于总帧数
if(_root._framesloaded<_root._totalframes){
// 在动态文本框中显示加载进度
 加载进度 = Math.round((_root._framesloaded/_root._totalframes)*100);
}else{
// 跳到“场景1”播放
gotoAndPlay("场景1",1);
}

　　6．为了程序能够反复运行，直到所有的帧都加载完，点选第2帧，键入代码gotoAndPlay(1)。
程序中，_framesloaded属性用来得到目前加载的帧数，_totalframes属性纪录的是动画的总帧数。_root表示根目录，作用于检测整个影片。使用Math.round()方法四舍五入，进度中就不会显示小数了。

　　不过，利用帧数来制作加载进度画面，存在一些弊端。譬如，动画中帧数太少；某一帧中显示元素太多，加载时间长；两个显示数值之间停顿时间过长等。其解决方法是使用MovieClip对象中的“getBytesTotal”（文件的总字节大小）和“getBytesLoaded”（加载字节数）两个方法。

[1] [2] 下一页  

　　1．新建一个Flash文档，设置场景大小为300px x 180px，背景为#669999，帧频为12fps。

　　2．同上方法制作几个“静态文本”和三个“动态文本”。“动态文本”的变量名由上而下分别为“动画大小”、“目前加载”、“加载进度”。如图4所示。 图4
　　3．点选“场景 1”中第1帧，打开“动作”面板，键入如下代码：

// 获取动画文件的大小
动画大小 = Math.round(this.getBytesTotal()/1024);
点选第2帧，按快捷键F7创建一个空白帧，打开“动作”面板，键入如下代码：

// 获取当前下载字节数
目前下载 = this.getBytesLoaded();
下载进度 = Math.round((目前下载/动画大小)*100);
在第3帧键入如下代码：

// 如果加载没有结束，回第2帧重复执行
if(加载进度<100){
gotoAndPlay(2);
}else{
// 跳到“场景1”播放
gotoAndPlay("场景1",1);
}
　　通常，大家喜欢使用柱状图来表示动画的加载进度，这样既直观，也增加了下载进度的动感。制作加载柱状图的方法也很简单（接上个效果）。

　　1．按快捷键Ctrl+F8打开“创建元件”面板，新建一个名为“柱状图”的影片剪辑元件。如图5所示。 图5

　　2．在“柱状图”元件的场景中，点选“矩形”工具，绘制一个矩形长条，如图6所示。注意：长条缩放时，是以场景中心进行运动的，所以长条和场景的中心关系很重要，见图6箭头所指。 图6  图7

　　3．按快捷键Ctrl+L打开“库”面板，把“柱状图”影片剪辑元件拖如到场景中，如图7所示设置。点选场景中的“柱状图”元件，在“属性”面板中起实例名为“柱状显示”。如图8所示。 

　　4．接上一个效果，在其第2帧中续写一段代码：

　　目前下载 = Math.round(this.getBytesLoaded()/1024);
　　下载进度 = Math.round((目前下载/动画大小)*100);
　　柱状显示._xscale = 下载进度;

　　好了，文章到这里就结束了。有兴趣的读者朋友可以自己动动脑筋，设计出漂亮的加载动画。

　　该效果源件下载(9.15K)

上一页  [1] [2]