การสร้างภาพเคลื่อนไหว บทที่ 3 การสร้างภาพเคลื่อนไหว

จุดประสงค์การเรียนรู้ สาระการเรียนรู้ 1. การใช้โปรแกรม Adobe Photoshop 2. การใช้โปรแกรม Swish จุดประสงค์การเรียนรู้ เมื่อนักเรียนจบหน่วยการเรียนรู้ที่ 3 แล้วนักศึกษาสามารถ 1. อธิบายขั้นตอนการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Adobe Photoshop ได้ 2. อธิบายขั้นตอนการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Swish ได้ 3. ปฏิบัติตามขึ้นตอนต่าง ๆ ดังกล่าวข้างต้นได้

การสร้างภาพเคลื่อนไหว ในการเขียนเว็บเพจ จำเป็นที่จะต้องมีภาพเคลื่อนไหวประกอบ เพื่อให้เว็บเพจน่าสนใจยิ่งขึ้น ซึ่งภาพเคลื่อนไหวต่าง ๆ ส่วนใหญ่จะเป็นแบนเนอร์ (Banner) ซึ่งอาจจะนำมาวางไว้ในส่วนบนของเว็บ (Header) หรือส่วนต่างๆ ที่จะสื่อให้ผู้เข้าชมเว็บได้มองเห็นได้ง่ายและเป็นที่สะดุดตา

การใช้โปรแกรม Adobe Photoshop 1. คลิก File  New  เพื่อกำหนดขนาด เช่น 600X100 pixels  กดปุ่ม OK

การใช้โปรแกรม Adobe Photoshop 2. คลิกที่รูปเครื่องมือ Paint Bucket Tool  คลิกสีที่ต้องการ  OK

5. สังเกตที่กรอบเลเยอร์จะปรากฎดังนี้ การใช้โปรแกรม Adobe Photoshop 3. คลิกที่รูปเครื่องมือ Type Tool  คลิกสีที่ต้องการ  คลิกบริเวณพื้นงาน  พิมพ์ข้อความที่ต้องการ (เช่น WELCOME)  คลิกที่รูปเครื่องมือ Move Tool  ย้ายตัวอักษรให้ตรงตำแหน่งที่ต้องการ 4. ทำขั้นตอนที่ 3 จนครบตามต้องการ (เช่น พิมพ์ข้อความว่า TO MY WEBSITE) แล้วปรับขนาดและรูปแบบตัวอักษรที่ต้องการ 5. สังเกตที่กรอบเลเยอร์จะปรากฎดังนี้

การใช้โปรแกรม Adobe Photoshop 6. คลิกที่เลเยอร์ WELCOME -> เมนู Layer -> Layer Style แล้วเลือกรูปแบบที่ต้องการ ในที่นี้เลือก Stroke

การใช้โปรแกรม Adobe Photoshop 7. เลือกสีและรูปแบบที่ต้องการ

การใช้โปรแกรม Adobe Photoshop 8. คลิก OK  OK 9. ปฏิบัติจนครบทุกข้อความที่ต้องการ 10. คลิกที่เมนู Window  Animation

การใช้โปรแกรม Adobe Photoshop 11. จะปรากฏกรอบดังนี้

12. ปิดดวงตาที่เลเยอร์ WELCOME และ TO MY WEBSITE การใช้โปรแกรม Adobe Photoshop 12. ปิดดวงตาที่เลเยอร์ WELCOME และ TO MY WEBSITE

14. เปิดดวงตาเลเยอร์ WELCOME การใช้โปรแกรม Adobe Photoshop 13. คลิกรูปเครื่องมือ Duplicate current frame ที่กรอบ Animation จะปรากฏเฟรมขึ้นอีก 1 เฟรม 14. เปิดดวงตาเลเยอร์ WELCOME

การใช้โปรแกรม Adobe Photoshop ทำตามขั้นตอนที่ 13-14 จนครบ (เปิดดวงตาที่ละเลเยอร์จนครบ)

17. การบันทึกจะต้องบันทึกเป็นไฟล์นามสกุล .gif เท่านั้น การใช้โปรแกรม Adobe Photoshop 16. กำหนดเวลาโดยคลิกเมาส์ข้างขวาบริเวณเฟรมที่ 1 และคลิกเวลาที่ต้องการ เช่น 0.5 วินาที, 1.0 วินาที, 2.0 วินาที ตามลำดับ 17. การบันทึกจะต้องบันทึกเป็นไฟล์นามสกุล .gif เท่านั้น

