1.1 การใช้งาน Adobe Flash CS3

1.1 การใช้งาน Adobe Flash

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

Flash CS3 เป็นผลิตภัณฑ์ที่พัฒนามาเพื่อสนับสนุนการสร้างงานกราฟิก ทั้งภาพนิ่งและภาพเคลื่อนไหว สำหรับการนำเสนอ ผ่านเครือข่ายอินเทอร์เน็ต Flash มีฟังก์ชันช่วยอำนวยความสะดวก ในการสร้างผลงานหลากหลายรูปแบบ ตลอดจนชุดคำสั่งโปรแกรมมิ่ง ที่เรียกว่า Flash Action Script ที่เพิ่มประสิทธิภาพในการทำงาน และสามารถคอมไพล์ (Compile) เป็นโปรแกรมใช้งาน (Application Program) เช่น การทำเป็น e-Card เพื่อแนบไปพร้อมกับ E-Mail ในโอกาสต่างๆ

Flash เดิมเป็นของ Macromedia แต่ปัจจุบันได้เปลี่ยนมาเป็นของ Adobe ซึ่งได้ถูกพัฒนาให้มีลักษณะการทำงานที่สอดคล้องต่อโปรแกรม ต่างๆ ในชุด Adobe มากยิ่งขึ้น ซึ่งในการอบรมครั้งนี้ได้ใช้ Adobe Flash CS3 Professional

1.2 ความสารมารถของโปรแกรม Flash

ความสามารถของโปรแกรม Flash CS3 มีดังนี้

1. มีหน้าตาโปรแกรมที่สวยงาม มีการจัดวางเครื่องมือต่างๆ ที่มีมากมายให้ดูเป็นระเบียบขึ้น ทั้งยังสะดวกในการเรียกใช้งานมากขึ้น

2. เมนู Import to Library การดึงภาพจากภายนอกเข้ามาใช้งานในโปรแกรม CS3 สามารถดึงมาใช้ในโปรแกรมได้ทันทีโดยไม่เสียเวลาค้นหาอีก

3. ระบบจัดการ Panel ต่างๆ ดีเยี่ยม โดยโปรแกรมจะมีความสามารถในการแสดงให้เห็นเฉพาะแถบชื่อของหน้าต่าง หรือสามารถปรับให้เห็นเฉพาะไอคอนเท่านั้น

4. Save Panel Layout เมื่อมีการเปิดหน้าต่าง Panel ที่ใช้งานอยู่ประจำขึ้นมาแล้ว โปรแกรมจะสามารถบันทึกรูปแบบของหน้าต่าง Panel นั้นเอาไว้เหมือนกับการ Add Favorites เมื่อมีการใช้งานก็จะเป็นอย่างที่เคยบันทึกเอาไว้

5. ให้ความสำคัญของหน้าต่าง Properties มากขึ้น ทั้งยังสะดวกในการปรับแต่งสีสัน เอฟเฟ็กต์ หรือคุณสมบัติอื่นๆ ได้ในหน้าต่าง Properties ที่แสดงอยู่ด้านล่างของหน้าจอ

6. ในกล่องเครื่องมือของโปรแกรม Flash 8 (CS3) จะมีการเพิ่มปุ่ม Free Transform ขึ้นมา เมื่อมีการคลิกปุ่มนี้ก็สามารถปรับแต่งรูปร่างและขนาดของชิ้นงานให้บิดเบี้ยวหรือเป็นไปตามต้องการได้ในทันที

7. เปลี่ยนภาพแบบ Bitmap เป็น Vector

8. สามารถปรับแต่งขนาดและหมุนรูปภาพได้อย่างสะดวก

9. หน้า Timeline ที่มีประสิทธิภาพดียิ่งขึ้น

10. หน้าต่าง Action Script ที่เพิ่มหมวดหมู่ให้สามารถใช้งานได้ง่ายขึ้น

11. การใช้เทคโนโลยี MP3 ในการบีบอัดไฟล์เสียง

