1. โปรแกรม Flash Effect Maker
ในบทที่ 3 โปรแกรม Flash Effect Maker เป็นโปรแกรมที่ใช้ในการสร้า งไฟล์
กราฟิกที่สวยงามและยังสามารถนาเอาไฟล์ชนิด swf ที่สร้า งจากโปรแกรม Flash 8 ซึ่งมี
ขั้นตอนซับซ้อน มาใช้ต ามค าสั่งที่ได้กาหนดไว้ในโปรแกรม Flash Effect Maker ทาให้
สามารถสร้างงานกราฟฟิกที่สวยงามได้ในเวลาอันสั้นด้ว ยวิธีการขั้นตอนที่ง่า ย เช่น การ
ใส่พื้นหลั งสามารถเลือกได้ห ลากหลายรูปแบบ ใส่ข้ อความ และทาสไลด์โชว์ ได้อย่า ง
รวดเร็วและสวยงาม โดยเฉพาะการออกแบบหน้า เว็บเพจสามารถเลือกประเภทได้อย่า ง
เหมาะสม มีการเชื่อมโยงโดยมีปุ่ม ให้เลือกหลายรูป แบบ ในบทเรี ยนนี้ใช้เ วลาเรีย น
ทั้งหมด 13 ชั่วโมง แบ่งเป็นทฤษฎี 3 ชั่วโมง ปฏิบัติ 10 ชั่วโมง รวม 4 วัน 1 ชั่วโมง
ผู้สอนได้กาหนดให้ผู้เรียนได้เรียนรู้ตามหัว ข้อย่อยแต่ละเรื่องซึ่งมีทั้งหมด 4
เรื่อง เพื่อให้ผู้เรียนได้มีความรู้ สามารถปฎิบัติตามบทเรียนและทาแบบฝึกหัด ท้า ยบทเรียน
ได้ ตามรายละเอียดดังนี้
1. ความรู้เบื้องต้น (Introduction) ได้แก่ ความสาคัญ ความหมาย การติด ตั้ง การเปิด -ปิด
ส่วนประกอบของโปรแกรม ตลอดจนการจัดเก็บไฟล์ในรูปแบบต่าง ๆ ดังนี้
การใช้โปรแกรมกราฟิกเพื่อพัฒนาเว็บเพจ

2. 1.1. การติดตั้งโปรแกรม
1.1.1. ให้คัดลอก(Copy) โดยการแดร็กลาก Folder ชื่อ Flash Effect Maker จาก
แผ่นซีดี ที่ผู้สอนแจกให้ ไปใส่ในเครื่องคอมพิว เตอร์ของผู้เรียน
1.1.2. ดับเบิ้ลคลิกที่ Folder ชื่อ Flash Effect Maker
1.1.3. คลิกขวาที่ไฟล์ชื่อ Flash Effect Maker
1.1.4. คลิกที่ send to Desktop
1.2. การเปิดใช้งานโปรแกรม
ดับเบิ้ลคลิกที่ Shortcut โปรแกรม Flash Effect Maker บน Desktop
1.3. ส่วนประกอบต่า ง ๆ ของโปรแกรม
1.3.1. เมนูบาร์ด้านข้าง หมายถึงการใช้ข้อความเป็นคาสั่งทีจะนาไปใช้กับการ
สร้างงานกราฟิก ซึ่งจะอยู่ทางด้านซ้าย
1.3.2. เมนูบาร์ด้านบน หมายถึง การใช้ข้อความเป็นคาสั่งในการเลือกประเภท
ของการออกแบบหน้าเว็บเพจ เช่น Bussiness Personal Nature Line
Panel HTML/Navigation เป็นต้น เมื่อมีการคลิกเลือกแต่ละประเภทจะ
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

3. แสดงรูปแบบให้เลือกใช้อย่างหลากหลาย คลิกที่แบบแต่ละแบบจะแสดง
ตัวอย่างให้ดู ซึ่งเป็นข้อดีของโปรแกรมนี้ที่ช่วยออกแบบอย่างมืออาชีพ
1.4. เริ่มต้นสร้างงานใหม่
1.4.1. คลิกเลือกแบบที่ต้องการ
1.4.2. คลิกที่ Create New
1.4.3. กาหนดค่าต่าง ๆ เช่น ความกว้าง ความยาว ลักษณะ Mouse เป็นต้น
1.4.4. คลิกที่ OK
2. การทา Banner ผู้เรียนได้เรียนรู้เกี่ยวกับ การพิมพ์ข้อควมและใส่เอฟเฟ็กต์ต่างๆ
ให้กับข้อความ เพื่อให้ข้อความมีความสวยงาม โดยมีขั้นตอนดังต่อไปนี้
2.1. คลิกที่ Banner
2.2. คลิกเลือกแบบ Banner26
การใช้โปรแกรมกราฟิกเพื่อพัฒนาเว็บเพจ

