1. ขั้นตอนในการพัฒนาเว็บไซต์
 เตรียมเนือหาทีจะนาเสนอ
้ ่
 กาหนดเป้ าหมาย(Target) : Animation "การสร้างภาพเคลื่อนไหว" ด้วยการนาภาพนิ่งมา
เรี ยงลาดับกัน และแสดงผลอย่างต่อเนื่ อง ทาให้ดวงตาเห็นภาพที่มีการเคลื่อนไหวใน
ลักษณะภาพติดตา (Persistence of Vision) เมื่อตามนุษย์มองเห็นภาพที่ฉาย อย่างต่อเนื่ อง
เรตินาระรักษาภาพนี้ไว้ในระยะสั้นๆ ประมาณ 1/3 วินาที หากมีภาพอื่นแทรกเข้ามาใน
ระยะเวลาดังกล่าว สมองของมนุษย์จะเชื่อมโยงภาพทั้งสองเข้าด้วยกันทาให้เห็นเป็ น
่
ภาพเคลื่อนไหว ที่มีความต่อเนื่องกัน แม้วาแอนิเมชันจะใช้หลักการเดียวกับวิดิโอ แต่
่
ั
แอนิ เมชันสามารถนาไปประยุกต์ใช้กบงานต่างๆได้มากมาย เช่น งานภาพยนตร์ งาน
่
โทรทัศน์ งานพัฒนาเกมส์ งานสถาปัตย์ หรื องานพัฒนาเว็บไซต์ เป็ นต้น การสร้าง
ภาพเคลื่อนไหวโดยการฉายภาพนิ่งหลายๆภาพต่อเนื่องกันด้วยความเร็ วสู ง การใช้
คอมพิวเตอร์กราฟิ กส์ในการคานวณสร้างภาพจะเรี ยกการสร้างภาพเคลื่อนไหวด้วย
คอมพิวเตอร์หรื อ คอมพิวเตอร์แอนิเมชัน หากใช้เทคนิคการถ่ายภาพหรื อวาดรู ป หรื อ
หรื อรู ปถ่ายแต่ละขณะของหุ่ นจาลองที่ค่อย ๆ ขยับ จะเรี ยกว่า ภาพเคลื่อนไหวแบบการ
่
เคลื่อนที่หยุด หรื อ สตอปโมชัน (stop motion) โดยหลักการแล้ว ไม่วาจะสร้างภาพ หรื อ
เฟรมด้วยวิธีใดก็ตาม เมื่อนาภาพดังกล่าวมาฉายต่อกันด้วยความเร็ ว ตั้งแต่ 16 เฟรมต่อ
วินาทีข้ ึนไป เราจะเห็นเหมือนว่า ภาพดังกล่าวเคลื่อนไหวได้ต่อเนื่องกัน ทั้งนี้เนื่องจาก
การเห็นภาพติดตา ในทางคอมพิวเตอร์ การจัดเก็บภาพแบบแอนิ เมชันที่ใช้กนอย่าง ั
แพร่ หลายในอินเทอร์ เน็ต มีหลายรู ปแบบไฟล์เช่น GIF APNG MNG SVG แฟลช และ
ไฟล์สาหรับเก็บวีดิทศน์ประเภทอื่นๆ
ั
 ทาให้ใคร(Visitor) : ให้บุคคลที่มีความสนใจในเรื่ องเกียวกับ Animation
่
 กาหนดกรอบแนวคิด (Concept) : ยังคงมุ่งมันที่จะสร้างสรรค์ผลงานต่อไป บนพื้นฐาน
่
่
แนวคิดที่วา “เราไม่จาเป็ นต้องทาให้เหมือนใคร แต่เราจะพยายามสร้างสรรค์ในสิ่ งที่เรามี
และเราให้ในสิ่ งที่ดีที่สุดที่เราทาได้”
 Technology : เทคโนโลยีการสร้าง Animation

2.  รวบรวมข้อมูล (Search) : อุปกรณ์ในการนามาสร้างแอนิเมชันนั้นถ้าไม่นบคอมพิวเตอร์ ก็
่ ั
จัดว่าค่อนข้างมีราคาสู งและหายากเลยทีเดียว ซึ่ งแตกต่างกับความสามารถซึ่ งนับว่าจาเป็ น
สาหรับการทางานเป็ นอย่างมาก ถึงแม้ในปัจจุบนจะมี Teblet ที่นกแอนิเมเตอร์ในไทยทุก
ั ั
่
คนรู้จกกันเป็ นอย่างดี แต่สาหรับต้นฉบับ หรื อในต่างประเทศไม่วาจะเป็ น อเมริ กา ญี่ปุ่น
ั
ฝรั่งเศษ เยอรมัน นักแอนิเมเตอร์ เหล่านั้นยังคงพูดกันว่า อุปกรณ์หลักๆในการทางานก็
ยังคงเป็ นกระดาษ ดินสอ และ โต๊ะไฟ เพียงแต่มี Teblet หรื อ เมาส์ปากกาเป็ นอุปกรณ์ที่
เพิ่มเข้ามาช่วยในการทางานขั้นตอนสุ ดท้ายก่อนการ ตัดต่อได้เร็ วขึ้น
 โปรแกรม Flash คืออะไร Flash เป็ นผลิตภัณฑ์ที่พฒนามาเพื่อสนับสนุนการ
ั
สร้างงานกราฟิ ก ทั้งภาพนิ่ง และภาพเคลื่อนไหว สาหรับการนาเสนอผ่าน
เครื อข่ายอินเทอร์ เน็ต Flash มีฟังก์ชนช่วยอานวยความสะดวก ในการสร้าง
ั
ผลงานหลากหลายรู ปแบบ ตลอดจนชุ ดคาสั่งโปรแกรมมิ่งที่เรี ยกว่า Flash Action
Script ที่เพิ่มประสิ ทธิ ภาพในการทางาน และสามารถคอมไพล์ (Compile) เป็ น
โปรแกรมใช้งาน (Application Program) เช่น การทาเป็ น e-Card เพื่อแนบไป
พร้อมกับ E-Mail ในโอกาสต่างๆ Flash เดิมเป็ นของ Macromedia แต่ปัจจุบนได้
ั
เปลี่ยนมาเป็ นของ Adobe ซึ่ งได้ถูกพัฒนาให้มีลกษณะการทางานที่สอดคล้องต่อ
ั
โปรแกรมต่างๆ ในชุด Adobe มากยิงขึ้น ซึ่ งในการอบรมครั้งนี้ได้ใช้ Adobe
่
Flash CS3 Professional

3.  การจัดเตรี ยมทรัพยากร (Resource) : 1.1 ส่ วนประกอบของหน้ าต่ างโปรแกรม
Flas h 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
้

4. 7. แถบคุณสมบัติ (Properties) ใช้กาหนดค่าคุณสมบัติของ สเตจและออบเจ็กต์ต่างๆ โดยรายละเอียด
ที่ปรากฏขึ้นมาจะเปลี่ยนแปลงไปตามเครื่ องมือหรื อออบเจ็กต์ท่ีกาลังคลิกเลือก สามารถซ่อน/แสดง
ได้ดวยการคลิกเมนู Windows > Properties > Properties หรื อกดปุ่ ม Ctrl + F3
้
8. พาเนล (Panel) หน้าต่างหรื อชุดคาสั่งพิเศษที่ใช้ทางานเฉพาะด้าน เช่น พาเนล Color ใช้เลือกและ
ผสมสี พาเนล Library ใช้จดเก็บออบเจ็กต์ต่างๆ เป็ นต้น ซึ่ งสามารถเปิ ดเรี ยกได้ดวยการคลิกที่เมนู
ั ้
Windows
1.3 Toolbox
ทูลบ็อกซ์ (Toolbox) เป็ นกล่องเก็บอุปกรณ์ที่ใช้ในการสร้าง ปรับแต่ง และแก้ไขวัตถุ เราสามรถเรี ยกใช้งาน
ทูลบ็อกซ์ ได้โดยเลือกคาสั่ง Windows > Tools แล้วคลิ้กเลือกเครื่ องมือได้ตามต้องการ

5. เครื่ องมือต่างๆ บนทูลบ็อกซ์
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 ) ดินสอวาดภาพ

6. 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 เพื่อให้คลิกเลือกรู ปแบบในการสร้างไฟล์งาน
จากนั้นจึงสามารถปรับขนาดของสเตจได้ตามต้องการ

7. 1. คลิกเลือก Flash File (ActionScript 2.0) จากส่ วนของ Create New เพื่อสร้างไฟล์งานใหม่
2. คลิกปุ่ ม จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Document Properties ขึ้นมา
3. พิมพ์กาหนดขนาดความกว้าง ความสู งของพื้นที่ทางานลงในช่อง Dimensions
4. ปรับสี พ้ืนหลังที่ Background color ตามต้องการ
5. ่
กาหนดอัตราการเล่นเฟรมต่อวินาทีที่ Frame rate โดยปกติจะอยูที่ 25 fps
6. คลิกปุ่ ม เพื่อยืนยันคาสั่ง จากนั้นพื้นที่สเตจจะมีขนาดเปลี่ยนแปลงไปตามค่าที่กาหนด
ไว้

8. 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 ออบเจ็กต์บนสเตจก็จะเคลื่อนไหวตามที่ได้ออกแบบไว้

9. 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 เลือกจานวนค่าสี ที่เหมาะสมกับภาพ ดังนั้นหากบางภาพมีการใช้สีนอย ก็สามารถระบุ
้
จานวนสี ที่เหมาะสมได้

10.  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

11. 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

