เอกสารประกอบการสอน

คอมพิวเตอร์กราฟิกประเภทการสร้างภาพเคลื่อนไหว

(Computer Graphics for Animation)

แผนการสอนที่ 16

Scene และ Action Script

จุดประสงค์การเรียนรู ้

1. นักเรียนมคีวามรูค้วามเข้าใจเกี่ยวกับ Scene ในโปรแกรม

Adobe Flash

2. นักเรียนมคีวามรูค้วามเข้าใจเกี่ยวกับ Action Script ในโปรแกรม

Adobe Flash

3. นักเรียนสามารถสร้างงานภาพเคลื่อนไหวที่ประกอบด้วย Scene และ

Action Script ได้

การท างานเกี่ยวกับ Scene

Scene (ซีน) คอื การแบ่งภาพเคลื่อนไหวหรือหนังของเราออกเป็นตอนหรือฉากย่อยๆ

ช่วยให้เราจัดการชิ้นงานที่มีขนาดใหญ่ ท าให้สามารถท างานได้สะดวกมากยิ่งขึ้น ขณะเราเริ่ม

ท างานในสเตจ เราจะเริ่มต้นที่ซีนแรก หรือ Scene 1 อยู่แล้ว สังเกตได้จากมุมบนของสเตจ

งาน

การเรียกใช้ Scene ท าได้โดยคลิกเมนู Window > Other Panels > Scene หรอืกดคีย์

ลัด Shift+F2

แสดงชื่อ Scene

ที่ใช้งานอยู่

1

2

3

1 Add Scene การเพิ่มซีน หรือเลือกค าสั่ง Insert > Scene

2 Duplicate Scene การคัดลอกซีน จะเกิดซีนที่มีรายละเอียดเหมอืนซีนเดิมทุกอย่าง

3 Delete Scene การลบซีน

การเปลี่ยนชื่อ Scene

ส าหรับในโปรแกรมจะตั้งช่ือตามล าดับ คอื Scene 1 , Scene 2 , Scene 3 ไปเรื่อยๆ ท า

ให้อาจสับสนกับชื่อซีนกับงานได้ การตั้งชื่อซีนจะท าให้สามารถจ าได้ง่ายขึ้น โดยสามารถ

เปลี่ยนชื่อซีนได้จากการดับเบิลคลิกที่ซีน แล้วพิมพชื์่อตามตอ้งการ

การเปลี่ยนล าดับของ Scene

โปรแกรม Flash จะแสดงซีนตอ่เนื่องจากบนลงล่างตามล าดับในรายการ หากต้องการ

แก้ไขล าดับการแสดงของแตล่ะซีน สามารถท าได้โดย แดรกเมาส์ในซีนที่ต้องการเปลี่ยนล าดับ

แล้วไปวางในต าแหน่งที่ตอ้งการ

ดับเบิลคลิก เพื่อ

ตั้งช่ือ Scene

แดรกเมาส์ ลากซีน

malon มาไว้ล าดับที่ 2

ActionScript

ActionScript คือ ค าสั่งที่ใช้ในการเขียนโปรแกรมเพื่อควบคุมการท างานของชิ้นงาน

โปรแกรม Flash เช่น การคลิกปุ่ม การควบคุมการเล่น การหยุดเล่น การลิงค์ไปยังซีนต่างๆ

การใส่ ActionScript สามารถใส่ได้ 2 ที่คอื ใส่ที่คีย์เฟรม บน Timeline และ ใส่ที่ปุ่ม Button

การใส่ ActionScript ที่ Keyframe

วิธีการใส่ ActionScript ที่ Keyframe ท าได้โดยคลิกขวาที่คีย์เฟรมที่ต้องการใส่ Action

Script แล้วเลือกค าสั่ง Action เพื่อเปิดหนา้ต่าง ActionScript แล้วเลือกค าสั่งต่างๆ ที่ตอ้งการ

ตัวอย่าง การใส่ ActionScript ให้ชิน้งานหยุดในเฟรมที่ตอ้งการ

