Falsh 8

1. โปรแกรม Macromedia Flash
ในบทที่ 2 เป็นโปรแกรม Macromedia Flash ซึ่งในปัจจุบันได้พัฒนาการมาถึง
เวอร์ชัน 8 แล้วโดยใช้ชื่อเรียกอย่า งเป็นทางการว่า Flash Professional 8 ซึ่งความสามารถที่
หลากหลายของโปรแกรมนั้นนับวันจะถูกพัฒนาให้มีค วามซับซ้อนมากขึ้น แต่ยังคงเนื้อหา
ให้ตัว โปรแกรมมีค วามแตกต่า งจากเวอร์ชั่นที่ผ่า นมาน้อยที่สุด เพื่อให้ผู้ที่ใช้งานได้อย่า ง
สะดวกไม่ต้องเสียเวลาเริ่มต้นใหม่ แต่สิ่งหนึ่งที่ผู้ใช้งานจะต้องเรียนรู้ใหม่อย่า งสม่่า เสมอ
นั่นก็คือเทคนิคการเคลื่อนไหวชนิดต่าง ๆ ที่โปรแกรมนี้ท่าได้(หรือเรีย กสั้น ๆ ว่า เอฟเฟ็กต์)
ซึ่งทุกรายละเอีย ดการเคลื่อนไหวนั้นจะมีค วามแตกต่า งกันออกไปตามชิ้นงานที่ได้สร้า ง
เอาไว้ บางเอฟเฟ็กต์ที่คิดว่าง่ายแต่เวลาท่าจริงยากกว่า ที่คิด หรือบางเอฟเฟ็กต์ที่คิด ว่า ท่า ยาก
แต่ตอนลงมือท่าง่ายนิดเดียว ด้วยเหตุนี้เอง Flash Workshop จึงได้ถือก่าเนิด มาในแวดวงการ
เคลื่อนไหวบนเว็บอีกครั้ง ในบทเรียนนี้ใช้เวลาเรียนทั้งหมด 21 ชั่ว โมง แบ่งเป็นทฤษฎี 6
ชั่วโมง ปฏิบัติ 21 ชั่วโมง รวม 7 วัน
ในบทที่ 2 ครูผู้สอนได้ก่าหนดให้ผู้เรียนได้เรียนรู้ตามหัวข้อย่อยแต่ละเรื่องซึ่งมี
ทั้งหมด 7 เรื่อง เพื่อให้ผู้เรียนได้มีความรู้ สามารถปฎิบัติตามบทเรียนและท่า แบบฝึกหัด ท้า ย
บทเรียนได้ ตามรายละเอียดดังนี้
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
1

2. 1. ความรู้เบื้องต้น (Introduction) ได้แก่ ความส่าคัญ ความหมาย การติด ตั้ง การเปิด -ปิด
ส่วนประกอบของโปรแกรม ตลอดจนการจัดเก็บไฟล์ในรูปแบบต่าง ๆ ดังนี้
การติดตั้งโปรแกรม
1. ให้คัดลอก(Copy)โปรแกรมชื่อ Flash8-en จากแผ่นซีดี ที่ผู้สอนแจกให้ ไปใส่ใน
เครื่องคอมพิว เตอร์ของผู้เรียน
2. ดับเบิ้ลคลิกที่ไฟล์ Flash8-en ท่าการติดตั้งตามค่าสั่งการติดตั้งไปจนจบขั้นตอน
3. ถ้าหากในเครื่องได้ลงโปรแกรม Dreamwavwer สามารถเรียกใช้โปรแกรมได้
4. ถ้าหากยังไม่ได้ลงโปรแกรม Dreamwavwer ให้ดับเบิ้ลคลิกที่ไฟล์ keygen ให้น่า
Serial WPD800-59139732-18635 ไปใส่เมื่อเปิดใช้งาน
การเปิดใช้งานโปรแกรม
1. คลิกที่ Start
2. คลิกที่ Programs
3. คลิกที่ Macromedia
4. คลิกที่ Macromedia Flash 8
5. เข้าสู่หน้าแรก ที่ Create New คลิกที่ Flash document จะเข้าสู่หน้าหลัก
6. ต้องการสร้างไฟล์ใหม่ ให้คลิกที่ File
7. คลิกที่ New
8. คลิกที่ Flash document
9. คลิกที่ Ok
2 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

