aw's blog 姿态永恒 » 关于loading的文章 http://www.awflasher.com/blog 分享互联网, 分享人生 Sun, 29 Jan 2012 11:57:03 +0000 en hourly 1 http://wordpress.org/?v=3.3 给页面加上Loading效果最简单实用的办法 http://www.awflasher.com/blog/archives/1589 http://www.awflasher.com/blog/archives/1589#comments Thu, 20 Nov 2008 09:24:00 +0000 aw http://www.awflasher.com/blog/archives/1589 虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中：

其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。

最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：

首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：

<body>
  <div id='loading'>正在加载</div>

你可以直接放到页面的<body>标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）

然后，在你的样式表中，对这个loading设定一个简单的样式：

#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}

接下来，在你<body>标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记：

  <script>document.write('<style>#loading{display:none}<\/style>');</script>
</body>

如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：

  <script>$('#loading').hide()</script></body>

这样，当页面完全加载完毕之后，loading就隐掉了。

对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。

最后，希望这个老土的技巧能帮到你：）

84条评论, 立即发言 | 本文关键词: , , , ,

©aw's blog 姿态永恒 1984-2008 | 链接地址 - http://www.awflasher.com/blog/archives/1589

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/1589/feed 84 [技术]原创-完美的loading-完美到底[减负] http://www.awflasher.com/blog/archives/470 http://www.awflasher.com/blog/archives/470#comments Fri, 24 Mar 2006 15:27:44 +0000 aw http://www.awflasher.com/blog/archives/470 V2，也爱，也恨！这里介绍关于含有V2组件项目的loading问题
转载请注明原帖：http://www.awflasher.com/blog/archives/468

V2组件自面世以来就颇受争议，大体概括如下：

优点：
·界面比V1组件更加美观、统一，人机交互模式更加完善
·均采用面向对象脚本部署

缺点
·体积笨重，开发一些只用到一两个组件的小应用程序时很尴尬

消息机制方面使用EventDispather的消息广播机制，取代原有的AsBroadcast机制。使得刚出来的时候很多人根本不会用。

这里就不讨论更多了，先说loading。含有大量v2组件的产品要想见人肯定是不能不作loading的，比如aw’s blog左边的那个blog小贴士。然而每次在loading的时候似乎都会遇到麻烦。那就是笨重的体积全部被放到第一帧导出了，这样导致对一些300k以内的，含有v2组件的SWF文件进行远程载入的loading效果变得捉襟见肘。

解决的办法也不是没有，简单概括为三个步骤：

一、去掉“Export in first frame”
V2-Component-Loading

二、在发布的时候设置一下“Export frame for classes”,这一点非常重要!
V2-Component-Loading

三、对于外埠读取的含有V2的swf文件，将容器mc进行如下设置：

loader_mc._lockroot = true;

好了，现在放心享受精彩而笨重的V2组件吧~！

aw补充一点：最近在开发针对sohu博客的天气预报Flash插件时发现：V2组件必须全部拖拽到导出帧，例如这里的第二帧。并且记得一定要撤去其实例名(Instance Name)

本系列文章：
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的麻烦了！：）

6条评论, 立即发言 | 本文关键词: , , ,

©aw's blog 姿态永恒 1984-2006 | 链接地址 - http://www.awflasher.com/blog/archives/470

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/470/feed 6 [技术]原创-完美的loading-完美到底[利器] http://www.awflasher.com/blog/archives/468 http://www.awflasher.com/blog/archives/468#comments Thu, 23 Mar 2006 16:25:38 +0000 aw 参考英文教程，并作出大量原创补充 – 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.

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

3条评论, 立即发言 | 本文关键词: , ,

©aw's blog 姿态永恒 1984-2006 | 链接地址 - http://www.awflasher.com/blog/archives/468

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/468/feed 3 [技术]原创-完美的loading-完美到底[基础] http://www.awflasher.com/blog/archives/444 http://www.awflasher.com/blog/archives/444#comments Thu, 23 Mar 2006 16:24:50 +0000 aw 很久没有发技术日志了，要来就来个完美的。您别激动，一个小小的loading谈什么完美，我想你看了就知道^_^
我的口号，将此文打造成全球最完善的非Flash初学者loading教程贴。转载请保留原文地址：
http://www.awflasher.com/blog/archives/444

