<b>完善的loading—完善到底</b>[Flash设计]

首先,想说一下我写此文的动机.记得很早之前我曾经说过“没有loading的flash,不是完好的flash”.我想那个句话大概过火了.因为有时刻一些不到10k的flash,确切不需求做什么loading.但我始终认为,做一个优异的loading是衡量一个flasher水准,乃至态度的.你问我为什么,我可以奉告你,因为loading是唯一一个你不会多看而全部用户、客户会看的东西,所以你对loading的器重程度,乃至可以反衬你这个flasher的职业德行!

有些做计划为主的朋友,我熟习不少,他们对loading都是得过且过的态度,做一个loading,更多的是自己找一个现成的,然后每次去套用,我个人认为是很不好的习惯.并非说我不倡导代码、元件的重用度,而是我认为关于loading这种东西,套多了,是要出问题的.我激烈倡议那些已经到达可以改正人家loading水平的flasher看看我的东西,当然,假如你连flash的as该写在哪都不知道,倡议先入门了.

好,下面切入正题,若何制作loading:

首先要感激Macromedia的大智慧,供应了很好的两个函数使我们可以做出完善的loading,那就是getBytesLoaded和getBytesTotal.请不要再用你改来改去改了两三年的那个什么getFrameLoaded什么什么了,我都记不清楚怎么拼了.我只想说,Frame的见解将在真正的Interactive-Design中淡化.更别提什么Scene,那是Flash的败笔!

那么loading若何工作呢?我们若何操纵这两个函数呢?这里要提到一个重要的概念.就是隔断调用.隔断调用有多种方法,下面摆列出来,并摆列出其在loading制作中的地位和用法,欢送增补:

·setInterval方法

写法:

function loadCheck()
{
var p = getBytesLoaded()/getBytesTotal();
if (p==1)
{
clearInterval(intervalID); // 释放隔断调用
gotoAndPlay(someFrame); // 开始播放
}
}
var interval = 30; // 这个数值是革新频率
var intervalID = setInterval(loadCheck,interval);

我个人并不举荐初学者用这种写法.因为很多人简单轻忽clearInterval,而这个东西被轻忽掉,是很可怕的!假如你的setInterval没有给及时移除,意味着你将在整个swf的播放历程中增添一个没有必要的负担!
并且这种办法很不合适掌握MoiveClip的情况（因为初学者会发现MC的途径是个大问题,而loadCheck本身就是个函数,还是被setInterval调用的,要在loadCheck中指一个途径出来,挺麻烦的,你不要期望_root,那样会让你的程序不标准;也不要期望this,因为在函数顶用this仿佛不太抱负;最好什么都不写,但常常你不敢不写）,进而做出更好的效果.

·onEnterFrame方法

我最喜好的就是这种办法了.对比便利、直观.因为常常我们是要用一个MC表现一个loading的进度,比方,一个进度条,大概更有创意的东西,只有你不能想到的,没有你不能做到的.

那么毕竟若何用呢.首先,把创意定好.然后给你的MC一个实例名字,比方叫做loader_mc.这时刻在timeline上写代码,记着,是timeline而不是MC上.因为这样便于代码统1、便于途径统1、便于管理和探求.别为了省几个字母就把代码通通搬到button,mc上面去,然后一个on(press)了事.除非你是在敷衍你的作品;大概你是在为了交功课.

loader_mc.onEnterFrame = function ()
{
var getTar:MovieClip = this._parent;
var p = getTar.getBytesLoaded()/getTar.getBytesTotal();
trace(p);
if(p==1)
{
this.onEnterFrame = null;
gotoAndPlay(someFrame); // 开始播放
}

}

就这么简单,记着,在MC的事件函数体内部引用MC,永久是一件很快的事情.因为this便可以指向这个MC本身,通过诸如this._parent之类的办法,可以找到你全部的MC!

·直接依靠于timeline的循环方法

非常非常非常陈腐的方法了,不介绍了.不过你们可以去问问那些一向不喜好自己着手做loading的flasher,他们大概在改的某一个版本就是这个,呵呵.

以上算是对比简单的.对比简单出问题的,还有两个.
第1、MovieClipLoader
第2、含有多种V2组件的Loader

读取外埠数据参与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 = 170;
targetMC._height = 170;
}

9、还有一个回调办法onLoadError.假若有错误发生,它将会被触发.作为一个优异的程序员,布置完善的利用程序的时刻,对错误发生的避免办法是必不可少的!

myMCL.onLoadError = function (targetMC, errorCode)
{
myTrace ("ERRORCODE:" + errorCode);
myTrace (targetMC + "Failed to load its content");
}

