分享
 
 
 

纯AS的Loading效果四例

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

前言:稍微大一些的Flash作品在播放之前都会有一个Loading预载画面,这考虑到网络的速度,本地浏览不需要等待下载,但传到网上,因为每个用户的网速不同,所以很有必要在我们的作品中加入Loading画面,之前,已经有很多教程是关于Loading制作方法的,今天我们给读者讲述四个纯AS的Loading效果,不懂AS的菜鸟或“代码盲”甚至可以直接复制教程中的代码到自己的作品中,懂AS代码的朋友,可以仔细阅读这些代码,从中学到更多的AS知识,或由此引申出更多的AS Loading效果……感谢作者=棉花糖=、egg616、小郎提供源码和思路--闪客帝国的叶子

一.=棉花糖=的Loading教程

比较简陋

动态显示load百分比

将全部代码拷贝到第一帧,当load完毕后,会自动开始播放

源代码:

stop ();

_root . createTextField ( "myload_txt" , 1 , 0 , 0 , 0 , 0 );

with ( _root . myload_txt ) { //设置文本

background = true ; //文本框是否有背景

backgroundColor = 0x336699 ; //文本框的背景颜色

textColor = 0xFFFFFF ; //文本字段中文本的颜色

type = "dynamic" //文本字段为动态文本

selectable = false ; //文本是否可选

autoSize = "center" ; //控制文本字段的自动大小调整和对齐

_x = Stage.width/2; //文本字段的横坐标

_y = Stage.height/2;//文本字段的纵坐标

}

onEnterFrame = function () {

var Loaded = _root . getBytesLoaded ();

var Total = _root . getBytesTotal ();

_root . myload_txt . text = Math . floor (( Loaded / Total )* 100 )+ "%" ;

if ( Loaded == Total ) {

onEnterFrame = null ;

removeMovieClip ( _root . myload_txt );

play ();

}

};

二. egg616的Loading艺术之一

1、制作原理:

世界上所有的loading大概都可以分为三个部分:

1) 制造一个循环,用于更新数据。一般来说有两种方法,一种是做成二帧,在第二帧中用gotoAndPlay(1)命令产生循环。另一种是只做一帧,利用onEnterFrame命令产生循环。

2) 利用getBytesTotal()与getBytesLoaded()命令获取文件数据。

3) 以图形或动画的方式将第二步获取的数据表现出来(一般同时还以文本方式精确表示)

上面的说明,对一个会做LOADING的人来说是很清楚的,但不会做的看了大概还是不会(呵呵)所以下面我们一步一步来,做个简单的例子(不做文本显示数据了):

2、简单的例子(只有两步,相信你有这个耐性):

打开你一个心爱的动画,新建一个场景,并把它拖到最前面。

在帧上加入以下的AS动作,即大功告成!

源代码:

stop ();

function dr ( nam , de , d , al ) {

na = createEmptyMovieClip ( nam , de );

na . lineStyle ( d , 0x9900cc , al );

na . _x = 160 ;

na . _y = 280 ;

na . lineTo ( 240 , 0 );

}

//一个画线条的函数,四个参数对应什么,自己看哈

onEnterFrame = function () {

var a = getBytesTotal ();

var b = getBytesLoaded ();

//取得下载的数据

if ( b < a ) {

dr ( "b1" , 0 , 30 , 30 );

dr ( "b2" , 1 , 20 , 30 );

dr ( "b3" , 2 , 20 , 100 );

b3 . _xscale = b / a * 100 ;

//画三条横线,显示下载进度;

} else {

delete onEnterFrame ;

b1 . removeMovieClip ();

b2 . removeMovieClip ();

b3 . removeMovieClip ();

play ();

//下载完毕,删除图形和函数;

}

};

可以按两次Ctrl+Enter进行下载测试,若对AS有恐惧症者,闭着眼睛复制―粘贴即可

下面是这个例子的效果图

三. egg616的Loading艺术之二

1、打开你要加Loading的动画,新建一个场景,并把它拖到最前面。

2、在最前面的场景的第一帧上加入下面的AS代码。

源代码:

//Copyright: 吴杰兴 广东廉江

//本作品可随意复制或修改,但请注明原作者

stop();

sw = 550;

sh = 400;

//

Stage.showMenu = false;

//隐藏讨厌的右键菜单

cs = 60;

//网格的密集程度

r = 2550;

d = r/Math.SQRT2;

//网格的弯曲度

p = Math.PI;

//定义常数PI

createEmptyMovieClip("ln", 1);

ln.lineStyle(0, 0xffffff);

for (var i = 1; i<=cs; i++) {

ln.moveTo(sw/2+r*Math.cos(i/cs*p), -d+300+r*Math.sin(i/cs*p));

ln.lineTo(sw/2+r*Math.cos(i/cs*p+p/2),

-d+300+r*Math.sin(i/cs*p+p/2));

}

//下面画个颜色渐变的底子

createEmptyMovieClip("bg", 0);