1. เปิดไฟล์ Action-melon.fla จาก D :\ ExFlashFile \ Action-melon.fla เพื่อใช้เป็น

งานต้นฉบับ

2. สร้างเลเยอร์ใหม่ ตั้งชื่อวา่ stop

3. คลิกขวาที่เฟรมที่ 25 เลือกค าสั่ง Insert Keyframe

2

3

4. คลิกขวาที่คีย์เฟรมที่สร้างขึ้น เลือกค าสั่ง Action

5. จะมี Dialog box ของ ACTIONS-FRAME จากนั้นเลือก Global Functions >

Timeline Control จากนั้นดับเบิลคลิกที่ค าสั่ง Stop ค าสั่งนี้จะท าให้หนังของเรา

หยุดเมื่อเล่นมาถึงเฟรมที่ 25

4

5

6. ปิด Dialog box ของ ACTIONS-FRAME จะเกิดสัญลักษณ์ตัว a ที่เฟรม 25 เมื่อ

หนังของเราเล่นมาถึงตรงนีห้นังก็จะหยุด

7. ทดสอบการเคลื่อนไหวด้วยการกด Ctrl+Enter (ดูไฟล์งานตัวอย่างได้จากไฟล์

Action-melon2.SWF)

Save งานตั้งชื่อว่า Ex_Actionframe_ชื่อ_เลขที_่เลขห้อง

6

7

การใส่ ActionScript ที่ปุ่ม (Button)

เริ่มต้นด้วยการสร้างปุ่มกดแบบพื้นฐาน ซิมโบลแบบปุ่ม (Button) คือ ชิมโบลที่

ส าหรับใช้ท าเป็นปุ่มกด ใช้เชื่อมโยงข้อมูลกันระหว่าง Scene หรือ ควบคุมการท างานของมูฟวี่

นอกจากนั้นยังตอบสนองการท างานของเมาส์ได้ด้วย

1. เปิดไฟล์ Action-button.fla จาก D:\ ExFlashFile \ Action-button.fla เพื่อใช้

เป็นงานต้นฉบับ

2. สร้างเลเยอร์ใหม ่ตั้งชื่อว่า button

3. วาดรูปเพื่อสรา้งเป็นปุ่มหยุดเล่น ตามตัวอย่างด้วยเครื่องมือวาดรูปแบบต่างๆ

พิมพ์ขอ้ความ STOP ลงในปุ่มน้ัน

4. สร้างรูปนี้ให้เป็นปุ่ม โดยใช้เครื่องมือ Selection Tool เลือกรูปปุ่มทั้งหมด แล้ว

เลือกเมนู Modify > Convert to Symbol… ตั้งชื่อ “stop” ก าหนด Type เป็น

Button

2

3

5. จะได้ symbol แบบ Button ให้ดับเบิลคลิกที่ Symbol “stop” จะเข้ามาในหน้า

scene ของ stop ประกอบด้วย 4 เฟรม คือ

Up แสดงเมื่อเปิดมาครั้งแรก Over เมื่อเลื่อนเมาสม์าสัมผัสปุ่ม

Down เมื่อกดลงบนปุ่ม Hit พืน้ที่ในการคลิกเมาส์

ดับเบิลคลิกที่ button

stop แสดงการเขา้สู่

โหมดแกไ้ข

6. คลิกขวาที่ Over เลือกค าสั่ง Insert Keyframe จากนั้นเปลี่ยนสีพื้นของปุ่มเป็น

สีแดง

7. คลิกขวาที่ Down เลือกค าสั่ง Insert Keyframe จากนั้นเปลี่ยนสีพื้นของปุ่ม

เป็นสีชมพู

8. คลิกขวาที่ Hit เลือกค าสั่ง Insert Keyframe จากนั้นวาดรูปสี่เหลี่ยมคลุมพื้นที่

ปุ่มทั้งหมด