12. เมื่อเลือกรู ปแบบไฟล์ที่ตองการแล้ว ให้คลิกปุ่ ม Publish โปรแกรมจะแปลงงานบน Stage
้
เป็ น Movie ตามฟอร์ แมตที่เลือก โดยใช้ชื่อไฟล์เดียวกับไฟล์ Flash ต้นฉบับ
2. Color [ ทางานกับสี ]
วัตถุใน Flash จะประกอบด้วยส่ วนประกอบอย่างน้อยๆ 2 ส่ วน ได้แก่ พื้นของวัตถุ
(Background หรื อ Fill) และเส้นขอบวัตถุ (Stroke) แต่ละส่ วนสามารถแสดงผลด้วยสี ที่แตกต่างกันได้ เช่น
รู ปสี่ เหลี่ยมที่มีเส้นขอบสี ดา และพื้นข้างในเป็ นสี น้ าเงิน ดังนั้นการทางานเกี่ยวกับสี จึงเป็ นการทางานที่
จะต้องเกี่ยวข้องตลอดเวลา โดยอาศัยชุดเครื่ องมือเลือกสี จาก Toolbox
รายละเอียดเกี่ยวกับส่ วนควบคุมสี ใน Toolbox
รายการเลือก No Color จะแสดงผลเมื่อคลิกเลือกวาดสี่ เหลี่ยม หรื อวาดวงกลม ดังนั้น
ั
ก่อนเลือกสี ให้กบการวาดสี่ เหลี่ยม, วงกลม ควรคลิกเลือกเครื่ องมือวาดสี่ เหลี่ยม หรื อวาดวงกลม
ก่อนที่จะคลิกปุ่ มเลือกสี ซึ่ ง เป็ นรายการสาคัญมาก และมักจะเป็ นรายการที่เข้าใจผิด เช่น ถ้า
ั
ต้องการวาดวงกลมไม่มีสีพ้ืน หลายๆ ท่าน จะใช้วธีการเลือก Fill Color ให้กบสี ของ Background
ิ
เช่น ถ้า Background เป็ นสี ขาว ก็จะเลือก Fill Color เป็ นสี ขาว ซึ่ งมีความหมายที่ต่างไป

13. การเลือกสี ให้กบกราฟิ กต่างๆ ที่วาดด้วยเครื่ องมือของ Flash นอกจากจะใช้ส่วนควบคุมสี ที่กล่าวไป
ั
แล้ว ก็จะมีรายการเลือกสี ใน Properties Panel ของเครื่ องมือนั้นๆ
แผงควบคุมสี (Color Panel)
Color Panel เป็ นการเพิ่มประสิ ทธิ ภาพของการทางานเกี่ยวกับสี โดยเฉพาะในส่ วนที่เป็ น
การไล่โทนสี (Gradient) เนื่องจากการสร้างชุดสี การไล่โทน ไม่สามารถทาได้จากส่ วนควบคุมสี
ปกติ Flash เตรี ยม Panel เกี่ยวกับสี ไว้ 2 ชุดคือ
 Swatches ซึ่งมีการทางาน/ใช้งานลักษณะเดียวกับ Toolbox

14.  Color มีส่วนเพิ่มเติมการใช้สีมากกว่าปกติ เช่น การทาสี แบบไล่โทนลักษณะต่างๆ, การใช้
ภาพกราฟิ กมาเป็ นพื้นของกราฟิ ก (Texture) รวมทั้งการปรับค่าความโปร่ งใสของสี (Alpha)
การเลือกรายการจาก Color มีรายการที่น่าสนใจ คือ Fill Type ซึ่ งจะช่วยให้ผใช้สามารถ
ู้
เลือกรู ปแบบของสี ได้หลากหลายลักษณะ เช่น สี พ้น (Solid Color), สี ไล่โทนแบบเส้นตรง (Linear
ื
Gradient), สี ไล่โทนแบบรัศมี (Radial Gradient) และการนาภาพจากภายนอกมาเป็ นพื้นของวัตถุ
(Bitmap Background)

15. ชุดสี แบบไล่ โทน
 คลิกเลือกรายการ 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 เพื่อเพิ่มสี ที่กาหนดให้กบ
โปรแกรม

16. ความโปร่ งใสของสี วตถุ (Alpha)
ั
รู ปด้านหน้าที่ไม่ได้กาหนดค่าความโปร่ งใส ก็จะซ้อนทับรู ปด้านหลังแบบไม่เห็นภาพด้านหลัง แต่
ถ้ากาหนดรู ปด้านหน้าให้มีค่าโปร่ งใส ก็จะทาให้สีของรู ปด้านหน้ามีลกษณะจาง และมองทะลุไปเห็นรู ป
ั
ด้านหลังได้
3. Shape [ วาดรู ปทรงพืนฐาน ]
้
3.1 รู ปแบบการวาดภาพ
การวาดภาพจากโปรแกรม Flash สามารถแบ่งออกเป็ น 2 รู ปแบบ ดังนี้
1) การวาดแบบ Merge Drawing รู ปทรงที่วาดจะมีผลต่อรู ปทรงอื่น เช่น เมื่อนารู ปทรงที่มีพ้นเป็ นสี
ื
เดียวมาซ้อนทับ ก็จะถูกรวมเป็ นชิ้นเดียวกัน แต่หากมีสีแตกต่าง เมื่อเคลื่อนย้ายส่ วนที่ถูกซ้อนทับก็จะหายไป
โดยอัตโนมัติ ซึ่งสามารถวาดได้ดวยการคลิกยกเลิกปุ่ ม Object Drawing ที่
้
ทูลพาเนล

17. รู ปทรงที่มีพ้นและเส้นขอบ เมื่อนามาซ้อนทับและ เส้นขอบจะกลายเป็ นของรู ปทรงนั้น
ื
ดับเบิลคลิกลากออกมา
2) การวาดแบบ Object Drawing ซึ่ งรู ปทรงทั้งในส่ วนของเส้นและพื้นผิวจะกลายเป็ นชิ้นเดียวกัน
หากนามาซ้อนทับก็จะไม่ส่งผลทาให้รูปทรงเปลี่ยนแปลงรู ปร่ างไปแต่อย่างใด โดยสามารถวาดได้โดยการ
คลิกปุ่ ม Object Drawing ซึ่ งจะปรากฏกรอบสี่ เหลี่ยมขึ้นมาเมื่อเลือกหรื อวาดรู ปทรงเสร็ จ
เมื่อนารู ปทรงแบบ Object Drawing รู ปทรงก็จะมีลกษณะดังเดิม
ั
มาซ้อนทับและคลิกลากออกมา
3.2 การกาหนดคุณสมบัติของรู ปทรง
เริ่ มต้นก่อนที่จะวาดภาพใดๆ อาจกาหนดค่าคุณสมบัติเกี่ยวกับส่ วนของเส้นและพื้นของรู ปทรง แล้วจึงเลือก
ปุ่ มเครื่ องมือ เพื่อวาดภาพต่างๆ ก็ได้ ซึ่ งค่าคุณสมบัติต่างๆ เป็ นดังนี้
 Stroke Color สี เส้น
 Stroke Height ความหนาของเส้น
 Stroke Style รู ปแบบของเส้น
 Custom Stroke Style เลือกกาหนดรู ปแบบเส้นเอง
 Cap รู ปแบบของปลายเส้น สาหรับรู ปทรงแบบปลายเปิ ด โดยมีให้เลือก 3 แบบ ดังนี้

18.  ั ั
None ปลายเส้นมีลกษณะเป็ นเส้นตัดพอดีกบความยาวของเส้น
 Round ปลายเส้นมีลกษณะโค้งมน
ั
 Square ปลายเส้นมีลกษณะเป็ นเส้นตัดออกมา
ั
None Round Square
 Fill Color สี พ้ืน
 Stroke hinting ช่วยลดการเบลอในส่ วนโค้งของเส้นตรง
 Scale ความหนาของเส้นที่สัมผัสกับมุมมอง
 ั
Miter ความแหลมของมุม โดยจะสัมพันธ์กบรู ปแบบของมุมที่กาหนดไว้ในช่อง Join
 Join รู ปแบบของมุม โดยมีให้เลือก 3 แบบ ดังนี้
 Miter มุมแหลม
 Round มุมโค้งมน
 Beval มุมตัด
Miter Round Beval

19. 3.3 การวาดเส้ น
การวาดเส้นสามารถแบ่งได้เป็ นการวาดเส้นตรงด้วย Line Tool และการวาดเส้นอิสระด้วย Pencil Tool โดย
สี ที่ปรากฏขึ้นมาจะเป็ นสี ท่ีเลือกไว้ในช่อง Stroke Color
1) การวาดเส้ นตรงด้ วย Line Tool
การวาดเส้นตรงจะมีรูปแบบการทางานที่ง่าย เพียงเลือกกาหนดสี ขนาดความหนา และลวดลาย จาก
ส่ วนของ Properties ก่อนจากนั้นดาเนินการตามขั้นตอนดังนี้
1. คลิกปุ่ ม Line Tool ที่ทูลพาเนล หรื อกดปุ่ ม N จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยน เป็ น
ั
2. คลิกเมาส์ 1 ครั้ง เพื่อกาหนดจุดเริ่ ม
็
3. ลากเมาส์มายังตาแหน่งและทิศทางที่ตองการ เมื่อปล่อยเมาส์กจะปรากฏเส้นตรงขึ้นมา โดยสามารถ
้
กดปุ่ มค้างไว้ในขณะลากเมาส์ได้ ดังนี้
 ปุ่ ม Shift เปลี่ยนทิศทางของเส้นไปครั้งละ 45 องศา
 ปุ่ ม Alt ให้จุดเริ่ มต้นเป็ นจุดศูนย์กลางของเส้น

20. 2) การวาดเส้ นอิสระด้ วย Pencil Tool
การวาดเส้นอิสระด้วย Pencil Tool ผลงานที่ได้จะมีลกษณะเหมือนกับการใช้ดินสอวาดภาพลงบนกระดาษ
ั
โดยสามารถเลือกปรับให้เป็ นเส้นตรง เส้นโค้ง หรื อเป็ นเส้นอิสระได้
1. คลิกปุ่ ม Pencil Tool ที่พาเนล หรื อกดปุ่ ม Y จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยนเป็ น
ั
2. คลิกปุ่ ม Pencil Mode ค้างไว้ แล้วลากมาทางขวา เลือกปรับปรับรู ปแบบของเส้น
 Straighten ปรับให้เป็ นเส้นตรง
 Smooth ปรับให้เป็ นเส้นโค้ง โดยสามารถปรับความโค้งมนได้ที่ช่อง Smoothing ของ
Properties
 Ink ไม่มีการปรับรู ปแบบใดๆ ให้ภาพใกล้เคียงการวาดมากที่สุด
3. ลากเมาส์วาดรู ปทรงที่ตองการ โดยสามารถกดปุ่ ม Shift ค้างไว้ เพื่อวาดเส้นตรงในแนวตั้งหรื อ
้
แนวนอน