12. การใช้ Gradient ช่วยปรับสีสันชิ้นงานให้สวยงามยิ่งขึ้น

13. หน้าต่าง Color Mixer เปลี่ยนปลายพู่กันให้เป็นรูปภาพ

1. ส่วนประกอบของหน้าต่างโปรแกรม Flash

1. เมนูบาร์ (Menu Bar) แสดงรายการคำสั่งต่างๆ ของโปรแกรม

2. ไทม์ไลน์ (Timeline) หน้าต่างแสดงเส้นควบคุมเวลาสำหรับการนำเสนอผลงาน ประกอบด้วยส่วนทำงานเกี่ยวกับ Layer และ Timeline

3. Layer (เลเยอร์) คือ ส่วนควบคุมการสร้างชั้นวัตถุ เพื่อให้การควบคุมวัตถุแต่ละชิ้น มีอิสระ และสะดวก ต่อการแก้ไข ปรับแต่ง

4. ทูลบ็อกซ์ (Toolbox) แสดงปุ่มเครื่องมือเกี่ยวกับการวาดภาพ สร้างภาพ ซึ่งสามารถ ซ่อน/แสดง ได้ด้วยการคลิกเมนู Windows > Tools

5. Panel (พาเนลพาเนล (Panel) หน้าต่างหรือชุดคำสั่งพิเศษที่ใช้ทำงานเฉพาะด้าน เช่น พาเนล Color ใช้เลือกและผสมสี พาเนล Library ใช้จัดเก็บออบเจ็กต์ต่างๆ เป็นต้น ซึ่งสามารถเปิดเรียกได้ด้วยการคลิกที่เมนู Windows

6. สเตจ (Stage) พื้นที่ส่วนที่ใช้ในการวางวัตถุต่างๆ หรืออาจจะเรียกว่า "เวที" เมื่อมีการนำเสนอผลงานจะ แสดงเฉพาะวัตถุบน Stage เท่านั้น

7. แถบคุณสมบัติ (Properties) ใช้กำหนดค่าคุณสมบัติของ สเตจและออบเจ็กต์ต่างๆ โดยรายละเอียดที่ปรากฏขึ้นมา จะเปลี่ยนแปลงไปตามเครื่องมือหรือออบเจ็กต์ที่กำลังคลิกเลือก สามารถซ่อน/แสดง ได้ด้วยการคลิกเมนู Windows > Properties > Properties หรือกดปุ่ม Ctrl + F3

1.4 Toolbox

ทูลบ็อกซ์ (Toolbox) เป็นกล่องเก็บอุปกรณ์ที่ใช้ในการสร้าง ปรับแต่ง และแก้ไขวัตถุ เราสามรถเรียกใช้งานทูลบ็อกซ์ ได้โดยเลือกคำสั่ง Windows > Tools แล้วคลิ้กเลือกเครื่องมือได้ตามต้องการ

เครื่องมือต่างๆ บนทูลบ็อกซ์

Selection Tool ( V ) คำสั่ง Selection การเลือกวัตถุ

Subselection Tool ( A ) คำสั่ง Selection การเลือกวัตถุ

Free Transform Tool ( Q ) ยืด หด ย่อ หรือขยายขนาดของวัตถุ

Gradient Transform Tool ( F ) ปรับแต่งการไล่โทนสีแบบ Linear และ Radial

Lasso Tool ( L ) คำสั่ง Selection การเลือกวัตถุ

Pen Tool ( P ) วาดเส้นและส่วนโค้งต่าง

Add Anchor Point Tool ( = ) เพิ่มจุดแองเคอร์

Delete Anchor Point Tool ( - ) ลบจุดแองเคอร์

Convert Anchor Point Tool ( C ) ปรับเปลี่ยนเส้นโค้งให้เป็นมุม

Text Tool ( T ) พิมพ์ตัวอักษร

Line Tool ( N ) วาดเส้นตรง

Rectangle Tool ( R ) วาดสี่เหลี่ยม

Oval Tool ( O ) วาดวงกลม

Rectangle Primitive Tool ( R ) วาดสี่เหลี่ยมแบบปรับแต่งรูปทรงได้

Oval Primitive Tool ( O ) วาดวงกลมแบบปรับแต่งรูปทรงได้

PolyStar Tool วาดรูปหลายเหลี่ยม/รูปดาว

Pencil Tool ( Y ) ดินสอวาดภาพ

Brush Tool ( B ) แปรงระบายสี

Ink Bottle Tool ( S ) ปรับแต่งเส้นขอบของวัตถุ

Paint Bucket Tool ( K ) เทสีพื้น

Eyedropper Tool ( I ) คัดลอกสีที่ต้องการ

Eraser Tool ( E ) ยางลบ

Hand Tool ( H ) จับ Stage เลื่อนไปยังที่ต้องการ

Zoom Tool ( M,Z ) ซูมย่อ/ขยายหน้าจอ

Stroke color ปรับแต่งสีของเส้นขอบ

Fill color ปรับแต่งสีของพื้น

Black and white เปลี่ยนสี Stroke Color กับ Fill Color เป็นสีขาว/ดำ

Swap colors สลับสีระหว่าง Stroke Color กับ Fill Color

No color เปลี่ยนสี Stroke Color ให้ไม่มีสี

1.5 การสร้างไฟล์งาน

ในการเปิดโปรแกรมจะปรากฏหน้าจอ Welcome Screen เพื่อให้คลิกเลือกรูปแบบในการสร้างไฟล์งาน จากนั้นจึงสามารถปรับขนาดของสเตจได้ตามต้องการ

1. คลิกเลือก Flash File (ActionScript 2.0) จากส่วนของ Create New เพื่อสร้างไฟล์งานใหม่

1. คลิกปุ่ม จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Document Properties ขึ้นมา

Hand tool เป็นเครื่องมือที่ใช้เลื่อนและปรับขนาดของ Stage

• Drag & Drop เพื่อเลื่อน Stage

• ดับเบิลคลิกที่ กำหนดขนาดของ Stage ให้มีขนาดพอดีกับความกว้างของจอภาพ (Fit on screen)

Zoom tool เป็นเครื่องมือปรับขนาดของ Stage

ที่ปรากฏอยู่มุมบนขวาของ Stage หรือเลือกจากเมนูคำสั่ง View, Zoom in/Zoom out/Magnifier ได้เช่นเดียวกัน

1.7 การทดสอบผลงาน

ภายหลังจากการออกแบบภาพเคลื่อนไหวเรียบร้อยแล้ว จากนั้นเราสามารถตรวจสอบผลงานที่สร้างไว้ได้ ดังนี้

1. คลิกเมนู Control > Test Movie หรือกดปุ่ม Ctrl + Enter จากนั้นผลงานที่สร้างไว้จะปรากฏขึ้นมาในลักษณะเป็นมูฟวี่
2. หรือสามารถดูการเคลื่อนไหวของออบเจ็กต์ที่อยู่ในแต่ล่ะเฟรมได้โดยคลิกที่เมนู Control > Play หรือกดปุ่ม Enter ออบเจ็กต์บนสเตจก็จะเคลื่อนไหวตามที่ได้ออกแบบไว้

1.8 การบันทึกไฟล์

ภาพที่วาดที่สร้างเสร็จแล้ว หรือปรับแต่งแก้ไขแล้ว ควรบันทึกไฟล์เก็บไว้ทุกครั้ง โดยไฟล์

ต้นฉบับจะได้ส่วนขยายเป็น .fla การบันทึกไฟล์สามารถใช้คำสั่ง File > Save เพื่อบันทึกลงไฟล์เดิม หรือ File > Save As… เพื่อบันทึกเป็นไฟล์ใหม่

จุดสังเกตว่าไฟล์ได้ผ่านการบันทึกแล้วหรือไม่ ก็ดูได้จากชื่อไฟล์ใน Title Bar หากมีเครื่องหมาย * แสดงว่ายังไม่ผ่านการบันทึก

เนื่องจากไฟล์ .fla เป็นไฟล์ต้นฉบับ ไม่สามารถนำไปใช้งานได้ ก่อนนำไฟล์ภาพที่สร้างด้วย Flash ไปใช้งาน จำเป็นต้องบันทึกในฟอร์แมตที่เหมาะสม ดังนี้

1) การบันทึกภาพนิ่งในฟอร์แมต GIF

