เอกสารประกอบการสร้างภาพเคลื่อนไหวด้วยโปรแกรม flash 8

1. 90
คู่มอการใช้บทเรียนคอมพิวเตอร์ชูวยสอน
ื
กลู่มสาระการเรียนร้่การงานอาชีพและเทคโนโลยี
เร่ ือง การสร้างภาพเคล่ ือนไหวด้วยโปรแกรม
Macromedia Flash 8
ชันมัธยมศึกษาปี ท่ี 3
้
นายประวิตร ตระก่ลวิทยานั นท์
คร่ชำานาญการ
โรงเรียนบ้านหนองหว้า
สำานั กงานเขตพ้ืนท่ีการศึกษาศรีสะเกษ เขต 4
คำานำ า

2. 91
คู่มือการใช้บทเรียนคอมพิวเตอร์ชูวยสอน กลู่มสาระ
การเรียนร้่การงานอาชีพ และเทคโนโลยี เร่ ือง การสร้างภาพ
เคล่ ือนไหวด้วยโปรแกรม Macromedia Flash ٨
ชันมัธยมศึกษาปี ท่ี 3 จัดทำาขึ้นเพ่ ือให้เป็ นคู่มือในการใช้บท
้
เรียนคอมพิวเตอร์ชูวยสอน ผ้่เรียนสามารถใช้ศึกษาเน้ือหาใน
เอกสารเลูมนี้ลูวงหน้ า หรือศึกษาไปพร้อมกับการเรียนกับ
คอมพิวเตอร์ชูวยสอน เพ่ ือให้มีความร้่ ความเข้าใจในเร่ ือง การ
สร้างภาพเคล่ ือนไหวด้วยโปรแกรม Macromedia Flash 8 ท่ี
ชัดเจน และรวดเร็วขึ้น และสามารถนำ าไปประย่กต์ใช้ตูอไปได้
เน้ือหาสูวนใหญูได้มาจากการท่ีผ้่เขียนมีประสบการณ์
ทางด้านการสอน และ การใช้คอมพิวเตอร์ในโรงเรียน ขอให้
ผ้่ใช้ได้ศึกษาตัวอยูางแล้วนำ าไปประย่กต์ใช้ให้เข้ากับความ
สามารถและความต้องการของผ้่ใช้ ขอขอบค่ณผ้่ท่ีมีสูวน
เก่ียวข้องในการจัดทำาเอกสารเลูมนี้ หากมีสูวนท่ีต้องพัฒนา
ปรับปร่งเอกสารเพ่ ือให้การเรียนการสอนบรรล่วัตถ่ประสงค์
เข้าใจงูาย ข้าพเจ้ายินดีท่ีจะจัดทำาเอกสารใหมูในโอกาสตูอไป
ประวิตร ตระก่ลวิทยานั นท์
สารบัญ
หน้ า

3. 92
บทนำ า.............................................................................
........................................................... 1
คำาแนะนำ าในการใช้เมนูและ
ปุ ่ม.................................................................................
................ 4
วิธีการใช้บทเรียนคอมพิวเตอร์ชุวย
สอน...............................................................................
... 7
1. การเปิ ด
โปรแกรม................................................................
................................. 7
2. การเข้าสู่
โปรแกรม................................................................
............................... 8
3. ผลการเรียนร้ท่ีคาด่
หวัง.......................................................................
................. 9
4. การทำาแบบทดสอบกูอนและหลัง
เรียน................................................................ 9
5. การตรวจสอบ
คะแนน...................................................................
...................... 12
- การเพ่ิมพ้ืนท่ีในการเก็บข้อม่ลการ
สอบ............................................................. 14
- การลบข้อม่ลการ
สอบ......................................................................
.................. 16
6. การศึกษาเน้ือหาบท
เรียน......................................................................
............... 17
7. การศึกษาวิธี
ใช้.........................................................................
........................... 19

4. 93
8. การออกจาก
โปรแกรม................................................................
........................ 19
เน้ือหาบท
เรียน..............................................................................
.......................................... 21
หนู วยท่ี 1 ความร้่เบ้ืองต้นเก่ียวกับโปรแกรม Macromedia
Flash 8 และการฝึ ก
วาดภาพกราฟิ กเบ้ืองต้น “ภาพ
แตงโม”.................................................... 22
หนู วยท่ี 2 การฝึ กวาดภาพกราฟิ กเบ้ืองต้น “ภาพมะมูวง, ภาพ
แอปเปิ้ ล และเทียนไข” 36
หนู วยท่ี 3 การฝึ กวาดภาพกราฟิ กเบ้ืองต้น “ภาพดอกไม้ และ
ภาพกระตูาย”............... 43
หนู วยท่ี 4 การฝึ กวาดภาพกราฟิ กเบ้ืองต้น “ภาพแมลงปอ และ
ภาพสามเณร”............ 50
หนู วยท่ี 5 การฝึ กสร้างภาพเคล่ ือนไหว “ภาพเมฆลอย และภาพ
หัวแปลงรูาง”.......... 58
หนู วยท่ี 6 การฝึ กสร้างภาพเคล่ ือนไหว “ภาพต้นไม้เจริญเติบโต
และภาพเทียน
กำาลังล่ก
ไหม้”.................................................................................
........... 65
หนู วยท่ี 7 การฝึ กสร้างภาพเคล่ ือนไหว “ภาพปาก่ิงไม้ใสู
มะมูวง”............................. 70
หนู วยท่ี 8 การฝึ กสร้างภาพเคล่ ือนไหว “ภาพไฟสูองอักษร และ
ภาพแมลงเดินไปมา” 76
หนู วยท่ี 9 การฝึ กสร้างภาพเคล่ ือนไหว “ภาพโลกยิม และภาพ ้
พัดลมกำาลังหม่น”...... 82
หนู วยท่ี 10 การฝึ กสร้างภาพเคล่ ือนไหว “จ่ดบังไฟ และการเผย
้
แพรูชินงาน”.............
้ 89
บรรณาน่กรม....................................................................
.......................................................... 98

5. 94
ประวัติผู้จัด
ทำา.................................................................................
........................................... 99

7. 1
บทนำ า
บทเรียนคอมพิวเตอร์ชูวยสอน กลู่มสาระการเรียนร้่การงาน
อาชีพและเทคโนโลยี เร่ ือง การสร้างภาพเคล่ ือนไหวด้วยโปรแกรม
Macromedia Flash 8 ชันมัธยมศึกษาปี ท่ี 3 เป็ นโปรแกรม
้
คอมพิวเตอร์ชูวยในการสอนการใช้โปรแกรม Macromedia Flash
8 เน้ือหาสูวนใหญูเป็ นวิดีทัศน์สอนการวาดภาพน่ิง และการสร้าง
ภาพเคล่ ือนไหว นอกจากนี้ยังมีแบบทดสอบกูอนและหลังเรียน
และแบบทดสอบระหวูางเรียนให้ได้ทดสอบความร้่จากการศึกษาบท
เรียน สามารถตรวจสอบด่คะแนนแบบทดสอบได้
ความต้องการของระบบ
1. คอมพิวเตอร์ CPU ความเร็วไมูต่ำากวูา 600 MHz
2. เคร่ ืองอูานแผูนซีดีรอม
3. ลำาโพง
4. ระบบปฏิบัติการ Window XP ขึ้นไป
ผลการเรียนรู้ท่ีคาดหวัง
1. เพ่ ือให้ผ้่เรียนร้่จักวิธีใช้เคร่ ืองมือสร้างภาพกราฟิ กเบ้ืองต้น
ในโปรแกรม Macromedia Flash 8
2. เพ่ ือให้ผ้่เรียนสามารถสร้างภาพกราฟิ กเบ้ืองต้นด้วย
โปรแกรม Macromedia Flash 8
3. เพ่ ือให้ผ้่เรียนสามารถสร้างภาพเคล่ ือนไหวแบบ Frame
by Frame ได้
4. เพ่ ือให้ผ้่เรียนสามารถสร้างภาพเคล่ ือนไหวแบบ Motion
Tween ได้
5. เพ่ ือให้ผ้่เรียนสามารถสร้างภาพเคล่ ือนไหว้แบบ Shape
Tween ได้
สุวนประกอบของบทเรียนคอมพิวเตอร์ชุวยสอน
เน้ือหาการเรียนร้่ท่ีนำาเสนอเป็ นตัวอยูางการวาดภาพน่ิงและ
การสร้างภาพเคล่ ือนไหวด้วยโปรแกรม Macromedia Flash 8
การนำ าเสนอเน้ือหาแบูงออกเป็ น 5 สูวน คือ
1. ผลการเรียนท่ีคาดหวัง แสดงกรอบข้อความเก่ียวกับเป้ า
หมายท่ีต้องการให้ผ้่เรียนบรรล่วัตถ่ประสงค์ท่ีตังไว้
้

