สร้าง Text Animate ด้วยโปรแกรม Adobe After Effect กันเถอะ !!!

19/08/2013

แปลความหมายเพลง Olivia Ong – Invisible Wing

26/10/2013

Flash Action Script 3.0 – พื้นฐานการทำหน้า PreLoader หรือหน้ารอระหว่างโหลด

25/08/2013
empty image
empty image

คงจะเคยเห็นกันบ่อยๆ เวลาเข้าเกม Flash หรือเว็บ เราจะเห็นหน้าที่แสดงแถบการโหลด ว่าโหลดไปกี่ % แล้ว เมื่อครบ 100% มันก็จะไปแสดงเนื้อหาหรือเข้าเกมต่อไป

 

ซึ่งการทำหน้าโหลด มันทำได้หลายแบบ ขึ้นอยู่กับว่าเราจะแสดงการโหลดของอะไร จะไฟล์ภายนอก หรือภายในก็แล้วแต่
ซึ่งการโหลดใช้คุณสมบัติอยู่ 2 ประการคือ
bytesLoaded คือ โหลดได้เท่าไหร่
bytesTotal คือ ต้องโหลดเท่าไหร่

จริงๆ ยังมีอีกเยอะเยะ ดูได้ที่ http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/LoaderInfo.html

วิธีหา % ก็คือ (โหลดได้/ต้องโหลด)*100
เช่น
1. ต้องโหลด 150 โหลดได้ 40
(40/150)*100 = 26.66

2. ต้องโหลด 150 โหลดได้ 75 ซึ่งคือครึ่งนึงของ 150 ก็ต้องเป็น 50%
(75/150)*100 = 50 ถูกต้อง

บางครั้งตัวเลขมันอาจจะเป็นทศนิยม ซึ่งสามารถตัดออกได้ด้วย
Math.floor ตัดเศษทิ้งไปเลย
Math.ceil ปัดเศษขึ้นเป็น 1 ไปเลย
Math.round เช็คก่อน ถ้า 0 ถึง 4 ปัดลง 5 ถึง 9 ปัดขึ้น

1. ตัวอย่างหน้าแสดงการโหลด stage โดยใช้เหตุการณ์ ENTER_FRAME

stop();//หยุด Timeline ไว้ก่อน
stage.addEventListener( Event.ENTER_FRAME, onLoading);
function onLoading(e:Event):void {
 var loaded:Number;//ตัวแปรเก็บจำนวนไบต์ที่โหลดได้
 var percent:Number;//ตัวแปรเก็บค่าเปอร์เซ็นต์
 var BLoad:Number=stage.loaderInfo.bytesLoaded;//ดึงค่าไบต์ที่โหลดได้เก็บไว้ใน BLoad
 var BTotal:Number=stage.loaderInfo.bytesTotal;//ดึงค่าไบต์ที่ต้องโหลดเก็บไว้ใน BTotal ซึ่งค่านี้ก็คือขนาดของไฟล์งานเรานั่นเอง
 loaded=BLoad/BTotal; //หาอัตราส่วนโหลดได้ต่อที่ต้องโหลด
 percent=Math.round(loaded*100); //แปลงให้เป็นร้อยละหรือ %
 txt_BLoad.text=BLoad+" / "+BTotal; //แสดงค่าไบต์ที่โหลดได้และต้องโหลดออกทางกล่องข้อความ
 txt_percent.text="Loading... "+percent+"%";// แสดงจำนวน % ที่โหลดได้ออกทางกล่องข้อความ
 if (percent==100) { //ถ้าโหลดครบ 100% แล้ว
  stage.removeEventListener( Event.ENTER_FRAME, onLoading );//ลบยาม
  play();//เล่นต่อไป
 }
}

ตัวอย่าง ดูในไฟล์ preloaderEx1.swf

2. ตัวอย่างการโหลดไฟล์จากภายนอก โดยใช้เหตุกาณ์สำหรับการโหลดโดยเฉพาะ

stop();//หยุด timeline ไว้ก่อน
var loadswf:Loader = new Loader();//สร้าง ตัวแปร loadswf เป็น Loader Object
loadswf.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoading);//เมื่อมีการโหลดให้ทำ onLoading
loadswf.contentLoaderInfo.addEventListener(Event.COMPLETE, onFinished);//เมื่อโหลดเสร็จแล้วให้ทำ onFinished
loadswf.load(new URLRequest("finished.swf"));//ทำการโหลดไฟล์ finished.swf ซึ่งต้องอยู่ในที่เดียวกันกับไฟล์นี้

function onLoading(evt:ProgressEvent):void {
var loaded:Number;//ตัวแปรเก็บจำนวนไบต์ที่โหลดได้
var percent:Number;//ตัวแปรเก็บค่าเปอร์เซ็นต์
var BLoad:Number=evt.bytesLoaded;//ดึงค่าไบต์ที่โหลดได้เก็บไว้ใน BLoad
var BTotal:Number=evt.bytesTotal;//ดึงค่าไบต์ที่ต้องโหลดเก็บไว้ใน BTotal ซึ่งค่านี้ก็คือขนาดของไฟล์งานเรานั่นเอง
loaded=BLoad/BTotal;// หาอัตราส่วนโหลดได้ต่อที่ต้องโหลด
percent=Math.round(loaded*100);//แปลงให้เป็นร้อยละหรือ %
txt_BLoad.text=BLoad+” / “+BTotal;//แสดงค่าไบต์ที่โหลดได้และต้องโหลดออกทางกล่องข้อความ
txt_percent.text=”Loading… “+percent+” %”;// แสดงจำนวน % ที่โหลดได้ออกทางกล่องข้อความ
}