3. ส่วนประกอบต่าง ๆ ของโปรแกรม
เมนูบาร์
เมนูบาร์
ย่อ/ขยายเวที
Layer Frame
Stage หรือเวที
เครื่องมือ หรือ Tools Properties
Inspector
1. เมนูบาร์ หมายถึงการใช้ข้อความเป็นค่าสั่งกับ การสร้างงานกราฟิก
2. กล่องเครื่องมือ (Toolbox) หมายถึงการใช้รูปภาพแทนค่าสั่งต่าง ๆ
3. Layer หมายถึง ชั้นหรือที่อยู่ของการท่าเอฟเฟ็กต่าง ๆ ถ้าต้องการเพิ่มคลิกที่
Insert layer ต้องการลบ ให้แดร็กลากลงที่รูปถังขยะ
4. Frame หมายถึงการก่าหนดระยะทางให้กับเอฟเฟ็กต่าง ๆ โดยให้คลิกขวา
ด้านล่างตัวเลขที่ต้องการ คลิกที่ Insert Keyframe สามารถก่าหนดได้หลาย ๆ
จุด เพื่อใส่เทคนิคการเคลื่อนไหวชนิดต่าง ๆ
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
3

4. 5. ย่อ/ขยายเวที หมายถึงการก่าหนดมุมมองหน้าจอภาพให้มีขนาดเหมาะสม
พร้อมท่างานได้สะดวก
6. Stage หรือเวที หมายถึงบริเวณพื้นที่ส่าหรับแสดงผลงานและบอกขนาดของ
รูปภาพ
7. เครื่องมือหรือTools หมายถึงการใช้รูปภาพแทนค่าสั่งต่าง ๆ
8. Properties หมายถึงส่วนที่ให้ก่าหนดขนาด สีพื้นหลัง ความเร็วให้กับชิ้นงาน
เริ่มต้นสร้างงานใหม่
1. คลิกที่ Size: 550 x 400 pixels
2. ใส่ 400 ที่ (width) และ 300 ที่ (height)
3. ที่ Background color: คลิกเลือกสีที่ต้องการ
4. ที่ Frame rate : ใส่ 15 (ตัวเลขน้อยจะเคลื่อนไหวช้า มากจะเร็วขึ้น)
5. คลิกที่ Ok
6. ย่อขนาด Stage หรือ เวทีให้เหลือ 60 % เพื่อให้มองเห็นภาพทั้งหมด
*** ต้องก่าหนดทุกครั้งเมื่อเริ่มสร้างชิ้นงานใหม่ ***
2. การแทรกรูปภาพ ผู้เรียนได้เรียนรู้เกี่ยวกับการแทรกรูปภาพในลักษะต่าง ๆ ได้แก่
การย่อหรือขยายรูปภาพ การแสดงของรูปภาพในลักษณะต่าง ๆ ที่สวยงาม โดยมี
ขั้นตอนดังต่อไปนี้
1. ก่าหนดค่าตามข้อ1-6 (ในหัวข้อเริ่มต้นสร้างงานใหม่) ให้เรียบร้อย
2. ดับเบิ้ลคลิกที่ Layer1
3. ที่ Name พิมพ์ค่าว่า background (เป็นการตั้งชื่อให้กับ Layer)
4. คลิกที่ File
5. คลิกที่ Import
4 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