8. 2
2. แบบทดสอบ แบูงเป็ น 2 ประเภท ดังนี้
2.1 แบบทดสอบกุอนและหลังเรียน เป็ นแบบทดสอบ
ชนิ ดเลือกตอบ จำานวน 50 ข้อ ซ่ึงจำาลองการทำาแบบทดสอบจริง
กลูาวคือ เม่ ือผ้่เรียนคลิกเลือกคำาตอบแล้วสามารถคลิกเลือกตอบ
ใหมูได้ ย้อนไปตอบข้อท่ีผูานมาได้อีกครัง หรือ ข้ามไปทำาข้อท่ี
้
ต้องการได้ มีภาพแสดง/ซูอนคำาตอบท่ีเลือก เม่ ือทำาแบบทดสอบ
เสร็จคูอยคลิกปู ่มตรวจคำาตอบ ซ่ึงโปรแกรมจะตรวจคำาตอบและ
รายงานผลการสอบให้ทราบทันที และเก็บบันทึกข้อม่ลการสอบไว้
ในเคร่ ืองอัตโนมัติ สามารถตรวจสอบผลการสอบได้ภายหลัง
2.2 แบบทดสอบประจำาหนู วย เป็ นแบบทดสอบชนิ ด
เลือกตอบ มีทังหมด 10 หนู วย หนู วยละ 10 ข้อ รวมทังหมด 100
้ ้
ข้อ
3. เน้ือหาบทเรียน แสดงเป็ นข้อความ ภาพน่ิง และภาพ
เคล่ ือนไหว สาธิตการวาดร่ป และการสร้างภาพเคล่ ือนไหวตาม
ลำาดับขันตอน สามารถคลิกเลือกเล่ ือนด่ขันตอนการทำาได้ตามท่ี
้ ้
ต้องการ ซ่ึงแบูงเป็ น 10 หนู วย ดังนี้
หนู วย เน้ือหา
ท่ี
- การเปิ ด-ปิ ดโปรแกรม Flash
1 - สูวนประกอบของโปรแกรม Flash
- ฝึ กวาดภาพแตงโม
- ฝึ กวาดภาพมะมูวง
2 - ฝึ กวาดภาพแอปเปิ้ ล
- ฝึ กวาดภาพเทียนไข
- ฝึ กวาดภาพดอกไม้
3
- ฝึ กวาดภาพกระตูาย
- ฝึ กวาดภาพแมลงปอ
4
- ฝึ กวาดภาพสามเณร
- ฝึ กวาดภาพเคล่ ือนไหวแบบ Motion
Tween (เมฆลอย)
5
- ฝึ กวาดภาพเคล่ ือนไหวแบบ Shape
Tween (หัวใจ)

9. 3
- ฝึ กวาดภาพเคล่ ือนไหวแบบ Frame by
Frame (ต้นไม้เจริญเติบโต)
6
- ฝึ กวาดภาพเคล่ ือนไหว “เทียนไขกำาลังล่ก
ไหม้”
- ฝึ กวาดภาพเคล่ ือนไหว “ปาก่ิงไม้ใสู
7
มะมูวง”
- ฝึ กวาดภาพเคล่ ือนไหว “ไฟสูองอักษร”
8
- ฝึ กวาดภาพเคล่ ือนไหว “แมลงเดินไปมา”
หนู วย เน้ือหา
ท่ี
- ฝึ กวาดภาพเคล่ ือนไหว “โลกยิม”้
9
- ฝึ กวาดภาพเคล่ ือนไหว “พัดลมกำาลังหม่น”
- ฝึ กวาดภาพเคล่ ือนไหว “จ่ดบังไฟ”
้
10
- การเผยแพรูชินงาน
้
4. คะแนนการทดสอบ เป็ นสูวนท่ีแสดงคะแนนจาการ
ทดสอบกูอนเรียน และหลังเรียน ซ่ึงถ่กเก็บไว้ในเคร่ ือง
คอมพิวเตอร์อัตโนมัติหลังจากท่ีคลิกปู ่มตรวจในการทำาแบบทดสอบ
คะแนนแบบทดสอบจะถ่กเก็บไว้เป็ นระเบียน แสดงช่ ือผ้่สอบ
คะแนนท่ีได้จากการทำาแบบทดสอบ และเวลาในการทำาแบบทดสอบ
สามารถพิมพ์คะแนนออกทางเคร่ ืองพิมพ์ หรือลบข้อม่ลการสอบได้
(แตูต้องใช้รหัสผูาน)
5. วิธีใช้ เป็ นสูวนแสดงคำาแนะนำ าในการใช้บทเรียน
คอมพิวเตอร์ชูวยสอน
แนวทางการนำ าไปใช้
1. ในการใช้โปรแกรมครังแรกผ้่เรียนควรทดสอบความร้่พ้ืน
้
ฐานด้วยการทำาแบบทดสอบกูอนเรียน
2. การศึกษาเน้ือหาบทเรียน ควรศึกษาบทเรียนตามลำาดับ
ขัน ดังนี้
้
2.1 การเปิ ด-ปิ ดโปรแกรม Flash
2.2 สูวนประกอบของโปรแกรม Flash

10. 4
2.3 การฝึ กวาดภาพกราฟิ ก (ภาพน่ิง ) ตูาง ๆ ตาม
ตัวอยูาง เชูน ภาพแตงโม ภาพมะมูวง ภาพแอบเปิ้ ล ภาพเทียนไข
เป็ นต้น
2.4 การสร้างภาพเคล่ อนไหว เชูน ภาพก้อนเมฆลอย
ื
ภาพต้นไม้เจริญเติบโต ภาพแมลงเดินไปมา เป็ นต้น
2.5 การเผยแพรูชินงาน
้
3. การยูอโปรแกรม ให้กดแป้ น Esc เพ่ ือยูอโปรแกรมให้
เล็กลง หรือขยายเต็มหน้ าจอ โดยกดแป้ น Ctrl + F
4. หากต้องการฝึ กปฏิบัติการวาดร่ป หรือสร้างภาพ
เคล่ ือนไหวไปพร้อมกัน ให้เปิ ดโปรแกรม Macromedia Flash 8
ด้วย แล้วสลับไปมาระหวูางโปรแกรม โดยคลิกเลือกโปรแกรมท่ี
Task bar (กดแป้ น Window เพ่ ือให้แสดง Task bar) และใน
ชูวงท่ีฝึกปฏิบัติในโปรแกรม Flash อาจจะหย่ดวีดิโอการสอนในบท
เรียนคอมพิวเตอร์ไว้ชัวคราว
่
คำาแนะนำ าในการใช้เมนูและปุ ่ม
เมน่และปู ่มท่ีใช้งานในบทเรียนคอมพิวเตอร์ชูวยสอน เร่ ือง
การสร้างภาพเคล่ ือนไหวด้วยโปรแกรม Macromedia Flash 8 มี
ดังนี้
1. ปุ มแสดง / ซุอน เมนู ผ้่เรียนสามารถสังให้โปรแกรม
่ ่
แสดง หรือซูอน เมน่ได้ตามท่ีต้องการ ได้
- ปุ มแสดงเมนู (เม่ ือเมน่ถ่กซูอน)
่
ปุ มแสดง
่
เมนู

11. 5
- ปุ มซุอนเมนู (เม่ ือต้องการซูอนเมน่)
่
ปุ ่มซุอน
เมนู
2. ปุ มในการทำาแบบทดสอบ
่
ปู ่ม Start สำาหรับคลิกเพ่ ือเร่ิมทำาแบบ
ทดสอบ
แบบทดสอบกุอน และหลังเรียน
ปุ ่มตัวเลือกแบบ
ทดสอบ คลิกบริเวณ ปุ ่มกระดาษคำาตอบ
ข้อความตัวเลือก คลิกเพ่ ือให้แสดง หรือ
ซูอนกระดาษคำาตอบ
ปุ ่มตรวจแบบทดสอบ ปุ ่มย้อนกลับ คลิกเพ่ ือ
เม่ ือทำาแบบทดสอบ ย้อนกลับไปยังแบบ ปุ ่มตุอไป คลิก
ครบท่กข้อแล้ว ทดสอบข้อท่ีผูานมา เพ่ ือไปทำาแบบ
ทดสอบข้อตูอไป
แบบทดสอบประจำาหนุ วย

12. 6
ปุ ่มตัวเลือกแบบ
ทดสอบ คลิกบริเวณ
ข้อความตัวเลือก
3. ปุ ่มเลือกเน้ือหาบทเรียน
ปุ ่มเน้ือหาบทเรียน
คลิกบริเวณช่ ือเร่ ืองท่ี
ต้องการศึกษา
4. ปุ มในเน้ือหาบทเรียน
่
ปุ ่มสเกล คลิกลาก ปุ ่ม ปุ ่ม ปุ ่ม ปุ ่ม
เพ่ ือเล่ ือนด่ขันตอน
้ เร่ิม เลุ หย่ด จบ
ชั่วคร
การวาดร่ป ต้น น
ปุ มควบค่มการเลุน VDO
่ ปุ ่ม ปุ ่ม
ย้อน ตุอ
กลับ ไป

