วิธีทำ Flash Preloader แบบ timeline ง่ายๆครับ step by step เขียน action script 2.0(AS2) ไม่กี่บรรทัด ก็งัด Preload มาแสดงได้แล้ว (สำหรับคนที่ใช้แฟลชเป็นแล้วก็ข้ามๆไปดู action script ได้เลยครับ)

สิ่งที่ต้องเตรียมก็คือ โปรแกรมแฟลช ที่รองรับ AS2 แล้วก็รูปขนาดใหญ่ไว้ทดสอบครับ แล้วก็มาเริ่มกันเลยครับ

เริ่มต้นด้วย new File

เริ่มด้วยการ new File แล้ว เลือกเป็น AS2.0 นะครับ

เตรียม Layers

คลิ๊กไปที่ frame 3 ครับ แล้วกด F6 (Insert Keyframe)

จะเป็นจุดกลมๆขาวๆ ข้างในกลวง(หมายถึงว่า blank keyframe)แบบนี้ครับ

สร้าง Layer ใหม่ขึ้นมาแล้วตั้งชื่อว่า script แล้วคลิ๊กที่ Frame 2 ใส่ blank KeyFrame ไปครับ(F6)

สร้างแถบโหลดและข้อความบอก percent

เตรียม layers เสร็จแล้วก็สร้าง แถบโหลด และ ตัวบอกสถานะเปอร์เซ็นต์ครับ

เริ่มจากคลิ๊กที่ frame 1 ของ Layer1 ก่อนครับ แล้ว วาดสี่เหลี่ยมลงไป โดยใช้เครื่องมือ  เอาพอเหมาะนะครับ (ของผมค่อนข้างใหญ่ไปนิด ) แล้วคลุมดำมันซะ (ตรงสี่เหลี่ยมจะมีจุดๆขาวๆ[ม้าง])

แล้วกด F8 (Convert to Symbol) ครับ ตั้งชื่ออะไรก็ได้ครับ

รออะไรอยู่..กด ok เลยครับ

เสร็จแล้วก็ มองดู panel properties( Work Space : Essentials จะอยู่ด้านขวารคับ) แล้วตั้งชื่อ instant ครับ ของผมตั้งว่า loadbar *อันนี้ตั้งชื่อเหมือนของผมจะง่ายที่สุดครับ

สร้าง loadbar เสร็จแล้วมาสร้าง สถานะpercentกันครับ

เริ่มด้วยคลิ๊กปุ่ม Text(เป็นรูปตัว T ตรง ToolsBar อ๊ะ = =’) หรือจะกดปุ่ม T ที่keyboard ก็ไม่ว่ากันครับ ฮ่าๆๆ

ก็จิ้มไปใน MainStageครับ(พื้นที่ขาวๆที่ไว้วาดนั่นละครับ)

สำคัญครับ : อย่าลืมพิมพ์ expertduck.com ด้วยนะครับ เดี่ยวคนอื่นไม่รู้ว่าอ่านมาจากที่นี่ ฮ่าๆๆๆ = =’

เสร็จแล้วก็มองดูตรง Properties panel อีกทีครับ

ให้เปลี่ยน type เป็น Dynamic  Text แล้วตั้งชื่อ Instant ว่า percentText ครับ (ทำเหมือนกับตอนตั้งชื่อ loadbar )

Okay… แล้วก็ได้เวลาใส่สคริปแล้วครับ

ใส่ AS2.0

คลิ๊กที่ เลือก Frame2 ของ Layer Script ครับ (ตรงที่มีจุดขาวๆ)

ตามรูปครับ   อ้อเกือบลืมถ้าหากใคร จุดดำไม่อยู่เหมือนของผม ต้องขอแสดงความเสียใจด้วยครับ เพราะท่านต้องย้อนกลับไปทำใหม่ตั้งแต่ต้น(ฮี้วววว – -*) หรือไม่ก็คลิ๊กตรงจุดดำ แล้วกด Ctrl+X แล้วมาคลิ๊กที่ Layer 1/Frame 1 แล้วกด Ctrl+Shift+V เพราะว่าท่าน วาด loadbar กับ text ผิดเฟรมซะแล้ว ฮ่าๆๆ

กลับมาที่เก่า หลังจากคลิ๊กตรงจุดขาว เฟรม2 ณ เลเยอร์ script ไปเป็นที่เรียบร้อยแล้ว ก็กด (F9)เพื่อเปิด Action Script Panel ขึ้นมา (ข้างในนี้ Interface น่าใช้มาก = =’) แล้วลงมือใส่ script เลยครับ

stop();
var ratio = _root.getBytesLoaded()/_root.getBytesTotal();	
if(ratio == 1)
{
	gotoAndPlay(3);
}else{
	percentText.text = Math.round(ratio*100) + '%';
	loadbar._xscale = ratio*100;
	gotoAndPlay(1);
}

อธิบายสคริป

เริ่มด้วย stop();  คือสั่งให้ flash เริ่มมาหยุดเล่นที่เฟรมนั้นก่อนเลย(ในที่นี้คือ frame 2)

ratio คือ อัตราส่วน ของขนาดข้อมูลที่โหลดมาแล้วกับ ขนาดข้อมูลทั้งหมด

ถ้า(ratio == 1)  ให้ไปที่เฟรม3 แล้วเล่น

ถ้าไม่ใช่ ให้

percentText มีข้อความ = ration คูณ 100 ตามด้วย % (แสดง%)

loadbar มีscale แกน X = ration คูณ 100 (ปรับความกว้างของ loadbar)

แล้วกลับไปเล่นเฟรม 1

ขั้นตอนสุดท้าย

คลิ๊กที่เฟรม 3 ของ layer 1 แล้ว ลากรูปใหญ่ๆจาก desktop เข้ามาวางใน โปรแกรมครับ(เพื่อใช้ทดสอบ)

เสร็จแล้วเซฟ แล้วกด Ctrl+Enter เพื่อทดสอบครับ จะเห็นว่ามันโหลดปุ๊บแล้วเด้งไปวนไปวนมาเลยใช้ไหมครับ

ให้ เอาเม้าลาก ไฮไลท์ที่เฟรม10ของเลเยอร์ทั้งหมดเลยครับแล้วกด F5 เพื่อใส่เฟรมไปให้เต็ม

แล้วคลิ๊กที่  frame 10 ของ layer script กด F6 สร้าง keyframe แล้วกด F9 เปิด action script panel มาครับ แล้วใส่ stop();

จริงๆ ใส่ keyframe ที่เฟรม3โดยไม่ต้องเพิ่มเฟรมเอาก็ได้ครับแต่แค่อยากให้รู้ว่าเอา stop(); ไปใส่ไว้ที่เฟรมสุดท้าย

เสร็จแล้วลองกด Ctrl+Enter ดูอีกรอบครับ ….ปรากฏว่า ป๊าดดดดด โหลดไวเกินมองไม่ทัน ก็ให้กด Ctrl+Enter ซ้ำอีกทีครับจะเป็นการจำลองการดาวโหลด ถ้าหากว่ายังไวอยู่อีก ให้ปรับตามนี้ครับ

(เลือกความเร็วต่ำๆแล้ว กด Simulate Download อีกทีครับ)

เรียบร้อยครับ ตอนเอาไปใช้ก็เอาข้อมูลมาใส่แทนรูปทดสอบเอานะครับ