loading加载动画图片素材-loading gif代码

loading这个东西,说穿了其实是给用户反馈的一种表现形式,在客户端中的loading,通常以鼠标的手型变化来表现;而在web端,loading的创意则层出不穷了,而且给用户的反馈更好。本文将主要阐述在flash中制作loading的一些问题。

先来看看loading的原理。在flash中,制作loading的目的是为了预先加载一部分内容(你可以选择全部加载完毕,或者加载一部分之后),然后再把flash的主要内容展示出来。一般来讲,loading是放在第一帧上面的(也可以不放在第一帧,比如放在任意一帧,但是在第一帧你要做个跳转,让播放头到loading的那一帧去)。这里要注意一个问题,如果你的flash程序有从元件库里导出元件的话(默认为第一帧导出),要导出的原件全部加载完毕之后才会显示第一帧的内容(即,你的loading)。这样的话很可能你在第一帧导出的内容过于庞大,占据了整个flash应用的很大一部分,比如50%,那么我们实际运行的效果就是在一段空白之后loading从50%处开始显示。

要避免上面的问题(一个明显的不好的用户体验),通常来讲我会用到两种方法:

第一,把要导出的元件取消导出,把它们集中放在某一帧(除开你做loading的那一帧),然后在放元件的这一帧之后的那一帧开始运行你的程序。

第二,用另个一个swf来加载需要做loading的swf。这种方法可以有比较完整的加载进度条以及百分比文字,缺点是容易引起其他问题,这个后面会讨论。

举个例子来说,我想为A.swf做一个loading,关键代码如下:

......

this. loaderInfo. addEventListener (SPANrogressEvent. SPANROGRESS,loadSPANrogress );

this. loaderInfo. addEventListener (Event. COMSPANLETE,loadComSPANlete );

......

AS3.0中增加了一个新的loaderInfo类来提供已加载的swf、图像文件的信息。flashplayer通过调度ProgressEvent对象的loadProgress方法来实现对加载内容反馈的监听,当加载全部完成后,flashplayer再调度Event对象的loadComple方法。loadProgress方法是我定义的监听加载进度的方法,所有有关加载的信息都可以在这个方法中加以反馈:

......

SPANrivate functionLoadSPANrogress ( e:SPANrogressEvent )

{

var loaded:uint= e. bytesLoaded;

vartotal:uint= e. bytesTotal;

varSPANercent: Number= int ( ( loaded /total ) * 100 );

trace (SPANercent+ "%" );

}

......

上面的代码输出正在载入内容的百分比,这是一种最简单的反馈,但是你可以在这段代码里丰富你的loading的内容,使其更具有趣味性,以使得用户在等待下载的时候能清楚的知道下载的进度,或者在这时候观赏一段精美的动画——这完全取决于你的设计。这时候加载完成了,可以执行loadComplete这个方法了。在loadComplete方法里添加你想要的动作,比如给用户一个播放按钮以使得用户可以自主选择,或者直接进入某一帧进行播放。

前面说过,直接在swf上添加loading可能会导致loading不是从1%开始,这时候可以用一个swf加载另一个swf的方法来实现完整的loading,比如,我想在B.swf里加载A.swf,那么在B.swf的程序里使用loader加载A.swf。需要注意的是,监听loader的加载进度需要使用loader的contentLoaderInfo属性,而不是loaderInfo。关于loaderInfo和contentLoaderInfo的关系如下图所示:

由于B.swf只起到加载A.swf的作用,并没有其他显示内容,所以它本身的加载可以忽略不计,这种方法可以比较完整的展示A.swf的加载过程。但是,同时使用这种方法也引发了一些问题,比如你在A.swf里与web端进行通信,使用了loaderInfo的parameters属性,则你在用B.swf加载A.swf后,通信将失效。这是因为

FlashVars

HTML 参数只影响主swf(例子里为B.swf),就是说你可以在B.swf里完成通信,但是A.swf不行。所以,我们可以先在B.swf中获取到页面要传递的信息,然后再让A.swf从B.swf中获取这个信息就可以了。通常我是这样处理的,假如B.swf的文档类为,那么在中定义一个static的属性比如prama(public static var prama),用来保存传递的信息,然后再在A.swf中通过获取这个信息。这样就间接实现了A.swf与web端的通信。

综上所述,本文不是向大家介绍如何制作一个完整的loading的,相信loading的例子在网上并不少见,但是只有明白了loading制作的基本原理,才能从根本上制作出更为规范和友好的loading来。

LOADING是装载动画!不是加GIF的图片要是真的要用这的话建议把DIF导入到FLASH里重新制作一下

代码关系到几个变量

一. Loading的作用。