5. 6. คลิกที่ Import to Stage
7. ที่ Look in คลิกที่ ลูกศรลง
8. คลิกไดร์ฟที่เก็บรูปภาพ
9. ดับเบิ้ลคลิกที่ Folder ที่เก็บไฟล์รูปภาพไว้
10. คลิกที่ชื่อไฟล์ที่ต้องการ
11. คลิกที่ Open
12. คลิกที่ Modify
13. คลิกที่ Convert to Symbol
แปลงไฟล์ชนิดต่างๆ เป็น Movie Clip
14. คลิกที่ Movie Clip
15. คลิกที่ OK
16. คลิกที่ แถบเครื่องมือ Free Transform Tool
ย่อ/ขยายและย้ายรูปภาพให้พอดี
17. คลิกขวาด้านล่างเลข 50
18. คลิกที่ Insert Keyframe เพื่อก่าหนด
ระยะทางในการเคลื่อนไหวเป็น 50
19. คลิกขวาที่จุดกลม ด้านล่าง เลข 1
20. คลิกที่ Create Motion Tween
21. คลิกตรงกลางรูปภาพ
22. ดูที่ Propertise ด้านล่างจอภาพ
23. ที่ Color คลิกที่ ลูกศรลง
24. คลิกที่ Alpha ใส่ 0%
25. คลิกที่ เมนู Control
26. คลิกที่ Test Movie (หรือ กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง) เพื่อดูผลงาน
27. คลิกที่ Close ปิดการแสดงผล
28. คลิกที่จุดกลม ด้านล่าง เลข 50
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
5

6. 29. ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 0%
30. คลิกขวาที่ ด้านล่าง เลข 25
31. คลิกที่ Insert Keyframe
32. ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 100%
33. กดปุ่ม Ctrl ค้างไว้ กดปุ่ม Enter เพื่อดูผลการแสดง จะสว่างขึ้นแล้วจางลง
การแทรกรูปที่ 2
1. คลิกที่ด้านล่างรูปตาและรูปกุญแจของ Layer แรก ให้มีเครื่องหมายกากบาท เพื่อ
ล็อคและปิด Layer ไว้ ป้องกันไม่ให้ท่างานผิด layer
2. คลิกที่ แทรก Layer
3. ดับเบิ้ลคลิกที่ Layer ใหม่
4. ที่ Name พิมพ์ชื่อของ Layer
5. คลิกที่ File
6. คลิกที่ Import
7. คลิกที่ Import to Stage
8. คลิกไดร์ฟที่เก็บรูปภาพ
9. ดับเบิ้ลคลิกที่ Folder ที่เก็บไฟล์รูปภาพไว้
10. คลิกที่ชื่อไฟล์ที่ต้องการ
11. คลิกที่ Open (ถ้าหากมีค่าถามออกมาว่าต้องการใช้รูปทั้งหมดหรือไม่ ใ
ให้คลิกที่ No รูปจะออกมาเฉพาะรูปที่เลือกเพียงรูปเดียว)
12. คลิกที่ Modify
13. คลิกที่ Convert to Symbol
14. คลิกที่ Movie Clip
15. คลิกที่ OK
16. คลิกที่ แถบเครื่องมือ Free Transform Tool
ย่อ/ขยายและย้ายรูปภาพให้พอ
6 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

7. 17. คลิกขวาด้านล่างเลข 51
18. คลิกที่ Insert Keyframe เพื่อก่าหนดระยะทางในการเคลื่อนไหวเป็น 51
19. คลิกขวาที่จุดกลม ด้านล่าง เลข 1
20. คลิกที่ Create Motion Tween
21. คลิกตรงกลางรูปภาพ ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 0%
22. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้งจะแสดงรู ปภาพพร้อมกัน
23. คลิกที่ Close ปิดการแสดงผล
24. คลิกที่รูปที่ 2 ย่อให้มีข นาดเล็กลงอยู่ตรงกลางเวที กดปุ่ม Ctrl Enter
25. จะแสดงรูปที่ 1 และรูปที่ 2 จากเล็กค่อยขยายใหญ่ขึ้นมา (*** ย้ายรูปภาพไปวาง
ในต่าแหน่งที่ต้องการ รูปภาพก็จะออกมาจากต่าแหน่งนั้น ๆ ***)
26. คลิกที่ File
27. คลิกที่ Save As
28. ที่ File Name ใส่ชื่อไฟล์ (ควรเป็นชื่อที่เกี่ยวกับงานนั้น ๆ)
29. คลิกที่ Save (เป็นการจัดเก็บไฟล์เพื่อน่าไปแก้ไขเปลี่ยนแปลงภายหลัง )
30. คลิกที่ File คลิกที่ Export คลิกที่ Export Movie
31. ที่ File Name ใส่ชื่อไฟล์ (ต้องเป็นภาษาอังกฤษ เพื่อน่าไปใช้บนเว็บ)
32. คลิกที่ Save (ไฟล์ชนิดนี้แก้ไขไม่ได้)
3. การแทรกรูป Animation ผู้เรียนได้เรียนรู้เกี่ยวกับ การแทรกรูปภาพที่มีลักษณะเป็น
ภาพเคลื่อนไหวที่ท่ามาจาก Image Ready โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์ชื่อนก
4. คลิกที่ Insert
5. คลิกที่ New Symbol
6. ที่ Name พิมพ์ค่าว่า birds
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
7