การบันทึกภาพวาดในฟอร์แมต GIF ทำได้โดยเลือกคำสั่ง File > Export > Export Image… เลือกรายการ Save as Type เป็น GIF Image (*.GIF)

รายการเลือกของ GIF Format ได้แก่

• Dimension กำหนดขนาดของภาพ
• Resolution กำหนดความละเอียด มีค่าเท่ากับ 72 dpi
• Include เลือกรูปแบบการบันทึกพื้นที่รอบภาพ กรณีที่ต้องการบันทึกเฉพาะพื้นที่ที่มีภาพเท่านั้น ให้เลือกเป็น Minimum Image Area โปรแกรมจะไม่นำพื้นที่รอบภาพมาบันทึกด้วย แต่ถ้าเลือกเป็นรายการ Full Document Size จะเป็นการบันทึกเท่ากับขนาดที่ระบุจริงในรายการ Dimension
• Colors เลือกจำนวนค่าสีที่เหมาะสมกับภาพ ดังนั้นหากบางภาพมีการใช้สีน้อย ก็สามารถระบุจำนวนสีที่เหมาะสมได้
• Interlace เลือกเมื่อภาพที่วาดมีขนาดโตกว่า 200 pixel เพื่อกำหนดให้ภาพแสดงผลแบบโครงร่างก่อน แล้วค่อยๆ ชัดขึ้นเมื่อเวลาผ่านไป

