掌握Flash技巧:纯ActionScript的Loading效果四例

lbox201406

lbox201406

2016-03-18 19:43

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐掌握Flash技巧:纯ActionScript的Loading效果四例,赶紧看过来吧!
前言:稍微大一些的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,(m.tulaoshi.com) 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)));
}
lineT

[1] 200609/3221_2.html'>[2] 200609/3221_2.html'>下一页

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

o(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等几个速度,或自定义

200609/3221.html'>上一页  200609/3221.html'>[1] [2] 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/flash/)
展开更多 50%)
分享

猜你喜欢

掌握Flash技巧:纯ActionScript的Loading效果四例

FLASH flash教程
掌握Flash技巧:纯ActionScript的Loading效果四例

Flash教程:认识Flash ActionScript的环境-Flash actionscript

FLASH flash教程
Flash教程:认识Flash ActionScript的环境-Flash actionscript

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash高级技巧教程:flash手写输入-Flash actionscript

FLASH flash教程
Flash高级技巧教程:flash手写输入-Flash actionscript

Flash MX 2004 ActionScript图文教程(四)

flash教程
Flash MX 2004 ActionScript图文教程(四)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

AS3教程:如何制作一个完整的loading-Flash actionscript

FLASH flash教程
AS3教程:如何制作一个完整的loading-Flash actionscript

Flash ActionScript 3.0教程:学习Dot类-Flash actionscript

FLASH flash教程
Flash ActionScript 3.0教程:学习Dot类-Flash actionscript

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

FLASH的场景图层(lawyer)和层(level)的理解

FLASH的场景图层(lawyer)和层(level)的理解

Flash动态色彩偏转控制技巧

Flash动态色彩偏转控制技巧
下拉加载更多内容 ↓