ในปัจจุบันโปรแกรม Adobe Flash Professional เป็นโปรแกรมที่ทำหน้าที่สร้างภาพนิ่ง ภาพเคลื่อนไหว โดยใช้หลักการของ Vector Graphic และการตอบสนองต่อเหตุการณ์ต่างๆ ที่ทำให้ เว็บเพจดูมีชีวิตชีวา สวยงามและดึงดูดความสนใจของผู้เข้ามาเยี่ยมชมได้ อีกทั้งชิ้นงานที่ได้ยังมี ขนาดเล็ก ทำให้ไม่สร้างปัญหาเมื่อต้องนำมาเผยแพร่ทางอินเตอร์เน็ต หลักสูตรนี้จะช่วยให้ผู้เข้าอบรมได้ทราบถึงเครื่องมือที่ใช้ในการสร้างงาน วิธีการสร้างภาพกราฟิก ตัวการ์ตูน โลโก้ และขั้นตอนการสร้างภาพเคลื่อนไหว ข้อความเคลื่อนไหวแบบต่างๆ การ์ตูนอนิเมชั่น รวมทั้งการตัดต่อไฟล์เสียงเพื่อประกอบชิ้นงาน เป็นต้น 1) แนะนำ Adobe Flash 4 2) ประเภทของกราฟิก 5 3) การเข้าสู่โปรแกรม 6 4) ส่วนประกอบของโปรแกรม Flash 6 5 ) การปรับการแสดงขนาดพื้นที่ทำงาน 8 6 ) การเรียกใช้ ไม้บรรทัด 8 7) เครื่องมือต่าง ๆ (Toolbox) 9 8) การทำงานกับสี 14 9) การจัดการกับวัตถุ 17 10) การใช้ตัวอักษร (Using Text) 21 11) การใช้งานรูปภาพ Graphic 23 12) การทำซ้ำรูปภาพ 23 13) การทำงานกับภาพบิตแมพ 24 14) การใช้สัญลักษณ์ (Symbol & Instance) 25 15) การสร้าง Animation 27 16) ประเภทของการสร้างภาพเคลื่อนไหว 30 17) การสร้าง Animation ด้วย Motion Tween 31 18) การแสดงผลการทำงานของ Animation 32 19) การแสดงหน้าต่าง Control 33 20) การสร้าง Animation โดยใช้ Motion Path 33 21) การสร้าง Animation โดยกำหนดคุณสมบัติของ Motion 35 22) การสร้าง Animation ด้วย Shape Tween 38 23) การสร้าง Animation ด้วย Frame by Frame 39 24) การใช้งานเลเยอร์ (Layer) 41 25) การใช้งาน Mask Layer 43 26) สร้าง Mask Layer ในภาพ 46

1. เอกสารประกอบการอบรม
หลักสูตร การผลิตสื่อมัลติมีเดียด้วยโปรแกรมสาเร็จรูป
ระหว่างวันที่ 2 – 3, 9 – 10 กรกฎาคม พ.ศ. 2559
ณ โรงเรียนจุฬาภรณราชวิทยาลัย ลพบุรี
วิทยากร
อาจารย์เล็กฤทัย ขันทองชัย
คณะวิทยาการจัดการ มหาวิทยาลัยราชภัฏจันทรเกษม

2. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 2
คานา
ในปัจจุบันโปรแกรม Adobe Flash Professional เป็นโปรแกรมที่ทาหน้าที่สร้างภาพนิ่ง
ภาพเคลื่อนไหว โดยใช้หลักการของ Vector Graphic และการตอบสนองต่อเหตุการณ์ต่างๆ ที่ทาให้
เว็บเพจดูมีชีวิตชีวา สวยงามและดึงดูดความสนใจของผู้เข้ามาเยี่ยมชมได้ อีกทั้งชิ้นงานที่ได้ยังมี
ขนาดเล็ก ทาให้ไม่สร้างปัญหาเมื่อต้องนามาเผยแพร่ทางอินเตอร์เน็ต
หลักสูตรนี้จะช่วยให้ผู้เข้าอบรมได้ทราบถึงเครื่องมือที่ใช้ในการสร้างงาน วิธีการสร้าง
ภาพกราฟิก ตัวการ์ตูน โลโก้ และขั้นตอนการสร้างภาพเคลื่อนไหว ข้อความเคลื่อนไหวแบบต่างๆ
การ์ตูนอนิเมชั่น รวมทั้งการตัดต่อไฟล์เสียงเพื่อประกอบชิ้นงาน เป็นต้น

3. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 3
สารบัญ
หน้า
1) แนะนา Adobe Flash 4
2) ประเภทของกราฟิก 5
3) การเข้าสู่โปรแกรม 6
4) ส่วนประกอบของโปรแกรม Flash 6
5) การปรับการแสดงขนาดพื้นที่ทางาน 8
6) การเรียกใช้ ไม้บรรทัด 8
7) เครื่องมือต่าง ๆ (Toolbox) 9
8) การทางานกับสี 14
9) การจัดการกับวัตถุ 17
10) การใช้ตัวอักษร (Using Text) 21
11) การใช้งานรูปภาพ Graphic 23
12) การทาซ้ารูปภาพ 23
13) การทางานกับภาพบิตแมพ 24
14) การใช้สัญลักษณ์ (Symbol & Instance) 25
15) การสร้าง Animation 27
16) ประเภทของการสร้างภาพเคลื่อนไหว 30
17) การสร้าง Animation ด้วย Motion Tween 31
18) การแสดงผลการทางานของ Animation 32
19) การแสดงหน้าต่าง Control 33
20) การสร้าง Animation โดยใช้ Motion Path 33
21) การสร้าง Animation โดยกาหนดคุณสมบัติของ Motion 35
22) การสร้าง Animation ด้วย Shape Tween 38
23) การสร้าง Animation ด้วย Frame by Frame 39
24) การใช้งานเลเยอร์ (Layer) 41
25) การใช้งาน Mask Layer 43
26) สร้าง Mask Layer ในภาพ 46

4. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 4
Adobe Flash
ในปัจจุบันโปรแกรม Adobe Flash Professional เป็นโปรแกรมที่ทาหน้าที่สร้างภาพนิ่ง
ภาพเคลื่อนไหว โดยใช้หลักการของ Vector Graphic และการตอบสนองต่อเหตุการณ์ต่างๆ ที่ทาให้
เว็บเพจดูมีชีวิตชีวา สวยงามและดึงดูดความสนใจของผู้เข้ามาเยี่ยมชมได้ อีกทั้งชิ้นงานที่ได้ยังมี
ขนาดเล็ก ทาให้ไม่สร้างปัญหาเมื่อต้องนามาเผยแพร่ทางอินเตอร์เน็ต
สาเหตุสาคัญที่ทาให้ไฟล์มัลติมีเดียที่สร้างโดย Flash มีขนาดเล็กมาก เมื่อเทียบกับไฟล์
มัลติมีเดียประเภทอื่น เป็นเพราะรูปแบบการเก็บรายละเอียดของรูปเป็นลายเส้น ในขณะที่โปรแกรมอื่นๆ
จะบันทึกรายละเอียดของรูปทุก Pixels
Flash ในการสร้างงาน Presentation Flash ในการสร้างเว็บไซต์
Flash ในการสร้าง Cartoon Animation Flash ในการสร้างโปรแกรม Interactive

5. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 5
ประเภทของกราฟิ ก
การสร้างภาพกราฟิกด้วยคอมพิวเตอร์ มีวิธีการสร้าง 2 แบบ คือ แบบบิตแมพ (Bitmap) และ
แบบเวคเตอร์ (Vector)
1. Bitmap Graphic
กราฟิกแบบบิตแมป เป็นภาพที่เกิดจากจุดสีที่เรียกว่า Pixels ซึ่งประกอบกันเป็นรูปร่างบนพื้นที่
ที่มีลักษณะเป็นเส้นตาราง (grid) ทาให้เกิดปัญหาเมื่อมีการขยายภาพ เพราะตารางของภาพมีขนาดที่
แน่นอน
2. Vector Graphic
กราฟิกแบบเวคเตอร์ต่างจากบิตแมปตรงที่บิตแมปนั้นประกอบไปด้วย จุดต่างๆ มากมาย แต่
กราฟิกแบบเวคเตอร์ใช้สมการทางคณิตศาสตร์เป็นตัวสร้างภาพ เช่น วงกลม หรือเส้นตรง เป็นต้น ทาให้
เมื่อทาการขยายภาพความคมชัดของภาพยังคงเดิมเนื่องจาก คอมพิวเตอร์ต้องทาการคานวณในการ
สร้างภาพขึ้นมาใหม่
ภาพก่อน
ขยาย
Vector Graphic Bitmap Graphic

6. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 6
การเข้าสู่โปรแกรม
1. ไปที่ปุ่ม Start Menu
2. เลือก Programs
3. เลือก Adobe
4. เลือก Adobe Flash Professional CS6
ส่วนประกอบของโปรแกรม
 กล่องเครื่องมือ (Toolbox)
เป็นกล่องสาหรับเก็บอุปกรณ์ต่างๆ ที่ใช้ในการทางาน เช่น วาดรูป ปรับเปลี่ยนรูปร่าง และแต่ง
เติมสีสันให้กับชิ้นงาน
 ไทม์ไลน์ (Timeline)
ทาหน้าที่เป็นตัวจัดเก็บข้อมูลของ Animation โดยจะแบ่งออกเป็นช่องๆ เรียกว่า เฟรม (Frame)
ทาหน้าที่เหมือนกันแผ่นเฟรมในม้วนฟิล์มภาพยนตร์
Stage
Timeline
Panel
s
Properties InspectorToolbox

7. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 7
 พื้นที่งาน (Stage)
ทาหน้าที่เป็นพื้นที่หน้าต่างที่ใช้ในการจัดวาง ควบคุม แก้ไข แสดงผล และทางานกับชิ้นงาน
ทั้งหมด เปรียบเสมือนเวทีแสดง เมื่อเราสร้างงานหรือวางวัตถุบน Stage เราจะเรียกภาพรวมนี้ว่า
Scene
 หน้าต่างควบคุมการทางาน (Panel)
เป็นส่วนที่ใช้เก็บหน้าต่างเสริมในการทางาน เช่น หน้าต่างควบคุมลูกเล่นสี หน้าต่างควบคุม
Library เป็นต้น โดยสามารถเรียกหน้าต่างควบคุมเหล่านี้ได้ที่เมนู Windows และคลิกเมนูที่ต้องการ
 แถบคุณสมบัติ (Properties)
เป็นหน้าต่างที่ใช้แสดงคุณสมบัติต่างๆ ของวัตถุ และเราสามารถเปลี่ยนแปลงคุณสมบัติเหล่านั้น
ได้ เช่น ขนาดของพื้นที่การทางาน สีพื้นหลัง เมื่อมีการคลิกเลือกวัตถุ คุณสมบัติจะมีการเปลี่ยนแปลงไป
ตามคุณลักษณะของวัตถุนั้นๆ
Tips & Tricks : วัตถุ(Object)
วัตถุ (Object) ในที่นี้ หมายถึง รูปทรง รูปภาพ ภาพกราฟิกที่วาด หรือนาเข้ามาใช้งานใน
Adobe Flash นั่นเอง
การสร้างงานชิ้นใหม่
เมื่อต้องการสร้าง Movie File ใหม่สามารถกระทาได้ดังนี้
1. เมนู File
2. เลือก New
การกาหนดคุณสมบัติของเอกสาร
ก่อนที่จะทาการสร้าง Movie File ใน Flash
ควรจะกาหนดขนาดชิ้นงาน Dimension
Frame Rate และสีพื้นหลังของ Movie ก่อน
1. เมนู Modify
2. เลือก Document Settings
3. กาหนดค่าตามต้องการ
- Dimensions: กาหนดขนาดของ Stage
โดยกาหนดที่ส่วนของ Width และ Height
Ctrl + N
หรือกดปุ่ม Ctrl + J

8. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 8
- Match:
Printer : กาหนดให้พื้นที่ Stage มีขนาดเท่ากับที่ตั้งไว้บนเครื่องพิมพ์
Contents : กาหนดให้พื้นที่ Stage พอดีกับรูปทั้งหมดที่สร้างไว้ใน Movie
Default : กาหนดรูปแบบมาตรฐานให้กับ Stage
- Background Color : กาหนดสีพื้นของ Stage
- Frame Rate : กาหนดจานวนเฟรมที่แสดงต่อวินาที (fps)
- Ruler Units : กาหนดหน่วยของไม้บรรทัด
- Make Default : กาหนดให้รูปแบบที่ได้กาหนดไว้เป็นรูปแบบมาตรฐาน
4. คลิกปุ่ม OK
การปรับการแสดงขนาดพื้นที่ทางาน
 เลือกขนาดที่ต้องการ
 Show Frame : แสดงขนาดชิ้นงานให้พอดีกับพื้นที่ว่าง
การเรียกใช้ ไม้บรรทัด
 เมนู View > Rulers หรือกดปุ่ม Ctrl+Alt+Shift+R
 ลากเส้นไม้บรรทัดมาไว้ใช้
 ถ้าไม่ต้องการใช้ก็ลากเก็บไว้ที่เดิม
 หากไม่ต้องการเส้นไม้บรรทัดให้กดเพื่อยกเลิกเช่นเดิม

9. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 9
เครื่องมือต่างๆ (Toolbox)
Tips & Tricks : คีย์ลัดคีย์ด่วน (Shortcut Keys)
หมายถึง เครื่องมือที่ช่วยในการเรียกใช้โปรแกรมได้อย่างรวดเร็วและสามารถเข้าถึงโปรแกรม
หรือแฟ้มข้อมูลที่ต้องการได้ทันที ในการเรียกใช้คาสั่งต่างๆ ของชุดโปรแกรม Adobe Flash ซึ่งปกติแล้ว
เราจะอาศัยการเลื่อนเมาส์ไปคลิกที่ Menu bar หรือ Tools bar แต่ยังมีวิธีหนึ่งซึ่งง่ายกว่านั้นอีก แต่ต้อง
อาศัยความจานิดหน่อย สิ่งนั้นเรียกว่า คีย์ลัด (Shortcut Keys) เป็นการเรียกใช้คาสั่งโดยการกดจาก
แป้นคีย์บอร์ด คีย์ลัด คีย์ด่วนเหล่านี้ จะช่วยประหยัดเวลาการทางานให้เราได้มาก ช่วยให้ทางานรวดเร็ว
ยิ่งขึ้น เป็นวิธีที่จะใช้โปรแกรมให้สะดวกที่สุด นอกจากนี้แล้วในชุดโปรแกรม Adobe Professional ก็จะ
ใช้คีย์ลัดส่วนใหญ่เหมือนกัน
Selection Tool หรือกดปุ่ม V
SubSelection Tool หรือกดปุ่ม A
Free Transform Tool หรือกดปุ่ม Q
3D Rotation Tool หรือกดปุ่ม W
Lasso Tool หรือกดปุ่ม L
Pen Tool หรือกดปุ่ม P
Text Tool หรือกดปุ่ม T
Line Tool หรือกดปุ่ม N
Rectangle Tool (R) Oval Tool (O) Rectangle Primitive (R) Oval Primitive (O) PolyStar Tool
Pencil Tool หรือกดปุ่ม Y
Brush Tool หรือกดปุ่ม B
Deco Tool หรือกดปุ่ม D
Bone Tool หรือกดปุ่ม M
Paint Bucket Tool หรือกดปุ่ม K
Eyedropper Tool หรือกดปุ่ม I
Eraser Tool หรือกดปุ่ม E
Hand Tool หรือกดปุ่ม H
Zoom Tool หรือกดปุ่ม Z
Stroke Color
Fill Color
Black and White และ Swap Colors Tool

10. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 10
 Line Tool
Line Tool ใช้ในการวาดเส้น โดยการคลิกที่ แล้วคลิกเมาส์ซ้ายค้าง แล้วลากที่ Stage โดย
ถ้าต้องการเส้นตรง ให้กดปุ่ม Shift ค้างขณะวาด
 การกาหนดคุณสมบัติของเส้น
กาหนดสีเส้น
กาหนดความหนาของเส้น
กาหนดลักษณะเส้น
 การทาเส้นตรงให้กลายเป็นเส้นโค้ง
ใช้ Selection Tool หรือปรับแต่งรูปทรงวัตถุ
- ใช้เลือกวัตถุ
- ย้ายวัตถุ
- คัดลอกวัตถุ
(กด Alt ขณะย้าย)
ใช้ปรับโค้ง ใช้ย้ายจุด

11. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 11
 Oval Tool
ใช้ในการวาดรูปวงรีและวงกลม โดยถ้าต้องการให้วาดแล้วเป็นวงกลม สัดส่วนที่เท่ากัน ให้กดปุ่ม
Shift ค้างขณะวาด
 การคุณสมบัติของวงกลม
กาหนดสีเส้น
กาหนดความหนาของเส้น
กาหนดลักษณะเส้น
 Rectangle Tool
ใช้ในการวาดรูปสี่เหลี่ยม โดยถ้าต้องการให้วาดแล้วเป็นสี่เหลี่ยมจัตุรัส ให้
กดปุ่ม Shift ค้างขณะวาด
Option เพิ่มเติม
เมื่อคลิกจะให้กาหนดความโค้งของมุม
กาหนดความโค้งของมุม

12. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 12
 Pencil Tool
ใช้ในการวาดเส้น โดยวาดได้ทั้งเส้นตรง เส้นโค้งและเส้นอิสระ การใช้งานจะเหมือนกับวาดด้วย
ดินสอ
Options เพิ่มเติม
- Straighten : จะทาการปรับแต่งเส้นที่วาดให้มีลักษณะเป็นเส้นตรง
- Smooth : จะทาการปรับแต่งเส้นที่วาดให้มีลักษณะเป็นเส้นโค้ง
- Ink : ใช้วาดในลักษณะ Freehand
 Pen Tool
ใช้วาดเส้นตรง หรือเส้นโค้งโดยสามารถปรับโค้งขณะวาดได้
สัญลักษณ์ของเมาส์กับการทางานกับ Pen Tool
เลือก Pen Tool >> คลิกที่จุดเริ่มต้น >> คลิกที่จุดถัดไป กดปุ่มเมาส์ค้าง
แล้วลากเมาส์เพื่อปรับโค้ง >> Double Click เพื่อหยุดการวาด
แสดงว่าการใช้งาน Pen Tool กับวัตถุชิ้นนั้นๆยังไม่จบการ
ทางาน
แสดงว่าการใช้งาน Pen Tool กับวัตถุชิ้นนั้นๆ สิ้นสุดการทางาน
แล้ว
ใช้ในการเพิ่ม Node ณ ตาแหน่งที่ต้องการดังรูป
ใช้ในการปรับส่วนโค้งให้เป็นเส้นตรง
ใช้ในการลบ Node ณ ตาแหน่งที่ต้องการดังรูป

13. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 13
 Brush Tool
ใช้แปรงระบายสีเป็นเครื่องมือที่ใช้ในการระบายสี โดยทาการเลือกสีที่ต้องการระบายให้เป็นสีของ
Fill Color แล้วระบายโดยการคลิกเมาส์ค้างตามต้องการ
 การเลือกลักษณะของแปรงระบายสีที่ใช้
ขนาดและหน้าตัดของแปรงระบายสี เราสามารถเลือกใช้งานได้จาก Option ของแปรงระบายสี
(Brush Tool) โดยกาหนดขนาดของแปรงระบายที่ช่อง Brush Size และกาหนดลักษณะหน้าตัดของ
แปรงระบายได้ที่ช่อง Bruch Shape

14. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 14
 การกาหนดคุณลักษณะของการระบายสี
เราสามารถกาหนดคุณลักษณะของการระบายสีได้ โดยคลิกที่ปุ่ม
แล้วเลือกลักษณะการระบายสีตามต้องการ
กาหนดให้ระบายสีทับทุกส่วนของภาพ
กาหนดให้ระบายสีทับในพื้นที่เว้นเส้นกรอบรูปไว้
กาหนดให้ระบายสีในส่วนพื้นหลัง
กาหนดให้ระบายสีทับในส่วนที่ได้ทาการ Selection ไว้
กาหนดให้ระบายสีทับพื้นที่ด้านใน
ภาพปกติ การระบายสีแบบปกติ การระบายสีพื้นที่ทั้งหมดยกเว้นกรอบ
การระบายสีพื้นหลังภาพ การระบายสีพื้นที่ที่เลือก การระบายสีพื้นภายในกรอบ
 การลบส่วนที่ไม่ต้องการออกโดย Eraser Tool
เราสามารถลบส่วนที่ไม่ต้องการของภาพออกได้ โดยการคลิก drag mouse ลบบริเวณที่
ไม่ต้องการของภาพออก
 การกาหนดคุณลักษณะของการลบ
กาหนดให้ลบทุกส่วนของภาพ
กาหนดให้ลบส่วนที่เป็นพื้นที่ยกเว้นเส้นกรอบ
กาหนดให้ลบเฉพาะเส้นกรอบ
กาหนดให้ลบเฉพาะพื้นที่ที่ถูกเลือก
กาหนดให้ลบเฉพาะพื้นที่ภายในเส้นกรอบ

15. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 15
กาหนดให้ลบทุกส่วนของภาพ กาหนดให้ลบส่วนที่เป็นพื้นที่ยกเว้น
เส้นกรอบ
กาหนดให้ลบเฉพาะเส้นกรอบ
กาหนดให้ลบเฉพาะพื้นที่ที่ถูกเลือก กาหนดให้ลบเฉพาะพื้นที่ภายใน
เส้นกรอบ
การทางานกับสี
 Stroke และ Fill เส้นและพื้นที่ภายใน
Stroke : เป็นเส้นกรอบรูปหรือเส้นโครงร่างของวัตถุ หรือเป็นเส้นที่ถูกสร้างขึ้นมา เช่น เส้นตรง
เส้นโค้งหรือเส้นที่เป็นลวดลาย
Fill : เป็นพื้นที่ภายในของเส้นรอบรูป หรือพื้นที่ที่ไม่มีเส้นรอบรูปก็ได้เป็นรูปทรง 2 มิติ ซึ่งเรา
สามารถที่จะแยกระหว่าง Stroke กับ Fill ได้ดังนี้
Stroke
Fill
Stroke
Fill

16. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 16
ในกลุ่มของ Colors จะใช้ในการปรับสีพื้นและสีเส้นของวัตถุ
การปรับแต่งสีจะเลือกวัตถุก่อนแล้วค่อยปรับแต่งสี หรือ
จะเลือกสีก่อนแล้วค่อยวาดวัตถุก็ได้ โดยถ้าคลิกเลือกสีจะมี
ตารางของสีให้เลือกดังรูป
 การใช้หน้าต่าง Color Mixer
Color Mixer เป็นหน้าต่างแสดงค่าหรือผสมเพื่อนาไปใช้
กับวัตถุ โดยสีที่ได้จะนาไปใช้กับ Stroke Color และ Fill Color
โดยการคลิกเมาส์เลือกสีที่แถบสีในหน้าต่าง Color Mixer
นอกจากนั้นยังมีรูปแบบให้เลือกผสมสีดังนี้
แบบ Solid : เป็นการกาหนดสีพื้น
แบบ Linear : เป็นการกาหนดให้มีการไล่สีแบบเส้นตรง
แบบ Redial : เป็นการกาหนดให้มีการไล่สีจากจุด
ศูนย์กลางวงกลมไปตามแนวรัศมี
แบบ Bitmap : เป็นการกาหนดให้สีพื้นเป็นภาพ
ใช้กาหนดสีเส้น
ใช้กาหนดสีพื้น
สลับระหว่างสีเส้นกับสีพื้น
ไม่กาหนดสี
สีที่เป็น Default

17. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 17
 Gradient Transform Tool
Gradient Transform ใช้ปรับแต่งสีแบบเฉด โดยคลิก Gradient Transform Tool แล้วคลิกที่วัตถุ
จะได้ผลดังรูป
 Eyedropper Tool
ใช้ดูดสีเพื่อนาไปใช้งาน
- ถ้าชี้ที่เส้นสัญลักษณ์ของเมาส์เป็นรูป ซึ่งเป็นการดูดสีของเส้นเก็บใน Stroke Color Tool
- ถ้าชี้ที่พื้นวัตถุสัญลักษณ์ของเมาส์เป็นรูป ซึ่งเป็นการดูดสีพื้นเก็บใน Fill Color Tool
 Zoom Tool
ใช้ในการย่อขยายวัตถุ
Options เพิ่มเติม
- การขยายวัตถุสามารถกดปุ่มได้โดยใช้ Ctrl + = (Ctrl ร่วมกับเครื่องหมาย =)
- การย่อวัตถุสามารถกดปุ่มได้โดยใช้ Ctrl + - (Ctrl ร่วมกับเครื่องหมาย –)
 Hand Tool
ใช้ในการเลื่อนดูข้อมูล
ในกรณีที่ท่านใช้ Tool ใดๆ แล้วต้องการใช้ Hand Tool ให้กด Space bar ค้าง
ปรับทิศทางการไล่เฉดสี
ปรับความกว้างของเฉดสี
ย่อวัตถุขยายวัตถุ
ถ้ากด Alt ค้างขณะคลิก จะได้ Zoom Tool ในลักษณะตรงกันข้าม
ถ้า Double Click ที่ Zoom Tool จะได้การขยายแบบ 100%
ถ้า Double Click ที่ Hand Tool จะขยายเท่าขนาดของ Stage

18. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 18
การจัดการกับวัตถุ
 การปรับขนาดวัตถุ (Scale)
1. เลือกวัตถุ
2. เมนู Modify
3. คาสั่ง Transform
4. เลือก Scale
 การหมุนวัตถุ(Rotate)
1. เลือกวัตถุ
2. เมนู Modify
3. คาสั่ง Transform
4. เลือก Rotate
Rotate 90_CW : หมุนตามเข็มนาฬิกา
Rotate90_CCW : หมุนทวนเข็มนาฬิกา
 การบิดภาพ (Transform)
1. เลือกวัตถุ
2. เมนู Modify
3. คาสั่ง Transform
4. เลือก Flip Vertical หรือ Flip Horizontal
 Free Transform Tool
ใช้ในการปรับขนาด เปลี่ยนแปลงรูปทรงวัตถุ
1. เลือกวัตถุ
2. คลิก Free Transform Tool

19. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 19
Option เพิ่มเติม
- Rotate and Skew : ใช้ในการหมุนและบิดวัตถุ
- Scale : ใช้ปรับขนาดวัตถุ
- Distort : ใช้ปรับมุมมองของวัตถุ
- Envelope : ใช้ปรับสภาพแวดล้อมของวัตถุ
 การจัดลาดับวัตถุ
วิธีการจัดลาดับวัตถุดังนี้
 Bring to Front : ให้วัตถุที่ถูกเลือกอยู่หน้าสุด
 Bring Forward : ให้วัตถุที่ถูกเลือกขึ้นมาอีก 1 ลาดับ
 Send Backward : ให้วัตถุที่ถูกเลือกถอยหลังลงไปอีก 1 ลาดับ
 Send to Back : ให้วัตถุที่ถูกเลือกถอยลงไปหลังสุด
Rotate and Skew
Distort
Scale
Envelope
แสดงการหมุนวัตถุ
แสดงการบิดวัตถุ
แสดงการปรับขนาดวัตถุ
แสดงการปรับมุมมองวัตถุ
แสดงการปรับสภาพแวดล้อมวัตถุ

20. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 20
 การจัดเรียงวัตถุ
Align เป็นคาสั่งในการจัดเรียงวัตถุ เพื่อให้วัตถุเป็นระเบียบ เช่น เราต้องการให้วัตถุอยู่ในแนว
เดียวกัน เช่น ชิดซ้าย ชิดขวา เรียงหน้ากระดาน หรือให้มีระยะห่างเท่ากัน เป็นต้น
1. เลือกเมนู Window > Align
2. ทาการ Select วัตถุ
3. เลือกวิธีจัดเรียงตามต้องการ
 Align : จัดวัตถุให้เรียงชิดซ้าย กลาง ชิดขวา
 Distribute : จัดวัตถุให้อยู่ในระยะที่เสมอกัน
โดยคานวณจากวัตถุทั้งหมด
 Match Size : จัดวัตถุให้มีขนาดเท่ากับวัตถุที่มีขนาดใหญ่ที่สุด ในแนวนอนหรือแนวตั้ง
 Space : จัดระยะห่างให้เท่ากัน
 To Stage : จัดวัตถุโดยคานวณจาก Stage ทั้งหมด
 การจัดกลุ่มวัตถุ(Group)
ภาพ 1 ภาพ มักจะเกิดจากวัตถุหลายๆ วัตถุ ในบางครั้งก่อนนาไปใช้ จะต้องทาการรวมวัตถุ
(Group) ก่อน ดังนี้
 เลือกวัตถุ
 เลือกเมนูคาสั่ง Modify, Group หรือกดปุ่ม Ctrl + G
 วัตถุที่ผ่านการจัดกลุ่มแล้ว จะมีกรอบสีฟ้าๆ ล้อมรอบ
ภาพก่อนจัดกลุ่ม ภาพหลังจัดกลุ่ม

21. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 21
 การแยกกลุ่มวัตถุ(Un-Group)
