Back to Top
sunshine
Untitled Document

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


   สาระการเรียนรู้

1.  การสร้างซิมบอล
2.  ลักษณะสำคัญของโปรแกรม Adobe Flash cs5
3.  ส่วนประกอบของโปรแกรม Adobe Flash cs5
4.  การติดตั้งโปรแกรม Adobe Flash cs5


มาทำแบบทดสอบก่อนเรียนก่อนนะคะ
     แบบทดสอบ หน่วยที่ 7   


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  ซิมบอล

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

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





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



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

สำหรับซิมบอลมีอยู่ 3 ประเภท โดยจะมีหน้าที่แตกต่างกันไป ได้แก่

   Graphic   คือ  ซิมบอลที่แสดงภาพเคลื่อนไหวตามจำนวนเฟรมไนไทม์ไลน์หลัก
   Movie clip    คือ  ซิมบอลที่แสดงภาพเคลื่อนไหวตามจำนวนเฟรมในซิมบอล
   Button    คือ  ซิมบอลที่เป็นลักษณะปุ่มกด

     

 

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

วิธีที่ง่ายที่สุดในการสร้างซิมบอลคือ การแปลงวัตถุที่เราสร้างไว้แล้วบนสเตจมาเป็นซิมบอลโดยใช้ Selection Tool คลิกเลือกวัตถุ เลือกคำสั่ง Modify>Convert to Symbol หรือ คลิกขวาที่วัตถุแล้วเลือก Convent to Symbol หรือกดคีย์ <F8>จะปรากฏหน้าต่าง Convent to Symbol ให้เรากำหนดชื่อเรียกซิมบอลนี้ในช่อง Name ส่วนตัวที่เลือก Type ให้ทำการเลือกประเภทซิมบอล (ดังตัวอย่างเลือก Movie Clip) จากนั้นคลิกปุ่ม ok



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

  สร้างซิมบอลขึ้นมาใหม่

อีกวิธีในการสร้างซิมบอลคือ การสร้างซิมบอลขึ้นมาใหม่เลย โดยคลิก New Symbol พี่พาเนลLibrary จะปรากฏหน้าต่างCreate New Symbol ให้เราตั้งชื่อชิมบอลใหม่ และเลือกประเภทซิมบอล (ในตัวอย่างเราเลือกซิมบอลประเภท MovieClip) จากนั้นคลิกปุ่ม ok



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



พาเนล Library ศูนย์รวมซิมบอล

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



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

ที่แถบหัวเรื่องของรายการเราสามารถคลิกเพ่อจัดเรียงรายการซิมบอลได้

ถ้าในชิ้นงานที่เราสร้างประกอบด้วยซิมบอลจำนวนมาก ให้เราคลิก New Folder สร้างโฟลเดอร์แยกเก็บซิมบอลต่างๆ โดยคลิกลากซิมบอลที่ต้องการไปไว้ในโฟลเดอร์ที่สร้างได้เลย

นอกจากนั้นเราสามารถแก้ไขคุณสมบัติของซิมบอลหรือสั่งลบซิมบอลใดก็ได้ โดยดับเบิ้ลคลิกที่ซิมบอลที่ต้องการแก้ไข หรือหากต้องการลบซิมบอลให้คลิก Delete

 



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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

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





ปรับแต่งอินแสตนซ์ได้อย่างไรบ้าง

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


 ปรับขนาด (Scale) ของอินสแตนซ์
เลื่อนตำแหน่งจุดหมุน (o) ของอินสแตนซ์
หมุนหรือบิด (Rotate and Skew) อินสแตนซ์



ซึ่งมีวิธีการใช้งาน Free Transform Tool ได้สอนไปแล้วในบท “การจัดการวัตถุ”
เมื่อเราใช้อินสแตนซ์ก็สามารถทำการแก้ไขคุณสมบัติต่าง ๆ ของอินสแตนซ์ของ ได้ดังนี้
ปรับตำแหน่งที่วางบนสเตจ
ปรับความกว้างและความสูงของอินสแตนซ์
ปรับวัตถุแบบ 3 มิติ
ปรับสีของอินสแตนซ์
ปรับรูปแบบการมองเห็น
ปรับแต่งด้วยฟิลเตอร์
กำหนดรอบการเล่นวนของวัตถุ

 

 ปรับตำแหน่งอินสแตนซ์ที่วางอยู่บนสเตจ(Position)

