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

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

วิธีหา % ก็คือ (โหลดได้/ต้องโหลด)*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();//เล่นต่อไป } }

 

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 }

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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