กราฟิกเพื่อพัฒนาเว็บเพจ

1. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
1
โปรแกรม Macromedia Flash Professional 8 ซึ่งความสามารถที่หลากหลายของ
โปรแกรมนั้นนับวันจะถูกพัฒนาให้มีความซับซ้อนมากขึ้น แต่ยังคงเนื้อหาให้ตัวโปรแกรมมีความ
แตกต่างจากเวอร์ชั่นที่ผ่านมาน้อยที่สุด เพื่อให้ผู้ที่ใช้งานได้อย่างสะดวกไม่ต้องเสียเวลาเริ่มต้นใหม่
แต่สิ่งหนึ่งที่ผู้ใช้งานจะต้องเรียนรู้ใหม่อย่างสม่าเสมอนั่นก็คือเทคนิคการเคลื่อนไหวชนิดต่าง ๆ ที่
โปรแกรมนี้ทาได้(หรือเรียกสั้น ๆ ว่า เอฟเฟ็กต์) ซึ่งทุกรายละเอียดการเคลื่อนไหวนั้นจะมีความ
แตกต่างกันออกไปตามชิ้นงานที่ได้สร้างเอาไว้บางเอฟเฟ็กต์ที่คิดว่าง่ายแต่เวลาทาจริงยากกว่าที่คิด
หรือบางเอฟเฟ็กต์ที่คิดว่าทายากแต่ตอนลงมือทาง่ายนิดเดียว ด้วยเหตุนี้เอง Flash Workshop จึงได้
ถือกาเนิดมาในแวดวงการเคลื่อนไหวบนเว็บอีกครั้ง
ความรู้เบื้องต้น (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

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

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

4. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ4
7. ที่ Look in คลิกที่ ลูกศรลง
8. คลิกไดร์ฟที่เก็บรูปภาพ
9. ดับเบิ้ลคลิกที่ Folder ที่เก็บไฟล์รูปภาพไว้
10.คลิกที่ชื่อไฟล์ที่ต้องการ
11.คลิกที่ Open
12.คลิกที่ Modify
13.คลิกที่ Convert to Symbol
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
29.ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 0%
30.คลิกขวาที่ ด้านล่าง เลข 25
31. คลิกที่ Insert Keyframe
แปลงไฟล์ชนิดต่างๆ เป็น Movie Clip

5. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
5
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
ย่อ/ขยายและย้ายรูปภาพให้พอ
17.คลิกขวาด้านล่างเลข 51
18.คลิกที่ Insert Keyframe เพื่อกาหนดระยะทางในการเคลื่อนไหวเป็น 51
19.คลิกขวาที่จุดกลม ด้านล่าง เลข 1
20.คลิกที่ Create Motion Tween
21.คลิกตรงกลางรูปภาพ ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 0%

6. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ6
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 (ไฟล์ชนิดนี้แก้ไขไม่ได้)
2. การแทรกรูป Animation ผู้เรียนได้เรียนรู้เกี่ยวกับการแทรกรูปภาพที่มีลักษณะเป็น
ภาพเคลื่อนไหวที่ทามาจาก Image Ready โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์ชื่อนก
4. คลิกที่ Insert
5. คลิกที่ New Symbol
6. ที่ Name พิมพ์คาว่า birds
7. คลิกที่ OK
8. คลิกที่ File
9. คลิกที่ Import
10.คลิกที่ Import to Stage
11.ที่ Look in คลิกที่ ลูกศรลง
12.คลิกที่ ไดร์ฟ D
13.ดับเบิ้ลคลิกที่ Folder ที่เก็บรูปภาพของนกไว้

7. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
7
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
32.แดร็กลากรูปนกไปไว้ตรงกลางด้านล่างเวที
33.กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง เพื่อดูผล
34.คลิกที่ Close ปิดการแสดงผล
35.คลิกขวาที่ด้านล่างเลข 45
36.คลิกที่ Insert Keyframe
37.แดร็กลากรูปนกไปไว้ตรงกลางด้านบนเวที
38.กดปุ่ม Ctrl ค้างไว้ กด Enter 1 ครั้ง
เพื่อดูผล นกจะบินในลักษณะดังนี้
4

8. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ8
3. การแทรกข้อความ ผู้เรียนได้เรียนรู้เกี่ยวกับการแทรกหรือการพิมพ์ข้อความแล้วนาเทคนิค
การทาภาพเคลื่อนไหวมาใส่เพื่อความสวยงาม โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์คาว่าพื้นหลัง
4. คลิกที่ File
5. คลิกที่ Import
6. คลิกที่ Import to Stage
7. ที่ Look in คลิกที่ ลูกศรลง
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
1 2
3

9. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
9
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. คลิกตรงกลางเวที พิมพ์คาว่า ดอยสุเทพเป็นศรี
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 ปิดการแสดงผล

10. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ10
***** ให้ แทรก Layer อีก 3 Layer พิมพ์คาขวัญของจังหวัดเชียงใหม่ คือ ประเพณีเป็นสง่า บุปผ
ชาติล้วนงามตา นามล้าค่านครพิงค์ ***** จัดเก็บไฟล์ให้เรียบร้อย
4. การแทรกเสียงเพลง ผู้เรียนได้เรียนรู้เกี่ยวกับการแทรกหรือใส่เสียงเพลงในภาพกราฟิกให้
เพิ่มเสียงเข้ามาอีกรูปแบบหนึ่ง โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์คาว่า รูปวิว
4. คลิกที่ File คลิกที่ Import คลิกที่ Import to Stage
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. คลิกขวาด้านล่างเลข 50
17. คลิกที่ Insert Keyframe เพื่อกาหนดระยะทางในการเคลื่อนไหวเป็น 50
18. คลิกขวาที่จุดกลม ด้านล่าง เลข 1
19. คลิกที่ Create Motion Tween
20. คลิกในรูปวิว
21. ที่ Color คลิกที่ ลูกศรลง คลิกที่ Alpha ใส่ 0%

11. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
11
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
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 ครั้งจะแสดงรูปวิวและเสียงเพลง

12. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ12
49. จัดเก็บไฟล์ให้เรียบร้อย
5. การทา highlight ผู้เรียนได้เรียนรู้เกี่ยวกับการใส่เอฟเฟ็กต์ให้กับข้อความเพื่อให้ดูดีมีความ
โดดเด่นแปลกตา โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. คลิกที่ Size:
3. ใส่ 350 ที่ (width) และ 100 ที่ (height)
4. ที่ Background color: คลิกเลือกขาว
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

13. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
13
21.แดร็กวาดวงกลมขนาดใหญ่กว่าข้อความไว้ด้านนอกเวที
22.คลิกที่แถบเครื่องมือ Selection
23.แดร็กคลุมรูปวงกลม
24.คลิกที่ Fill color
25.คลิกที่สีรุ้ง หรือสีอื่น ๆ
26.คลิกขวาด้านล่างเลข 60 ของ Layer ไฮไล้ท์
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.จัดเก็บไฟล์ให้เรียบร้อย

14. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ14
6. การทา spot light ผู้เรียนได้เรียนรู้เกี่ยวกับการกาหนดจุดเด่นให้กับรูปภาพที่มีลักษณะเป็น
แสงไฟส่องไปยังตาแหน่งที่ต้องการ โดยมีขั้นตอนดังต่อไปนี้
1. คลิกที่ File คลิกที่ New คลิกที่ Flash document คลิกที่ Ok
2. ดับเบิ้ลคลิกที่ Layer แรก
3. ที่ Name พิมพ์คาว่า รูปภาพ
4. คลิกที่ File คลิกที่ Import คลิกที่ Import to Stage
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

15. การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ
15
26.คลิกที่ Insert Keyframe
27.คลิกขวาที่จุดกลมด้านล่างเลข 1
28.คลิกที่ Creat Motion Tween
29.คลิกขวาด้านล่างเลข 25
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.จัดเก็บให้เรียบร้อย