|
主题: loading怎么做?
|
 布衣风景
职务:普通成员
等级:1
金币:1.0
发贴:157
注册:2001/6/3 15:38:52
|
#12001/12/12 0:47:34
我看好多的作品都是有进度条和进度指示百分数,是怎么做的?
|
 大彩蛋
职务:普通成员
等级:1
金币:1.0
发贴:142
注册:2001/8/13 21:19:37
|
|
 Blackflash.Qi
职务:版主
等级:7
金币:17.0
发贴:6028
注册:2000/11/7 13:08:15
|
#32001/12/12 11:07:17
请发帖前多看看精华区或顶部的帖子
|
 奔腾的心
职务:普通成员
等级:7
金币:10.0
发贴:6114
注册:2001/11/4 15:11:47
|
#42001/12/14 13:55:46
大概就两种了 if frame is loaded
if {( getbetyeloaded()/getbetytotal()==1)} then
else
|
 流浪的牧师
职务:普通成员
等级:7
金币:23.0
发贴:7973
注册:2001/5/12 13:44:46
|
#52001/12/14 16:43:16
§4.1Loading预载动画程序设计 Loading网页预载程序是网页动画中的一个关键,因为即便是Flash生成的文件很小,但是制作出的大型动画对于使用调制解调器的用户速度还是需要解决的。如果没有一个预载的过程,只怕动画观看起来也不会很流畅。特别是在动画中加入了大量的声音和图像的动画没有了Loading将不会流畅的展现在我们眼前。 在此之前先学习一下在这章将要出现的属性与函数。如果由于例中使用了没有接触过的函数和属性,请先照例制作,等在以后的章节中学习了相关的其它函数后回过头来再看的话,就会完全明白例子中的作用。 ◆ _framesloaded _framesloaded是电影剪辑的属性,用来获取电影剪辑中的已经下载的帧数,当然大部的应用于电影剪辑的属性都可以应用于整部动画。此属性只能用来获取。 if(_root.mc._framesloaded>100){ _root.gotoandplay(1) } 此例子在普通模式下输入将成为: if(getproperty("_root.mc",_framesloaded)>100){ gotoandplay(1) } 普通模式中对属性的获取将使用getproperty函数,但此函数在新的.语法的使用中并非最佳,在以下的例子中将不再引用。此例中以获得电影剪辑已经下载的帧数大于100时,开始返回场景重新播放。这也是在网站制作中一个比较典型的例子,很多的电影剪辑因为体积问题,在“流”式播放过程中不会很流畅。而下例将是一个错误的例子。 _root.mc._framesloaded=100; _root.gotoandplay(1); 在编程中将不允许对_framesloaded属性进行赋值,如果你想当下载的帧数等于100时根目录开始回放的话,请按下例制作。 if(_root.mc._framesloaded=100){ _root.gotoandplay(1); } ◆ _totalframes _totalframes属性是用来获取电影剪辑实体的总帧数。也可以用来获取动画的总帧数。在下例中会看到它的用法。 i=_root.mc._totalframes; if(_root.cuttentframes=i); _root.stop(); } 程序中将电影剪辑实体的总帧数赋值赋予了变量i,而当主场景的动画播放指针播放到与电影剪辑中的总帧数相同的数目时,动画停止播放。此属性同样为非赋值属性。 ◆ ifFramesloaded ifFramesloaded函数也是用来获取已经下载的帧数的,与_framesloaded不同的是它用于一个简单的行为来描述已下载的帧数。而且此函数似乎是专为Loading设计,它位于Basic Actions指令集,指令名称为If Frames Is Loaded。以下实例将构成一个最为简单的Loading。 ifFrameLoaded(_totalframes){ gotoandplay(3); }else{ gotoandplay(1); } 将此程序加于影片的第二帧,可用于所有动画的预载技术。意思为当装入的帧数为总帧数时开始播放第三帧,如果不然,播放第一帧。在Flash5以后开始使用更多的函数和属性,所以此函数不推荐使用。 ◆ getBytesLoaded() getBytesLoaded()为获取电影剪辑实体的已下载字节数,如果是外部动画将返回动画的总字节数。GetBytesLoaded用于更加精确的Loading设计,因为它并不像_framesloaded属性是获取影片的总帧数,而是以字节做为单位获取。如果说动画的最后一帧将是一个大型的图像或是声音角色的话,哪么_framesloaded所获得的百分比将不准确,getBytesLoaded有效的弥补了此方面的不足。例: i=_root.getBytesTotal(); if(_root.getBytesLoaded()>=1000000){ n=_root.getBytesLoaded(); if(n<=i/4){ _root.stop(); trace "下载了1M,还不到四分之一,动画太大,下载时间会很长,是否继续?" } } 此句的意思为当动画下载到1MB时,比较是否已经下载了动画的四分之一,如果是,停止动画的播放,在调试窗口显示“下载了1M,..."等字符串,根据动画中的其他行为判断是否继续播放。此例的另一特点是,停止的地方如果有插入电影剪辑的话,电影剪辑将不会停止播放。也可以通过动态文本显示已经下载的文字数,假设在动画的主场景中有一个变量名为text的动态文本变量,哪么例: _root.text=_root.getBytesLoaded(); if(_root.getBytesLoaded()>=_root.getBytesTotal()){ gotoandplay(3); }else{ gotoandplay(1); } 动态文本框会动态显示已经下载的字节数为观众服务。观众也会了解在动画的下载过程中动态的进度了。 ◆ getBytesTotal() getBytesTotal()函数是用来获取动画或是电影剪辑的总字节数,当然我们可以通过对文件的大小来观察动画的总字节数,但对于网络上使用浏览器的观众来说,动态显示文件大小是很有必要的。还有,如果想观察动画中电影剪辑的体积就只有靠getBytesTotal()函数了。 If(_root.getBytesTotal()>=1000000){ _root.stop(); } 这个程序的意思是当动画的总字节超过1M时停止动画播放。 ◆ gettimer() gettimer()函数用来获取电影剪辑或是动画的已经播放时间数,此函数并不仅仅应用于Loading的制作,在今后的学习过程中还会接触到它。在Flash5的对动画播放时间的控制上会有gettimer()函数大显身手的舞台。但gettimer()函数获取的时间是以毫秒做为计算单位的,一般在程序制作过程中还会对它除以一千来取得秒,这样更加符合对于时间播放程序的显示。假设动画中有一个text的动态文本框变量。例: text=gettimer()/1000; 通过帧循环或是其它的诛如OnClipEvent(enterframe)等行为的控制会动态的显示动画播放的时间过程。又例如: text=gettimer()/1000; if(text>=10){ gotoandstop(3); }else{ gotoandplay(1); } 假设此程序位于动画的主场景的第二帧。那么当开始播放10秒钟之后才会正式开始播放,不然只会在第一帧与第二帧之间循环。 4.1.1 一个简单的Loading 一个简单的Loading制作并不需要很高深的编程基础,而且大部份设计人员开始学习Flash脚本编程时都是从Loading开始学起的。也是因为制作Loading对于动画传播方面起着至关重要的作用。 步骤一、打开Flash5,新建一个文件。在影片的默认设置中背景色是白色的,动画将以每秒十二帧的速度播放,这些你可以通过点击Modify|Movie命令打开Movie Properties对话框观察到。如图4-1所示。但是实践告诉我们,使用影片默认设置制作的动画,在网上浏览时,并不能很流畅,所以设计人员一般喜欢把默认的每秒12帧更改的高一点,这样就可以在发布了以后观看到比较流畅的动画了。 图4-1 Movie Properties对话框 步骤二、在影片的第一帧,使用Window|Panels|Stroke命令打开Stroke笔触面板,将笔触的宽点拉杆拉到3,如图4-2所示。 图4-2 用Stroke面板改变笔触粗细 步骤三、点击绘图面板中的方形绘图工具。在绘图面板Colors项上面的油漆桶工具中把色彩选为红色。然后在场景中绘制出一个长方形,如图4-3所示。 图4-3 绘制一个长方形进度条 步骤四、在编辑区内用鼠标点击长方形的红色处,你会发现色彩出现了很多小麻点,已经处于了被选取状态。 步骤五、点击Insert|Convert to Symbol,将红色长方形转换为符号,在随后打开的Symbol Properties对话框中的Name输入框输入符号的名称为Loading。然后选择Movie Clip电影剪辑项,点击OK。 步骤六、现在点击红色长方形你会发现它已经不再出现小麻点了,而是出现了一个蓝色的外框,因为它已经是一个符号了。现在选Window|Panels|Instance命令打开Instance实例面板。 步骤七、在面板中的Name项中输入名称Loading,为这个符号取了一个分身名称。如图4-4所示。 图4-4 为进度条符号取分身名称 步骤八、在时间轴的第二帧按F6键,插入一个关键帧。 步骤九、用鼠标双击此帧打开帧的Action面板。我们要开始制作预载动画的程序了。 步骤十、双击Action面板左边的指令里的Actions项,在打开的指令里选择if,用鼠标又击,if指令出现在编辑区了。 步骤十一、在Action面板的下半部份参数输入区里Condition输入栏中输入代码_framesloaded>=_totalframes。如图4-5所示。 图4-5 在if指令参数框内输入代码 步骤十二、然后点击指令区的Basic Actions命令集里的goto指令,在随后的参数输入框内的Frame栏目中输入数字3。如图4-6所示。 图4-6 goto指令的参数输入栏 步骤十三、然后点击 Actions指令集中的else项。 步骤十四、再次点击goto指令,这回不用更改帧序列数字了。 步骤十五、点击Action指令集的Setproperty指令,选择Properties下拉框中的_xscale属性,然后在Target输入栏中输入“_root.loading",点选后面的Expression单选框项目。 步骤十六、在value输入栏中输入代码(_framesloaded/_totalframes)*100,点选后面的Expression单选框。 图4-7 Setproper指令参数输入框 步骤十七、指令已经输入完毕了。接下来开始在第三帧后面制作你的动画,然后发布,上传,观看。你也可以打开Control|Debug Movie测试电影,在随后打开的浏览窗口中使用Debug菜单中的模拟下载速度来测试。 程序解读: 第1-2行中if(_framesloaded>=_totalframes)句的意思是当已经下载的帧数大于等于影片的总帧数时,跳转到第三帧开始播放。 第3-5行,如果下载的帧数小于总帧数的话,跳转到第一帧播放。并且安装分身名称为loading的电影剪辑的长度属性,使它的长度成为已经下载的帧数除以总帧数再乘100。 知识要点: Loading制作很多设计人员喜欢使用帧行为,其实用很多的功能都可以实现Loading制作。本例中使用(_framesloaded/_totalframes)*100的表达式来制作进度条的宽度。其它Loading制作方法不管是用下载时间函数还是用下载字节函数,但下载数除以总数乘以100的表达式基本上是没什么变化的了。 4.1.2 精确的Loading设计 上述的哪个Loading程序有一些比较简单,虽然它已经达到了预载的效果,但是对于要求比较高的朋友可能就不能满足了。哪么请看图4-8,这个预载动画将使用到比较多的函数,使动画预载看起来更加的人性化。 图4-8 高级的Loading程序界面 制作过程: 步骤一、打开刚才我们设计的Loading动画。这个Loading程序将是在上述Loading的基础上修改而成的。 步骤二、使用文字工具,并且使用Window|Panels|Character命令,打开Character字符面板,将字号设置为25,字色为黑色。如图4-9所示。 图4-9 Character面板的设置 步骤三、将文字按图4-8这样式输入在界面里。然后打开Window|Panels|Align命令,打开Align对齐面板。 步骤四、使用其中的对齐方式将文字对齐成图4-8之样式。 步骤五、点击文字工具,在总字节的文字后面用鼠标拖出一个文本框,注意用调节点调节文本框的宽度。然后打开Window|Panels|Text Options命令打开Text Options文本属性面板,在下拉菜单中选择Dynamic Text打开动态文本设置框。 步骤六、在动态文本框的Variable项输入这个文本框的变量为zbye,如图4-10所示。 图4-10 动态文本面板中设置动态文本变量 步骤七、用同样的方法在绘制七个动态文本框在各字符的后面。已经下载字节后面的字段变量为yby,总帧数的为zfrm,已下载帧数的是yfrm,需要的时间后面变量名为xtim,已用时间的为ytim,在进度条下方的下载进度变量为yload。 步骤八、设置完毕开始进行程序设计。打开第二帧的Action面板,你可以看到我们刚才设计的程序。在这个程序中有很多的内容无需改变,只要再添加一些程序就可以了。 步骤九、我们将Setproperty("_root.loading",_xscale,(_framesloaded/_totalframes)*100这句用鼠标拖动上移一行,在指定区的Actions指令集中选择Set Variable指令。 步骤十、在打开的变量输入框中,Variable项填写总帧数的字段变量zby,在value栏中输入代码_root.getbytestotal(),勾选后面的Expression单选框。 图4-11 变量输入框 步骤十一、用同样的方法输入其它变量。yby=_root.getbytesloaded()。 步骤十二、zfrm = _root._totalframes。 步骤十三、yfrm = _root._framesloaded。 步骤十四、ytim=gettime()/1000 + "秒"。 步骤十五、xtim = int(zby-yby)/yby*tim) + "秒"。 步骤十六、yload = _framesloaded/_totalframes*100。 步骤十七、整个程序输入结束。对照参考图4-12。 图4-12 高级Loading的完整程序 程序解读: 这前几行程序基本上不用解读,哪些都是Action中所拥有的函数,只要将本章开始时的函数学习好,把它们赋值给变量就可以了。 第十行,用了一个表达式来获得了还需要的时间变量值。总字节减去已经下载的字节的值除以已下载的字节再乘以已经使用的时间。 第十一行,用已经下载的帧数除以总帧数再乘以100得到下载进度,其实这行程序还可以变化为yfrm/zfrm*100。 知识要点: 高级Loading其实制作起来也并不复杂,你可以通过对函数的了解来做到。另外这里有一个概念,getbytesloaded和另外几个函数都是Movie Clip的函数,为什么也可以在场景中使用呢?其实你可以把场景看成是一个大的Movie Clip,很多电影剪辑的函数都可以使用在场景中,包括gettimer()。而动态文本变量正是去显示这些函数的数值的,其实在Loading中还有一个概念,就是利用帧循环也可以达到循环效果,与一般的编程不同的是Flash可以使用帧循环去达到一些效果,有时候因为帧循环的时间特性,做出的循环比用while等循环语句构造出更加意想不到的效果。学习好这些函数正是高级Loading制作的关键。 4.1.3 趣味Loading设计 这样的Loading看起来还是死板吗?你还想要一些趣味性?其实Loading制作也可以加入很多的趣味性来。下例是一个老鼠的Motion运动动画的Loading。当下载20%时,老鼠的运动速度开始加快,以后第下载20%,老鼠的速度就加快一些,直到下载结束。 步骤一、先打开第一个Loading实例。我们的这个实例还是在第一小节中的哪个简易Loading改进而来的。 步骤二、选择Insert|New Symbol命令新建一个Movie Clip电影剪辑,进入剪辑编辑区域。选择Window|Common Library打开共享库面板,把Mouse拖入编辑区。 图4-13 共享库面板中的老鼠图像 步骤三、先来制作一个老鼠的Motion动画,在第一帧处将老鼠图像拖至X坐标-300,Y坐标-30处,如果不够精确可以使用Info面板来调整。如图4-14所示。 图4-14 精确调整物体位置 步骤四、然后在第42帧处按F6键插入一个关键帧。 步骤五、在时间轴的第20帧处按F6键插入一个关键帧,调整老鼠的位置为X坐标300,Y坐标-30。 步骤六、在第21帧处插入一个关键帧,用Modify|Transform|Flip Horizontal命令使老鼠水平翻转。 步骤七、在第41帧处按F6键插入一个关键帧,调整老鼠的位置X坐标-300,Y坐标-30。全选所有帧点鼠标右键选Create Motion Tween。建立一个Motion动画。整个动画的过程如图4-15所示。 图4-15 老鼠的运动过程 步骤八、在第42帧处双击打开Action面板。双击 Basic Action指令中的Goto语句,使动画跳转到第一帧。 步骤九、全选所有帧,执行鼠标右键命令Copy Frame,在第43帧处,执行鼠标右键命令Paste Frame。在第43帧的地方复制了一遍动画过程。 步骤十、调整复制的动画的长度,使之只有30帧的总长度,其它各关键帧做相应的改变。 步骤十一、在最后一个关键帧双击打开Action面板。使用Goto指令,把Frame栏中的1改为43。如图4-16。 图4-16 实现帧的复制 步骤十二、这样做的用意是让第1帧到第42帧形成一个循环,这个循的速度比较慢,第43帧到第70帧实现一个循环。速度稍稍快了一点。 步骤十三、利用同样的方法从第71到第90制作一个循环,从第91到第105制作一个循环。从第106到第116制作一个循环。 步骤十四、回到场景,打开Window|Library命令,打开库面板。把老鼠动画拖到场景中,X坐标270,Y坐标300的位置。 步骤十五、然后打开Instance面板,当老鼠动画成为选定状态时,在Instance面板的Name项中输入mouse。为老鼠动画起分身名称为mouse 步骤十六、在场景第二帧打开Action面板。你可以看到我们前面制作的程序。 步骤十七、使第三行else行为选定状态。然后选择指令区的Action指令集中的if项。可以看到if命令出现在了else行的下面。在参数输入框中输入代码(_framesloaded/_totalframes)*100>20, 图4-17 if指令的输入框 步骤十八、单击Actions指令集中的evaluate指令,加入一个空行。 步骤十九、在输入框内输入指令_root.mouse.gotoandplay(43)。如图4-18所示。 图4-18 evaluate加入一个空行 步骤二十、用鼠标单选_root.mouse.gotoandplay(43)下面的一行,此行只有一个}括号。 步骤二十一、单击if指令,输入代码(_framesloaded/_totalframes)*100>40。 步骤二十二、单击evaluate加入一个空行,输入代码_root.mouse.gotoandplay(71)。 步骤二十三、单击此行下面的}括号行。然后继续单击if指令,输入代码(_framesloaded/_totalframes)*100>60。 步骤二十四、单击evaluate加入一个空行,输入代码_root.mouse.gotoandplay(91)。 步骤二十五、单击此行下面的}括号行,然后单击if指令,输入代码(_framesloaded/_totalframes)*100>80。 步骤二十六、单击evaluate加入一个空行,输入代码_root.mouse.gotoandplay(106)。完成整个程序行如图4-19。 图4-19 完整的趣味下载程序内容 步骤二十七、动画上传测试。 程序解读: 在整个程序行内容方面加入了一个if判断的指令。判断当动画下载到20%时,老鼠动画剪辑将跳转到第43帧,而43帧的内容是比前一循环速度加快的动画。当动画下载到40%时,老鼠动画剪辑跳转到第71帧。每一次速度都比上一次的要快,这是一个嵌套的判断指令。 知识要点: 在这个动画实例中,我们做到了让电影剪辑随着if判断来播放。这个功能在网站的动画演示当中相当多见,通常交互和动态的内容演示都是通过if判断来完成的。第一个简易的Loading其实就是做预载动画的内核。学会了制作Loading你还可以把这样的内容加入到网站的演示当中去。比方说判断分身名为MC1的电影剪辑播放到了什么程度,来动态的改变MC2的播放内容。
|