8. 7. คลิกที่ OK
8. คลิกที่ File
9. คลิกที่ Import
10. คลิกที่ Import to Stage
11. ที่ Look in คลิกที่ ลูกศรลง
12. คลิกที่ ไดร์ฟ D
13. ดับเบิ้ลคลิกที่ Folder ที่เก็บรูปภาพของนกไว้
14. คลิกที่ ไฟล์ชื่อ birds
15. คลิกที่ Open
16. คลิกที่ Windows
17. คลิกที่ Library
18. คลิกที่ birds
19. คลิกที่ Scene1
20. คลิกที่ รูปนก
21. แดร็กลากมาวางด้านล่างซ้ายของเวที
22. คลิกขวาที่ด้านล่างเลข 60
23. คลิกที่ Insert Keyframe
24. คลิกขวาที่ด้านล่างเลข 1
25. คลิกที่ Create Motion Tween
26. คลิกที่จุดกลมด้านล่างเลข 60
27. แดร็กลากรูปนกในเวทีไปไว้บนมุมขวา
28. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง เพื่อดูผล
29. คลิกที่ Close ปิดการแสดงผล
30. คลิกขวาที่ด้านล่างเลข 15
31. คลิกที่ Insert Keyframe
8 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

9. 32. แดร็กลากรูปนกไปไว้ตรงกลางด้านล่างเวที
33. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง เพื่อดูผล
34. คลิกที่ Close ปิดการแสดงผล
35. คลิกขวาที่ด้านล่างเลข 45
36. คลิกที่ Insert Keyframe
37. แดร็กลากรูปนกไปไว้ตรงกลางด้านบนเวที
38. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง
เพื่อดูผล นกจะบินในลักษณะดังนี้
4
3
1 2
4. การแทรกข้อความ ผู้เรียนได้เรียนรู้เกี่ยวกับการแทรกหรือการพิมพ์ข้อความแล้วน่า
เทคนิคการท่าภาพเคลื่อนไหวมาใส่เพื่อความสวยงาม โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์ค่าว่าพื้นหลัง
4. คลิกที่ File
5. คลิกที่ Import
6. คลิกที่ Import to Stage
7. ที่ Look in คลิกที่ ลูกศรลง
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
9

10. 8. คลิกที่ ไดร์ฟ D
9. ดับเบิ้ลคลิกที่ Folder ที่เก็บรูปภาพไว้
10. คลิกที่ ไฟล์รูปภาพที่ต้องการ
11. คลิกที่ Open
12. คลิกที่ Modify
13. คลิกที่ Convert to Symbol
14. คลิกที่ Movie Clip
15. คลิกที่ OK
16. คลิกที่ แถบเครื่องมือ Free Transform Tool
17. ย่อ/ขยายและย้ายรูปภาพให้พอดีกับเวที
18. คลิกขวาด้านล่างเลข 50
19. คลิกที่ Insert Keyframe เพื่อก่าหนดระยะทางในการเคลื่อนไหวเป็น 50
20. คลิกขวาที่จุดกลม ด้านล่าง เลข 1
21. คลิกที่ Create Motion Tween
22. คลิกในรูปภาพ
23. ที่ Color ด้านล่าง คลิกที่ ลูกศรลง
24. คลิกที่ Alpha ใส่ 0%
25. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง จะแสดงรูปพื้นหลัง
26. คลิกที่ Close ปิดการแสดงผล
27. คลิกที่ Insert Layer
28. ดับเบิ้ลคลิกที่ Layer แรก
29. ที่ Name พิมพ์ค่าว่าดอย
30. คลิกที่ แถบเครื่องมือ Text Tool
31. คลิกตรงกลางเวที พิมพ์ค่าว่า ดอยสุเทพเป็นศรี
10 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

