รวมบทความทั้งหมดในหมวดสร้างงานนำเสนอ สื่อการสอน

สร้างงานนำเสนอ สื่อการสอน

รวมบทความและหนังสืออธิบายเกี่ยวกับการใช้งานโปรแกรมสำหรับนำเสนอข้อมูลยอดนิยมอย่าง PowerPoint หรือ Flash ตลอดจนการสร้าง CAI หรือโปรแกรมช่วยสอนด้วย Authorware การใช้ Impress

สร้างวงรีขยายตัวด้วย Flash MX 2004
1. เข้าโปรแกรม Flash คลิกเมนู Modify>>Document...
2. กำหนดค่าตามตัวอย่าง แล้วคลิกปุ่ม OK
3. คลิกเครื่องมือวาดวงรี คลิกที่เฟรม 1 แล้ววาดวงรีขนาดดังภาพ

4. สร้างคีย์เฟรมในเฟรมที่ 2 โดยชี้ลูกศรที่เฟรมที่ 2 แล้วกดปุ่มขวาของเมาส์ เรียกคำสั่งลัด จากนั้นคลิก Insert>>Keyframe
5. คลิกเครื่องมือ Free Transform คลิกที่ภาพวงรี แล้วขยายให้ใหญ่กว่าเดิมเล็กน้อย
6. สร้างคีย์เฟรมเพิ่มอีกในเฟรมที่ 3 ด้วยวิธีการเดียวกับการปฏิบัติในข้อที่ 4
7. ขยายวงรีด้วยวิธีการเดียวกับข้อที่ 5 ให้วงรีใหญ่ขึ้นอีกเล็กน้อย
8. สร้างคีย์เฟรมจนถึงเฟรมที่ 10 ดังตัวอย่าง ซึ่งภาพวงรีในเฟรม 1 - 10 จะมีขนาดใหญ่ขึ้น ไปตามลำดับ

9. เมื่อสร้างเสร็จแล้ว การดูผลงาน ก็คลิกที่เฟรมแรกแล้วกดปุ่ม Enter ที่แป้นพิมพ์
10. ถ้าต้องการดูผลงานแบบเต็มจอก็กดปุ่ม Ctrl + Enter พร้อมกัน
11. ดูเสร็จแล้ว ก็คลิกเมนู File>>Close เพื่อกลับไปยังซีนหรือหนังที่กำลังทำอยู่
12. ปรับแต่งจนถูกใจแล้ว ก็บันทึกงานเก็บไว้ โดยคลิกเมนู File>>Save

โปรแกรมจะแสดงภาพวงรีในแต่ละเฟรม ผ่านสายตาของเราที่ความเร็ว 12 เฟรมต่อวินาที ก็ เลยทำให้ภาพดูเหมือนเคลื่อนไหวได้ เหมือนวงกลมขยายตัวขึ้นเรื่อยๆ อาจทดลองลดความเร็วการแสดง ภาพ โดยคลิกเมนู Modify>>Document... แล้วกำหนดค่า Fram rate: ไว้น้อยๆ เช่น 1 วินาที เพื่อ ดูความแตกต่างของการแสดงภาพ

Details: Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash; Hits: 674

สร้างเส้นหมุนคล้ายนาฬิกาด้วย Flash MX 2004
1. สร้างงานใหม่ กำหนดขนาดของงานไว้ที่ 320 x 240 pixel เหมือนตัวอย่างงานที่ 1
2. คลิกเลือกเครื่องมือ Line คลิกเฟรมที่ 1 แล้ววาดเส้นดังตัวอย่าง
3. เปิดเครื่องมือ Transform ขึ้นมา คลิกติ๊กถูกช่อง Constrain
4. กำหนดค่า Rotate = 30
5. คลิกปุ่ม Copy and apply transform 5 ครั้ง
6. ก็จะได้ภาพดังตัวอย่าง
7. สร้างคีย์เฟรมในเฟรมที่ 2 โดยชี้ลูกศรที่เฟรมที่ 2 คลิกปุ่มขวาเรียกคำสั่งลัดแล้วคลิกที่ Insert Keyframe ให้สร้างคีย์เฟรมจนถึงเฟรมที่ 12