function onFinished(evt:Event):void {
gotoAndStop(2);//ไปเล่นเฟรม2
addChild(loadswf);//วางไฟล์ที่โหลดเสร็จลงบน stage
}

ตัวอย่าง ดูในไฟล์ preloaderEx2.swf

เวลาเรากด Test Movie ดูมันอาจจะมองไม่ทันเลย เนื่องจากไฟล์มันเล็กมาก ไฟล์ก็อยู่ที่เครื่องเราเอง โหลดแปบเดียวก็เสร็จ
ถ้าจะดูการดาวน์โหลดให้ไปที่แถบเมนูเลือก View > Simulate Download [Ctrl+Enter]หรือกด [Ctrl+Enter] 2 ครั้งนั่นเอง

ต่อไปแล้วถ้าเราจะไม่เอาเป็นตัวเลขหล่ะ จะแปลงเป็นอย่างอื่น เช่นเป็นแถบ เป็นวงกลม หรืออะไรก็ว่าไป มันมีวิธีการทำอยู่ อธิบายยากอยู่นะ คือมันแล้วแต่ใครจะ Map ลงไปในอะไร
เรารู้แล้วว่าการโหลดมี 0 ถึง 100 เราก็แปลงตัวเลข ให้เป็นขนาดอะไรซักอย่าง ยกตัวอย่าง แถบโหลด

3. ตัวอย่างแสดงการโหลดแบบใช้แถบ
แนวคิด : เมื่อโหลดได้ 0% ก็ให้ขนาดแถบเป็น 0% เมื่อโหลดได้ 100% ก็ขยายแถบให้เป็น 100% แบบนี้

เอาตัวอย่างที่ 1 มา
ทำการวาดแถบแสดงการโหลดแล้วแปลงเป็น Symbol ตั้งชื่อ loadBar ในแถบสีเขียว แถบสีแดงปล่อยไว้ จากนั้นนำแถบสีเขียวทับสีแดง

เพิ่มโค้ดเข้าไป

loadBar.scaleX=loaded;

แค่นี้แหละ

ตัวอย่าง preloaderEx3.swf

4. ตัวอย่างแสดงการโหลดที่เกี่ยวข้องกับวงกลม
แนวคิด : วงกลมมี 360 องศา
เมื่อโหลดได้ 0% ก็ให้เข็มชี้ที่ 0 เมื่อโหลดได้ 100% ก็หมุนเข็มให้ไปชี้ที่ 360 ประมาณนี้ จะไม่เริ่มที่ 0 จะไปเริ่มที่ไหนก็แล้วแต่
แปลง 100 ให้เป็น 360 แปลงไงหล่ะเนี่ย… 360/100 = 3.6 ความหมายก็คือ ทุกๆ 1% จะหมุนไป 3.6 พอ 100% ก็หมุนไป 360 องศา
ดังนั้นสูตรที่เอาไปเขียนในโปรแกรมก็คือ %ที่โหลดได้คูณ 3.6 หรือ loaded*3.6 นั่นเอง
สรุปได้โค้ด

circle.pointer.rotation=percent*3.6;

วงกลมตั้งชื่อว่า circle เข็มตั้งชื่อว่า pointer ต้องตั้งชื่อทั้งใน Library และ instance name ผมลองอย่างใดอย่างหนึ่งแล้วมันไม่ได้หง่ะ -..-

ตัวอย่าง ดูในไฟล์ preloaderEx4.swf

5. แสดงการโหลดโดยเล่น Movie Clip
เริ่มแรกสร้าง Movie clip ขึ้นมาก่อน แล้วก็ทำดังรูป
Layer 1 คือรูป (bio) โดยเลเยอร์นี้จะเป็น Mask (ส่วนที่จะเห็น)
Layer 2 คือสีเหลี่ยมสีเหลือง เลเยอร์นี้จะเป็น Masked หรือถูกบัง
Layer 3 คือรูปที่เหมือน Layer 1 วางอยู่ตำแหน่งเดียวกันด้วย

เพิ่มโค้ด

mcBar.gotoAndStop(Math.floor(percent/2));

เนื่องจาก mcBar ของผมมันมี 50 เฟรม แสดงว่า 2% เล่น 1 เฟรม 100% เล่น 50 เฟรม ประมาณนี้
หรือใช้สูตร percent/(100/เฟรม)

ตัวอย่าง ดูในไฟล์ preloaderEx5.swf

แค่นี้น่าจะพอเป็นตัวอย่างได้แล้วมั้ง …

Download Source File

Ref:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/LoaderInfo.html
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/flash_as3_programming.pdf

มันคือเอกสารของ Adobe นั่นแหละ โหลดมาอ่านกันได้เลย Zzz