Loading是如何制作的？

文章类别：Flash | 发表日期:2008-9-21 15:03:25

　　

Loading是如何制作的？
解决思路：
loading为动画的预加载。为了达到动画的流畅播放，我们要使动画在网络上全部加载完成以后在播放。这样就要使用as语句来设定。通过用加载帧loadFrame，和加载字节等语句来完成。
具体步骤：
Loading.英文原意为装载、装填。在flash里面叫做预载画面。我们在欣赏每一件完整的flash作品的时候，都会看到loading的出现。这是因为，动画播放是否流畅取决于网络带宽，对于用调制解调器的朋友们欣赏的时候，loading会预先的加载一部分或全部以后，才能流畅播放。非凡是，动画中有音乐或者位图的情况下，loading?的作用就显而易见了。由于上述的条件限制，没有哪一个动画不作loading。Loading发展到现在已经不是简单的一个下载动画的工具了。它已经成为体现主体动画，衬托主体的一个载体。Loading分为两个大部分。一个是功能类的（指下载作用功能）另一部分是等待动画。下面我们就从这两个方面来研究一下。
制作loading?有许多的方法。我们从最简单的开始向大家介绍：
第一种：loading(?假的?)
也就是假loading。这种loading我想在某些人的动画中也会出现。自己就曾经作了一个。先作的动画，最后作loading,时值夜半，睡意朦胧，恍惚中作了一个。欣喜之余，马上发布。天明清醒，遂发现loading没加as。故称为（假）loading?。幸好，动画不长，没人发现。心中窃喜。在这里告诫朋友们，loading?也是我们的作品的一部分，我们要用正确的态度来对待它。
第二种：用ifFrameLoaded语句来完成。
IfFrameLoaded现在已经不提倡使用了。完整的语句为：
If|FrameLoaded(欲加载的场景??.???欲加载的帧数或帧标签){
GotoAndPlay(正式动画的第一帧)
此语句的缺点是，它只能判定欲载程序是否到某一帧。可是假如此帧的后面有许多音乐或位图，播放以后还是不流畅的。
好了，我们一起来作一个简单的Loading吧！
1、??运行Flash??MX?2004，文档属性默认。
2、??单击【插入】|【新建元件】命令，新建一个名称为loading，类型为影片剪辑。
3、??入loading影片剪辑编辑区后，用文本工具写入“loading”。按F6复制此内容四帧。并删除第2帧，第4帧的内容。如图3.3.42所示。

图3.3.42?影片剪辑loading
4、??返回到场景1，把名称为”loading”的影片剪辑拖入到时间轴的第1帧。并延长至第2帧（F5）。
5、??新建一层，命名为“as”。在第1帧和第2帧分别插入空白要害帧。第一帧加入as：?????????????????ifFrameLoaded(3){
?????????????????gotoAndPlay(3);?
?????????????????}
第2帧加入as:?gotoAndPlay(1);
如图3.3.43所示。

图3.3.43?????时间轴设置
6、??新建一层，命名为主动画。在主动画层的第3帧，插入要害帧，放置你的动画。也就是说，动画可以从这里开始作。如图3.3.44所示。

图3.3.44????时间线设置
7、??按Ctrl+Enter?两次，预览loading?。
8、??完成！?请参看源文件“ifFrameLoaded”。
由于影片剪辑有不受主时间线控制的特点，整个loading呈现的是不停闪烁的文字“loading…”的画面。我们分析一下这条语句。
第一帧：
IfFrameLoaded(3){??//假如加载完第三帧，执行大括号里面的语句
GotoAndPlay(3);
}????????????????//转到并播放第三帧。
第二帧：
gotoAndPlay(1);??//转到并播放第一帧。
也就是说从第一帧到第二帧是一个小的循环。假如第一帧没有加载完，时间先就到了第二帧，第二帧的语句是gotoAndPlay(1)，所有时间线又回到第一帧播放。循环几次以后，当ifFrameLoaded判定已经加载完动画以后，就执行gotoAndPlay(3)去播放。
这个语句的缺点是显而易见的。它的判定是根据动画中的帧的多少来进行的。我们知道，动画中的帧大小是不一样的，要害帧就要比延长帧大。这样，你就无法准确的判定欲加载的帧数是否适合网络带宽。这也是这个语句的弊病。再有，此语句其实就是一个判定语句，在flash?MX中可以用if来完成。

非凡说明

测试LOADING与测试动画不同，需要按Crtl+Enter两次才可以测试。我们还可以调节模拟下载的比特率，来使用体积大小不同的作品进行测试。
首先我们进行loading的测试。如图3.3.45所示。

图3.3.45???测试loading
假如作品的体积过小的化，loading一闪而过，我们就无法确定制作的loadiing是否正确。决借这个问题，我们可以进行下载比特率的设置。
单击【视图】|【下载设置】|【自定义】命令，打开【自定义下载设置】面板。如图3.3.46所示。

?
图3.3.46????自定义下载设置面板
在这个面板中，我们就可以设置适合自己动画的下载比特率了。习惯上体积小的文件比特率就小一点，体积大的文件比特率就大一点。
第三种：_framesloaded语句
利用_framesloaded来替代ifFrameLoaded制作loading。我们来看看它的用法。
_framesloaded语句是影片剪辑的属性，在properties集合中。我们来用它来判定我们的预加载帧数。下面我们用它来作一个简单Loading
1、运行Flash?MX?2004，文档属性默认。
2、利用上面的例子做出影片剪辑Loading。
3、返回到场景1，把影片剪辑放到时间轴的第1帧，并延长至第2帧。如图3.3.47所示。

图3.3.47???????时间轴设置
4、新建一层，命名为as层，在第2帧加入要害帧。并加入as.如下：
??if(_framesloaded>=3){
gotoAndStop(3);
}else{
gotoAndPlay(1)；
}
1、??建第三层。命名图片层。在第三帧插入要害帧，导入一幅图片。如图3.3.48所示。

图3.3.48??????最后的时间轴设置
6、完成！请参看源文件framesloaded。
解释一下语句的含义：
if(_framesloaded>=3){??//假如（if）影片加载的帧数大于或等于第三帧的化，执行下面大括号里面的语句。
gotoAndStop(3);????//上面条件成立，则转到并停止在当前场景的第三帧。
}else{???????????//假如上面的条件不成立，则执行else下面的语句
gotoAndPlay(1)；//假如条件不成立，则执行转到并播放当前场景的第一帧。（循环，直到条件成立）
}
上面用到了一个条件语句（if）假如大家熟悉条件语句的化，就很轻易明白。
利用framesloaded我们还可以做出另外一种比较人性化的Loading，就是加入载入条。载入条可以动态的显示影片的加载情况，使欣赏者能够清楚明了地知道影片的加载过程。利用framesloaded就可以作一个简单的加载条。
1、运行Flash?MX?2004，文档属性默认。
2、新建一个影片剪辑mc，名称为loading。
3、进入影片剪辑loading编辑区。利用长方形工具画一个长方形进度条。颜色随意。如图3.3.49所示。

图3.3.49???绘制影片剪辑loading
4、返回场景1，打开“库”面板，把影片剪辑loading拖放到场景1的第1层第1帧。并延长至第2帧。在下面的属性面板中填入影片剪辑loading的实例名”loading”。如图3.3.50所示。
图3.3.50设置影片剪辑属性
5、新建一层，命名为AS层，在第1帧插入要害帧，打开AS面板，加入如下AS语句：
6、if(_framesloaded>=_totalframes){
gotoAndPlay(3);
}else{
_root?.?loading?.?_xscale=(_framesloaded/_totalframes*100);
gotoAndPlay(1);
}
7、新建一层，命名为音乐，插入1个要害帧，并导入一段音乐。
8、测试完成。请参看源文件“totalFrames”。
9、动作脚本解释：
if(_framesloaded>=_totalframes){???//利用条件语句（if）。条件是：当下载的帧数大于或等于动画全部帧数的时候，执行下面的语句。
gotoAndPlay(3);?????//跳转并播放第三帧。
}else{?????????????//否则。当条件不满足的时候，执行下面的语句。也就是说，当没有下载完全部帧的时候。
_root?.?loading?.?_xscale=(_framesloaded/_totalframes*100);
//设定影片剪辑loading在x轴上的比例为（——_framesloaded/_totalframes*100这是什么意思呢？就是说用动画全部帧数除以已经下载的帧数，然后乘以100。这个数值就是我们下载得到的帧数的体现。体现在影片剪辑loading的x轴方向上。???
?gotoAndPlay(1);??//因为没有下载完，我们依然播放第一帧。
}
第三种：getBytesLoaded()和getBytesTotal()
这两个语句意思分别为：获取装载的字节数和动画总的字节数。说到这里，朋友们大概就明白了。我们利用装载的字节数与总的字节数的比值来判定动画是否装载完或者是否达到我们设定的装载位置。这两个语句的优点在于，他们不想上面那两个语句那样，这是粗略的判定影片的帧数。他们能够精细的判定整个动画和下载的动画的字节数，是观众更能够清楚的知道动画的大小和下载速度。下面我们就利用这两个语句来作一个loading。
1、运行Flash?MX?2004，文档属性默认。
2、新建一个影片剪辑，命名为myloading。
3、进入影片剪辑myloading编辑区，利用长方形工具画一个进度条。如图3.3.51所示。

图3.3.51????绘制影片剪辑myloading
1、??????????????在100帧处插入要害帧。
2、??????????????在影片剪辑myloading的第1帧，利用变形工具，改变进度条的变形点的位置。如图3.3.52所示。

图3.3.52?改变矩形的变形点
3、??????????????利用缩放柄使之变形。（在x轴上缩小至消失）。如图3.3.53所示。

图3.3.53???变形
4、??????????????在第1帧和第100帧之间创建外形渐变。如图3.3.54所示。

图3.3.54??创建外形渐变动画
5、??????????????在影片剪辑myloading的编辑区里新建一层，来作进度条的外框。利用墨水瓶工具和复制。如图3.3.55所示。

图3.3.55???绘制进度条外框
6、??????????????返回到场景1，打开库面板，把影片剪辑myloading拖放到第1层的第1帧，并延长第2帧。
7、??????????????单击场景中的影片剪辑，在属性面板中填如其分身名myloading。如图3.3.56所示。

图3.3.56????命名实例名
8、??????????????在场景1中新建图层，命名为as。在as层的第2帧插入空白要害帧。
9、??????????????分别在as层的第1帧和第2帧加入as语句如下：
第1帧：
a=getBytesLoaded();
b=getBytesTotal();
loaded=int(a/b*100);
myloading?.?gotoAndPlay(?loaded?);
第2帧：
if?(a==b)?{
??gotoAndPlay("场景?1",?1);
}?else?{
??gotoAndPlay(1);
}
10、??????????单击【窗口】|【设计面板】|【场景】命令，打开场景面板，把当前场景一改名为：loading。并新建一个场景1。如图3.3.57所示。

图3.3.57????修改场景名
11、??????????在新场景的第1帧加入一段音乐（为了增大文件体积。当然也可以是动画）。
12、??????????测试完成。（参看源文件getBytesLoaded简单进度条）
16、动作脚本解释：
第一帧：
a=getBytesLoaded();???//设置变量a等于下载的字节数。
b=getBytesTotal();?????//设置变量b等于动画全部字节数。
loaded=int(a/b*100);???//int为取(a/b*100)的整数（近似值）
myloading?.?gotoAndPlay(?loaded?);??//播放影片剪辑，并以loaded的进度限制。
第二帧：
if(a==b){???????//假如下载的字节数等于全部字节数，则执行下面的语句。
gotoAndPlay(“场景1”，1);????????//播放场景1的第1帧。
}else{?????????????//否则，（条件不满足时）
gotoAndPlay(1);?????//播放loading场景的第1帧
}
这段语句与上面的语句其实意义都是一样的，都是利用下载的大小除以全部大小来获取百分比。不同的是获取对象一个是帧数，一个是字节数。另外，一个是用as来控制进度条的变化，一个是用限制进度条的播放来进行变化。
以上这几种方法都可以作一个简单的loading，下面介绍的是带有文本框的loading?。通过文本框我们可以随时观察动画的下在进度，这要比上面的loading更加具有人性化。
第四种：?人性化的loading
我们要在这个loading画面上加入具体的下载信息。其中包括：影片的总字节数，已经下载的字节数，总的帧数，已经下载的帧数，所需要的时间和已用的时间，还有下载比例等。
1、??运行Flash?MX?2004，文档属性默认。
2、??按照上面作的进度条Loading的方法，我们制作一个loading影片剪辑。这里就不多说了。
3、??在场景1的loading层的第1帧，单击文本工具（静态文本）分别在场景中键入“总字节数”、“已下载字节”、“总帧数”、“已下载帧数”、“需要时间”、“已用时间”。字体大小颜色随意。如图3.3.58所示。

图3.3.58??输入静态文本
4、??单击文本工具，选择动态文本，在对应的静态文本的位置，拉出足够大的文本框。如图3.3.59所示。

图3.3.59???输入动态文本
5、??别给动态文本设置变量名称。
总字节：aby?
已下载字节：bby
总帧数：af
以下载帧数：bf
需要时间：at
已用时间：bt
下载比例：bl
下载速率：sl
如图3.3.60所示。

图3.3.60???设置文本变量
6、延长至第2帧。
7、新建一个图层，命名为as。在第1帧添加as：
a=getBytesLoaded();
b=getBytesTotal();
loaded=int(a/b*100);
myloading?.?gotoAndPlay(?loaded?);

7、??????????????第2帧插入空白要害帧，加入as:
if?(a?==?b)?{
??gotoAndPlay("场景?1",?1);
}?else?{
??aby?=?_root.getBytesTotal();
??bby?=?_root.getBytesLoaded();
??bf?=?_root._framesloaded;
??af?=?_root._totalframes;
??bt?=?int((getTimer())/1000);
??at?=?int(((aby-bby)/(bby/bt))+bt);
??bl?=?int(bby/aby*100)+"%";
??sl=int(bby/bt);
??gotoAndPlay(1);
}?
8、??????????????????到这里我想不解释大家也一定已经明白是什么意思了。我们是通过动态文本框来显示下载的信息的。需要注重的就是时间的两个语句，开始的时候不是很好理解的。
bt=int((getTimer())/1000);???//bt是“已用时间”变量文本框的名字，我们用getTimer()来获得影片开始的已经用过的时间，/1000是用来换算成秒。Int是用来取整数值。
at=int(((aby-bby)/(bby/bt))+bt);????//at是“共需时间”变量文本框的名称。我们怎样来获取下载完影片所需时间呢？
大家注重听下面的一句话，我用语言来表达出来：
用影片的总的字节减去已经下载的字节，这样第一个小括号里面就是代表了剩余字节数。第二个小括号是用已经下载的字节数除以下在这些字节用的时间，也就是说，第二个小括号代表了下载的速度。写成---字节/秒。我们用第一个小括号的剩余字节除以下载速度就得到了下载剩余这些字节所用的时间，然后用剩余时间加上前面的已经是用的时间，这个和，就是我们求得总的下载时间。
如图3.3.61所示。

图3.3.61?????????Loading显示数据
图3.3.61????人性化loading
8、完成，测试！请参看源文件getBytesLoaded---精细进度条。
?以上是制作loading?的一些简单的技法。制作loading?在技术上其实并不难。我们完全可以通过上面的介绍来完全了解它。
注??意?——loading影片剪辑（进度条）的制作，一定要修改它的中心点。
提??示?——?我们在场景中显示主要的下载信息，例如比例，需要时间等，不必把上面事例中的所有信息表现出来
技??巧?——?测试loading，可以采用两次ctrl+enter来进行。假如文件体积本身过小，可以利用菜单栏里面的【窗口】|【自定义下载设置】，打开“自定义下载设置”面板来进行设置。
试一试?——?loading作为一个语句程序来说，是很轻易把握的。但是其表象的东西却千变万化。根据上例提供的代码，朋友们可以尝试的制作一个有自己特色的loading。

非凡说明

本例的最后的一个源文件，目的是为了讲解loading的制作方法，所以体现的项目很多。我们在实际应用中，只要更够提供最基本的信息就可以了，例如比例。否则loading画面会十分繁乱，在视觉上产生不良的感觉。
Loading作为一个动画作品的有机组成部分，我们应该重视起来。
Loading与我们制作的Flash动画一样，每个人具有每个人的风格。大体上分为三类：品牌型，内涵型，随意型和趣味型。下面我就具体分析一下这三中loading的形态。
第一类：品牌型。
一个成熟的动画制作高手，都具有自己的品牌loading。就象他们制作的动画一样，具有独特的风格。往往观赏者通过loading的动画就可以知道这是哪一位作者的作品了，而不需要看作者的名称。例如：拾荒的“客栈”等等，朋友们都比我见得多，我就不一一枚举了。这用品牌型的loading的优点在于，它有一种品牌效应，让人们在视觉上感到亲切，从而更盼望下面的内容了。但是，对于初学flash的朋友们，利用这种制作loading?的方法，有利也有弊。一方面可以节约时间，创造个性化的loading。另一方面，你的动画不能达到观众满足的情况下，在此看到你的品牌loading就会下跑了。不会浪费时间等待下载完。
第二类：内涵型。
这种loading?一般是在同一作者的不同作品中不会重复出现的。因为这种loading?的特点就是：通过loading?等待画面来体现动画中的内容。观众在等待的过程中，可以通过较短的时间来大体感受已下动画的内容和意义。这种loading一般是先作动画或作loading。而且在loading?制作方面会花费一定的精力。但是我们现在看到的一般是把动画中的主角或者场景，放到loading?上面的。这种类型的loading在表现上一般不会有大的变化。（因为它要考虑符合剧情）
第三类：随意型。
这种loading?非常普遍，我们在网络上经常可以看见。这种loading带有很大的随意性，它与剧情没有必然联系。制作的表现技法就很大变化。而且它的功能单一，只是起到了一个loading的最低一级的下载等待功能。初学者开始的时候可以试一试，但是当我们了解一些做法以后，就不要在是用这样的loading了。
第四类：趣味型
这种loading等待画面由简单的情节，带有一定的趣味性。是观赏者在等待的过程中并不感到寂寞。生活经验告诉我们，当我们对某一件事情感爱好而关注的时候，时间是过的最快的。这种loading解决了我们由于带宽而带来的麻烦。这种loading有很广阔的创造空间。
??loading与动画设计是一样的，一个好的loading设计也不是信手拈来的。它需要平时的积累，和努力。
下面我从设计loading的等待画面着手，探讨一下设计思维。
在我们的源文件中都会有几个非常优秀的loading。我们怎么样来设计自己的loading呢？
改变原有的现状。
我们知道一般的loading?进度条都是x轴上的缩放。我们可不可以把它立起来，变成y轴的缩放。有的人把进度条叫做补血。那么我们把进度条立起来以后，就可以做出许多有意思的东西了。例如把进度条变成温度计，下面加上一推火，随着火的熊熊燃烧，温度计的汞柱随之上升，完成载入画面。
???进度条的x轴变化与y轴变化是没有区别的。除了使用温度计以外，我们还可以联想一下其他具有垂直伸缩的事物，我们都可以把这些东西做成一不不错的loading。
◎改变进度条的外形
一般情况来说，下载进度条都是一个长方形的条状物。我们先不要把下载进度，看成是一个条状物。我们可以把这种进度条更加形象化，具象化。比方说拟人，拟物等。
通过这种拟人，拟物的变化，loading的外形有了很大的改变。
1、?人物（事物）大小渐变
例如：QQ逐渐变大的动画来代替补血进度条的变化。最后，出现进入动画的一个按钮。作补血进度条loading的时候，我们一般都是用外形渐变，在这里我用了移动渐变。可以看出，loading动画可以用许多方法实现，例如透明度，旋转等，我们可以仔细的想想，用最基础的技法，做出千奇百怪的等待画面。
2、现实世界的模拟。朋友们可以试一试。
例如：“一个人手里那这酒瓶子，歪斜在墙角。随着动画的载入，这个人的脚开始变红，逐渐红变全身。动画载入完成。这个效果可以通过在影片剪辑loading中的遮蔽来完成。”
“一个非常前卫的小伙子，双手把着自己的摩托车。一边大口喘着粗气，一边用脚使劲的打火，随着动画的载入，摩托车的声音越来越大，直至完成。”
象这样的现象或者说素材，比比皆是，重要的是我们要换一个思维方式，注重观察自己身边的生活点滴，一定会做出不同于其他朋友的作品。
3、标志或者眩目的效果
对于是用AS非常熟悉的朋友们，可以用动作脚本来完成一件非常眩目的loading。我们可以利用其他的辅助软件，如ps,fh等，来完成先期制作，然后在flash里面合成，成为这一类的loading。因为每个人的水平和理解不一样，我们做出来的loading效果就大相径庭了。
总而言之，我们不要模拟，或者从网上下载下来的loading，不管其内容是否符合自己的动画，就盲目的在自己的作品中使用。只要注重观察，注重平时的积累，在加上您聪慧的头脑，一个优秀的loading很可能就在您不经意的努力中之作出来。
????在光盘中附带了闪吧论坛技术交流区举办的《闪吧技术交流区Loading加载动画展》的一些优秀作品。这些作品都是朋友们自己创作的，朋友们不妨从这里得到一些启发。请参见《闪吧技术交流区Loading加载动画展》。

上一篇：{技巧}树叶飘舞的效果是如何制作的？ 人气:3504
下一篇：{技巧}跟随移动的图片效果如何实现？ 人气:2549

Flash视频教程