• Transparent เลือกเพื่อกำหนดให้ภาพมีลักษณะของพื้นแบบโปร่งใส
• Smooth เลือกให้ภาพมีลักษณะขอบกระด้าง หรือขอบมน
• Dither solid colors เลือกลักษณะการเกลี่ยสีที่มีลักษณะใกล้เคียงกัน

2) การบันทึกภาพนิ่งในฟอร์แมต JPEG

การบันทึกภาพวาดในฟอร์แมต JPEG ทำได้โดยเลือกคำสั่ง File > Export > Export Image… เมื่อเลือกไดร์ฟ/โฟลเดอร์ และตั้งชื่อไฟล์ภาพ ให้เลือกรายการ Save as Type เป็น JPEG Image

(*.jpg) แล้วคลิกปุ่ม Save จะปรากฏรายการเลือกค่าควบคุม ดังนี้

• Dimension กำหนดขนาดของภาพ
• Resolution กำหนดความละเอียด มีค่าเท่ากับ 72 dpi
• Include เลือกรูปแบบการบันทึกพื้นที่รอบภาพ กรณีที่ต้องการบันทึกเฉพาะพื้นที่ที่มีภาพเท่านั้น ให้เลือกเป็น Minimum Image Area โปรแกรมจะไม่นำพื้นที่รอบภาพมาบันทึกด้วย แต่ถ้าเลือกเป็นรายการ Full Document Size จะเป็นการบันทึกเท่ากับขนาดที่ระบุจริงในรายการ Dimension
• Quality คุณภาพของภาพ กรณีที่นำไปใช้กับเอกสารเว็บ ควรกำหนดไว้ที่ 60 – 90 แต่ถ้าต้องการบันทึกเป็นภาพต้นฉบับเพื่อไปตกแต่งด้วยโปรแกรมอื่นต่อไป ควรกำหนดเป็น 100

Progressive เลือกเมื่อภาพที่วาดมีขนาดโตกว่า 200 pixel เพื่อกำหนดให้ภาพแสดงผลแบบโครงร่างก่อน แล้วค่อยๆ ชัดขึ้นเมื่อเวลาผ่านไป คล้ายๆ กับคุณสมบัติ Interlace ของ GIF