4. 2.3. คลิกที่ Flash Templates
2.4. คลิกที่ Edit
2.5. ที่ Text Option พิมพ์คาว่า วิทยาลัยสารพัดช่างเชียงใหม่
2.6. คลิกที่ Font
2.7. ดับเบิ้ลคลิกที่ Font
2.8. กาหนดค่าต่าง ๆ ตามนี้
2.9. เสร็จแล้ว คลิกที่ OK
2.10. คลิกที่ Shadow&Border กาหนดค่า
2.11. คลิกที่ Animated Effect กาหนดค่า ตามรูป
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

5. 2.12. คลิกที่ FlyIn&FlyOut Effect กาหนดค่า ตามรูป
2.13. คลิกที่ OK
2.14. คลิกที่ MovieClip3
2.15. คลิกที่ Edit
2.16. คลิกที่ Change เมื่อต้องการเปลี่ยนรูปภาพ
การใช้โปรแกรมกราฟิกเพื่อพัฒนาเว็บเพจ

6. 2.17. คลิกเลือกรูปที่ต้องการ สามารถดูการแสดงผลของรูปภาพ ที่ด้านขวา
2.18. คลิกที่ Add เมื่อต้องการเพิ่มรูปภาพ (ในการเพิ่มรูปภาพ สามารถเพิ่มรูปได้
ทั้งหมด 5 รูป และต้องเพิ่มรูปบนสุดเป็นรูปเล็ก ๆ หรือรูปหยดน้า รูปดาว
และรูปถัด มาเรื่อย ๆ ให้รูปใหญ่สุดอยู่ด้านล่างสุด จัดเรียงรูปลักษณะ
เหมือนปิรามิด จากล่างขึ้นไปหาบน)
2.19. คลิกที่ OK
2.20. คลิกที่ OK
2.21. คลิกที่ Save SWF/HTML ใส่ชื่อไฟล์
2.22. คลิกที่ Save (เก็บไว้เพื่อนาไปใช้ในเว็บเพจ)
2.23. คลิกที่ Save Project ใส่ชื่อไฟล์
2.24. คลิกที่ Save (เก็บไว้เพื่อใช้ในการแก้ไขเปลี่ยนแปลง) โดยใช้คาสั่ง Load
Project เพื่อเปิดไฟล์มาแก้ไขต่อไป
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

7. 3. การทา SlideShow ผู้เรียนได้เรียนรู้เกี่ยวกับ การนารูปภาพต่าง ๆ มาจัดทาเป็น เป็น
สไลด์โชว์ที่สามารถใส่เอฟเฟ็กต์ให้กับรูปภาพได้อย่างเหมาะสมสาวยงาม เหมาะ
สาหรับงานด้านนาเสนอรูปภาพต่าง ๆ เป็นอย่างดี โดยมีขั้นตอนดังต่อไปนี้
3.1. คลิกที่ Slide Show
3.2. คลิกเลือกแบบ photoalbumborder10
3.3. คลิกในกรอบ Slide show
3.4. ที่ Resize สามารถ แดร็กลากเข้าหรือออก เพื่อย่อ/ขยายขนาดของสไลด์ โชว์
3.5. คลิกที่ Edit
3.6. คลิกที่ Add Photo File
3.7. คลิกที่ Remove All (หมายถึง ลบรูปภาพเดิมออกให้หมด)
การใช้โปรแกรมกราฟิกเพื่อพัฒนาเว็บเพจ

