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

ซิมโบลและอินสแตนซ์

การสร้าง Movie ด้วย Flash จำเป็นต้องเกี่ยวข้องกับ Symbol และ Instance ดังนั้นการศึกษาว่า Symbol และ Instance คืออะไร มีความสำคัญอย่างไร ใช้งานอย่างไร จึงเป็นสิ่งสำคัญมาก อย่างไรก็ตาม Flash มีการกำหนดประเภทของวัตถุไว้หลากหลายลักษณะ โดยสามารถแบ่งได้ดังนี้

• Dot หรือ Part เป็นส่วนย่อยที่สุดของวัตถุ มีลักษณะเป็นจุดเล็กๆ
• Shape เป็นวัตถุที่เกิดจาก Dot หลาย Dot มาผสมกัน โดยจะเรียกวัตถุที่สร้างด้วยเครื่องมือสร้างกราฟิกพื้นฐานว่า Shape ยกเว้น Text Tool
• Group เป็น Shape หลายๆ ชิ้นที่รวมกันเป็นชุดเดียว เกิดจากคำสั่ง Modify, Group รวมทั้งข้อความจาก Text Tool
• Symbol เป็นวัตถุที่ถูกแปลงสภาพเพื่อพร้อมสร้าง Movie เกิดจากการแปลงวัตถุต่างๆ รวมถึงการสร้าง Button, Movie Clip และการนำเข้าภาพจากแหล่งอื่นๆ สามารถตรวจสอบได้ว่าไฟล์ที่ทำงานมี Symbol อะไร ประเภทใด จาก Library Panel (เรียกด้วยคำสั่ง Window, Library)
• Instance เป็น Symbol ที่นำมาใช้งานบน Stage

6.1 ซิมโบล (Symbol)

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

• Graphic เป็น Symbol ภาพนิ่ง
• Button เป็น Symbol ปุ่มกดที่สามารถคลิกได้
• Movie Clip เป็น Symbol ภาพเคลื่อนไหว

เมื่อนำ Symbol จาก Library มาใช้งานบนStage เราจะเรียก Symbol ที่เรานำมาวางไว้บนStage ว่า Instance ซึ่ง Instance เป็นเพียงสำเนาของ Symbol เราสามารถเรียก Instance มาใช้งานบน Stage ได้อย่างไม่จำกัดและถ้าเราทำการปรับเปลี่ยน Instance ในลักษณะต่างๆ จะไม่ส่งผลต่อ Symbol

การนำ Instance มาใช้งานซ้ำๆ กันบน Stage มีข้อดีคือจะช่วยให้ File Movie ของเรามีขนาดเล็กลงกว่า การที่เราทำการสร้างรูปทรงแบบเดียวกันขึ้นมาใหม่บน Stage

1) ตรวจสอบ Symbol สำหรับไฟล์

เมื่อมีการเปิดไฟล์หรือสร้างไฟล์ใดๆ บางครั้งอาจจะไม่ทราบว่าไฟล์นั้นๆ มี Symbol ใดบ้าง โปรแกรมมีคำสั่งในการตรวจสอบ Symbol โดยเปิด Library Panel ด้วยเมนู Window > Library

Library ที่มี Symbol

2) แปลงวัตถุเป็น Symbol

การสร้างภาพเคลื่อนไหวแบบ Motion Tweening หรือการทำระบบโต้ตอบ จำเป็นต้องทำงานกับ Symbol ดังนั้นวัตถุหรือภาพกราฟิกใดๆ ก็ตาม จะต้องแปลงสภาพจาก Shape, Group หรือ Picture ให้เป็น Symbol ก่อนและจะต้องเลือก Behavior ของ Symbol ให้ตรงกับลักษณะการใช้งาน เช่น Symbol ที่ต้องการกำหนดให้คลิกได้เพื่อสั่งงานใดๆ จะต้องกำหนดเป็น Button ภาพใดๆ ที่มีการเคลื่อนที่หรือการเคลื่อนไหว เช่น ล้อรถที่ต้องหมุน ควรกำหนดเป็น Movie Clip หรือ Symbol ที่แสดงเป็นเพียงภาพนิ่ง ก็เลือกเป็น Graphic เป็นต้น

การแปลงวัตถุให้เป็น Symbol มีหลักการดังนี้

• วาด/สร้าง หรือนำเข้าวัตถุ
• เลือกวัตถุ
• เลือกคำสั่ง Modify > Convert to Symbol… หรือกดปุ่ม <F8>