ในงานบางงาน เช่น การทา Tweening Motion วัตถุนั้นๆ จะต้องไม่อยู่ในลักษณะกลุ่ม ดังนั้น
จะต้องทาการแยกชิ้นส่วนก่อน โดย
 เลือกวัตถุ
 เลือกเมนูคาสั่ง Modify, Ungroup หรือกดปุ่ม Ctrl + Shift + G
หรือเลือกเมนูคาสั่ง Modify, Break apart หรือกดปุ่ม Ctrl + B
 วัตถุนั้นจะปรากฏเป็นจุดเล็กๆ
ภาพลักษณะที่เป็นกลุ่ม ภาพที่ผ่านการ Ungroup หรือ Break apart
 การแยกกลุ่มวัตถุโดยใช้ Break Apart
Break Apart เป็นการแยกวัตถุที่ถูก Group ไว้ นอกจากนั้นยังสามารถแยกองค์ประกอบ
ของวัตถุประเภท Symbol, Text Block และภาพ Bitmap เพื่อทาการตกแต่งและปรับเปลี่ยนวัตถุ
ซึ่งการ Ungroup ไม่สามารถทาได้
1. ทาการ Select วัตถุที่เราต้องการ Break Apart
2. เลือกเมนู Modify > Break Apart หรือกดปุ่ม Ctrl + B เพื่อทาการแยกองค์ประกอบ
ของวัตถุ
3. หลังจากนั้นเราสามารถใช้เมาส์ แยกองค์ประกอบของวัตถุออกจากกันได้
Tips & Tricks : ในกรณีที่เป็นภาพ Bitmap เราจะไม่สามารถแก้ไขภาพได้ เราจึงต้องทาการ
Break Apart ก่อน เพื่อแยกองค์ประกอบของภาพ จากนั้นเราจะสามารถทาการแก้ไขภาพได้ด้วย
เครื่องมือต่างๆ ที่ Adobe Flash เตรียมไว้ให้

22. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 22
การใช้ตัวอักษร (Using Text)
 การใส่ข้อความโดยใช้ Text Tool
1. คลิกเมาส์ที่ ตัวชี้เมาส์จะเปลี่ยนเป็นรูป
2. ลากเมาส์บริเวณที่ต้องการสร้างกล่องข้อความ โดยการกาหนดขนาดตามความยาวที่เรา
ลาก
3. กาหนดรูปแบบของ Font และขนาดของ Font ได้จากหน้าต่าง Properties ตามต้องการ
4. เมื่อกาหนดลักษณะตัวอักษรเสร็จแล้ว ให้พิมพ์ข้อความที่ต้องการลงไป
5. จากนั้นทาการทดสอบผลลัพธ์โดยกดปุ่ม Ctrl + Enter
 การปรับแต่งตัวอักษรให้เข้ากับงานที่ออกแบบ
เราสามารถออกแบบและปรับแต่งตัวอักษรให้เข้ากับงานต่างๆ ได้ นอกเหนือจาก Font
ตัวอักษรที่มีอยู่แล้ว ซึ่งจะทาให้เราออกแบบตัวอักษรที่แตกต่างตามใจของเราได้ สามารถทาได้ดังนี้
1. คลิกเมาส์เลือกข้อความที่ต้องการปรับแต่งตัวอักษรในข้อความนั้น
2. เลือกคาสั่ง Modify > Break Apart เพื่อแยกองค์ประกอบจากตัวอักษรให้กลายเป็นภาพ
3. คลิกเมาส์ที่ Arrow Tool เพื่อปรับแต่งตัวอักษรให้ได้รูปแบบตัวอักษรตามต้องการ โดย
สังเกตที่เมาส์จะเปลี่ยนเป็นรูปแบบต่างๆ ดังนี้
กาหนดสีตัวอักษร กาหนดการจัดเรียงตัวอักษรกาหนดขนาดตัวอักษร
เป็นการเลือกทั้งตัวอักษรนั้นเพื่อจะกระทา
การใดๆ
เป็นการปรับแต่งส่วนโค้ง

23. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 23
 กดปุ่ม Ctrl + B 2 ครั้ง เพื่อแยกองค์ประกอบทั้งหมด
 หากข้อความมีมากกว่า 1 ตัวอักษร การ Break Apart ครั้งแรก จะทาให้ข้อความที่อยู่
บรรทัดเดียวกันถูกแยกออกเป็นแต่ละตัวอักษร ส่วนการ Break Apart ครั้งที่ 2 จะเป็นการแยก
องค์ประกอบของข้อความทาให้ปรับแต่งข้อความได้
 การสร้างข้อความให้ Link ไปเว็บเพจอื่น
เราสามารถกาหนดข้อความที่พิมพ์นั้นให้สามารถลิงค์ไปยังเว็บไซต์ต่างๆได้ ซึ่งวิธีนี้มักจะใช้
Flash ในการทาเว็บเพจ เพื่อลิงค์ไปยังเว็บไซต์อื่นๆ ดังนี้
1. คลิกเมาส์ที่ปุ่ม Text tool พิมพ์ข้อความที่ต้องการสร้างลิงค์
2. จากนั้นไปที่หน้าต่าง properties ให้เลือกเป็น Static Text
3. พิมพ์ URL หรือที่อยู่ของเว็บไซต์หรือหน้าเว็บเพจที่เราต้องการจะเชื่อมโยงในช่อง URL ใน
หน้าต่าง properties เช่น Hhttp://www.trainingdd.com
4. เลือก Target ที่เราต้องการ โดยเลือกว่าต้องการเปิดหน้าเว็บขึ้นมาในรูปแบบใด จาก
ตัวอย่าง เราจะเปิดหน้าต่างใหม่ขึ้นมาโดยเลือก _blank
5. ทดสอบผลลัพธ์กด Ctrl + Enter สังเกตเมื่อวางเมาส์ที่ข้อความจะกลายเป็นรูป
6. ให้คลิกเมาส์ที่ข้อความ จะปรากฏหน้าต่าง Internet Explorer ขึ้นมา
การ Break Apart ครั้งแรก
จะถูกแยกออกทีละตัวอักษร
การ Break Apart ครั้งที่ 2
จะทาให้ปรับแต่งข้อความได้

24. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 24
การใช้งานรูปภาพ Graphic
ในกรณีที่ต้องการนาไฟล์ภาพเข้ามาใช้งาน ทาได้ดังนี้
1. เมนู File
2. เลือก Import > Import to stage หรือกดปุ่ม Ctrl + R
3. เลือกไฟล์ภาพ
4. คลิกปุ่ม Open
การทาซ้ารูปภาพ
เมื่อทาการสร้างกราฟิกแล้ว และต้องการได้รูปภาพนั้นซ้าๆ หลายภาพ สามารถปฎิบัติได้ดังนี้
1. เลือกกราฟิกที่ต้องการทาซ้า
2. เมนู Edit
3. เลือก Duplicate
Ctrl + D
3
4

25. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 25
การทางานกับภาพบิตแมพ
ภาพบิตแมพที่ Import เข้ามาใช้งาน ก่อนที่จะนาไปตกแต่ง จะต้องทาการแปลงภาพให้อยู่ในลักษณะของ
ภาพ Vector ก่อน โดย
1. คลิกเลือกภาพบิตแมพ
2. เลือกคาสั่ง Modify, Trace Bitmap ปรากฏหน้าต่าง ดังนี้
3. ปรับค่าต่างๆ ดังนี้
 Color Thershold ค่าระดับสีเปรียบเทียบกันระหว่าง 2 pixel โดยถ้าความแตกต่างของ 2