13. 7
ปุ ่มตัวเลข แสดง ปุ ่มงานสำาเร็จ
ลำาดับขันตอนการ
้ คลิกเพ่ ือแสดง
สร้างร่ป ภาพงานสำาเร็จ
ปุ ่มรายการบทเรียน คลิก
กลับไปรายการบทเรียน
เพ่ ือเลือกเร่ ืองใหมู
5. ปุ ่มในการดูคะแนนการทดสอบ
ปุ ่มแสดง ปุ ่มแสดง
ปุ ่มพิมพ์
ปุ ่มลบข้อมูลการ ระเบียน ระเบียน
ผลการ
สอบ กุอน ตุอไป
(มีรหัสผูาน สอบถาม
สอนออก
ผ้่พัฒนาโปรแกรม) ทาง
วิธีการใช้บทเรียนคอมพิวเตอร์ชุวยสอน
1. การเปิ ดโปรแกรม
ใสูแผูนซีดีโปรแกรมบทเรียนคอมพิวเตอร์ชูวยสอน เร่ ือง การ
สร้างภาพเคล่ อนไหวด้วยโปรแกรม Macromedia Flash 8 เข้าไป
ื
ในเคร่ ืองอูาน CD (หรือ DVD ก็ได้) รอสักครู่หน่ึง คอมพิวเตอร์จะ
อูานแผูน CD แล้วโปรแกรมจะถ่กเปิ ดขึ้นอัตโนมัติ

14. 8
2. การเข้าสุูโปรแกรม
เม่ ือเข้าสู่โปรแกรมจะปรากฏหน้ าจอให้ผ้่เรียนพิมพ์ช่ือ เพ่ ือเข้า
สู่ระบบ ควรพิมพ์ช่ือเป็ นภาษาไทย (ถ้าไมูพิมพ์ส่ิงใดลงไปจะเข้าสู่
บทเรียนไมูได้) แล้วกดแป้ น Enter
เม่ ือพิมพ์ช่ือแล้วจะปรากฏข้อความต้อนรับ ดังภาพ แล้วกด
แป้ น Enter เพ่ ือเข้าสู่บทเรียนตูอไป

15. 9
เม่ ือเข้าสู่บทเรียนครังแรก ควรศึกษาผลการเรียนร้่ท่ีคาดหวัง
้
ทำาแบบทดสอบกูอนเรียน หรือเลือกเรียนเน้ือหาบทเรียนกูอน จึงจะ
สามารถทำาแบบทดสอบหลังเรียนได้
3. ผลการเรียนรู้ท่ีคาดหวัง
คลิกท่ีปู่มผลการเรียนร้่ท่ีคาดหวัง เพ่ ือแสดงผลการเรียนร้่ท่ี
คาดหวังจำานวน 5 ข้อ
4. การทำาแบบทดสอบกุอนและหลังเรียน

16. 10
เป็ นแบบทดสอบชนิ ดเลือกตอบ จำานวน 20 ข้อ ซ่ึงจำาลองการ
ทำาแบบทดสอบจริง กลูาวคือ เม่ ือผ้่เรียนคลิกเลือกคำาตอบแล้ว
สามารถคลิกเลือกตอบใหมูได้ ย้อนไปตอบข้อท่ีผูานมาได้อีกครัง ้
หรือ ข้ามไปทำาข้อท่ีต้องการได้ มีภาพแสดง/ซูอนคำาตอบท่ีเลือก
เม่ ือทำาแบบทดสอบเสร็จคูอยคลิกปู ่มตรวจคำาตอบ ซ่งโปรแกรมจะ
ึ
ตรวจคำาตอบและรายงานผลการสอบให้ทราบทันที และเก็บบันทึก
ข้อม่ลการสอบไว้ในเคร่ ืองอัตโนมัติ สามารถตรวจสอบผลการสอบ
ได้ภายหลัง
คลิกปู ่ม
Start
เพ่ ือเร่ิมทำาแบบ
คำาแนะนำ าในการทำาแบบทดสอบ

17. 11
ปุ ่มตัวเลือกแบบ
ทดสอบ คลิกบริเวณ
ข้อความตัวเลือก
ปุ ่มตรวจแบบทดสอบ ปุ ่มย้อนกลับ คลิกเพ่ ือ
เม่ ือทำาแบบทดสอบ ย้อนกลับไปยังแบบ
ครบท่กข้อแล้ว ทดสอบข้อท่ีผูานมา ปุ ่มตุอไป คลิก
เพ่ ือไปทำาแบบ
ทดสอบข้อตูอไป
ผ้่เรียนสามารถคลิกเลือกคำาตอบใหมู หรือย้อนไปทำาข้อท่ีผูานมา
หรือข้ามไปทำาข้อตูอไปได้

18. 12
ปุ ่มกระดาษคำาตอบ
คลิกเพ่ ือให้แสดง หรือ
ซูอนกระดาษคำาตอบ
เม่ ือทำาแบบทดสอบเสร็จท่กข้อแล้วคลิกปู ่มตรวจ โปรแกรมจะ
ตรวจคำาตอบให้ทันที และรายงานผลการสอบ และบันทึกผลการ
สอบไว้ในเคร่ ืองอัตโนมัติ ซ่ึงสามารถตรวจสอบได้ภายหลัง ดัง
จอภาพ
5. การตรวจสอบคะแนน

19. 13
คลิกปุ ่มคะแนนแบบ
ทดสอบ
เพ่ ือด่คะแนนจากการ
คะแนนจาการทดสอบกูอนเรียน และหลังเรียน จะถ่กเก็บไว้
ในเคร่ ืองคอมพิวเตอร์อัตโนมัติหลังจากท่ีคลิกปู ่มตรวจในการทำา
แบบทดสอบ คะแนนแบบทดสอบจะถ่กเก็บไว้เป็ นระเบียน แสดง
ช่ ือผ้่สอบ คะแนนท่ีได้จากการทำาแบบทดสอบ และเวลาในการทำา
แบบทดสอบ สามารถพิมพ์คะแนนออกทางเคร่ ืองพิมพ์ หรือลบ
ข้อม่ลการสอบได้ (แตูต้องใช้รหัสผูาน)

20. 14
คลิกเลือกประเภทคะแนนการทดสอบ
ปุ ่มแสดง ปุ ่มแสดง ปุ ่มพิมพ์
ปุ ่มลบข้อมูลการ
ระเบียน ระเบียน ผลการ
สอบ
(มีรหัสผูาน สอบถาม
กุอน ตุอไป สอนออก
ผ้่พัฒนาโปรแกรม) ทาง
การเพ่มพ้ืนท่ีในการเก็บข้อมูลการสอบ
ิ

21. 15
เม่ ือมีผ้่เรียนเข้ามาสอบจำานวนมากขึ้น จะทำาให้พ้นท่ีการการ
ื
จัดเก็บข้อม่ลเต็ม เพราะขนาดพ้ืนท่ีในการเก็บข้อม่ล คูาปกติ
(Default) มีขนาด 100 KB ซ่ ึงเราสามารถปรับขนาดพ้ืนท่ีในการเก็บ
ข้อม่ลได้ ดังนี้
1. คลิกเมาส์ขวาบริเวณท่ีวาง ๆ ให้ปรากฏเมน่ลัด
ู
2. คลิกเลือกคำาสัง Setting…
่
1
คลิกเมาส์ขวา
2 คลิกเลือก
จะปรากฏหน้ าตูาง Adobe Flash Player Setting
3. คลิกท่ีแท็บ แสดงพ้ืนท่ีในการเก็บข้อม่ล (Local
Storage) ปกติเป็ น 100 KB
3

22. 16
4. คลิกลาก Scale เพ่ ือปรับขนาดพ้ืนท่ีเก็บข้อม่ลตามต้องการ
ถ้าต้องการให้มีพ้นท่ีในการเก็บข้อม่ลมากไมูจำากัด ให้ปรับ Scale ไป
ื
ท่ี Unlimited
4
5. คลิกปู ่ม Close เพ่ ือปิ ดหน้ าตูาง
5
การลบข้อมูลการสอบ
ถ้าต้องการลบข้อม่ลการสอบ ให้คลิกท่ีปุ่มลบข้อมูล แล้วใสู
รหัสผูาน (5555)
****

23. 17
เม่ ือคลิกปุ ่มตกลง เพ่ ือลบข้อม่ลแล้ว ให้คลิกปุ มระเบียนกุอน
่
หน้ า จะไมูปรากฏข้อม่ลการสอบ (undefined) เพราะข้อม่ลถ่กลบไป
แล้ว
6. การศึกษาเน้ือหาบทเรียน

