如何给Flash做一个预加载的Loading

很早之前我曾经说过“没有 loading 的Flash，不是完整的flash”。我想那个句话可能偏激了。因为有时候一些不到10k的flash，确实不需要做什么loading。但我始终认为，做一迹掘则个优秀的loading是衡量一个flasher水准、甚至态度的，因为loading是唯一一个你不会多看而所有用户、客户会看的东西，所以你对loading的重视程度，甚至可以反衬你这个flasher的职业道德。 转载请保留原文地址： Flash的loading的技术讨论共分为三部分： 1、基础 2、MovieClipLoader相关讨论(较深入) 3、V2组件相关问题 前面我们介绍了基础部分，今天我们对 MovieClipLoader做Flash loading 做一些深入的相关讨论 。 读取外埠数据参与Flash应用程序部署是一件非常重要和常见的工作，尤其是我们经常需要检测这些数据加载的进度。MovieClipLoader(下称MCL)类就可以帮我们大大简化这项麻烦工作。此外，它使得我们能获取更多的需要，并减少代码量。我们可以用一个单独的MovieClip类来载入一个，或者多个外埠资源到指定的MC或者层级，或者我们可以为每一个加载工作制定不同的MCL实例。 我决定分两部分来完成这篇教程。首先，我们将介绍MCL的基本用法；然后我们将介绍如何使用一个单独的MCL实例来读取外埠资源到不同姿棚的MC，并且，我们将加入侦听器对象来参与工作。当然，不通过侦听器也可以完成任务，我们暂散绝时不介绍侦听器，因为这样你会更加轻易理解MCL。 那么，我们首先来大体了解一下MCL有哪些回调函数，后面也会有具体介绍（aw附:回调函数我个人理解就是某一个类组、参数事先确定，拥有指定功效的方法）这里可以了解一下什么叫做回调函数）： MovieClipLoader对象的回调函数: 事件回调函数（严格要求数据类型的时候，它们并不是方法，后祥）： * MovieClipLoader.onLoadStart() - 当加载开始的时候触发 * MovieClipLoader.onLoadProgress() - 在读取进行中触发 * MovieClipLoader.onLoadInit() - 读取资源载入后的第一帧执行完成后触发 * MovieClipLoader.onLoadComplete() - 当读取的外埠资源已经完全下载到本地时触发。 * MovieClipLoader.onLoadError() - 当加载外埠资源出错时触发。 * MovieClipLoader.unloadClip() - 将加载的外埠资源移除或终止一个加载工作。 方法回调函数： * MovieClipLoader.getProgress(target:Object):Object - 读取外埠资源的进展，参数为MC对象(aw附：其实MC这种数据类型也就是一种对象)。返回一个对象，该对象包含两种事先预定好的属性(后祥) 要想好好理解这些回调函数，我们动手试验一下是最好的方法。当然MCL是Flash7之后才有的，所以别忘了发布的时候发布成为7 的版本号。假如直接用FlashPlayer来调试可能会碰到一些问题，我们推荐在浏览器中进行调试（个人意见：对于外埠资源难以获得情况，比如教育网获取公网资源，最好不要在IDE中调试） 在我们的例子中，我们将用一个MCL对象来读取不同的图片，并将它们置入不同的空MC中。本例中要用到的swf文件和图像源文件将在Actionscript.org找到（个人建议：其实看完这篇文章要不要源文件没有必要了） 1、建立一个新的Flash文档，并在第1帧输入以下脚本： _root.traceBox.vScrollPolicy ="on"function myTrace(msg) { _root.traceBox.text = msg newline_root.traceBox.vPosition = _root.traceBox.maxVPosition} 我们这里是在建立一种跟踪调试机制，调试的(变量)将输出到文本框组件中。这里的方法"myTrace"是预先定义好的一个函数,它帮助我们顺利完成对某些信息的监控；其中第二句的作用是使文本框随时输出最新监控值。 2、现在从组建库托拽一个TextArea组件进入场景，并给以合适的大小，以及一个实例名称traceBox(对应上面的脚本) 3、接下来，我们要建立一个新的MC元件。并在场景上部署3个实例，为它们分别命名为myMC1,myMC2,myMC3。我们将把图片或者swf影片装载进入它们，并且，在它们下载到本地后按照需求调整它们的尺寸。其实，对图片人为地改变尺寸会造成许多不好的后果，比如锯齿的产生，但是为了让大家了解onLoadInit事件的使用，我们将会这么做。 4、然后，我们建立一个MCL对象，在第一帧输入以下脚本： var myMCL = new MovieClipLoader()//create an instance of MovieClipLoader aw附： 这里我想罗索以下，关于Object的翻译。因为上述代码的注释中，老外用的是instance这个词，直译的话，Object是“对象”；Instance代表“实例”。前者更注重于其数据类型，而后者则更注重于其客观存在性。 5. 现在我们就可以部署脚本了，在第一帧： myMCL.onLoadStart = function (targetMC) { var loadProgress = myMCL.getProgress(targetMC)myTrace ("The movieclip " targetMC " has started loading")myTrace("Bytes loaded at start=" loadProgress.bytesLoaded)myTrace("Total bytes loaded at start=" loadProgress.bytesTotal)} 这个函数的第一行中申明了一个(对象类型的)变量，显然，这个变量的值由myMCL对象的getProgress方法获得.刚才已经介绍了getProgress方法,这里可以看到,返回的loadProgress.bytesLoaded就是loadProgress对象的bytesLoaded属性. 这里我再啰嗦一句： 为什么返回一个对象，而不返回具体的值。这是有原因的。函数返回值的功能使得程序设计更加完美，然而很多情况下，我们要返回的并非一个值，我们可能返回两个或者更多的值，甚至它们的数据类型都不相同。这样，只有通过对象的形式来返回了。这是解决问题最简单最高效的方法。下面三句myTrace就呼应了之前我们定义的监控函数，这样就能看到我们关注的变量了。 6、我们已经为onLoadStart事件部署了相应的工作，接下来我们要为上述其他事件部署工作了。紧接着是onLoadProgress，它接受三个参数：targetMC, loadedBytes, totalBytes。分别代表目标容器MC实例；已经读取的体积、总体积。 myMCL.onLoadProgress = function (targetMC, loadedBytes, totalBytes) { myTrace ("movie clip: " targetMC)myTrace("Bytes loaded at progress callback=" loadedBytes)myTrace("Bytes total at progress callback=" totalBytes)} 7、我们的onLoadComplete方法仅接受一个参数，它就是容器MC实例。像onLoadStart一样，我们用getProgress方法来返回读取情况。 myMCL.onLoadComplete = function (targetMC) { var loadProgress = myMCL.getProgress(targetMC)myTrace (targetMC " has finished loading.")myTrace("Bytes loaded at end=" loadProgress.bytesLoaded)myTrace("Bytes total at end=" loadProgress.bytesTotal)} 8、onLoadInit方法将在所有加载的内容被下载到本地容器MC中之后才开始执行。这将使得你能更好的控制加载进来的内容的属性。我选择的图片非常大，这样我们可以把读取过程看得更加清楚，而我也要对已经加载的图片尺寸进行修整，让它能全部显示出来。 myMCL.onLoadInit = function (targetMC) { myTrace ("Movie clip:" targetMC " is now initialized")targetMC._width = 170targetMC._height = 170} 9、还有一个回调方法onLoadError。假如有错误发生，它将会被触发。作为一个优秀的程序员，部署完善的应用程序的时候，对错误发生的避免措施是必不可少的！ myMCL.onLoadError = function (targetMC, errorCode) { myTrace ("ERRORCODE:" errorCode)myTrace (targetMC "Failed to load its content")} 10、我们终于将最复杂的工作部署好了。接下来我们只用使用loadClip方法读入我们需要的内容就行了。loadClip方法的两个参数分别是 外埠资源的地址 和 容器MC的实例 。 myMCL.loadClip(" ","_root.myMC1" )myMCL.loadClip(" ", "_root.myMC2")myMCL.loadClip(" ", "_level0.myMC3")路径可以选择相对路径。注重，路径的相对性也是一个大问题，当SWF在非本路径的HTML中被引用的时候，遵从HTML所在的路径！这一点是很多Flash教程都忽视的。所以，有时候绝对路径也有绝对路径的好处。 所有的调试工作最好在浏览器中，而非IDE中完成。而且脚本输出方式必须是AS2。