21. 3.4 การวาดรู ปทรงเรขาคณิต
1) วาดรู ปสี่ เหลี่ยมด้ วย Rectangle Tool
การวาดรู ปสี่ เหลี่ยมด้วย Rectangle Tool จะสามารถปรับแต่งเส้น Path ด้วยปุ่ มเครื่ องมือ Pen ได้ แต่จะต้อง
กาหนดค่าความโค้งของมุมก่อนที่จะทาการวาด สาหรับขั้นตอนมีดงนี้ ั
1. คลิกปุ่ ม Rectangle Tool ที่ทูลพาเนล หรื อกดปุ่ ม R จากนั้นตัวชี้เมาส์จะมีลกษณะ
ั
เปลี่ยนเป็ น
2. กาหนดค่าคุณสมบัติพร้อมทั้งความโค้งของมุมทั้ง 4 ของรู ปสี่ เหลี่ยมลงใน Properties โดย
ในที่น้ ีใช้ค่า 0 ซึ่ง จะได้เป็ นสี่ เหลี่ยมมุมฉาก
3. คลิกเมาส์ 1 ครั้ง เพื่อกาหนดจุดเริ่ มต้น
4. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ตองการ เมื่อปล่อยเมาส์ก็จะปรากฏรู ปสี่ เหลี่ยม
้
ขึ้นมา โดยสามารถกดปุ่ มค้างไว้ในขณะลากเมาส์ได้ ดังนี้
 ปุ่ ม Shift วาดรู ปสี่ เหลี่ยมจัตุรัส
 ปุ่ ม Alt วาดรู ปสี่ เหลี่ยมออกมาจากศูนย์กลาง
 ปุ่ ม  เพิ่มความโค้งของมุม
 ปุ่ ม  ลดความโค้งของมุม
 ปุ่ ม Alt ค้างไว้และคลิกลงบนสเตจ เพื่อกาหนดค่าในการวาดรู ปสี่ เหลี่ยมที่มีขนาด
แน่นอน

22. 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. ลากเมาส์เข้า-ออกเปลี่ยนความโค้งมนของมุม ได้ตามต้องการ

23. 3) วาดรู ปวงกลมด้ วย Oval Tool
การวาดรู ปวงกลมจะสามารถกาหนดค่าคุณสมบัติต่างๆ พร้อมทั้งค่ามุมเริ่ มต้น มุมสุ ดท้าย และรัศมีวงกลม
ใน รวมถึงกาหนดให้เป็ นรู ปทรงแบบปิ ดหรื อแบบเปิ ดที่มีเฉพาะเส้นก็ได้
1. คลิกปุ่ ม Oval Tool ที่ทูลพาเนล หรื อกดปุ่ ม O จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยน เป็ น
ั
2. กาหนดค่าคุณสมบัติพร้อมทั้งค่ามุมเริ่ มต้น มุมสุ ดท้าย และรัศมีวงกลมในของรู ปวงกลม ลงใน
Properties โดยในที่น้ ีใช้ค่า 0 ซึ่งจะได้เป็ นรู ปวงกลม/วงรี
3. คลิกเมาส์ 1 ครั้ง เพื่อกาหนดจุดเริ่ มต้น
4. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ตองการ เมื่อปล่อยเมาส์ก็จะปรากฏรู ปวงกลมขึ้นมา
้
 ปุ่ ม Shift วาดรู ปวงกลม
 ปุ่ ม Alt วาดรู ปวงกลมออกมาจากศูนย์กลาง
 ปุ่ ม Alt ค้างไว้และคลิกลงบนสเตจ เพื่อกาหนดค่าในการวาดรู ปวงกลมที่มีขนาด
แน่นอน

24. 4) วาดรู ปวงกลมพร้ อมปรั บแต่ งรู ปทรงด้ วย Oval Primitive Tool
สาหรับรุ ปวงกลมที่สร้างด้วยปุ่ ม Oval Primitive Tool จะสามารถเลือกกาหนดค่าคุณสมบัติหรื อเลือก
ปรับแต่งรู ปทรงจากจุดควบคุมที่ปรากฏขึ้นมาในภายหลังก็ได้
1. คลิกปุ่ ม Oval Primitive Tool ที่ทูลพาเนล หรื อกดปุ่ ม O จากนั้นตัวชี้ เมาส์จะมีลกษณะ
ั
เปลี่ยนเป็ น
2. คลิกเมาส์ 1 ครั้ง เพื่อกาหนดจุดเริ่ มต้น
3. ลากเมาส์ทแยงไปยังตาแหน่งและทิศทางที่ตองการ เมื่อปล่อยเมาส์ก็จะปรากฏรู ปวงกลมพร้อมทั้ง
้
จุดควบคุมขึ้นมา ซึ่ งสามารถพิมพ์เปลี่ยนค่าลงใน Properties หรื อให้ดาเนินการตามขั้นตอนที่ 4
4. คลิกปุ่ ม Selection Tool ที่ทูลพาเนล หรื อจะกดปุ่ ม V

25. 5. คลิกที่จุดควบคุม จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยนเป็ น
ั
6. ลากเมาส์ข้ ึน-ลง เพื่อปรับมุมเริ่ มต้น
7. คลิกที่จุดควบคุม
8. ลากเมาส์ข้ ึน-ลง เพื่อปรับมุมสุ ดท้าย
9. คลิกที่จุดควบคุม
10. ลากเมาส์เข้า-ออก เพื่อปรับรัศมีของวงกลมใน

26. 5) วาดรู ปหลายเหลี่ยม/รู ปดาวด้ วย PolyStar Tool
สาหรับปุ่ ม PolyStar Tool จะช่วยให้สามารถวาดรู ปหลายเหลี่ยมหรื อรู ปดาวได้ตามต้องการ โดยสามารถ
กาหนดด้านหรื อแฉกได้ต้ งแต่ 3-32 ด้าน
ั
1. คลิกปุ่ ม PolyStar Tool ที่ทูลพาเนลจากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยนเป็ น
ั
2. ที่ Properties ให้คลิกปุ่ ม จากนั้นปรากฏไดอะล็อกบ็อกซ์ Tool Settings ขึ้นมา
3. ที่ช่อง Style ให้คลิกเลือกรู ปแบบของรู ปทรง โดยมีรายละเอียดดังนี้
o polygon วาดรู ปหลายเหลี่ยม
o star วาดรู ปดาว
4. พิมพ์จานวนด้าน/แฉกลงในช่อง Number of Sides โดยพิมพ์ค่าได้ต้ งแต่ 3-32
ั
5. พิมพ์ค่าความลึกของแฉกดาวลงในช่อง Star point size โดยพิมพ์ค่าได้ต้ งแต่ 0-1 ซึ่ งค่า 0 รู ปดาวจะมี
ั
ความแหลมมากที่สุด
6. คลิกปุ่ ม เพื่อยืนยันคาสัง
่
7. คลิกเมาส์ 1 ครั้ง เพื่อกาหนดจุดเริ่ มต้น
8. ลากเมาส์ทแยงออกมาจากจุดศูนย์กลาง เมื่อปล่อยเมาส์ก็จะปรากฏรู ปหลายเหลี่ยม/รู ปดาว ขึ้นมา

27. 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 ค้างไว้ เพื่อวาดเส้นตรงในแนวตั้งหรื อ
้
แนวนอน

28. 2) ระบายสี ด้วย Brush Tool
นอกจากการวาดภาพลายเส้นแล้ว Brush Tool ยังสามารถใช้ระบายสี ได้อีก โดยหากกาหนดขนาดและ
ลักษณะของหัวแปรงเรี ยบร้อยแล้ว ก็ยงสามารถเลือกรู ปแบบในการระบายสี ได้ดวย
ั ้
1. คลิกปุ่ ม Brush Tool ที่ทูลพาเนล หรื อกดปุ่ ม B จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยน เป็ น
ั
2. คลิกปุ่ ม Brush Mode ค้างไว้ แล้วเลือกรู ปแบบในการระบายสี
o Paint Normal ระบายทับเส้นและพื้นของรู ปทรง
o Paint Fills ระบายทับเฉพาะส่ วนของพื้นโดยไม่มีผลต่อเส้น
o Paint Behind ระบายเป็ นพื้นหลังโดยไม่มีผลต่อรู ป
o Paint Selection ระบายเฉพาะพื้นของบริ เวณที่เลือกโดยไม่มีผลต่อเส้นและพื้นหลัง
o Paint Inside ระบายภายในขอบเขตของพื้นที่ดานใน
้

29. 3. ลากเมาส์ระบายสี ลงบนรู ปทรงได้ตามต้องการ
Paint Normal Paint Fills Paint Behind
Paint Selection Paint Inside

30. 3.6 การลบรู ปทรง
การลบด้วยปุ่ ม Eraser Tool จะสามารถเลือกลบทั้งรู ปทรงหรื อเลือกลบเฉพาะเส้นหรื อพื้นก็ได้ อีกทั้งยัง
สามารถเลือกเปลี่ยนขนาดและลักษณะของหัวยางลบได้อีกด้วย
1) ลบรู ปทรงด้วย Eraser Tool
เมื่อเลือกลบรู ปทรงด้วย Eraser Tool จะมีรูปแบบในการลบเพิมขึ้นมาให้เลือก เช่น สามารถลบเส้นและพื้น
่
ลบเฉพาะพื้น ลบเฉพาะเส้น ลบเฉพาะส่ วนที่เลือก หรื อลบเฉพาะขอบเขตของพื้นที่ดานในก็ได้ สาหรับ
้
ขั้นตอนมีดงนี้
ั
1. คลิกปุ่ ม Eraser Tool ที่ทูลพาเนล หรื อกดปุ่ ม E จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยน เป็ น
ั
2. คลิกปุ่ ม Eraser Mode ค้างไว้ แล้วเลือกรู ปแบบในการลบ
o Eraser Normal ลบเส้นและพื้นของรู ปทรง
o Eraser Fills ลบเฉพาะส่ วนของพื้นโดยไม่มีผลต่อเส้น
o Eraser Lines ลบเฉพาะส่ วนของเส้นโดยไม่มีผลต่อพื้น
o Eraser Selected Fills ลบเฉพาะพื้นของบริ เวณที่เลือกโดยไม่มีผลต่อเส้น
o Eraser Inside ลบภายในขอบเขตของพื้นที่ดานใน
้
3. คลิกปุ่ ม Eraser Shape ค้างไว้ และเลือกขนาดของหัวยางลบ
4. ลากเมาส์ลบบริ เวณพื้นที่ที่ตองการ
้

