Flash教程系列--预载 Preload 的制作（转自闪客帝国） 　 　
　
预载 Preload 的制作
( 2003-12-13 )
作者： 孤独过客




编者注：虽然关于FLASH中的预载动画是长久以来许多人在讨论和关注的问题，而且也有过不少教程讲过LOADING的制作方法，早在2000年边城浪子就写过一个《Flash 5精确下载制作》的教程，可是，如今在各大论坛上，这依然是众多初学者不屈不挠的常见问题之一，今天，我们把三年前孤独过客写的一篇详细的预载Preload的制作教程在FLASH MX环境下稍加改编，希望初学者看后对FLASH预载问题能有一个清楚的认识。




该教程由浅入深分两部分：一　简单的静态Preload；二　有进度条的 Preload 的制作。结合《Flash 5精确下载制作》，相信你将制作出理想的预载LOADING。




现在就开始学习吧～




你有没有碰到做完一个大作，在本地预览完美流畅，但一传上网络，就断断续续呢？没办法，基于现在的网速，这种问题你不可能碰不到。那么如何解决这个问题呢？答案是做一个Preload预载。这样你的动画就不会断断续续让人看了没有激情，也不会象GIF动画那样杳无音讯，等半天也不出来了，至少你的动画给了观者一个提示——等待。那么在这节课里，我们就来学几种 Preload 的做法。
一、简单的静态Preload




一个静态的 Preload ，就象右面一样，在载入动画时，在屏幕上显示Loading的字样，待动画载入完毕后，Loading字样消失动画开始正式播放。这是最简单的 Preload 。





在开始做 Preload 之前，我们先来分析一下 FLASH 动画会出现停顿和制作 Preload 的原理。我们知道，FLASH动画是由帧组成的。在网路上播放FLASH动画的时候，采用了所谓“流(Stream)”的技术，载入一帧，就播放一帧。当某一帧中的内容太多（如有声音、符号过多等）时，载入那一帧就显得非常困难，需要的时间就要长很多，所以就出现了停顿的现象。而我们做 Preload 的目的就是把一些难以载入的帧载入后再播放动画，最简单而安全的方法，就是待所有帧载入后才开始播放动画。所以，制作 Preload 的关键就是判断是否把所有的帧都载入内存了。

用鼠标选中这一层的所有帧

把选中的这些帧向后拖动两格




了解了制作 Preload 的原理，我们就可以动手来做了。假设你已经做好了一个动画，那么如何给他来添加一个简单的 Preload 呢？首先，对每一层都进行如下操作：用鼠标选中这一层的所有帧，然后把选中的这些帧向后拖动两格，即在第一帧前空出两个空帧，这样第一帧就变成了第三帧。如下图所示。记住对每一帧都要如此操作。这样，每一层的开始都有了两个空白帧。下面我们就利用这两个空白帧来制作 Preload 。




首先任选一个层（因为开始两帧都是空帧，所以每一层都一样），在第一帧画上“Loading”的字样，就和刚才我们看到的那个静态Preload的画面一样。接着，把第一帧复制到第二帧，使第一和第二帧画面相同，但是，我们在第二帧就要进行判断是否已经把所有帧都载入到内存中了：如果载入完毕，就向下播放动画；如果没有载入完毕，则跳回第一帧。所以我们要在Timeline区的第二帧的方格内单击右键，选择 Action 为这一帧添加Action。点击加号，选择 If，进行判断。在判断的时候，我们就要利用到 _framesloaded 和 _totalframes 两个内部变量了，前者是已经载入内存的帧数，后者是这个动画的总帧数。所以我们只要判断这两个变量的值是否相等就可以了，如果相等则载入完毕，不等则没有载入完毕。所以我们按照下图所示填写条件框。最后，我们要在判断中加入跳转的指令了。在 If 和 Else 之间加入 gotoAndPlay (3)，表示载入完毕开始播放动画；在 Else 后面加入 gotoAndPlay (1)，表示未载入完毕回到第一帧。这样，第二帧的Action就应该是这样了：
if (_framesloaded == _totalframes) { gotoAndPlay(43); } else { gotoAndPlay(1); }



到这里,这个简单的 Preload 就做好了，上传到你的服务器上，看看效果怎么样。

判断的条件





在 If 和 Else 之间加入gotoAndPlay(3)，表示载入完毕开始播放动画；在 Else 后面加入gotoAndPlay (1)，表示未载入完毕回到第一帧。
二、有进度条的 Preload 的制作




学过了简单的 Preload 的制作，我们来看看有进度条的 Preload 是如何制作的。有进度条的 Preload （如下图）能让浏览者知道大约需要多少时间才能把动画载入，所以被许多Flasher所采用。别看它好像挺复杂，其实原理和前面所讲的简单的 Preload 是一样的，同样也用了 _framesloaded 和 _totalframes 两个内部变量来作判断。其实做这种 Preload 有很多种实现方法，比如做一个进度条形变的100帧的MC等，但在这里，我给大家介绍的是一种比较简单的利用Action Script做出的能精确到1%的待进度条的 Preload 的做法。
http://www.flashempire.com/school/img4/121205.swf



