HardcoreGraphic - Thailand Graphic Design Ezine

Flash MX : การสร้างตัว Preload ใน Flash Movie
Date : 30:06:04 | By : Marianas Graphix

เราจะเห็นได้ว่าเกือบทุกเว็บไซต์ที่มีการใช้ Flash เข้ามาแสดงจะต้องมีการแสดงหน้าที่บอกว่าตอนนี้กำลังโหลด Flash
อยู่เป็นจำนวนเท่าไรแล้วก่อนที่จะแสดงผล Flash ดังกล่าว ซึ่งตัวที่ใช้แสดงผลขนาดของ Flash ที่กำลังโหลดเราจะ
เรียกว่าตัว Preload การสร้างตัว Preload ที่ง่ายที่สุดคือ การใช้ตัวเลขแสดงขนาดของ Flash ที่โหลดได้แต่ในตัวอย่าง
ต่อไปนี้เราจะใช้แถบสีแทนในการแสดงผล ซึ่งขั้นตอนการสร้างตัว Preload มีดังนี้ี้

1. ให้เปิดโปรแกรม Flash MX แล้วสร้างไฟล์ขึ้นใหม่บันทึกเป็นชื่อ preload.fla
2. สร้าง Movie Clip ขึ้นมาใหม่โดยเลือกคำสั่ง Insert -> New Symbol จะปรากฏไดอะล็อก Create New Symbol
ในช่อง Name ให้พิมพ์ preload เลือก Movie Clip และ คลิกที่ปุ่ม OK ดังรูปที่ 1

รูปที่ 1 การสร้าง Movie Clip ที่ใช้แทนตัว Preload

3. สร้างสี่เหลี่ยมผืนผ้าที่ไม่มีเส้นล้อมรอบโดยใช้ Rectangle tool ดังรูปที่ 2 แล้วกลับไปที่ Timeline หลัก

รูปที่ 2 สี่เหลี่ยมผืนผ้าที่ใช้แสดงขนาดของ Flash ที่โหลดได้

4. เปิดพาเนล Library โดยเลือกคำสั่ง Window -> Library แล้วคลิกลาก Movie Clip ที่เราสร้างขึ้นในขั้นตอนที่ 3
มาวางลงบน Stage ในเฟรมแรกของ Timeline หลัก

5. ตั้งชื่อให้กับ Movie Clip ในขั้นตอนที่ 4 โดยคลิกที่ Movie
Clip แล้วในพาเน Properties พิมพ์ preload ลงในช่องใต้
Movie Clip

6 . สร้างกรอบล้อมรอบ Movie Clip ที่นำมาวางบน Stage ใน
ขั้นตอนที่ 4 แล้วย่อยขนาดของ Movie Clip โดยใช้
Freetransform tool ดังรูปที่ 4

รูปที่ 3 การตั้งชื่อ Movie Clip

รูปที่ 4 กรอบที่ใช้แทนขนาดของ Flash ทั้งหมด
ที่โหลดได้

7 . สร้าง Key Frame ในเฟรมที่ 2 ของ Timeline โดยกดปุ่ม F6 หลังจากนั้นคลิกขวาลงบนเฟรมที่ 2 บน Timeline แล้ว
เลือกคำสั่ง Actions ดังรูปที่ 5 ในช่องที่ให้พิมพ์โค้ด ActionScript พิมพ์โค้ดต่อไปนี้ลงไป

if(getBytesTotal() == getBytesLoaded()) {
gotoAndPlay(3);
} else {
preload._xscale = (getBytesLoaded()/getBytesTotal()) * 100;
gotoAndPlay(1);
}

รูปที่ 5 การเพิ่ม ActionScript ลงในเฟรม

8. สร้างภาพเคลื่อนไหวที่ต้องการตั้งแต่เฟรมที่ 3 เป็นต้นไปดังรูปที่ 6 แล้วบันทึกการแก้ไขโดยเลือกคำสั่ง File -> Save

รูปที่ 6 ภาพเคลื่อนไหวหลังเฟรม
ที่ีใช้แสดง Preload

9 . ทดสอบการทำงานของปุ่มที่สร้างขึ้นโดยกดปุ่ม Ctrl + Enter

** สนับสนุนบทความจาก MarianasGraphix ผู้จัดจำหน่ายซอฟแวร์มาโครมีเดียอย่างเป็นทางการ

อ่านบทความอื่นเพิ่มเติม

+ HardcoreGraphic 7.0 Sponsored by Elife.co.th