31. Eraser Normal Eraser Fills Eraser Lines
Eraser Selected Fills Eraser Inside
2) ลบเส้ น/พืนด้ วย Eraser Tool โดยใช้ ปุ่ม Faucet
้
ไม่เพียงแต่การลบในรู ปแบบปกติเท่านั้น แต่หากต้องการลบเส้นหรื อพื้นของรู ปทรงอย่างรวดเร็ ว ก็สามารถ
ทาได้เพียงคลิกปุ่ ม Faucet ไว้ก่อนเท่านั้น สาหรับขั้นตอนมีดงนี้
ั

32. 1. คลิกปุ่ ม Eraser Tool ที่ทูลพาเนล หรื อกดปุ่ ม E
2. คลิกปุ่ ม Faucet จากนั้นตัวชี้เมาส์จะมีลกษณะเปลี่ยนเป็ น
ั
3. คลิกลงบนเส้นหรื อพื้นของรู ปทรงที่ตองการลบ
้
4. Selection [ การเลือกวัตถุ ]
วัตถุในความหมายนี้ ก็คือ รู ปทรง รู ปภาพ ภาพกราฟิ กที่วาด หรื อนาเข้ามาใช้งานใน Flashนันเอง
่
การเลือกวัตถุ เป็ นขั้นตอนสาคัญในการปรับเปลี่ยน แก้ไข แปลงวัตถุ โดยโปรแกรมเตรี ยมเครื่ องมือเลือก
วัตถุดงนี้
ั
 Selection Tool สาหรับเลือกวัตถุในสภาวะปกติ
 Subselection Tool สาหรับการเลือกวัตถุในโหมดจุดเชื่อม

33.  Lasso Tool สาหรับการเลือกวัตถุที่มีรูปทรงอิสระ หรื อกาหนดขอบเขตการเลือกอิสระรวมทั้ง
การเลือกโดยใช้ค่าสี ที่มีค่าเดียวกันหรื อใกล้เคียงกัน
สิ่ งสาคัญที่สุดในการเลือกวัตถุใน Flash ก็คือ อย่าลืมว่าวัตถุทุกชิ้นเกิดจาก “จุด” หลายๆ จุดมา
ประกอบรวมกัน และแต่ละวัตถุจะประกอบด้วยโครงสร้างอย่างน้อย 2 ส่ วนคือ ส่ วนที่เป็ น “Fill” และส่ วนที่
เป็ น “Stroke” ดังนี้
4.1 การเลือกวัตถุ หรือกลุ่มวัตถุด้วย Selection Tool
 คลิกเลือกเครื่ องมือ Selection Tool
 เลือกวัตถุ โดยยึดหลักดังนี้
 เลือกเส้นขอบของวัตถุ นาเมาส์ไปชี้ที่เส้นขอบวัตถุ แล้วคลิกหรื อ ดับเบิลคลิก

34.  เลือกพื้นวัตถุ นาเมาส์ไปชี้ท่ีพ้ืนวัตถุ แล้วคลิกหรื อ ดับเบิลคลิก
 เลือกวัตถุท้ งชิ้น นาเมาส์ไปชี้ที่วตถุ แล้วดับเบิลคลิก
ั ั
 เลือกวัตถุท้ งชิ้น นาเมาส์ไปชี้ ณ ตาแหน่งมุมของวัตถุ แล้วลากกรอบสี่ เหลี่ยมคลุมวัตถุ
ั
 เลือกวัตถุหลายๆ ชิ้น นาเมาส์ ไปชี้ ณ ตาแหน่งมุมของวัตถุ แล้วลากกรอบสี่ เหลี่ยมคลุมวัตถุ
 เลือกวัตถุหลายๆ ชิ้น คลิกวัตถุชิ้นที่ 1 กดปุ่ ม Shift ค้างไว้ แล้วคลิกวัตถุชิ้นถัดไปเรื่ อยๆ
 เลือกวัตถุทุกชิ้นบน Workspace และ Stage กดปุ่ ม Ctrl + A
4.2 ยกเลิกการเลือกวัตถุ
 นาเมาส์ไปคลิกบนตาแหน่งว่างๆ ของ Stage หรื อ เลือกเมนูคาสั่ง Edit > Deselect All
4.3 ซ่ อนการเลือกวัตถุ
บางครั้งผูใช้อาจจะต้องการซ่ อนการเลือก (Selection) ไว้ชวคราว เพื่อทางานหรื อ
้ ั่
ตรวจสอบผลให้ถูกต้องก่อนการใช้งานจริ ง ซึ่ งกระทาได้โดยเลือกเมนูคาสั่ง View > Hide Edges

35. หรื อกดปุ่ ม Ctrl + H
4.4 การยกเลิกคาสั่ ง (Undo)
เมื่อสั่งงานใดๆ ผิดพลาด สามารถย้อนกลับ หรื อยกเลิกคาสั่งนั้นๆ ได้โดยคลิกปุ่ ม Ctrl + Z
หรื อ Edit > Undo… ซึ่ งสามารถยกเลิกคาสั่งย้อนหลังได้มากกว่า 1 ครั้ง
4.5 ปรับแต่ ง แก้ ไขวัตถุ
จุดเด่นของการสร้างวัตถุดวย Flash ก็คือวัตถุ หรื อกราฟิ กที่สร้างไว้แล้ว สามารถปรับแต่ง
้
แก้ไข ปรับเปลี่ยนรู ปทรง ขนาด และลักษณะได้ง่าย รวดเร็ ว
1) เปลี่ยนรู ปทรง
กราฟิ กจาก Flash เกิดจากการรวมกันของ “จุด” ทาให้การปรับแต่ง เปลี่ยนรู ปทรงกระทา
ได้ง่าย และสะดวก เพียงแต่ใช้หลักการ Drag & Drop ก็ทาให้รูปทรงพื้นฐาน เช่น วงกลม, วงรี ,
สี่ เหลี่ยม เป็ นสภาพเป็ นรู ปทรงอิสระอื่นๆ ได้ตามต้องการ เช่น
การเปลี่ยนรู ปทรงของวัตถุ มีหลักการดังนี้
 วาดรู ปทรงพื้นฐานที่ตองการ จากตัวอย่างคือรู ปสี่ เหลี่ยม
้

36.  เลือกเครื่ องมือ Selection
 นาเมาส์ไปชี้บริ เวณเส้นขอบของรู ป สังเกตเมาส์จะมีรูปร่ างเป็ น กดปุ่ มเมาส์คางไว้ เมื่อลากเมาส์
้
รู ปทรงจะถูกยึดหรื อขยาย หรื อหดตัวตามทิศทางการลากเมาส์
 นาเมาส์ไปชี้บริ เวณมุมเหลี่ยมของรู ป สังเกตเมาส์จะมีรูปร่ างเป็ น กดปุ่ มเมาส์คางไว้ เมื่อลาก
้
เมาส์รูปทรงจะถูกยึดหรื อขยาย หรื อบิดตัวตามทิศทางการลากเมาส์
2) ตัวอย่ างการวาดจรวดแบบง่ าย
1. วาดสี่ เหลี่ยมผืนผ้า
2. เลือกเครื่ องมือ Move เลื่อนไปชี้ที่มุมบนขวาของสี่ เหลี่ยม ดึงเข้ามาตาแหน่งกึ่งกลางของ
ด้านขวา ถ้าดึงแล้วสัดส่ วนบิดเบี้ยวให้คลิก เพือตรึ งตาแหน่งการบิดภาพ จากนั้น ทาซ้ า
่
กับมุมล่างขวา
3. เลื่อนไปชี้ที่ขอบซ้าย แล้วดึงเข้ามาด้านใน ให้ได้เป็ นรู ปจรวดดังตัวอย่าง
3) การย้ ายวัตถุ
 คลิกเลือกเครื่ องมือ Selection Tool
 เลือกวัตถุ แล้วลากเมาส์เพื่อย้ายวัตถุไปยังตาแหน่งใหม่
 เลื่อนวัตถุเป็ นแนวเฉียง 45 องศา ให้กด Shift ด้วย
 เลื่อนวัตถุเป็ นระยะทางสั้นๆ ครั้งละ 1 pixel ให้ใช้ปุ่มลูกศร
 เลื่อนวัตถุเป็ นระยะทางสั้นๆ ครั้งละ 10 pixel ให้ใช้ปุ่มลูกศร พร้อมกับการกด Shift

37.  ั ั
เลื่อนวัตถุไปยังตาแหน่งต่างๆ โดยระบุพิกด ให้ระบุพิกด x, y จาก Shape Propertiesตาแหน่งมุมบน
ั
ซ้ายของ Stage จะมีพิกดเป็ น 0, 0
4) การย่ อ/ขยาย และปรั บรู ปทรงของวัตถุ
 เลือกวัตถุ
 คลิกปุ่ มเครื่ องมือ Free Transform Tool
 นาเมาส์ไปชี้ที่มุม หรื อขอบวัตถุ แล้ว Drag & Drop เพื่อปรับขนาด หรื อรู ปทรงตามต้องการ
 คลิกเลือกจากเมนูคาสั่ง Modify > Transform,… ซึ่ งมีคาสังให้เลือกทั้งคาสั่งหมุนวัตถุ,คาสั่งกลับ
่
ด้านของวัตถุ เป็ นต้น

38. 4.6 การจัดเรียงวัตถุ (Alignment)
่
บางครั้งวัตถุที่ตองใช้งานจะมีมากกว่า 1 ชิ้น ซึ่ งจาเป็ นต้องจัดเรี ยงตาแหน่งให้อยูในแนว
้
ระดับเดียวกัน หากใช้เมาส์ลากแล้วปล่อยโอกาสที่จะตรงกัน หรื อในแนวเดียวกันก็ทาได้ยาก Flash ได้
เตรี ยมคาสั่ง Align เพื่อช่วยจัดเรี ยงวัตถุได้สะดวก รวดเร็ ว
่
1. วาดวัตถุให้อยูนอก Stage
2. เลือกวัตถุดวยเครื่ องมือ Move
้
3. เปิ ด Align Panel
4. คลิก ต่อด้วย และ
4.7 การคัดลอกลักษณะเส้ นขอบวัตถุ
การคัดลอกลักษณะเส้นขอบวัตถุ จะช่วยให้การปรับแต่งแก้ไขวัตถุมากกว่า 1 ชิ้นทาได้
สะดวกกว่าการปรับเปลี่ยนทีละชิ้น ตัวอย่างมีวตถุบน Stage 3 ชิ้นลักษณะต่างๆ กัน ดังภาพ
ั