首先，和前面一样，在动画前也要空出几个空的关键帧，不过，这次要多空出一个，一共空三个空帧。




接着，在第一帧写上“Loading...”的字样，并画上一个带外框的矩形作为进度条。（如下图）然后用箭头工具（Arrow）选中进度条中的蓝色（内部）部分（即不选外框）。把它转化为MC（Convert to Sybmol）。现在在书签区选择编辑这个MC。我们要做的工作是让这个MC的中心十字对准进度条的左端（这样做的目的有助于编程控制进度条的长度）。具体的做法是，按下Ctrl+K或者在菜单里选择 Windows -> Align 面板，出现对话框后按照下图选择，别忘了在To stage上打个勾。看到十字中心对准了进度条的左边了吧。好，回到编辑Scene的状态，我们看到进度条中间的蓝色长条的位置已经偏离了，这是因为我们把MC中的内容做了修改的原因。现在我们就选中这个MC，用键盘上的方向键把这个MC的位置进行调整，使进度条在外框之内，就像我们没有编辑这个MC的时候一样。接下来，还是选中这个MC，为了能对进度条的长度进行控制，我们还要给它取一个实体名。在MC上单击右键，选择 Properties 面板中的Instance Name，在 Instance name 相中填入一个实体名，比如 load 。在命名实体名之后，我们要把这个MC的Alpha值设为0，目的是播放第一帧时，进度条的长度是100%，为了不让浏览者看到100%的进度条所以要把Alpha值设成0。在MC上单击右键，选择 Properties面板中的Color -> Alpha ，把Alpha值设成0。第一帧就完工了，第一帧的最终状态如下图。








接下来要做第二和第三帧了，我们先来看一下第二和第三帧的作用。在第一帧画好基础图形之后，第二帧要做的是控制进度条的长度，第三帧是判断是否载入完毕。所以，和前面简单的 Preload 相比，这个 Preload 其实只是多了第二帧的内容。




下面我们就来看一下第二帧的做法。




先复制第一帧到第二帧，使第二帧的内容和第一帧保持一致。接下来就是编程的工作了。




在Timeline区第二帧的方格里单击右键，选择 Action ，然后加入下面的程序：
load._xscale=_framesloaded/_totalframes*100; load._alpha=100;



第一行中设定的是实体名为Load的实体的X轴宽度，其宽度设为原长的(_framesloaded / _totalframes * 100)，这样就可以做到精确到1%的效果了；第二行是把这个实体的Alpha值设为100，这样在第一帧里的不可见的进度条就被显示出来了，这一行之所以要放在后面是因为要先设好长度再显示进度条。




第三帧的做法，和前面的简单的Preload的第二帧的做法基本相同（也要复制第一帧到第三帧），只是程序改为了（注意 gotoAndPlay 后帧数的变化）：
if (_framesloaded==_totalframes) { gotoAndPlay(4); } else { gotoAndPlay(1); }



动画的正式开始是在第四帧。这样这个有进度条的Preload就做好了，一样，上传到你的服务器上，看看能否正常工作。.fla下载
编者注：至此，该教程就结束了，另外补充一点：
关于Loading的测试问题
　　因为在本地机上做Loading时，Flash电影不管有多大，装载也不需要什么时间，所以Loading的动画往往还没来得及显示就进入主动画的播放了，那么怎么来测试制作Loading的效果呢？
　　我们可以通过Flash中的Show Streaming（显示流）的方法来模拟从网络装载页面的情况。具体做法很简单，在动画全部做好后，按Ctrl-Enter测试效果。在测试画面菜单中选View -> Show Streaming，或再次按Ctrl-Enter键就可以看到装载画面了。
　　如果你仍觉得装载得太快，看不清Loading效果，则可以在测试画面菜单中选Debug项，然后在其下选择一个下载速率，譬如14.4K，也可以自己定义，这样就可以对Loading进行调试了。


　
　
（闪客帝国整理）
（完）
　
[冷色蓝天 (12-15 20:57, Long long ago)] [ 传统版 | sForum ][登录后回复]1楼

如果要显示读取百分比的话，frameloaded 适用于流式动画，不适用于网站之类因为movieclip是重复使用的。

可以用
a = getBytesTotal();
b = getBytesLoaded();
实现比较准确的计算并显示读取百分比。[war_cow (12-16 19:37, Long long ago)] [ 传统版 | sForum ][登录后回复]2楼

(引用 war_cow:如果要显示读取百分比的话，frameloaded 适用于流式动画，不适用于网站之类因为movieclip是重复使用的。 可以用 a = getBytesTotal(); b...)但是getBytesTotal() 和 getBytesLoaded()是用于
MovieClip,你拿不到整个movie的大小.
[曾经 (12-17 12:25, Long long ago)] [ 传统版 | sForum ][登录后回复]3楼