24. 18
คลิกปุ ่มบท
เรียน
เพ่ ือไปศึกษา
หน้ าจอแสดงเน้ือหาบทเรียน
เม่ ือเล่ อนเมาส์ไปเหนื อข้อความจะปรากฏภาพตัวอยูางชินงาน
ื ้
แล้วให้คลิกเลือกเน้ือหาท่ีต้องการศึกษา

25. 19
ปุ ่มตัวเลข แสดง ปุ ่มงานสำาเร็จ
ลำาดับขันตอนการ
้ คลิกเพ่ ือแสดง
สร้างร่ป ภาพงานสำาเร็จ
ปุ ่มรายการบทเรียน คลิก
กลับไปรายการบทเรียน
เพ่ ือเลือกเร่ ืองใหมู
แผงควบค่มการเลุนวีดิโอ
ปุ ่มสเกล คลิกลากเพ่ ือ ปุ ่ม ปุ ่ม ปุ ่ม ปุ ่ม
เล่ ือนด่ขันตอนการวาด
้ เร่ิม เลุ หย่ด จบ
ชั่วคร
ร่ปตามต้องการ ต้น น
ปุ มควบค่มการเลุน VDO
่
ปุ ่ม ปุ ่ม
ย้อน ตุอ
กลับ ไป
7. การศึกษาวิธีใช้

26. 20
ปุ ่มวิธี
ใช้
เล่ อนเมาส์ไปท่ีเมน่ตัวเลขด้านบน จะแสดงช่ ือเร่ ือง แล้วคลิกท่ี
ื
ปู มตัวเลขเลือกเร่ ืองท่ีต้องการศึกษา ซ่ึงมีดังนี้ 1) การใช้เมน่
่ 2)
การทำาแบบทดสอบ 3) การตรวจสอบคะแนน 4) การ
ศึกษาบทเรียน 5) การฝึ กปฏิบัติ
8. การออกจากโปรแกรม
ปุ ่มออกจาก
โปรแกรม
เม่ ือคลิกปู ่มออกจากโปรแกรม จะปรากฏข้อความยืนยันการ
ออกจากโปรแกรม

27. 21
- หากต้องการออกจากโปรแกรม คลิกปุ มใชุ
่
- หากไมูต้องการออกจากโปรแกรม คลิกปุ ่มไมุใชุ

29. 21
เน้อหาบทเรียน
ื
หนุ วย เน้ือหา
ท่ี
- การเปิ ด-ปิ ดโปรแกรม Flash
1 - สูวนประกอบของโปรแกรม Flash
- ฝึ กวาดภาพแตงโม
- ฝึ กวาดภาพมะมูวง
2 - ฝึ กวาดภาพแอปเปิ้ ล
- ฝึ กวาดภาพเทียนไข
- ฝึ กวาดภาพดอกไม้
3
- ฝึ กวาดภาพกระตูาย
- ฝึ กวาดภาพแมลงปอ
4
- ฝึ กวาดภาพสามเณร
- ฝึ กวาดภาพเคล่ ือนไหวแบบ Motion
Tween (เมฆลอย)
5
- ฝึ กวาดภาพเคล่ ือนไหวแบบ Shape
Tween (หัวใจ)
- ฝึ กวาดภาพเคล่ ือนไหวแบบ Frame by
Frame (ต้นไม้เจริญเติบโต)
6
- ฝึ กวาดภาพเคล่ ือนไหว “เทียนไขกำาลังล่ก
ไหม้”
- ฝึ กวาดภาพเคล่ ือนไหว “ปาก่ิงไม้ใสู
7
มะมูวง”
- ฝึ กวาดภาพเคล่ ือนไหว “ไฟสูองอักษร”
8
- ฝึ กวาดภาพเคล่ ือนไหว “แมลงเดินไปมา”
- ฝึ กวาดภาพเคล่ ือนไหว “โลกยิม”้
9
- ฝึ กวาดภาพเคล่ ือนไหว “พัดลมกำาลังหม่น”
- ฝึ กวาดภาพเคล่ ือนไหว “จ่ดบังไฟ”
้
10
- การเผยแพรูชินงาน
้

30. 22
หนุ วยท่ี 1
ความรู้เบ้ืองต้นเก่ียวกับโปรแกรม Macromedia
Flash ٨
และฝึ กวาดภาพกราฟิ กเบ้ืองต้น (ภาพแตงโม)
เน้อหา
ื
1. การเปิ ดโปรแกรม Macromedia Flash ٨
2. การปิ ดโปรแกรม Macromedia Flash ٨
3. สูวนประกอบของหน้ าจอโปรแกรม Macromedia Flash ٨
4. ฝึ กวาดภาพกราฟิ กเบ้ืองต้น (ภาพแตงโม)

31. 23
ความรู้เบ้ืองต้นเก่ียวกับโปรแกรม Macromedia Flash ٨
โปรแกรม Macromedia Flash ٨ หรือเรียกสัน ๆ วูา Flash
้
เป็ นโปรแกรมท่ีมีประสิทธิภาพส่งสำาหรับงานสร้างภาพกราฟิ ก, ภาพ
เคล่ ือนไหว หรือแอนิ เมชัน, งาน presentation, เกม, ตลอดจน
่
มัลติมีเดียสำาหรับเว็บ ลักษณะเดูนของแอนิ เมชันท่ีได้จากโปรแกรม
่
Flash ก็คือไฟล์ท่ีมีขนาดเล็ก จึงสามารถโหลดมาแสดงผลได้อยูาง
รวดเร็ว รวมทังให้ภาพลายเส้นท่ีคมชัด ซ่ ึงเป็ นภาพกราฟิ กแบบเวก
้
เตอร์ สามารถยูอ-ขยาย ขนาดได้ โดยมีความละเอียดคงเดิม
โปรแกรม Flash ได้รับการพัฒนา อยูางตูอเน่ ืองตังแตูเวอร์ชัน 3, 4,
้ ่
5, MX, MX 2004, 8 มาจนถึงเวอร์ชันปั จจ่บัน ในตอนนี้ คือ Adobe
่
Flash CS3 Professional หรือเวอร์ชัน 9 สำาหรับเน้ือหาการเรียนการ
่
สอนนี้จะใช้โปรแกรม Macromedia Flash ٨ ซ่ ึงเป็ นเวอร์ชันส่ดท้าย
่
ของผ้่ผลิตท่ีเปล่ียนจาก Macromedia เป็ น Adobe และเป็ นเวอร์ชัน ่
ท่ีใช้ทรัพยากรของเคร่ ืองไมูมากนั ก (ทังนี้เคร่ ืองคอมพิวเตอร์ในโรงเรียน
้
มีสเป็ คของเคร่ ืองไมูส่งนั ก)
ไฟล์มัลติมีเดียของ Flash หรือไฟล์ Shockwave
Flash(.swf) ซ่ ึงเรียกงูาย ๆ วูา “มูฟว่ี”(movie) ได้รับความนิ ยมนำ า
มาใช้บนเว็บอยูางกว้างขวาง ทังนี้เน่ ืองภาพกราฟิ กท่ีนูาต่ ืนตาต่ ืนใจ
้
มีปฏิสัมพันธ์กับผ้่ใช้ หากต้องการด่วูาภาพใดเป็ นภาพของ Flash หรือ
ไมู ทำาได้โดยคลิกขวาบนภาพนั ้น จะปรากฏเมน่ลัดซ่ ึงมีข้อความวูา
Macromedia Flash Player 8 ขึ้นมา

32. 24
การเปิ ดโปรแกรม Macromedia Flash ٨
วิธีท่ี 1
1. เปิ ดเคร่ ืองคอมพิวเตอร์เข้าสู่ระบบปฏิบัติการ Windows XP
2. คลิกเมาส์ท่ีปู่มเร่ิม (Start)
3. เล่ ือนเมาส์ไปแถบโปรแกรม (All Programs)
4. เล่ ือนเมาส์ไปแถบ Macromedia
5. คลิกเมาส์เลือกโปรแกรม Macromedia Flash ٨
วิธีท่ี 2
ดับเบิลคลิกท่ีไอคอน Macromedia Flash 8 (กรณี ท่ีมีไอคอน
้
บน Desktop)

33. 25
เม่ ือเข้าสู่โปรแกรมจะปรากฏรูปแบบเร่ิมต้นการทำางาน
(Welcome Screen) ดังร่ป
รูปแบบการทำางาน
 Open a Recent Item เป็ นการเปิ ดไฟล์เกูาท่ีสร้างไว้แล้ว
