查看完整版本: 純ActionScript的Loading效果

未來時間 2008-5-16 21:38

純ActionScript的Loading效果

[font=新細明體]前言：稍微大一些的Flash作品在播放之前都會有一個Loading預載畫面，這考慮到網路的速度，本地巡覽不需要等待下載，但傳到網上，因為每個使用者的網速不同，所以很有必要在我們的作品中加入Loading畫面，之前，已經有很多教程是關於Loading制作方法的，今天我們給讀者講述四個純AS的Loading效果，不懂AS的菜鳥或“代碼盲”甚至可以直接復制教程中的代碼到自己的作品中，懂AS代碼的朋友，可以仔細閱讀這些代碼，從中學到更多的AS知識，或由此引申出更多的AS Loading效果…… 一.=棉花糖=的Loading教程 [/font]
&dj].eQz l}A$YW-F [font=新細明體]比較簡陋 [/font])z,YS?4x/x'b
[font=新細明體]動態顯示load百分比 [/font]
Tr~}p [font=新細明體]將全部代碼拷貝到第一幀，當load完畢後，會自動開始播放 [/font]
}wB.fX;E [font=新細明體]來源程式碼: [/font][code]stop ();
4~/@WH;tO}:Su3z _root . createTextField ( "myload_txt" , 1 , 0 , 0 , 0 , 0 );
?9yj,s"a(Fz$~{)fE with ( _root . myload_txt ) { //設定文字
-eN_6Gb] background = true ; //文字框是否有背景
D%W mWJs2ZbC backgroundColor = 0x336699 ; //文字框的背景色彩 8?9Wn!Iy,WW
textColor = 0xFFFFFF ; //文字字段中文字的色彩
*W/Yz+I _a9} type = "dynamic" //文字字段為動態文字 &I k hUk V.a
selectable = false ; //文字是否可選
,Dn X3ex%` Sx autoSize = "center" ; //控制文字字段的自動大小調整和對齊 '^K/Y"_.e^^s
_x = Stage.width/2; //文字字段的橫坐標
3i(N`O}.YJ@%i _y = Stage.height/2;//文字字段的縱坐標
!UJI"s_D }
.@R*P!B.h onEnterFrame = function () { %y`0b4FLx\s$| i
var Loaded = _root . getBytesLoaded (); uJ in9B%n
var Total = _root . getBytesTotal ();
y"w7ONRRg _root . myload_txt . text = Math . floor (( Loaded / Total )* 100 )+ "%" ; 6mT\#VK
if ( Loaded == Total ) {
%n9r5r4[FU+N-V e onEnterFrame = null ; +dm9NQLcH#~
removeMovieClip ( _root . myload_txt );
7Xg uC7o!b{ play (); )w9_5T|S-]XYj
}
1F~8BG1h }; [/code]二. egg616的Loading藝術之一
[ X9iW!g {_:MHFL2P:a`
-H%i v o|9@/^c ]%^;J 1、制作原理：
T?H\\%w$b d k }m#MF
世界上所有的loading大概都可以分為三個部分：
Z%\+FWt:Y4LA `"b aOo
1 制造一個循環，用於更新資料。一般來說有兩種方法，一種是做成二幀，在第二幀中用gotoAndPlay(1)指令產生循環。另一種是只做一幀，利用onEnterFrame指令產生循環。
O+Be&O3LcJ
c#Xx'v)q_k 2 利用getBytesTotal()與getBytesLoaded()指令取得檔案資料。 "F.P]/yBj br'W7N,m
\5KeB!j;r$U J
3 以圖形或動畫的方式將第二步取得的資料表現出來（一般同時還以文字方式精確表示） %ef m+s KI(q4_&q
sK+baqa/lM7rq
上面的說明，對一個會做LOADING的人來說是很清楚的，但不會做的看了大概還是不會（呵呵）所以下面我們一步一步來，做個簡單的例子（不做文字顯示資料了）： !Hj.d"Nf'Is

0SH)N G-OY.G0vPJ 2、簡單的例子(只有兩步,相信你有這個耐性): #~E,e6o:]

a;~fY4SS Ⅰ　開啟你一個心愛的動畫，新增檔案一個場景，並把它拖到最前面。
_ q1Y]Ctf'FA
:m:?V,O``Wk k Ⅱ　在幀上加入以下的AS動作，即大功告成！ :u1~ x+DL&a6X3oM
M;g'Ixa:[H/`
來源程式碼:[code]stop (); _-C4dYh+AWm
function dr ( nam , de , d , al ) {
ER5J#OF%F:}c#ok na = createEmptyMovieClip ( nam , de ); ?3e)?^'{ P `6?'DA
na . lineStyle ( d , 0x9900cc , al );
e9T9w9w(A7P-LG na . _x = 160 ; 1}m}(\A%i
na . _y = 280 ; ,O:V"y+ddC:F
na . lineTo ( 240 , 0 ); D ~uD"o;i;u)B
} GL'GG-rm q
//一個畫線條的函式，四個參數對應什麼，自己看哈 fh~'\3?
onEnterFrame = function () {
/q:|aFE2S8a var a = getBytesTotal ();
f(lA#?$kcWGE var b = getBytesLoaded (); ^)I9Gc4D#Y(p@)n.x5g%y
//取得下載的資料
4Q#C};YA3r if ( b < a ) { 1c8e G:EI e$[A
dr ( "b1" , 0 , 30 , 30 ); z!vX C8b3t:z
dr ( "b2" , 1 , 20 , 30 ); ~"t*EeDf _
dr ( "b3" , 2 , 20 , 100 ); -u,? WhL,[ F8^)x
b3 . _xscale = b / a * 100 ;
2X&M0I{ Ojj _ //畫三條橫線，顯示下載進度；
v(i^YX#~7^`0X } else { 5MVECd+STu&G9]
delete onEnterFrame ;
2c/AW\sb c'E-w b1 . removeMovieClip ();
`g'Nwo4s@6q b2 . removeMovieClip (); fT}$U)h(_)vDJ-`
b3 . removeMovieClip ();
4@0rLB~$ppUv play (); Rl/s!`,k)efmD
//下載完畢，移除圖形和函式；
)y2eRO*X1k LE i } &Agu$K%t!R2z
}; [/code][font=新細明體]可以按兩次Ctrl+Enter進行下載測試，若對AS有恐懼症者，閉著眼睛復制—貼上即可 [/font]
b6Z)Y1gxmvUL [font=新細明體]下面是這個例子的效果圖 [/font]
4h#c#s e*i.q1FG [img]http://v3.7880.com/Upload/2006-09/2006914233511695.jpg[/img]
u,|Y4haQT^ [font=新細明體][/font]SR(h+r b _q8M["s$i
'l$["?t srI^
I#C.{cz(Q ^t,X)c
三. egg616的Loading藝術之二
Z|~j(_O#Jt
\'};Xu&J4M%YU 1、開啟你要加Loading的動畫，新增檔案一個場景，並把它拖到最前面。
Nw,^9c%R^ l[3BF0Z7}}
2、在最前面的場景的第一幀上加入下面的AS代碼。
FOc p]&M/v'bixI
Ebda1M J7p.n+@y 來源程式碼：[code]//Copyright: 吳傑興 廣東廉江 #y*|h k9XS
//本作品可隨意復制或修改,但請注明原作者 w#M`,`!{s3G$con"j
stop(); 7z(X6\9]7cCB @
sw = 550;
M0]3?Z5i%R5^d sh = 400;
7P:uPj:E ^yk //
-Cw \ XuN Stage.showMenu = false;
qE$? |#O$O ~ //隱藏討厭的右鍵功能表
D"[.V![iNWNy cs = 60;
^ ]*}bB Ot //網格的密集程度 e*IkMk:~l7~S
r = 2550; %b/i*Y Q7O0mv
d = r/Math.SQRT2; (DTdZ f
//網格的彎曲度 d/@P4@9X jl|
p = Math.PI; @(y;s!w0BI
//定義常數PI
7Ed2Q9puO+D createEmptyMovieClip("ln", 1); @3O*]7_I
ln.lineStyle(0, 0xffffff); 3]~5x4I1k { ?B(k
for (var i = 1; i<=cs; i++) {
`;A:]M!zm}C+w ln.moveTo(sw/2+r*Math.cos(i/cs*p), -d+300+r*Math.sin(i/cs*p)); w"~D*vd~}4m)nL
ln.lineTo(sw/2+r*Math.cos(i/cs*p+p/2), -d+300+r*Math.sin(i/cs*p+p/2));
o`QTs+j:j3i"m\ }
gt6r$tu //下面畫個色彩漸變的底子 &oUkT^6bg
createEmptyMovieClip("bg", 0); 3Z s| x(ii`H
with (bg) {
jE t,wcZ colors = [0x6666ff, 0xffffff, 0x660099]; ^/T(IK@2N
alphas = [30, 30, 80]; A-y8}QP \9DG Z1L
ratios = [0, 100, 200];
,n9|-kw/s#D lineStyle(5, 0x00ff00);
/W)t@ ce matrix = {matrixType:"box", x:200, y:115, w:50, h:450, r:p/2};
RD}4idyP3X-`3Z y beginGradientFill("linear", colors, alphas, ratios, matrix);
-p1U]8cG4b}3P#F I moveTo(-200-sw, -100); 8sW@-Ir9f!dX
lineTo(200+sw, -100);
+U/igh{ jA6z| U lineTo(200+sw, 100+sh);
!S!S?}'Qe }? lineTo(-200, 100+sh);
kk%d|,m lineTo(-200, -100); lZ)f6S'EFu
endFill(); 9oq/\d2p4uU@iw4q
}
P DTmh3u A)F //
{^)UvKr8CmQ r1 = 50; 1a hy!K7q u1N(N,}hD;M!z
r2 = 170; y Vw0l?Xztz
nu = 32;
:c vv,@ E#fq+~ //分別為中心圓的3個參數;
}&@8P4WW#Q cr = 600;
$\kt x0`yl:_ //cr是填色半徑 V.AC1Ak
createTextField("te", 5, 75, 100, 160, 100);
*Uc n?/GC te.textColor = 0x9900ff;
bic0fV ?#D //建立文字顯示下載的資料
zK%WS7SQXW
]"Kc_-Oz.O"W function fo1(nam, de, ro) { :e*T,[/GiO%j%AD
na = createEmptyMovieClip(nam, de);
1F`8j|o flF with (na) {
kb\-@v'Q,P _y = 40;
5x%o1OZ,Uk[)E lineStyle(0, 0x000000, 0); s!?Y$?3o @)T jg:eAO?
colors = [0x6666ff, 0xffffff, 0x660099]; \&F)J(B+?
alphas = [130, 130, 20]; h(gc:fzLGSO\
ratios = [0, 120, 200]; ;^ dZ.h*I2f
matrix = {matrixType:"box", x:-cr/2, y:-cr/2, w:cr, h:cr, r:p/2};
v,@Qg!Qo beginGradientFill("radial", colors, alphas, ratios, matrix);
v-bD7|)Jw0V8W //這裏用AS來漸變填充 &VKq-xE"_4eTl)F&m
moveTo(r1, 0);
[!XXge/A var bl = Math.cos(p/nu); 7]4w;ujZcB3N/J
for (var i = 1; i<=ro; i++) { &x f,|3mt)b3}&_q}
curveTo(r1*Math.cos(i*p/(nu/2)-p/nu)/bl, r1*Math.sin(i*p/(nu/2)-p/nu)
2b V2j SVn)|._ /bl, r1*Math.cos(i*p/(nu/2)), r1*Math.sin(i*p/(nu/2)));
e+C#H|7N i&`d:O } g!?hQ!y Y;?JcU#q kc
lineTo(r2*Math.cos(ro*p/(nu/2)), r2*Math.sin(ro*p/(nu/2)));
&}%hF1}/[`6M ?^ for (var i = ro; i>=1; i--) { }nBV%o#h
curveTo(r2*Math.cos(i*p/(nu/2)-p/nu)/bl, r2*Math.sin(i*p/(nu/2)-p/nu) Kc)Z:[m)f4VV
/bl, r2*Math.cos((i-1)*p/(nu/2)), r2*Math.sin((i-1)*p/(nu/2))); 5QeaO-o&}
} 2L6|/U+C0];R
lineTo(r1, 0); b7f6_&Q/t.V$UtnY
endFill();
bj@3K*m4WQc } %r5EM F"q
} S'c)? H$DZ@| lW
//此函式用來畫中間的圓環,其中圓環是用curverTo的方法作出,這裏不作介紹,我將在下個教程中詳述 O R(Z%b1~2Q
onEnterFrame = function () {
;jzz&yyQHd1x8? ab = _root.getBytesLoaded();
SpX UO u:R Y u bb = _root.getBytesTotal(); x v"T[/gMU
// 取得資料
[&@a-V"R&f n!ox\d sb = int(ab/bb*nu);
$~U/oi'l fo1("di", 4, sb); mYm[ U3COI R
di._x = 275; Q"\+T/{:XQ$f
di._y = 200;
:f,r&E+SOn di._yscale = 25; B c3tj%FK2U,F
di._rotation = -30; 2S&MN-KuDx/S0x b
// 呼叫函式作上面的圓環 @ H0|6tz:Hz
fo1("yz", 3, sb); Nt0j7D,@V@(?#E
yz._xscale = 100*Math.pow(3, 0.5)/2; 6s c-s]r PJ ~\"c{
yz._yscale = 25;
4XZ9R2yQj1C)Ec8S yz._alpha = 30;
j SFb9p0i'jP2E yz._x = 275;
a;Pl mp%U5?b yz._y = 360;
D9|xwG,XP // 在下面再作一個透明的圓環,作為上一個的影子 (c2} m5rmZo
if (ab>>>"
x3m%AT$BM;T8sk di.onPress = function() { /b"Ws+yJ
delete onEnterFrame; T,LB T&_-e.@ V
te.removeTextField(); 1LJj:s#[)U0m q ?\n
di.removeMovieClip();
%m/|z |p8M yz.removeMovieClip(); :jWZ uT;]'[
ln.removeMovieClip(); $~{@0s8\sX
bg.removeMovieClip(); $_B$DkxlKV/Z)E
play(); z(Ik#`E!l K rW
};
4n.n@/q-Jr } 3M2u*w&f3G)@
}; [/code]o%de`? Oa
[font=新細明體]因為是純AS的作品，就不再提供FLA檔案了，下面是效果圖（JPG格式的，比起SWF的差多了。） [/font] @(c1D8~,n+D
[img]http://v3.7880.com/Upload/2006-09/2006914233515658.jpg[/img]5il+LEl;{*hff
|x9FGLe
X-Qg%v`:X/l+F
[font=新細明體]四.小郎的AS Loading [/font]E)\n1d&? E.J
[font=新細明體]1、開啟你要加Loading的動畫，新增檔案一個場景，並把它拖到最前面。 [/font]
KW'n[]$S [font=新細明體]2、新增檔案一個空MC，並將其拖入新增檔案的場景的第1幀上，並將其案例名命名為：ss [/font]K&n2@{#BL4K
[font=新細明體]3、在MC上加入以下代碼（換句話說：按一下MC，開啟AS面板，輸入以下代碼：） [/font]r?/R}F)yEh
[font=新細明體]onClipEvent (load) { [/font]9I c_7oFold
[font=新細明體]this._x = 180; [/font]
&w"__'^j5`D1U y [font=新細明體]this._y = 300; [/font]1qil+uB
[font=新細明體]_root.ss.createTextField("tt", 1, 70, 50, 100, 20); [/font]
(?| ZQUTH\7J7r [font=新細明體]_root.ss.tt.textColor = 0xff0000; [/font]
G0l%LsHO [font=新細明體]_root.ss.createEmptyMovieClip("louding", 2); [/font]Q!K`3l e#p
[font=新細明體]with (_root.ss.louding) { [/font]S!Zos[^]
[font=新細明體]lineStyle(0, 0x0000ff, 0); [/font]$?W4S'] iB:L
[font=新細明體]moveTo(0, 0); [/font]
dq9q,JS[W*?&v(^ [font=新細明體]//起點 [/font]
rHY&Ol!v(O"B|~{ [font=新細明體]beginFill(0xff0000, 100); [/font]
%G8n,J~ cX ^nl;G [font=新細明體]lineTo(0, 10); [/font]&Y7x,]fX M/RS
[font=新細明體]lineTo(10, 10); [/font]
W_ _lnk+dm [font=新細明體]lineTo(10, 0); [/font]
Tz:Td3b#Xn [font=新細明體]endFill(); [/font]8?)W4{~dbMdQ:w(\
[font=新細明體]} [/font]
^Vu6Y H} [font=新細明體]_root.ss.createEmptyMovieClip("loudingk", 3); [/font]
m;W4db |!mh"co [font=新細明體]with (_root.ss.loudingk) { [/font]
!|vHU/Q [font=新細明體]lineStyle(0, 0x000000, 100); [/font]
&w#d,Eg,\!` [font=新細明體]moveTo(0, 0); [/font]
E { a*di[?:P [font=新細明體]//起點 [/font]1r;HH*_"jb
[font=新細明體]lineTo(0, 10); [/font]o4b;jK6y(l:?0@
[font=新細明體]lineTo(200, 10); [/font] A5_I"GY J?
[font=新細明體]lineTo(200, 0); [/font]
-c"bd^'A1b v/YL2_ [font=新細明體]lineTo(0, 0); [/font])aqy4oR&sB6Y
[font=新細明體]} [/font]
-l$q"{0S n7wb [font=新細明體]} [/font] YCp6B?$oJ
[font=新細明體]onClipEvent (enterFrame) { [/font]
N_(^:T'Q7qg [font=新細明體]load = int(_root.getBytesLoaded()/_root.getBytesTotal()*100); [/font]
:@)Z9p}7\Y [font=新細明體]_root.ss.tt.text = "loading"+load+"%"; [/font]
\z2@][^-u y [font=新細明體]_root.ss.louding._width = 2*load; [/font]
q-GY"J| [font=新細明體]if (_root.getBytesLoaded() == _root.getBytesTotal()) { [/font]
i'NL)JNWP-S [font=新細明體]_root.play(); [/font]z8vbz)MR#N
[font=新細明體]} [/font]-Z VHR X'G*}r
[font=新細明體]} [/font]
3hG AQ(l_u [font=新細明體]效果如圖： [/font]'LMdft#M%F
[img]http://v3.7880.com/Upload/2006-09/2006914233515934.jpg[/img]
bTiIb~D0p(V
Y+hV p O1T'{LX`6D [font=新細明體]小提示：本機測試Loading效果的簡單方法 [/font] [ Q3RBwi
[font=新細明體]Ctrl+Enter之後往往看不到Loading效果就開始播放主體動畫了，要想清楚地預覽到Loading的效果，一個很簡單的方法是：Ctrl+Enter之後在測試動畫播放狀態下再按一次Ctrl+Enter就可以清楚地看到Loading效果了，另外可以改變類比Modem的速度，在測試動畫的視窗中，從Debug功能表中可選擇14.4、28.8、56K等幾個速度，或自訂。 [/font]
A T_aXTL i.j Gt2J~;P0~
[[i] 本帖最後由 未來時間 於 2008-5-16 21:42 編輯 [/i]]
頁: [1]
查看完整版本: 純ActionScript的Loading效果