• ตั้งชื่อในช่อง Name แล้วเลือก Behavior ให้เหมาะสม
• คลิกปุ่ม OK เพื่อยืนยันการแปลงวัตถุเป็น Symbol

3) การสร้าง Symbol

นอกจากการแปลงวัตถุให้เป็น Symbol ด้วยวิธีการดังข้างต้น ยังสามารถเข้าสู่โหมดการสร้าง Symbol ได้โดยตรง ซึ่งมีขั้นตอนดังนี้

• เลือกคำสั่ง Insert > New Symbol…
• ปรากฏจอภาพ Create New Symbol
• ตั้งชื่อ Symbol และเลือก Behavior จากนั้นคลิกปุ่ม OK ก็จะปรากฏจอภาพสร้างSymbol ที่มีหน้าตาคล้ายกับ Stage เกือบทุกอย่าง เพียงแต่จะมีสัญลักษณ์ + อยู่กึ่งกลางจอ เป็นการระบุตำแหน่งพิกัด 0,0 เพื่อให้สะดวกต่อการวางตำแหน่ง หรือสร้างวัตถุ
• เมื่อสร้างวัตถุให้กับ Symbol เรียบร้อยแล้วก็คลิกที่ Scene 1 เพื่อกลับสู่สภาวะการทำงานปกติ

• รายละเอียดการสร้าง Movie Clip และ Button Symbol จะกล่าวในหัวข้อถัดไปการสร้าง Symbol ใดๆ ควรยึดตำแหน่งสัญลักษณ์ + เป็นจุดเริ่มต้นของวัตถุ ตำแหน่งพิกัด 0,0

4) การสร้างซิมโบลชนิดต่างๆ

• การสร้างซิมโบลกราฟิก

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

1. คลิกเมนู Insert > New Symbol หรือกดปุ่ม Ctrl + F8 จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Create New Symbol ขึ้นมา
2. พิมพ์ตั้งชื่อซิมโบลลงในช่อง Name
3. ในส่วนของ Type ให้คลิกเลือก Graphic

1. คลิกปุ่ม เพื่อยืนยันคำสั่ง จากนั้นจะเข้าสู่โหมดแก้ไขซิมโบล
2. สร้างหรือนำเข้าออบเจ็กต์ที่ต้องการให้เป็นซิมโบล โดยจะปรากฏ

1. ที่ใช้เป็นจุดอ้างอิงในการวางซิมโบลขึ้นมา

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

• การสร้างซิมโบลปุ่ม

เมื่อสร้างปุ่มจะประกอบด้วยเฟรม Up, Over, Down และ Hit ซึ่งหากนำไปแสดงผลก็จะปรากฏขึ้นมาตามสถานะในการทำงานของเมาส์ โดยเฟรม Hit ใช้กำหนดขอบเขตที่ต้องการให้มีการตอบสนองต่อเมาส์ ดังนั้นเนื้อหาที่อยู่ในเฟรมนี้จะไม่ถูกแสดงผลออกมาเมื่อนำไปใช้งานจริง

1. คลิกเมนู Insert > New Symbol หรือกดปุ่ม Ctrl + F8 จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Create New Symbol ขึ้นมา

1. พิมพ์ตั้งชื่อซิมโบลลงในช่อง Name
2. ในส่วนของ Type ให้คลิกเลือก Button

1. คลิกปุ่ม เพื่อยืนยันคำสั่ง จากนั้นจะเข้าสู่โหมดแก้ไขซิมโบล
2. ที่เฟรม Up ให้สร้างปุ่มในสถานะปกติที่ยังไม่มีการคลิกเมาส์

1. คลิกเฟรม Over และกดปุ่ม F6 เพื่อสร้างคีย์เฟรมใหม่และคัดลอกออบเจ็กต์ที่อยู่ในเฟรม Up
2. แก้ไขออบเจ็กต์ของเฟรม Over เช่น เปลี่ยนสี เปลี่ยนรูปทรง เพื่อให้แสดงเป็นปุ่มในสถานะที่มีการนำเมาส์มาวาง

1. คลิกเฟรม Down และกดปุ่ม F6 เพื่อสร้างคีย์เฟรมใหม่และคัดลอกออบเจ็กต์ที่อยู่ในเฟรม Over
2. แก้ไขออบเจ็กต์ของเฟรม Down เพื่อให้แสดงเป็นปุ่มในสถานะที่มีการนำเมาส์มาคลิก