โดยคลิกเลือกรายช่ ือท่ีแสดง (เรียงลำาดับจากการบันทึกไฟล์
ครังหลังส่ดเป็ นต้นไป ส่งส่ด 9 ไฟล์) หรือ คลิก
้
เพ่ ือเปิ ดไฟล์อ่ืน

34. 26
 Create New สร้างไฟล์ใหมู โดยคลิกเลือกร่ปแบบของไฟล์
ท่ีต้องการสร้าง เชูน เลือก Flash Document เพ่ ือสร้างไฟล์
เปลูา, เลือก Flash Slide Presentation เพ่ ือสร้างงานนำ า
เสนอในร่ปสไลด์ เป็ นต้น
 Create From Template สร้างไฟล์ใหมูจากร่ปแบบ
เทมเพลตท่ีโปรแกรมมีให้ โดยคลิกเลือกหมวดเทมเพลตท่ี
ต้องการกูอนแล้วคลิกเลือกไฟล์อีกทีหน่ ึง
การปิ ดโปรแกรม Macromedia Flash ٨
หลังจากทำางานเสร็จเรียบร้อย เราสามารถปิ ดโปรแกรมโดยใช้คำา
สัง File  Exit (คีย์ลัด
่ Ctrl + Q ) หรือ คลิกท่ีปู่ม ตรง
ม่มขวาบนของวินโดว์โปรแกรม ดังภาพ
1 คลิกปิ ดโปรแกรม
2

35. 27
สูวนประกอบของหน้ าจอโปรแกรม Macromedia
Flash ٨
เม่ ือคลิกเลือกร่ปแบบการทำางานจากร่ปแบบเร่ิมต้นการทำางาน
แล้ว จะพบหน้ าจอมาตรฐาน (Default Layout) ท่ีแสดงสูวนประกอบ
สำาคัญตูาง ๆ ดังร่ป
ไตเติล พำเนลตูำง
แท็บไฟล์
บำร์ ไทม์ไลน์ แถบแก้ไข ๆ
เอกสำร
เมน่บำร์
ท่ลพำเนล
สเตจ
Stage
Property
Inspecto
r
ไตเติลบาร์ (Title Bar)
ไตเติลบาร์ หรือแถบช่ ือ เป็ นสูวนแสดงช่ ือโปรแกรม และช่ ือไฟล์
ท่กำาลังใช้งาน
ี
ช่ ือโปรแกรม ช่ ือไฟล์ท่ีทำำงำนอยู่

36. 28
เมนูบาร์ (Menu Bar)
แถบเมนู ประกอบด้วยเมน่คำาสังตูาง ๆ ท่ีใช้ในการสร้างงาน, การ
่
จัดการไฟล์และวินโดว์โปรแกรมรวมถึงการตังคูาพ้ืนฐานตูาง ๆ
้
ทูลพาเนล (Tools Panel)
กล่องเคร่ ืองมือ หรือ ทูลพาเนล คือ สูวนท่ีรวบรวมเคร่ ืองมือตูาง
ๆ ท่ีใช้ในการสร้าง ปรับแตูง และแก้ไขชินงานท่ีอยู่ในม่ฟว่ี
้
คำาสังท่ีใช้เปิ ด/ปิ ด : Window  Tools (คีย์ลัด Ctrl +
่
F2 )
ท่ลพำเนล แบูงออกเป็ น 4 กลู่มยูอย ดังนี้
A

37. 29
นอกจากคลิกท่ีปู่มกลุ่มเคร่ ืองมือืองมือแล้ว เราสามารถเลือกเคร่ ือง
บนแถบเคร่
• Selection : เลือกชินงาน
้ • Gradient Transform :
Free Transform : ปรับ ปรับแนว สีเกรเดีย
ร่ปรูางชินงาน
้ นท์
A • Line : วาดเส้นตรง • Lasso : เลือกวัตถ่หรือ
• Pen : วาดร่ปรูาง, เส้น พ้ืนท่ีบางสูวน
ตรง, เส้นโค้ง • Text : พิมพ์ตัวอักษร
• Oval : วาดวงกลมหรือ • Rectangle :วาดร่ป
วงรี ส่ีเหล่ียม เม่ ือกดปู ่มค้างไว้
• Pencil : วาดเส้นแบบ สามารถเลือกร่ปหก
B เหล่ียมได้
อิสระ
• Ink Bottle : เติมสีเส้น • Brush : แปรงระบายสี
• Eyedropper : copy สี • Paint Bucket : เติมสีพ้ืน
C จากชินงานอ่ ืน
้ ให้ชินงาน
้
• Subselection : ปรับแตูง • Eraser : ลบเส้นหรือสี
ร่ปรูางชินงาน
้ พ้ืนชินงาน
้
D
B กลุ่มกำาหนดม่มมอง D ่ม Option เคร่ ืองมือ
กลุ
• Hand : เล่ ือนด่สูวนตูาง เป็ นค่ณสมบัตเสริมของ
ิ
ๆ ของภาพ เคร่ ืองมือท่ีเราเลือก โดย
• Zoom : ยูอ/ขยายม่มอง รายละเอียดจะเปล่ียนไป
ภาพบนสเตจ ตามเคร่ ืองมือท่ีเราเลือก
เชูน
C กลุ่มกำาหนดสี
• Stroke Color : เลือกสี
เส้น
• Fill Color : เลือกสีพ้ืน
Black and
White : เลือกเส้น
เป็ นสีดำาพ้ืนเป็ นสี
ขาว
No Color : ไมู
เลือกใช้สีใด ๆ
Swap Color :
สลับสีเส้นกับ สีพ้ืน
เคร่ ืองมือ เคร่ ืองมือ
เคร่ ืองมือ
Selection Free
Transform Brush

38. 30
แถบแก้ไข (Edit Bar)
ซูอน/แสดงไทม์ คลิกเลือก คลิกเลือกขนำดมุม
ไลน์ ซีน มอง
แสดงช่ ือซีน คลิกเลือก
ปั จจุบัน ซิมโบล
แถบแก้ไข คือ แถบเคร่ ืองมือท่ีใช้เลือกฉาก (scene) ท่ีจะทำางาน
ทังนี้เน่ ืองจากในม่ฟว่ีหน่ ึง ๆ เราอาจประกอบด้วยฉากหลาย ๆ ฉากก็ได้
้
และในแตูละฉากประกอบด้วยตัวแสดง (symbol) หลายตัว นอกจากนี้
ยังสามารถเลือกม่มมองภาพบนสเตจได้อีกด้วย
ไทม์ไลน์ (Timeline) ล็อค/ปลด ซูอน/แสดง
ซูอน/
ล็อค ลำยเส้นวัตถุ
แสดง
เลเยอร์ เลเยอร์ เลเยอร์ playhea เฟรม
d
เพ่ิม
เลเยอร์
Motion Guide Insert Layer ลบ แสดงตำำแหนู ง
Layer ไลน์ คือ Folderืองมือท่ีใช้ใเลเยอร์ างภาพเคล่playhead
ไทม์ เป็ นเคร่ นการสร้ ือนไหว
ประกอบด้วย 2 สูวนหลัก คือ เลเยอร์ (Layer) และเฟรม (Frame)
เลเยอร์เปรียบเสมือนแผูนใสท่ีใช้จัดวางวัตถ่ หรือตัวละครตูาง ๆ ให้
เรียงซ้อนกันได้ โดยเลเยอร์ท่ีอยู่ข้างลูางจะแสดงภาพท่ีซ้อนอยู่ด้านหลัง
และในทางกลับกันเลเยอร์ท่ีอยู่ข้างบนจะแสดงภาพท่ีอยู่ด้านหน้ า
สูวนเฟรมเป็ นการแบูงภาพเคล่ ือนไหวออกเป็ นจังหวะยูอย ๆ เหมือนกับ
ฟิ ล์มภาพยนตร์แตูละภาพ ซ่ ึงเม่ ือนำ าหลาย ๆ เฟรมมาแสดงอยูางตูอ
เน่ ืองจะทำาให้เห็นเป็ นภาพเคล่ ือนไหว ตำาแหนู งของแตูละเฟรมจะแสดง
ด้วยหมายเลขเฟรม โดยมี playhead เป็ นตัวควบค่มการแสดงบนส
เตจ และบอกตำาแหนู งปั จจ่บัน
พาเนล (Panel)

39. 31
พาเนล คือ กรอบหน้ าตูางยูอย ๆ ท่ีมีคำาสังและเคร่ ืองมือในการ
่
จัดการ, ตรวจสอบคูา และปรับแตูงองค์ประกอบตูาง ๆ ในม่ฟว่ี ไมูวาจะ ู
เป็ นเฟรม, ซิมโบล, ตัวอักษร และออบเจ็คอ่ ืน ๆ เชูน พาเนล Color
ใช้เพ่ ือเลือกสี , พาเนล Library ใช้จดเก็บและจัดการซิมโบล , พาเนล
ั
Align & Info & Transform ใช้จดการตำาแหนู ง จัดวาง และปรับ
ั
เปล่ียนร่ปรูางวัตถ่ เป็ นต้น
พาเนล Color พาเนล Library
พาเนล Align & Info
&
Transform
หากพาเนลปรากฏบนหน้ าจอ คลิกเพ่ ือเปิ ด
อยู่แล้ว แตูถ่กบังโดยพาเนลอ่ ืน ให้คลิก พำเนลท่ีถ่ก
ท่ีแท็บช่ ือของพาเนลท่ีต้องการนั ้น บังอยู่

