ถ้าต้องการสร้างซิมโบลให้มีลักษณะเป็นภาพเคลื่อนไหว

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

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

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

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

วิธีสร้างซิมโบลทำได้หลายวิธี

วิธีที่ง่ายที่สุด คือ การแปลงวัตถุที่เราสร้างไว้บนสเตจมาเป็นซิมบอล มีขั้นตอนดังนี้
1. วาดรูปซิมโบลนั้นๆ เช่น วงกลม

2. Selection tool คลิกเลือก หรือคลิกลากคลุมวัตถุ

3. แล้วเลือกคำสั่ง Modify > Convert to symbolหรือคลิกขวาที่วัตถุแล้วเลือก Convert to symbol หรือ กดปุ่ม F8 ที่แป้นพิมพ์

จะได้หน้าต่าง Convert To Symbol   ดังรูป

4. เลือกชนิด Movie Clip/Bottun/Graphic
5. ตั้งชื่อของซิมโบล วงกลม
ุ6. คลิกปุ่ม  OK
7. จะได้ซิมโบลวงกลมไปอยู่ในไลบรารี่ ดังรูป

อีก 1 วิธี คือการสร้างขึ้นมาใหม่
1. คลิกที่เมนู > Insert > New Symbol ( Ctrl + F8 ) ดังรูป

หลังจากที่คลิก เลือก New Symbol แล้วจะได้ผลรับดังนี้

2. Name ชื่อของ Symbol ที่จะนำมาใช้งาน การตั้งชื่อควรสอดคล้องกับงานที่ทำเพื่อให้จำง่ายขึ้น
3. เลือก Type  รูปแบบของการใช้งาน Symbol ที่นำมาใช้ในการสร้างงาน เช่น Graphic
4. คลิกที่ปุ่ม OK ดังรูป
จะได้หน้าจอแก้ไขซิมบอลต้นไม้ดังรูป

5. ทำการวาดรูปซิมโบลต้นไม้

6. ไม่ต้องตกใจหากไม่เห็นต้นไม้ ให้ดึงต้นไม่ออกมาจากไลบรารี่มาวางที่สเตจ ดังรูป

Chapter 7 : Symbol และ Instance

การสร้าง Movie ที่มีประสิทธิภาพนั้น เราควรจะแบ่งตัวละครหรือเนื้่อหาออกเป็นส่วน ๆ โดยสร้างเป็นซิมโบล ซึ่งนอกจากจะทำให้ไฟล์มีขนาดเล็กลงแล้ว ยังง่ายต่อการนำมาใช้ รวมทั้งการแก้ไขและปรับแต่งด้วย

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

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

      การสร้างซิมโบล จะเกี่ยวข้องกับ Library ซึ่งเป็นที่เก็บซิมโบล การเปิดใช้งาน Library  ทำได้โดย กดปุ่ม Ctrl+L หรือ F11 การสร้างซิมโบล  (Symbol) สามารถทำได้ 2 แบบคือ การสร้างจากซิมโบลเปล่า และ สร้างจากวัตถุที่มีอยู่แล้ว

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

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

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

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

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

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

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

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

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

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

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

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

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

2. คลิกชื่อซิมโบลในหน้าต่างไลบรารี ที่ต้องการใช้
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 จะแสดงผลดังภาพ

ตัวอย่างการสร้าง Movie Clip

ขั้นที่ 1 คลิกที่เฟรมที่ 1 แล้ววาดรูป ล้อรถลงไป (หรือจะ Import รูปภาพ ก็ได้) ดังรูป

ขั้นที่ 2 ใช้ Selection Tool (ลูกศรสีดำ) ลากครอบเพื่อเลือกทั้งหมด แล้วกดปุ่ม F8 หรือ คลิกเลือกเมนู Modify > Convert to Symbol ตั้งชื่อ “wheel” เลือกชนิดซิมโบลแบบ Movie Clip เพื่อให้วัตถุสามารถเคลื่อนไหวได้ในตัวของมันเอง ในหน้าต่าง Library จะมีซิมโบลรูปล้อเกิดขึ้น

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

