[技术]原创-完美的loading-完美到底[基础]

很久没有发技术日志了,要来就来个完美的。您别激动,一个小小的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 thoughts on “[技术]原创-完美的loading-完美到底[基础]

  1. 不错,再学习ing… [lol]
    偶也有几点体会,var getTar:MovieClip = this._parent;和 getBytesTotal();值在onEnterFrame外面var出来,节约计算量。
    一般写成这样:
    var owner=this
    var _totalBytes=owner.getBytesTotal();
    function loadCheck()
    {
    var p=owner.getBytesLoaded()/ _totalBytes
    ……
    }
    var intervalID = setInterval(loadCheck,interval);

  2. to Rison: 节约计算量这个提法很好!不过如果在外面,_root上就多了一个不必要的变量了,呵呵。
    不过仔细回味,还是你的提法好,因为做Flash,CPU比内存更重要。

  3. 还有两个问题需要考虑:

    1. 在网络环境比较差的情况下,你的 p 值很可能是 NaN,原因是 bytesTotal 尚未读取到。
    如果你用了 if (bytesLoaded==bytesTotal) 则有可能在刚开始加载就跳过去了,因为bytesLoaded=0, bytesTotal也可能为0。
    我的解决方法: if (p==100 && bytesTotal>10);

    2. 精确度,p = (bytesLoaded/bytesTotal)*100 不如 bytesLoaded*100/bytesTotal,如果你只是取整那就不用考虑了,如果需要更精确的进度,则应该是这样。

    愿意交流的朋友可以 mailto: jack(at)xnux(dot)net

  4. 首先,把创意定好。然后给你的MC一个实例名字,比如叫做loader_mc。这时候在timeline上写代码,记住,是timeline而不是MC上。
    —————————————
    请问这里提到的“timeline”,是loader_mc的timeline还是主场景的timeline?
    为什么我会出现symbol loader_mc 的错误:1105 Target of assignment must be a reference value
    (as3环境下)

  5. 1. 在网络环境比较差的情况下,你的 p 值很可能是 NaN,原因是 bytesTotal 尚未读取到。
    如果你用了 if (bytesLoaded==bytesTotal) 则有可能在刚开始加载就跳过去了,因为bytesLoaded=0, bytesTotal也可能为0。
    我的解决方法: if (p==100 && bytesTotal>10);

  6. ………………….完全看不懂。。。= =

    LOADING。。。。

    不懂AS代码FLASH还未入门的飘~~“

    看见代码头大。。。没人手把手的教我绝对学不会。。。

    难道我这辈子都做不好FLASH么?(扶墙)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.