CHAPTER 1

INTRODUCTION TO FLASH CS3

แนะนํา Flash CS3

1. Introduction to Flash CS3 [ แนะนํา Flash CS3 ]

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

Flash CS3 เป็นผลิตภัณฑ์ทีพัฒนามาเพือสนับสนุนการสร้างงานกราฟิก ทั งภาพนิง และ

ภาพเคลือนไหว สําหรับการนําเสนอผ่านเครือข่ายอินเทอร์เน็ต Flash มีฟังก์ชันช่วยอํานวยความสะดวก

ในการสร้างผลงานหลากหลายรูปแบบ ตลอดจนชุดคําสังโปรแกรมมิงทีเรียกว่า Flash Action Script ที

เพิมประสิทธิภาพในการทํางาน และสามารถคอมไพล์ (Compile) เป็นโปรแกรมใช้งาน (Application

Program) เช่น การทําเป็น e-Card เพือแนบไปพร้อมกับ E-Mail ในโอกาสต่าง ๆ

Flash เดิมเป็นของ Macromedia แต่ปัจจุบันได้เปลียนมาเป็นของ Adobe ซึงได้ถูกพัฒนาให้มี

ลักษณะการทํางานทีสอดคล้องต่อโปรแกรมต่างๆ ในชุด Adobe มากยิงขึ น ซึงในการอบรมครังนี ได้ใช้

Adobe Flash CS3 Professional

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

1. แถบชือหัวเรือง (Title Bar) แสดงปุ ่ มควบคุมหลัก (Control Menu)

ชือโปรแกรม และปุ ่ มควบคุมหน้าต่างโปรแกรม

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

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

แสดง ได้ด้วยการคลิกเมนู Windows > Tools

4. สเตจ (Stage) พื นทีส่วนทีใช้ในการวางวัตถุต่างๆ หรืออาจจะเรียกว่า "เวที"

เมือมีการนําเสนอผลงานจะ แสดงเฉพาะวัตถุบน Stage เท่านั น

5. ไทม์ไลน์ (Timeline) หน้าต่างแสดงเส้นควบคุมเวลาสําหรับการนําเสนอผลงาน

ประกอบด้วยส่วนทํางานเกียวกับ Layer และ Timeline

6. แถบแก้ไข (Edit Bar) ใช้แสดงชือซีน จัดการกับหน้าจอโปรแกรม ปรับขนาดมุมมองของสเตจ

ซึงสามารถซ่อน/แสดง ได้ด้วยการคลิกเมนู Windows > Toolbars > Edit Bar

7. แถบคุณสมบัติ (Properties) ใช้กําหนดค่าคุณสมบัติของ สเตจและออบเจ็กต์ต่างๆ โดย

รายละเอียดทีปรากฏขึ นมาจะเปลียนแปลงไปตามเครืองมือหรือออบเจ็กต์ทีกําลังคลิกเลือก

สามารถซ่อน/แสดง ได้ด้วยการคลิกเมนู Windows > Properties > Properties หรือกดปุ ่ ม

Ctrl + F3

8. พาเนล (Panel) หน้าต่างหรือชุดคําสังพิเศษทีใช้ทํางานเฉพาะด้าน เช่น พาเนล Color ใช้เลือก

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

คลิกทีเมนู Windows

1.3 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 ให้ไม่มีสี

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

ในการเปิดโปรแกรมจะปรากฏหน้าจอ Welcome Screen เพือให้คลิกเลือกรูปแบบในการสร้าง

ไฟล์งาน จากนั นจึงสามารถปรับขนาดของสเตจได้ตามต้องการ

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

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

3. พิมพ์กําหนดขนาดความกว้าง ความสูงของพื นทีทํางานลงในช่อง Dimensions

4. ปรับสีพื นหลังที Background color ตามต้องการ

5. กําหนดอัตราการเล่นเฟรมต่อวินาทีที Frame rate โดยปกติจะอยู่ที fps

6. คลิกปุ ่ ม เพือยืนยันคําสัง จากนั นพื นทีสเตจจะมีขนาดเปลียนแปลงไปตามค่าที

กําหนดไว้

7. ออกแบบผลงานได้ตามต้องการ