首先，想说一下我写此文的动机。记得很早之前我曾经说过“没有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上。因为这样便于代码统一、便于路径统一、便于管理和寻找。别为了省几个字母就把代码通通搬到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;(感谢jimohuoshan@BI提醒,不用null改用delete,原理~ http://www.luar.com.hk/flashbook/archives/001150.php)
delete this.onEnterFrame; // 注意是delete
gotoAndPlay(someFrame); // 开始播放
}}

就这么简单，记住，在MC的事件函数体内部引用MC，永远是一件很快的事情。因为this就可以指向这个MC本身，通过诸如this._parent之类的方法，可以找到你所有的MC!

·直接依赖于timeline的循环方式
非常非常非常古老的方式了，不介绍了。不过你们可以去问问那些一直不喜欢自己动手做loading的flasher，他们也许在改的某一个版本就是这个，呵呵。

以上算是比较简单的。比较容易出问题的，还有两个。
第一、MovieClipLoader
第二、含有多种V2组件的Loader

我买了回学校的火车票就继续写，哈哈
要是嫌不够，可以看我原创的这个loading特效，源码

本系列文章：
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的麻烦了！：）

22条评论, 立即发言 | 本文关键词: , , ,

©aw's blog 姿态永恒 1984-2006 | 链接地址 - http://www.awflasher.com/blog/archives/444

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/444/feed 22 [原创]Loading特效 http://www.awflasher.com/blog/archives/374 http://www.awflasher.com/blog/archives/374#comments Wed, 21 Sep 2005 16:34:54 +0000 aw 很久没有玩Flash了……前段时间做的那个项目别提了，要不是8里面那点新东西和老爸经济确实困难，我打死也不会再找那种项目作了。
近日自习英语和数学，发现这两门强项功力大减，唉！果然岁月不饶人啊！不过自习的感觉挺不错的，很久没有这么静了……当然每天自习到十点半还是有点憋……近日做了一个一直想做的效果。

言归正传，这是一个一个Loading特效。很久以前某国外网站做过，当时我还不知道怎么做，现在一帧代码搞定，希望对大家有用，新手学习，高手批评。

例子(要使用的话，请著名出处 www.awflasher.com )

注意:如果您的网速太快的话，是看不到这个loading效果的。其实，loading本身也是给慢速的网友一个打法时间的机会，让他们等待内容出现，内容当然比loading更加重要了。
很多朋友反映看不到效果，我抓了张图给各位看：）

此外，感谢矩阵棉花的提醒，很多朋友看不到效果是因为直接点开了SWF。大家只要点击“点此 显示/隐藏 媒体”就可以了

attachments/200509/21_170703_pl.gif

单击显示
stop();
import mx.transitions.easing.*;
import mx.transitions.TweenExtended;
//
loadThis();
function loadThis() {
  target = this;
  i = setInterval(doLoad, 20);

}
var pOld:Number = 0;
var pNew:Number = 0;
function doLoad() {
  trace(1);
  pNew = Math.round(target.getBytesLoaded()/target.getBytesTotal()*400);
  if (pNew != pOld) {
    var _p:Number = pNew;
    dp = pNew-pOld;
    if (_root.tempMC == undefined) {
      tempMC = target.createEmptyMovieClip("temp", 1);
    }
    tempMC._x = 0;
    tempMC._y = 0;
    var _d:Number = tempMC.getNextHighestDepth();
    with (tempMC.attachMovie("rect", "tempMC"+_d, 10+_d)) {
      getThis = _parent[_name];
      getThis._x = pOld;
      getThis._width = dp;
      var _tween:TweenExtended = new TweenExtended(getThis, ["_y", "_alpha"], Bounce.easeInOut, [getThis._y+10, 0], [getThis._y, 100],3, true);
      //  
    }
    pOld = _p;
  }
  if (pNew == 400) {
    killLoader();
  }
}
function killLoader() {
  _t = target.temp;
  trace(_t);
  var _tween:TweenExtended = new TweenExtended(_t, ["_y", "_alpha"], Regular.easeInOut, [0, 100], [0, 0], .5, true);
  _tween.onMotionFinished = function() {
    _t.removeMovieClip();
    _root.nextFrame();
  };
  clearInterval(i);
}[/code]

4条评论, 立即发言 | 本文关键词: , ,

©aw's blog 姿态永恒 1984-2005 | 链接地址 - http://www.awflasher.com/blog/archives/374

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/374/feed 4