การสร้างบทเรียนคอมพิวเตอร์ช่วยสอน Cai

1. การสร้างบทเรียนคอมพิวเตอร์ช่วยสอน CAI
Standard
(ตอนที่ 1) ขั้นเตรียมงาน
• สร้างไฟล์ใหม่ขึ้นมาแล้วทาการตั้งชื่อเลเยอร์แรกว่า “bg” หรือ “background”
• คลิกที่เฟรม 1 ของเลเยอร์ bg แล้วให้ใส่ภาพและตัวอักษร ตามที่ได้คิดไว้ จะได้ดังรูป
• คลิก Insert Layer เพื่อสร้างเลเยอร์เพิ่ม ตั้งชื่อเป็น content หลังจากนั้นให้สร้างให้เป็น Keyframe ทั้ง 5 เฟรม โดยการคลิกที่เฟรม 1 ของเลเยอร์
content จากนั้นให้กดปุ่ม F6 จานวน 4 ครั้ง ก็จะได้เฟรมทั้งหมด 5 เฟรม
• ไปที่เมนู Insert เลือก New Symbol ตั้งชื่อเป็น Symbol แล้วเลือก Type เป็น Button และวาดรูปสี่่เหลี่ยมมุมโค้ง สีฟ้าจาก “บทที่ 2 Symbol
และ Instance” ในหัวข้อเทคนิคการสร้างปุ่มสี่เหลี่ยมมุมโค้งดังภาพ

2. • คลิกขวาที่เฟรม Up แล้วเลือก Copy Frame จากนั้นคลิกขวาที่เฟรม Over แล้วเลือก Paste Frame แล้วไปคลิกเลือก Selection Tools (รูปเมาส์
สีดา) จากนั้นคลิกที่รูปสี่เหลี่ยมมุมโค้ง เปลี่ยนสีให้เป็นสีเหลือง
• คลิกที่ Scene 1 เพื่อกลับไปทางานหน้าหลัก
• เมื่อไปดูที่พาเนล Library จะมี Symbol แบบ Button เกิดขึ้น ซึ่งเราจะเอาไว้เป็น Instance ทาปุ่มต่างๆ ในสเตจ (พื้นที่ทางานสีขาว) ดังภาพ
ด้านล่าง
(ตอนที่ 2) ขั้นสร้างงานเนื้อหา
• หลังจากที่ได้เตรียมงานขั้นต้นไว้แล้ว เราก็มาเริ่มสร้างบทเรียนกันเลย ทาการสร้างเลเยอร์เพิ่มขึ้นอีก 1 เลเยอร์ โดยตั้งชื่อว่า menu โดยตรวจสอบ
ว่าเลเยอร์ content มีคีย์เฟรมครบทั้ง 5 เฟรมแล้ว และเลเยอร์ menu ให้มีคีย์เฟรมในเฟรมที่ 1-2 วิธีการเพิ่มให้คลิกที่เฟรม 1 ของเล
เยอร์ menu แล้วกดปุ่ม F6 จานวน 1 ครั้ง ก็จะได้ดังภาพ
• ให้ไปคลิกที่เฟรม 1 ของเลเยอร์ content จากนั้นให้มองหา Panel ชื่อ Library หาชื่อในส่วนของ Name เป็น Symbol ลากมาวางไว้ในหน้าสเตจ
หรือพื้นที่ทางาน ตามจานวนปุ่มที่ต้องการ ในที่นี้ให้ลากมา 4 Symbol ดังภาพ

3. • ให้คลิกที่เฟรม 1 ของเลเยอร์ menu แล้วพิมพ์ชื่อ บทเรียนที่ 1-4 ดังภาพ (ย้้าอีกครั้งว่า ต้องให้อยู่ในเลเยอร์ menu ก่อนที่จะพิมพ์ชื่อลงไป)

4. • ทาการเพิ่มอีก 1 เลเยอร์ โดยตั้งชื่อว่า control ให้มีคีย์เฟรมในเฟรมที่ 1-2 โดยการคลิกที่เฟรม 1 ของเลเยอร์ control แล้วกดปุ่ม F6 จานวน 1
ครั้ง ดังภาพ
• ลากปุ่มมาใส่อีกสองปุ่ม ในเฟรมที่ 2 ของเลเยอร์ control และตั้งชื่อตามรูปด้านล่าง (ย้้าอีกครั้งว่าดูเลเยอร์และเฟรมให้ถูกต้องก่อนใส่ข้อมูล)
• ใส่ข้อมูลในเฟรมที่ 2 ในเลเยอร์ content

5. • ใส่ข้อมูลในเฟรมที่ 3 ในเลเยอร์ content
• ใส่ข้อมูลในเฟรมที่ 4 ในเลเยอร์ content
• ใส่ข้อมูลในเฟรมที่ 5 ในเลเยอร์ content

6. • จบขึ้นตอนการสร้างเนื้อหาบทเรียน ต่อไปก็จะเป็นการใส่คาสั่งเพื่อให้บทเรียนทางานได้อย่างสมบูรณ์ ด้วย Action Script (AS) โดยเราจะใช้ AS2.0
(ตอนที่ 3) ใส่คาสั่ง AS
• ตอนนี้จะเป็นการใช้คาสั่ง AS2.0 ให้บทเรียนครับ เรามาเริ่มกันจาก เพิ่มเลเยอร์ขึ้นมาอีก 1 เลเยอร์ โดยตั้งชื่อว่า as และให้สร้างคีย์เฟรมทั้งหมด 6
Keyframe
• จากนั้นเปิดพาเนล Action Script แล้วใส่คาสั่งที่คีย์เฟรม 1-5 ของเลเยอร์ as โดยทาการตามรูปด้านล่าง
• ส่วนคีย์เฟรม 6 ของเลเยอร์ as ให้ใส่คาสั่ง

7. fscommand(“quit”, true);
window.close();
• จากนั้นให้ใส่คาสั่งกับปุ่มทุกปุ่มตามนี้ โดยการใส่ก็ให้ไปคลิกที่ตัวปุ่มก่อน แล้วค่อยกด F9 เปิดหน้าต่างเพื่อใส่ AS
• เริ่มจากปุ่มบทเรียนที่ 1
on (press) {
gotoAndPlay(2);
}

8. • ปุ่มบทเรียนที่ 2
on (press) {
gotoAndPlay(3);
}
• ปุ่มบทเรียนที่ 3
on (press) {
gotoAndPlay(4);
}
• ปุ่มบทเรียนที่ 4
on (press) {
gotoAndPlay(5);
}
• ปุ่มกลับสู่หน้าหลัก
on (press) {
gotoAndPlay(1);
}

9. • และสุดท้ายปุ่มออกจากโปรแกรมหรือบทเรียน
on (press) {
gotoAndPlay(6);
}
• เท่านี้ก็เป็นอันเสร็จสิ้นสมบูรณ์สาหรับตัวอย่างการออกแบบ บทเรียนคอมพิวเตอร์ช่วยสอน CAI ด้วย โปรแกรม Flash ซึ่งหากท่านเข้าใจจะสามารถ
นาไปประยุกต์ใช้ได้ในการสร้าง CAI ที่มีเนื้อหา ภาพ รายละเอียด ที่เยอะกว่านี้
ที่มา : http://teacher.rts.ac.th/anusuk/339/