11. 32. คลุมด่าที่ข้อความ ก่าหนดแบบอักษร ขนาดและสี
33. คลิกที่ แถบเครื่องมือ Free Transform Tool
34. ขยายข้อความให้ใหญ่ย้ายไว้ในต่าแหน่งด้านล่างเวที
35. คลิกขวาด้านล่างเลข 60 ของ layer ดอย
36. คลิกที่ Insert Keyframe เพื่อก่าหนดระยะทางในการเคลื่อนไหวเป็น 60
37. คลิกขวาที่จุดกลม ด้านล่าง เลข 1 ของ layer ดอย
38. คลิกที่ Create Motion Tween
39. คลิกที่ข้อความ ย่อให้เล็กลงแล้วแดร็กลากไปไว้ด้านบนเวที
40. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้งจะแสดงพื้นหลังและข้อความแรก
41. คลิกที่ Close ปิดการแสดงผล
***** ให้ แทรก Layer อีก 3 Layer พิมพ์คาขวัญของจังหวัดเชียงใหม่ คือ ประเพณีเป็น
สง่า บุปผชาติล้วนงามตา นามล้าค่านครพิงค์ ***** จัดเก็บไฟล์ให้เรียบร้อย
5. การแทรกเสียงเพลง ผู้เรียนได้เรียนรู้เกี่ยวกับการแทรกหรือใส่เสียงเพลงใน
ภาพกราฟิกให้เพิ่มเสียงเข้ามาอีกรูปแบบหนึ่ง โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์ค่าว่า รูปวิว
4. คลิกที่ File คลิกที่ Import คลิกที่ Import to Stage
5. ที่ Look in คลิกที่ ลูกศรลง
6. คลิกที่ ไดร์ฟ D
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
11

12. 7. ดับเบิ้ลคลิกที่ Folder ที่เก็บรูปภาพไว้
8. คลิกที่ ชื่อไฟล์ที่ต้องการ
9. คลิกที่ Open
10. คลิกที่ Modify
11. คลิกที่ Convert to Symbol
12. คลิกที่ Movie Clip
13. คลิกที่ OK
14. คลิกที่ แถบเครื่องมือ Free Transform Tool
15. ย่อ/ขยายและย้ายรูปภาพให้พอดีกับเวที
16. คลิกขวาด้านล่างเลข 50
17. คลิกที่ Insert Keyframe เพื่อก่าหนดระยะทางในการเคลื่อนไหวเป็น 50
18. คลิกขวาที่จุดกลม ด้านล่าง เลข 1
19. คลิกที่ Create Motion Tween
20. คลิกในรูปวิว
21. ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 0%
22. คลิกที่ Insert Layer
23. ดับเบิ้ลคลิกที่ Layer ที่แทรกใหม่
24. ที่ Name พิมพ์ค่าว่า เพลง
25. คลิกที่ File คลิกที่ Import คลิกที่ Import to Library
26. ที่ Look in คลิกที่ ลูกศรลง
27. คลิกที่ ไดร์ฟ D
28. ดับเบิ้ลคลิกที่ Folder ที่เก็บไฟล์เพลงไว้
29. คลิกที่ ชื่อไฟล์ที่ต้องการ
30. คลิกที่ Open
31. คลิกที่ Window
12 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