Loading.英文原意为装载,装填。在flash里面叫做预载画面。我们在欣赏每一件完整的flash作品的时候,都会看到loading的出现。这是因为,动画播放是否流畅取决于网络带宽,对于用调制解调器的朋友们欣赏的时候,loading会预先的加载一部分或全部以后,才能流畅播放。特别是,动画中有音乐或者位图的情况下,loading 的作用就显而易见了。由于上述的条件限制,没有哪一个动画不作loading。Loading发展到现在已经不是简单的一个下载动画的工具了。它已经成为体现主体动画,衬托主体的一个载体。Loading分为两个大部分。一个是功能类的(指下载作用功能)另一部分是等待动画。下面我们就从这两个方面来研究一下。

二 Loading的制作

制作loading 有许多的方法。我们从最简单的开始向大家介绍:

第一种:loading( 假的 )

也就是假loading。这种loading我想在某些人的动画中也会出现。我就曾经作了一个。我先作的动画,最后作loading,时值夜半,睡意朦胧,恍惚中作了一个。欣喜之余,马上发布。天明清醒,遂发现loading没加as。故称为(假)loading 。幸好,动画不长,没人发现。心中窃喜。在这里告诫朋友们,loading 也是我们的作品的一部分,我们要用正确的态度来对待它。

第二种:用ifFrameLoaded语句来完成。

IfFrameLoaded现在已经被MX给否决了。MX不提倡用此语句。但是还是可用的。完整的语句为:

If|FrameLoaded(欲加载的场景 . 欲加载的帧数或帧标签){

GotoAndPlay(正式动画的第一帧)

此语句的缺点是,它只能判断欲载程序是否到某一帧。可是如果此帧的后面有许多音乐或位图,播放以后还是不流畅的。

好了,我们一起来作一个简单的Loading吧!

1、 打开flash mx,新建一个文件。

2、 新建一个影片剪辑mc(^+F8),命名为myloading。

3、 进入影片剪辑myloading编辑区,利用长方形工具画一个进度条

4、 然后,在100帧处插入关键帧。

5、 返回到影片剪辑myloading的第一帧,利用变形工具,改变进度条的中心点到左侧,并使之变形。(在x轴上缩小至消失)

6、选第一祯,在下面的属性里,补间里选形状 创建形状渐变。

7、 在影片剪辑myloading的编辑区里新建一层,来作进度条的外框。用画矩形工具,画个比进度条大的方框,无填充色

8、 回到主场景,打开库面板F11,把影片剪辑myloading拖放到第一层的第一帧,并延长第二帧

9、 点击舞台中的影片剪辑,在属性面板中填如其身份名myloading。

10、 在主场景中新建一层,命名为as。在as层的第二帧插入空白关键帧。

11、 分别在as层的第一帧和第二帧加入as语句如下:

第一帧:

a=getBytesLoaded();

b=getBytesTotal();

loaded=int(a/b*100);

myloading . gotoAndPlay( loaded );

第二帧:

if(a==b){

nextScene();

}else{

gotoAndPlay(1);

}

12、 打开场景面板,把现存的场景一改名为:loading。

然后在增加一个场景,名为next,注意两个场景的上下,在上面的是动画发布后播放的第一个场景,哪个场景在下面,哪个是后放的

13、 新建的场景next,并在新场景的第一帧加入一幅图片或一段动画。越大越好......不要超过4M.......

14、 测试完成,一般情况下,在本机了看不出效果的,做好后,最好是上传到闪吧后,就能看到载入的动画及效果了

动作脚本解释:

第一帧:

a=getBytesLoaded(); //设置变量a等于下载的字节数。

b=getBytesTotal(); //设置变量b等于动画全部字节数。

loaded=int(a/b*100); //int为取(a/b*100)的整数(近似值)

myloading . gotoAndPlay( loaded ); //播放影片剪辑,并以loaded的进度限制。

第二帧:

if(a==b){ //如果下载的字节数等于全部字节数,则执行下面的语句。

nextScene(); //播放下一个场景。

}else{ //否则,(条件不满足时)

gotoAndPlay(1); //播放第一帧

}

这段语句与上面的语句其实意义都是一样的,都是利用下载的大小除以全部大小来获取百分比。不同的是获取对象一个是帧数,一个是字节数。另外,一个是用as来控制进度条的变化,一个是用限制进度条的播放来进行变化。

打开软件,新建300*300的画布,分辨率为72,画布颜色选择为白色

2

在左侧矢量工具中,提供许多造型,选择“面圈形”

3

在画布中画一个200*200的造型,大小可在下方的属性面板里调整

4

鼠标点击造型,点击其中的黄点可以进行调节造型,如图所示

END

渐变效果

1

在下方的属性栏中选择添加渐变效果,这里使用“线性”渐变,左侧颜色填充为白色

2

可以进行适当的调整,可以适当的调整渐变中的透明度,如图所示

3

再绘制一个小圆,当做面圈头,如图所示,为的是转动起来有效果

END

动画效果

1

在菜单栏中选择“修改”-->“动画”-->"选择动画"

2

在“选择动画”中进行设置,点击“确定”,这里选择建立20个状态,这个动画效果就做好了

END

保存GIF

1

点击“文件”菜单中的“图像预览”

2

在格式里选择GIF动画,点击导出,loading动画就做好了