8. ในแต่ละเฟรม เริ่มจากเฟรมที่ 2 คลิกที่เฟรม 2 แล้วลบเส้นต่างๆ ออกไป เหลือไว้เพียง 2 เส้นคือ เส้น 1 และเส้น 2 เสร็จแล้วก็คลิกที่เฟรมอื่นๆ และลบเส้นออกไปให้แต่ละเฟรมปรากฏภาพ ดังตัวอย่าง
ลักษณะการสร้างผลงานแบบนี้ จะเป็นรูปแบบการสร้างภาพแบบ Frame by Frame ต้องใช้ เวลาในการสร้างพอสมควร เมื่อนำภาพมาแสดงผ่านสายตาด้วยความเร็ว ก็จะดูเหมือนภาพเคลื่อนไหวได้ ปรากฏเส้นไล่กันขึ้นมา อาจนำไปประยุกต์ทำเป็นนาฬิกาก็ได้ กำหนดมุมในการหมุน = 6 องศา ก็จะ ได้เส้นทั้งหมด 60 เส้น แทรกคีย์เฟรมไว้ 60คีย์เฟรม กำหนดค่า Frame rate: ในเมนู Modify>> document = 1 วินาที

Details: Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash; Hits: 727

ลักษณะจะคล้ายกับการสร้างภาพยนตร์ โดยนำภาพที่มีลักษณะการเคลื่อนไหวที่ต่อเนื่องกัน (เคลื่อนทีละนิด)มาเรียงต่อกัน เมื่อมีการเลื่อนภาพหรือแสดงภาพทีละภาพผ่านสายตาด้วยความเร็ว ก็จะดูเหมือนภาพนั้นมีการเคลื่อนไหว

จากตัวอย่างด้านล่างที่เป็นภาพการต่อสู้ เราจะเห็นท่วงท่าการต่อสู้ที่เปลี่ยนไปทีละนิด เมื่อนำ ภาพมาแสดงผ่านสายตาทีละภาพ ด้วยความเร็วระดับหนึ่ง ภาพก็จะเคลื่อนไหวได้ การสร้างภาพแบบนี้ จะพบเห็นได้ทั่วๆ ไปในการสร้างภาพยนตร์การ์ตูน ใช้เทคนิคคล้ายกัน แต่ไม่ได้สร้างด้วยโปรแกรมนี้ ชื่อไฟล์ที่ใช้ ก็ให้ตั้งชื่อที่เรียงลำดับคล้ายตัวอย่างเช่น f01.bmp - f11.bmp

สร้างภาพ Frame by Frame ด้วย Flash MX 2004 แบบที่ 1
1. เริ่มต้นสร้างไฟล์ใหม่ กำหนดขนาดของงานตามต้องการ ในที่นี้จะกำหนดไว้ที่ 320 x 240 px เท่านั้น
2. ซูมหน้าจอให้เห็นเสตจที่จะวางภาพ และเลื่อนให้เสตจอยู่ตรงกลางดังภาพ เพราะเมื่อนำ ภาพเข้ามาวาง ภาพก็จะอยู่ตรงกลางพอดี ไม่เช่นนั้น ภาพก็จะอยู่ชิดขอบด้านใดด้านหนึ่ง เสียเวลาจัด ภาพ
3. นำไฟล์ภาพเข้ามา โดยคลิกเมนู File>>Import>>Import to Stage...

4. คลิกเลือกไฟล์ภาพที่ต้องการ ก็คือ f01.bmp แล้วคลิกปุ่ม Open
5. จะปรากฏข้อความแจ้งว่า ไฟล์ที่จะนำเข้ามานั้น เป็นไฟล์ที่มีชื่อแบบเดียวกัน โดยเรียงไป ตามลำดับคือ f01.bmp-f11.bmp โปรแกรมก็เลยถามว่า ต้องการนำภาพเข้ามาทั้งหมดเลยหรือไม่
6. ถ้าคลิกเลือก Yes โปรแกรมก็จะนำภาพเข้ามาทั้งหมด โดยสร้างเป็นคีย์เฟรมและเก็บแต่ละ ภาพไว้คนละเฟรม ในที่นี้ให้คลิก Yes
7. ถ้าต้องการดูผลงานเดี๋ยวนั้น ก็คลิกเฟรมที่ 1 แล้วกด Enter หรือกด Ctrl + Enter