13. 32. คลิกที่ Library
33. คลิกที่ชื่อเพลง
34. คลิกที่ สัญลักษณ์ เพลง
35. แดร็กลากลงมาใส่ในเวที
36. คลิกที่ด้านล่างเลข 48 ของ Layer เพลง
37. กดปุ่มฟังก์ชัน F6 เพื่อก่าหนดจุดจบของเพลง
38. ดูที่ Propertise ด้านล่าง
39. ที่ Sond คลิกที่ ลูกศรลง
40. คลิกที่ชื่อเพลง
41. ที่ Sync: คลิกที่ ลูกศรลง
42. คลิกที่ Stop
43. คลิกที่ด้านล่างเลข 1
44. ดูที่ Propertise ด้านล่างที่ Sond คลิกที่ ลูกศรลง
45. คลิกที่ชื่อเพลง
46. ที่ Sync: คลิกที่ ลูกศรลง
47. คลิกที่ Start
48. กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้งจะแสดงรูปวิวและเสียงเพลง
49. จัดเก็บไฟล์ให้เรียบร้อย
6. การท่า highlight ผู้เรียนได้เรียนรู้เกี่ยวกับ การใส่เอฟเฟ็กต์ให้กับข้อความเพื่อให้ดูดีมี
ความโดดเด่นแปลกตา โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. คลิกที่ Size:
3. ใส่ 350 ที่ (width) และ 100 ที่ (height)
4. ที่ Background color: คลิกเลือกขาว
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
13

14. 5. ที่ Frame rate : ใส่ 15
6. คลิกที่ Ok
7. ดับเบิ้ลคลิกที่ Layer แรก
8. ที่ Name พิมพ์ค่าว่า ข้อความ
9. คลิกที่ แถบเครื่องมือ Text Tool
10. แดร็กลากให้พอดี พิมพ์ ค่าว่า โปรแกรม Flash 8
11. คลุมด่าที่ข้อความ ก่าหนดแบบอักษร ขนาดและสี
12. คลิกที่ แถบเครื่องมือ Free Transform Tool
13. ขยายข้อความให้ใหญ่ย้ายไว้ตรงกลางเวที
14. คลิกขวาด้านล่างเลข 60 ของ layer ข้อความ
15. คลิกที่ Insert Keyframe เพื่อก่าหนดระยะทางในการเคลื่อนไหวเป็น 60
16. คลิกด้านล่างตรงจุดกลมสีขาวที่รูปกุญแจของLayerข้อความเพื่อล็อคLayer นี้ไว้
17. คลิกที่ Insert Layer
18. ดับเบิ้ลคลิกที่ Layer ใหม่
19. ที่ Name พิมพ์ค่าว่า ไฮไล้ท์
20. คลิกที่แถบเครื่องมือ Oval Tool
21. แดร็กวาดวงกลมขนาดใหญ่กว่าข้อความไว้ด้านนอกเวที
22. คลิกที่แถบเครื่องมือ Selection
23. แดร็กคลุมรูปวงกลม
24. คลิกที่ Fill color
25. คลิกที่สีรุ้ง หรือสีอื่น ๆ
26. คลิกขวาด้านล่างเลข 60 ของ Layer ไฮไล้ท์
14 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

15. 27. คลิกที่ Insert Keyframe
28. คลิกขวาด้านล่างเลข 1 ของ Layer ไฮไล้ท์
29. คลิกที่ Creat Motion Tween
30. คลิกที่ด้านล่างเลข 60 ของ Layer ไฮไล้ท์
31. แดร็กลากจุดกลมสีรุ้งไปวางไว้ด้านหลังข้อความ ด้านนอกเวที
32. คลิกด้านล่างตรงจุดกลมสีขาวที่รูปตาและรูปกุญแจของLayer ไฮไล้ท์
33. คลิกที่ Insert Layer
34. คลิกที่ Layer ข้อความ ให้มีแถบสีด่าคลุมตลอดเฟรม
35. คลิกขวาด้านล่างเลข 1 ของ Layer ข้อความ
36. คลิกที่ Copy Frames
37. คลิกที่ Layer ที่แทรกใหม่ ให้มีแถบสีด่าคลุมตลอดเฟรม
38. คลิกขวาด้านล่างเลข 1 ของ Layer ที่แทรกใหม่
39. คลิกที่ Paste Frames
40. คลิกขวาที่ layer ที่คัดลอกมาใหม่
41. คลิกที่ Mask
42. กดปุ่ม Ctrl ค้างไว้ กดปุ่ม Enter
43. คลิกที่ Close ปิดการแสดงผล
44. จัดเก็บไฟล์ให้เรียบร้อย
7. การทา spot light ผู้เรียนได้เรียนรู้เกี่ยวกับ การก่าหนดจุดเด่นให้กับรูปภาพที่มี
ลักษณะเป็นแสงไฟส่องไปยังต่าแหน่งที่ต้องการ โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์ค่าว่า รูปภาพ
4. คลิกที่ File คลิกที่ Import คลิกที่ Import to Stage
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
15