ในหัวข้อ Position and size ของ Property Inspector เราสามารถเลื่อนตำแหน่งวัตถุโดยการกำหนดค่าแนวแกนตั้ง (X) และแนวนอน (Y) โดยยึดจากตำแหน่งจุดอ้างอิงของวัตถุ ดังนี้





ปรับความกว้างและความสูง (Size)

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




การปรับวัตถุแบบ 3 มิติ (3D Position and view)

    นอกจากนี้้การใช้เครื่องมือปรับวัตถุ 3 มิติที่กล่องเครื่องมือแล้ว เรายังสามารถปรับค่าจากแถบ Position and view อีกด้วย โดยนำเมาส์ไปวางที่ตัวเลขค่าต่าง ๆ แล้วคลิกลากลงด้านล่างหรือลากไปด้านซ้ายเป็นการปรับค่าให้น้อยลง และลากขึ้นด้านบนหรือทางขวาจะเป็นการปรับค่าให้มากขึ้น โดยในขณะที่ลากเมาส์ก็จะเห็นวัตถุที่สเตจเปลี่นแปลงการเคลื่อนไหวให้เห็นด้วย

การปรับสีของอินสแตนซ์(Color Effect)

ในหัวข้อ Color Effect ของ Property Inspector มีตัวเลือกในการปรับสีของอินสแตนซ์ดังนี้




ปรับความมืด/สว่าง (Brightness)

     
เลือก Brightness กำหนดค่าเป็นเปอร์เซ็นต์ โดย -100% เป็นค่าที่มืดที่สุด และ 100% เป็นค่าที่สว่างที่สุด ส่วนค่า 0% เป็นค่าความสว่างของภาพเริ่มแรก




ปรับโทนสีโดยการผสมสีใหม่ (Tint)

    
กำหนดค่าตัวเลขในช่องของ RGB ได้ตั้งแต่ค่า 0 ถึง 255 หรือจะคลิกเลือกสีที่ต้องการได้ใน สี่เหลี่ยม และกำหนดเปอร์เซ็นต์การผสมสีเดิมกับสีใหม่ที่สีใหม่อย่างเดียว




ปรับค่าสีขั้นสูง (Advanced)

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




ปรับความโปร่งใส (Alpha)

      
การกำหนดค่าเปอร์เซ็นต์ตั้งแต่ 0 ถึง 100% โดยค่า 0% จะทำให้อินสแตนซ์โปร่งใส (มองไม่เห็นอิสแตนซ์เลย) ส่วนค่า 100% จะทำให้อินสแตนซ์แสดงสีชัดเจน เป็นสีปกติ
ในส่วนการปรับดิสเพลย์(Display) และ การใช้งานฟิลเตอร์ (Filter) นั้นมีรายละเอียดค่อนข้างมาก จึงจะแยกไปกล่าวถึงอย่างละเอียดในบท “เทคนิคการตกแต่งวัตถุ”





การสับเปลี่ยนประเภทของอินสแตนซ์

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

การสับเปลี่ยนซิมบอลต้นแบบ (Swap)

    เมื่อเราคลิกปุ่ม swap ใน Property Inspector อินสแตนซ์ จะเป็นการสับเปลี่ยนซิมบอลต้นแบบโดยสามารถเลือกได้จากรายการที่ปรากฏในหน้าต่าง Swap Symbol  คลิกปุ่ม ok
เมื่อสับเปลี่ยนซิมบอล อินสแตนซ์จะเปลี่ยนไปเป็นเหมือนซิมบอลต้นแบบ แต่คุณสมบัติเฉพาะตัวของอินสแตนซ์ที่กำหนดไว้ เช่น ความโปร่งใส (Alpha) จะยังมีผลอยู่เช่นเดิม