pixel มีน้อย ก็จะถือว่าเป็นสีเดียวกัน ค่ายิ่งสูงจะทาให้จานวนสีของภาพลดน้อยลง (ถ้าจะให้ได้
ภาพที่มีสีตรงกับภาพเดิม ควรกาหนดเป็น 10)
 Minimum Area จานวน Pixel โดยรอบที่นามาใช้กาหนดสี
 Curve Fit & Corner Thershold ความเรียบของเส้นขอบ และการคงสภาพของมุมแหลม
ของภาพ

26. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 26
การใช้สัญลักษณ์ (Symbol & Instance)
 รู้จัก Symbol & Instance
Symbol
เป็นวัตถุที่ Flash สามารถนามาใช้เป็นส่วนประกอบของงาน Animation หรือใช้ในการสร้างงาน
อื่นๆ ได้ เช่น วัตถุที่ทาการ import เข้ามาให้เป็น Symbol
โดย Symbol นี้จะถูกแบ่งออกเป็น 3 ประเภท ซึ่งมีหน้าที่แตกต่างกันออกไป ได้แก่ Symbol
ประเภท Movie Clip, Button และ Graphic
Instance
เป็น Symbol ที่ถูกใช้งานอยู่บน Stage วัตถุที่อยู่ใน stage โดยที่ยังไม่มีการแปลงให้เป็น
Symbol ถือว่าเป็นเพียงวัตถุที่นามาใช้ประกอบใน Stage เท่านั้น ซึ่ง Instance ก็มีลักษณะเหมือนกันกับ
Symbol
Symbol เปรียบเสมือนคลังภาพสาเร็จรูป ที่ Flash เตรียมไว้ให้ใช้งาน ประกอบด้วย ภาพนิ่ง
เรียกว่า Graphics และภาพเคลื่อนไหว เรียกว่า Movie Clip
การเรียกใช้งาน
เลือกเมนูคาสั่ง Window, Common Libraries แล้วเลือกรายการย่อยที่ต้องการ

27. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 27
ประเภทของ Symbol
 Movie clip : เป็น Symbol ที่มีลักษณะเป็นภาพเคลื่อนไหว ซึ่งเราอาจเรียกได้ว่าเป็น
Animation ขนาดเล็กก็ได้ หากเราสร้าง Movie Clip นี้เก็บไว้ใน Library และเมื่อนามาใช้บน Stage เราก็
จะได้ Movie Clip ที่สามารถแสดงภาพเคลื่อนไหวได้อย่างอิสระ โดยไม่จาเป็นที่จะต้องขึ้นอยู่กับ Timeline
บน Stage นั้น นอกจากนั้นเรายังสามารถใส่เสียงให้กับ Movie Clip ได้ด้วย จึงทาให้ Movie Clip เป็นตัว
หลักในการทา Animation
 Button เป็น Symbol ที่เป็นลักษณะของปุ่มกด ที่สามารถใส่เสียงและแสดงการตอบโต้กับ
ผู้ใช้ได้ จึงทาให้ Button เป็นตัวหลักที่ใช้ในการแสดงการตอบโต้กับผู้ใช้ เช่น เวลาที่มีการคลิกเมาส์หรือ
เวลาการนาเมาส์มาวางไว้บนปุ่มกด เป็นต้น
 Graphic เป็น Symbol ที่มีลักษณะเป็นภาพนิ่ง ซึ่งเป็นส่วนประกอบหนึ่งใน Animation และ
สามารถที่จะกาหนดให้มีการตอบโต้กับผู้ใช้ได้ แต่ไม่สามารถใส่เสียงได้
การเปลี่ยนวัตถุเป็น Symbol
1. ใช้ Selection tool คลิกเลือกวัตถุที่ต้องการ
2. เลือกเมนู Insert > Convert to Symbol หรือกดปุ่ม F8

28. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 28
การสร้าง Animation
 หลักการของ Animation
ภาพเคลื่อนไหวหรือที่เราเรียกกันว่า Animation คือ การเปลี่ยนแปลงของวัตถุ โดยมี
ความสัมพันธ์กับเวลา เช่น ภาพยนตร์การ์ตูนที่มีการเคลื่อนที่ การเดิน การวิ่ง เป็นต้น สาหรับ Flash นั้น
จะมีการเคลื่อนที่อยู่ 2 ลักษณะ คือ
1. การเคลื่อนที่แบบย้ายสถานที่ (Motion) เช่น วัตถุเคลื่อนที่จากจุด A ไปจุด B
2. การเคลื่อนที่โดยการเปลี่ยนแปลงลักษณะ (Transform) เช่น ตัวอักษรถูกเปลี่ยนแปลงรูปร่าง
 การทางานกับ Timeline
Timeline คือส่วนที่เป็นตารางเวลา ใช้กาหนดการสร้าง Animation ในแต่ละช่วงเวลา
 การกาหนด Keyframe
Keyframe คือเฟรมที่มีการเปลี่ยนแปลงของเนื้อหา โดยปกติเมื่อท่านสร้างวัตถุที่เฟรมแรก เฟรม
นั้นก็จะเป็น Keyframe อัตโนมัติ แต่ถ้าในกรณีเฟรมถัดๆไป ท่านต้องการกาหนดให้เป็น Keyframe ให้
กาหนดดังนี้
A B

29. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 29
1. คลิกเลือกตาแหน่งเฟรม
2. เมนู Insert > timeline
3. เลือก Keyframe
** หมายเหตุ ในกรณีที่เราแทรก Keyframe ณ. ตาแหน่ง Keyframe นั้นจะมีวัตถุเดิมปรากฏอยู่
 การกาหนด Blank Keyframe
Blank Keyframe คือ Keyframe ที่ยังไม่มีเนื้อหา (ไม่มีวัตถุใดๆ) เราจะทาการกาหนด Blank
Keyframe กรณีที่ต้องการให้เฟรมนั้นๆ มีการเปลี่ยนแปลงของเนื้อหา แต่เป็นเนื้อหาที่ต้องสร้างขึ้นมา
ใหม่ โดยไม่ได้เอาเนื้อหาเดิมมาปรับปรุง
1. คลิกเลือกตาแหน่งเฟรม
2. เมนู Insert > timeline
3. เลือก Blank Keyframe
** หมายเหตุ ในกรณีที่เราแทรก Blank Keyframe เมื่อมีการสร้างวัตถุจะปรากฏเป็น Keyframe
 การลบ Keyframe
หรืออกดปุ่ม F6
Keyframe
หรือกดปุ่ม F7
Blank Keyframe

30. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 30
เมื่อได้มีการสร้าง Keyframe ไว้แล้ว และต้องการจะยกเลิก สามารถที่จะลบ Keyframe ได้
ดังนี้
1. เลือก Keyframe
2. เมนู Insert > timeline
3. เลือก Clear Keyframe
 การแทรกเฟรม
เฟรมคือส่วนที่มีเนื้อหาเดียวกับ Keyframe ที่อยู่ด้านซ้าย โดยท่านสามารถแทรกเฟรมได้ดังนี้
1. สร้างวัตถุที่เฟรมแรก จะปรากฏ Keyframe ดังรูป
2. เลือกตาแหน่งเฟรมที่ต้องการจะแทรกเฟรม
3. เมนู Insert > timeline
4. เลือก Frame
หรือกดปุ่ม Shift + F6
หรือกดปุ่ม F5
Frame

31. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 31
 การลบเฟรม