16. 5. ที่ Look in คลิกที่ ลูกศรลง
6. คลิกที่ ไดร์ฟ D
7. ดับเบิ้ลคลิกที่ Folder ที่เก็บรูปภาพไว้
8. คลิกที่ ชื่อไฟล์ที่ต้องการ
9. คลิกที่ Open
10. คลิกที่ Modify
11. คลิกที่ Convert to Symbol
12. คลิกที่ Movie Clip
13. คลิกที่ OK
14. คลิกที่ แถบเครื่องมือ Free Transform Tool
15. ย่อ/ขยายและย้ายรูปภาพให้พอดีกับเวที
16. คลิกขวาด้านล่างเลข 70
17. คลิกที่ Insert Keyframe
18. คลิกที่ Insert Layer
19. ดับเบิ้ลคลิกที่ Layer ที่แทรกใหม่
20. พิมพ์ค่าว่า spotlight
21. คลิกที่แถบเครื่องมือ Oval Tool
22. แดร็กวาดวงกลมบริเวณใบหน้านางแบบ
23. คลิกที่แถบเครื่องมือ Selection
24. แดร็กคลุมรูปวงกลม
25. คลิกขวาด้านล่างเลข 71
26. คลิกที่ Insert Keyframe
27. คลิกขวาที่จุดกลมด้านล่างเลข 1
28. คลิกที่ Creat Motion Tween
29. คลิกขวาด้านล่างเลข 25
16 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

17. 30. คลิกที่ Insert Keyframe
31. แดร็กลากรูปวงกลมลงมาด้านล่าง
32. คลิกที่ แถบเครื่องมือ Free Transform Tool
33. ย่อรูปให้เล็กลง ท่าเป็นวงรี หรือท่าการหมุน
34. คลิกขวาด้านล่างเลข 45
35. คลิกที่ Insert Keyframe
36. แดร็กลากรูปวงกลมขึ้นไปไว้มุมบนขวา
37. ย่อให้เล็กลง
38. คลิกขวาที่ Layer spotlight
39. คลิกที่ Mask
40. คลิกที่จุดกลมด้านล่างเลข 71
41. แดรกลากมาที่ 65 เพื่อให้ Spotlight หยุดนิ่งนิดหนึ่ง
42. กดปุ่ม Ctrl ค้างไว้ และ กดปุ่ม Enter เพื่อดูผลงาน
43. จัดเก็บให้เรียบร้อย
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
17

18. โปรแกรม Macromedia Flash 8 แบบฝึกหัดท้ายบทเรียน
1. ให้เขียนขั้นตอนการลงโปรแกรม Macromedia Flash 8
(10 คะแนน)
2. ให้สร้างไฟล์กราฟิกที่มีพื้นหลังเป็นรูปของผู้เรียน พิมพ์ชื่อใส่ High Light ที่ชื่อ
ของผู้เรียน และใส่ดอกไม้ข นาดต่าง ๆ จ่านวน 4 ดอก ให้ออกมาจาก 4 มุม
(10 คะแนน)
3. ให้สร้างไฟล์กราฟิกที่มีพื้นหลังเป็นวิวสวยงาม มีเสียงเพลง และมีรูปภาพที่เป็น
Animation เช่น รูปผีเสื้อ รูปค้างคาว รูปนก ฯลฯ
(5 คะแนน)
4. ให้สร้างไฟล์กราฟิกที่มีพื้นหลังเป็นรูปผู้เรียน ใส่ Spot Light จ่านวน 10 จุด และ
ให้จุดหยุดอยู่ที่ใบหน้าของรูปภาพ
(5 คะแนน)
18 การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