40. 32
การเปิ ดพาเนล
การเปิ ดพาเนลท่ียังไมูแสดงให้คลิกคำาสัง Window  คลิกช่ ือ
่
พาเนลท่ีต้องการเปิ ด
พำเนลท่ียังไมูเปิ ด
คลิกเพ่ ือเปิ ด
พำเนล
พำเนลท่ีเปิ ดไว้แล้ว
การปิ ดพาเนล
เม่ ือต้องการปิ ดพาเนลให้คลิกคำาสัง Window  คลิกช่ ือพาเนล
่
ท่ีต้องการปิ ด (คลิกพาเนลท่ีมีร่ป อยู่ด้านหน้ า) หรือ คลิกท่ีปู่ม
ท่ีอยู่ดานขวาของพาเนล แล้วคลิกเลือกคำาสัง Close panel group
้ ่

41. 33
1
2
การซ่อน/แสดงพาเนล
เราสามารถซูอน หรือ แสดงพาเนลทังหมดได้ โดยกดแป้ น
้
คียบอร์ด F4 หรือ คลิกเมน่ Window  คำาสัง Hide Panel
์ ่
หากต้องการให้พาเนลแสดงอีกครัง ให้กดแป้ นคีย์บอร์ด F4 หรือ
้
คลิกเลือกคำาสัง Hide Panel อีกครัง
่ ้
ในบางครังพาเนลเปิ ดอยู่แตูถ่กย่บให้เล็กเล็กลงเหลือแตูแถบช่ ือ
้
พาเนล ไมูเห็นรายละเอียดของพาเนล เราสามารถทำาให้แสดงราย
ละเอียดของพาเนลได้ โดยคลิกท่ีบริเวณแถบช่ ือพาเนล
Property Inspector

42. 34
เป็ นพาเนลท่ีใช้
สำาหรับกำาหนด
ค่ณสมบัติตูาง ๆ ของ
ออบเจ็ค หรือองค์
ประกอบตูาง ๆ ของม่ฟ เม่ ือคลิกเลือกเคร่ ืองมือ Pencil จะแสดง
ว่ี โดยรายละเอียด ค่ณสมบัติของเส้นดินสอดินสอ
ภายใน Property
Inspector จะเปล่ียน
ไปตามเคร่ ืองมือ หรือ
ออบเจ็คท่ีกำาลังเลือกใน เม่ ือคลิกเลือกเคร่ ืองมือ Text จะแสดง
ขณะนั ้น ค่ณสมบัติของตัวอักษร
การยุบ / การขยายแผงพาเนล
เม่ ือต้องการย่บแผงพาเนลเพ่ ือเพ่ิมพ้ืนท่ีในการทำางาน ทำาได้โดย
คลิกท่ี
หรือ คลิกท่ี เพ่ ือขยายแผงพาเนล

43. 35
คลิกท่ีน่ีเพ่ ือ ยุบแผง
พำเนล
คลิกท่ีน่ีเพ่ ือ ขยายแผง
พำเนล คลิกท่ีน่ีเพ่ ือย่บแผง
พาเนล
การจัดการไฟล์
ประเภทของไฟล์ Flash
การทำางานของโปรแกรม Flash จะเก่ียวข้องกับไฟล์หลัก ๆ 2
ประเภท คือ
ไฟล์เอกสาร (Flash document) มีฟอร์แมต เป็ น
.fla ไฟล์นี้เป็ นไฟล์ท่ีบันทึกในขันตอนการสร้างชิน
้ ้
งาน โดยไฟล์จะเก็บข้อม่ลตูาง ๆ ซ่ ึงได้จากการออกแบบ
และพัฒนาทังหมดไว้ ตามสภาพเดิม และสามารถเปิ ด
้

44. 36
กลับมาแก้ไขได้
ไฟล์มูฟว่ี (Flash movie) มีฟอร์แมตเป็ น .swf ไฟล์
นี้เป็ นผลลัพธ์ส่ดท้าย ซ่ ึงจะได้จากการพับลิช
(publish) ไฟล์เอกสารสารข้างต้น เพ่ ือนำ าไปเผยแพรู
และแสดงด้วยโปรแกรม Flash Player โดยข้อม่ล
ต้นฉบับจะถ่กบีบอัด ปรับลดค่ณสมบัติ และย่บรวมกัน
เพ่ ือให้ไฟล์มีขนาดเล็ก ดังนั ้นจึงไมูสามารถเปิ ดกลับมา
แก้ไขได้
นอกจากไฟล์หลักข้างต้น อาจมีไฟล์อ่ืน ๆ
ท่ีเก่ียวข้องอีก โดยขึ้นอยู่กบเน้ือหาของชินงานและวิธี
ั ้
การพับลิช รวมไปถึงร่ปแบบการสร้าง เชูน ไฟล์ .flv ซ่ ึง
เป็ นไฟล์วดีโอ (Flash Video) หรือ ไฟล์ .html ซ่ ึง
ี
เป็ นเว็บเพจท่ีใช้แสดงม่ฟว่ี เป็ นต้น
การสร้างไฟล์เอกสารใหม่
1. สร้างด้วย Welcome Screen
ปกติเม่ ือเปิ ดโปรแกรม Flash ขึ้นมา จะพบหน้ าจอ
Welcome Screen เป็ นหน้ าจอแรก ซ่ ึงสามารถสร้างไฟล์ใหมูได้ โดย
คลิกเลือกคำาสัง Flash Document จากช่ดคำาสัง Create New
่ ่

45. 37
2. สร้างด้วยคำาสั่ง New
หากต้องการสร้างไฟล์ใหมูครังถัด ๆ ไป หรือในกรณี ท่ี
้
กำาหนดไมูให้แสดง Welcome Screen ดังนี้
คลิกคำาสั่ง File  New
การฝึ กวาดภาพแตงโม
วิธีวาด
1. คลิกเคร่ ืองมือวาดร่ปวงกลม (Oval Tool)

46. 38
2. เปิ ดพาเนล Properties กำาหนดขนาดเส้นเป็ น 10 point , สี
เส้นเป็ นสีเขียว และสีพ้ืนเป็ นสีแดง
3. วาดร่ปแตงโมเป็ นร่ปวงรี (หรือวงกลมก็ได้)
4. ทำาเมล็ดแตงโม โดยการคลิกเคร่ ืองมือ Brush เลือกสีพ้ืน
เป็ นสีดำา และขนาดหัวแปรงท่ีเหมาะสม แล้วคลิกแต้มเมล็ด
แตงโมตามจำานวนท่ีต้องการ
หนุ วยท่ี 2
การฝึ กวาดภาพกราฟิ กเบ้ืองต้น
เน้อหา
ื
1. ฝึ กวาดภาพมะมูวง
2. ฝึ กวาดภาพแอปเปิ้ ล
3. ฝึ กวาดภาพเทียนไข

47. 39
การฝึ กวาดภาพมะมูวง
วิธีวาด

48. 40
1. คลิกเคร่ ืองมือวาดร่ปวงกลม (Oval Tool)
2. วาดร่ปวงรีแนวตัง
้
3. ใช้เคร่ ืองมือ Selection ปรับเส้นให้โค้งเป็ นร่ปมะมูวง
4. ใช้เคร่ ืองมือ Line วาดขัวมะมูวง
้
5. เติมสีมะมูวง โดยเลือกชนิ ดการเติมสีแบบ Radial ผสมสี
ระหวูางสีเหลืองกับสีเขียว

49. 41
6. คลิกเติมสีมะมูวงท่ีบริเวณก้นมะมูวง
การฝึ กวาดภาพแอบเปิ้ ล
วิธีวาด
1. คลิกเคร่ ืองมือวาดร่ปวงกลม (Oval Tool) วาดร่ป
วงกลม

50. 42
2. ใช้เคร่ ืองมือ Erase ลบเส้นด้านบน และด้านลูางออก
3. ใช้เคร่ ืองมือ Selection ปรับปลายเส้นให้เป็ นร่ปแอบเปิ้ ล
4. ใช้เคร่ ืองมือ Pencil วาดร่ปขัวแอบเปิ้ ล
้
5. ใช้เคร่ ืองมือ Line และเคร่ ืองมือ Selection วาดใบแอบ
เปิ้ ล