import flash.display.LoaderInfo

import flash.net.URLRequest

import flash.display.Loader

import flash.events.Event

import flash.events.ProgressEvent

import flash.events.IOErrorEvent

import flash.display.MovieClip

import flash.display.Sprite var ur:URLRequest= 老誉new 茄陪URLRequest("这里写要加载动画的地址") var Load:Loader=new Loader()

//__________________ Load.contentLoaderInfo.addEventListener(Event.OPEN,Loadstart)

LoadcontentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,Loading)

Load.contentLoaderInfo.addEventListener(Event.COMPLETE,Loadcom)

Load.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,LoadError)

Load.load(ur)

function LoadError(e:IOErrorEvent) {

 txt.text = "加载错误"

}

function Loadstart(e:Event) {

 addChild(jdt_mc)

}

function Loading(event:ProgressEvent) {

 var jd:Number=Math.round((event.bytesLoaded/event.bytesTotal)*100)

 txt.text = "加载完成：" + jd + "%"

 jdt_mc.scaleX = 颤含蠢jd

}

function Loadcom(e:Event) {

 jdt_mc.visible = false

}

addChild(Load)

//_______________________________

var jdt_mc:MovieClip=new MovieClip()

jdt_mc.graphics.beginFill(0xff00ff)

jdt_mc.graphics.drawRect(0,0,2,30)