8. การวางภาพที่แนะนำ แต่อาจยุ่งยากเล็กน้อย ให้คลิกเมนู View แล้วคลิกติ๊กถูก Rulers
9. ชี้ลูกศรที่ไม้บรรทัด กดปุ่มซ้ายค้างไว้แล้วลากเส้นไกด์ไลน์ มาวางในเสตจ การลบเส้นไกด์ ไลน์ ก็ลากย้ายไปไว้ที่ไม้บรรทัดเหมือนเดิม
10. คราวนี้ก็นำภาพเข้ามา แต่ต้องนำเข้ามาทีละภาพ ในข้อที่ 5 ให้คลิกเลือก No
11. และก็ต้องสร้างคีย์เฟรมเองด้วย โดยในเฟรมที่ 2 ให้สร้างคีย์เฟรม แล้วจึงนำภาพเข้ามา ข้อดีก็คือ สามารถจัดตำแหน่งภาพได้ตามต้องการ แต่เสียเวลาพอสมควร ถ้าภาพมีจำนวนมาก

สร้างภาพ Frame by Frame ด้วย Flash MX 2004 แบบที่ 2
ภาพแรกนั้น มีเพียงเลเยอร์เดียว แต่แบบที่ 2 นี้จะมีมากกว่า 1 เลเยอร์
1. เป็นการสร้างภาพเรือใบแล่นใน ทะเล จากขวาไปซ้ายมือ
2. ความแตกต่างก็คือ จะมีเลเยอร์ 2 เลเยอร์ Layer 1 เป็นภาพภูเขาและทะเล Layer 2 เป็น ภาพเรือใบ
3. ภาพทะเลจะเป็นภาพนิ่ง จึงใช้เฟรมแบบเฟรม วางภาพใน Layer 1 เฟรมที่ 1 เฟรมเดียว แล้วปิดท้ายที่เฟรม 10 ด้วยคำสั่ง Insert Frame วาดภาพในเฟรมที่ 1 เฟรมเดียว แล้วชี้ลูกศรที่เฟรม 10 กดปุ่มขวาของเมาส์เรียกคำสั่งลัด แล้วคลิกคำสั่ง Insert Frame
4. ส่วน Layer 2 จะใช้เฟรมแบบคีย์เฟรม สังเกตุได้จากช่องเฟรมจะมีจุดกลมๆ สีดำ อยู่ทุก เฟรม ก็จะใช้วิธีการแทรกคีย์เฟรมไปทุกเฟรม
5. ส่วนภาพเรือใบ ในแต่ละเฟรมก็ย้ายขยับไปทางซ้ายมือทีละนิด
6. การสร้างภาพแบบนี้ สามารถเพิ่มลูกเล่นได้อีกมา เช่นต้องการให้มีนกบินผ่าน ก็สร้างอีก หนึ่งเลเยอร์ ไว้บนสุด แล้วก็วาดภาพนก จากนั้นก็แทรกคีย์เฟรม แล้วขยับภาพนกให้บินไปตามทิศทาง ที่ต้องการ ก็คล้ายๆ กับการสร้างภาพเรือ ให้ขยับไปทีละนิด
7. เสร็จแล้วดูผลงานโดยกดปุ่ม Ctrl + Enter

Details: Category: วาดภาพสร้างงานนำเสนอและ CAI ด้วย Flash; Hits: 3732

การสร้างภาพเคลื่อนไหวแบบทวีน ไฟล์ที่ได้จะมีขนาดเล็กกว่าแบบเฟรมบายเฟรม วิธีสร้างจะ สามารถทำได้ 2 แบบ คือ Motion Tween และ Motion Guide

สร้างภาพเคลื่อนไหวแบบ Motion Tween
1. เริ่มต้นสร้างงานใหม่ กำหนดขนาดของงานให้เรียบร้อยด้วยคำสั่ง Modify>>Document
2. คลิกช่องเฟรม 1 ของ Layer 1
3. วาดพื้นดังตัวอย่างเป็นสี่เหลี่ยม 4 แท่งบนล่าง
4. ก็อปปี้ภาพให้เฟรมที่ 1 - 20 มีภาพแบบเดียวกัน ก็คือมีภาพสี่เหลี่ยม 4 รูปที่ได้วาดไว้ ในเฟรมที่ 1 ให้ชี้ที่เฟรมที่ 20 กดปุ่มขวาของเมาส์เรียกคำสั่งลัด แล้วคลิก InsertFrame
5. จะได้ผลออกมาดังภาพ ถ้าเจอเฟรมที่มีลักษณะแบบนี้ ก็แสดงว่าเฟรมทั้งหมด (1-20) จะมี ภาพภายในแบบเดียวกัน