39. ต้องการให้วงกลม และสี่ เหลี่ยมเส้นขอบดา มีเส้นขอบเดียวกับสี่ เหลี่ยมชิ้นที่สอง ที่มีเส้น
ขอบเป็ นจุดสี แดง หากต้องเลือกแล้วปรับเปลี่ยนทีละชิ้น ก็จะเสี ยเวลามาก วิธีการที่สะดวก คือ
 คลิกเลือกเครื่ องมือ Eyedropper
 นาเมาส์ซ่ ึ งมีรูปร่ างเป็ น Eyedropper ไปชี้ที่เส้นขอบของสี่ เหลี่ยมชิ้นต้นฉบับ (สี่ เหลี่ยมด้านขวาสุ ด)
่
สังเกตได้วาเมาส์จะมีรูปร่ างเป็ น แสดงว่าได้เลือกเส้นขอบวัตถุได้ถูกต้อง เมื่อคลิกเมาส์ 1 ครั้ง
เมาส์จะเปลี่ยนรู ปร่ างเป็ น ่
แสดงว่าขณะนี้ Flash อยูในโหมด Ink Bottle ซึ่งเป็ นโหมดใน
การคัดลอกลักษณะเส้นขอบนันเอง ่
 นาเมาส์ที่เป็ นรู ปร่ าง ไปคลิกบนวัตถุชิ้นอื่นๆ ที่ตองการปรับเปลี่ยนลักษณะเส้นขอบ
้
4.8 กลุ่มวัตถุ (Group)
ภาพกราฟิ กหลายๆ ภาพ ได้จากภาพ หรื อรู ปทรงย่อยหลายๆ ชิ้นมารวมกัน เพื่อให้การ
ปรับแต่งแก้ไข เคลื่อนย้ายกระทาได้สะดวก มักจะรวมภาพกราฟิ ก หรื อรู ปทรงทุกชิ้นที่เกี่ยวข้อง ให้
เป็ นกลุ่มเดียวกันโดยเลือกวัตถุทุกชิ้น แล้วเลือกเมนูคาสั่ง Modify > Group และเมื่อต้องการแยกกลับสู่
สภาพเดิมก็เลือกคาสั่ง Modify > Ungroup
รู ปการ์ ตูนที่เกิดจาก Shape หลายชิ ้นประกอบรวมกัน

40. ปั ญหาจากการย้ าย Shape รู ปที่ยงไม่ ได้ รวมกลุ่ม
ั
รู ปที่ผ่านการรวมกลุ่มแล้ วจะมีเส้ นขอบสี ฟ้าล้ อมรอบ
4.9 การแยกชิ้นส่ วนของวัตถุ
วัตถุบางชิ้นที่เป็ น Group หรื อ Instance เมื่อจะต้องนามาทาเป็ น Movie แบบ Shape
่
Tweening จาเป็ นต้องแยกชิ้นส่ วนของวัตถุให้อยูในสภาวะ “จุด” ก่อนเสมอ ซึ่ งทาได้โดยเลือกวัตถุ
ก่อน จากนั้นจึงใช้เมนูคาสั่ง Modify > Break Apart หรื อกดปุ่ ม Ctrl + B
รู ปภาพในสภาวะกลุ่ม
รู ปภาพที่ผ่านการ Break Apart แล้ ว

41. 4.10 การปรับแต่ งแก้ ไขวัตถุทเี่ ป็ น Group
วัตถุที่อยูในสภาวะ Group สามารถย่อ/ขยาย หมุนได้อิสระ แต่จะไม่สามารถปรับแต่งแก้ไขเกี่ยวกับ
่
สี ได้ หากต้องการปรับเปลี่ยนสี ของวัตถุที่เป็ น Group จะต้องเข้าไปแก้ไขในโหมดจอภาพเฉพาะเกี่ยวกับ
Group ซึ่ งกระทาได้โดยการดับเบิลคลิกที่วตถุน้ นๆ จอภาพจะเข้าสู่ โหมดการแก้ไข Group ซึ่งสังเกตได้จาก
ั ั
 Scene 1 หมายถึงจอภาพในโหมดหลัก
 ่
Group หมายถึงจอภาพในโหมดแก้ไข Group จะสังเกตได้วาวัตถุชิ้นอื่น จะมีสีที่จางไป
จอภาพโหมดปกติ (Scene1) โหมดแก้ ไข Group จะพบว่ าภาพคลื่นทะเลจะจางกว่ าปกติ
เมื่อปรับแต่งแก้ไขวัตถุเรี ยบร้อยแล้ว ให้คลิกที่ Scene 1 เพื่อกลับสู่ โหมดการทางานปกติ
ด้วยทุกครั้ง
5. SYMBOL AND INSTANCE [ซิมโบลและอินสแตนซ์ ]
การสร้าง Movie ด้วย Flash จาเป็ นต้องเกี่ยวข้องกับ Symbol และ Instance ดังนั้นการศึกษาว่า
Symbol และ Instance คืออะไร มีความสาคัญอย่างไร ใช้งานอย่างไร จึงเป็ นสิ่ งสาคัญมาก อย่างไรก็ตาม
Flash มีการกาหนดประเภทของวัตถุไว้หลากหลายลักษณะ โดยสามารถแบ่งได้ดงนี้ ั
 Dot หรือ Part เป็ นส่ วนย่อยที่สุดของวัตถุ มีลกษณะเป็ นจุดเล็กๆ
ั
 Shape เป็ นวัตถุที่เกิดจาก Dot หลาย Dot มาผสมกัน โดยจะเรี ยกวัตถุที่สร้างด้วยเครื่ องมือสร้าง
กราฟิ กพื้นฐานว่า Shape ยกเว้น Text Tool

42.  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

43. 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 มีหลักการดังนี้
 วาด/สร้าง หรื อนาเข้าวัตถุ
 เลือกวัตถุ

44.  เลือกคาสัง Modify > Convert to Symbol… หรื อกดปุ่ ม <F8>
่
 ตั้งชื่อในช่อง 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

45. 5.4 การสร้ างซิมโบลชนิดต่ างๆ
1) การสร้ างซิ มโบลกราฟิ ก
การสร้างซิ มโบลกราฟิ ก จะมีรูปแบบการทางานที่ง่าย เพียงเลือกสร้างซิ มโบลใหม่ จากนั้นจึงสร้างหรื อ
นาเข้าออบเจ็กต์ต่างๆ เพื่อให้กลายเป็ นซิ มโบลกราฟิ ก
1. คลิกเมนู Insert > New Symbol หรื อกดปุ่ ม Ctrl + F8 จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Create
New Symbol ขึ้นมา
2. พิมพ์ต้ งชื่อซิ มโบลลงในช่อง Name
ั
3. ในส่ วนของ Type ให้คลิกเลือก Graphic
4. คลิกปุ่ ม เพื่อยืนยันคาสั่ง จากนั้นจะเข้าสู่ ชโหมดแก้ไขซิ มโบล
5. สร้างหรื อนาเข้าออบเจ็กต์ที่ตองการให้เป็ นซิมโบล โดยจะปรากฏ ที่ใช้เป็ นจุดอ้างอิงในการวาง
้
ซิ มโบลขึ้นมา
6. คลิกชื่อซีนหรื อคลิกปุ่ ม เพื่อกลับสู่ มูฟวีหลัก
่

46. 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 ให้สร้างปุ่ มในสถานะปกติที่ยงไม่มีการคลิกเมาส์
ั

47. ่
6. คลิกเฟรม Over และกดปุ่ ม F6 เพื่อสร้างคียเ์ ฟรมใหม่และคัดลอกออบเจ็กต์ที่อยูในเฟรม Up
7. แก้ไขออบเจ็กต์ของเฟรม Over เช่น เปลี่ยนสี เปลี่ยนรู ปทรง เพื่อให้แสดงเป็ นปุ่ มในสถานะที่มีการ
นาเมาส์มาวาง
่
8. คลิกเฟรม Down และกดปุ่ ม F6 เพื่อสร้างคียเ์ ฟรมใหม่และคัดลอกออบเจ็กต์ที่อยูในเฟรม Over
9. แก้ไขออบเจ็กต์ของเฟรม Down เพื่อให้แสดงเป็ นปุ่ มในสถานะที่มีการนาเมาส์มาคลิก

48. ่
10. คลิกเฟรม Down และกดปุ่ ม F6 เพื่อสร้างคียเ์ ฟรมใหม่และคัดลอกออบเจ็กต์ที่อยูในเฟรม Down
11. วาดรู ปทรงกาหนดขอบเขตที่ตองการให้มีการตอบสนองต่อเมาส์
้
12. คลิกชื่อซีนหรื อคลิกปุ่ ม เพื่อกลับสู่ มูฟวีหลัก
่
13. เลือกและลากเมาส์นาซิ มโบลมาวางบนสเตจ จากนั้นจะปรากฏปุ่ มขึ้นมา
14. คลิกเมนู Control > Test Movie หรื อกดปุ่ ม ctrl + Enter เพื่อทดสอบการทางานผ่านทาง Flash
Player

49. 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. สร้างหรื อนาออบเจ็กต์ที่ตองการให้เป็ นซิมโบลมูฟวีคลิป
้ ่

50. 6. คลิกเฟรมที่ 50 และกดปุ่ ม F6 เพื่อสร้างคียเ์ ฟรมใช้เป็ นจุดจบของภาพเคลื่อนไหว
7. ปรับแต่งออบเจ็กต์ เช่น เคลื่อนย้าย ปรับขนาด หมุน หรื อเปลี่ยนสี เพื่อให้เกิดเป็ นภาพเคลื่อนไหว
8. คลิกเฟรมที่ 1 ของไทม์ไลน์
9. ที่ Properties ในส่ วนของ Tween ให้คลิกเลือก Motion จากนั้นจะปรากฏลูกศรแสดงการสร้างแอนิ
เมชันขึ้นมา
่
10. คลิกชื่อซีนหรื อคลิกปุ่ ม เพื่อกลับสู่ มูฟวีหลัก
่
11. เลือกและลากเมาส์นาซิ มโบลมาวางบนสเตจ จากนั้นจะปรากฏมูฟวีคลิปขึ้นมา
่