เมื่อท่านได้ทาการแทรกเฟรมไปแล้ว เฟรมใดที่ท่านไม่ต้องการสามารถที่จะลบเฟรมนั้นได้
โดยมีวิธีการดังนี้
1. เลือกเฟรมที่ต้องการจะลบ
2. เมนู Insert
3. เลือก Remove Frames
ประเภทของการสร้างภาพเคลื่อนไหว
ท่านสามารถที่จะนาวัตถุที่สร้างขึ้น มาสร้างเป็นภาพเคลื่อนไหวได้โดยใช้ Animation ของ
Adobe Flash ช่วย ซึ่งจะทาให้การสร้างภาพเคลื่อนไหวเป็นเรื่องง่ายๆ
1. Tweened Animation
เป็นการสร้างภาพเคลื่อนไหวที่ท่านต้องมีภาพที่เฟรมเริ่มต้น และภาพที่เฟรมสุดท้ายเท่านั้น
ส่วนภาพในเฟรมอื่นๆ โปรแกรมจะทาการสร้างขึ้นมาให้เอง โดยแยกเป็น 2 แบบ
1.1. Motion Tween เป็น animation ที่ทาการเปลี่ยนขนาด สี หรือหมุนวัตถุ
1.2. Shape Tween เป็น animation ที่ทาการเปลี่ยนรูปทรงของวัตถุ
2. Frame by Frame
เป็นการสร้างภาพเคลื่อนไหว โดยท่านต้องสร้างภาพขึ้นมาเองในทุกๆ เฟรม
ภาพแสดง Timeline ของ animation
หรือกดปุ่ม Shift + F5
Frame ที่ถูกลบ
Motion Tween Shape Tween Frame by Frame
พื้นสีม่วง พื้นสีเขียว

32. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 32
การสร้าง Animation ด้วย Motion Tween
ตัวอย่างการสร้างวัตถุวงกลม ให้เคลื่อนที่ไปทางด้านขวา
1. สร้างวัตถุที่ Frame ที่ 1
2. คลิกเลือกตาแหน่ง Frame ที่ 15 (หรือตาแหน่งที่ต้องการ)
3. เมนู Insert > timeline > Frame (หรือกดปุ่ม F5) โดย Timeline จะมีลักษณะดังนี้
4. เมนู Insert > timeline > Create Motion Tween โดย Timeline จะมีลักษณะดังนี้
5. เลื่อนตาแหน่งวงกลมไปด้านขวา (หรือเลื่อนไปตามทิศทางที่ท่านต้องการ)

33. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 33
6. พอเสร็จจะได้ผลดังรูป
การแสดงผลการทางานของ Animation
เมื่อได้ทาการสร้าง Animation Graphic แล้วสามารถทดสอบการแสดงผลของ Animation ได้
ดังนี้
1. เมนู Control
2. เลือก Play
การแสดงหน้าต่าง Control
ในการแสดงผลการทางานของ Animation สามารถที่จะเปิดหน้าต่างควบคุมการแสดงผลเพื่อใช้
ควบคุมการทางานของ Animation ขึ้นมาใช้ได้
1. เมนู Window
2. คาสั่ง Toolbars
3. เลือก Controller
Enter

34. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 34
 การกาหนดการแสดงผลแบบวนรอบ (Loop)
โดยปกติแล้วการแสดงผลการทางานของ Animation จะแสดงเพียงหนึ่งรอบ แล้วก็หยุดการ
ทางาน ถ้าต้องการที่จะให้แสดงผลของ Animation ต่อเนื่องไปเรื่อยๆ กาหนดได้ดังนี้
1. เมนู Control
2. เลือก Loop Playback
ในทางตรงกันข้าม ถ้าท่านต้องการยกเลิกการแสดงผลแบบวนรอบ ก็ให้กระทาดังข้างต้นอีกครั้ง
การสร้าง Animation โดยใช้ Motion Path
โดยปกติเมื่อสร้าง Animation โดยใช้ Motion Tween การเคลื่อนที่ของวัตถุจะเป็นเส้นตรง แต่ถ้า
ต้องการให้การเคลื่อนที่เป็นเส้นโค้ง เป็นลักษณะคลื่น หรือในลักษณะอื่นๆ ทาได้ดังนี้
1. สร้าง Movie ใหม่ (เมนู Insert > New)
2. วาดวัตถุที่เฟรมที่ 1
3. คลิกเลือกตาแหน่ง Frame ที่ 15 (หรือตาแหน่งที่ต้องการ)
4. เมนู Insert > timeline > Frame (หรือกดปุ่ม F5)
5. เมนู Insert > timeline > Create Motion Tween
6. เลื่อนตาแหน่งวงกลมไปด้านขวา (หรือเลื่อนไปตามทิศทางที่ท่านต้องการ) จะได้ผลดังรูป
2

35. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 35
7. เมนู Insert > Motion Guide (จะมี Guide Layer เพิ่มดังรูป)
8. คลิกเลือก Guide Layer
9. สร้างเส้น path เพื่อเปลี่ยนรูปแบบการเคลื่อนที่ (ใช้ Pen Tool ลากเส้นและปรับโค้งดังรูป)
Guide
Layer
เลือก Guide
Layer

36. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 36
10. เมนู Control > Play (หรือกดปุ่ม Enter) จะเห็นว่าวัตถุเคลื่อนที่ตาม Path ที่กาหนด
การสร้าง Animation โดยกาหนดคุณสมบัติของ Motion
Uตัวอย่างU กาหนดให้โลโก้ค่อยๆ แสดง แล้วค่อยๆ หายไป ดังตัวอย่าง
1. สร้างสี่เหลี่ยมมุมโค้ง
2. คัดลอกสี่เหลี่ยม โดยเปลี่ยนมุมเป็น 45 องศา, 90 องศา และนามาประกอบกันดังรูป

37. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 37
3. เลือกเส้นส่วนที่ไม่ต้องการแล้วลบออกดังรูป
4. คัดลอกวัตถุเป็น 4 ชิ้น แล้วปรับแต่งวัตถุให้ได้ดังรูป
5. ใส่วงกลมตรงกลางวัตถุทั้งหมด และลบส่วนของวงกลมออก เพื่อตัดชิ้นส่วนที่ไม่ต้องการ
6. สร้างตัว C เพื่อนาไปไว้ตรงกลางดังรูป
Modify >> Transform >> Flip
Horizontal
Modify > Transform > Flip Vertical
- Modify > Transform > Flip Vertical
- Modify > Transform > Flip Horizontal
สร้างวงกลม 2 วง ลบวงกลมกลาง
ออก
สร้างสี่เหลี่ยม ลบสี่เหลี่ยมออก

38. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 38
7. นาตัว C ที่สร้างขึ้นไปรวมกับส่วนแรก ดังรูป
8. คลิกเลือกตาแหน่ง Frame ที่ 10
9. เมนู Insert > Frame (หรือกดปุ่ม F5)
10. เมนู Insert > Create Motion Tween
11. เมนู Insert > Keyframe (หรือกดปุ่ม F6)
12. คลิกเลือกตาแหน่ง Frame ที่ 20
13. เมนู Insert > Keyframe (หรือกดปุ่ม F6)
14. คลิกเลือก Frame ที่ 1 ซึ่งเป็น Keyframe
15. คลิกที่วัตถุ
16. ปรับคุณสมบัติที่หน้าต่าง Properties เลือก Color เป็น Alpha กาหนด 0%

39. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 39
17. คลิกเลือก Frame ที่ 20 ซึ่งเป็น Keyframe (ทาซ้าเหมือนขั้นตอนที่ 15)
18. เมนู Control > Play (หรือกดปุ่ม Enter) เพื่อดูผล
การสร้าง Animation ด้วย Shape Tween
เป็นการเปลี่ยนรูปทรงของวงกลมให้เป็นสี่เหลี่ยม
1. วาดวงกลมที่ Frame ที่ 1
15
16

40. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 40
2. คลิกเลือก Frame ที่ 10
3. เมนู Insert > Blank Keyframe (หรือกดปุ่ม F7)
4. วาดสี่เหลี่ยมดังรูป
5. คลิกเลือก Frame
6. กาหนด Properties ของเฟรมในส่วน Tween เป็น Shape
จะได้ผลดังนี้
5
6

41. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 41
7. เมนู Control >> Play (หรือกดปุ่ม Enter) เพื่อดูผล
การสร้าง Animation ด้วย Frame by Frame
เป็นการสร้างภาพโดยท่านจะต้องสร้างภาพขึ้นมาเองในทุกๆ เฟรม
1. วาดภาพที่ Frame ที่ 1 ดังรูป

42. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 42
2. คลิกเลือกตาแหน่ง Frame ที่ 2
3. เมนู Insert > Keyframe (หรือกดปุ่ม F6)
4. คลิกเลือก Frame ถัดๆ ไป > กดปุ่ม F6 > ปรับแต่งภาพเพิ่มเติม
5. เมนู Control >> Play (หรือกดปุ่ม Enter) เพื่อดูผล
เฟรมที่ 3 เฟรมที่ 4 เฟรมที่ 5 เฟรมที่ 6 เฟรมที่ 7
ปรับแต่งภาพ

43. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 43
การใช้งานเลเยอร์ (Layer)
ในการสร้าง Animation ส่วนใหญ่แล้วจะประกอบไปด้วยภาพมากมาย เช่น ภาพต้นไม้ ภาพนก
ภาพผีเสื้อ ภาพดอกไม้ ฯลฯ ซึ่งสามารถที่จะสร้างภาพทั้งหมดไว้ในเอกสารเดียวกัน แต่เพื่อความสะดวก
ในการสร้างภาพนั้น ท่านสามารถที่จะสร้างแต่ละภาพเก็บในแต่ละเลเยอร์ โดยถ้ามีการแก้ไขข้อมูล
ในเลเยอร์ จะไม่มีผลกระทบกับภาพในเลเยอร์อื่นๆ ซึ่งการทางานแบบเลเยอร์นั้นก็เหมือนกับการวาง
แผ่นใสซ้อนทับกัน
 การแทรกเลเยอร์ใหม่
1. เมนู Insert
2. เลือก Layer
 การลบเลเยอร์
1. คลิกเมาส์ขวาที่เลเยอร์ที่ต้องการจะลบ
2. เลือก Delete Layer
เลเยอร์ที่แทรกมาใหม่
คลิกเพื่อแทรกเลเยอร์ใหม่ได้
1
2
1. เลือก Layer
2. คลิก Delete
Layer

44. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 44
 การควบคุมเลเยอร์
ในส่วนของเลเยอร์ ท่านสามารถที่จะซ่อนบางเลเยอร์ เมื่อทางานกับเลเยอร์อื่นๆ หรือ
กาหนดให้ไม่สามารถแก้ไขข้อมูลในเลเยอร์นั้นๆ ได้
- Show / Hide All Layers: ใช้แสดงหรือซ่อนเลเยอร์ เช่น
- Lock / Unlock All Layers: ใช้กาหนดว่าจะให้มีการแก้ไขข้อมูลในเลเยอร์ได้หรือไม่ โดยถ้าล็อกเลเยอร์
ใดไว้ เลเยอร์นั้นจะแก้ไขไม่ได้ แต่ถ้ายกเลิกการล็อก ก็สามารถแก้ไขข้อมูลได้ เช่น
- Show All Layers As Outlines: ใช้กาหนดให้ข้อมูลของเลเยอร์แสดงแบบโครงร่าง คือแสดงเป็นลายเส้น
หรือไม่ เช่น
Lock / Unlock All Layers
Show All Layers As OutlinesShow / Hide All Layers
เลเยอร์ใดมีรูปดินสอ แสดงว่า
ขณะนี้ เรากาลังทางานกับเลเยอร์
นั้นอยู่
ข้อมูลใน Layer 1 จะถูกซ่อน
โดยถ้าเราทาการซ่อนเลเยอร์ใด
แล้ว เลเยอร์นั้นก็ไม่สามารถแก้ไข
ได้
ข้อมูลใน Layer 1 จะถูกล็อกไว้ ซึ่งเรายังคงเห็น
ข้อมูลของ Layer 1 แต่ไม่สามารถที่จะแก้ไขได้
ข้อมูลใน Layer 1 จะแสดงเป็นแบบโครงร่าง

45. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 45
การใช้งาน Mask Layer
Mask Layer เป็นเลเยอร์ที่เหมือนเป็นหน้ากากของเลเยอร์ที่อยู่ด้านหลัง Mask Layer นั้น
ตัวอย่างที่จะแสดงต่อไปนี้เป็นการสร้าง Mask Layer ให้กับข้อความ
1. พิมพ์ข้อความที่ Frame ที่ 1
2. คลิกตาแหน่ง Frame ที่ 20
3. เมนู Insert > Frame (หรือกดปุ่ม F5)
4. เมนู Insert > Layer (แทรกเลเยอร์ใหม่เพื่อทา Mask Layer)
5. วาดวงกลมที่ต้นข้อความ
1

46. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 46

47. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 47
คลิกเลือกเฟรมของเลเยอร์ที่ 2
6. เมนู Insert > Create Motion Tween
7. คลิกตาแหน่ง Frame ที่ 10
8. Insert > Keyframe (หรือกดปุ่ม F6)
9. เคลื่อนวงกลมมาทางด้านขวา
10. คลิกตาแหน่ง Frame ที่ 20
11. Insert > Keyframe (หรือกดปุ่ม F6)
6
8
10

48. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 48
12. เคลื่อนวงกลมกลับมาทางด้านซ้าย
13. คลิกเมาส์ขวาที่ Layer 2 > Mask
14. เมนู Control > Play (หรือกดปุ่ม Enter) เพื่อดูผล

49. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 49
สร้าง Mask Layer ในภาพ
1. File > Import > Import to Stage
2. เลือกภาพที่ต้องการ
3. ปรับขนาดภาพให้พอดีกับ Stage
4. คลิกเลือกภาพ
5. Modify > Convert to Symbol
6. ตั้งชื่อ Symbol
7. เลือก Graphic > OK
8. Window > Panels > Effect
9. เลือก Brightness กาหนดให้ภาพดูมืดๆ
10. คลิกเลือกเฟรม 30 > กดปุ่ม F5
11. คลิกขวาที่ Layer > Insert Layer > เฟรม 1
12. วาดวงกลม
13. คลิกเฟรม 10 > กดปุ่ม F6
14. Insert > Motion Tween
15. เลื่อนวงกลมไปด้านขวา
16. คลิกเฟรม 10 > กดปุ่ม F6
17. Insert > Motion Tween
18. เลื่อนวงกลมไปด้านขวา
19. คลิกเฟรม 20 >> กดปุ่ม F6
20. เลื่อนวงกลมไปด้านล่าง
21. คลิกเฟรม 30 >> กดปุ่ม F6
22. เลื่อนวงกลมไปมุมบนขวา
23. คลิกขวาที่ Layer 3 > Mask
24. ทดสอบผลลัพธ์

50. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 50
Note : ……………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………

51. Adobe Flash Professional : อาจารย์เล็กฤทัย ขันทองชัย หน้า 51
Note : ……………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………