flash进度条.docx
《flash进度条.docx》由会员分享，可在线阅读，更多相关《flash进度条.docx（12页珍藏版）》请在冰豆网上搜索。
flash进度条
详细的可以看一下下面推荐的网址~~有图例~~解说更明确
Loading预载动画程序设计
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设计，它位于BasicActions指令集，指令名称为IfFramesIsLoaded。
以下实例将构成一个最为简单的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秒钟之后才会正式开始播放，不然只会在第一帧与第二帧之间循环。
一个简单的Loading
一个简单的Loading制作并不需要很高深的编程基础，而且大部份设计人员开始学习Flash脚本编程时都是从Loading开始学起的。
也是因为制作Loading对于动画传播方面起着至关重要的作用。
步骤一、打开Flash5，新建一个文件。
在影片的默认设置中背景色是白色的，动画将以每秒十二帧的速度播放，这些你可以通过点击Modify|Movie命令打开MovieProperties对话框观察到。
如图4-1所示。
但是实践告诉我们，使用影片默认设置制作的动画，在网上浏览时，并不能很流畅，所以设计人员一般喜欢把默认的每秒12帧更改的高一点，这样就可以在发布了以后观看到比较流畅的动画了。
图4-1MovieProperties对话框
步骤二、在影片的第一帧，使用Window|Panels|Stroke命令打开Stroke笔触面板，将笔触的宽点拉杆拉到3，如图4-2所示。
图4-2用Stroke面板改变笔触粗细
步骤三、点击绘图面板中的方形绘图工具。
在绘图面板Colors项上面的油漆桶工具中把色彩选为红色。
然后在场景中绘制出一个长方形，如图4-3所示。
图4-3绘制一个长方形进度条
步骤四、在编辑区内用鼠标点击长方形的红色处，你会发现色彩出现了很多小麻点，已经处于了被选取状态。
步骤五、点击Insert|ConverttoSymbol，将红色长方形转换为符号，在随后打开的SymbolProperties对话框中的Name输入框输入符号的名称为Loading。
然后选择MovieClip电影剪辑项，点击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指令参数框内输入代码
步骤十二、然后点击指令区的BasicActions命令集里的goto指令，在随后的参数输入框内的Frame栏目中输入数字3。
如图4-6所示。
图4-6goto指令的参数输入栏
步骤十三、然后点击Actions指令集中的else项。
步骤十四、再次点击goto指令，这回不用更改帧序列数字了。
步骤十五、点击Action指令集的Setproperty指令，选择Properties下拉框中的_xscale属性，然后在Target输入栏中输入“_root.loading"，点选后面的Expression单选框项目。
步骤十六、在Value输入栏中输入代码（_framesloaded/_totalframes）*100，点选后面的Expression单选框。
图4-7Setproper指令参数输入框
步骤十七、指令已经输入完毕了。
接下来开始在第三帧后面制作你的动画，然后发布，上传，观看。
你也可以打开Control|DebugMovie测试电影，在随后打开的浏览窗口中使用Debug菜单中的模拟下载速度来测试。
程序解读：
第1-2行中if（_framesloaded>=_totalframes）句的意思是当已经下载的帧数大于等于影片的总帧数时，跳转到第三帧开始播放。
第3-5行，如果下载的帧数小于总帧数的话，跳转到第一帧播放。
并且安装分身名称为loading的电影剪辑的长度属性，使它的长度成为已经下载的帧数除以总帧数再乘100。
知识要点：
Loading制作很多设计人员喜欢使用帧行为，其实用很多的功能都可以实现Loading制作。
本例中使用（_framesloaded/_totalframes）*100的表达式来制作进度条的宽度。
其它Loading制作方法不管是用下载时间函数还是用下载字节函数，但下载数除以总数乘以100的表达式基本上是没什么变化的了。
精确的Loading设计
上述的哪个Loading程序有一些比较简单，虽然它已经达到了预载的效果，但是对于要求比较高的朋友可能就不能满足了。
哪么请看图4-8，这个预载动画将使用到比较多的函数，使动画预载看起来更加的人性化。
图4-8高级的Loading程序界面
制作过程：
步骤一、打开刚才我们设计的Loading动画。
这个Loading程序将是在上述Loading的基础上修改而成的。
步骤二、使用文字工具，并且使用Window|Panels|Character命令，打开Character字符面板，将字号设置为25，字色为黑色。
如图4-9所示。
图4-9Character面板的设置
步骤三、将文字按图4-8这样式输入在界面里。
然后打开Window|Panels|Align命令，打开Align对齐面板。
步骤四、使用其中的对齐方式将文字对齐成图4-8之样式。
步骤五、点击文字工具，在总字节的文字后面用鼠标拖出一个文本框，注意用调节点调节文本框的宽度。
然后打开Window|Panels|TextOptions命令打开TextOptions文本属性面板，在下拉菜单中选择DynamicText打开动态文本设置框。
步骤六、在动态文本框的Variable项输入这个文本框的变量为zbye，如图4-10所示。
图4-10动态文本面板中设置动态文本变量
步骤七、用同样的方法在绘制七个动态文本框在各字符的后面。
已经下载字节后面的字段变量为yby，总帧数的为zfrm，已下载帧数的是yfrm，需要的时间后面变量名为xtim，已用时间的为ytim，在进度条下方的下载进度变量为yload。
步骤八、设置完毕开始进行程序设计。
打开第二帧的Action面板，你可以看到我们刚才设计的程序。
在这个程序中有很多的内容无需改变，只要再添加一些程序就可以了。
步骤九、我们将Setproperty（"_root.loading",_xscale,（_framesloaded/_totalframes）*100这句用鼠标拖动上移一行，在指定区的Actions指令集中选择SetVariable指令。
步骤十、在打开的变量输入框中，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和另外几个函数都是MovieClip的函数，为什么也可以在场景中使用呢？
其实你可以把场景看成是一个大的MovieClip，很多电影剪辑的函数都可以使用在场景中，包括gettimer（）。
而动态文本变量正是去显示这些函数的数值的，其实在Loading中还有一个概念，就是利用帧循环也可以达到循环效果，与一般的编程不同的是Flash可以使用帧循环去达到一些效果，有时候因为帧循环的时间特性，做出的循环比用while等循环语句构造出更加意想不到的效果。
学习好这些函数正是高级Loading制作的关键。
参考资料：
几乎所有优秀成熟的Flash作品都少不了FlashLoading的画面（也就是我们常说的Flash中的预载画面）。
因为如果没有Actionscrip（以下简称AC）对整个动画作品进行控制的话，动画就会边下载边播放，严重地破坏作品欣赏的整体性。
而制作一个好的预载画面，一来可以判断动画是否下载完全；二来可以让浏览者在等待中得以欣赏，尤其是一个好的预载动画往往会给浏览者一种震撼。
下面我们就来分析一下Loading动画的制作方法。
一、建一电影文件，点时间轴下的增加图层“+”按钮，建立4个图层，从上到下分别命名为：
action层、进度条层、按钮层、动画层。
请看下图：
二、AC控制层--添加代码
1、选中action图层第一帧在属性面板<帧标签>处，写上"play"（加上帧标签play）选中action图层第一帧在属性面板<帧标签>处，写上"play"。
然后窗口--动作（F9）打开动作面板。
//将电影总字节数赋值给total变量
total=_root.getBytesTotal（）;
//将已经下载的字节数赋值给loaded变量
loaded=_root.getBytesLoaded（）;
//取整计算已下载的字节数的百分比并赋值给变量load
load=int（loaded/total*100）;
//把已下载的字节数赋值给动态文本变量loadtxt
loadtxt="loading"+load+"%";
//进度条同时按百分比数跳转到相应的帧上去;
_root.进度条.gotoAndStop（load）;
然后窗口--动作（快捷键F9）打开动作面板输入代码，请看下图↓
然后选中action图层第6帧（F7）插入一个关空白关键帧。
复制下面的代码并粘贴。
如果下载字节数=总字节数，跳转到6帧停止。
if （loaded == total） {
gotoAndStop（6）;
//否则跳转到标签名"play"的帧,继续下载
} else
{
gotoAndPlay（"play"）;
}
看下图：
三、创建进度条影片剪辑
1、（Ctrl+f8）插入--新建元件--行为为影片剪辑，命名为：
“进度条”。
在这个MC上，建立了两层，分别为“边框线”、“填充色”请看下图：
2、在“边框线”层，选择矩形工具，边框及填充颜色自定义，画一个矩形，在属性面板设置：
宽：
300；高：
24；X：
-150，Y：
-12。
在100帧处F5插入普通帧。
选中矩形里面的填充色（Ctrl+X）剪切，粘贴到“填充色”层第一帧（Ctrl+Shift+V）选择编辑菜单下的粘贴到当前位置，调整填充色颜色，在100帧处F6插入关键帧，选中第一帧创建“形状”动画，在第一帧将矩形宽改为：
3。
双击矩形框在属性面板把笔触调整为：
2，颜色自定义。
←设置后的图
3、回到场景2中把刚做好的“进度条”MC从库中拖放到“进度条”这一图层的第一帧上，放到合适的位置。
然后选中舞台中的“进度条”MC，在属性面板上写上实例名“进度条”。
在第6帧按F5插入普通帧。
下图↓
4、选中“进度条”层，选择文本工具“A”，在舞台合适的位置加入一个动态文本框（文本框是动态的写入程序运算后的百分比结果的），在属性面板上设置文本类型：
动态文本，字体：
Arial变量名：
loadtxt，单行，字体大小颜色自定义。
请看下图：
四、按钮层--添加播放按钮
1、在“按钮层”第6帧按（F7）插入一个空白关键帧，选择窗口菜单下公用库，打开按钮库，托出一个自己喜欢的播放按钮，摆放到舞台合适位置并调整大小。
有时间可以自己做一个和你的作品风格统一的按钮。
2、选中舞台上的按钮元件：
窗口--动作（F9）打开动作面板，给按钮加上下面的代码：
on （release） {//释放按钮
gotoAndPlay（"场景 1", 7）;//跳转并播放场景1的第7帧
}
选中舞台上的按扭元件，打开动画板面，快捷键F9添加代码。
五、动画层--放置动画MC
现在loading就能用了，但为了让等待画面好看可以在“动画层”加入动画MC。
我们可以自己做一个动画的MC，或者把场景1作品中比较漂亮的影片剪辑加入到“动画层”，放到合适的位置，也可以自己去创意。
六 、测试保存。
Ctrl+Enter 测试影片
不知道你们学会了没，如果还看不懂，请登入网站给我留言：
或者QQ联系我：
330717849 我将为您解答不懂的地方
升级会员 