9. กลับสู่โหมดปกติ (กลับสู่หน้า stage งาน) ด้วยการกดที่ Scene1

6

7 8

Up Over

Down Hit

คลิก Scene1 เพื่อ

กลับสูโ่หมดปกติ

State งานปกต ิ

10. ใส่ Action ที่ปุ่ม STOP โดยคลิกขวาที่ปุ่ม แล้วเลือกค าสั่ง Actions

11. ดับเบิลคลิกที่ค าสั่ง stop เพื่อใส่ค าสั่งหยุด ใหแ้ก่ปุ่มนี้ โดยต้องสังเกต ปุ่ม

Script Assist ต้องถูกกดลง

คลิกขวาที่ปุ่ม STOP

ดับเบลิคลิกที่ stop

ปุ่ม Script Assist

ถูกกด

สร้างปุ่ม Play ในงานของนักเรียน เพื่อท าให้หนังของเราเล่น (หากจ าขั้นตอนการ

สร้างปุ่มไม่ได้ให้ย้อนกลับไปดูตั้งแตข่้อ 3-9)

ใส่ Action : play (วิธีการเดียวกับการท าปุ่ม stop ข้อ10-11) โดยเลือก Global

Functions > Timeline Control > play

12. สร้างเลเยอร์ใหม่ตั้งชื่อ Action , Insert Keyframe ไว้ในเฟรมสุดท้าย จากนั้น

คลิกขวา เลือก Action > Global Functions > Timeline Control > goto

ก าหนดค่าเพื่อให้หนังของเราวิ่งวนจนกว่าเราจะกดปุ่มใดๆ ดังนี้

เลือกตัวเลือก Go to and play

Scene : current scene

Type : Frame Number

Frame : 1

ดับเบลิคลิกที่ play

13. สร้าง Scene ใหม่ขึ้นมา ตั้งชื่อ Scene ว่า page2 จากนั้น สร้างข้อความ

Page2 ลงใน Scene นี ้จากนั้น สร้างเฟรมนีใ้ห้ยาว 80 เฟรม

14. กลับมาท างานที่ Scene1 ลากปุ่ม จาก LIBRARY ใส่ไปในงาน

(เลเยอร์ button)

หากหนังของเรามีหลายซีนหรือหลายฉาก เราสามารถท าปุ่มให้คลิกแล้วไปยังซีน

ที่เราต้องการด้วย Action : goto

15. คลิกขวาที่ปุ่ม next เลือก Global Functions > Timeline Control > goto แล้ว

เลือกซีน : page2

ในหนังของเราก็จะมีการใส่ Action ปุ่ม 3 ปุ่ม คือ

1. ปุ่ม Stop เมื่อเรากด หนังของเราจะหยุด

2. ปุ่ม Play เมื่อเรากด หนังของเราจะกลับมาเล่น

3. ปุ่ม Next เมื่อเรากดปุ่มนี้ หนังของเราจะกระโดดไปยัง Scene ถัดไป

ดับเบลิคลิกที่ goto เลือกซนีที่ต้องการไป

1 2

ทดสอบการเคลื่อนไหวด้วยการกด Ctrl+Enter (ดูไฟล์งานตัวอย่างได้จากไฟล์ Action-button-

end.SWF) เมื่อกดที่ปุ่ม STOP หนังของเราจะหยุดเล่น

Save งานตั้งชื่อว่า Ex_Actionbutton_ชื่อ_เลขที_่เลขห้อง

ใบงานที่ 7

สร้างงานภาพเคลื่อนไหวประกอบด้วย Scene และ Action Script

ค าสั่ง : ให้นักเรียนสร้างงานภาพเคลื่อนไหวที่ประกอบด้วย

- การแบ่ง Scene

- มีการใส่ Action Script

* Save งานไว้ใน D:\วิชาเลือกปวช.3_2560 ตั้งชื่อว่า 07Scene_ชื่อ_เลขที_่เลขห้อง

* ก าหนดส่งงาน ภายในคาบเรียน