51. 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 นั้นๆ จะถูกแก้ไขตามไปโดยอัตโนมัติ

52. 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

53.  แก้ไข 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

54. 6. Timeline [ ควบคุมมูฟวีผ่านไทม์ ไลน์ ]
่
6.1 รู้ จักไทม์ ไลน์
่
ไทม์ไลน์ (Timeline) เป็ นส่ วนที่อยูทางด้านบนของหน้าจอ ซึ่ งใชควบคุมสร้างการเคลื่อนไหว โดย
่ ้ ่
ประกอบด้วย 2 ส่ วนหลัก ได้แก่ เลเยอร์ ที่อยูดานซ้าย และเฟรมที่อยูทางขวา
1) ส่ วนประกอบของไทม์ ไลน์
โดยปกติไทม์ไลน์จะปรากฏขึ้นมาทางด้านบน ซึ่ งสามารถสังให้ซ่อน/แสดงได้ดวยการคลิกเมนู Windows >
่ ้
Timeline หรื อกดปุ่ ม Ctrl + Alt + T จากนั้นจะแสดงส่ วนประกอบต่างๆ ขึ้นมาดังนี้
2) ใช้ เพลย์ เฮดในการเลื่อนแสดงผล
เฟรมที่ปรากฏขึ้นมาบนไทม์ไลน์ใช้สาหรับสร้างภาพเคลื่อนไหวของตัวละครในแต่ละจังหวะ ซึ่ งหาก
ต้องการเลื่อนเพลย์เฮด (Playhead) เพื่อดูหรื อปรับเปลี่ยนแก้ไขเนื้อหาของเฟรมต่างๆ สามารถทาได้ดงนี้
ั
่
1. คลิกเพลย์เฮด ซึ่ งเป็ นสี่ เหลี่ยมสี แดงที่อยูทางด้านบน
2. ลากเมาส์ไปยังเฟรมที่ตองการ หรื อคลิกตาแหน่งของหมายเลขเฟรมที่ตองการก็ได้เช่นกัน
้ ้

55. 6.2 รู้ จักเลเยอร์
เลเยอร์ (Layer) เปรี ยบเสมือนแผ่นใสที่ใช้ในการจัดวางองค์ประกอบต่างๆ โดยสามารถนามาเรี ยงซ้อนทับ
กันได้อย่างอิสระ ซึ่ งออบเจ็กต์ที่อยูในเลเยอร์ ล่าสุ ดจะอยูทางด้านบน เมื่อทางานก็จะส่ งผลเฉพาะออบเจ็กต์ที่
่ ่
่
อยูในเลเยอร์ เท่านั้น
1) สร้ างเลเยอร์ ใหม่
เมื่อเริ่ มสร้างไฟล์ใหม่โปรแกรมจะเตรี ยมเลเยอร์ ที่ชื่อ Layer 1 ไว้ให้ ซึ่ งสามารถจัดวางองค์ประกอบต่างๆ
ลงไปได้ และหากต้องการสร้างเลเยอร์ ใหม่เพื่อให้การทางานของออบเจ็กต์ในแต่ละเลเยอร์ เป็ นอิสระต่อกัน
สามารถทาได้ดงนี้ ั
1. คลิกปุ่ ม Insert Layer ทางด้านล่างของไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ ใหม่ข้ ึนมา ทางด้านบน
ของเลเยอร์ที่ทางานอยู่

56. 2. สร้างออบเจ็กต์หรื อการเคลื่อนไหวลงในเลเยอร์ ใหม่ได้ตามต้องการ
2) สร้ างและจัดเก็บเลเยอร์ ไว้ ในเลเยอร์ โฟลเดอร์
การสร้างเลเยอร์ โฟลเดอร์ จะช่วยให้การจัดเก็บเลเยอร์ ต่างๆ เป็ นระเบียบมากยิงขึ้น โดยสามารถสร้างเลเยอร์
่
โฟลเดอร์ เพื่อนาเลเยอร์ ที่เกี่ยวข้อง เช่น เลเยอร์ ของรู ปภาพ ข้อความ เสี ยง วิดีโอ หรื อ ActionScript ไว้ใน
โฟลเดอร์ เดียวกันได้ ดังนี้
1. คลิกปุ่ ม Insert Layer Folder ทางด้านล่างของไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ โฟลเดอร์ ใหม่
ขึ้นมาทางด้านบนของเลเยอร์ ที่ทางานอยู่
2. คลิกเลือกเลเยอร์ ที่ตองการจัดเก็บไว้ในเลเยอร์ โฟลเดอร์ โดยหากกดปุ่ ม Shift ค้างไว้ จะเป็ นการ
้
เลือกเลเยอร์ แบบเป็ นช่วง หรื อกดปุ่ ม Ctrl ค้างไว้ จะเป็ นการเลือกเลเยอร์ อย่างอิสระ
3. ลากเมาส์นาไปไว้ในเลเยอร์ โฟลเดอร์ จากนั้นเลเยอร์ ที่เลือกจะถูกจัดเก็บไว้ในโฟลเดอร์
3) เปลี่ยนลาดับชั้นเลเยอร์
ออบเจ็กต์ที่อยูในเลเยอร์ บนจะถูกวางซ้อนทับออบเจ็กต์ที่อยูในเลเยอร์ ล่าง ซึ่ งหากต้องการเปลี่ยนลาดับชั้น
่ ่
ของเลเยอร์ ก็จะส่ งผลทาให้การจัดลาดับของออบเจ็กต์เปลี่ยนแปลงไปด้วย
1. เลือกเลเยอร์ ที่ตองการเปลี่ยนลาดับชั้น
้
2. ลากเมาส์เคลื่อนย้ายไปแทรกไว้ตาแหน่งใหม่ เมื่อปล่อยเมาส์เลเยอร์จะถูกเปลี่ยนลาดับไปจากเดิม

57. 4) ลบเลเยอร์
่ ่
เมื่อไม่ตองการใช้งานออบเจ็กต์ที่อยูในเลเยอร์ ใดๆ ก็สามารถลบทิ้งไปได้ ซึ่ งจะส่ งผลให้ออบเจ็กต์ที่อยูในเล
้
เยอร์ ถูกลบทิงไปทั้งหมด และหากต้องการยกเลิกการลบเลเยอร์ ก็ให้กดปุ่ ม
้
Ctrl + Z
1. เลือกเลเยอร์ที่ตองการลบ
้
่
2. คลิกปุ่ ม Delete Layer ทางด้านล่างของไทม์ไลน์ จากนั้นเลเยอร์ และออบเจ็กต์ท้ งหมดที่อยูในเล
ั
เยอร์ จะถูกลบออกไปจากไทม์ไลน์
5) ซ่ อน/แสดงเลเยอร์
ในกรณี ท่ีไม่แน่ใจก็สามารถสั่งให้ซ่อนแทนการลบเลเยอร์ ได้ ซึ่ งจะส่ งผลให้ออบเจ็กต์ท้ งหมดที่อยูในเลเยอร์
ั ่
ยังคงอยู่ และเมื่อต้องการใช้งานจึงค่อยสั่งให้แสดงเลเยอร์
1. คลิก ในคอลัมน์ ของเลเยอร์ ท่ีตองการซ่ อนให้ปรากฏเป็ นรู ป
้

58. ่
2. ออบเจ็กต์ท้ งหมดที่อยูในเลเยอร์ จะถูกซ่อนไว้ และหากคลิกอีกครั้งก็จะเป็ นการแสดงเลเยอร์
ั
6) ล็อค/ปลดล็อคเลเยอร์
หากมีออบเจ็กต์เป็ นจานวนมาก ก็สามารถสั่งล็อคเลเยอร์ เพื่อป้ องกันไม่ให้การแก้ไขส่ งผลต่อออบเจ็กต์ที่อยู่
ในเลเยอร์ใดๆ ได้
1. คลิก ในคอลัมน์ ของเลเยอร์ ที่ตองการล็อคให้ปรากฏเป็ นรู ป
้
่ ่
2. ออบเจ็กต์ท้ งหมดที่อยูในเลเยอร์ จะถูกล็อค ทาให้ทางานได้เฉพาะออบเจ็กต์ท่ีอยูในเลเยอร์ อื่นและ
ั
หากคลิกอีกครั้ง ก็จะเป็ นการปลดล็อคเลเยอร์
7) แสดงออบเจ็กต์ ในเลเยอร์ เป็ นเส้ นโครงร่ าง
โดยปกติเมื่อสร้างเลเยอร์ จะมีสีของเส้นโครงร่ างที่แตกต่างกันไป ซึ่ งการแสดงออบเจ็กต์ในลักษณะเส้น
โครงร่ างจะช่วยให้เห็นความแตกต่างของออบเจ็กต์ที่อยูในแต่ล่ะเลเยอร์ อีกทั้งยังสามารถตรวจสอบว่ามี
่
่
ออบเจ็กต์ใดซ้อนทับอยูทางด้านหลังได้ดวย ้
1. คลิก ในคอลัมน์ ของเลเยอร์ ที่ตองการแสดงเป็ นเส้นโครงร่ างให้ปรากฏเป็ นรู ป
้
่
2. ออบเจ็กต์ท้ งหมดที่อยูในเลเยอร์ จะถูกแสดงในลักษณะเป็ นเส้นโครงร่ าง และหากคลิกอีกครั้ง ก็จะ
ั
เป็ นการแสดงแบบปกติ

59. 6.3 รู้ จักเฟรม
เฟรม (Frame) มีลกษณะเหมือนฟิ ล์มภาพยนตร์ ที่แต่ล่ะช่องใช้แสดงภาพเคลื่อนไหวขององค์ประกอบต่างๆ
ั
โดยเฟรมที่ไม่มีออบเจ็กต์จะเป็ น ส่ วนเฟรมที่มีออบเจ็กต์จะเป็ น สาหรับตาแหน่งของเฟรมที่สร้างการ
เคลื่อนไหวไว้จะถูกเรี ยกว่า คียเ์ ฟรม (Keyframe) โดยคียเ์ ฟรมที่ไม่มีออบเจ็กต์จะเป็ น ส่ วนคียเ์ ฟรมที่มี
ออบเจ็กต์จะเป็ น ซึ่ งหากสร้างเฟรมไว้จานวนมาก เวลาในการแสดงมูฟวีก็จะมากขึ้น แต่หากอัตราในการ
่
แสดงเฟรมสู ง ก็จะทาให้เวลาในการแสดงมูฟวีส้ ันลง
่
1) ชนิดของเฟรม
เฟรมและคียเ์ ฟรม์จดเป็ นพื้นฐานของการสร้างภาพเคลื่อนไหว ซึ่ งสัญลักษณ์ของเฟรมจะมีรูปแบบแตกต่าง
ั
กันไปตามลักษณะของเนื้ อหาที่สร้างไว้ ดังนี้
 ่
