การทำ Preload แบบง่าย ๆ

 

มีผู้สอบถามเข้ามาว่าต้องการทำตัว Preload ของ Flash จะทำอย่างไร เนื่องจากเนื้อหาค่อนข้างยาว เลยนำมาเขียนเป็นบทความให้อ่านที่ Another Tricks ละกันครับ แต่ผู้ที่จะทำควรมีความรู้เรื่อง Action Script มาบ้าง อย่างน้อยรู้ว่า Action Script (AS) คืออะไร ก็ยังดี เพราะว่าตัว Preload ที่เราต้องการจะทำนั้น ต้องใช้ AS ในการคำนวนค่าของจำนวนขนาดไฟล์ของ Movie ที่โหลดเข้ามา อย่างไรก็ลองอ่านกันดูครับสำหรับบทความนี้

................................................................................................................................................................................................

วิธีการทำ Preload ใน Flash

1. การออกแบบ Movie ของเราถ้าหากเราต้องการใส่ตัว Preload เพื่อทำการแสดงตัว Preload ก่อนที่ Movie ทั้งหมดจะโหลดเสร็จและแสดง เราควรจะเว้น Key Frame ตำแหน่งที่ 1 และ 2 ไว้ 2 Key Frame หรือถ้าเราได้ทำการสร้างมูฟวี่ไปแล้วโดยที่ไม่มีการเว้น Frame ไว้ ให้เราทำการขยับมูฟวี่ของเราให้ไปเริ่มต้นที่ Frame  ที่ 3 นะครับ ดังรูป

2. จากนั้นให้เราทำการสร้าง Layer เพิ่มขึ้นมา 2 Layer ดังรูป โดยตั้งชื่อ Layer ดังนี้ 1. preload 2. percent
(คุณจะตั้งชื่ออะไรก็ได้สำหรับเลเยอร์แต่ผมขอตั้งให้สื่อความหมายในบทความ)

3. จากนั้นให้เราไปที่ Stage แล้วทำการวาดรูปสีเหลี่ยมขึ้นมา 1 รูป โดยให้มีขนาดพอประมาณในที่นี้ผมสร้างขนาดที่ 5 * 17 px ดังรูป สีสรรก็ตามที่คุณต้องการ

4. จากนั้นให้ทำการ Convert รูปสี่เหลี่ยมที่วาดขึ้นเป็น Movie clip (Main Menu ->Modify -> Convert to Symbol...) ตั้งชื่อรูปว่า barLoad ดังรูป

Preloading

5. จากนั้นให้เราลบรูปสี่เหลี่ยมที่อยู่บน Stage ทิ้งไป แล้วให้ไปที่ Layer ที่ชื่อว่า preload ที่ Key Frame ที่ 1 ของเลเยอร์นี้ให้ทำการลาก Movie ที่ชื่อว่า barLoad มาวางไว้ แล้วทำการกำหนดค่า ดังนี้

ที่ Properties ให้กำหนดชื่อของ Movie นี้ว่า loading ดังรูป จากนั้นทำการเพิ่ม Key Frame ลงไปที่ Frame ที่ 2

6. ต่อมาให้เราไปที่ Layer ที่ชื่อว่า precent แล้วทำการ Click ไปที่ Text Tool ทำการวาดกล่องข้อความลงไปที่ Stage ดังรูป

-->>

7. จากนั้นให้เรามาที่ Properties แล้วทำการกำหนดค่า ดังนี้
ที่ Select Box ให้เลือกเป็น Dynamic Text
ชื่อของ Text ให้เรากำหนดเป็น textPercent
Var : percent

8. กลับมาที่ Key Frame ที่ 1 ของ Layer ที่ชื่อว่า preload จากนั้นคลิ๊กไปที่ Frame ที่ 1 แล้วทำการกดปุ่ม F9 เพื่อเปิดหน้าต่าง Actions ขึ้นมา แล้วทำการพิมพ์โค้ด Action Script ลงไปดังนี้


if(getBytesLoaded()==getBytesTotal()){
gotoAndPlay(3);
}else{
loading._width=Math.floor((getBytesLoaded()/getBytesTotal())*100);
percent='Loading : '+loading._width+' %';
}

9. จากนั้นที่ Layer ที่ชื่อว่า preload คลิ๊กไปที่ Key Frame ที่ 2 แล้วทำการพิมพ์ AS ลงไป ดังรูป

10. ก็เป็นอันเสร็จสิ้นการทำ Preload ครับ เราก็จะได้หน้าตาบน Timeline ดังรูป

การทดสอบให้เราทดสอบโดยการทำ Simulate Download กับหน้าจอที่เรา Test Movie ครับ หรือจะเทสบน Internet เลยก็ได้ครับ ถ้าไฟล์ Movie เรามีขนาดไฟล์ที่เล็กเราอาจจะไม่เห็นตัว Preload นี้แสดง

Loading

................................................................................................................................................................................................

<< DOWNLOAD ตัวอย่าง (source file) >>

BACK
   Copyright © 2003-2007 dwthai.com. All rights reserved. This website was created by : S.raksasuk.