ขนาดของ ส เต จ ที่ โปรแกรม กำหนด มีค่า อยู่ ที่ เท่าใด

หน่วยที่ 2 แนะนำโปรแกรม Flash

1.1 แนะนำโปรแกรม FLASH

01 แนะนำโปรแกรม FLASH

1. ความรู้ทั่วไปเกี่ยวกับโปรแกรม Flash

โปรแกรม Flash คืออะไร ?

โปรแกรม Flash เป็นซอฟต์แวร์ที่ช่วยในการสร้างสื่อมัลติมีเดีย, ภาพเคลื่อนไหว (Animation), ภาพกราฟิกที่มีความคมชัด เนื่องจากเป็นกราฟิกแบบเว็คเตอร์(Vector), สามารถเล่นเสียงและวีดิโอ แบบสเตริโอได้, สามารถสร้างงานให้โต้ตอบกับผู้ใช้(Interactive Multimedia) มีฟังก์ชั่นสำหรับการเขียนโปรแกรม (Action Script) และยังทำงานในลักษณะ CGI โดยเชื่อมต่อกับการเขียนโปรแกรมภาษาอื่นๆ ได้มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVAและอื่นๆ โดยเฉพาะข้อดีของโปรแกรม Flash คือ ความสามารถในการบีบอัดไฟล์ให้มีขนาดเล็ก มีผลทำให้แสดงผลได้อย่างรวดเร็ว นอกจากนั้นยังแปลงไฟล์ไปอยู่ในฟอร์แมตอื่น ได้หลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เป็นต้น

โปรแกรม Flash เริ่มมีชื่อเสียงประมาณปี พ.ศ. 2539 จนถึง ปัจจุบันได้ถูกนำมาใช้งานอย่างแพร่หลาย โดยเฉพาะเทคโนโลยีเว็บ ทำให้การนำเสนอทำได้อย่างน่าสนใจ นอกจากนั้น โปรแกรม Flash ยังสามารถสร้างแอพพลิเคชั่น (Application) เพื่อใช้ทำงานต่างๆ รองรับการใช้งานกับอุปกรณ์ที่ เชื่อมต่อกับระบบเครือข่ายอินเตอร์เน็ต และทำงานได้กับหลายๆ แฟลตฟอร์ม (Platform)

พัฒนาการของ Flash CS3

Flash CS3 เป็นโปรแกรมกราฟิกและมัติมีเดีย ที่มีการพัฒนามาเป็นเวลานาน ตั้งแต่ยังเป็น Macromedia Flash ในเวอร์ชั่น 3, 4, MX, MX 2004 และ Flash 8 ของบริษัท Macromedia แต่ปัจจุบันถูกซื้อกิจการมารวมอยู่ในแพ็กเกจ Adobe Desigh Permium CS3 ของบริษัท Adobe ซึ่งได้นำมาพัฒนาเพิ่มเติมให้มีความสามารถสูงขึ้น และรองรับการใช้งานได้ทั้งระบบปฏิบัติการ Window XP และ Window Vista

 

เปิดโปรแกรมทำได้หลายวิธี เช่น คลิกที่ start >all programs > FlashCS

หรือดับเบิ้ลคลิกที่ไอคอนโปรแกรม Flash

หน้าจอแรกของ Flash CS3 จะเรียกโปรแกรมขึ้นมาดังรูป

หน้าจอแรกของ Flash CS3

ส่วนประกอบของหน้าจอโปรแกรม Flash CS ประกอบด้วย

Flash มีหน้าต่างการทำงานลักษณะเดียวกับโปรแกรมอื่นๆ ที่ทำงานบน Windows ดังนี้

• Title Bar แสดงปุ่มควบคุมหลัก (Control Menu), ชื่อโปรแกรม และปุ่มควบคุมหน้าต่างโปรแกรม
  

• Menu Bar  แถบคำสั่ง  จะประกอบด้วยคำสั่งต่าง ๆของโปรแกรม จะเก็บไว้เป็นหวมดหมู่ ได้แก่ เมน ูFile, Edit, Insert, Modify, Text, Commands, Control, Windows และ Help
  

• Toolbox   กล่องเครื่องมือ เป็นส่วนที่เก็บเครื่องมือต่างๆ เพื่อให้สามารถเรียกใช้งานได้สะดวกและรวดเร็วขึ้น แบ่งเป็นกลุ่ม ๆ เพื่อสะดวกในการเรียกใช้งาน
  