1. คลิกเฟรม Down และกดปุ่ม F6 เพื่อสร้างคีย์เฟรมใหม่และคัดลอกออบเจ็กต์ที่อยู่ในเฟรม Down
2. วาดรูปทรงกำหนดขอบเขตที่ต้องการให้มีการตอบสนองต่อเมาส์

1. คลิกชื่อซีนหรือคลิกปุ่ม เพื่อกลับสู่มูฟวี่หลัก
2. เลือกและลากเมาส์นำซิมโบลมาวางบนสเตจ จากนั้นจะปรากฏปุ่มขึ้นมา

1. คลิกเมนู Control > Test Movie หรือกดปุ่ม ctrl + Enter เพื่อทดสอบการทำงานผ่านทาง Flash Player

• การสร้างซิมโบลมูฟวี่คลิป

การสร้างซิมโบลมูฟวี่คลิปเพื่อให้มีการเคลื่อนไหวในลักษณะต่างๆ เช่น Frame by Frame, Motion Tween, Shape Tween จะต้องทำงานผ่านไทม์ไลน์ของมูฟวี่คลิป ซึ่งจะช่วยให้สามารถแบ่งภาพเคลื่อนไหวออกเป็นตอนย่อยๆ ได้

1. คลิกเมนู Insert > New Symbol หรือกดปุ่ม Ctrl + F8 จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Create New Symbol ขึ้นมา

1. พิมพ์ตั้งชื่อซิมโบลลงในช่อง Name
2. ในส่วนของ Type ให้คลิกเลือก Movie Clip

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

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

1. คลิกเฟรมที่ 1 ของไทม์ไลน์
2. ที่ Properties ในส่วนของ Tween ให้คลิกเลือก Motion จากนั้นจะปรากฏลูกศรแสดงการสร้าง

แอนิเมชั่นขึ้นมา

1. คลิกชื่อ ซีน หรือคลิกปุ่ม เพื่อกลับสู่มูฟวี่หลัก
2. เลือกและลากเมาส์นำซิมโบลมาวางบนสเตจ จากนั้นจะปรากฏมูฟวี่คลิปขึ้นมา

1. คลิกเมนู Control > Test Movie หรือกดปุ่ม ctrl + Enter เพื่อทดสอบการทำงานผ่านทาง Flash Player

คุณสมบัติของ Symbol Movie Clip

หากเราทำการเปลี่ยน ออบเจ็กต์ ให้กลายเป็น Movie Clip เราจะเห็นว่าใน Property Inspector ของ Instance จะมีตัวเลือกเพิ่มเติมคือ เราสามารถใส่ Filters และทำการ Blend ให้กับ Instance ของเราได้

☺ การใช้งาน Filters

ฟิลเตอร์คือ รูปแบบพิเศษใช้ในการตกแต่งออบเจ็กต์ เราสามารถใส่ Filters ให้กับ Instance ของ

Movie Clip, Button และตัวอักษร โดยเราเรียกใช้ Filters ผ่าน Property Inspector ในแท็บ Filters

รายละเอียดของ Filters ต่างๆ มีดังนี้

Drop Shadow : เป็นลักษณะการใส่เงาให้กับวัตถุ

Blur : เป็นลักษณะการปรับวัตถุให้เบลอ (ไม่คมชัด)

Glow : เป็นการสร้างแสงรัศมีจากขอบของวัตถุ

Bevel : เป็นการสร้างวัตถุให้มีความนูน

Gradient Glow : เป็นการไล่เฉดสีให้กับสีรัศมีของวัตถุ

Gradient Bevel : เป็นการไล่เฉดสีให้เงามีความนูนขึ้นมา

Adjust Color : เป็นการปรับแต่งสี ความคมชัด ความมืด – สว่างให้กับวัตถุ

การบันทึก Filters :

เราสามารถทำกับบันทึกค่าการปรับแต่ง

Filters ของเราไว้เพื่อการสะดวกต่อการเรียกใช้ ในครั้ง

ต่อ ๆไปได้โดยเลือกคำสั่ง Presets > Save As ...

6.2 Symbol และ Instance

วัตถุที่พร้อมสำหรับการสร้าง Movie ลักษณะต่างๆ รวมถึงการลงรหัส ActionScript เพื่อทำระบบโต้ตอบ (Interactive) เมื่อมีการสร้างและเก็บไว้ใน Library จะเรียกว่า Symbol แต่เมื่อนำ Symbol มาวางใช้งานบน Stage จะเรียกว่า Instance ทั้งนี้ Instance จะเปรียบเสมือนตัวแทนของ Symbol หากมีการแก้ไข Instance จะไม่มีผลกระทบต่อ Symbol แต่ถ้าแก้ไข Symbol ตัวแทนหรือ Instance ทุกตัวที่เกิดจาก Symbol นั้นๆ จะถูกแก้ไขตามไปโดยอัตโนมัติ

