正在加载...

参考英文教程,并作出大量原创补充 – Neil Webb, neil AT nwebb DOT co DOT uk, http://www.nwebb.co.uk
转载请注明原帖:http://www.awflasher.com/blog/archives/468

2006年12月19日的一个小补充:关于onLoadInit与onLoadComplete的细节对比(文末)

读取外埠数据参与Flash应用程序部署是一件非常重要和常见的工作,尤其是我们常常需要检测这些数据加载的进度。传统的做法是采用loadMovie的方法,不过这种方法需要对被载入的外埠资源进行太多的预先性操作,当外埠资源不可知或者不是swf文件时,loadMovie显得无能为力。而MovieClipLoader(下称MCL)类却帮我们大大简化了这项麻烦工作。此外,它使得我们能获取更多的需要,并减少代码量。我们可以用一个单独的MCL类来载入一个,或者多个外埠资源到指定的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、我们终于将最复杂的工作部署好了。接下来我们只用使用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。

接下来,我将介绍实时调用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]);
}
}

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确实是一个不可多得的好东西了吧?:)

PS:

 

引用自 lzyy@blueidea.com

个人觉得loadMovieClip 类,用来加载图片效果不错,但如果加载flash的话则很容易出问题,flash8+maxthon+256 RAM memory下测试,每次载入flash时,都会导致maxthon卡死,而换作图片时,效果却非常如意,所以个人推荐导入图片时用loadMovieClip类,而导入flash时还是用第二种方法比较好!刚刚又测试了一下,loadMovieClip类用来加载flash,效果也是不错的,只要加一句System.security.allowDomain(“http://www.yourdomain.com“);就行了 :)

aw回:目前我还没有作相关测试,但对于”System.security.allowDomain”,我确实钻研的还不够,有机会好好看看……

补充:我所遇到的MovieClipLoader的灵异事件:
1、对于从外部读取的SWF,结合HTML中wmode=transparent时,按键无响应
2、调试时必须加“./”方可载入图片

=========================

本系列文章:
1 – [技术]原创-完美的loading-完美到底[基础]
http://www.awflasher.com/blog/archives/444
结合原理介绍loading基础。

2 – [技术]原创-完美的loading-完美到底[利器]
http://www.awflasher.com/blog/archives/468
详细介绍MovieClipLoader类的使用,以及一些原理。

3 – [技术]原创-完美的loading-完美到底[减负]
http://www.awflasher.com/blog/archives/470
主要解决v2组件相关的loading,原文附图,至此,系列教程结束,应该不会再有loading的麻烦了!:)

~ 补充
关于onLoadInit与onLoadComplete的细节对比

Macromedia推出MovieClipLoader这样一个功能强大的武器时,却不慎犯下了一个“文不对题”的低级错误(参考When complete is not complete)
onLoadInit与onLoadComplete这两个事件的功效与它们的名字并不相同。
包括我自己之前都没有注意这个问题,只是一味的采用onLoadInit来进行应用部署。今天在给白云黄鹤首页进行改进的时候,发现自己居然用了onLoadComplete,也不知道那时候是出于什么考虑(因为我的习惯一直不用complete而是init)。于是进行了大搜索,找到了上面的文章(When complete is not complete)。

onLoadComplete,字面上是载入已经完成,但实际上,仅仅是下载完成而已。载入的物件,尤其是swf,并没有得到实例化,因而在此,你并不能得到它的各类属性,也不能对它施放命令。
onLoadInit,字面上意思是载入初始化完成,但实际上,在这个callback function被执行前它并不会显示在舞台上。

原文最后一段颇有意思

 

引用自

So you see, ‘Complete’ is not really complete, just on the verge of completing. Like a person knocking on your door, ready to come in, but you can’t see who it is or what they look like.

你看看,“完成”并不是真正的“完成”,只是在将要完成的那一刻。就好像一个人来瞧你的门,准备进来,但你却不知道他是什么样子一样~:)

还没找到您要的东西?Google试试看吧,
Google更注重原创、时效性好的文章:


本文相关评论: 才 3 条评论
  1. 小惠 2006-11-11 11:18:02

    AW老师,我是个新手,为了找加载外部SWF的LOADING看到你的文章,非常详细,不过对我这样的新手还是很难看懂,不知道是否能给我源文件学习呢?
    就是像你例子里面的一样,一个一个按顺序加载的,我开始是用一个MCL和XML一起做的,然后有“上页”“下页”按钮。可是我太笨了,弄不好,测试也不稳定,现在按钮也都没反应了,不知道哪出问题。哭惨了。。请求你帮助。

    为了这个LOADING,我好几个晚上学通宵可是没弄懂,如果有源文件我就能学习。多谢了。可以寄给我吗?

    loretta18@163.com

  2. aw 2006-12-19 12:15:20

    如果这篇教程看不懂,给你源文件估计也没有意义。真的……
    因为你首先就必须理解callback函数的意义。这个MCL我在刚开始接触的时候,也是焦头烂额的,但当我正确理解了callback函数的意义的时候,问题全都解决了。当时我下载了好多源文件(你要想要,搜一下网上到处都是)根本就不能解决我的疑惑。

  3. aw’s blog 姿态永恒 » [技术]原创-完美的loading-完美到底[减负] 2007-02-15 03:59:59

    […] V2,也爱,也恨!这里介绍关于含有V2组件项目的loading问题 转载请注明原帖:http://www.awflasher.com/blog/archives/468 […]

[支持Ctrl+Enter]为了我们大家和家人的安全,留言请慎重!
声明:
1、本站仅与见过面的个人博客交换链接,见此文
2、留言时的头像是Gravatar提供的服务。如果您有兴趣并且有闲暇时间,可以看看这里的介绍