หน้าตาของไฟล์จะเป็นประมาณนี้ค่ะ ลองคลิกดูได้นะคะ คลิ๊กที่ตัวเลขภาพจะเปลี่ยนตามตัวเลขค่ะ
ตัวอย่างผลงานวันนี้ค่ะ
ขั้นตอนที่ 1: เปิดหน้าต่างใหม่ใน Flash
ขั้นตอนที่ 2: เตรียมภาพขนาดตามที่เราต้องการ ในบทเรียนนี้ใช้ขนาด 250px X 200 px จำนวน 5 ภาพ หรือ Download ภาพที่นี่ เพื่อความรวดเร็วในการเรียนค่ะ
ขั้นตอนที่ 3: กลับไปที่โปรแกรม Flash เลือก File --> Import --> Import to Library เลือกภาพมาวางที่ Library (image1, image2, image3, ...) จะได้ดังภาพ
ขั้นตอนที่ 4: กด Ctrl+J บนคีย์บอร์ด (Document Properties) และกำหนดกว้าง 270 px สูง 240 px เลือกสีขาวของพื้น Frame Rate = 28 และคลิ๊ก Ok
ขั้นตอนที่ 5: กด (V) Selection Tool เลือก Image 1 จาก Library มาวางบน Stage
ขั้นตอนที่ 6: ภาพที่ 1 ยังคงถูกเลือกอยู่ (Ctrl + K) และทำตามขั้นตอนดังนี้
1. คลิ๊กที่ Align / Distribute ให้เปิดทำงาน
2. คลิ๊กที่ Align horizontal Center ให้เปิดทำงาน
3. คลิ๊กที่ Align Vertical Center ให้เปิดทำงาน
ขั้นตอนที่ 7: จากนั้นก็ให้เลือกที่ภาพ แล้วเลื่อนโดยใช้ลูกศรเลื่อนขึ้น นับไป 10 ครั้ง เพื่อว่าจะได้มีที่ว่างด้านล่างสำหรับพิมพ์ตัวเลขค่ะ จะได้ดังภาพ
ขั้นตอนที่ 8 : ดับเบิ้ลคลิ๊กบน Layer 1 เปลี่ยนชื่อเป็น image1
ขั้นตอนที่ 9 : คลิ๊กบน Frame 1 ของ Layer imgae1 แล้วกด F9 (Action Script Panel) เพื่อเข้าไปพิมพ์ Code ดังนี้
ขั้นตอนที่ 10 : สร้าง Layer ใหม่เหนือ Layer image1 และตั้งชื่อให้ว่า numbers จากนั้นกด (V) ย้าย Layer numbers ลงมาข้างล่างใต้ Layer image1 โดยใช้วิธีการ "ลากและวาง" ดูตามภาพประกอบค่ะ
ขั้นตอนที่ 11 : เลือกที่ Layer numbers กด (T) Text Tool เพื่อจะพิมพ์ตัวเลข และไปที่ Properties Panel (Ctrl + F3) หลังจากนั้นทำตามขั้นตอนดังนี้ค่ะ
1. เลือก Static Text Field
2. เลือก a Trebuchet Ms a font
3. เลือกขนาด font = 17
4. เลือก สีตัวอักษร = สีดำ
5. Rendering Option เลือก Anti - alias for readability
หลังจากนั้นพิมพ์ใต้ภาพ 1 2 3 4 5 ตามภาพตัวอย่าง
ขั้นตอนที่ 12: กด (V) ใช้ Selection Tool เลือกตัวเลข 1 (ตามภาพ)
หลังจากนั้นกด F8 (Convert to Symbol) เพื่อทำการเปลี่ยนตัวเลข 1 ให้เป็นสัญลักษณ์ Button ตั้งชื่อว่า number1 กด ok ดูได้ตามภาพค่ะ
ขั้นตอนที่ 13 : ตัวเลข 1 ที่เป็น Button แล้วยังคงถูกเลือกอยู่ จากนั้นกด F9 (Action Script Panel) แล้วพิมพ์ Code ตามภาพค่ะ
ขั้นตอนที่ 14 : กด (V) Selection Tool เลือกตัวเลข 2 หลังจากนั้นกด F8 (Convert to Symbol) แล้วเปลี่ยนตัวเลข 2 ให้เป็นสัญลักษณ์ Button ตั้งชื่อว่า number 2 ดูตามภาพตัวอย่าง
ขั้นตอนที่ 15 : และเลข 2 ที่เปลี่ยนเป็น Button แล้ว ถูกเลือกอยู่ กด F9 (Action Script Panel) แล้วพิมพ์ Code ตามภาพนี้ลงไปค่ะ
และหลังจากนี้ให้ทำทุกตัวเลข ตามขั้นตอนที่ 14 และ 15 โดยให้เปลี่ยนเป็นสัญลักษณ์ Button และใส่ Code ที่ Action Script Panel
number 3:
on (release) {
gotoAndPlay(3);
}
number 4:
on (release) {
gotoAndPlay(4);
}
number 5:
on (release) {
gotoAndPlay(5);
}
ขั้นตอนที่ 16: คลิ๊ก Frame 5 ของ Layer Numbers และกด F5
ขั้นตอนที่ 17: สร้างเลเยอร์ใหม่เหนือเลเยอร์ image1 และเปลี่ยนชื่อว่า image2
ขั้นตอนที่ 18: คลิ๊ก Frame 2 ของเลเยอร์ image2 กด F6 จากนั้นไปลาก image2 จาก Library มาวางที่ Stage ให้ตำแหน่งเดียวกันกับภาพ image1 ของ Layer image1
ขั้นตอนที่ 19: ภาพที่ 2 วางให้ตรงตำแหน่งเดียวกับภาพที่ 1
ขั้นตอนที่ 20: กด (V) Selection Tool และคลิ๊ก Frame 2 ของ Layer image2 จากนั้นกด F9 (Action Script Panel) ให้พิมพ์ Code ดังนี้
Stop();
ขั้นตอนที่ 21: ให้ทำตามขั้นตอนตามสองภาพที่ทำมาก่อนหน้านี้ โดยการเพิ่ม Layer ใหม่ โดย
Layer image3 วางภาพบน Frame 3 , Layer image4 วางภาพบน Frame 4 และ Layer image5 วางภาพบน Frame 5 โดยให้ทุกภาพวางตำแหน่งเดียวกันเท่ากันค่ะ
หลังจากเสร็จเรียบร้อยแล้ว ให้กด Ctrl + Enter เพื่อเป็นการ Run ดูผลนะคะ (แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ)
หรือสามารถ Download File Master ไป Run ดูเอาเองได้ ที่นี่ ค่ะ
และทั้งหมดนี้ก็เป็นวิธีการสอน Flash บทเรียนที่ 1 ของมนต์มีเดีย ค่ะ ถ้าอย่างไรไม่เข้าใจ Post สอบถามได้เลยนะคะ แล้วพบกันใหม่บทเรียนหน้าค่ะ
เรียบเรียงโดย