6.3 การเรียกใช้ Symbol

การนำ Symbol จาก Library มาใช้งาน กระทำได้โดยการเปิด Library Panel แล้วคลิกเลือก Symbol ชิ้นที่ต้องการ ลากมาวางบน Stage และ Symbol จะเปลี่ยนสถานะเป็น Instance ทันที

1) เรียกใช้ Symbol สำเร็จรูปของโปรแกรม

โปรแกรมได้เตรียม Symbol สำเร็จรูปเพื่อสะดวกต่อการสร้างงาน โดยเรียกใช้ได้จากเมนูคำสั่ง Window > Other Panels > Common Libraries… ซึ่งมี Library สำเร็จรูปให้เลือกใช้ได้ 3 กลุ่ม เมื่อเลือก Symbol ที่ต้องการได้แล้ว ก็สามารถนำมาวางบน Stage โดยการนำเมาส์ชี้ที่ Symbol นั้น แล้วลากออกจาก Library มาวางบน Stage ได้เลย และ Symbol จะเปลี่ยนสถานะเป็น Instance ทันที

2) เรียกใช้ Symbol จากไฟล์อื่น

จุดเด่นของ Symbol คือ สามารถโอนใช้งานได้กับไฟล์อื่น หรือเรียกใช้ Symbol จากไฟล์อื่น โดยมีหลักการดังนี้

• เปิดไฟล์เอกสารที่ต้องการสร้างงาน
• เรียกใช้คำสั่ง File > Import > Open External Library…
• เลือกไฟล์ที่ต้องการนำ Library มาใช้งาน
• โปรแกรมจะเปิด Library มาให้เลือกทำงาน เมื่อเลือกใช้ Symbol ๆ นั้นจะถูกโอนไปยังไฟล์เอกสารปัจจุบันโดยอัตโนมัติ

6.4 แก้ไข Symbol

Symbol ที่สร้างไว้แล้ว สามารถปรับเปลี่ยนแก้ไขได้ โดย

• เปิด Library Panel ดับเบิลคลิกที่ชื่อ Symbol ชิ้นที่ต้องการแก้ไข หรือกรณีที่มี Instanceของ Symbol ปรากฏบน Stage ก็สามารถดับเบิลคลิกที่ Instance นั้นๆ ได้ทันที
• ปรากฏหน้าต่างการทำงานในโหมดแก้ไข Symbol โดยสังเกตได้ว่าตรงกลางจอภาพ มีสัญลักษณ์ + และปรากฏชื่อหน้าต่างเป็นชื่อ Symbol นั้นที่มุมบนซ้ายของ Stage

• แก้ไข Symbol เหมือนกับการแก้ไขวัตถุปกติทั่วไป
• เมื่อแก้ไขเรียบร้อยแล้ว สามารถกลับมาทำงานในโหมดปกติได้โดยคลิกที่ชื่อ Scene1 (หรือ Scene หมายเลขใดๆ ก็ได้ตามลักษณะของชิ้นงาน)

หมายเหตุ การแก้ไข Symbol จะส่งผลต่อ Instance ที่เกิดจาก Symbol นั้นๆ ทุก Instance ที่นำมาใช้งานบน Stage

6.5 แก้ไข Instance

Instance เปรียบเสมือนวัตถุชิ้นหนึ่ง ซึ่งสามารถใช้คำสั่งจัดการวัตถุ มาดำเนินการปรับเปลี่ยนได้ โดยไม่ส่งผลกระทบต่อ Symbol ต้นฉบับ โดยมีวิธีจัดการดังนี้

วิธีที่ 1

• คลิกเลือก Instance

• ใช้เครื่องมือ Free Transform Tool ปรับขนาดหรือหมุนวัตถุ

วิธีที่ 2

• คลิกเลือก Instance
• กำหนดลักษณะของสีที่ต้องการจาก Instance Properties

• Brightness ความสว่าง
• Tint การปรับแก้ไขสี/ความโปร่งแสง
• Alpha การปรับแก้ไขความโปร่งแสง
• Advanced การปรับแก้ไขสีและค่าความโปร่งแสงแบบ Advanced