常见的loading条制作方法 (1)

2016-03-18 19:09 23 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐常见的loading条制作方法 (1),无聊中的都看过来。

【 tulaoshi.com - FLASH 】

首先我们在制作一个东西的时候我们应该有明确的思路和目标,下面让我们来看看制作思路。

思路:计算出影片的总字节数和正在下载的字节数,将正在下载的字节数除以影片的总字节数并乘以100%获得百分比例,再将其得到的百分数来带动Loading条的滚动。


制作方法如下:

步骤1 打开FLASH,执行"文件---新建"命令或按下CTEL+N建,新建一个文件;

步骤2 利用文本工具绘制个文本框,选择此文本为动态文本设置其变量名为bfb(如图1);

图1

步骤3 Ctrl+F8我们来绘制一个MC(影片剪辑),命名为loading(如图2),在属性面板里命名实例名称为MC;

图2

[1] 200806/13039_2.html'>[2] 200806/13039_3.html'>[3] 200806/13039_2.html'>下一页

步骤4 选择矩形工具绘制一图老师个长条,填充颜色为无,边框颜色为黑色;

步骤5 新建立一个图层,复制第1个图层的矩形框并粘贴到新建的图层,位置不变,此时填充颜色为黄色(可以自己定义),边框颜色为无(如图3);

图3

步骤6 在第1层的第100帧出插入帧,第2层第100帧处插入关键帧;

步骤7 图层2中的loading条制作变形动画,首先在第1帧处设置其宽度为1,最后1帧宽度不变,在中间创建补间动画并在第1帧动作面板里加入stop():语句(如图4);

图4

200806/13039.html'>上一页  200806/13039.html'>[1] [2] 200806/13039_3.html'>[3] 200806/13039_3.html'>下一页

步骤7 回到主场景,将名为loading的MC(影片剪辑),拖到主场景,并在第1层第3帧处插入普通帧,新建图层2同样第3帧处插入空白关键帧(如图5);

图5

步骤8 在第2层的第2帧处加入如下代码:


[Copy to clipboard] [ - ]CODE:
yxz=_root.getBytesLoaded();//已下载BYTE数
zxz=_root.getBytesTotal();//总下载BYTE数
bfb=int(yxz/zxz*100)+"%";//计算下载百分比
mc.gotoAndStop(int(yxz/zxz*100));//下载到百分之几就播放MC的第几帧


步骤9 同样在第3帧处动作面板里加入如下代码:


[Copy to clipboard] [ - ]CODE:
if(yxz==zxz)
{
        gotoAndPlay(4);

}
else
{
        gotoAndPlay(1);

}


注意:此处目的在于判断已下载的字节数是否与影片总字节数BYTE是否相等,如果不等则继续loading。


步骤10 最好将动态文本框和Loading条摆放好位置就OK咯(如图6);

图6

最后说明下 自认为做得很丑,但原理和方法是正确的。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

 

200806/13039_2.html'>上一页  200806/13039.html'>[1] 200806/13039_2.html'>[2] [3] 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

来源:http://www.tulaoshi.com/n/20160318/1894910.html

延伸阅读
首先声明,教程思路不是自己的,是参考了ps的教程而决定用fw来进行制作的! ps的教程出自 六月海设计——《用Photoshop制作像素化文字》,因为手痒,就照猫画虎的用fw来制作了一下,具体的制作过程请参看下面的具体步骤吧! 1、打开fw,新建文件,大小为50 x 50 像素,背景色采用默认的白色即可。 2、在编辑区输入文字对象,这里...
Loading条常用于网页中的等待时间,目的是减少用户等待时的烦躁感,以此来增加用户体验。在很多地方我们都能发现loading条的应用,比如表单,提交,下载等等。本文将分析对于网页客户端来说,在页面什么位置摆放loading条是最有效的。 可用性研究表明,当响应时间超过一秒钟时,用户便能够有所察觉。 虽然在反馈系统中,当用户需要等待时,更...
绗纸DIY 卷纸圣诞贺卡制作方法 做一张漂亮的圣诞卡难吗?一点都不难,仔细数数,只有4个步骤: 1、想一个好点子; 2、准备素材; 3、精心制作; 4、写下真诚的祝福。 相信这张你亲手制作的圣诞卡一定能将你的祝福传达给最尊敬的老师! 好创意是手工圣诞卡成功与否的关键。如果你暂时没有什么想法,不用着急,一起去看看别人的作品,...
原料 准备糯米1千克,红曲40克,也可用白色酒曲、甜酒曲代替,清水1.6升,烧酒适量。 淘米 选择上等糯米放于盆中,用清水淘洗2遍左右,洗干净即可。 浸泡 往洗好米的盆中加入适量清水,淹没糯米3公分左右为宜。25~15度温度浸泡8小时,15度以下浸泡14小时,以米粒浸透至无白心为宜。 ...
灯笼的制作方法视频 灯笼的制作方法:准备材料 需要准备的材料有任意尺寸的工艺装饰环,如果没有的话也可以用其他东西代替,或者根据自己需要的来确定尺寸。 灯笼的制作方法:剪裁纸条 首先我们要做的就是剪裁合适数量和宽度的纸条,然后将裁剪的纸条用白乳胶粘贴到环上(如图所示)。 灯笼的制作方法:纸条续接 将第一圈完成...

经验教程

92

收藏

22
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部