การสร้างซิมบอล

       ซิมบอล (Symbol) คือ การนำวัตถุที่เป็นภาพกราฟิก ปุ่มกด หรือมูฟวี่ มากำหนดเป็นต้นแบบ เพื่อนำไปใช้เป็นส่วนประกอบในชิ้นงาน โดยทุกซิมบอลที่สร้างขึ้นจะถูกเก็บไว้ในพาเนล Library ของไฟล์ปัจจุบันและสามารถนำซิมบอลไปใช้งานได้อย่างไม่จำกัดในไฟล์งานเดียวกัน
       สำหรับซิมบอลมีอยู่ 3 ประเภท โดยจะมีหน้าที่แตกต่างกันไป ได้แก่
       1. Graphic ใช้ทำเป็นภาพนิ่งไปประกอบในฉาก
       2. Movie clip ใช้ทำเป็นภาพแอนิเมชันเคลื่อนไหวได้
       3. Button ใช้ทำเป็นปุ่มกดในแบบต่างๆ
การสร้างซิมบอล (Symbol) สามารถทำได้ 2 แบบ คือ การสร้างจากซิมบอลเปล่า และ สร้างจากวัตถุที่มีอยู่แล้ว

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

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


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


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


การสร้างอินสแตนซ์

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


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


การแปลงวัตถุ (object) ให้เป็นซิมบอล (symbol)

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


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


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


       หมายเหตุ สามารถดูซิมบอลที่สร้างได้จากหน้าต่าง 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/flash/content/symbol.html




การสร้างซิมบอล