เฟรมนิ่ง เฟรมที่ไม่มีการเคลื่อนไหวใดๆ โดยจะแสดงออบเจ็กต์ของคียเ์ ฟรมที่อยูทางด้าน
หน้าขึ้นมา มีพ้ืนหลังเป็ นสี เทา
 Motion Tween เฟรมที่สร้างภาพเคลื่อนไหวแบบเคลื่อนที่ โดยช่วงในการเคลื่อนไหวจะ
่
แสดงด้วยรู ปลูกศรสี ดาบนพื้นสี มวง ตาแหน่งเริ่ มต้นและสิ้ นสุ ดจะแสดงด้วย คียเ์ ฟรม
 Shape Tween เฟรมที่สร้างภาพเคลื่อนไหวแบบเปลี่ยนรู ปร่ าง โดยช่วงในการ
เคลื่อนไหวจะแสดงด้วยรู ปลูกศรสี ดาบนพื้นสี เขียว ตาแหน่งเริ่ มต้นและสิ้ นสุ ดจะแสดงด้วย คีย ์
เฟรม
 เส้นประ เฟรมที่ไม่สมบูรณ์หรื อมีขอผิดพลาด เช่น คียเ์ ฟรมสิ้ นสุ ดถูกลบไป
้
 ตัวอักษร a เฟรมที่มีการเขียน ActionScript ไว้ที่พาเนล Actions
 ธงสี แดง เฟรมที่มีการตั้งชื่อเพื่อใช้ระบุตาแหน่งแทนหมายเลขเฟรม
 ขีดสี เขียว เฟรมที่มีการใส่ หมายเหตุ เช่น ข้อความกากับ หรื อคาอธิ บายเกี่ยวกับเฟรมไว้
 สมอสี ทอง เฟรมที่มีการตั้งชื่ อเพื่อใช้เป็ นจุดอ้างอิง
2) เพิ่มเฟรม
่
เมื่อเริ่ มสร้างไฟล์งานโปรแกรมจะเตรี ยมคียเ์ ฟรมเปล่า ไว้ให้ 1 คียเ์ ฟรม และหลังจากสร้างออบเจ็กต์ตางๆ
คียเ์ ฟรมก็จะมีลกษณะเปลี่ยนเป็ น ซึ่ งหากต้องการเพิ่มเฟรมเพื่อขยายช่วงเวลาในการแสดงข้อมูล สามารถ
ั
ทาได้ดงนี้ ั

60. 1. คลิกช่องเฟรมที่ตองการเพิ่มเฟรม
้
2. คลิกเมาส์ขวาเลือกคาสั่ง Insert Frame หรื อกดปุ่ ม F5 จากนั้นจะปรากฏเฟรมใหม่พร้อมกับ
่
ออบเจ็กต์ท่ีอยูในคียเ์ ฟรมทางด้านหน้าขึ้นมา
3) ลบเฟรม
ในกรณี ที่สร้างเฟรมไว้ยาวจนเกินไป ก็สามารถลบเฟรมเพื่อให้มีช่วงเวลาในการแสดงผลของภาพนิ่งหรื อ
ภาพเคลื่อนไหวลดลงได้ ดังนี้
1. เลือกเฟรมที่ตองการลบ โดยหากกดปุ่ ม Shift ค้างไว้ จะเป็ นการเลือกเฟรมเป็ นช่วง หรื อกดปุ่ ม Ctrl
้
ค้างไว้จะเป็ นการเลือกเฟรมอย่างอิสระ
2. คลิกเมาส์ขวาเลือกคาสั่ง Remove Frames หรื อกดปุ่ ม Shift + F5 จากนั้นเฟรมที่เลือกจะถูกลบ ทา
ให้ออบเจ็กต์มีเวลาในการแสดงผลลดลง
4) เพิ่มคีย์เฟรม
การเพิมคียเ์ ฟรมจะช่วยให้สร้างผลงานแอนิ เมชันในรู ปแบบต่างๆ ได้ตามต้องการ โดยเมื่อเพิมคียเ์ ฟรมก็จะ
่ ่ ่
ปรากฏออบเจ็กต์ข้ ึนมาจนถึงเฟรมที่กาหนดไว้ จากนั้นก็สามารถปรับเปลี่ยนแก้ไขเพื่อให้เกิดผลงานแอนิ
เมชันได้ ดังนี้
่
1. คลิกช่องเฟรมที่ตองการเพิ่มคียเ์ ฟรม
้
2. คลิกเมาส์ขวาเลือกคาสั่ง Insert Keyframe หรื อกดปุ่ ม F6 จากนั้นจะปรากฏคียเ์ ฟรมใหม่พร้อมกับ
่
ออบเจ็กต์ท่ีอยูในคียเ์ ฟรมทางด้านหน้าขึ้นมา

61. 3. เปลี่ยนรู ปทรง เปลี่ยนสี เคลื่อนย้าย ปรับขนาด หรื อหมุน เพื่อให้เกิดผลงานแอนิ เมชัน
่
5) ลบคีย์เฟรม
ในการสร้างคียเ์ ฟรมจะปรากฏเฟรมขึ้นมาทางด้านหน้า ซึ่ งหากต้องการลบคียเ์ ฟรมที่สร้างไว้เพื่อไม่ให้
ปรากฏผลงานแอนิ เมชันขึ้นมา ก็สามารถลบคียเ์ ฟรมออกไปได้ ดังนี้
่
1. เลือกคียเ์ ฟรมที่ตองการลบ
้
2. คลิกเมาส์ขวาเลือกคาสั่ง Clear Keyframe หรื อกดปุ่ ม Shift + F6 จากนั้นคียเ์ ฟรมที่เลือกจะถูกลบ ทา
ให้ไม่มีการเปลี่ยนแปลงใดๆ ของออบเจ็กต์เกิดขึ้น
6) เคลื่อนย้ าย/คัดลอกเฟรม
ภายหลังจากทางานต่างๆ เรี ยบร้อยแล้ว หากต้องการเคลื่อนย้ายหรื อคัดลอกเฟรมก็สามารถทาได้ท้ งภายในเล
ั
เยอร์ เดียวกันและต่างเลเยอร์ โดยหากตาแหน่งปลายทางที่มีเฟรมอยู่ ก็จะถูกแทนที่ดวยเฟรมใหม่
้
1. คลิกเฟรมที่ตองการเคลื่อนย้าย/คัดลอก
้
2. ลากเมาส์ไปยังตาแหน่งปลายทาง โดยหากดปุ่ ม Alt ค้างไว้ จะเป็ นการคัดลอก จากนั้นจะปรากฏ
่
เฟรมใหม่พร้อมกับข้อมูลที่อยูในเฟรมขึ้นมา

62. 7. Animation [ สร้ างผลงานแอนิเมชั่น ]
7.1 ภาพเคลือนไหวแบบเฟรมต่ อเฟรม (Frame by Frame)
่
การสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรมเป็ นการนาเอาออบเจ็กต์แต่ละชิ้นมาเรี ยงต่อกัน โดยอาจมีการ
ปรับแต่งรู ปร่ างหรื อคุณสมบัติให้เปลี่ยนแปลงไปจากออบเจ็กต์ที่อยูก่อนหน้า และมีการแสดงอย่างต่อเนื่อง
่
ก็จะปรากฏเป็ นภาพเคลื่อนไหวขึ้นมา
1) เริ่ มสร้ างภาพเคลื่อนไหวแบบเฟรมต่ อเฟรม
เริ่ มแรกจะต้องสร้างออบเจ็กต์ข้ ึนมาก่อน จากนั้นจึงสร้างคียเ์ ฟรมพร้อมทั้งแก้ไขเนื้ อหาต่างๆ ของออบเจ็กต์
เดิม ดังตัวอย่าง
1. คลิกคียเ์ ฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรื อองค์ประกอบต่างๆ ที่ตองการให้ปรากฏเป็ นภาพเคลื่อนไหว
้

63. 3. คลิกเมาส์ขวาที่ช่องเฟรมและเลือกคาสั่ง Insert Keyframe หรื อกดปุ่ ม F6 จากนั้นจะปรากฏคียเ์ ฟรม
่
ใหม่พร้อมกับออบเจ็กต์ที่อยูในคียเ์ ฟรมทางด้านหน้าขึ้นมา
4. ปรับแต่งออบเจ็กต์หรื อคลิกปุ่ ม จาก Properties
5. ดับเบิลคลิกซิ มโบลใหม่ที่ตองการนามาเป็ นภาพเคลื่อนไหว
้
6. คลิกเมาส์ขวาที่ช่องเฟรมสุ ดท้ายและเลือกคาสั่ง Insert Frame หรื อกดปุ่ ม F5 เพื่อแสดง
ภาพเคลื่อนไหวในคียเ์ ฟรมที่ 2 ให้นานขึ้น
ตัวอย่างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม

64. 2) ปรั บแต่ งภาพเคลื่อนไหวแบบเฟรมต่ อเฟรม
การปรับแต่งภาพเคลื่อนไหวแบบเฟรมต่อเฟรมสามารถทาได้เพียงคลิกปุ่ ม Edit Multiple Frames จากนั้น
่
จึงลาก Maker ให้ครอบคลุมเพื่อให้เห็นออบเจ็กต์ที่อยูในเฟรมทั้งหมด และเมื่อแก้ไขใดๆ ก็จะส่ งผลต่อ
ออบเจ็กต์ที่นามาเป็ นผลงานแอนิ เมชันทันที
่
1. คลิกปุ่ ม Edit Multiple Frames ทางด้านล่างของไทม์ไลน์ จากนั้นปรากฏ Marker ที่ใช้บอกขอบเขต
การแสดงเนื้ อหาของเฟรมอื่นขึ้นมา
2. ลากเมาส์ปรับ Marker ให้ครอบคลุมเฟรมทั้งหมดที่ตองการปรับแต่งแก้ไข
้
่
3. คลิกไอคอนหรื อชื่ อของเลเยอร์ เพื่อเลือกออบเจ็กต์ท้ งหมดที่อยูในเลเยอร์
ั
4. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
7.2 ภาพเคลือนไหวแบบเคลื่อนที่ (Motion Tween)
่
เป็ นการกาหนดให้ออบเจ็กต์มีการเคลื่อนไหวเปลี่ยนตาแหน่งหรื อเปลี่ยนคุณสมบัติแบบแน่นอนโดยไม่
เกี่ยวกับการเปลี่ยนแปลงของรู ปร่ าง ซึ่ งจะต้องสร้างคียเ์ ฟรมเริ่ มต้นและสิ้ นสุ ด จากนั้นจึงปรับแต่งและ
กาหนดให้เป็ น Motion Tween ก็จะปรากฏภาพเคลื่อนไหวขึ้นมา

