บทเรียนออนไลน์การสร้างแอนิเมชั่นด้วย Flash

โดย นายสิทธิชัย ทิพย์สิงห์ ครูชำนาญการ โรงเรียนสตรีศึกษา อ.เมือง จ.ร้อยเอ็ด


Action Script (แอคชั่นสคริปต์) คือชุดคำสั่งหรือภาษาคอมพิวเตอร์ที่ใช้ในการควบคุมหรือสั่งการในโปรแกรม Flash 

โดย Action Script สามารถเขียนควบคุมได้ทั้งบน Timeline และ บน Symbol

การเขียน Action Script บน Timeline

          การเขียนแอคชั่นสคริปต์บนไทม์ไลน์สามารถทำดังนี้
1. สร้างแอนิเมชั่นแบบใดก็ได้ขึ้นมา 1 ชิ้น (ในตัวอย่างจะสร้างแอนิเมชั่นแบบ Motion Tween)

หมายเหตุ * ปกติเมื่อเรากดปุ่ม Ctrl+Enter โปรแกรม Flash จะเล่นวนซ้ำไปซ้ำมาจนกว่าจะปิด
2. แทรกคำสั่ง Action Script เข้าไปในเฟรมสุดท้ายของงาน ให้คลิกที่เฟรมที่ 40 แล้วกดปุ่ม F9 บนคีย์บอร์ด จะมีหน้าต่างๆ Action Frame ขึ้นมาดังรูป


3. ในการเขียนคำสั่งโปรแกรมได้ออกแบบให้สามารถเขียนได้ 2 รูปแบบคือ แบบ Normal หรือ แบบธรรมดา 

สำหรับผู้ที่ยังใช้คำสั่งไม่คล่อง และ แบบ Expert คือ แบบที่สามารถพิมพ์คำสั่งได้เลย

สำหรับหัวข้อนี้จะให้เขียนทั้ง 2 รูปแบบ ดังนี้


เลือกคำสั่ง Global Functions > Timeline Control > stop  (คำสั่ง stop คือ สั่งให้หยุดการทำงาน)


4. ให้นักเรียนสังเกตที่เฟรมที่ 40 จะมีสัญลักษณ์ ตัว a เล็กอยู่ในเฟรม จากนั้นก็ทดสอบกด Ctrl+Enter


แบบที่ 2 การเขียนแบบ Expert mode คลิกที่เครื่องคำว่า Script Assist ด้านขวาของแถบ Action


จะปรากฏหน้าต่างๆว่างๆขึ้นมา ให้นักเรียนพิมพ์คำสั่ง stop(); ลงในพื้นที่ว่างนั้น


เสร็จแล้วกดปุ่ม Ctrl + Enter เพิ่อทดสอบคำสั่ง ถ้าทำถูกแอนิเมชั่นจะแสดงผลแค่ 1 ครั้งแล้วหยุด


การเขียน Action Script บน Symbol Button

สำหรับการใช้งานซิมโบลนั้นมี 3 อย่างตามที่ได้กล่าวมาแล้ว ได้แก่ Movie Clip Graphic และ Button ซิมโบลแบบ Movie Clip คือซิมโบลที่สามารถสร้างภาพเคลื่อนไหวซ้อนในตัวของมันเองได้
ซิมโบลแบบ
Graphic คือ ซิมโบลที่เป็นภาพกราฟฟิคไม่สามารถสร้างภาพเคลื่อนไหวซ้อนได้
ซิมโบลแบบ
Button คือ ปุ่มที่ใช้สำหรับการควบคุมให้ซิมโบล วัตถุ หรือ ภาพเคลื่อนไหวทำงานได้

สำหรับการใช้งานซิมโบลแบบ Button สามารถทำได้ดังนี้
1. วาดรูปปุ่มขึ้นมา 1 รูป จะเป็นรูปอะไรก็ได้
         

2. ใช้ลูกศรสีดำ (Selection Tool) ลากครอบแล้วกดปุ่ม F8 จากนั้นตั้งชื่อซิมโบลแล้วเลือกซิมโบลแบบButton  กด OK