การแยกอินสแตนซ์ออกจากซิมบอล

  ดังกล่าวไปแล้วว่า เราสามารถแก้ไขอินสแตนซ์บนสเตจได้ โดยปรับแต่งคุณสมบัติใน Property Inspector และการปรับขนาด หรือบิดรูปทรงเท่านั้น หากต้องการปรับแต่งอินสแตนซ์มากกว่านี้ เราจะต้องดัดแปลงอินสแตนซ์นี้กลับเป็นรูปทรงธรรมดาก่อน จึงจะนำเครื่องมือปรับแต่งรูปทรงต่างๆ ใน Flash  มาแก้ไขได้ โดยสามารถเลือกคำสั่งได้ 3 วิธีคือ
คลิกเลือกอินสแตนซ์และเลือกคำสั่ง Modify>Break Apart
คลิกขวาทิอินสแตนซ์ ละเลือกคำสั่ง Break Apart
กดคีย์ลัด <Ctrl+B>

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

 

การแก้ไขซิมบอล

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



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



แก้ไขซิมบอลในพาเนลLibrary

        ในพาเนลLibrary คลิกขวาเลือกที่ชื่อซิมบอล และเลือกคำสั่ง Edit จะเป็นการเข้าสู่โหมดแก้ไขซิมบอล สังเกตได้ว่าจะมีชื่อซิมบอลนั้นปรากฏอยู่แถบชื่อเรื่อง
หน้าจอนี้ไม่ใช่หน้าจอสเตจสร้างมูฟวี่ปกติ แต่เป็น สเตจย่อย สำหรับแต่งซิมบอลนี้โดยเฉพาะ ซึ่งเราสามารถใช้เครื่องมือวาด ปรับขนาดรูปทรง พิมพ์ข้อความ หรือนำอินสแตนซ์ของซิมบอลอื่นมาใช้ซือนก็ได้ ดังตัวอย่งเราเปลี่ยนรูปแบบการไล่สีเกรเดียนต์
แก้ไขซิมบอลจากหน้าจอสเตจ
มีวิธีแก้ไขจอสร้างมูฟวี่ปกติ โดยให้เราดับเบิลคลิกอินสแตนซ์บนสเตจแก้ไขซิมบอลจากสเตจ
จะเป็นการเข้าสู่โหมดการแก้ไขซิมบอลที่เป็ต้นแบบของอินแสตนซ์นั้น ในขณะที่แก้ไขจะสังเกตว่าวัตถุอื่นๆ บนสเตจ ที่ไม่ใช่ซิมบอลที่เราแก้ไขจะมีสีจาง และจะชื่อซิมบอลปรากฏอยู่บนแถบหัว
เมื่อแก้ไขซิมบอลเป็นที่เรียบร้อยแล้วให้คลิกเลือกซีน Scene 1 หรือกดคีย์ลัด Ctrl+E หรือดับเบิลคลิกพื้นที่ว่างที่ไม่มีวัตถุ ก็จะกลับสู่หน้าจอที่แสดงสเตจของชิ้นงานในโหมดปกติ
สังเกตว่าสิ่งที่เราแก้ไขกับซิมบอลจะมีผลกับลักษณะของอินสแตนซ์ต่างๆ
ในพาเนล Library   เมื่อเราลบซิมบอลจะมีผลทำให้อินสแตนซ์ทั้งหมดที่อยู่บนสเตจถูกลบไปด้วย ดังนั้นจึงควรทำอย่างระมัดระวัง

การลบซิมบอลที่ไม่ใช้

       เมื่อสร้างชิ้นงานเสร็จแล้ว เราอาจพบว่า มีหลายซิมบอลที่ไม่ถูกใช้ในชิ้นงานเลย ซึ่งดูได้จากหัวข้อ Use Count ที่พาเนลLibrary แสดงจำนวนการใช้งานซิมบอล (ค่า Use Count เป็น 0)เราสามารถลบซิมบอลที่ไม่ได้ใช้ออกไปเพื่อทำให้ไฟล์ชิ้นงาน (.fla) มีขนาดเล็กลง

 

 

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player