การใช้โปรแกรม Swish โปรแกรม Swish เป็นโปรแกรมที่มีลักษณะการทำงานของโปรแกรมคล้ายกับโปรแกรม Flash แต่เนื่องจากโปรแกรม Flash ต้องใช้เวลาศึกษาและปฏิบัติค่อนข้างนาน ไม่เหมือนกับโปรแกรม Swish ซึ่งสามารถศึกษาได้เร็ว และใช้เวลาในการปฏิบัติค่อนข้างน้อย อีกทั้งยังมีเทคนิคต่าง ๆ มากมายด้วย 1. เปิดโปรแกรม Swish

การใช้โปรแกรม Swish 2. กำหนดขนาดและสี โดยกำหนดที่ Movie Properties ในที่นี้ให้กำหนด 600 x100 Pixels

3. จะปรากฏพื้นงานดังนี้ การใช้โปรแกรม Swish 3. จะปรากฏพื้นงานดังนี้

การใช้โปรแกรม Swish 4. คลิกที่รูปเครื่องมือ Insert Text (หรือคลิกที่เมนู Insert  Text) 5. พิมพ์ข้อความที่ต้องการ เช่น Welcome 6. จัดวางตำแหน่งตามที่ต้องการ 7. กำหนดรูปแบบ ขนาด และสีตัวอักษร

การใช้โปรแกรม Swish 8. คลิกที่ปุ่ม Add Effect เพื่อกำหนด Effect

การใช้โปรแกรม Swish 9. เลือก Effect ที่ต้องการ ในที่นี้กำหนดเป็น Swirl in 10. จะปรากฏรูปแบบในเลเยอร์ Welcome

การใช้โปรแกรม Swish 11.. สามารถปรับระยะเวลาในการแสดง Effect ได้ตามที่ต้องการ 12. คลิกที่รูปเครื่องมือ Play Movie เพื่อทดสอบและคลิก Stop เพื่อหยุด ถ้าไม่ต้องการเปลี่ยนรูปแบบแล้วให้คลิกที่ Close 13. ถ้าต้องการพิมพ์ข้อความอีก ให้ปฏิบัติตามข้อ 4-12 จนครบ 14. สามารถเคลื่อนย้าย Effect ได้โดยกดเมาส์ค้างไว้ที่ชื่อ Effect แล้วลากเมาส์ไปยังตำแหน่งที่ต้องการ

การใช้โปรแกรม Swish 15. เมื่อแสดงครบแล้ว ถ้าต้องการให้หยุดชั่วคราวก่อนเริ่มใหม่ ให้คลิกเมาส์ข้างขวาบริเวณเฟรมที่ต้องการ (นับห่างจาก Effect สุดท้ายประมาณ 10-20 เฟรมตามต้องการ) แล้วคลิกที่ Place 16. ทำการทดสอบทั้งหมด โดยคลิกที่ปุ่ม Play และถ้าต้องการหยุด ให้คลิกที่ปุ่ม Stop

การใช้โปรแกรม Swish 17. ทำการบันทึกไปใช้ในเว็บ โดยคลิกที่เมนู File -> Export สามารถเลือกรูปแบบในการ นำเสนอได้หมายรูปแบบ

การใช้โปรแกรม Swish 18. ถ้าต้องการบันทึกแก้ไข ให้คลิกที่เมนู File -> Save ซึ่งเป็นการบันทึกปกติ (ไฟล์จะมีนามสกุล .swi)

การนำเข้าไฟล์ Media ในรูปแบบต่าง ๆ โปรแกรม Swish สามารถนำเข้าไฟล์ประเภท Media ได้หลายประเภท เช่น ไฟล์รูปภาพ ไฟล์วีดีโอ เป็นต้น

การนำเข้าไฟล์ Media ในรูปแบบต่าง ๆ และสามารถกำหนดตำแหน่ง และรูปแบบของ Effect ได้ตามต้องการ ดังนี้ การลบ Effect 1. คลิกที่ Effect ที่ต้องการ 2. คลิกที่ Del Effect

The End