1.5 มุมมองจอภาพ

Stage เป็นพื นทีหลักของการสร้างงาน ดังนั นเครืองมือชุดแรกทีควรทราบ ก็คือเครืองมือในกลุ่ม

View ซึงจะใช้ในการควบคุม Stage เป็นหลัก เช่น การย่อ/ขยาย Stage การเลือน Stage เป็นต้น

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

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

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

screen)

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

คลิกที จะปรากฏรายการเลือกย่อยที Modifier คลิกเลือกรูปแบบการย่อ หรือขยาย

จากนั นนําเมาส์มาคลิกบน Stage

ดับเบิลคลิกที เพือกําหนดให้ Stage มีขนาดเป็น 100% อย่างรวดเร็ว

การควบคุม Stage ยังสามารถใช้ปุ ่ ม Zoom ทีปรากฏอยู่มุมบนขวาของ Stage

หรือเลือกจากเมนูคําสัง View, Zoom in/Zoom out/Magnifier ได้เช่นเดียวกัน

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

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

สร้างไว้ได้ ดังนี

1. คลิกเมนู Control > Test Movie หรือกดปุ ่ ม Ctrl + Enter จากนั นผลงานทีสร้างไว้จะปรากฏ

ขึ นมาในลักษณะเป็นมูฟวี

2. หรือสามารถดูการเคลือนไหวของออบเจ็กต์ทีอยู่ในแต่ล่ะเฟรมได้โดยคลิกทีเมนู Control > Play

หรือกดปุ ่ ม Enter ออบเจ็กต์บนสเตจก็จะเคลือนไหวตามทีได้ออกแบบไว้

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

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

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

หรือ File > Save As… เพือบันทึกเป็นไฟล์ใหม ่

เนืองจากไฟล์ .fla เป็นไฟล์ต้นฉบับ ไม่สามารถนําไปใช้งานได้ ก่อนนําไฟล์ภาพทีสร้าง

ด้วย Flash ไปใช้งาน จําเป็นต้องบันทึกในฟอร์แมตทีเหมาะสม ดังนี

) การบันทึกภาพนิงในฟอร์แมต 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

) การบันทึกเป็นภาพเคลือนไหว

การบันทึกผลงานของ Flash เป็นภาพเคลือนไหว หรือ Flash Movie สามารถเลือกได้สอง

คําสัง คือ File > Export > Export Movie… เมือเลือกไดร์ฟ/โฟลเดอร์ และตั งชือไฟล์ภาพ ให้เลือก

รายการ Save as Type เป็น Flash Movie (*.swf) แล้วคลิกปุ ่ ม Save จะปรากฏรายการเลือกค่าควบคุม

ต่างๆ โดยสามารถกด OK เพือบันทึกได้โดยทันที

นอกจากนี ยังสามารถเลือกได้จากคําสัง File > Publish > Settings… ซึงเป็นคําสังทีนิยม

เลือกใช้มากกว่า กรณีทีเป็นภาพเคลือนไหว โดยจะปรากฏหน้าต่างทํางาน ดังนี

เลือกฟอร์แมตทีต้องการใช้งาน

ใช้งานในเครือข่ายอินเทอร์เน็ต ให้คลิกเลือกรายการ Flash และ HTML

สร้าง Movie ในฟอร์แมต QuickTime ให้เลือกรายการ QuickTime ซึงจะได้ไฟล์ Movie ทีมีส่วน

ขยายเป็น .mov

สร้าง Movie ทีสามารถนําเสนอได้ทนัที โดยไม่ต้องอาศัย Plug-Ins ใดๆ ให้เลือกรายการ

Windows Projector ซึงจะได้ไฟล์ทีมีส่วนขยาย .exe หรือเลือกรายการ Macintosh Projector

สําหรับการนําเสนอบนเครืองคอมพิวเตอร์ Macintosh

เมือเลือกรูปแบบไฟล์ทีต้องการแล้ว ให้คลิกปุ ่ ม Publish โปรแกรมจะแปลงงานบน Stage

เป็น Movie ตามฟอร์แมตทีเลือก โดยใช้ชือไฟล์เดียวกับไฟล์ Flash ต้นฉบับ