6. สร้างเลเยอร์ใหม่โดยคลิกปุ่ม Insert Layer
7. คลิกเฟรม 1 แล้ววาดวงกลม วางตำแหน่งไว้ดังตัวอย่าง
8. เลือกวงกลมที่ได้วาด ด้วยเครื่องมือ Arrow โดยลากเป็นกรอบรอบดังภาพ
9. แปลงเป็น Symbol โดยคลิกเมนู Modify>>Convert to Symbol...
10. พิมพ์ชื่อ Symbol = ball คลิกเลือกชนิดเป็นแบบ Graphic แล้วคลิกปุ่ม OK

11. จุดที่ต้องการให้ลูกบอลตกกระทบก็คือ เฟรมที่ 5, 10, 15 และ 20 ให้คลิกเฟรมที่ 5 แล้วกดปุ่มขวาของเมาส์เรียกคำสั่งลัด จากนั้นก็คลิกคำสั่ง Insert Keyframeเฟรมที่ 10, 15 และ 20 ก็ปฏิบัติคล้ายกัน
12. ซึ่งก็จะได้เฟรมออกมาดังภาพ
13. คลิกเฟรมที่ 5 แล้วย้ายวงกลมไปไว้ที่ตำแหน่งดังภาพ เฟรมที่ 10, 15 และ 20 ให้คลิก และย้ายวงกลมไปไว้ดังตัวอย่างเช่นกัน
14. เฟรมที่ 20 จะวางไว้นอกเสตจ ลูกบอลก็จะลอยออกไปนอกเวที หายไปเลย