jdt_mc.graphics.endFill() addChild(jdt_mc)

jdt_mc.x = 300

jdt_mc.y = 700

利用AC制作Loading下载指示条

Loading下载指示条在Flash作品中是很常见的，利用这样的指示条可以实现真正的交互，给浏览者一个实时的信息。这种Loading的制作方法要求对AC熟练程度较高，限于篇幅这里就不进行深入的分析说明了，其做法的要点是：运用Flash5新增加的属性“_framesloaded”和“_totalfrmes”的比值来实现，并且把数值传递到一个“dynamic text”中输出。用这个比值来控制精度条的缩放，以达到“补血”的动画效果。用同样的方法，我们可以利用getbytesloaded()、getbylestotal()和gettimer()计算出带宽，剩下的具体步骤留给读者自己完成。

制作Loading动搏罩让画演示效果

下面主要说使用简单的AC判断电影下载是否完全，和Loading动画演示效果的制作

FLASH loading制作

原理：制作时主场景动画留下前两帧放Loading判断和Loading动画，第三帧开始是主动画。因为MC可以自己独立播放，所以只需要制作一个MC动画，接着放在第一、二帧的判断循环中就可以了。

举例（预载画面只有一个Loading闪烁的制作方法）：

1. 首先在电影的最后一帧定义个名叫“end“的标签；

2.然后定义第一帧的AC为ifFrameLoaded (“end”) { gotoAndPlay (3)； }，第二帧的AC为gotoAndPlay (1)；

3. 接着开始制作闪烁的Loading MC。新建一个MC，命名为“Loading“，用文字工具在场景中输入文字，此例中输入“Loading……”，接着在第二帧插入一个空帧。由于MC的自身循环播放，所以就能产生闪烁的效果。

4. 然后把此MC拖入到主场景的第一个影帧中，此例完成。

Loading动画演示效果进阶制作

其实现在很多动画基本上都是运用了这个原理，只是在细节中表现手法不同，另外也加入了一些AC进行控制。各种效果不同的Loading，我们在ShowGood的作品中看到不少。例如《神啊，求求我吧》这个闷迹MTV的Loading，其主要是一个鼠标的MC跟随效果（图1）。要实现这种效果不难，这里就介绍一种简单的类似的实现方法。Loading的原理和刚才介绍的制作方法类似，用一、二帧做判断。不同的是，这里第四帧才是主动画，第三帧放按钮做个选择。制作方法如下：

1. 新建一个Flash文件，新建一个MC，命名为“Loading”，添加动画背景。

2. 这里Loading MC的制作有些不同，需要用两个MC来完成，要再新建一个MC作为鼠标跟随效果，命名为“mousem”。这里可以模仿ShowGood的旋转星星制作一个动画MC（留给读者自己制作）。

3. 接着我们把刚做好的mousem MC拖放到Loading MC中并加入AC：startDrag (“mousem”)；，然后再把Loading MC拖入场景中。

注意：在MC的时间轴一定要在第三帧的地方插入一关键帧，也就是按F6键。

4. 接下来做第三帧。创做一个PLAY的按钮（图2），新建一层，然后在第三帧插入一关键帧，把按钮放入适当的位置并定义这个按钮的AC为：on (release) { gotoAndPlay (4)；}。另外在该层第三帧加入一个AC：Stop()；。

这样，一个可爱的Loading效果就做好了。

其他的Loading动画效果都是上面的派生。不过想做好一个动画还真不是件简单的事情，不仅要有好的创意和好的美工，还要有对一些基局常用AC的了解和运用。这些方面的内容只有留给读者们自己慢慢提高了

---