ANIMATION WITH
[ DOCUMENT ]
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
1.2 ส่ วนประกอบของหน้ าต่ างโปรแกรม 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 ให้ ไม่มีสี
1.4 การสร้ างไฟล์ งาน
ในการเปิ ดโปรแกรมจะปรากฏหน้ าจอ Welcome Screen
้
เพื่อให้ คลิกเลือกรูปแบบในการสร้ างไฟล์งาน จากนันจึงสามารถปรับขนาดของสเตจได้ ตามต้ องการ
1. คลิกเลือก Flash File (ActionScript 2.0) จากส่วนของ Create New เพื่อสร้ างไฟล์งานใหม่
2. คลิกปุ่ ม ้
จากนันจะปรากฏไดอะล็อกบ็อกซ์ Document Properties ขึ ้นมา
3. พิมพ์กาหนดขนาดความกว้ าง ความสูงของพื ้นที่ทางานลงในช่อง Dimensions
4. ปรับสีพื ้นหลังที่ Background color ตามต้ องการ
่
5. กาหนดอัตราการเล่นเฟรมต่อวินาทีที่ Frame rate โดยปกติจะอยูที่ 25 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.6 การทดสอบผลงาน
ภายหลังจากการออกแบบภาพเคลื่อนไหวเรี ยบร้ อยแล้ ว
้
จากนันเราสามารถตรวจสอบผลงานที่สร้ างไว้ ได้ ดังนี ้
1. คลิกเมนู Control > Test Movie หรื อกดปุ่ ม Ctrl + Enter
้
จากนันผลงานที่สร้ างไว้ จะปรากฏขึ ้นมาในลักษณะเป็ นมูฟวี่
่ ่
2. หรื อสามารถดูการเคลื่อนไหวของออบเจ็กต์ที่อยูในแต่ละเฟรมได้ โดยคลิกที่เมนู Control > Play
หรื อกดปุ่ ม Enter ออบเจ็กต์บนสเตจก็จะเคลื่อนไหวตามที่ได้ ออกแบบไว้
1.7 การบันทึกไฟล์
ุ ้
ภาพที่วาดที่สร้ างเสร็จแล้ ว หรื อปรับแต่งแก้ ไขแล้ ว ควรบันทึกไฟล์เก็บไว้ ทกครัง โดยไฟล์
่ ่
ต้ นฉบับจะได้ สวนขยายเป็ น .fla การบันทึกไฟล์สามารถใช้ คาสัง File > Save เพื่อบันทึกลงไฟล์เดิม
หรื อ File > Save As… เพื่อบันทึกเป็ นไฟล์ใหม่
เนื่องจากไฟล์ .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
่
3) การบันทึกเป็ นภาพเคลือนไหว
การบันทึกผลงานของ 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 ต้ นฉบับ
CHAPTER 2
COLOR
ทางานกับสี
2. Color [ ทางานกับสี ]
วัตถุใน Flash จะประกอบด้ วยส่วนประกอบอย่างน้ อยๆ 2 ส่วน ได้ แก่ พื ้นของวัตถุ
(Background หรื อ Fill) และเส้ นขอบวัตถุ (Stroke) แต่ละส่วนสามารถแสดงผลด้ วยสีที่แตกต่างกันได้
้
เช่น รูปสี่เหลี่ยมที่มีเส้ นขอบสีดา และพื ้นข้ างในเป็ นสีน ้าเงิน ดังนันการทางานเกี่ยวกับสี
จึงเป็ นการทางานที่จะต้ องเกี่ยวข้ องตลอดเวลา โดยอาศัยชุดเครื่ องมือเลือกสี จาก Toolbox
รายละเอียดเกี่ยวกับส่วนควบคุมสีใน Toolbox
รายการเลือก No Color จะแสดงผลเมื่อคลิกเลือกวาดสี่เหลี่ยม หรื อวาดวงกลม ดังนัน ้
ั
ก่อนเลือกสีให้ กบการวาดสี่เหลี่ยม, วงกลม ควรคลิกเลือกเครื่ องมือวาดสี่เหลี่ยม หรื อวาดวงกลม
ก่อนที่จะคลิกปุ่ มเลือกสี ซึ่ง เป็ นรายการสาคัญมาก และมักจะเป็ นรายการที่เข้ าใจผิด เช่น ถ้ า
ั
ต้ องการวาดวงกลมไม่มีสีพื ้น หลายๆ ท่าน จะใช้ วิธีการเลือก Fill Color ให้ กบสีของ Background
่ ่
เช่น ถ้ า Background เป็ นสีขาว ก็จะเลือก Fill Color เป็ นสีขาว ซึงมีความหมายที่ตางไป
ั
การเลือกสีให้ กบกราฟิ กต่างๆ ที่วาดด้ วยเครื่ องมือของ Flash
่
นอกจากจะใช้ สวนควบคุมสีที่กล่าวไปแล้ ว ก็จะมีรายการเลือกสีใน Properties Panel
้
ของเครื่ องมือนันๆ
แผงควบคุมสี (Color Panel)
Color Panel เป็ นการเพิ่มประสิทธิภาพของการทางานเกี่ยวกับสี โดยเฉพาะในส่วนที่เป็ น
การไล่โทนสี (Gradient) เนื่องจากการสร้ างชุดสีการไล่โทน ไม่สามารถทาได้ จากส่วนควบคุมสี
ปกติ Flash เตรี ยม Panel เกี่ยวกับสีไว้ 2 ชุดคือ
Swatches ซึงมีการทางาน/ใช้ งานลักษณะเดียวกับ Toolbox
่
Color มีสวนเพิ่มเติมการใช้ สีมากกว่าปกติ เช่น การทาสีแบบไล่โทนลักษณะต่างๆ,
่
้
การใช้ ภาพกราฟิ กมาเป็ นพื ้นของกราฟิ ก (Texture) รวมทังการปรับค่าความโปร่งใสของสี
(Alpha)
่ ่ ู
การเลือกรายการจาก Color มีรายการที่นาสนใจ คือ Fill Type ซึงจะช่วยให้ ผ้ ใช้ สามารถ
เลือกรูปแบบของสีได้ หลากหลายลักษณะ เช่น สีพื ้น (Solid Color), สีไล่โทนแบบเส้ นตรง (Linear
Gradient), สีไล่โทนแบบรัศมี (Radial Gradient) และการนาภาพจากภายนอกมาเป็ นพื ้นของวัตถุ
(Bitmap Background)
ชุดสีแบบไล่โทน
คลิกเลือกรายการ Fill Type เป็ น Linear (ไล่โทนในแนวระนาบ) หรื อ Radial
(ไล่โทนในแนวรัศมี)
นาเมาส์ไปคลิกใต้ Gradient definition bar จะปรากฏ Gradient Pointer กาหนดจานวน
Gradient Pointer ตามต้ องการ
ถ้ าต้ องการลบ Gradient Pointer ให้ นาเมาส์ไปชี ้ ณ Gradient Pointer ที่ต้องการลบ
แล้ วลากออกจาก Gradient definition bar
กาหนดสีให้ กบ Gradient Pointer โดยคลิกที่ Gradient Pointer ชิ ้นที่ต้องการ
ั
้
จากนันคลิกเลือกสีจาก Current Color ทาซ ้ากับ Gradient Pointer ตาแหน่งอื่น
สามารถเลื่อนปรับตาแหน่งของ Gradient Pointer โดยใช้ หลัก Drag & Drop
คลิกปุ่ ม Color Mixer Option Menu แล้ วเลือกคาสัง Add Swatch
่
ั
เพื่อเพิ่มสีที่กาหนดให้ กบโปรแกรม
ั
ความโปร่ งใสของสีวตถุ (Alpha)
รูปด้ านหน้ าที่ไม่ได้ กาหนดค่าความโปร่งใส ก็จะซ้ อนทับรูปด้ านหลังแบบไม่เห็นภาพด้ านหลัง
่ ั
แต่ถ้ากาหนดรูปด้ านหน้ าให้ มีคาโปร่งใส ก็จะทาให้ สีของรูปด้ านหน้ ามีลกษณะจาง
และมองทะลุไปเห็นรูปด้ านหลังได้
CHAPTER 3
SHAPE
วาดรูปทรงพื้นฐาน
้
3. Shape [ วาดรู ปทรงพืนฐาน ]
3.1 รู ปแบบการวาดภาพ
การวาดภาพจากโปรแกรม Flash สามารถแบ่งออกเป็ น 2 รูปแบบ ดังนี ้
1) การวาดแบบ Merge Drawing รูปทรงที่วาดจะมีผลต่อรูปทรงอื่น เช่น
เมื่อนารูปทรงที่มีพื ้นเป็ นสีเดียวมาซ้ อนทับ ก็จะถูกรวมเป็ นชิ ้นเดียวกัน แต่หากมีสีแตกต่าง
ู ่
เมื่อเคลื่อนย้ ายส่วนที่ถกซ้ อนทับก็จะหายไปโดยอัตโนมัติ ซึงสามารถวาดได้ ด้วยการคลิกยกเลิกปุ่ ม
Object Drawing ที่
ทูลพาเนล
รูปทรงที่มีพื ้นและเส้ นขอบ เมื่อนามาซ้ อนทับและ ้
เส้ นขอบจะกลายเป็ นของรูปทรงนัน
ดับเบิลคลิกลากออกมา
2) การวาดแบบ Object Drawing
่ ้
ซึงรูปทรงทังในส่วนของเส้ นและพื ้นผิวจะกลายเป็ นชิ ้นเดียวกัน
่
หากนามาซ้ อนทับก็จะไม่สงผลทาให้ รูปทรงเปลี่ยนแปลงรูปร่างไปแต่อย่างใด
โดยสามารถวาดได้ โดยการคลิกปุ่ ม Object Drawing
่
ซึงจะปรากฏกรอบสี่เหลี่ยมขึ ้นมาเมื่อเลือกหรื อวาดรูปทรงเสร็จ
เมื่อนารูปทรงแบบ Object Drawing ั
รูปทรงก็จะมีลกษณะดังเดิม
มาซ้ อนทับและคลิกลากออกมา
3.2 การกาหนดคุณสมบัติของรู ปทรง
เริ่มต้ นก่อนที่จะวาดภาพใดๆ อาจกาหนดค่าคุณสมบัตเิ กี่ยวกับส่วนของเส้ นและพื ้นของรูปทรง
่ ่
แล้ วจึงเลือกปุ่ มเครื่ องมือ เพื่อวาดภาพต่างๆ ก็ได้ ซึงค่าคุณสมบัติตางๆ เป็ นดังนี ้
Stroke Color สีเส้ น
Stroke Height ความหนาของเส้ น
Stroke Style รูปแบบของเส้ น
Custom Stroke Style เลือกกาหนดรูปแบบเส้ นเอง
Cap รูปแบบของปลายเส้ น สาหรับรูปทรงแบบปลายเปิ ด โดยมีให้ เลือก 3 แบบ ดังนี ้
ั ั
None ปลายเส้ นมีลกษณะเป็ นเส้ นตัดพอดีกบความยาวของเส้ น
ั
Round ปลายเส้ นมีลกษณะโค้ งมน
ั
Square ปลายเส้ นมีลกษณะเป็ นเส้ นตัดออกมา
None Round Square
Fill Color สีพื ้น
Stroke hinting ช่วยลดการเบลอในส่วนโค้ งของเส้ นตรง
ั
Scale ความหนาของเส้ นที่สมผัสกับมุมมอง
Miter ความแหลมของมุม โดยจะสัมพันธ์กบรูปแบบของมุมที่กาหนดไว้ ในช่อง Join
ั
Join รูปแบบของมุม โดยมีให้ เลือก 3 แบบ ดังนี ้
Miter มุมแหลม
Round มุมโค้ งมน
Beval มุมตัด
Miter Round Beval
3.3 การวาดเส้ น
การวาดเส้ นสามารถแบ่งได้ เป็ นการวาดเส้ นตรงด้ วย Line Tool และการวาดเส้ นอิสระด้ วย
Pencil Tool โดยสีที่ปรากฏขึ ้นมาจะเป็ นสีที่เลือกไว้ ในช่อง Stroke Color
1) การวาดเส้นตรงด้วย Line Tool
การวาดเส้ นตรงจะมีรูปแบบการทางานที่ง่าย เพียงเลือกกาหนดสี ขนาดความหนา
้
และลวดลาย จากส่วนของ Properties ก่อนจากนันดาเนินการตามขันตอนดังนี ้ ้
1. คลิกปุ่ ม Line Tool ู ้ ั
ที่ทลพาเนล หรื อกดปุ่ ม N จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยน
เป็ น
้
2. คลิกเมาส์ 1 ครัง เพื่อกาหนดจุดเริ่ม
3. ลากเมาส์มายังตาแหน่งและทิศทางที่ต้องการ เมื่อปล่อยเมาส์ก็จะปรากฏเส้ นตรงขึ ้นมา
โดยสามารถกดปุ่ มค้ างไว้ ในขณะลากเมาส์ได้ ดังนี ้
ปุ่ ม Shift เปลี่ยนทิศทางของเส้ นไปครังละ 45 องศา
้
ปุ่ ม Alt ให้ จดเริ่มต้ นเป็ นจุดศูนย์กลางของเส้ น
ุ
2) การวาดเส้นอิ สระด้วย Pencil Tool
การวาดเส้ นอิสระด้ วย Pencil Tool
ั ิ
ผลงานที่ได้ จะมีลกษณะเหมือนกับการใช้ ดนสอวาดภาพลงบนกระดาษ
โดยสามารถเลือกปรับให้ เป็ นเส้ นตรง เส้ นโค้ ง หรื อเป็ นเส้ นอิสระได้
1. คลิกปุ่ ม Pencil Tool ้ ั
ที่พาเนล หรื อกดปุ่ ม Y จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
2. คลิกปุ่ ม Pencil Mode ค้ างไว้ แล้ วลากมาทางขวา เลือกปรับปรับรูปแบบของเส้ น
Straighten ปรับให้ เป็ นเส้ นตรง
่
Smooth ปรับให้ เป็ นเส้ นโค้ ง โดยสามารถปรับความโค้ งมนได้ ที่ชอง Smoothing ของ
Properties
Ink ไม่มีการปรับรูปแบบใดๆ ให้ ภาพใกล้ เคียงการวาดมากที่สุด
3. ลากเมาส์วาดรูปทรงที่ต้องการ โดยสามารถกดปุ่ ม Shift ค้ างไว้
้
เพื่อวาดเส้ นตรงในแนวตังหรื อแนวนอน
3.4 การวาดรู ปทรงเรขาคณิต
่
1) วาดรู ปสี เ่ หลี ยมด้วย Rectangle Tool
การวาดรูปสี่เหลี่ยมด้ วย Rectangle Tool จะสามารถปรับแต่งเส้ น Path ด้ วยปุ่ มเครื่ องมือ Pen
้
ได้ แต่จะต้ องกาหนดค่าความโค้ งของมุมก่อนที่จะทาการวาด สาหรับขันตอนมีดงนี ้ั
1. คลิกปุ่ ม Rectangle Tool ู
ที่ทลพาเนล หรื อกดปุ่ ม R
้ ั
จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
ิ ้
2. กาหนดค่าคุณสมบัตพร้ อมทังความโค้ งของมุมทัง้ 4 ของรูปสี่เหลี่ยมลงใน Properties
่ ่
โดยในที่นี ้ใช้ คา 0 ซึง จะได้ เป็ นสี่เหลี่ยมมุมฉาก
้
3. คลิกเมาส์ 1 ครัง เพื่อกาหนดจุดเริ่มต้ น
4. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ต้องการ
เมื่อปล่อยเมาส์ก็จะปรากฏรูปสี่เหลี่ยมขึ ้นมา โดยสามารถกดปุ่ มค้ างไว้ ในขณะลากเมาส์ได้
ดังนี ้
ปุ่ ม Shift วาดรูปสี่เหลี่ยมจัตรัส ุ
ปุ่ ม Alt วาดรูปสี่เหลี่ยมออกมาจากศูนย์กลาง
ปุ่ ม เพิ่มความโค้ งของมุม
ปุ่ ม ลดความโค้ งของมุม
ปุ่ ม Alt ค้ างไว้ และคลิกลงบนสเตจ เพื่อกาหนดค่าในการวาดรูปสี่เหลี่ยมที่มีขนาดแน่นอน
่
2) วาดรู ปสี เ่ หลี ยมพร้ อมปรับแต่งรู ปทรงด้วย Rectangle Primitive Tool
เมื่อวาดรูปสี่เหลี่ยมด้ วยปุ่ ม Rectangle Primitive Tool จะปรากฏจุดควบคุมขึ ้นมา
่
ซึงช่วยให้ สามารถปรับแต่งรูปทรงในภายหลังได้ และหากกดปุ่ มต่างๆ
ค้ างไว้ ก็จะให้ ผลเช่นเดียวกับการสร้ างรูปสี่เหลี่ยมด้ วยปุ่ ม Rectangle Tool
1. คลิกปุ่ ม Rectangle Primitive Tool ู
ที่ทลพาเนล หรื อกดปุ่ ม R
้ ั
จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
้
2. คลิกเมาส์ 1 ครัง เพื่อกาหนดจุดเริ่มต้ น
3. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ต้องการ
้
เมื่อปล่อยเมาส์ก็จะปรากฏรูปสี่เหลี่ยมพร้ อมทังจุดควบคุมขึ ้นมา
่
ซึงสามารถพิมพ์เปลี่ยนค่าความโค้ งของมุมทัง้ 4 ลงใน Properties
้
หรื อให้ ดาเนินการตามขันตอนที่ 4
4. คลิกปุ่ ม Selection Tool ู
ที่ทลพาเนล หรื อจะกดปุ่ ม V
้ ั
5. คลิกบริเวณมุมของรูปสี่เหลี่ยม จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
6. ลากเมาส์เข้ า-ออกเปลี่ยนความโค้ งมนของมุม ได้ ตามต้ องการ
3) วาดรู ปวงกลมด้วย Oval Tool
่ ้
การวาดรูปวงกลมจะสามารถกาหนดค่าคุณสมบัติตางๆ พร้ อมทังค่ามุมเริ่มต้ น มุมสุดท้ าย
และรัศมีวงกลมใน รวมถึงกาหนดให้ เป็ นรูปทรงแบบปิ ดหรื อแบบเปิ ดที่มีเฉพาะเส้ นก็ได้
ู ้ ั
1. คลิกปุ่ ม Oval Tool ที่ทลพาเนล หรื อกดปุ่ ม O จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยน
เป็ น
ิ ้
2. กาหนดค่าคุณสมบัตพร้ อมทังค่ามุมเริ่มต้ น มุมสุดท้ าย และรัศมีวงกลมในของรูปวงกลม ลงใน
่ ่
Properties โดยในที่นี ้ใช้ คา 0 ซึงจะได้ เป็ นรูปวงกลม/วงรี
้
3. คลิกเมาส์ 1 ครัง เพื่อกาหนดจุดเริ่มต้ น
4. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ต้องการ เมื่อปล่อยเมาส์ก็จะปรากฏรูปวงกลมขึ ้นมา
ปุ่ ม Shift วาดรูปวงกลม
ปุ่ ม Alt วาดรูปวงกลมออกมาจากศูนย์กลาง
ปุ่ ม Alt ค้ างไว้ และคลิกลงบนสเตจ เพื่อกาหนดค่าในการวาดรูปวงกลมที่มีขนาดแน่นอน
4) วาดรู ปวงกลมพร้อมปรับแต่งรู ปทรงด้วย Oval Primitive Tool
สาหรับรุปวงกลมที่สร้ างด้ วยปุ่ ม Oval Primitive Tool
ิ
จะสามารถเลือกกาหนดค่าคุณสมบัตหรื อเลือกปรับแต่งรูปทรงจากจุดควบคุมที่ปรากฏขึ ้นมาในภายหลั
งก็ได้
1. คลิกปุ่ ม Oval Primitive Tool ู
ที่ทลพาเนล หรื อกดปุ่ ม O
้ ั
จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
้
2. คลิกเมาส์ 1 ครัง เพื่อกาหนดจุดเริ่มต้ น
3. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ต้องการ
้ ่
เมื่อปล่อยเมาส์ก็จะปรากฏรูปวงกลมพร้ อมทังจุดควบคุมขึ ้นมา ซึงสามารถพิมพ์เปลี่ยนค่าลงใน
้
Properties หรื อให้ ดาเนินการตามขันตอนที่ 4
4. คลิกปุ่ ม Selection Tool ู
ที่ทลพาเนล หรื อจะกดปุ่ ม V
ุ ้ ั
5. คลิกที่จดควบคุม จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
6. ลากเมาส์ขึ ้น-ลง เพื่อปรับมุมเริ่มต้ น
ุ
7. คลิกที่จดควบคุม
8. ลากเมาส์ขึ ้น-ลง เพื่อปรับมุมสุดท้ าย
ุ
9. คลิกที่จดควบคุม
10. ลากเมาส์เข้ า-ออก เพื่อปรับรัศมีของวงกลมใน
่
5) วาดรู ปหลายเหลี ยม/รู ปดาวด้วย PolyStar Tool
สาหรับปุ่ ม PolyStar Tool จะช่วยให้ สามารถวาดรูปหลายเหลี่ยมหรื อรูปดาวได้ ตามต้ องการ
ั้
โดยสามารถกาหนดด้ านหรื อแฉกได้ ตงแต่ 3-32 ด้ าน
1. คลิกปุ่ ม PolyStar Tool ู ้ ั
ที่ทลพาเนลจากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
2. ที่ Properties ให้ คลิกปุ่ ม ้
จากนันปรากฏไดอะล็อกบ็อกซ์ Tool Settings ขึ ้นมา
่
3. ที่ชอง Style ให้ คลิกเลือกรูปแบบของรูปทรง โดยมีรายละเอียดดังนี ้
polygon วาดรูปหลายเหลี่ยม
star วาดรูปดาว
่ ั้
4. พิมพ์จานวนด้ าน/แฉกลงในช่อง Number of Sides โดยพิมพ์คาได้ ตงแต่ 3-32
่ ่ ั้ ่
5. พิมพ์คาความลึกของแฉกดาวลงในช่อง Star point size โดยพิมพ์คาได้ ตงแต่ 0-1 ซึงค่า 0
รูปดาวจะมีความแหลมมากที่สด ุ
6. คลิกปุ่ ม ่
เพื่อยืนยันคาสัง
้
7. คลิกเมาส์ 1 ครัง เพื่อกาหนดจุดเริ่มต้ น
8. ลากเมาส์ทแยงออกมาจากจุดศูนย์กลาง เมื่อปล่อยเมาส์ก็จะปรากฏรูปหลายเหลี่ยม/รูปดาว
ขึ ้นมา
3.5 การใช้ แปรงพู่กัน
่ ั
Brush Tool เปรี ยบเสมือนแปรงพูกนที่ใช้ วาดภาพลาดเส้ นหรื อระบายสีลงบนรูปทรงต่างๆ
โดยสามารถกาหนดขนาดของหัวแปรง ลักษณะของหัวแปรง และรูปแบบในการระบายสีได้ ด้วย
1) วาดภาพลายเส้นด้วย Brush Tool
การวาดเส้ นอิสระด้ วย Pencil Tool สีที่ปรากฏขึ ้นมาจะเป็ นสีเส้ น (Stroke)
้ ั
แต่สาหรับการวาดภาพลายเส้ นด้ วย Brush Tool จะใช้ สีพื ้น (Fill) แทน สาหรับขันตอนมีดงนี ้
1. คลิกปุ่ ม Brush Tool ู ้ ั
ที่ทลพาเนล หรื อกดปุ่ ม B จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยน
เป็ น
2. คลิกปุ่ ม Brush Size ค้ างไว้ และเลือกขนาดของหัวแปรง
3. คลิกปุ่ ม Brush Shape ค้ างไว้ และเลือกลักษณะของหัวแปรง
4. ลากเมาส์วาดรูปทรงที่ต้องการ โดยสามารถกดปุ่ ม Shift ค้ างไว้
้
เพื่อวาดเส้ นตรงในแนวตังหรื อแนวนอน
้
2) ระบายสี ดวย Brush Tool
นอกจากการวาดภาพลายเส้ นแล้ ว Brush Tool ยังสามารถใช้ ระบายสีได้ อีก
โดยหากกาหนดขนาดและลักษณะของหัวแปรงเรี ยบร้ อยแล้ ว
ั
ก็ยงสามารถเลือกรูปแบบในการระบายสีได้ ด้วย
1. คลิกปุ่ ม Brush Tool ู ้ ั
ที่ทลพาเนล หรื อกดปุ่ ม B จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยน
เป็ น
2. คลิกปุ่ ม Brush Mode ค้ างไว้ แล้ วเลือกรูปแบบในการระบายสี
Paint Normal ระบายทับเส้ นและพื ้นของรูปทรง
Paint Fills ระบายทับเฉพาะส่วนของพื ้นโดยไม่มีผลต่อเส้ น
Paint Behind ระบายเป็ นพื ้นหลังโดยไม่มีผลต่อรูป
Paint Selection ระบายเฉพาะพื ้นของบริเวณที่เลือกโดยไม่มีผลต่อเส้ นและพื ้นหลัง
Paint Inside ระบายภายในขอบเขตของพื ้นที่ด้านใน
3. ลากเมาส์ระบายสีลงบนรูปทรงได้ ตามต้ องการ
Paint Normal Paint Fills Paint Behind
Paint Selection Paint Inside
3.6 การลบรู ปทรง
้
การลบด้ วยปุ่ ม Eraser Tool จะสามารถเลือกลบทังรูปทรงหรื อเลือกลบเฉพาะเส้ นหรื อพื ้นก็ได้
้
อีกทังยังสามารถเลือกเปลี่ยนขนาดและลักษณะของหัวยางลบได้ อีกด้ วย
1) ลบรูปทรงด้ วย Eraser Tool
เมื่อเลือกลบรูปทรงด้ วย Eraser Tool จะมีรูปแบบในการลบเพิ่มขึ ้นมาให้ เลือก เช่น
สามารถลบเส้ นและพื ้น ลบเฉพาะพื ้น ลบเฉพาะเส้ น ลบเฉพาะส่วนที่เลือก
้ ั
หรื อลบเฉพาะขอบเขตของพื ้นที่ด้านในก็ได้ สาหรับขันตอนมีดงนี ้
1. คลิกปุ่ ม Eraser Tool ู ้ ั
ที่ทลพาเนล หรื อกดปุ่ ม E จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยน
เป็ น
2. คลิกปุ่ ม Eraser Mode ค้ างไว้ แล้ วเลือกรูปแบบในการลบ
Eraser Normal ลบเส้ นและพื ้นของรูปทรง
Eraser Fills ลบเฉพาะส่วนของพื ้นโดยไม่มีผลต่อเส้ น
Eraser Lines ลบเฉพาะส่วนของเส้ นโดยไม่มีผลต่อพื ้น
Eraser Selected Fills ลบเฉพาะพื ้นของบริเวณที่เลือกโดยไม่มีผลต่อเส้ น
Eraser Inside ลบภายในขอบเขตของพื ้นที่ด้านใน
3. คลิกปุ่ ม Eraser Shape ค้ างไว้ และเลือกขนาดของหัวยางลบ
4. ลากเมาส์ลบบริเวณพื ้นที่ที่ต้องการ
Eraser Normal Eraser Fills Eraser Lines
Eraser Selected Fills Eraser Inside
้ ุ่
2) ลบเส้น/พืนด้วย Eraser Tool โดยใช้ปม Faucet
้
ไม่เพียงแต่การลบในรูปแบบปกติเท่านัน แต่หากต้ องการลบเส้ นหรื อพื ้นของรูปทรงอย่างรวดเร็ว
้ ้ ั
ก็สามารถทาได้ เพียงคลิกปุ่ ม Faucet ไว้ ก่อนเท่านัน สาหรับขันตอนมีดงนี ้
1. คลิกปุ่ ม Eraser Tool ู
ที่ทลพาเนล หรื อกดปุ่ ม E
้ ั
2. คลิกปุ่ ม Faucet จากนันตัวชี ้เมาส์จะมีลกษณะเปลี่ยนเป็ น
3. คลิกลงบนเส้ นหรื อพื ้นของรูปทรงที่ต้องการลบ
CHAPTER 4
SELECTION
การเลือกวัตถุ
4. Selection [ การเลือกวัตถุ ]
วัตถุในความหมายนี ้ ก็คือ รูปทรง รูปภาพ ภาพกราฟิ กที่วาด หรื อนาเข้ ามาใช้ งานใน
่ ้
Flashนันเอง การเลือกวัตถุ เป็ นขันตอนสาคัญในการปรับเปลี่ยน แก้ ไข แปลงวัตถุ
ั
โดยโปรแกรมเตรี ยมเครื่ องมือเลือกวัตถุดงนี ้
Selection Tool สาหรับเลือกวัตถุในสภาวะปกติ
Subselection Tool สาหรับการเลือกวัตถุในโหมดจุดเชื่อม
Lasso Tool สาหรับการเลือกวัตถุที่มีรูปทรงอิสระ
้ ่ ่
หรื อกาหนดขอบเขตการเลือกอิสระรวมทังการเลือกโดยใช้ คาสีที่มีคาเดียวกันหรื อใกล้ เคียงกัน
ุ ุ
สิ่งสาคัญที่สดในการเลือกวัตถุใน Flash ก็คือ อย่าลืมว่าวัตถุทกชิ ้นเกิดจาก “จุด” หลายๆ
จุดมาประกอบรวมกัน และแต่ละวัตถุจะประกอบด้ วยโครงสร้ างอย่างน้ อย 2 ส่วนคือ ส่วนที่เป็ น “Fill”
และส่วนที่เป็ น “Stroke” ดังนี ้
4.1 การเลือกวัตถุ หรือกลุ่มวัตถุด้วย Selection Tool
คลิกเลือกเครื่ องมือ Selection Tool
เลือกวัตถุ โดยยึดหลักดังนี ้
เลือกเส้ นขอบของวัตถุ นาเมาส์ไปชี ้ที่เส้ นขอบวัตถุ แล้ วคลิกหรื อ ดับเบิลคลิก
เลือกพื ้นวัตถุ นาเมาส์ไปชี ้ที่พื ้นวัตถุ แล้ วคลิกหรื อ ดับเบิลคลิก
เลือกวัตถุทงชิ ้น นาเมาส์ไปชี ้ที่วตถุ แล้ วดับเบิลคลิก
ั้ ั
เลือกวัตถุทงชิ ้น นาเมาส์ไปชี ้ ณ ตาแหน่งมุมของวัตถุ แล้ วลากกรอบสี่เหลี่ยมคลุมวัตถุ
ั้
เลือกวัตถุหลายๆ ชิ ้น นาเมาส์ไปชี ้ ณ ตาแหน่งมุมของวัตถุ แล้ วลากกรอบสี่เหลี่ยมคลุมวัตถุ
เลือกวัตถุหลายๆ ชิ ้น คลิกวัตถุชิ ้นที่ 1 กดปุ่ ม Shift ค้ างไว้ แล้ วคลิกวัตถุชิ ้นถัดไปเรื่ อยๆ
เลือกวัตถุทกชิ ้นบน Workspace และ Stage กดปุ่ ม Ctrl + A
ุ
4.2 ยกเลิกการเลือกวัตถุ
นาเมาส์ไปคลิกบนตาแหน่งว่างๆ ของ Stage หรื อ เลือกเมนูคาสัง Edit > Deselect All
่
4.3 ซ่ อนการเลือกวัตถุ
้ ั่
บางครังผู้ใช้ อาจจะต้ องการซ่อนการเลือก (Selection) ไว้ ชวคราว เพื่อทางานหรื อ
ู ่ ่
ตรวจสอบผลให้ ถกต้ องก่อนการใช้ งานจริง ซึงกระทาได้ โดยเลือกเมนูคาสัง View > Hide Edges
หรื อกดปุ่ ม Ctrl + H
4.4 การยกเลิกคาสั่ง (Undo)
่ ่ ้
เมื่อสังงานใดๆ ผิดพลาด สามารถย้ อนกลับ หรื อยกเลิกคาสังนันๆ ได้ โดยคลิกปุ่ ม Ctrl + Z
่ ่
หรื อ Edit > Undo… ซึงสามารถยกเลิกคาสังย้ อนหลังได้ มากกว่า 1 ครัง ้
4.5 ปรับแต่ ง แก้ ไขวัตถุ
จุดเด่นของการสร้ างวัตถุด้วย Flash ก็คือวัตถุ หรื อกราฟิ กที่สร้ างไว้ แล้ ว สามารถปรับแต่ง
แก้ ไข ปรับเปลี่ยนรูปทรง ขนาด และลักษณะได้ ง่าย รวดเร็ว
1) เปลี ่ยนรู ปทรง
กราฟิ กจาก Flash เกิดจากการรวมกันของ “จุด” ทาให้ การปรับแต่ง เปลี่ยนรูปทรงกระทา
ได้ ง่าย และสะดวก เพียงแต่ใช้ หลักการ Drag & Drop ก็ทาให้ รูปทรงพื ้นฐาน เช่น วงกลม, วงรี ,
สี่เหลี่ยม เป็ นสภาพเป็ นรูปทรงอิสระอื่นๆ ได้ ตามต้ องการ เช่น
การเปลี่ยนรูปทรงของวัตถุ มีหลักการดังนี ้
วาดรูปทรงพื ้นฐานที่ต้องการ จากตัวอย่างคือรูปสี่เหลี่ยม
เลือกเครื่ องมือ Selection
นาเมาส์ไปชี ้บริเวณเส้ นขอบของรูป สังเกตเมาส์จะมีรูปร่างเป็ น กดปุ่ มเมาส์ค้างไว้
เมื่อลากเมาส์รูปทรงจะถูกยึดหรื อขยาย หรื อหดตัวตามทิศทางการลากเมาส์
นาเมาส์ไปชี ้บริเวณมุมเหลี่ยมของรูป สังเกตเมาส์จะมีรูปร่างเป็ น กดปุ่ มเมาส์ค้างไว้
เมื่อลากเมาส์รูปทรงจะถูกยึดหรื อขยาย หรื อบิดตัวตามทิศทางการลากเมาส์
2) ตัวอย่างการวาดจรวดแบบง่าย
1. วาดสี่เหลี่ยมผืนผ้ า
ุ
2. เลือกเครื่ องมือ Move เลื่อนไปชี ้ที่มมบนขวาของสี่เหลี่ยม
ดึงเข้ ามาตาแหน่งกึ่งกลางของด้ านขวา ถ้ าดึงแล้ วสัดส่วนบิดเบี ้ยวให้ คลิก
้
เพื่อตรึงตาแหน่งการบิดภาพ จากนัน ทาซ ้ากับมุมล่างขวา
3. เลื่อนไปชี ้ที่ขอบซ้ าย แล้ วดึงเข้ ามาด้ านใน ให้ ได้ เป็ นรูปจรวดดังตัวอย่าง
3) การย้ายวัตถุ
คลิกเลือกเครื่ องมือ Selection Tool
เลือกวัตถุ แล้ วลากเมาส์เพื่อย้ ายวัตถุไปยังตาแหน่งใหม่
เลื่อนวัตถุเป็ นแนวเฉียง 45 องศา ให้ กด Shift ด้ วย
เลื่อนวัตถุเป็ นระยะทางสันๆ ครังละ 1 pixel ให้ ใช้ ปมลูกศร
้ ้ ุ่
เลื่อนวัตถุเป็ นระยะทางสันๆ ครังละ 10 pixel ให้ ใช้ ปมลูกศร พร้ อมกับการกด Shift
้ ้ ุ่
เลื่อนวัตถุไปยังตาแหน่งต่างๆ โดยระบุพิกด ให้ ระบุพิกด x, y จาก Shape
ั ั
ั
Propertiesตาแหน่งมุมบนซ้ ายของ Stage จะมีพิกดเป็ น 0, 0
4) การย่อ/ขยาย และปรับรู ปทรงของวัตถุ
เลือกวัตถุ
คลิกปุ่ มเครื่ องมือ Free Transform Tool
นาเมาส์ไปชี ้ที่มม หรื อขอบวัตถุ แล้ ว Drag & Drop เพื่อปรับขนาด หรื อรูปทรงตามต้ องการ
ุ
คลิกเลือกจากเมนูคาสัง Modify > Transform,…
่
่ ่ ้ ่ ่
ซึงมีคาสังให้ เลือกทังคาสังหมุนวัตถุ,คาสังกลับด้ านของวัตถุ เป็ นต้ น
4.6 การจัดเรียงวัตถุ (Alignment)
้ ่ ่
บางครังวัตถุที่ต้องใช้ งานจะมีมากกว่า 1 ชิ ้น ซึงจาเป็ นต้ องจัดเรี ยงตาแหน่งให้ อยูในแนว
ระดับเดียวกัน หากใช้ เมาส์ลากแล้ วปล่อยโอกาสที่จะตรงกัน หรื อในแนวเดียวกันก็ทาได้ ยาก Flash
่
ได้ เตรี ยมคาสัง Align เพื่อช่วยจัดเรี ยงวัตถุได้ สะดวก รวดเร็ว
1. วาดวัตถุให้ อยู่นอก Stage
2. เลือกวัตถุด้วยเครื่ องมือ Move
3. เปิ ด Align Panel
4. คลิก ต่อด้ วย และ
4.7 การคัดลอกลักษณะเส้ นขอบวัตถุ
การคัดลอกลักษณะเส้ นขอบวัตถุ จะช่วยให้ การปรับแต่งแก้ ไขวัตถุมากกว่า 1 ชิ ้นทาได้
ั
สะดวกกว่าการปรับเปลี่ยนทีละชิ ้น ตัวอย่างมีวตถุบน Stage 3 ชิ ้นลักษณะต่างๆ กัน ดังภาพ
ต้ องการให้ วงกลม และสี่เหลี่ยมเส้ นขอบดา มีเส้ นขอบเดียวกับสี่เหลี่ยมชิ ้นที่สอง ที่มีเส้ น
ขอบเป็ นจุดสีแดง หากต้ องเลือกแล้ วปรับเปลี่ยนทีละชิ ้น ก็จะเสียเวลามาก วิธีการที่สะดวก คือ
คลิกเลือกเครื่ องมือ Eyedropper
นาเมาส์ซงมีรูปร่างเป็ น Eyedropper ไปชี ้ที่เส้ นขอบของสี่เหลี่ยมชิ ้นต้ นฉบับ
ึ่
่
(สี่เหลี่ยมด้ านขวาสุด) สังเกตได้ วาเมาส์จะมีรูปร่างเป็ น
ู ้
แสดงว่าได้ เลือกเส้ นขอบวัตถุได้ ถกต้ อง เมื่อคลิกเมาส์ 1 ครังเมาส์จะเปลี่ยนรู ปร่างเป็ น
่
แสดงว่าขณะนี ้ Flash อยูในโหมด Ink Bottle
่ ่
ซึงเป็ นโหมดในการคัดลอกลักษณะเส้ นขอบนันเอง
นาเมาส์ที่เป็ นรูปร่าง ไปคลิกบนวัตถุชิ ้นอื่นๆ ที่ต้องการปรับเปลี่ยนลักษณะเส้ นขอบ
4.8 กลุ่มวัตถุ (Group)
ภาพกราฟิ กหลายๆ ภาพ ได้ จากภาพ หรื อรูปทรงย่อยหลายๆ ชิ ้นมารวมกัน เพื่อให้ การ
ปรับแต่งแก้ ไข เคลื่อนย้ ายกระทาได้ สะดวก มักจะรวมภาพกราฟิ ก หรื อรูปทรงทุกชิ ้นที่เกี่ยวข้ อง ให้
่ ุ ่
เป็ นกลุมเดียวกันโดยเลือกวัตถุทกชิ ้น แล้ วเลือกเมนูคาสัง Modify > Group
่ ่
และเมื่อต้ องการแยกกลับสูสภาพเดิมก็เลือกคาสัง Modify > Ungroup
รู ปการ์ ตูนที เ่ กิ ดจาก Shape หลายชิ้ นประกอบรวมกัน
ปั ญหาจากการย้าย Shape ่ ั
รู ปที ยงไม่ได้รวมกลุ่ม
่ ้
รู ปที ผ่านการรวมกลุ่มแล้วจะมี เส้นขอบสีฟาล้อมรอบ
้
4.9 การแยกชินส่ วนของวัตถุ
วัตถุบางชิ ้นที่เป็ น Group หรื อ Instance เมื่อจะต้ องนามาทาเป็ น Movie แบบ Shape
่ ่
Tweening จาเป็ นต้ องแยกชิ ้นส่วนของวัตถุให้ อยูในสภาวะ “จุด” ก่อนเสมอ ซึงทาได้ โดยเลือกวัตถุ
้ ่
ก่อน จากนันจึงใช้ เมนูคาสัง Modify > Break Apart หรื อกดปุ่ ม Ctrl + B
รู ปภาพในสภาวะกลุ่ม
่
รู ปภาพที ผ่านการ Break Apart แล้ว
ี
4.10 การปรับแต่ งแก้ ไขวัตถุท่ เป็ น Group
่
วัตถุที่อยูในสภาวะ Group สามารถย่อ/ขยาย หมุนได้ อิสระ
แต่จะไม่สามารถปรับแต่งแก้ ไขเกี่ยวกับสีได้ หากต้ องการปรับเปลี่ยนสีของวัตถุที่เป็ น Group
่ ั ั้
จะต้ องเข้ าไปแก้ ไขในโหมดจอภาพเฉพาะเกี่ยวกับ Group ซึงกระทาได้ โดยการดับเบิลคลิกที่วตถุนนๆ
่ ่
จอภาพจะเข้ าสูโหมดการแก้ ไข Group ซึงสังเกตได้ จาก
Scene 1 หมายถึงจอภาพในโหมดหลัก
Group หมายถึงจอภาพในโหมดแก้ ไข Group จะสังเกตได้ วาวัตถุชิ ้นอื่น จะมีสีที่จางไป
่
จอภาพโหมดปกติ (Scene1) โหมดแก้ไข Group จะพบว่าภาพคลืนทะเลจะจางกว่าปกติ ่
่
เมื่อปรับแต่งแก้ ไขวัตถุเรี ยบร้ อยแล้ ว ให้ คลิกที่ Scene 1 เพื่อกลับสูโหมดการทางานปกติ
้
ด้ วยทุกครัง
CHAPTER 5
SYMBOL AND
INSTANCE
ซิมโบลและอินสแตนซ์
5. SYMBOL AND 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)
Graphic เป็ น Symbol ภาพนิ่ง
Button เป็ น Symbol ปุ่ มกดที่สามารถคลิกได้
Movie Clip เป็ น Symbol ภาพเคลื่อนไหว
Instance เป็ น Symbol ที่นามาใช้ งานบน Stage
5.1 ตรวจสอบ Symbol สาหรับไฟล์
้ ั้
เมื่อมีการเปิ ดไฟล์หรื อสร้ างไฟล์ใดๆ บางครังอาจจะไม่ทราบว่าไฟล์นนๆ มี Symbol ใด
่
บ้ าง โปรแกรมมีคาสังในการตรวจสอบ Symbol โดยเปิ ด Library Panel ด้ วยเมนู Window > Library
Library ที่มี Symbol
5.2 แปลงวัตถุเป็ น Symbol
การสร้ างภาพเคลื่อนไหวแบบ Motion Tweening หรื อการทาระบบโต้ ตอบ จาเป็ นต้ อง
้
ทางานกับ Symbol ดังนันวัตถุหรื อภาพกราฟิ กใดๆ ก็ตาม จะต้ องแปลงสภาพจาก Shape, Group
หรื อ Picture ให้ เป็ น Symbol ก่อนและจะต้ องเลือก Behavior ของ Symbol ให้ ตรงกับลักษณะการ
่
ใช้ งาน เช่น Symbol ที่ต้องการกาหนดให้ คลิกได้ เพื่อสังงานใดๆ จะต้ องกาหนดเป็ น Button ภาพ
ใดๆ ที่มีการเคลื่อนที่หรื อการเคลื่อนไหว เช่น ล้ อรถที่ต้องหมุน ควรกาหนดเป็ น Movie Clip หรื อ
Symbol ที่แสดงเป็ นเพียงภาพนิ่ง ก็เลือกเป็ น Graphic เป็ นต้ น
การแปลงวัตถุให้ เป็ น Symbol มีหลักการดังนี ้
วาด/สร้ าง หรื อนาเข้ าวัตถุ
เลือกวัตถุ
เลือกคาสัง Modify > Convert to Symbol… หรื อกดปุ่ ม
่
ตังชื่อในช่อง Name แล้ วเลือก Behavior ให้ เหมาะสม
้
คลิกปุ่ ม OK เพื่อยืนยันการแปลงวัตถุเป็ น Symbol
5.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
5.4 การสร้ างซิมโบลชนิดต่ างๆ
1) การสร้างซิ มโบลกราฟิ ก
การสร้ างซิมโบลกราฟิ ก จะมีรูปแบบการทางานที่ง่าย เพียงเลือกสร้ างซิมโบลใหม่
้ ่
จากนันจึงสร้ างหรื อนาเข้ าออบเจ็กต์ตางๆ เพื่อให้ กลายเป็ นซิมโบลกราฟิ ก
้
1. คลิกเมนู Insert > New Symbol หรื อกดปุ่ ม Ctrl + F8 จากนันจะปรากฏไดอะล็อกบ็อกซ์
Create New Symbol ขึ ้นมา
ั้
2. พิมพ์ตงชื่อซิมโบลลงในช่อง Name
3. ในส่วนของ Type ให้ คลิกเลือก Graphic
4. คลิกปุ่ ม ่ ้
เพื่อยืนยันคาสัง จากนันจะเข้ าสู่โหมดแก้ ไขซิมโบล
5. สร้ างหรื อนาเข้ าออบเจ็กต์ที่ต้องการให้ เป็ นซิมโบล โดยจะปรากฏ
ที่ใช้ เป็ นจุดอ้ างอิงในการวางซิมโบลขึ ้นมา
6. คลิกชื่อซีนหรื อคลิกปุ่ ม ่ ู
เพื่อกลับสูมฟวี่หลัก
7. คลิกเลือกซิมโบลที่ต้องการนามาใช้ งาน โดยจะปรากฏตัวอย่างขึ ้นมาทางด้ านบน
้
8. ลากเมาส์นามาวางบนสเตจ จากนันจะปรากฏอินสแตนซ์ขึ ้นมา
2) การสร้างซิ มโบลปุ่ ม
เมื่อสร้ างปุ่ มจะประกอบด้ วยเฟรม Up, Over, Down และ Hit
่
ซึงหากนาไปแสดงผลก็จะปรากฏขึ ้นมาตามสถานะในการทางานของเมาส์ โดยเฟรม Hit
ใช้ กาหนดขอบเขตที่ต้องการให้ มีการตอบสนองต่อเมาส์
้ ่ ู
ดังนันเนื ้อหาที่อยูในเฟรมนี ้จะไม่ถกแสดงผลออกมาเมื่อนาไปใช้ งานจริง
้
1. คลิกเมนู Insert > New Symbol หรื อกดปุ่ ม Ctrl + F8 จากนันจะปรากฏไดอะล็อกบ็อกซ์
Create New Symbol ขึ ้นมา
ั้
2. พิมพ์ตงชื่อซิมโบลลงในช่อง Name
3. ในส่วนของ Type ให้ คลิกเลือก Button
4. คลิกปุ่ ม ่ ้
เพื่อยืนยันคาสัง จากนันจะเข้ าสู่โหมดแก้ ไขซิมโบล
ั
5. ที่เฟรม Up ให้ สร้ างปุ่ มในสถานะปกติที่ยงไม่มีการคลิกเมาส์
่
6. คลิกเฟรม Over และกดปุ่ ม F6 เพื่อสร้ างคีย์เฟรมใหม่และคัดลอกออบเจ็กต์ที่อยูในเฟรม Up
7. แก้ ไขออบเจ็กต์ของเฟรม Over เช่น เปลี่ยนสี เปลี่ยนรูปทรง
เพื่อให้ แสดงเป็ นปุ่ มในสถานะที่มีการนาเมาส์มาวาง
่
8. คลิกเฟรม Down และกดปุ่ ม F6 เพื่อสร้ างคีย์เฟรมใหม่และคัดลอกออบเจ็กต์ที่อยูในเฟรม Over
9. แก้ ไขออบเจ็กต์ของเฟรม Down เพื่อให้ แสดงเป็ นปุ่ มในสถานะที่มีการนาเมาส์มาคลิก
่
10. คลิกเฟรม Down และกดปุ่ ม F6 เพื่อสร้ างคีย์เฟรมใหม่และคัดลอกออบเจ็กต์ที่อยูในเฟรม
Down
11. วาดรูปทรงกาหนดขอบเขตที่ต้องการให้ มีการตอบสนองต่อเมาส์
12. คลิกชื่อซีนหรื อคลิกปุ่ ม ่ ู
เพื่อกลับสูมฟวี่หลัก
้
13. เลือกและลากเมาส์นาซิมโบลมาวางบนสเตจ จากนันจะปรากฏปุ่ มขึ ้นมา
14. คลิกเมนู Control > Test Movie หรื อกดปุ่ ม ctrl + Enter เพื่อทดสอบการทางานผ่านทาง
Flash Player
่
2) การสร้างซิ มโบลมูฟวี คลิ ป
การสร้ างซิมโบลมูฟวี่คลิปเพื่อให้ มีการเคลื่อนไหวในลักษณะต่างๆ เช่น Frame by Frame,
Motion Tween, Shape Tween จะต้ องทางานผ่านไทม์ไลน์ของมูฟวี่คลิป
่
ซึงจะช่วยให้ สามารถแบ่งภาพเคลื่อนไหวออกเป็ นตอนย่อยๆ ได้
้
1. คลิกเมนู Insert > New Symbol หรื อกดปุ่ ม Ctrl + F8 จากนันจะปรากฏไดอะล็อกบ็อกซ์
Create New Symbol ขึ ้นมา
ั้
2. พิมพ์ตงชื่อซิมโบลลงในช่อง Name
3. ในส่วนของ Type ให้ คลิกเลือก Movie Clip
4. คลิกปุ่ ม ่ ้ ่
เพื่อยืนยันคาสัง จากนันจะเข้ าสูโหมดแก้ ไขซิมโบล
5. สร้ างหรื อนาออบเจ็กต์ที่ต้องการให้ เป็ นซิมโบลมูฟวี่คลิป
6. คลิกเฟรมที่ 50 และกดปุ่ ม F6 เพื่อสร้ างคีย์เฟรมใช้ เป็ นจุดจบของภาพเคลื่อนไหว
7. ปรับแต่งออบเจ็กต์ เช่น เคลื่อนย้ าย ปรับขนาด หมุน หรื อเปลี่ยนสี
เพื่อให้ เกิดเป็ นภาพเคลื่อนไหว
8. คลิกเฟรมที่ 1 ของไทม์ไลน์
9. ที่ Properties ในส่วนของ Tween ให้ คลิกเลือก Motion
้ ่
จากนันจะปรากฏลูกศรแสดงการสร้ างแอนิเมชันขึ ้นมา
10. คลิกชื่อซีนหรื อคลิกปุ่ ม ่ ู
เพื่อกลับสูมฟวี่หลัก
้
11. เลือกและลากเมาส์นาซิมโบลมาวางบนสเตจ จากนันจะปรากฏมูฟวี่คลิปขึ ้นมา
12. คลิกเมนู Control > Test Movie หรื อกดปุ่ ม ctrl + Enter เพื่อทดสอบการทางานผ่านทาง
Flash Player
5.5 Symbol และ Instance
วัตถุที่พร้ อมสาหรับการสร้ าง Movie ลักษณะต่างๆ รวมถึงการลงรหัส ActionScript
เพื่อทาระบบโต้ ตอบ (Interactive) เมื่อมีการสร้ างและเก็บไว้ ใน Library จะเรี ยกว่า Symbol แต่เมื่อนา
้
Symbol มาวางใช้ งานบน Stage จะเรี ยกว่า Instance ทังนี ้ Instance จะเปรี ยบเสมือนตัวแทนของ
Symbol หากมีการแก้ ไข Instance จะไม่มีผลกระทบต่อ Symbol แต่ถ้าแก้ ไข Symbol ตัวแทนหรื อ
้
Instance ทุกตัวที่เกิดจาก Symbol นันๆ จะถูกแก้ ไขตามไปโดยอัตโนมัติ
5.6 การเรียกใช้ 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 ๆ
้ ั
นันจะถูกโอนไปยังไฟล์เอกสารปั จจุบนโดยอัตโนมัติ
5.7 แก้ ไข Symbol
Symbol ที่สร้ างไว้ แล้ ว สามารถปรับเปลี่ยนแก้ ไขได้ โดย
เปิ ด Library Panel ดับเบิลคลิกที่ชื่อ Symbol ชิ ้นที่ต้องการแก้ ไข หรื อกรณีที่มี Instanceของ
Symbol ปรากฏบน Stage ก็สามารถดับเบิลคลิกที่ Instance นันๆ ได้ ทนที ้ ั
ปรากฏหน้ าต่างการทางานในโหมดแก้ ไข Symbol โดยสังเกตได้ วาตรงกลางจอภาพ
่
ั ้ ุ
มีสญลักษณ์ + และปรากฏชื่อหน้ าต่างเป็ นชื่อ Symbol นันที่มมบนซ้ ายของ Stage
แก้ ไข Symbol เหมือนกับการแก้ ไขวัตถุปกติทวไป
ั่
เมื่อแก้ ไขเรี ยบร้ อยแล้ ว สามารถกลับมาทางานในโหมดปกติได้ โดยคลิกที่ชื่อ Scene1 (หรื อ
Scene หมายเลขใดๆ ก็ได้ ตามลักษณะของชิ ้นงาน)
้
หมายเหตุ การแก้ ไข Symbol จะส่งผลต่อ Instance ที่เกิดจาก Symbol นันๆ ทุก Instance
ที่นามาใช้ งานบน Stage
5.8 แก้ ไข Instance
่ ่ ่
Instance เปรี ยบเสมือนวัตถุชิ ้นหนึง ซึงสามารถใช้ คาสังจัดการวัตถุ มาดาเนินการ
่ ั
ปรับเปลี่ยนได้ โดยไม่สงผลกระทบต่อ Symbol ต้ นฉบับ โดยมีวิธีจดการดังนี ้
วิ ธีที่ 1
คลิกเลือก Instance
ใช้ เครื่ องมือ Free Transform Tool ปรับขนาดหรื อหมุนวัตถุ
วิ ธีที่ 2
คลิกเลือก Instance
กาหนดลักษณะของสีที่ต้องการจาก Instance Properties
Brightness ความสว่าง
Tint การปรับแก้ ไขสี/ความโปร่งแสง
Alpha การปรับแก้ ไขความโปร่งแสง
Advanced การปรับแก้ ไขสีและค่าความโปร่งแสงแบบ Advanced
CHAPTER 6
TIMELINE
ควบคุมมูฟวี่ด้วยไทม์ไลน์
6. Timeline [ ควบคุมมูฟวี่ผ่านไทม์ ไลน์ ]
6.1 รู้ จักไทม์ ไลน์
่ ่
ไทม์ไลน์ (Timeline) เป็ นส่วนที่อยูทางด้ านบนของหน้ าจอ ซึงใชควบคุมสร้ างการเคลื่อนไหว
่ ่
โดยประกอบด้ วย 2 ส่วนหลัก ได้ แก่ เลเยอร์ ที่อยูด้านซ้ าย และเฟรมที่อยูทางขวา
1) ส่วนประกอบของไทม์ไลน์
่ ่ ่
โดยปกติไทม์ไลน์จะปรากฏขึ ้นมาทางด้ านบน ซึงสามารถสังให้ ซอน/แสดงได้ ด้วยการคลิกเมนู
้
Windows > Timeline หรื อกดปุ่ ม Ctrl + Alt + T จากนันจะแสดงส่วนประกอบต่างๆ ขึ ้นมาดังนี ้
่
2) ใช้เพลย์เฮดในการเลือนแสดงผล
เฟรมที่ปรากฏขึ ้นมาบนไทม์ไลน์ใช้ สาหรับสร้ างภาพเคลื่อนไหวของตัวละครในแต่ละจังหวะ
่
ซึงหากต้ องการเลื่อนเพลย์เฮด (Playhead) เพื่อดูหรื อปรับเปลี่ยนแก้ ไขเนื ้อหาของเฟรมต่างๆ
ั
สามารถทาได้ ดงนี ้
่
1. คลิกเพลย์เฮด ซึงเป็ นสี่เหลี่ยมสีแดงที่อยู่ทางด้ านบน
2. ลากเมาส์ไปยังเฟรมที่ต้องการ หรื อคลิกตาแหน่งของหมายเลขเฟรมที่ต้องการก็ได้ เช่นกัน
6.2 รู้ จักเลเยอร์
เลเยอร์ (Layer) เปรี ยบเสมือนแผ่นใสที่ใช้ ในการจัดวางองค์ประกอบต่างๆ
่ ่ ่ ่
โดยสามารถนามาเรี ยงซ้ อนทับกันได้ อย่างอิสระ ซึงออบเจ็กต์ที่อยูในเลเยอร์ ลาสุดจะอยูทางด้ านบน
เมื่อทางานก็จะส่งผลเฉพาะออบเจ็กต์ที่อยู่ในเลเยอร์ เท่านัน ้
1) สร้างเลเยอร์ ใหม่
เมื่อเริ่มสร้ างไฟล์ใหม่โปรแกรมจะเตรี ยมเลเยอร์ ที่ชื่อ Layer 1 ไว้ ให้
่
ซึงสามารถจัดวางองค์ประกอบต่างๆ ลงไปได้
และหากต้ องการสร้ างเลเยอร์ ใหม่เพื่อให้ การทางานของออบเจ็กต์ในแต่ละเลเยอร์ เป็ นอิสระต่อกัน
สามารถทาได้ ดงนี ้ ั
้
1. คลิกปุ่ ม Insert Layer ทางด้ านล่างของไทม์ไลน์ จากนันจะปรากฏเลเยอร์ ใหม่ขึ ้นมา
ทางด้ านบนของเลเยอร์ ที่ทางานอยู่
2. สร้ างออบเจ็กต์หรื อการเคลื่อนไหวลงในเลเยอร์ ใหม่ได้ ตามต้ องการ
2) สร้างและจัดเก็บเลเยอร์ ไว้ในเลเยอร์ โฟลเดอร์
่
การสร้ างเลเยอร์ โฟลเดอร์ จะช่วยให้ การจัดเก็บเลเยอร์ ตางๆ เป็ นระเบียบมากยิ่งขึ ้น
โดยสามารถสร้ างเลเยอร์ โฟลเดอร์ เพื่อนาเลเยอร์ ที่เกี่ยวข้ อง เช่น เลเยอร์ ของรูปภาพ ข้ อความ เสียง
วิดีโอ หรื อ ActionScript ไว้ ในโฟลเดอร์ เดียวกันได้ ดังนี ้
1. คลิกปุ่ ม Insert Layer Folder ทางด้ านล่างของไทม์ไลน์
้
จากนันจะปรากฏเลเยอร์ โฟลเดอร์ ใหม่ขึ ้นมาทางด้ านบนของเลเยอร์ ที่ทางานอยู่
2. คลิกเลือกเลเยอร์ ที่ต้องการจัดเก็บไว้ ในเลเยอร์ โฟลเดอร์ โดยหากกดปุ่ ม Shift ค้ างไว้
จะเป็ นการเลือกเลเยอร์ แบบเป็ นช่วง หรื อกดปุ่ ม Ctrl ค้ างไว้ จะเป็ นการเลือกเลเยอร์ อย่างอิสระ
้
3. ลากเมาส์นาไปไว้ ในเลเยอร์ โฟลเดอร์ จากนันเลเยอร์ ที่เลือกจะถูกจัดเก็บไว้ ในโฟลเดอร์
้
3) เปลี ่ยนลาดับชันเลเยอร์
่ ่
ออบเจ็กต์ที่อยู่ในเลเยอร์ บนจะถูกวางซ้ อนทับออบเจ็กต์ที่อยูในเลเยอร์ ลาง
่ ้
ซึงหากต้ องการเปลี่ยนลาดับชันของเลเยอร์
ก็จะส่งผลทาให้ การจัดลาดับของออบเจ็กต์เปลี่ยนแปลงไปด้ วย
1. เลือกเลเยอร์ ที่ต้องการเปลี่ยนลาดับชัน ้
2. ลากเมาส์เคลื่อนย้ ายไปแทรกไว้ ตาแหน่งใหม่
เมื่อปล่อยเมาส์เลเยอร์ จะถูกเปลี่ยนลาดับไปจากเดิม
4) ลบเลเยอร์
่
เมื่อไม่ต้องการใช้ งานออบเจ็กต์ที่อยูในเลเยอร์ ใดๆ ก็สามารถลบทิ ้งไปได้
่ ู ้
ซึงจะส่งผลให้ ออบเจ็กต์ที่อยู่ในเลเยอร์ ถกลบทิ ้งไปทังหมด
และหากต้ องการยกเลิกการลบเลเยอร์ ก็ให้ กดปุ่ ม
Ctrl + Z
1. เลือกเลเยอร์ ที่ต้องการลบ
2. คลิกปุ่ ม Delete Layer ทางด้ านล่างของไทม์ไลน์
้ ั้ ่
จากนันเลเยอร์ และออบเจ็กต์ทงหมดที่อยูในเลเยอร์ จะถูกลบออกไปจากไทม์ไลน์
5) ซ่อน/แสดงเลเยอร์
่ ่
ในกรณีที่ไม่แน่ใจก็สามารถสังให้ ซอนแทนการลบเลเยอร์ ได้
่ ั้ ่ ั ่
ซึงจะส่งผลให้ ออบเจ็กต์ทงหมดที่อยูในเลเยอร์ ยงคงอยู่ และเมื่อต้ องการใช้ งานจึงค่อยสังให้ แสดงเลเยอร์
1. คลิก ในคอลัมน์ ของเลเยอร์ ที่ต้องการซ่อนให้ ปรากฏเป็ นรูป
ั้ ่ ้
2. ออบเจ็กต์ทงหมดที่อยูในเลเยอร์ จะถูกซ่อนไว้ และหากคลิกอีกครังก็จะเป็ นการแสดงเลเยอร์
6) ล็อค/ปลดล็อคเลเยอร์
หากมีออบเจ็กต์เป็ นจานวนมาก
่ ้ ่
ก็สามารถสังล็อคเลเยอร์ เพื่อปองกันไม่ให้ การแก้ ไขส่งผลต่อออบเจ็กต์ที่อยูในเลเยอร์ ใดๆ ได้
1. คลิก ในคอลัมน์ ของเลเยอร์ ที่ต้องการล็อคให้ ปรากฏเป็ นรูป
ั้ ่
2. ออบเจ็กต์ทงหมดที่อยูในเลเยอร์ จะถูกล็อค
่ ้
ทาให้ ทางานได้ เฉพาะออบเจ็กต์ที่อยูในเลเยอร์ อื่นและหากคลิกอีกครัง
ก็จะเป็ นการปลดล็อคเลเยอร์
7) แสดงออบเจ็กต์ในเลเยอร์ เป็ นเส้นโครงร่ าง
โดยปกติเมื่อสร้ างเลเยอร์ จะมีสีของเส้ นโครงร่างที่แตกต่างกันไป
่ ่ ่
ซึงการแสดงออบเจ็กต์ในลักษณะเส้ นโครงร่างจะช่วยให้ เห็นความแตกต่างของออบเจ็กต์ที่อยูในแต่ละเล
้
เยอร์ อีกทังยังสามารถตรวจสอบว่ามีออบเจ็กต์ใดซ้ อนทับอยู่ทางด้ านหลังได้ ด้วย
1. คลิก ในคอลัมน์ ของเลเยอร์ ที่ต้องการแสดงเป็ นเส้ นโครงร่างให้ ปรากฏเป็ นรูป
ั้ ่ ้
2. ออบเจ็กต์ทงหมดที่อยูในเลเยอร์ จะถูกแสดงในลักษณะเป็ นเส้ นโครงร่าง และหากคลิกอีกครัง
ก็จะเป็ นการแสดงแบบปกติ
6.3 รู้ จักเฟรม
ั
เฟรม (Frame) มีลกษณะเหมือนฟิ ล์มภาพยนตร์
่
ที่แต่ละช่องใช้ แสดงภาพเคลื่อนไหวขององค์ประกอบต่างๆ โดยเฟรมที่ไม่มีออบเจ็กต์จะเป็ น
ส่วนเฟรมที่มีออบเจ็กต์จะเป็ น สาหรับตาแหน่งของเฟรมที่สร้ างการเคลื่อนไหวไว้ จะถูกเรี ยกว่า
คีย์เฟรม (Keyframe) โดยคีย์เฟรมที่ไม่มีออบเจ็กต์จะเป็ น ส่วนคีย์เฟรมที่มีออบเจ็กต์จะเป็ น
่
ซึงหากสร้ างเฟรมไว้ จานวนมาก เวลาในการแสดงมูฟวี่ก็จะมากขึ ้น แต่หากอัตราในการแสดงเฟรมสูง
ก็จะทาให้ เวลาในการแสดงมูฟวี่สนลง ั้
1) ชนิ ดของเฟรม
ั
เฟรมและคีย์เฟรม์จดเป็ นพื ้นฐานของการสร้ างภาพเคลื่อนไหว
่
ซึงสัญลักษณ์ของเฟรมจะมีรูปแบบแตกต่างกันไปตามลักษณะของเนื ้อหาที่สร้ างไว้ ดังนี ้
เฟรมนิ่ง เฟรมที่ไม่มีการเคลื่อนไหวใดๆ
่
โดยจะแสดงออบเจ็กต์ของคีย์เฟรมที่อยูทางด้ านหน้ าขึ ้นมา มีพื ้นหลังเป็ นสีเทา
Motion Tween เฟรมที่สร้ างภาพเคลื่อนไหวแบบเคลื่อนที่
่
โดยช่วงในการเคลื่อนไหวจะแสดงด้ วยรูปลูกศรสีดาบนพื ้นสีมวง
ตาแหน่งเริ่มต้ นและสิ ้นสุดจะแสดงด้ วย คีย์เฟรม
Shape Tween เฟรมที่สร้ างภาพเคลื่อนไหวแบบเปลี่ยนรูปร่าง
โดยช่วงในการเคลื่อนไหวจะแสดงด้ วยรูปลูกศรสีดาบนพื ้นสีเขียว
ตาแหน่งเริ่มต้ นและสิ ้นสุดจะแสดงด้ วย คีย์เฟรม
เส้ นประ เฟรมที่ไม่สมบูรณ์หรื อมีข้อผิดพลาด เช่น คีย์เฟรมสิ ้นสุดถูกลบไป
ตัวอักษร a เฟรมที่มีการเขียน ActionScript ไว้ ที่พาเนล Actions
ธงสีแดง เฟรมที่มีการตังชื่อเพื่อใช้ ระบุตาแหน่งแทนหมายเลขเฟรม
้
ขีดสีเขียว เฟรมที่มีการใส่หมายเหตุ เช่น ข้ อความกากับ หรื อคาอธิบายเกี่ยวกับเฟรมไว้
สมอสีทอง เฟรมที่มีการตังชื่อเพื่อใช้ เป็ นจุดอ้ างอิง
้
2) เพิ่มเฟรม
เมื่อเริ่มสร้ างไฟล์งานโปรแกรมจะเตรี ยมคีย์เฟรมเปล่า ไว้ ให้ 1 คีย์เฟรม
่ ั
และหลังจากสร้ างออบเจ็กต์ตางๆ คีย์เฟรมก็จะมีลกษณะเปลี่ยนเป็ น
่
ซึงหากต้ องการเพิ่มเฟรมเพื่อขยายช่วงเวลาในการแสดงข้ อมูล สามารถทาได้ ดงนี ้ ั
1. คลิกช่องเฟรมที่ต้องการเพิ่มเฟรม
่
2. คลิกเมาส์ขวาเลือกคาสัง Insert Frame หรื อกดปุ่ ม F5
้ ่
จากนันจะปรากฏเฟรมใหม่พร้ อมกับออบเจ็กต์ที่อยูในคีย์เฟรมทางด้ านหน้ าขึ ้นมา
3) ลบเฟรม
ในกรณีที่สร้ างเฟรมไว้ ยาวจนเกินไป
ก็สามารถลบเฟรมเพื่อให้ มีช่วงเวลาในการแสดงผลของภาพนิ่งหรื อภาพเคลื่อนไหวลดลงได้ ดังนี ้
1. เลือกเฟรมที่ต้องการลบ โดยหากกดปุ่ ม Shift ค้ างไว้ จะเป็ นการเลือกเฟรมเป็ นช่วง หรื อกดปุ่ ม
Ctrl ค้ างไว้ จะเป็ นการเลือกเฟรมอย่างอิสระ
่
2. คลิกเมาส์ขวาเลือกคาสัง Remove Frames หรื อกดปุ่ ม Shift + F5
้
จากนันเฟรมที่เลือกจะถูกลบ ทาให้ ออบเจ็กต์มีเวลาในการแสดงผลลดลง
4) เพิ่มคีย์เฟรม
่
การเพิ่มคีย์เฟรมจะช่วยให้ สร้ างผลงานแอนิเมชันในรูปแบบต่างๆ ได้ ตามต้ องการ
โดยเมื่อเพิ่มคีย์เฟรมก็จะปรากฏออบเจ็กต์ขึ ้นมาจนถึงเฟรมที่กาหนดไว้
้ ่
จากนันก็สามารถปรับเปลี่ยนแก้ ไขเพื่อให้ เกิดผลงานแอนิเมชันได้ ดังนี ้
1. คลิกช่องเฟรมที่ต้องการเพิ่มคีย์เฟรม
่
2. คลิกเมาส์ขวาเลือกคาสัง Insert Keyframe หรื อกดปุ่ ม F6
้ ่
จากนันจะปรากฏคีย์เฟรมใหม่พร้ อมกับออบเจ็กต์ที่อยูในคีย์เฟรมทางด้ านหน้ าขึ ้นมา
่
3. เปลี่ยนรูปทรง เปลี่ยนสี เคลื่อนย้ าย ปรับขนาด หรื อหมุน เพื่อให้ เกิดผลงานแอนิเมชัน
5) ลบคีย์เฟรม
ในการสร้ างคีย์เฟรมจะปรากฏเฟรมขึ ้นมาทางด้ านหน้ า
่ ่
ซึงหากต้ องการลบคีย์เฟรมที่สร้ างไว้ เพื่อไม่ให้ ปรากฏผลงานแอนิเมชันขึ ้นมา
ก็สามารถลบคีย์เฟรมออกไปได้ ดังนี ้
1. เลือกคีย์เฟรมที่ต้องการลบ
่
2. คลิกเมาส์ขวาเลือกคาสัง Clear Keyframe หรื อกดปุ่ ม Shift + F6
้
จากนันคีย์เฟรมที่เลือกจะถูกลบ ทาให้ ไม่มีการเปลี่ยนแปลงใดๆ ของออบเจ็กต์เกิดขึ ้น
่
6) เคลือนย้าย/คัดลอกเฟรม
ภายหลังจากทางานต่างๆ เรี ยบร้ อยแล้ ว
ั้
หากต้ องการเคลื่อนย้ ายหรื อคัดลอกเฟรมก็สามารถทาได้ ทงภายในเลเยอร์ เดียวกันและต่างเลเยอร์
โดยหากตาแหน่งปลายทางที่มีเฟรมอยู่ ก็จะถูกแทนที่ด้วยเฟรมใหม่
1. คลิกเฟรมที่ต้องการเคลื่อนย้ าย/คัดลอก
2. ลากเมาส์ไปยังตาแหน่งปลายทาง โดยหากดปุ่ ม Alt ค้ างไว้ จะเป็ นการคัดลอก
้ ่
จากนันจะปรากฏเฟรมใหม่พร้ อมกับข้ อมูลที่อยูในเฟรมขึ ้นมา
CHAPTER 7
ANIMATION
สร้างผลงานแอนิเมชั่น
7. Animation [ สร้ างผลงานแอนิเมชั่น ]
7.1 ภาพเคลื่อนไหวแบบเฟรมต่ อเฟรม (Frame by Frame)
การสร้ างภาพเคลื่อนไหวแบบเฟรมต่อเฟรมเป็ นการนาเอาออบเจ็กต์แต่ละชิ ้นมาเรี ยงต่อกัน
ิ ่
โดยอาจมีการปรับแต่งรูปร่างหรื อคุณสมบัตให้ เปลี่ยนแปลงไปจากออบเจ็กต์ที่อยูก่อนหน้ า
และมีการแสดงอย่างต่อเนื่องก็จะปรากฏเป็ นภาพเคลื่อนไหวขึ ้นมา
1) เริ่ มสร้างภาพเคลื ่อนไหวแบบเฟรมต่อเฟรม
้ ้
เริ่มแรกจะต้ องสร้ างออบเจ็กต์ขึ ้นมาก่อน จากนันจึงสร้ างคีย์เฟรมพร้ อมทังแก้ ไขเนื ้อหาต่างๆ
ของออบเจ็กต์เดิม ดังตัวอย่าง
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้ างออบเจ็กต์หรื อองค์ประกอบต่างๆ ที่ต้องการให้ ปรากฏเป็ นภาพเคลื่อนไหว
่ ่
3. คลิกเมาส์ขวาที่ชองเฟรมและเลือกคาสัง Insert Keyframe หรื อกดปุ่ ม F6
้ ่
จากนันจะปรากฏคีย์เฟรมใหม่พร้ อมกับออบเจ็กต์ที่อยูในคีย์เฟรมทางด้ านหน้ าขึ ้นมา
4. ปรับแต่งออบเจ็กต์หรื อคลิกปุ่ ม จาก Properties
5. ดับเบิลคลิกซิมโบลใหม่ที่ต้องการนามาเป็ นภาพเคลื่อนไหว
่ ่
6. คลิกเมาส์ขวาที่ชองเฟรมสุดท้ ายและเลือกคาสัง Insert Frame หรื อกดปุ่ ม F5
เพื่อแสดงภาพเคลื่อนไหวในคีย์เฟรมที่ 2 ให้ นานขึ ้น
ตัวอย่างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
่
2) ปรับแต่งภาพเคลือนไหวแบบเฟรมต่อเฟรม
การปรับแต่งภาพเคลื่อนไหวแบบเฟรมต่อเฟรมสามารถทาได้ เพียงคลิกปุ่ ม Edit Multiple
้ ้
Frames จากนันจึงลาก Maker ให้ ครอบคลุมเพื่อให้ เห็นออบเจ็กต์ที่อยู่ในเฟรมทังหมด
่
และเมื่อแก้ ไขใดๆ ก็จะส่งผลต่อออบเจ็กต์ที่นามาเป็ นผลงานแอนิเมชันทันที
้
1. คลิกปุ่ ม Edit Multiple Frames ทางด้ านล่างของไทม์ไลน์ จากนันปรากฏ Marker
ที่ใช้ บอกขอบเขตการแสดงเนื ้อหาของเฟรมอื่นขึ ้นมา
้
2. ลากเมาส์ปรับ Marker ให้ ครอบคลุมเฟรมทังหมดที่ต้องการปรับแต่งแก้ ไข
ั้ ่
3. คลิกไอคอนหรื อชื่อของเลเยอร์ เพื่อเลือกออบเจ็กต์ทงหมดที่อยูในเลเยอร์
4. ปรับแต่งแก้ ไขออบเจ็กต์ ได้ ตามต้ องการ
7.2 ภาพเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween)
ิ
เป็ นการกาหนดให้ ออบเจ็กต์มีการเคลื่อนไหวเปลี่ยนตาแหน่งหรื อเปลี่ยนคุณสมบัตแบบแน่นอน
่
โดยไม่เกี่ยวกับการเปลี่ยนแปลงของรูปร่าง ซึงจะต้ องสร้ างคีย์เฟรมเริ่มต้ นและสิ ้นสุด
้
จากนันจึงปรับแต่งและกาหนดให้ เป็ น Motion Tween ก็จะปรากฏภาพเคลื่อนไหวขึ ้นมา
1) เริ่ มสร้างภาพเคลื ่อนไหวแบบเคลื ่อนที ่
ออบเจ็กต์ที่นามาสร้ างภาพเคลื่อนไหวแบบเคลื่อนที่เป็ นได้ ทง้ั Object Drawing ข้ อความ
ู ่
ซิมโบล ออบเจ็กต์ที่ถกรวมกลุม ยกเว้ น Merge Drawing
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้ างออบเจ็กต์หรื อองค์ประกอบต่างๆ ที่ต้องการให้ ปรากฏเป็ นภาพเคลื่อนไหว
่ ่
3. คลิกเมาส์ขวาที่ชองเฟรมสุดท้ ายและเลือกคาสัง Insert Keyframe หรื อกดปุ่ ม F6
้ ่
จากนันจะปรากฏคีย์เฟรมใหม่พร้ อมกับออบเจ็กต์ที่อยูในคีย์เฟรมทางด้ านหน้ าขึ ้นมา
4. ปรับแต่งแก้ ไขออบเจ็กต์ ได้ ตามต้ องการ
5. คลิกคีย์เฟรมแรกหรื อเฟรมระหว่างกลาง
6. ที่ Properties ในส่วนของ Tween ให้ คลิกเลือก Motion
้ ่
จากนันปรากฏลูกศรแสดงการสร้ างแอนิเมชันขึ ้นมา
่
2) ปรับแต่งภาพเคลือนไหวแบบเคลื ่อนที ่
ภายหลังจากการสร้ างภาพเคลื่อนไหวแบบเคลื่อนที่เรี ยบร้ อยแล้ ว
ก็สามารถปรับแต่งรูปแบบในการเคลื่อนไหว เช่น ให้ มีการปรับขนาด ให้ หมุน เปลี่ยนระดับความเร็ว
ในการเคลื่อนที่ ฯลฯ ได้ โดยหากคลิกปุ่ ม Onion Skin ทางด้ านล่างของไทม์ไลน์
ก็จะปรากฏเนื ้อหาในเฟรมอื่นๆ ขึ ้นมาด้ วย
1. คลิกเลือกคีย์เฟรมหรื อเฟรมระหว่างกลางที่ใช้ แสดงภาพเคลื่อนไหว
2. ที่ Properties ให้ เลือกปรับแต่งรูปแบบการเคลื่อนไหว โดยมีรายละเอียดดังนี ้
Tween ชนิดการเคลื่อนไหว โดยมี None ยกเลิกการเคลื่อนไหว, Motion
สร้ างภาพเคลื่อนไหวแบบเคลื่อนที่, Shape สร้ างภาพเคลื่อนไหวแบบเปลี่ยนรูปร่าง
Scale เมื่อออบเจ็กต์แรกในคีย์เฟรมแรกและคีย์เฟรมสุดท้ ายมีขนาดไม่เท่ากัน
ให้ ปรับขนาดออบเจ็กต์ในเฟรมต่างๆ โดยอัตโนมัติ
Ease ระดับความเร็วในการเคลื่อนที่ โดยค่าลบ เป็ นการเคลื่อนที่จากช้ าไปเร็ว หรื อค่าบวก
เป็ นการเคลื่อนที่จากเร็ วไปช้ า ส่วน 0 เป็ นค่าปกติ
ที่มีระดับความเร็วในการเคลื่อนที่เท่ากันตลอด
ปุ่ ม Edit เมื่อคลิกปุ่ ม [edit] จะปรากฏไดอะล็อกบ็อกซ์ Custom Ease In / Ease Out
ที่ใช้ ปรับระดับความเร็วในการเคลื่อนที่ให้ แตกต่างกัน
่ ้
ซึงสามารถทาได้ เพียงคลิกเฟรมที่ต้องการ จากนันจึงลากเมาส์ปรับจุดแองเคอร์
โดยหากเส้ นมีความชันก็จะทาให้ การเคลื่อนไหวเร็ว
Rotate นอกจากการหมุนด้ วยปุ่ ม Free Transform แล้ ว
ยังสามารถกาหนดให้ ออบเจ็กต์หมุนไปในระหว่างการเคลื่อนที่ได้ ด้วย โดย None
คือไม่หมุน, Auto หมุนไปตามการเปลี่ยนแปลงของออบเจ็กต์ในคีย์เฟรมสุดท้ าย, CW
หมุนตามเข็มนาฬิกา, CCW หมุนทวนเข็มนาฬิกา โดยกาหนดจานวนรอบลงในช่อง times
7.3 ภาพเคลื่อนไหวตามเส้ นไกด์ (Motion Guide)
ในกรณีที่สร้ างภาพเคลื่อนไหวแบบ Motion Tween
ไว้ ออบเจ็กต์จะเคลื่อนที่ในลักษณะเป็ นแนวเส้ นตรง
่
ซึงหากต้ องการกาหนดเส้ นทางในการเคลื่อนที่ให้ มีรูปแบบอื่นๆ เช่น เส้ นโค้ ง เส้ นหยัก เส้ นวงกลม ฯลฯ
ก็สามารถสร้ างเส้ นนาทางขึ ้นมาใช้ กากับการเคลื่อนที่ของออบเจ็กต์ได้
1) เริ่ มสร้างภาพเคลื ่อนไหวตามเส้นไกด์
หากกาหนดให้ ออบเจ็กต์มีการเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween) เรี ยบร้ อยแล้ ว
ก็สามารถสร้ างเส้ นไกด์จากปุ่ มเครื่ องมือ Pen, Pencil, Line ฯลฯ ไว้ ภายในเลเยอร์ Motion Guide ได้
ดังนี ้
1. สร้ างและคลิกเลเยอร์ ที่กาหนดให้ เป็ นภาพเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween) ไว้
้ ่
2. คลิกปุ่ ม Add Motion Guide จากนันเลเยอร์ ที่เลือกจะไปอยูภายใต้ เลเยอร์ Motion Guide
ที่สร้ างขึ ้นมาใหม่
3. วาดรูปทรงที่ใช้ เป็ นเส้ นทางในการเคลื่อนที่ลงในเลเยอร์ Motion Guide
4. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
ุ
5. เคลื่อนย้ ายให้ จดศูนย์กลางของออบเจ็กต์ไปยึดติดกับตาแหน่งเริ่มต้ นของเส้ น
6. คลิกคีย์เฟรมสุดท้ ายของภาพเคลื่อนไหว
ุ
7. เคลื่อนย้ ายให้ จดศูนย์กลางของออบเจ็กต์ไปยึดติดกับปลายเส้ น
่
2) ปรับแต่งภาพเคลือนไหวตามเส้นไกด์
การวาดภาพเคลื่อนไหวตามเส้ นไกด์สามารถปรับแต่งรูปแบบในการเคลื่อนไหว เช่นเดียวกับ
่
Motion Tween แต่จะมีคาคุณสมบัติอื่นๆ เพิ่ม ดังนี ้
1. คลิกคีย์เฟรมหรื อเฟรมระหว่างกลางที่ใช้ แสดงภาพเคลื่อนไหว
2. ที่ Properties ให้ เลือกปรับแต่งรูปแบบการเคลื่อนที่บนเส้ นไกด์ โดยมีรายละเอียดดังนี ้
Orient to Path ให้ ออบเจ็กต์เคลื่อนที่หมุนเอียงไปตามความโค้ งของเส้ นไกด์
Sync หากภาพเคลื่อนไหวเป็ นกราฟิ กซิมโบล
ให้ ปรับการเคลื่อนไหวให้ สอดคล้ องกับไทม์ไลน์หลัก
Snap ยึดติดออบเจ็กต์เข้ ากับเส้ นไกด์โดยอัตโนมัติ
7.4 ภาพเคลื่อนไหวแบบเปลี่ยนรู ปทรง (Shape Tween)
่ ่
เมื่อต้ องการให้ มีการเปลี่ยนแปลงรูปทรงของออบเจ็กต์จากภาพนิ่งภาพหนึงไปเป็ นอีกภาพหนึง
สามารถทาได้ ด้วย Shape Tween โดยโปรแกรมจะสร้ างการเปลี่ยนแปลงระหว่างเฟรมต่างๆ
ให้ โดยอัตโนมัติ
1) เริ่ มสร้างภาพเคลื ่อนไหวแบบเปลี ่ยนรู ปทรง
การสร้ างภาพเคลื่อนไหวแบบเปลี่ยนรูปทรงจะต้ องใช้ ออบเจ็กต์แบบ Merge Drawing หรื อ
่ ่
Object Drawing ซึงหากเป็ นอินสแตนซ์ ข้ อความ หรื อออบเจ็กต์ที่รวมกลุม ก็จะต้ องแยกส่วน (Break
Apart) ก่อน
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้ างออบเจ็กต์หรื อองค์ประกอบต่างๆ ที่ต้องการให้ ปรากฏเป็ นภาพเคลื่อนไหว
่ ่
3. คลิกเมาส์ขวาที่ชองเฟรมสุดท้ ายและเลือกคาสัง Insert Keyframe หรื อกดปุ่ ม F6
้ ่
จากนันจะปรากฏคีย์เฟรมใหม่พร้ อมกับออบเจ็กต์ที่อยูในคีย์เฟรมทางด้ านหน้ าขึ ้นมา
4. เปลี่ยนรูปทรงหรื อปรับแต่งแก้ ไขออบเจ็กต์ ได้ ตามต้ องการ
5. คลิกคีย์เฟรมแรกหรื อเฟรมระหว่างกลาง
6. ที่ Properties ในส่วนของ Tween ให้ คลิกเลือก Shape
้ ่
จากนันปรากฏลูกศรแสดงการสร้ างแอนิเมชันขึ ้นมา
้
รูปจรวดจะค่อยๆ เปลี่ยนกลายเป็ นเปา
่
2) ปรับแต่งภาพเคลื อนไหวแบบเปลี ่ยนรู ปทรง
เมื่อสร้ างภาพเคลื่อนไหวแบบ Shape Tween เรี ยบร้ อยแล้ ว
ก็สามารถเปลี่ยนระดับความเร็วในการเคลื่อนไหวได้ เช่นเดียวกับ Motion Tween
แต่สาหรับรูปทรงที่มีความซับซ้ อนก็สามารถสร้ าง Shape Hint
เพื่อกาหนดเป็ นตาแหน่งที่ใช้ ในการเปลี่ยนแปลงรูปทรงของออบเจ็กต์ต้นทางและปลายทางได้ ดังนี ้
1. คลิกคีย์เฟรมแรกและคลิกเมนู Modify > Shape > Add Shape Hint หรื อกดปุ่ ม Ctrl +
้
Shift + H จากนันจะปรากฏ Shape Hunt สีแดงที่เป็ นตัวอักษร a-z ขึ ้นมา
2. ลากเมาส์นา Shape Hint มาวางยังเส้ นขอบของออบเจ็กต์ต้นทาง
3. คลิกคีย์เฟรมสุดท้ าย
4. เมาส์นา Shape Hint มาวางยังเส้ นขอบของออบเจ็กต์ปลายทาง
้ ้
โดยให้ เทียบกับตาแหน่งที่ได้ วางไว้ ในออบเจ็กต์ต้นทาง จากนันให้ ดาเนินการซ ้าในขันตอนที่ 1-5
โดยเรี ยงจากมุมบนซ้ ายวนไปแบบทวนเข็มนาฬิกา และเมื่อเรี ยงเรี ยบร้ อยแล้ ว Shape Hint
ตาแหน่งต้ นทางจะเป็ นสีเหลือง ส่วนปลายทางจะเป็ นสีเขียว
7.5 ภาพเคลื่อนไหวแบบบังภาพ (Mask Layer)
เป็ นการกาหนดให้ แสดงออบเจ็กต์ภายในรูปทรงที่สร้ างไว้
ั
เหมือนกับการส่องไฟไปที่ตวละครในลักษณะเป็ นสปอตไลต์
โดยสามารถกาหนดให้ เป็ นภาพนิ่งหรื อภาพเคลื่อนไหวก็ได้
1) เริ่ มสร้างภาพเคลื ่อนไหวแบบบังภาพ
ในการสร้ างภาพเคลื่อนไหวแบบบังภาพจะต้ องสร้ างรูปทรงไว้ ในเลเยอร์ ทางด้ านบนก่อน
้
จากนันสามารถกาหนดการเคลื่อนไหวในรูปแบบต่างๆ
ก็จะปรากฏเป็ นภาพเคลื่อนไหวแบบบังภาพขึ ้นมา
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. วาดรูปทรงที่ใช้ ในการบังภาพ โดยอาจเป็ นข้ อความหรื อรูปทรงใดๆ ก็ได้
่ ่
3. คลิกเมาส์ขวาที่ชองเฟรมสุดท้ ายและเลือกคาสัง Insert Keyframe หรื อกดปุ่ ม F6
้ ่
จากนันจะปรากฏคีย์เฟรมใหม่พร้ อมกับออบเจ็กต์ที่อยูในคีย์เฟรมทางด้ านหน้ าขึ ้นมา
4. ปรับแต่งแก้ ไขรูปทรง ได้ ตามต้ องการ
5. คลิกคีย์เฟรมแรกหรื อเฟรมระหว่างกลาง
6. ที่ Properties ในส่วนของ Tween ให้ คลิกเลือก Shape หรื อ Motion
และกาหนดค่าคุณสมบัติตางๆ ่
่
7. คลิกเมาส์ขวาบนเลเยอร์ เลือกคาสัง Mask
้
จากนันเลเยอร์ ทางด้ านล่างจะถูกแสดงผลตามรูปทรงที่สร้ างไว้ ในเลเยอร์ Mask
้
โดยโปรแกรมจะล็อคพร้ อมทังเปลี่ยนรูปแบบของไอคอนหน้ าเลเยอร์ ให้ โดยอัตโนมัติ
่
2) ปรับแต่งภาพเคลือนไหวแบบบังภาพ
ั้
เมื่อสร้ างภาพเคลื่อนไหวแบบบังภาพโปรแกรมจะล็อคเลเยอร์ ทงหมดให้ โดยอัตโนมัติ
่
ซึงหากต้ องการปรับแต่งแก้ ไข ก็จะต้ องยกเลิกการล็อคก่อน
1. คลิก บนเลเยอร์ Mask เพื่อยกเลิกการล็อคและการบังภาพ
2. ดับเบิลคลิกรูปทรงที่ต้องการปรับแต่งแก้ ไข
3. ปรับแต่งแก้ ไขรายละเอียดต่างๆ ของรูปทรง
4. คลิกชื่อซีนหรื อคลิกปุ่ ม ่ ู
เพื่อกลับสูมฟวี่หลัก
5. คลิก ในคอลัมน์ ของเลเยอร์ Mask
้ ั
จากนันรุปทรงที่ใช้ ในการบังภาพจะมีลษณะเปลี่ยนแปลงไป
เอกสารอ้ างอิง
ู
บุญเลิศ อรุณพิบลย์. (2552). flashcs3.pdf, FLASH CS3. สืบค้ นเมื่อ 28 กุมภาพันธ์ 2552, จาก
http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=98&Itemid=31
่
ภัททิรา เหลืองวิลาศ. (2551). มือใหม่ Flash CS3 ใช้ งานอย่ างมือโปรฯ. กรุงเทพ : ซีเอ็ดยูเคชัน.
ั่
Narin Roungsan. (2551). สร้ างการ์ ตน Animation ด้ วย Flash. กรุงเทพ : โปรวิชน.
ู
ั
ศูนย์พฒนาทรัพยากรการศึกษา (CARD) มหาวิทยาลัยมหาสารคาม. การวาดการ์ ตน Flash Professional ,2550.
ู
สานักบริ การคอมพิวเตอร์ สถาบันเทคโนโลยีพระจอมเกล้ าเจ้ าคุณทหารลาดกระบัง. ความรู้พืนฐานสาหรับ้
งานคอมพิวเตอร์ กราฟิ ก Basic of Computer Graphic ,2550.
ั่
บุญญาดา ช้ อนขุดทด. Insight Flash CS3 เจาะลึก อ่ านง่ าย ทาตามได้ จริง. โปรวิชน จากัด , 2550.
ั ่
อภิชย เรื องศิริปิยะกุล. 2D Animation และ Interactive ด้ วย Flash 8. ซีเอ็ดยูเคชัน จากัด , 2550.