51. 43
6. เติมสีแอบเปิ้ ล โดยเลือกชนิ ดการเติมสีแบบ Radial ผสมสี
ระหวูางสีเหลืองกับสีแดง
7. เติมสีใบแอบเปิ้ ลด้วยสีเขียว
การฝึ กวาดภาพเทียนไข

52. 44
วิธีวาด
1. คลิกเคร่ ืองมือ Rectangle วาด ร่ปส่ีเหล่ียม
2. ใช้เคร่ ืองมือ Selection ดัดเส้น ด้านบนและ
ด้านลูางของเทียนให้โค้ง และวาดด้านบนให้โค้งรับกัน
3. วาดไส้เทียนโดยใช้เคร่ ืองมือเส้นตรง Line
4. ใช้เคร่ ืองมือ Pencil วาดเปลวเทียน
5. ปรับขนาดไส้เทียน โดยคลิกใช้ขนาดเส้นเป็ น 5 point และเติม
สีไส้เทียนเป็ นสีเทา

53. 45
6. เติมสีด้านบนของเทียนด้วยสีเหลือง
7. เติมสีตัวเลูมเทียนแบบ Linear โดยผสมสีสามสี ดังภาพ
8. เติมสีเปลวเทียนแบบ Radial โดยผสมสีสามสี ดังภาพ

54. 46
หนุ วยท่ี 3
การฝึ กวาดภาพกราฟิ กเบ้ืองต้น
เน้อหา
ื
1. ฝึ กวาดภาพดอกไม้
2. ฝึ กวาดภาพกระตูาย

55. 47
การฝึ กวาดภาพดอกไม้
วิธีวาด
1. วาดกลีบดอกไม้ โดยคลิกเคร่ ืองมือวาดร่ปวงกลม (Oval
Tool) วาดร่ปวงรี
2. เติมสีกลีบดอกไม้แบบ Radial และผสมสีระหวูางสีเหลืองกับ
สีส้ม

56. 48
3. Group ภาพกลีบดอกไม้ (รวมเส้นกับพ้ืนเป็ นภาพเดียวกัน)
โดยใช้เคร่ ืองมือ Selection แดร๊กครอบร่ปกลีบดอกไม้ คลิก
เมน่ Modify แล้วเลือคำาสัง Group หรือ กดแป้ นคีย์บอร์ด
่
Ctrl + G
4. คัดลอกกลีบดอกไม้ออกเป็ น 5 ร่ป โดยกดแป้ น Ctrl ค้างไว้
พร้อมกับลากปลูอยร่ปกลีบดอกไม้ในตำาแหนู งใหมู หรือใช้คำา
สังผูานแป้ นคียบอร์ด คัดลอก กด Ctrl + C และวางด้วยคำา
่ ์
สัง Ctrl + V
่
5. เคล่ ือนย้าย และปรับหม่นทิศทางของกลีบดอกไม้ให้เรียงเป็ น
ร่ปดอกไม้ ด้วยเคร่ ืองมือ Free Transform

57. 49
6. วาดเกสรดอกไม้ โดยคลิกเคร่ ืองมือ Oval วาดร่ปวงกลม
แล้ว Group ภาพ
7. นำ าร่ปวงกลม (เกสรดอกไม้) มาวางบนกลีบดอกไม้
8. วาดก้านดอกไม้โดยใช้เคร่ ืองมือ Line กำาหนดขนาดเส้น
เป็ น 10 point และสีเส้นเป็ นสีเขียว
9. วาดใบดอกไม้ โดยใช้เคร่ ืองมือ Line และเคร่ ืองมือ
Selection ดัดเส้นให้โค้ง และเติมสีใบไม้ด้วยสีเขียว

58. 50
10.คัดลอกใบไม้ไปอีกข้างหน่ ึง โดยกดแป้ น Ctrl ค้างไว้พร้อมกับ
คลิกลากปลูอยใบไม้ไปวางอีกข้างของก้านดอก แล้วปรับหม่น
ให้ได้ทิศทางท่ีสวยงาม
การฝึ กวาดภาพการ์ต่น (กระตูาย)

59. 51
วิธีวาด
1. วาดหัวกระตูาย โดยคลิกเคร่ ืองมือวาดร่ปวงกลม (Oval
Tool) วาดร่ปวงกลม แล้วใช้เคร่ ืองมือ Selection ปรับเส้น
ให้โค้งเล็กน้ อย ดังร่ป
2. วาดห่กระตูาย โดยใช้เคร่ ืองมือ Oval วาดเป็ นร่ปวงรี
3. ทำาห่กระตูายอีกข้างโดยการคัดลอกภาพวงรี (กดแป้ น Ctrl ค้าง
ไว้ และคลิกเมาส์ลากปลูอย)
4. เคล่ ือนย้ายตำาแหนู งห่กระตูาย และปรับหม่นโดยใช้เคร่ ืองมือ
Free Transform ให้ได้ทิศทางท่ีสวยงาม

60. 52
5. ลบเส้นท่ีเป็ นสูวนเกิน โดยคลิกท่ีเส้น แล้วกดแป้ น Delete
6. วาดปากกระตูาย โดยใช้เคร่ ืองมือ Line และดัดเส้นให้โค้ง
ด้วยเคร่ ืองมือ Selection
7. วาดตาของกระตูายด้วยเคร่ ืองมือ Brush เลือกขนาดหัว
แปรงให้พอเหมาะและเป็ น สีดำา
8. วาดหนวดกระตูาย โดยใช้เคร่ ืองมือ Line ดังร่ป
9. วาดตัวกระตูาย โดยใช้เคร่ ืองมือ Line และเคร่ ืองมือ
Selection ดัดเส้น ดังร่ป

61. 53
10.วาดแขนกระตูาย โดยใช้เคร่ ืองมือ Line และเคร่ ืองมือ
Selection ดัดเส้น ดังร่ป
11. เติมสี โดยใช้เคร่ ืองมือ เลือกเติมสีแบบ Radial ผสมสี
ขาวกับสีชมพ่ ดังร่ป
หนุ วยท่ี 4
การฝึ กวาดภาพกราฟิ กเบ้ืองต้น
เน้อหา
ื
1. ฝึ กวาดภาพแมลงปอ

62. 54
2. ฝึ กวาดภาพสามเณร
การฝึ กวาดภาพการ์ต่น (แมลงปอ)
วิธีวาด

63. 55
1. วาดหัวแมลงปอ โดยคลิกเคร่ ืองมือวาดร่ปวงกลม (Oval
Tool) วาดร่ปวงกลม แล้ววาดดวงตาข้างท่ีซ้าย และคัดลอกไป
ไว้ด้านขวา
2. ลบเส้นท่ีไมูต้องการออก โดยคลิกเส้นแล้วกดแป้ น Delete
3. วาดเปลือกตาด้วยเคร่ ืองมือ Line
4. ทำาตา โดยใช้เคร่ ืองมือ Brush แต้มท่ีบริเวณดวงตา
5. วาดปาก ด้วยเคร่ ืองมือ Line และดัดเส้นให้โค้งด้วยเคร่ ือง
มือ Selection
6. เติมสีให้หน้ าแมลงปอ โดยเติมสีแบบ Radial เป็ นการผสมสี
ระหวูางสีขาวและสีเหลือง

64. 56
7. แดร๊กครอบร่ปหัวแมลงปอเพ่ ือเลือกทังเส้นและพ้ืนภายใน
้
แล้ว Group ภาพ
8. ใช้เคร่ ืองมือ Oval วาดร่ปตัวแมลงปอ แล้วใช้เคร่ ืองมือ
Selection เคล่ ือนย้ายมาวางซ้อนกับร่ปหัว
9. วาดหางแมลงปอ ด้วยเคร่ ืองมือ Pencil โดยเลือกร่ปแบบ
เส้น (Option) เป็ นแบบ Smooth เม่ ือวาดแล้วโปรแกรมจะ
ปรับเส้นให้เรียบอัตโนมัติ

65. 57
10.ใช้เคร่ ืองมือ Line วาดข้อปล้องของหางแมลงปอ
11.ใช้เคร่ ืองมือ Selection ดัดข้อปล้องให้โค้ง
12.วาดขาแมลงปอด้วยเคร่ ืองมือ Line
13.เติมสีตัวแมลงปอ โดยเลือกเติมสีแบบ Radial และผสมสี
ขาวกับสีเหลือง

66. 58
14.วาดร่ปปี กแมลงปอ ด้วยเคร่ ืองมือ Oval เป็ นร่ปวงรี และ
เติมสีฟ้า
15.ปรับคูาความโปรูงใส (Alpha) ของปี ก เป็ น 50
16.ทำาการ Group ภาพปี ก และเคล่ ือนย้ายภาพปี กมาวางบนตัว
แมลงปอ
17.คัดลอกภาพปี ก ออกไปให้ครบ 4 ปี ก
18.สูงภาพปี กด้านซ้ายมือไปข้างหลังร่ปหัวแมลงปอ โดยใช้คำาสัง
่
Send to Back ในเมน่ Modify
13.ปรับหม่นปี กแมลงปอด้วยเคร่ ืองมือ Free Transform
ให้ได้ตำาแหนู งท่ีสวยงาม

