การสร้าางสื่อคอมพิวเตอร์ช่วยสอนด้วยFlash
CAI เป็นกระบวนการเรียนการสอนโดยใช้สื่อคอมพิวเตอร์ในการนำเสนอเนื้อหา
เรื่องราวต่างๆ มี
ลักษณะเป็นการเรียนโดยตรงและเป็นการเรียนแบบมีปฏิสัมพันธ์ (Interactive) คือสามารถโต้ตอบระหว่าง
โต้ตอบกับผู้เรียน ปัจจุบันโปรแกรมที่ใช้รพัฒนาสื่อคอมพิวเตอร์ช่วยสอนมีหลากหลาย
แล้วแต่ผู้สร้างจะ
เลือกใช้ในการอบรมครั้งนี้ผมได้เลือกโปรแกรมที่ใช้พัฒนาสื่อคอมพิวเตอร์ช่วยสอนสำหรับครูอย่างง่ายๆ
ประหยัดเวลา คุ้มค่า โดยไม่ต้องใช้ทรัพยากรของเครื่องคอมพิวเตอร์มาก นั้นก็คือ Flash นั่นเองครับ
ในการอบรมในครั้งนี้เป็นการเริ่มสร้างสื่อคอมพิวเตอร์ช่วยสอนด้วยตัวเองที่ง่าย
ใช้เวลาน้อยในการ
จัดทำและสามารถทำความเข้าใจได้อย่างรวดเร็ว เรามาเริ่มสร้าง CAI กันได้แล้วครับ
1. เปิดโปรแกรม Flash CS3 ขึ้นมา
2. เลือก Flash File (ActionScript 2.0)
3.กำหนดขนาดของ Document
Properties เป็นขนาด 550x400 pixels แล้วคลิกปุ่ม
ตกลง
4. การเพิ่มและเปลี่ยนชื่อ Scene เลือกเมนูWindow Other
Panels Scene ดังรูป
5. เปลี่ยนชื่อ
Scence 1 โดยการดับเบิลคลิกที่ชื่อ Scence 1 แล้วเปลี่ยนชื่อเป็น
Intro ดังรูป
6. สร้างหน้าจอแสดงถึงข้อมูลหน้าแรกของสื่อคอมพิวเตอร์ช่วยสอนของเรา
ใน
Layer 1 สร้างพื้นหลัง และสร้าง Motion Tween ให้กับ
พื้นหลังเล็กน้อย
ใน
Layer 2 สร้างตัวหนังสือชื่อเรื่อง และสร้างปุ่ม “เข้าสู่บทเรียน” ดังรูป
7. จากนั้นนำเสียงเข้ามาเก็บไว้ใน
Library โดยเลือก File àImport àImport to Library… ดังรูป
8. หลังจากนำเสียงเพลงเข้ามาใส่ได้แล้ว
ให้กำหนด Linkage ให้กับเสียง ดังรูป
9. กำหนด
Identifier ให้เป็น song ดังรูป
10. ใส่ActionScript
ใน Frame ที่1 ใน Layer
2 ดังนี้
fscommand("fullscreen",true);
playsong=new Sound();
playsong.attachSound("song");
playsong.start(0,10000);
11. ใส่ActionScript
ใน Frame ที่10 ใน Layer
2 คือ stop();
12. ใส่ActionScript
ให้ปุ่มเข้าสู่บทเรียน ดังนี้
on (release) {play();}
13. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า Inputname
ดังรูป
14. ใช้Text
Tool ใส่ข้อความว่า “กรุณาป้อนชื่อของคุณ”
ลงไป
15. ใส่ActionScript
ใน Frame ที่1 ดังนี้
Selection.setFocus("iname");stop();
16. ใช้Text
Tool สร้างกล่องข้อความ โดยเปลี่ยนชนิดของข้อความเป็น Input
Text และใส่ชื่อ Instance
เป็น
iname ดังรูป
17. สร้าง
Symbol ใหม่เป็นลักษณะ Button ชื่อ คลิก ดังรูป
18. ใส่ActionScript
ให้ปุ่มเข้าสู่บทเรียน ดังนี้
on(release){myname=this.iname.text;if(myname!=""){play();}}
19. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า main ดังรูป
20. สร้างเนื้อหาของเมนูหลัก
ดังรูป
สร้างพื้นหลัง
ใส่ข้อความชื่อเรื่อง
ใช้Text
Tool สร้างกล่องข้อความ เพื่อแสดงชื่อของผู้เข้าเรียนโดยเปลี่ยนชนิดของข้อความ
เป็น
Dynamic Text และใส่ชื่อ Instance เป็น
showname ดังรูป
ใส่ActionScript
ใน Frame ที่1 ดังนี้
this.showname.text="สวัสดีคุณ\n"+myname;stop();
สร้าง
Symbol แบบ Button เป็นปุ่ม “คำนำ” แล้วใส่ActionScript
ดังนี้
on (release) {gotoAndPlay("kumnum",
1);}
สร้าง
Symbol แบบ Button เป็นปุ่ม “จุดประสงค์” แล้วใส่ActionScript
on (release)
{gotoAndPlay("judprasong", 1);}
สร้าง
Symbol แบบ Button เป็นปุ่ม “ผู้จัดทำ” แล้วใส่ActionScript
ดังนี้
on (release)
{gotoAndPlay("auther", 1);}
สร้าง
Symbol แบบ Button เป็นปุ่ม “แบบฝึกหัด” แล้วใส่ActionScript
ดังนี้
on (release)
{gotoAndPlay("exam", 1);}
สร้าง
Symbol แบบ Button เป็นปุ่ม “เข้าสู่บทเรียน” แล้วใส่ActionScriptดังนี้
on (release)
{gotoAndPlay("content", 1);}
สร้าง
Symbol แบบ Button เป็นปุ่ม “ออกจากบทเรียน” แล้วใส่ActionScriptดังนี้
on(release){fscommand("quit",true);}
21. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า kumnum ดังรูป
22. สร้างเนื้อหาของคำนำดังรูป
23. สร้าง
Symbol แบบ Button เป็นปุ่ม “กลับสู่รายการหลัก” แล้วใส่ActionScriptดังนี้
on (release)
{gotoAndPlay("main", 1);}
24. ใส่ActionScript
ใน Frame ที่1 ดังนี้คือ
stop();
25. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า judprasong
ดังรูป
26. สร้างเนื้อหาของจุดประสงค์
ดังรูป
27. ลาก Symbol ปุ่ม “กลับสู่รายการหลัก”
ใน Library มาวางไว้บน State แล้วใส่ActionScript ดังนี้
on (release)
{gotoAndPlay("main", 1);}
28. ใส่ActionScript
ใน Frame ที่1 ดังนี้คือ
stop();
29. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า auther
ดังรูป
30. สร้างเนื้อหาของผู้จัดทำดังรูป
31. ลาก Symbol ปุ่ม “กลับสู่รายการหลัก”
ใน Library มาวางไว้บน State แล้วใส่ActionScript ดังนี้
on (release)
{gotoAndPlay("main", 1);}
32. ใส่ActionScript
ใน Frame ที่1 ดังนี้คือ
stop();
33. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า content
ดังรูป
34. สร้างเนื้อหาของบทเรียน
ใน Frame ที่1 ดังรูป
35. ใส่ActionScript
ใน Frame ที่1 ดังนี้คือ
stop();
36. ลาก Symbol ปุ่ม “กลับสู่รายการหลัก”
ใน Library มาวางไว้บน State แล้วใส่ActionScript ดังนี้
on (release)
{gotoAndPlay("main", 1);}
37. ลาก Symbol ปุ่ม “คลิก” ใน Library มาวางไว้บน State แล้วใส่ActionScript ดังนี้
on (release) {nextFrame();}
38. ใน Frame ที่2, 3, 4, 5 ฯลฯ สร้างเนื้อหาในหัวข้อต่อไปเรื่อย ๆ
โดยการใช้คำสั่ง Copy Frame
39. ลาก Symbol ปุ่ม “คลิก” ใน Library มาวางไว้บน
State แล้วทำการพลิกปุ่มให้หันไปด้าน
ตรงข้าม โดยใช้เครื่องมือ Free Transform
Tool หลังจากนั้นใส่ActionScript
ดังนี้
on (release) {prevFrame();}
40. เพิ่ม Scene
ใหม่ขึ้นมาหนึ่ง Scene ชื่อว่า exam ดังรูป
41. สร้างแบบฝึกหัดเป็นข้อสอบแบบปรนัย
4 ตัวเลือก โดย Frame ที่1 ให้สร้างหน้าแรกของการเข้าสู่
แบบฝึกหัด พิมพ์ข้อความลงไปบน State ดังรูป
42. ใส่ActionScript
ใน Frame ที่1 ดังนี้
score=0;stop();
43. ลาก Symbol ปุ่ม “คลิก” ใน Library มาวางไว้บน
State แล้วใส่ActionScript ดังนี้
on (release) {play();}
44. คลิกขวาตรง
Frame ที่2 แล้วใช้คำสั่ง Insert Blank
Keyframe ขี้นมาสร้างแบบฝึกหัดแบบปรนัย4
ตัวเลือก ข้อที่1 ดังรูป
45. สร้าง
Symbol แบบ Button เป็นปุ่ม “ตัวเลือก” แล้วใส่ActionScript ดังนี้
ถ้าเป็นข้อถูก ใส่ ActionScript ดังนี้
on(release){score++;play();}
ถ้าเป็นข้อผิด ใส่ActionScript ดังนี้
on(release){play();}
46. ใน Frame ที่3, 4, 5 ฯลฯ สร้างข้อคำถามพร้อมตัวเลือกต่อไปเรื่อย
ๆ ตามต้องการ โดยการใช้คำสั่ง
Copy Frame แล้วทำการแก้ไขข้อคำถามและแก้ไขตัวเลือก
พร้อมทั้งแก้ไข ActionScript ในแต่ละ
ตัวเลือกให้ถูกต้อง
47. ใน Frame สุดท้ายของข้อคำถามทั้งหมด ให้สร้างหน้าที่ใช้แสดงชื่อผู้ทำแบบฝึกหัด คะแนนของ
ผู้ทำแบบฝึกหัด และร้อยละของคะแนนที่ได้ดังรูป
48. ใช้Text Tool สร้างกล่องข้อความ
เพื่อแสดงชื่อผู้ทำแบบฝึกหัด คะแนนของผู้ทำแบบฝึกหัด และ
ร้อยละของคะแนนที่ได้โดยเปลี่ยนชนิดของข้อความเป็น Dynamic Text และใส่ชื่อ Instance เป็น
showscore ดังรูป
49. ใส่ActionScript ลงใน
Frame ดังกล่าว
ss=score*100/4;this.showscore.text="คะแนนของคุณ\n"+myname+"
คือ\n"+score+"\nคิดเป็น
"+ss+"%";stop();
50. ลาก Symbol ปุ่ม “กลับสู่รายการหลัก” ใน Library มาวางไว้บน State แล้วใส่ActionScript ดังนี้
on (release) {gotoAndPlay("main", 1);}
51. ทำการบันทึกงานของเราไว้ก่อน แล้วลอง Test
Movie ดูแค่นี้ก็เป็นการสำเร็จ
52. การ Publish งานของเราออกไปใช้งาน
ก่อนอื่นต้องไปตั้งค่าการ Publish ว่าคุณต้องการทำไฟล์
นามสกุลอะไรไปใช้อย่างไรได้อย่างเหมาะสมก่อน แล้วเลือก ปุ่ม Publish เท่านี้ก็เป็นการเสร็จสิ้น
53.1 เลือกเมนูFile Publish Settings….
53.2 กำหนดนามสกุลไฟล์ที่ต้องการนำไปใช้