3. เมื่อได้ซิมโบลแล้วดับเบิ้ลคลิกเข้าไปที่ ซิมโบล จะปรากฏเฟรม 4 สถานะ คือ Up Over Down Hit


Up คือ สถานะปกติที่ยังไม่ได้ทำอะไร        Over คือ สถานะเมื่อเคอเซอร์ของเมาส์มาทับปุ่ม
Down คือ สถานะเมื่อคลิกปุ่ม                Hit คือ กรอบพื้นที่หรือขอบเขตของปุ่ม

4. คลิกขวาที่เฟรม Over แล้วเลือกคำสั่ง Insert Keyframe


5. ทำการเปลี่ยนสีหรือรูปร่างของปุ่มใน เฟรม Over


6. คลิกขวาที่เฟรม Down แล้วเลือกคำสั่ง Insert Keyframe แล้วเปลี่ยนสีอีกรอบ


7. คลิกขวาที่เฟรม Hit แล้วเลือกคำสั่ง Insert Keyframe ไม่ต้องเปลี่ยนสีก็ได้เพราะสถานะ Hit เป็นขอบเขตของปุ่มที่สามารถคลิกได้เท่านั้น ไม่สามารถแสดงสีได้


หมายเหตุหากต้องการพิมพ์ข้อความบนปุ่มสามารถพิมพ์ได้ตามคีย์เฟรมของแต่ละสถานะ


8. เมื่อตกแต่งเสร็จ กดที่คำว่า Scene 1 เพื่อกลับไปยังหน้าหลัก จากนั้นกด ปุ่ม Ctrl+Enter เพื่อทดสอบ และลองเลื่อนเมาส์มาทับปุ่มและคลิกดู จะมีการเปลี่ยนแปลงเกิดขึ้นตามที่เรากำหนด


วิธีการใช้ ActionScript

ActionScript เป็นการเขียนภาษา Script บนโปรแกรม Flash เพื่อใช้ควบคุมมูวี่ (Movie) ให้ทำงานตามเหตุการณ์ต่างๆโดยเขียนที่หน้าต่างที่เรียกว่า พาเนล (Panel) ซึ่งพาเนล มี 2 โหมดคือ
Normal Mode เป็นโหมดปกติ ซึ่งจะมีตัวนำทางหรือเมนูตัวเลือก โหมดนี้เหมาะสำหรับมือใหม่
Expert Mode เป็นโหมดสำหรับผู้เชี่ยวชาญเหมาะสำหรับผู้ที่จำรูปแบบคำสั่ง (Syntax, operator,command)ได้ดี ในโหมดนี้จะไม่มี เมนูนำทาง เหมือนแบบแรก

การเปิดหน้าต่าง พาเนล (Panel Actions) คลิก Windows > Action หรือ กด F9


ขั้นที่ 1 คลิกที่ปุ่ม Script Assist เพื่อสลับหน้าต่างพาเนล


การเขียนคำสั่งให้กับเฟรม

คำสั่ง Action Script สามารถเขียนให้กับองค์ประกอบ 3 ชนิด คือ
เฟรม (Frame) ปุ่ม (Button) และมูวีคลิป (Movie Clip)

ขั้น ตอนการการเขียนคำสั่งให้กับเฟรม (Frame)
ขั้นที่ 1 คลิกเฟรมที่ต้องการใส่คำสั่งสคริปต์ (หมายเลข 1)


ขั้นที่ 2 เขียนคำสั่งที่ต้องการ
กรณีอยู่ใน Normal Mode ทำได้โดย คลิกเครื่องหมายบวก (หมายเลข 2 ) แล้วคลิกเลือกคำสั่งที่ต้องการ


ขั้นที่ 3 ผลที่ได้จากการใส่คำสั่ง (หมายเลข 4 )

scr003

4. กรณีอยู่ใน Expert Mode สามารถเขียนคำสั่งได้โดยตรง (หมายเลข5)

scr004
5. เมื่อต้องการลบคำสั่งออก ทำได้โดยคลิกเครื่องหมายลบ (หมายเลข 6)
หรือหากอยู่ใน Expert Mode ทำการแดรกเมาส์คลุมคำสั่งที่ต้องการลบ แล้วกดปุ่ม Delete