67. 59
การฝึ กวาดภาพการ์ต่น (สามเณร)
วิธีวาด (วาดตามแบบ)
1. นำ าภาพการ์ต่นจากแหลูงภาพภายนอกเข้ามาในโปรแกรม
Flash โดยคลิกเมน่ File แล้วคลิกเลือกคำาสัง
่
Import to Stage

68. 60
2. คลิกเลือกภาพท่ีต้องการ (ในท่ีนี้เลือกภาพสามเณร)
คลิกเลือกปู ่ม Open เพ่ ือนำ าภาพเข้ามาในโปรแกรม
Flash
3. คลิกปู ่มเพ่ิม Layer (Layer 2 อยู่ด้านบน) และคลิก
ปู มล็อค
่ Layer ท่ีอยู่
ด้านลูาง (Layer 1 มีร่ปการ์ต่นต้นแบบ)
4. ใช้เคร่ ืองมือ Pen สร้างเส้นตามร่ปต้นแบบ และใช้เคร่ ือง
มือ Selection
ดัดเส้นให้ได้เส้นตามแบบ หรือใช้เคร่ ืองมืออ่ ืนในการวาด
เส้นตามแบบก็ได้

69. 61
วาดลายเส้นให้ครบท่กสูวน ระวังอยูาให้เส้นขาด (เพราะจะเติมสีไมูได้)
5. เติมสีให้กับร่ป อาจเติมสีใหมู หรือเติมสีแบบเดิม ทำาได้โดย
เลือกเติมสีแบบ Radial ด่ดสีจากภาพต้นแบบจากเคร่ ืองมือ
Eye Dropper

70. 62
6. เติมสีให้สวยงาม ดังร่ป
ภาพต้นแบบ ภาพวาดใหมู
หมำยเหตุ ภาพต้นแบบ ลบออกจาก Library ก็ได้ เพ่ ือให้
ขนาดไฟล์ลดลง
หนุ วยท่ี 5

71. 63
การสร้างภาพเคล่ ือนไหว
เน้อหา
ื
1. การสร้างภาพเคล่ ือนไหว แบบ Motion Tween (เมฆลอย)
2. การสร้างภาพเคล่ ือนไหว แบบ Shape Tween (หัวใจแปลงรูาง)
การสร้างภาพเคล่ ือนไหวแบบ Motion Tween

72. 64
วิธีสร้าง
1. วาดภาพก้อนเมฆ ในเฟรมท่ี 1 โดยใช้เคร่ ืองมือ Oval วาด
วงกลมหลาย ๆ วงซ้อนกัน
2. ลบเส้น และพ้ืนภายในออก โดยคลิกท่ีเส้น หรือพ้ืนแล้วกด
แป้ น Delete
3. เติมสีก้อนเมฆ โดยเติมสีแบบ Linear ผสมสีเทากับสีขาว ดัง
ภาพ

73. 65
3. ใช้เคร่ ืองมือ Gradient Transform หม่นทิศทางการไลู
เฉดสี ดังภาพ
4. ทำาให้ภาพก้อนเมฆเคล่ ือนไหว โดยคลิกขวาท่ีเฟรมท่ี 1 เพ่ ือ
ให้แสดงคำาสังลัด แล้วคลิกเลือกคำาสัง Create Motion
่ ่
Tween
5. คลิกเลือกเฟรมท่ี 150 แล้วแทรกคีย์เฟรม (Insert
Keyframe) โดยกดแป้ น F6
6. คลิกลากก้อนเมฆไปทางขวาของ Stage

74. 66
7. คลิกเลือกเฟรมท่ี 1 คลิกลากก้อนเมฆไปข้างซ้ายของ Stage
8. ทดสอบผลงาน โดยกดแป้ น Ctrl+Enter

75. 67
การสร้างภาพเคล่ ือนไหวแบบ Shape Tween
วิธีสร้าง
1. พิมพ์ข้อความ “Heart” ในเฟรมท่ี 1
2. คลิกเลือกเฟรมท่ี 10 กดแป้ น F6 เพ่ ือแทรกคีย์เฟรม
3. คลิกเลือกเฟรมท่ี 20 กดแป้ น F7 แทรกคีย์เฟรมวูางเปลูา วาด
ร่ปหัวใจ พร้อมกับเติมสี ให้เรียบร้อย

76. 68
4. คลิกเลือกเฟรมท่ี 30 แล้วกดแป้ น F6 เพ่ ือแทรกคีย์เฟรม
5. คลิกเลือกเฟรมท่ี 40 กดแป้ น F7 เพ่ ือแทรกคีย์เฟรมวูางเปลูา
แล้วไปคัดลอกข้อความในเฟรมท่ี 1 นำ ามาวางในเฟรมท่ี 40
โดยใช้คำาสัง Paste in Place (วางในตำาแหนู งเดิม)
่
6. คลิกเลือกเฟรมท่ี 10 แล้วกดแป้ น Ctrl + B จำานวน 2 ครัง
้
เพ่ ือแยกตัวอักษรเป็ นสูวน ๆ

77. 69
7. ท่ีเฟรมท่ี 10 นี้ เปิ ดพาเนล Properties เลือก Tween แบบ
Shape เพ่ ือให้ภาพเคล่ ือนไหวแบบเปล่ียนร่ปรูาง
8. คลิกเลือกเฟรมท่ี 30 และคลิกเลือก Tween แบบ Shape
เชูนกัน

78. 70
9. ทดสอบชินงาน กดแป้ น Ctrl + Enter
้
หนุ วยท่ี 6
การสร้างภาพเคล่ ือนไหว
เน้อหา
ื
1. การสร้างภาพเคล่ ือนไหว แบบ Frame by Frame (ต้นไม้
เจริญเติบโต)
2. การสร้างภาพเคล่ ือนไหว “เทียนกำาลังล่กไหม้”

79. 71
การสร้างภาพเคล่ ือนไหวแบบ Frame by Frame
วิธีสร้าง
1. วาดกระถางต้นไม้พร้อมต้นไม้ ในเฟรมท่ี 1 ดังร่ป

80. 72
2. คลิกท่เฟรมท่ี 5 แล้วกดแป้ น F6 เพ่ ือสร้างคีย์เฟรม และวาด
ี
ต้นไม้ท่ีเจริญเติบโต ดังร่ป
3. คลิกท่เฟรมท่ี 10 แล้วกดแป้ น F6 เพ่ ือสร้างคีย์เฟรม และ
ี
วาดต้นไม้ท่ีเจริญเติบโต ดังร่ป
4. คลิกท่เฟรมท่ี 15 แล้วกดแป้ น F6 เพ่ ือสร้างคีย์เฟรม และ
ี
วาดต้นไม้ท่ีเจริญเติบโต ดังร่ป
5. คลิกท่เฟรมท่ี 20 แล้วกดแป้ น F6 เพ่ ือสร้างคีย์เฟรม และ
ี
วาดต้นไม้ท่ีเจริญเติบโต ดังร่ป

81. 73
6. ทดสอบชินงาน กดแป้ น Ctrl + Enter
้

82. 68
การสร้างภาพเทียนกำาลังล่กไหม้
วิธีสร้าง
1. เปิ ดไฟล์ภาพเทียน candle.fla ขึ้นมา (หรือ วาดร่ปเทียนขึ้น
ใหมู)
2. คลิกท่ีเฟรมท่ี 3 กดแป้ น F6 เพ่ ือสร้างคีย์เฟรม แล้ว ใช้เคร่ ือง
มือ Selection ปรับเปลวเทียนให้ไปอีกด้าน ดังร่ป

83. 69
3. แทรกเฟรมไปยังเฟรมท่ี 4 โดยกดแป้ น F5 ดังร่ป
4. ทดสอบชินงาน กดแป้ น Ctrl + Enter
้
หนุ วยท่ี 7

84. 70
การสร้างภาพเคล่ ือนไหว
เน้อหา
ื
การสร้างภาพเคล่ ือนไหว “ปาก่ิงไม้ใสูมะมูวง”
การสร้างปาก่ิงไม้ใสูมะมูวง

85. 71
วิธีสร้าง
1. เปิ ดไฟล์ภาพมะมูวง (mango.fla) หรือ วาดภาพมะมูวงขึ้นมา
ใหมู
2. คลิกเลือกเฟรมท่ี 30 แล้วกดแป้ น F6 เพ่ ือสร้างคีย์เฟรม
3. ล็อคเลเยอร์มะมูวงไว้