15. สร้างภาพเคลื่อนไหวแบบทวีนระหว่างเฟรมที่ 1 - 5 ก่อน โดยชี้ลูกศรที่เฟรมใดๆ ระหว่าง เฟรม 1-4 ของ Layer 2 แล้วกดปุ่มขวาของเมาส์เรียกคำสั่งลัด
16. คลิกคำสั่ง Create Motion Tween ที่เฟรม 1 - 5 จะปรากฏรูปลูกศรดังภาพ
17. สร้างทวีนด้วยส่วนอื่นๆ ก็คือเฟรมที่ 6-10, 11-15 และ 16-20 ด้วยวิธีการคล้ายกัน
18. ระหว่างนี้ควรบันทึกงานเก็บไว้ก่อน โดยคลิกเมนู File>>Save
19. ถ้าต้องการดูผลงาน ก็คลิกที่เฟรมที่ 1 แล้วกด Enter ที่แป้นพิมพ์หรือกดปุ่ม Ctrl + Enter
20. เมื่อดูผลงาน ช่วงที่ลูกบอลกระเด้งไปนั้น อาจกำหนดให้ลูกบอลหมุน จะดูสมจริงกว่า ให้คลิกระหว่างเฟรม 1 - 4 (เฟรมอื่นๆ ก็คลิกเฟรมระใดๆ ระหว่างเฟรมที่ 6-10, 11-15 และ 16-20
21. ใน Frame Properties ด้านล่าง คลิกเลือกค่า Rotate ตามต้องการ เช่น CW หมุนตาม เข็มนาฬิกา CCW หมุนทวนเข็ม กำหนดค่าเสร็จแล้ว ก็คลิกเฟรมที่ 1 แล้วกดEnter ดูผลงาน
22. ถ้าวงกลมเคลื่อนที่เร็วเกินไป ก็คลิกเมนู Modify>>Document... แล้วลดค่า Frame rate ให้น้อยลง เช่น 1, 3 หรือ 6 เพื่อดูผลงาน

23. อาจลองทำอีกแบบ โดยแทรกคีย์เฟรมเพิ่มในเฟรมที่ 6 และ 7 ดังภาพ ชี้ลูกศรที่เฟรม ที่ 6 กดปุ่มขวาของเมาส์ แล้วคลิกคำสั่ง Insert Keyframe
24. จัดตำแหน่งภาพในเฟรม 5 - 7 ให้ตรงกัน โดยคลิกที่เฟรม 6
25. คลิกปุ่ม Onion Skin ซึ่งจะทำให้มองเห็นภาพในเฟรมอื่นได้ ว่าอยู่ตำแหน่งใด จะเป็น ภาพจางๆ ของเฟรมที่ 4-7 คราวนี้ก็จะง่ายในการจัดวางบอลของเฟรม 6 ให้อยู่ตำแหน่งเดียวกับเฟรม ที่ 5 เฟรมที่ 7 ก็จัดให้อยู่ตำแหน่งเดียวกับเฟรมที่ 5 เช่นกัน
26. ภาพของเฟรมที่ 6 ให้ใช้เครื่องมือ Free Transform ลดขนาดลง โดยลดให้แบนลง จะ ดูสมจริงมากกว่า เพราะเมื่อลูกบอลกระเด้งโดนแท่งสี่เหลี่ยมก็จะยุบตัวเล็กน้อยก่อนจะกระเด้งต่อ
27. เสร็จแล้วก็ยกเลิกใช้งานปุ่ม Onion Skin โดยคลิกให้นูนขึ้นมาเหมือนเดิม
28. การสร้างให้ภาพดูสมจริง ก็ควรกำหนดระยะห่างให้มากกว่านี้ แค่เฟรม 1-5 น้อยเกินไป อาจกำหนดเฟรมไว้ที่ 1-15 จะดีดีกว่า

Ease กำหนดความเร็วในการเคลื่อนไหวใน Flash MX 2004
In / Out อินเป็นความเร็วในช่วงต้น ถ้าเลื่อนแถบสไลด์ไปทาง IN ก็จะเคลื่อนที่ช้า แต่จะเร็ว ในช่วงท้าย ถ้าไว้ตรงกลางความเร็วในการเคลื่อนที่ของวัตถูหรือบอลก็จะคงที่ถ้าเลื่อนแถบสไลด์ไปทาง Out ก็จะช้าในตอนปลาย

การเพิ่มเสียงในไฟล์ Flash MX 2004
เราสามารถใส่เสียงลงไปได้ ดังนี้
1. คลิกปุ่ม Insert Layer สร้างเลเยอร์ใหม่
2. คลิกเฟรม 1 ของ Layer 3 ที่เพิ่งจะสร้างขึ้นมา
3. คลิกเมนู File>>Import>>Import to Stage

4. คลิกเลือกไฟล์เสียงที่ต้องการ แล้วคลิกปุ่ม Open
5. ในเครื่องมือ Properties ในส่วน Sound ให้คลิกเลือกไฟล์เสียงที่ Import เข้ามา เช่น track1.mp3
6. เมื่อเลือกไฟล์เสียงแล้ว ที่ Layer 3 ก็จะมีเสียงเพิ่มเข้ามา การยกเลิกในส่วน Sound ให้ คลิกเลือก None เหมือนเดิม
7. ทดสอบผลงาน โดยกดปุ่ม Ctrl + Enter

เพิ่มลูกบอลเข้ามาอีกลูก
จะเป็นการเพิ่มลูกบอลเข้ามาอีก 1 ลูก
1. คลิกที่ Layer 2 ที่เป็นลูกบอล แล้วคลิกปุ่ม Insert Layer เพื่อสร้างเลเยอร์ใหม่
2. คลิกที่เลเยอร์ 2 ที่ตำแหน่งดังภาพ เพื่อเลือกเฟรมทั้งหมดของ Layer 2 เมื่อถูกเลือกแล้ว เฟรมจะเป็นแถบดำ
3. ชี้ลูกศรที่เฟรมที่เป็นแถบดำ แล้วกดปุ่มขวาของเมาส์เรียกคำสั่งลัด แล้วคลิกเลือกคำสั่ง Copy Frames
4. คลิก Layer 4 ที่ตำแหน่งดังตัวอย่าง เฟรมทั้งหมดของเลเยอร์นี้ก็จะถูกเลือกเป็นแถบดำ
5. ชี้ลูกศรที่แถบดำ กดปุ่มขวาของเมาส์เรียกคำสั่งลัด แล้วคลิก Paste Frames

6. ตอนนี้ก็จะเป็นการก็อปปี้ข้อมูลจาก Layer 2 เข้ามาแล้ว ก็จัดการแก้ไขนิดหน่อย คลิกที่ เฟรม 1 ของ Layer 4 แล้วย้ายลูกบอลไว้นอกเสตจดังภาพ
7. เฟรมที่ 5, 10, 15 และ 20 ก็ย้ายลูกบอลไว้นอกเสตจที่ตำแหน่งดังตัวอย่าง
8. ทดสอบการทำงานของงานที่ได้โดยกด Ctrl + Enter ก็จะมีลูกบอลกระเด้งไปมา 2 ลูก

การสร้างภาพเคลื่อนไหวแบบนี้ ภาพที่จะนำมาทำเป็นภาพเคลื่อนไหว ต้องจัดการแปลงเป็น Symbol เสียก่อน โดยเลือกภาพแล้วคลิกคำสั่ง Modify>>Convert to Symbol ไม่เช่นนั้น อาจจะทำ เป็นภาพเคลื่อนไหวไม่ได้