with (bg) {

colors = [0x6666ff, 0xffffff, 0x660099];

alphas = [30, 30, 80];

ratios = [0, 100, 200];

lineStyle(5, 0x00ff00);

matrix = {matrixType:"box", x:200, y:115, w:50, h:450, r:p/2};

beginGradientFill("linear", colors, alphas, ratios, matrix);

moveTo(-200-sw, -100);

lineTo(200+sw, -100);

lineTo(200+sw, 100+sh);

lineTo(-200, 100+sh);

lineTo(-200, -100);

endFill();

}

//

r1 = 50;

r2 = 170;

nu = 32;

//分别为中心圆的3个参数;

cr = 600;

//cr是填色半径

createTextField("te", 5, 75, 100, 160, 100);

te.textColor = 0x9900ff;

//创建文本显示下载的数据

function fo1(nam, de, ro) {

na = createEmptyMovieClip(nam, de);

with (na) {

_y = 40;

lineStyle(0, 0x000000, 0);

colors = [0x6666ff, 0xffffff, 0x660099];

alphas = [130, 130, 20];

ratios = [0, 120, 200];

matrix = {matrixType:"box", x:-cr/2, y:-cr/2, w:cr, h:cr, r:p/2};

beginGradientFill("radial", colors, alphas, ratios, matrix);

//这里用AS来渐变填充

moveTo(r1, 0);

var bl = Math.cos(p/nu);

for (var i = 1; i<=ro; i++) {

curveTo(r1*Math.cos(i*p/(nu/2)-p/nu)/bl,

r1*Math.sin(i*p/(nu/2)-p/nu)

/bl, r1*Math.cos(i*p/(nu/2)), r1*Math.sin(i*p/(nu/2)));

}

lineTo(r2*Math.cos(ro*p/(nu/2)), r2*Math.sin(ro*p/(nu/2)));

for (var i = ro; i>=1; i--) {

curveTo(r2*Math.cos(i*p/(nu/2)-p/nu)/bl,

r2*Math.sin(i*p/(nu/2)-p/nu)

/bl, r2*Math.cos((i-1)*p/(nu/2)), r2*Math.sin((i-1)*p/(nu/2)));

}

lineTo(r1, 0);

endFill();

}

}

//此函数用来画中间的圆环,其中圆环是用curverTo的方法作出,

//这里不作介绍,我将在下个教程中详述

onEnterFrame = function () {

ab = _root.getBytesLoaded();

bb = _root.getBytesTotal();

// 获取数据

sb = int(ab/bb*nu);

fo1("di", 4, sb);

di._x = 275;

di._y = 200;

di._yscale = 25;

di._rotation = -30;

// 调用函数作上面的圆环

fo1("yz", 3, sb);

yz._xscale = 100*Math.pow(3, 0.5)/2;

yz._yscale = 25;

yz._alpha = 30;

yz._x = 275;

yz._y = 360;

// 在下面再作一个透明的圆环,作为上一个的影子

if (ab>>>"

di.onPress = function() {

delete onEnterFrame;

te.removeTextField();

di.removeMovieClip();

yz.removeMovieClip();

ln.removeMovieClip();

bg.removeMovieClip();

play();

};

}

};

因为是纯AS的作品,就不再提供FLA文件了,下面是效果图(JPG格式的,比起SWF的差多了。)

四.小郎的AS Loading

1、打开你要加Loading的动画,新建一个场景,并把它拖到最前面。

2、新建一个空MC,并将其拖入新建的场景的第1帧上,并将其实例名命名为:ss

3、在MC上加入以下代码(换句话说:单击MC,打开AS面板,输入以下代码:)

onClipEvent (load) {

this._x = 180;

this._y = 300;

_root.ss.createTextField("tt", 1, 70, 50, 100, 20);

_root.ss.tt.textColor = 0xff0000;

_root.ss.createEmptyMovieClip("louding", 2);

with (_root.ss.louding) {

lineStyle(0, 0x0000ff, 0);

moveTo(0, 0);

//起点

beginFill(0xff0000, 100);

lineTo(0, 10);

lineTo(10, 10);

lineTo(10, 0);

endFill();

}

_root.ss.createEmptyMovieClip("loudingk", 3);

with (_root.ss.loudingk) {

lineStyle(0, 0x000000, 100);

moveTo(0, 0);

//起点

lineTo(0, 10);

lineTo(200, 10);

lineTo(200, 0);

lineTo(0, 0);

}

}

onClipEvent (enterFrame) {

load = int(_root.getBytesLoaded()/_root.getBytesTotal()*100);

_root.ss.tt.text = "loading"+load+"%";

_root.ss.louding._width = 2*load;

if (_root.getBytesLoaded() == _root.getBytesTotal()) {

_root.play();

}

}

效果如图:

小提示:本机测试Loading效果的简单方法

Ctrl+Enter之后往往看不到Loading效果就开始播放主体动画了,要想清楚地预览到Loading的效果,一个很简单的方法是:Ctrl+Enter之后在测试动画播放状态下再按一次Ctrl+Enter就可以清楚地看到Loading效果了,另外可以改变模拟Modem的速度,在测试动画的窗口中,从Debug菜单中可选择14.4、28.8、56K等几个速度,或自定义.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有