8. 3.8. คลิกที่ Add New (หมายถึงแทรกรูปภาพใหม่)
3.9. คลิกที่ Border (เพื่อเลือกกรอบใหกับ Slide Show)
3.10. เลือกรูปแบบการแสดงผลเมื่อเปลี่ยนรูปแต่ละรูป
3.11. คลิกที่ OK (รูปจะแสดงทีละรูปโดยเรียงจากรูปแรกถึงรูปสุดท้าย หาก
ต้องการดูรูปใด ๆ ให้คลิกที่รูปในกรอบเล็ก ๆ รูปนั้น จะแสดงทันที)
3.12. คลิกที่ Save SWF/HTML ใส่ชื่อไฟล์
3.13. คลิกที่ Save (เก็บไว้เพื่อนาไปใช้ในเว็บเพจ)
3.14. ให้ Save Project ไว้ทุกครั้ง เพื่อแก้ไขได้
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

9. 4. การสร้างหน้าเว็บเพจด้วย HTML/Navigation
4.1. คลิกที่ HTML/Navigation
4.2. คลิกเลือกแบบ background24
4.3. คลิกที่ ข้อความ
4.4. คลิกที่ Edit
4.5. ที่ Text Option พิมพ์คาว่า ยินดีต้อนรับ Well come
4.6. กาหนดค่าให้กับข้อความตามต้องการ
4.7. คลิกที่ Button
4.8. คลิกที่ Edit
4.9. คลิกที่ [Button1] Link1
4.10. คลิกที่ On Click Goto Link (* ถ้าไม่ได้คลิกหัวข้อนี้จะไม่สามารถพิมพ์ชื่อ
ไฟล์เว็บเพจได้ *)
4.11. ที่ Caption: พิมพ์คาว่า เข้าสู่เมนูหลัก
การใช้โปรแกรมกราฟิกเพื่อพัฒนาเว็บเพจ

10. 4.12. ที่ Link พิมพ์ ชื่อไฟล์เว็บเพจที่สร้างขึ้น ในที่นี้ให้พิมพ์ main.html
4.13. ที่ Style:Button 12 ให้คลิกที่ Change
4.14. คลิกเลือกแบบ Button ตามที่ต้องการ
4.15. คลิกที่ OK
4.16. คลิกที่ [Button2] Link2
4.17. คลิกที่ On Click Goto Link (* ถ้าไม่ได้คลิกหัวข้อนี้จะไม่สามารถพิมพ์ชื่อ
ไฟล์เว็บเพจได้ *)
4.18. ที่ Caption: พิมพ์คาว่า ทักทายเจ้าของเว็บ
4.19. ที่ Link พิมพ์ ชื่อไฟล์เว็บเพจที่สร้างขึ้น ในที่นี้ให้พิมพ์ mystory.html
4.20. ที่ Style:Button 12 ให้คลิกที่ Change
4.21. คลิกเลือกแบบ Button ตามที่ต้องการ หรือเลือกเหมือนกับ Button1
4.22. คลิกที่ OK
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ

11. 4.23. คลิกที่ [Button3] Link3
4.24. คลิกที่ Remove
4.25. คลิกที่ [Button4] Link4
4.26. คลิกที่ Remove (หากต้องการเพิ่ม Button คลิกที่ Add Button
ด้านล่าง )
4.27. คลิกที่ Font
4.28. กาหนดค่าต่าง ๆ ดังรูป (ถ้าพิมพ์ภาษาไทยต้องเลือกแบบอักษรที่แสดง
ภาษาไทยได้)
4.29. คลิกที่ OK
4.30. คลิกที่ OK
4.31. คลิกที่ Save SWF/HTML ใส่ชื่อไฟล์
4.32. คลิกที่ Save (เก็บไว้เพื่อนาไปใช้ในเว็บเพจ)
4.33. คลิกที่ Save Project ใส่ชื่อไฟล์
4.34. คลิกที่ Save (เก็บไว้เพื่อแก้ไขเปลี่ยนแปลงต่อไป)
การใช้โปรแกรมกราฟิกเพื่อพัฒนาเว็บเพจ

12. แบบฝึกหัดท้ายบทเรียน
1. ให้ทา Banner ข้อความต่อไปนี้
1.1. ข้อความ “ชื่อ-สกุลของผู้เรียน”
1.2. ข้อความ “สมาชิก (Member)”
(5 คะแนน)
2. ให้ทาสไลด์โชว์รูปภาพต่าง ๆ 20 รูป
(5 คะแนน)
3. ให้ออกแบบเว็บเพจดังนี้
3.1. หน้าแรกชื่อ index.html
3.2. หน้าสองชื่อ member.html โดยให้เชื่อมโยงหากันได้
(10 คะแนน)
การใช้โปรแกรมกราฟฟิกเพื่อพัฒนาเว็บเพจ