• Timeline หน้าต่างแสดงเส้นควบคุมเวลาสำหรับการนำเสนอผลงาน ประกอบด้วยส่วนทำงานเกี่ยวกับ Layer และ Timeline
  Timeline   คือ ส่วนที่ใช้สร้างภาพเคลื่อนไหว แบ่งเป็น 2 ส่วนคือ
  1. Layer เปรียบเสมือนแผ่นใสที่วาดภาพได้ หรือวางอ็อบเจ็กต์ลง เมื่อสร้างภาพเคลื่อนไหวต่างๆ Layer แต่ละแผ่นจะแยกอิสระต่ออกัน สามารถเปลี่ยนตำแหน่งซ้อนทับกันได้
  2. Timeline เป็นส่วนกำหนดการเคลื่อนไหวของภาพวาดต่างๆ ภายในจะประกอบเป็นตารางเล็กและมีแถบบอกจำนวนเฟรมด้านบนรวมทั้งมีเส้นสีแดงที่เรียกว่า “Playhead” ดังภาพต่อไปนี้

• Panel หน้าต่างควบคุมฟังก์ชันงาน ซึ่งมีหลายฟังก์ชัน (หลายหน้าต่าง)

• Library หน้าต่างควบคุมเกี่ยวกับชุดวัตถุของโปรแกรม ได้แก่ Symbols, Buttons, Movies

 

• Work Area พื้นที่ทำงาน ประกอบด้วยพื้นที่ว่างสำหรับวางวัตถุแบบชั่วคราว และพื้นที่ของเวที (Stage)ทั้งหมดบนพื้นสีแดง
  
• Stage พื้นที่ส่วนที่ใช้ในการวางวัตถุต่างๆ หรืออาจจะเรียกว่า “เวที” เมื่อมีการนำเสนอผลงานจะแสดงเฉพาะวัตถุบน Stage เท่า
  

 Properties   คือ ส่วนที่ใช้เป็นจอภาพ Panel ที่ใช้สำหรับแสดงคุณสมบัติของอ็อบเจ็กต์ต่างๆที่มีใน Macromedia Flash mx โดยแสดงแบบโต้ตอบ (Interactive) ต่อการคลิกเมาส์า จะเห็นรูปภาพดังนี้

– See more at: //animation.mycom108.com/?page_id=37#sthash.MK7yAGlJ.dpuf

1.2 เริ่มต้นใช้งานโปรแกรม FLASH

ก่อนอื่นเราต้องรูปจักชนิดของไฟล์ Flash ไฟล์ชิ้นงานของ Flash ไฟล์ที่เกิดจากโปรแกรม Flash จะมีด้วยกันอยู่ 2 ชนิดคือ

1. ไฟล์ Flash (.fla)

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

2. ไฟล์ Flash movie (.swf)

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

การบันทึก File ใหม่

1. เลือกคำสั่ง File แล้วเลือก Save
2. เลือก Folder ที่ต้องการจัดเก็บ
3. ตั้งชื่อไฟล์ในช่อง File Name
4. เลือกรูปแบบหรือสกุลของไฟล์ในช่อง Save as type นามสกุลที่ใช้คือ .swf และ .fla
5. คลิกปุ่ม Save

การปิด File

1. เลือกคำสั่ง File แล้วเลือก Close หรือ คลิกปุ่มกากบาทที่มุมขวาบนของวินโดว์รูปภาพ หรือกดคีย์ Ctrl+W
2. หากไฟล์ที่เปิดอยู่นั้นมีการแก้ไขให้คลิก Yes เพื่อบันทึก หรือคลิก No ถ้าไม่ต้องการบันทึก

การเปิด File ที่มีอยู่แล้วขึ้นมาใช้งาน

1. เลือกคำสั่ง File แล้วเลือก Open
2. เลือก Folder ที่เก็บไฟล์จากช่อง Look in
3. คลิกเลือกชื่อไฟล์จากรายการหรือป้อนชื่อลงใน File name
4. เลือกประเภทไฟล์ในช่อง Files of type นามสกุล .swf หรือ .fla
5. คลิกปุ่ม Open

2. คุณสมบัติของเอกสาร

1. การเริ่มใช้งาน Macromedia Flash mx โดยการกำหนดขนาดพื้นที่ทำงานในโปรแกรม
2. หลังจากเปิด Macromedia Flash mx แล้วให้คลิกที่ Modify > Document หรือกดปุ่ม Ctrl+J
   
3. จะเกิดกรอบ Document properties ดังรูปภาพ

