Post on 05-Oct-2020
เอกสารประกอบการสอน
คอมพิวเตอร์กราฟิกประเภทการสร้างภาพเคลื่อนไหว
(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_ชื่อ_เลขที_่เลขห้อง
* ก าหนดส่งงาน ภายในคาบเรียน