10. Well that's the hard work out of the way. Now we just have to load the files in to their respective targets, using loadClip, and passing it two arguments: the location of your file, and the destination movieclip for the file to load in to.
10、我们终于将最复杂的工作布置好了.接下来我们只用利用loadClip办法读入我们需求的内容就行了.loadClip办法的两个参数辨别是外埠资源的地址和容器MC的实例.

myMCL.loadClip("http://www.yourdomain.com/test1.swf","_root.myMC1");
myMCL.loadClip("http://www.yourdomain.com/test2.swf ", "_root.myMC2");
myMCL.loadClip("http://www.yourdomain.com/pic.jpg", "_level0.myMC3");

途径可以挑选相对途径.注意,途径的相对性也是一个大问题,当SWF在非本途径的HTML中被引用的时刻,顺从HTML所在的途径!这一点是很多Flash教程都轻忽的.所以,有时刻绝对途径也有绝对途径的好处.[途径问题源文件下载,下载了就一目了然了

全部的调试工作最好在浏览器中,而非IDE中完成.并且脚本输出方法必须是AS2.
Remember, for everything to work properly you need to be testing throuhg a browser (and preferably on line so you can see the files loading in real time). You also need to be exporting your code as ActionScript 2.

In the second part of this tutorial I'm going to show you how to use the MovieClipLoader class in a real-world situation, in order to solve a common problem when assigning event handlers to MovieClips dynamically.
接下来,我将介绍及时调用MCL的情形.为了能适应更多的利用,我们常常动态地为MCL拟定工作.

aw话外音:有时刻,我们如此写:

1、var mcl:MovieClipLoader = new MovieClipLoader ();
2、var mcl = new MovieClipLoader ();

发现第一种写法无法为MCL拟定onLoadStart等事件办法.这是编译器按照指定变量的数据范例产生的问题.osflash的一些朋友给了一些有效的概念,我也发现这个问题恰好触及到Flash内部的事件呼应机制,无妨介绍一下:
Flash的三种事件呼应机制

1、简单的回调函数,最老的;
2、侦听器,ASBroadcaster,FlashMX时代;
3、事件侦听器,EventDispather,FlashMX2004时代

这里,MCL用的是第二种机制,而整套V2组件则利用最后一套机制.
附:MCL官方申明,注意:上述办法中,仅包含getProgress办法!

intrinsic class MovieClipLoader
{
function MovieClipLoader();

function addListener(listener:Object):Boolean;
function getProgress(target:Object):Object;
function loadClip(url:String, target:Object):Boolean;
function removeListener(listener:Object):Boolean;
function unloadClip(target:Object):Boolean;
}

个人增补认为:1、2在不严峻要求数据范例的时刻可以通用.

下面开始介绍用侦听器来检测MCL事件的办法.在此之前,我们办理一个最常见的问题,我们常常会在论坛中看到有人这样发问:

引用 :

大家好,我动态地成立了一些MC,并一一分配给它们一个事件句柄（标志）.然后,我将外埠资源读取到它们之中.但是这些分配好的事件句柄都不工作了!
紧接着,发问人普通会贴出一对乱七八糟的代码,并大喊解救.

那么,我们首先来解析一下这个错误发生的缘由:当外埠资源被载入到一个MC中时,这个MC将会重新初始化.这意味着任何被预先拟定好的代码都将付之东流.关于开辟人员已经手动在舞台上安置好的MC则并没有相关的麻烦,这是因为任何直接通过onClipEvent拟定到MC的代码都能幸免被重新初始化.而动态成立的MC则举行上述的“初始化”,因为我们是在运行中给它们配置的事件代码.

我们若何避免这个问题呢?其实办法太多了,很多论坛也举行了极其具体的谈论,我就不多赘述了.

你目前大概还记得方才我介绍的“读取外埠数据参与Flash利用程序布置是一件非常重要和常见的工作,特别是我们常常需求检测这些数据加载的进度”

我们已经介绍了MCL的几个回调函数,所以这里也不再赘述了.我们目前制作这样一个效果:缩略图标式的图片浏览系统.我们将要从外部读取一些JPG图片,将它们放入我们动态布置的MC中.并且我们但愿这些动态成立的MC都具有各自的onPress事件.我们通过在MC装载好外部资源之后再为之分配事件.

在我们开始之前,我还想提醒大家注意一些常常呈现的疏漏:一定要在公布的时刻设置成Flash7+AS2以上的版本;其次,用浏览器测试你的效果,而不是IDE;不然你将会得到奇特的后果.

目前,我们开始编制代码,你会发现它比你想象的要简单得多.

1、新建一个Flash文档.

2、找四张100*100像素的缩略图片.

3、成立一个动态文本框,大约在300*300像素左右,利用12号字体,并使之实际边框,这样我们更好监测.别忘了设置它为多行的.

4、成立一个100X100像素的矩形,改变成MC,然后将它移出场景.这时刻,他已经呈目前库中了.在库中,设置他的链接名为“img”,并使其“在第一帧导出”.其实这个矩形会在外部资源载入的时刻被代替,目前只是为了调试便利.

5、在方才安排textBox文本框的层之上新建一层,这一层用于安排我们的代码,先写上:

stop();

6、目前我们定义一个MCL的实例,此外定义一个基本对象,作为我们的侦听器:

myMCL = new MovieClipLoader(); //define MovieClipLoader
myListener = new Object(); //define listener

7、接下来我们用侦听器来侦听onLoadComplete事件,该事件的作用上文已经提到了.我们目前把它交给listener对象,而不是MCL实例.当然,终究要把侦听器对象再交回MCL（以侦听其回调函数）的时刻,得到的效果就是我们需求的效果了.

记着,只有当读取完毕的时刻,对MC布置事件任务才是安全坚固的!所以,在onLoadComplete被触发的时刻才布置这个onPress事件给MC:

myListener.onLoadComplete = function(targetMC){
debug.text += "LOADING OF " + targetMC
+ " COMPLETE" + newline;
targetMC.onPress = function() {
debug.text += newline
+ "targetMC = " + targetMC._name;
}
}

注:上述代码中有几行被人为打断,但这并不影响效果.

你大概已经注意到了,MC的实例名称在onLoadComplete被触发的时刻是作为一个参数的身份传送给onLoadComplete的,这样我们掌握这个MC就非常便利了.比方这里便可以用点击MC来检测事件能否被成功布置给MC.

8、目前我们成立一个函数,它包含一个简单的循环来布置场景上的MC.并且及时地为每一个布置好的MC分配读取外埠资源的任务（loadClip办法）,代码以下:

function initClips(){
for (i=1; i<=4; i++){
this.attachMovie("img", "img" + i, i);
this["img"+i]._x = i*110;
myMCL.loadClip("0" + i + ".jpg" ,
this["img"+i]); //code wrapped
}
}

9、到这里基本上就完成了.目前我们剩下的工作就是注册侦听器并且按照需求调用相关函数、办法,反映到代码上就是以下两行:

myMCL.addListener(myListener);
initClips();

注意这里的次序,我们的侦听器对象在调用initClip()函数之前就被作用于MCL实例了.目前我们的MC的onPress事件可以顺利工作了,因为当图片被完好读入之后,事件才被分配过去.我们的代码也非常简便.我们再也不用为了loading而去制作麻烦的循环了,MovieClipLoader帮我们完成了全部工作!

附:完好代码以下:

stop();
myMCL = new MovieClipLoader();
myListener = new Object();
myListener.onLoadComplete = function(targetMC)
{
targetMC.onPress = function ()
{
trace("pressed");
}
}

function initClips()
{
for (i=1;i<=4;i++)
{
this.attachMovie("img","img"+i,i);
this["img"+i]._x = i*110;
myMCL.loadClip(url,this["img"+i]);
}
}
myMCL.addListener(myListener);
initClips();

到此为止,你应当相信MCL确切是一个不可多得的好东西了吧?

V2,也爱,也恨!这里介绍关于含有V2组件项目的loading问题

V2组件自面世以来就颇受争议,大体概括以下:

长处:

1、界面比V1组件越发美好、统一,人机交互情势越发完善
2、均采取面向对象脚本布置

缺陷:

体积粗笨,开辟一些只用到一两个组件的小利用程序时很尴尬.

消息机制方面利用EventDispather的消息广播机制,代替原有的AsBroadcast机制.使得刚出来的时刻很多人根本不会用.

这里就不谈论更多了,先说loading.含有大量v2组件的产品要想见人必定是不能不作loading的,比方aw's blog左边的那个blog小贴士.但是每次在loading的时刻仿佛城市碰到麻烦.那就是粗笨的体积全部被放到第一帧导出了,这样招致对一些300k以内的,含有v2组件的SWF文件举行远程载入的loading效果变得捉襟见肘.

办理的办法也不是没有,简单概括为三个步骤:

1、去掉“Export in first frame”

2、在公布的时刻设置一下“Export frame for classes”,这一点非常重要!

3、关于外埠读取的含有V2的swf文件,将容器mc举行以下设置:

loader_mc._lockroot = true;

好了,目前安心享用精彩而粗笨的V2组件吧~!