Flash动画实用技术之Loading...制作浅析
作者 佚名技术
来源 服务器技术
浏览
发布时间 2012-07-10
|
在观看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]? 关键词：动画 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于Flash动画实用技术之Loading...制作浅析的所有评论