• อธิบายกรอบ Document properties

  1. Dimensions คือการกำหนดขนาดพื้นที่ของการสร้าง งานที่ต้องการ
     • Width คือ การกำหนดขนาดความกว้างของพื้นที่การใช้งาน
     • Height คือ การกำหนดขนาดความสูงของพื้นที่การใช้งาน
       จอภาพปกติอัตราส่วน 3:4 เช่น 300:400 , 600:800, 768:1024
  2. Match คือการกำหนดเพื่อกำหนดวัตถุประสงค์ของงานให้สอดคล้องของงานที่จัดทำ
     • Printer กำหนดเพื่อให้สอดคล้องกับ printer
     • Contents กาหนดเพื่อให้ครอบคลุมพื้นที่นอก Stage
     • Default กำหนดเพื่อให้เป็นค่ามาตรฐาน
  3. Background Color คือการกำหนดสีพื้นของ Stage  ปกติเป็นสีขาว
  4. Frame Rate คืออัตราความเร็วของการแสดงของ Movie มีหน่วยเป็นเฟรมต่อนาที ( fps) โดยทั่วไปโปรแกรมจะกำหนดมาตรฐานคือ 12 เฟรมต่อนาที ในที่นี้ให้ตั้งเป็น 25  เฟรมต่อนาที
  5. Ruler Unit คือ หน่วยที่ใช้ในการกำหนดขนาดพื้นที่ทำงานได้แก่ Pixel ,Percent,Centimeters,Millimeters,Point,Inches
  6. Make default คือ กำหนดค่าที่ตั้งเป้นค่ามาตรฐาน
• คลิก OK

3. เครื่องมือช่วยกะระยะการวางวัตถุ Ruler, Grid, Guides ใน Flash

Ruler, Grid, Guidesเครื่องมือช่วยกำหนดขอบเขต และวางตำแหน่งการสร้างกราฟิกบน Stage โดย

• Ruler แถบไม้บรรทัดจะปรากฏที่ขอบด้านซ้าย และด้านบนของ Stage สามารถเปิด/ปิดได้จากคำสั่ง View, Rulers
• Grid มีลักษณะเป็นตารางตาหมากรุก ที่แบ่งเป็นช่องเล็ก ช่วยในการกำหนดตำแหน่งในการสร้าง ย่อ/ขยาย หรือเคลื่อนย้ายวัตถุบน Stage สามารถเปิด/ปิดได้จากคำสั่ง View, Grids, Show Grids

วิธีปรับตั้งค่า Grid ให้คลิกที่  View > Grid > Edit Grid

จะได้ดังรูป

โดยปกติขนาดของช่องตารางจะมีค่าเท่ากับ 18 × 18 pixels ซึ่งปรับแต่งได้จากคำสั่ง View,Grids, Edit Grid…

 

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

คำสั่งที่เกี่ยวข้องกับแถบไม้บรรทัด, Grids และไกด์ คือคำสั่ง Snap to… ซึ่งมีหลายคำสั่งเช่น

• Snap to Grids ช่วยให้การวาด/สร้างวัตถุ, การย่อขยาย หรือย้ายตำแหน่งอิเส้นกริดที่กำหนดไว้
• Snap to Guides ช่วยให้การวาด/สร้างวัตถุ, การย่อขยาย หรือย้ายตำแหน่งอิงเส้นไกด์ที่กำหนดไว้
• Snap to Objects ช่วยให้การวาด/สร้างวัตถุ, การย่อขยาย หรือย้ายตำแหน่งอิงจุดกึ่งกลาง (Center Point) ของวัตถุ

– See more at: //animation.mycom108.com/?page_id=39#sthash.fQGu2SVA.dpuf

1.3 เครื่องมือ TOOLBOX

แถบ Tools Box

ลักษณะการใช้งานเครื่องมือต่างๆ มีดังนี้
1. Selection Tool 

ใช้สำหรับคลิกเลือก object ในพื้นที่หนึ่งของ Stroke color (สีขอบเส้น) หรือ Fill color (สีพื้นหลัง) ตามต้องการ

2. Subselection Tool 

ใช้สำหรับสร้าง handle บน object

handle นี้ใช้ปรับรูปทรง, ความโค้งของ object ตามที่ต้องการ

3. Line Tool 

ใช้สำหรับลากเส้นตรงโดยเลือกสีเส้นตรง Stroke color ของแถบ Colors

4. Lasso Tool 

ใช้สำหรับคลิกเลือกวัตถุ object  ได้อย่างอิสระ

ที่แถบ Options ของ Lasso Tool จะมีรูปให้เลือก 3 อย่างให้เลือกใช้

5. Pen Tool 

ใช้สร้าง handle เพิ่มสำหรับใช้งานต่อใน Subselection Tool   หรือใช้สำหรับสร้างรูปหลายเหลี่ยม