65. 1) เริ่ มสร้ างภาพเคลื่อนไหวแบบเคลื่อนที่
ออบเจ็กต์ที่นามาสร้างภาพเคลื่อนไหวแบบเคลื่อนที่เป็ นได้ท้ ง Object Drawing ข้อความ ซิมโบล ออบเจ็กต์
ั
ที่ถูกรวมกลุ่ม ยกเว้น Merge Drawing
1. คลิกคียเ์ ฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรื อองค์ประกอบต่างๆ ที่ตองการให้ปรากฏเป็ นภาพเคลื่อนไหว
้
3. คลิกเมาส์ขวาที่ช่องเฟรมสุ ดท้ายและเลือกคาสั่ง Insert Keyframe หรื อกดปุ่ ม F6 จากนั้นจะปรากฏ
่
คียเ์ ฟรมใหม่พร้อมกับออบเจ็กต์ที่อยูในคียเ์ ฟรมทางด้านหน้าขึ้นมา

66. 4. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
5. คลิกคียเ์ ฟรมแรกหรื อเฟรมระหว่างกลาง
6. ที่ Properties ในส่ วนของ Tween ให้คลิกเลือก Motion จากนั้นปรากฏลูกศรแสดงการสร้างแอนิ
เมชันขึ้นมา
่
2) ปรั บแต่ งภาพเคลื่อนไหวแบบเคลื่อนที่
ภายหลังจากการสร้างภาพเคลื่อนไหวแบบเคลื่อนที่เรี ยบร้อยแล้ว ก็สามารถปรับแต่งรู ปแบบในการ
เคลื่อนไหว เช่น ให้มีการปรับขนาด ให้หมุน เปลี่ยนระดับความเร็ ว ในการเคลื่อนที่ ฯลฯ ได้ โดยหากคลิก
ปุ่ ม Onion Skin ทางด้านล่างของไทม์ไลน์ ก็จะปรากฏเนื้ อหาในเฟรมอื่นๆ ขึ้นมาด้วย
1. คลิกเลือกคียเ์ ฟรมหรื อเฟรมระหว่างกลางที่ใช้แสดงภาพเคลื่อนไหว

67. 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 ได้ ดังนี้

68. 1. สร้างและคลิกเลเยอร์ ที่กาหนดให้เป็ นภาพเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween) ไว้
่
2. คลิกปุ่ ม Add Motion Guide จากนั้นเลเยอร์ ที่เลือกจะไปอยูภายใต้เลเยอร์ Motion Guide ที่สร้าง
ขึ้นมาใหม่
3. วาดรู ปทรงที่ใช้เป็ นเส้นทางในการเคลื่อนที่ลงในเลเยอร์ Motion Guide
4. คลิกคียเ์ ฟรมแรกของภาพเคลื่อนไหว
5. เคลื่อนย้ายให้จุดศูนย์กลางของออบเจ็กต์ไปยึดติดกับตาแหน่งเริ่ มต้นของเส้น

69. 6. คลิกคียเ์ ฟรมสุ ดท้ายของภาพเคลื่อนไหว
7. เคลื่อนย้ายให้จุดศูนย์กลางของออบเจ็กต์ไปยึดติดกับปลายเส้น
2) ปรั บแต่ งภาพเคลื่อนไหวตามเส้ นไกด์
การวาดภาพเคลื่อนไหวตามเส้นไกด์สามารถปรับแต่งรู ปแบบในการเคลื่อนไหว เช่นเดียวกับ Motion
Tween แต่จะมีค่าคุณสมบัติอื่นๆ เพิ่ม ดังนี้
1. คลิกคียเ์ ฟรมหรื อเฟรมระหว่างกลางที่ใช้แสดงภาพเคลื่อนไหว
2. ที่ Properties ให้เลือกปรับแต่งรู ปแบบการเคลื่อนที่บนเส้นไกด์ โดยมีรายละเอียดดังนี้
 Orient to Path ให้ออบเจ็กต์เคลื่อนที่หมุนเอียงไปตามความโค้งของเส้นไกด์
 Sync หากภาพเคลื่อนไหวเป็ นกราฟิ กซิ มโบล ให้ปรับการเคลื่อนไหวให้สอดคล้องกับไทม์ไลน์
หลัก
 Snap ยึดติดออบเจ็กต์เข้ากับเส้นไกด์โดยอัตโนมัติ

70. 7.4 ภาพเคลือนไหวแบบเปลี่ยนรู ปทรง (Shape Tween)
่
เมื่อต้องการให้มีการเปลี่ยนแปลงรู ปทรงของออบเจ็กต์จากภาพนิ่งภาพหนึ่งไปเป็ นอีกภาพหนึ่ง สามารถทา
ได้ดวย Shape Tween โดยโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมต่างๆ ให้โดยอัตโนมัติ
้
1) เริ่ มสร้ างภาพเคลื่อนไหวแบบเปลี่ยนรู ปทรง
การสร้างภาพเคลื่อนไหวแบบเปลี่ยนรู ปทรงจะต้องใช้ออบเจ็กต์แบบ Merge Drawing หรื อ Object Drawing
ซึ่ งหากเป็ นอินสแตนซ์ ข้อความ หรื อออบเจ็กต์ที่รวมกลุ่ม ก็จะต้องแยกส่ วน (Break Apart) ก่อน
1. คลิกคียเ์ ฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรื อองค์ประกอบต่างๆ ที่ตองการให้ปรากฏเป็ นภาพเคลื่อนไหว
้
3. คลิกเมาส์ขวาที่ช่องเฟรมสุ ดท้ายและเลือกคาสั่ง Insert Keyframe หรื อกดปุ่ ม F6 จากนั้นจะปรากฏ
่
คียเ์ ฟรมใหม่พร้อมกับออบเจ็กต์ที่อยูในคียเ์ ฟรมทางด้านหน้าขึ้นมา

71. 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 ขึ้นมา

72. 2. ลากเมาส์นา Shape Hint มาวางยังเส้นขอบของออบเจ็กต์ตนทาง ้
3. คลิกคียเ์ ฟรมสุ ดท้าย
4. เมาส์นา Shape Hint มาวางยังเส้นขอบของออบเจ็กต์ปลายทาง โดยให้เทียบกับตาแหน่งที่ได้วางไว้
ในออบเจ็กต์ตนทาง จากนั้นให้ดาเนิ นการซ้ าในขั้นตอนที่ 1-5 โดยเรี ยงจากมุมบนซ้ายวนไปแบบ
้
ทวนเข็มนาฬิกา และเมื่อเรี ยงเรี ยบร้อยแล้ว Shape Hint ตาแหน่งต้นทางจะเป็ นสี เหลือง ส่ วน
ปลายทางจะเป็ นสี เขียว
7.5 ภาพเคลือนไหวแบบบังภาพ (Mask Layer)
่
เป็ นการกาหนดให้แสดงออบเจ็กต์ภายในรู ปทรงที่สร้างไว้ เหมือนกับการส่ องไฟไปที่ตวละครในลักษณะ
ั
เป็ นสปอตไลต์ โดยสามารถกาหนดให้เป็ นภาพนิ่งหรื อภาพเคลื่อนไหวก็ได้
1) เริ่ มสร้ างภาพเคลื่อนไหวแบบบังภาพ
ในการสร้างภาพเคลื่อนไหวแบบบังภาพจะต้องสร้างรู ปทรงไว้ในเลเยอร์ ทางด้านบนก่อน จากนั้นสามารถ
กาหนดการเคลื่อนไหวในรู ปแบบต่างๆ ก็จะปรากฏเป็ นภาพเคลื่อนไหวแบบบังภาพขึ้นมา
1. คลิกคียเ์ ฟรมแรกของภาพเคลื่อนไหว
2. วาดรู ปทรงที่ใช้ในการบังภาพ โดยอาจเป็ นข้อความหรื อรู ปทรงใดๆ ก็ได้

73. 3. คลิกเมาส์ขวาที่ช่องเฟรมสุ ดท้ายและเลือกคาสั่ง Insert Keyframe หรื อกดปุ่ ม F6 จากนั้นจะปรากฏ
่
คียเ์ ฟรมใหม่พร้อมกับออบเจ็กต์ที่อยูในคียเ์ ฟรมทางด้านหน้าขึ้นมา
4. ปรับแต่งแก้ไขรู ปทรง ได้ตามต้องการ
5. คลิกคียเ์ ฟรมแรกหรื อเฟรมระหว่างกลาง
6. ที่ Properties ในส่ วนของ Tween ให้คลิกเลือก Shape หรื อ Motion และกาหนดค่าคุณสมบัติต่างๆ
7. คลิกเมาส์ขวาบนเลเยอร์ เลือกคาสั่ง Mask จากนั้นเลเยอร์ ทางด้านล่างจะถูกแสดงผลตามรู ปทรงที่
สร้างไว้ในเลเยอร์ Mask โดยโปรแกรมจะล็อคพร้อมทั้งเปลี่ยนรู ปแบบของไอคอนหน้าเลเยอร์ ให้
โดยอัตโนมัติ

74. 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.
ั ่

75.  ออกแบบหน้าตาของเว็บไซต์
 Concept to Concept Design
 Theme : แนว Monster
 Layout :
 Color : ใช้2สี คือสี ดา-เขียว
 Font : Cordia New 14 สี ดา
 ร่ างรู ปแบบเค้าโครงของเว็บไซต์ :

76.  Web Stucture โครงสร้างของเว็บไซต์ :

77.  ออกแบบหน้าตาของเว็บไซต์ :