การใช้งาน Symbol และ Instance

ซิมโบล (Symbol)

ซิมโบล (Symbol) คือ กราฟิก ปุ่ม หรือ มูฟวี่คลิปที่เราสร้างขึ้นมาเป็นต้นแบบในครั้งแรก จากนั้น

ก็จะสามารถนำไปใช้ได้อย่างไม่จำกัดตลอดในมูฟวี่เดียวกัน และมูฟวี่อื่นๆ ซิมโบลหนึ่งๆ อาจรวมถึง

อาร์ตเวิร์คที่นำ เข้ามาจากโปรแกรมอื่น ทุกซิมโบลที่สร้างขึ้นจะเป็นส่วนหนึ่งในไลบรารีของไฟล์

ปัจจุบัน ซึ่งซิมโบล แบ่งเป็น 3 ประเภท คือ 

         1. Graphic
         2. Button
         3. Movie Clip

Library เป็นที่เก็บซิมโบล การเปิดใช้งาน Library  ทำได้โดย กดปุ่ม Ctrl+L

การสร้างซิมโบล (Symbol สามารถทำได้ 2 แบบคือ การสร้างจากซิมโบลเปล่า และ สร้างจากวัตถุที่มีอยู่แล้ว

แบบที่ 1 สร้างซิมโบลจากซิมโบลเปล่า

ขั้นตอนที่ 1คลิกเมนู Insert > New Symbol หรือ กด Ctrl+F8

 

ขั้นตอนที่ 2 ตั้งชื่อซิมโบล และเลือกชนิดซิมโบลตามต้องการ แล้วคลิก OK

ขั้นตอนที่ 3 เขียนภาพวัตถุตามต้องการ

  

อินสแตนซ์ (Instance)

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

การสร้างอินสแตนซ์
1. เปิดพาเนลไลบรารี โดยคลิกเมนู Window > Library หรือ กด Ctrl+L หรือ กด F11 จะได้หน้าต่าง 
ไลบรารี 

ดังภาพ

  

2. คลิกชื่อซิมโบลในหน้าต่างไลบรารี ที่ต้องการใช้
3. ลากซิมโบลไปวางบนสเตจ

2. การแปลงวัตถุ (object) ให้เป็นซิมโบล (symbol)
การแปลงจากส่วนประกอบที่เลือกไว้ หรือ วัตถุที่มีอยู่ ให้เป็นซิมโบล

ขั้นตอนที่ 1 เขียนภาพตามต้องการที่ stage

  

ขั้นตอนที่ 2 คลิกเลือกภาพ (หรือถ้าภาพอยู่ห่างกัน ให้ลากคลุมทั้งหมด) แล้วคลิกขวา
และคลิกที่เมนู Convert to Symbol 

ขั้นตอนที่ 3 ตั้งชื่อซิมโบล แล้วเลือกชนิดของซิมโบลที่ต้องการ

  

  

หมายเหตุ.... ดูซิมโบลที่สร้างได้จากหน้าต่าง Library ซึ่งเปิดหน้าต่างได้จาก เมนู Window > Library 

หรือ กด F11 ซึ่งจะพบหน้าต่างดังตัวอย่างในทำนองเดียวกัน สามารถสร้างซิมโบลแบบ Button และ 

Graphic ได้ดังขั้นตอนที่ 1-3 เพียงแต่เลือกชนิดที่ขั้นตอนที่ 3 หากทำทั้ง 3 ซิมโบล จะได้ดังภาพ

  

ตัวอย่าง การนำซิมโบล (Symbol) และ อินสแตนซ์ (Instance) มาใช้

1. สร้างซิมโบลแบบ Movie Clip ตั้งชื่อ arrow

 

2.วาดรูปลูกศร

3. กำหนดให้ลูกศรเคลื่อนไหว แบบ Motion Tween ดังภาพ

  4. กลับมาทำงานที่หน้า stage โดยคลิกที่ scene1

5. ที่หน้า stage เปิดหน้าต่าง Library โดย คลิ เมนู Window > Library หรือ กด F11 แล้วจับอินสแตนซ์ 
ที่ชื่อ arrow มาวางที่หน้า stage

6. นำอินสแตนซ์มาวางหลายๆ รูป โดยปรับขนาดและทิศทางตามต้องการ

7. เมื่อทดสอบ Movie โดยการกด Ctrl+Enter จะได้ภาพการเคลื่อนไหวดังตัวอย่าง

ตัวอย่างการใช้งานซิมโบลซ้อนซิมโบล

ขั้นที่ 1 คลิกที่เฟรมที่ 1 แล้ววาดรูป ล้อรถลงไปดังรูป

 

ขั้นที่ 2 ใช้ Selection Tool (ลูกศรสีดำ) ลากครอบเพื่อเลือกทั้งหมด แล้วกดปุ่ม F8 หรือ คลิกเลือกเมนู 

Modify > Convert to Symbol ตั้งชื่อให้เรียบร้อย “ล้อรถ” เลือกชนิดซิมโบลแบบ Movie Clip เพื่อให้

วัตถุสามารถเคลื่อนไหวได้ในตัวของมันเอง

ในหน้าต่าง Library จะมีซิมโบลรูปล้อเกิดขึ้น   

ขั้นที่ 3 ลบรูปล้อออกจากสเตจแล้ววาดรูปตัวรถขึ้นมา จากนั้นทำให้เป็นซิมโบลด้วยวิธีการเดิมแต่คราว
นี้ตั้งชื่อซิมโบลเป็น “ตัวรถ”

ขั้นที่ 4 วาดซิมโบล ล้อรถในไลบรารี่มาวางดังรูป ตอนนี้จะได้วัตถุรูปร่างเหมือนรถแต่ยังไม่ได้เป็นซิมโบล
ชิ้นเดียว

กันจะต้องรวมซิมโบล ตัวรถกับล้อรถให้เป็นซิมโบลเดียวก่อน

       

ขั้นที่ 5 รวมซิมโบลตัวรถกับล้อรถให้เป็นซิมโบลเดียวโดยการใช้ลูกศรสีดำ ลากครอบวัตถุทั้งหมด

แล้วกด F8 อีกครั้งเพื่อสร้างซิมโบลใหม่จากนั้นก็ตั้งชื่อ “รถยนต์” เป็นอันเสร็จพร้อมในไปใช้งาน

เมื่อทำซิมโบลเสร็จจะได้ซิมโบลรูปรถขึ้นมาในไลบรารี่ดังรูป

ขั้นที่ 6 ทำให้ล้อหมุนได้ โดยดับเบิ้ลคลิกเข้าไปที่ซิมโบลล้อรถ สังเกตที่แถบ Timeline

  

ขั้นที่ 7 คลิกขวาที่เฟรมที่ 1 แล้วเลือก Create Motion Tween (ตอนนี้เราทำงานอยู่ในซิมโบลล้อรถ)

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

คลิกที่เฟรมที่ 1 จะมี Properties ขึ้นมา  ช่อง Rotate เลือก CCW (หมุนทวนเข็มนาฬิกา)

ขั้นที่ 8 คลิกที่คำว่า Scene 1 บนแถบ TimeLine แล้วกด Ctrl+Enter เพื่อทดสอบ

จะปรากฏรูปรถที่มีล้อกำลังหมุนหยุดอยู่กับที่เฉยๆ 

ขั้นที่ 9 กลับมาสู่หน้าต่างแก้ไข ให้คลิกขวาที่เฟรมที่ 1 แล้วเลือกคำสั่ง Create Motion Tween

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

ขั้นที่ 10 คลิกที่เฟรมที่ 1 แล้วย้ายรถไปวางไว้ด้านขวาของจอ แล้วคลิกที่เฟรมที่ 40 แล้วย้ายรถไปไว้ที่ด้าน

ซ้ายขอจอ

เฟรมที่ 1 

เฟรมที่ 40

เสร็จแล้ว กดปุ่ม Ctrl+Enter หรือเลือกเมนู Control > Test Movie เพื่อดูตัวอย่างภาพเคลื่อนไหวที่เกิดขึ้น

ที่มา http://www.kroojan.com