ขั้นที่ 4 ที่ Stage คลิกลากซิมโบล wheel ในไลบรารี่มาวางประกอบกับตัวรถ ตอนนี้จะได้วัตถุรูปร่างเหมือนรถแต่ยังไม่ได้เป็นซิมโบลชิ้นเดียวกัน จะต้องรวมซิมโบลตัวรถกับล้อรถให้เป็นซิมโบลเดียวก่อน โดยการใช้ลูกศรสีดำ ลากครอบวัตถุทั้งหมด แล้วกด F8 อีกครั้งเพื่อสร้างซิมโบลใหม่ จากนั้นก็ตั้งชื่อ “Red Car” เป็นอันเสร็จพร้อมในไปใช้งาน      

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

ขั้นที่ 6 คลิกขวาที่เฟรมที่ 1 แล้วเลือก Create Motion Tween แล้วคลิกเฟรมที่ 10 กดปุ่ม F6 เพื่อ Insert Keyframe

       แล้วคลิกเฟรมใดเฟรมหนึ่งระหว่าง 1 - 10 แล้วกำหนดค่า Rotate ใน Properties  เลือก CCW (หมุนทวนเข็มนาฬิกา)

ขั้นที่ 7 คลิกที่คำว่า Scene 1 บนแถบ TimeLine แล้วกด Ctrl+Enter เพื่อทดสอบ จะปรากฏรูปรถที่มีล้อกำลังหมุนหยุดอยู่กับที่เฉยๆ

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

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

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

      เฟรมที่ 1 

      เฟรมที่ 40

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

ตัวอย่างการสร้างปุ่ม (Button)

ปุ่มคือ Interactive movie clip ที่ประกอบด้วยเฟรม 4 เฟรม ซึ่งภาพในแต่ละเฟรมจะแสดงออกมาตามสถานะที่ถูกกระทำจากเมาส์ โดยเฟรมต่าง ๆ มีดังนี้

• เฟรม Up เป็นเฟรมที่จะแสดงออกมา เมื่อ Mouse Pointer อยู่ภายนอกขอบเขตของปุ่ม
• เฟรม Over เป็นเฟรมที่จะแสดง เมื่อ Mouse Pointer เลื่อนมาอยู่ภายในขอบเขตของปุ่ม
• เฟรม Down เป็นเฟรมที่จะแสดง เมื่อปุ่มถูกคลิก
• เฟรม Hit เป็นเฟรมที่ใช้สำหรับกำหนดขอบเขตของปุ่ม เพื่อให้มีการตอบสนองต่อเมาส์ใน 3 สถานะข้างต้น ดังนั้นเนื้อหาที่อยู่้ในเฟรมนี้จะไม่ถูกแสดงเมื่อมีการนำปุ่มไปใช้

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

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

ขั้นตอนที่ 3 วาดออบเจ็คและใส่ข้อความในปุ่มที่เฟรม Up

ขั้นตอนที่ 4 คลิกเฟรม Over กดปุ่ม F6 แล้วแก้ไขออบเจ็คหรือข้อความในปุ่ม เช่น เปลี่ยนสีพื้นหรือสีข้อความ

ขั้นตอนที่ 5 คลิกเฟรม Down กดปุ่ม F6 แล้วแก้ไขออบเจ็คหรือข้อความในปุ่ม เช่น เปลี่ยนสีพื้นหรือสีข้อความ

ขั้นตอนที่ 6 คลิกเฟรม Hit กดปุ่ม F6 โดยไม่ต้องแก้ไขอะไร

ขั้นตอนที่ 7 เมื่อเสร็จขั้นตอนแล้ว หากต้องการทดสอบผลลัพธ์ ให้คลิกลากซิมโบลปุ่มจากไลบรารีออกมาวางบนสเตจ จากนั้นกดปุ่ม Ctrl+Enter

<---- ผลลัพธ์เมื่อเมาส์อยู่นอกขอบเขตปุ่ม

<---- ผลลัพธ์เมื่อเมาส์อยู่ำภายในขอบเขตปุ่ม

<---- ผลลัพธ์เมื่อคลิกเมาส์บนปุ่ม