1. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 1
e-mail mathawee_wattana@hotmail.com tel 0833237853
การสร้างบทเรียน CAI ด้วย Flash
ในกำรสร้ำงบทนี้ผู้จัดทำำได้กำำหนดรูปแบบฝังโครงสร้ำงดังนี้เพื่อ
เป็นแนวทำงในกำรสร้ำงสื่อ CAI
เมื่อออกแบบโครงสร้ำงเสร็จเรียบร้อยแล้วก็เริ่มลงมือสร้ำงสื่อ CAI
ที่ต้องกำรตำมรูปแบบทีได้ออกแบบไว้ได้แล้วนะครับกำรสร้ำงทำำ
่
ดังนี้นะครับ
ขั้นที่ 1 เมื่อเปิดโปรแกรม flash cs3 ขึ้นมำแล้วเลือกรูปแบบเป็น
ActionScript 2.0 นะครับ(เพรำะในบทนี้จะใช้กำรเขียนแบบ
ActionScript 2.0 นะครับ

2. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 2
e-mail mathawee_wattana@hotmail.com tel 0833237853
ขั้นที่ 2 กำำหนดขนำดแต่ในบทนี้จะได้ขนำดตำมที่โปรแกรม flash
cs3 กำำหนดมำให้แล้วนะครับ
ขั้นที่ 3 เริ่มสร้ำงบทเรียน CAI กันเลยนะครับ สร้ำงหน้ำแรกคือ
หน้ำ ทักทำยหน้ำแรก
ออกแบบหน้ำตำของตัวโปรแกรมให้สวยงำม(จะทำำตำมรูปก็ได้นะ
ครับ)คลิ๊กขวำที่ frame ที่ตอ้งกำรเลือก Actions หยุดแล้วพิมพ์
Script ดังนี้
stop();
ขั้นตอนที่ 4 ให้สร้ำงปุมขึ้นมำหนึ่งปุ่มในบทนี้จะเลือกปุ่มมำจำก
่
เครื่องมือ Flash เลยนะครับ โดยทำำดังนี้ ไปที่ window-
>common libraries->Buttons หลังจำกนั้นจะปรำกฏหน้ำต่ำง
ปุ่มให้เลือกดังรูป แล้วให้เลือกปุ่มตำมต้องกำร
ขั้นที่ 5 เมื่อเรำเลือกปุ่มใสลงบนชิ้นงำนที่เรำสร้ำงแล้วดังรูปก็เริ่ม
เขียน Script ควบคุมกำรทำำงำนได้เลยครับ

3. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 3
e-mail mathawee_wattana@hotmail.com tel 0833237853
ขั้นตอนกำรเขียน Script ให้กับปุ่มที่สร้ำงขึ้นมำให้ทำำดังนี้นนะครับ
คลิ๊กขวำบนปุ่มที่สร้ำงขึ้นมำ แล้วเลือกคำำสั่ง Actions จะปรำกฏ
หน้ำจอดังรูปแล้วให้พิมพ์คำำสั่งดังในรูปนะครับ
ขั้นตอนที่ 6 เมื่อเขียน Script เรียบร้อยแล้วดังรูป จำกคำำสั่ง ที่
พิมพ์ว่ำ gotoAndStop(“Scene 2”,1); เนื่องจำก script ที่เรำ
เขียนขึ้นมำนี้เรำระบุวำให้ไปเปิด Scene 2 ดังนั้นเรำต้องสร้ำง
่
Scene อีก 1 Scene ทีมีชื่อ Scene ว่ำ Scene 2 วิธีกำรสร้ำง
่
Scene ให้ทำำดังนี้ ไปที่เมนูบำร์ เลือก window->other Panels-
>scene จะปรำกฏหน้ำจอดังรูป หลังจำกนั้นให้คลิ๊กที่รูป
ก็จะได้ Scene 2 ขึ้นมำ
หมำเหตุชื่อ Scene สำมำรถเปลี่ยนได้ตำมควำมเหมำะสมโดย
ดับเบิลคลิ๊กใน Scene ทีต้องกำรจะเปลี่ยนชื่อนะครับ
่
ขั้นตอนที่ 7 จำกรูปในขั้นตอนที่ 6 ให้คลิ๊กเลือกคำำว่ำ Scene 2
หน้ำต่ำงก็จะเปิด scene 2 ขึ้นมำแล้วให้ตกแต่งดังรูปแล้วกำำหนด
เงื่อนไขตำมรูปนะครับ

4. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 4
e-mail mathawee_wattana@hotmail.com tel 0833237853
สร้ำงช่องสำำหรับรับข้อมูลโดยใช้เครื่องมือ T นำำมำวำดลงบนพื้นที่
ดังรูปหลังจำกนั้นให้กำำหนดคุณสมบัติของกล่องรับข้อมูลดังรูปคือ
เลือกรูปแบบเป็น Input Text แล้วตั้งชื่อตัวแปรว่ำ iname
สร้ำงปุ่มตำมขั้นตอน(ขั้นตอนเหมือนกับตอนสร้ำงหน้ำแรก) หลัง
จำกนั้น คลิ๊กขำวที่ปุ่มแล้วพิมพ์Script ดังรูป

5. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 5
e-mail mathawee_wattana@hotmail.com tel 0833237853
ขั้นตอนที่ 8 สร้ำง Scene 3 ขึ้นมำโดยทำำเหมือนกับขั้นตอนที่ 6
หลังจำกนั้นก็ทำำกำรตกแต่ง Scene 3 และสร้ำงปุ่มขึ้นมำดังรูป
ให้สร้ำงช่องสำำหรับแสดงชื่อที่ผู้ใช้กรอกมำโดยกำำหนดคุณสมบัติ
ดังรูป
สำำหรับกำรสร้ำงปุ่ม คำำนำำ จุดประสงค์และอื่นทำำดังนี้
1. ให้ใช้เครื่องมือ ในกล่องเครื่องมือทำำกำรวำด
รูปหลังจำกนั้นก็ใช้เครื่องมือพิมพ์ข้อควำมลงบนรูปโดยกำำหนดให้
คุณสมบัติของข้อควำมเป็นแบบ static text นะครับ
-หลังจำกนั้นให้กดปุ่ม Shift ค้ำงเอำไว้
-ใช้mouse คลิกเลือกทั้งตัวหนังสือละรูปภำพปุม ่
- คลิกขำวแล้วเลือกคำำว่ำ convert to symbol จะปรำกฎหน้ำต่ำง
ขึ้นมำดังรูป ให้ทำำกำรตั้งชื่อ และเลือกเป็น button เสร็จเรียบร้อย
กดปุ่ม Ok
ขั้นตอนที่ 9 ให้สร้ำงปุมให้ครบดังรูปในขั้นตอนที่ 8 หลังจำกนั้น
่
ทำำกำรเขียน script ให้กับทุกปุมดังนี้
่
ปุ่ม คำำนำำ

6. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 6
e-mail mathawee_wattana@hotmail.com tel 0833237853
on(press)
{
gotoAndStop("perface",1);
}
ปุ่ม จุดประสงค์
on(press)
{
gotoAndStop("objective",1);
}
ปุ่มแบบฝึกหัด
on(press)
{
gotoAndStop("test",1);
}
ปุ่มผู้จัดทำำ
on(press)
{
gotoAndStop("create",1);
}
ปุ่มเข้ำสู่บทเรียน
on(press)
{
gotoAndStop("learn",1);
}
ปุ่มออกจำกโปรแกรม
on(press)
{
fscommand("quit","true");
}
ขั้นตอนที่ 10 สร้ำง Scene ใหม่ขึ้นมำ 5 Scene ให้มีชื่อดังนี้เพื่อ
ให้สอดคล้องกับ script ทีเขียนขึ้นมำโดยกำรสร้ำงจะเหมือนกับ
่
ขั้นตอนที่ 6 แต่จะแตกต่ำงตรงที่เรำต้องทำำกำรเปลี่ยนชื่อ Scene
ให้เป็นชื่อดังนี้ preface, objective, test, create, learn โดยกำร
เปลียนชื่อโดยดับเบิลคลิ๊กใน Scene ที่ต้องกำรจะเปลี่ยนชื่อใน
่
ช่อง Scene ดังรูปถ้ำต้องกำรเปลี่ยนอันไหนก็ให้ดับเบิลคลิ๊กใน
Scene นั้น

7. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 7
e-mail mathawee_wattana@hotmail.com tel 0833237853
เมื่อเปลี่ยนชื่อเสร็จแล้วให้ตกแต่งแตละ Scene ให้สอดคล้องกับ
เนื้อหำของ Scene นั้นโดยที่จะตกแต่ง Scene ไหนก็ให้เลือก
Scene จำกช่อง Scene ดังรูปด้ำนบน
ขั้นตอนที่ 11 สร้ำงปุ่มคลิกกลับหน้ำหลักของแต่ละ Scene วิธี
ทำำให้สร้ำงปุ่มขึ้นมำหลังจำกนั้นให้พิมพ์ Script ให้กับป่มดังนี้
on(press)
{
gotoAndStop("Scene 3",1);
}
กำรทำำแบบฝึกหัดหรือข้อสอบใน Scene ที่ชื่อว่ำ Test ทำำดังนี้
1 เปิด Scene ที่ชื่อว่ำ Tests หลังจำกนั้นตกแต่งหน้ำตำ
ของ Scene ดังภำพ

8. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 8
e-mail mathawee_wattana@hotmail.com tel 0833237853
ด้ำนหน้ำของคำำตอบให้ส้รำงเป็นปุ่มเพื่อจะใช้เขียน Script เมื่อทำำ
หน้ำแรกดังรูปแล้วให้คลิ๊กขวำที่ frame ที1 แล้วเลือก Actions
่
แล้วเขียน Script ให้กับ frame แรกดังนี้
stop();
var sum;
sum=0;
2 เขียน script ให้กับปุ่มข้อทีถูกดังนี้
่
on(press)
{
gotoAndStop(2);
sum++;
}
3 เขียน script ให้กับปุ่มข้อที่ผิดดังนี้
on(press)
{
gotoAndStop(2);
}
เมื่อทำำ frame แรกเสร็จเรียบร้อยแล้วให้สร้ำง frame ที2 โดยค
่
ลิ๊กที่ frame ที่ 2 แล้วเลือกคำำว่ำ Insert Keyframe ดังรูป
4 คลิ๊กที่ frame ที่ 2 แล้วตกแต่งดังรูป

9. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 9
e-mail mathawee_wattana@hotmail.com tel 0833237853
5 เขียน script ให้กับปุ่มข้อทีถูกดังนี้
่
on(press)
{
gotoAndStop(3);
sum++;
}
6 เขียน script ให้กับปุ่มข้อที่ผิดดังนี้
on(press)
{
gotoAndStop(3);
}
7 เมื่อทำำ frame ที่ 2 เสร็จเรียบร้อยแล้วให้สร้ำง frame ที3 โดยค
่
ลิ๊กที่ frame ที่ 3 แล้วเลือกคำำว่ำ Insert Keyframe
8 คลิ๊กที่ frame ที่ 3 แล้วตกแต่งดังรูป
1
2
ในช่องหมำยเลข 1 ให้กำำหนดคุณสมบัติดังรูป
ในช่องหมำยเลข 2 ให้กำำหนดคุณสมบัติดังรูป

10. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 10
e-mail mathawee_wattana@hotmail.com tel 0833237853
การใส่ไฟล์เสียง
1.นำำเสียงเข้ำมำในโปรแกรม flash cs3 โดยทำำดังนี้

11. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 11
e-mail mathawee_wattana@hotmail.com tel 0833237853
2.เมื่อนำำเสียงเข้ำมำแล้วให้สร้ำง scene ที่ต้องกำรใส่เสียงหรือ
เลือก scene ทีต้องกำรใส่ไฟล์เสียงหลังจำกนั้นให้สร้ำงปุ่มขึ้นมำ
่
2 ปุมโดยใช้เครื่องมือ window->common libraries->Buttons
่
เลือกปุ่มที่ต้องกำร หลังจำกนั้นทำำกำรเลือกปุ่มทังสองปุ่มแล้วค
้
ลิ๊กขวำ เลือก convert to Symbol ->movie clip
3. ดับเบิลคล๊กที่ไฟล์ movie clip ที่สร้ำงขึ้นมำ หลังจำกนั้นให้ค
ลิ๊กขำวใน layer ที่ 1 frame ที่ 1 เลือก action หลังจำกนั้นให้ใส
scrip ดังนี้
stop();
stopAllSounds();
4. สร้ำง frame ใหม่อีก 1 frame ใน layer ที่ 1 จะมีอยู่ 2 frame
หลังจำกนั้นให้คลิ๊กที่ frame ที่ 1 ดังรูป
5. คลิ๊กขวำที่รูป play แล้วเลือก action แล้วใส่ script ดังนี้
on(release)
{
gotoAndStop(2);
}
6. เลือก frame ที่ 2 แล้วคลิ๊กขวำที่รูป stop แล้วเลือก action
แล้วใส่ script ดังนี้
on(release)
{
stopAllSounds();
gotoAndStop(1);
}
7.สร้ำง layer ขึ้นมำใหม่อีก 1 layer

12. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 12
e-mail mathawee_wattana@hotmail.com tel 0833237853
8.คลิ๊กขวำที่ frame ที่ 2 layer ที่ 2 เลือก Insert Keyframe หลัง
จำกนั้นเลือกที่ frame ที่ 2 layer ที่ 2 แล้วไปเลือก file เสียงจำก
library ดังรูป
นำำ file เสียงลำกลงมำใน พื้นที่ของกำรทำำงำน (เสร็จเรียบร้อย
แล้วครับ)