การเขียนคำสั่งให้กับปุ่ม
         การเขียนคำสั่งให้กับปุ่ม คือการกำหนดแอคชั่นให้ปุ่ม ให้ตอบสนองต่อการกระทำ เช่น เวลาคลิกลาก (Drag) หรือวางเมาส์ไว้เหนือปุ่ม ซึ่งต้องใส่คำสั่งไว้ภายในตัวควบคุม on พร้อมทั้งระบุเหตุการณ์หรืออีเวนต์ (event) ของเมาส์หรือคีย์บอร์ด ตามด้วยคำสั่งที่ต้องการ
โดยมีรูปแบบคำสั่ง คือ


ขั้นตอน การเขียนคำสั่งให้กับปุ่ม (โหมด Normal)

1. คลิกที่ปุ่ม แล้วใส่คำสั่งที่หน้าต่างพาเนล ActionScript ตามต้องการ  

4. คลิกเครื่องหมายบวก (หมายเลข 1)

b04.jpg

5. เลือกเมนูคำสั่งที่ต้องการ เช่น ต้องการให้เปิดเว็บ (หมายเลข 2)

b05.jpg

6. ในบางคำสั่ง จะต้องมีการกรอกรายละเอียดที่ต้องการ (หมายเลข 3)

b06.jpg



แนวทางการเขียน ActionScript
สำหรับการเขียนใน Expert Mode จะมีรูปแบบการเขียนแอคชั่นสคริปต์ ให้กับเฟรมเพื่อควบคุมปุ่มและมูฟวี่คลิป ดังนี้


ตัวอย่างเช่น การเขียนสั่งงานให้กับปุ่มชื่อ button1 เวลาถูกคลิก จะใช้รูปแบบ คือ


ขั้น ตอนการเขียนด้วยหน้าต่าง Expert Mode
(หมายหตุ : ดูขั้นตอนการเขียนโดยใช้หน้าต่าง Normal Mode ได้ที่ การเขียนคำสั่งให้กับปุ่ม)

1. คลิกที่ปุ่มให้แอคทีฟ (Active)  

 

2. เปิดหน้าต่างแอคชั่น แบบ Expert Mode  หรือถ้าเปิดแล้ว ให้คลิกที่ปุ่ม  scriptAssist1 เปรียบเทียบหน้าต่าง Expert Mode และ Normal Mode  

ex1

nor1

3. คลิกเครื่องหมายบวก  (หมายเลข 1)

scriptAssist2.jpg

4. คลิกเลือกกลุ่มคำสั่งที่ต้องการ (หมายเลข 2)

scriptAssist3.jpg

5. ดับเบิลคำสั่ง หรืออีเวนต์ที่ต้องการ (หมายเลข 3)

scriptAssist4.jpg

6. ทำซ้ำข้อ 3-5 เพื่อเพิ่มเติมคำสั่งอื่นๆ อีก ตามต้องการ



คำสั่งพื้นฐาน Action Script

คำสั่ง On Mouse Event ใช้กำหนดเหตุการณ์ ของเมาส์หรือคีย์บอร์ด ซึ่งจะมีผลชุดคำสั่งที่อยู่ในบรรทัดต่อๆ มาที่อยู่ในเครื่องหมาย { } ถูกดำเนินการ โดยทุกครั้งที่กำหนดคำสั่งให้กับปุ่ม โปรแกรมจะสร้างคำสั่ง On ขึ้นมารองรับซึ่งจะมีอีเวนต์ที่ประกอบด้วย

on01


คำสั่ง Go To เป็นคำสั่งที่ใช้ควบคุมการแสดงของมูฟวี่ โดยสั่งให้หัวอ่าน (Play Head) กระโดดไปยังตำแหน่งที่ต้องการ ได้แก่

on02

on03

on04

on05


ตัวอย่าง....................

on06
จากภาพ เป็นการกำหนดให้หัวอ่าน (Play Head) กระโดดไปหยุดที่ Scene 2 เฟรมที่ 10