6. Text Tool 

ใช้สร้างพิมพ์ตัวอักษร

7. Oval Tool 

ใช้สำหรับสร้างรูปวงกลมหรือวงรีขึ้นมา โดยที่แถบ Color     Stroke Color เป็นตัวกำหนดสีขอบเส้น และ Fill Color เป็นตัวกำหนดสีพื้นหลัง

หากกดปุ่ม shift ค้างไว้ขณะวาด จะได้รูปวงกลมเท่านั้น

8. Rectangle Tool 

ใช้วาดรูปสี่เหลียมมุมฉาก โดยที่แถบ Color     Stroke Color เป็นตัวกำหนดสีขอบเส้น และ Fill Color เป็นตัวกำหนดสีพื้นหลัง (ปรับสีเหมือนกันกับวงกลม)

หากกดปุ่ม shift ค้างไว้ขณะวาด จะได้รูปสี่เหลี่ยมจัตุรัสเท่านั้น

ที่แถบ Options จะมีฟังก์ชันรูป

         สำหรับสร้างรูปสี่เหลี่ยมมุมโค้ง เมื่อกดแล้วจะมีหน้าต่างขึ้นมาให้ใส่ขนาดรัศมีที่มุมของสี่เหลี่ยม

9. Pencil Tool 

ใช้สำหรับวาดเส้นได้อย่างอิสระ

ที่แถบ Options สำหรับ Pencil Tool จะมีฟังก์ชันสำหรับปรับให้เส้นตรงขึ้น, โค้งขึ้น หรือไม่ปรับเส้น ดังรูปตามลำดับ
ตัวอย่างการวาดด้วยดินสอ

10. Brush Tool 

ใช้สำหรับวาด object โดยมีสีตาม Fill Color ของแถบ Color

ที่แถบ Options สำหรับ Brush Tool จะมีฟังก์ชันสำหรับ ปรับวิธีการใช้ Brush Tool ดังนี้

• เครื่องมือตรงซ้ายบนใช้สำหรับปรับให้ :

1) ระบายสีตามปกติ

2) ระบายสีไม่ให้ทับเส้น

3) ระบายสีไม่ให้ทับ object ใดๆ

4) ระบายสีทับได้ในพื้นที่ที่ใช้ Selection Tool เลือกไว้ก่อน

5) ระบายสีในพื้นที่ที่ไม่ใช่เส้น โดยจะระบายได้เฉพาะในบริเวณที่จุดเริ่มระบายทับอยู่

• เครื่องมือตรงขวาบนใช้สำหรับทำให้การระบายสีที่มีการไล่ระดับสีมีจุดศูนย์กลางของสีอยู่ที่จุดๆ หนึ่งเสมอ

• เครืองมือตรงกลางใช้ปรับขนาด brush

• เครื่องมือข้างล่างใช้เปลี่ยนรูปร่าง brush

11. Free Transform Tool 

ใช้สำหรับปรับรูปร่างของ object ที่วาดไว้แล้วโดยรูปแบบที่เป็น default จะสามารถปรับขนาดและหมุน object ได้

ที่แถบ Options จะมีเครื่องมือเพิ่มเติมดังนี้

• ที่มุมซ้ายบนใช้บิดให้เอียงและหมุน object (Rotate and Skew)

• ที่มุมขวาบนใช้ย่อขยาย object โดยมีอัตราส่วนของด้านคงที่ (Scale)

• ที่มุมซ้ายล่างใช้บิด object (Distort)

• ที่มุมขวาล่างใช้เปลี่ยนรูปร่าง object อย่างอิสระ (Envelope)

12. Ink Bottle Tool 

ใช้สำหรับใส่เส้นของให้กับ object ที่ไม่มีเส้นขอบ หรือเปลี่ยนสีของเส้นขอบโดยสีของเส้นขอบจะเป็นสีของ Stroke Color ในแถบ Colors

13. Paint Bucket Tool 

ใช้สำหรับลงสีในรูปปิด โดยสีที่ลงจะเป็นสีของ Fill Color ในแถบ Colors

ที่แถบ Options จะมีเครื่องมือให้เลือกว่าสามารถลงสีในรูปปิดเท่านั้น หรือสามารถลงสีในรูปเปิดที่มีรูขนาดเล็กหรือใหญ่เท่าใด

14. Eyedropper Tool 

ใช้สำหรับเลือกสีมาใส่ในช่องสีของ Stroke Color หรือ Fill Color ในแถบ Color   จากสีหนึ่งของ object ใน workspace