正在加载...

很久没有发技术日志了,要来就来个完美的。您别激动,一个小小的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的麻烦了!:)

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


本文相关评论: 才 22 条评论
  1. tdus 2006-02-23 09:26:25

    var getTar:MovieClip = this._parent;这句是精华,先拿去用了,哈哈,谢了~~

  2. aw 2006-02-23 11:01:18

    再吹一牛,with里面还有一精华^_^

  3. tdus 2006-02-23 11:08:53

    不明白,还请指教?

  4. rian 2006-02-23 11:19:42

    学习来啦.. [lol]

  5. aw 2006-02-23 12:19:14

    我先卖个官子咯^_^

    等我先把那该死的日本人的英语翻译成中文……抱歉了~~

  6. tdus 2006-02-23 12:43:14

    [smile] 好的,正事要紧,你先忙吧

  7. blank 2006-02-23 09:03:45

    你那个WORKS的原创LOADING可以写一教程哦..不要舍不得撒! [smile]

  8. aw 2006-02-23 09:40:04

    一切等我把那个日本人的英文论文翻译完再说:)

    真不好意思啦!~

  9. rison 2006-02-24 12:38:13

    不错,再学习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);

  10. aw 2006-02-24 12:51:36

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

  11. blank 2006-02-24 02:06:32

    for(var i:Number = 0;i<10001;i++){

    trace("사랑해요!");

    }

  12. rison 2006-02-24 11:07:50

    回贴好快 [eek]

  13. harryzhxu 2006-02-25 05:33:41

    var p = getBytesLoaded()/getBytesTotal();
    if (p==100){

    }

    这个p是不是1啊?

  14. aw 2006-02-25 06:03:57

    -_-# 偶错了…… 谢谢!

  15. lync 2006-10-13 06:42:12

    好贴再顶个~

  16. Jack 2006-10-25 11:13:26

    还有两个问题需要考虑:

    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

  17. aw's blog 姿态永恒 » [技术]原创-完美的loading-完美到底[利器] 2007-03-05 11:02:59

    […] Not in Portland – You own me an answer « [技术]原创-完美的loading-完美到底[基础] 搜集一堆在线服务 » 2006-3 23 […]

  18. asdf 2007-06-13 11:36:47

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

  19. aw 2007-06-13 11:59:58

    asdf: 目前这篇教程并不适用于AS3环境,非常抱歉。我稍后会在as3blog.com放出针对AS3的loading教程。

  20. asdf 2007-06-13 04:50:15

    谢谢~
    但如果是as2下应该放在哪个timeline上呢?

  21. 动漫小子 2008-02-26 04:13:47

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

  22. FLYBKK 2008-02-29 09:02:05

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

    LOADING。。。。

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

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

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

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