จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 1

e-mail mathawee_wattana@hotmail.com tel 0833237853

การสร้างบทเรียน CAI ด้วย Flash

ในกำรสร้ำงบทนี้ ผ้้จัดทำำได้กำำหนดร้ปแบบฝั งโครงสร้ำงดังนี้ เพื่อ
เป็ นแนวทำงในกำรสร้ำงสื่อ CAI

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

ขั้นที่ 2 กำำหนดขนำดแต่ในบทนี้ จะได้ขนำดตำมที่โปรแกรม flash

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

ขั้นตอนที่ 4 ให้สร้ำงป่ ุมขึ้นมำหนึ่ งป่ ุมในบทนี้ จะเลือกป่ ุมมำจำก

เครื่องมือ Flash เลยนะครับ โดยทำำดังนี้ ไปที่ window->common
libraries->Buttons หลังจำกนั้ นจะปรำกฏหน้ำต่ำงป่ ุมให้เลือกดัง
ร้ป แล้วให้เลือกป่ ุมตำมต้องกำร

ขั้นที่ 5 เมื่อเรำเลือกป่ ุมใสลงบนชิ้นงำนที่เรำสร้ำงแล้วดังร้ปก็เริม

่
เขียน Script ควบคุมกำรทำำงำนได้เลยครับ
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 4
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 ขึ้นมำ
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 5
e-mail mathawee_wattana@hotmail.com tel 0833237853

หมำเหตุช่ ือ Scene สำมำรถเปลี่ยนได้ตำมควำมเหมำะสมโดย

ดับเบิลคลิ๊กใน Scene ที่ต้องกำรจะเปลี่ยนชื่อนะครับ
ขั้นตอนที่ 7 จำกร้ปในขั้นตอนที่ 6 ให้คลิ๊กเลือกคำำว่ำ Scene 2
หน้ำต่ำงก็จะเปิ ด scene 2 ขึ้นมำแล้วให้ตกแต่งดังร้ปแล้วกำำหนด
เงื่อนไขตำมร้ปนะครับ
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 6
e-mail mathawee_wattana@hotmail.com tel 0833237853

สร้ำงช่องสำำหรับรับข้อม้ลโดยใช้เครื่องมือ T นำำมำวำดลงบนพื้ นที่

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

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

ขั้นตอนที่ 9 ให้สร้ำงป่ ุมให้ครบดังร้ปในขั้นตอนที่ 8 หลังจำกนั้ น

ทำำกำรเขียน script ให้กับทุกป่ ุมดังนี้
ป่ ุม คำำนำำ
on(press)
{
gotoAndStop("perface",1);
}
ป่ ุม จุดประสงค์
on(press)
{
gotoAndStop("objective",1);
}
ป่ ุมแบบฝึ กหัด
on(press)
{
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 9
e-mail mathawee_wattana@hotmail.com tel 0833237853
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
นั้ น
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 10
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
ดังภำพ
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 11
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)
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 12
e-mail mathawee_wattana@hotmail.com tel 0833237853
{
gotoAndStop(2);
}
เมื่อทำำ frame แรกเสร็จเรียบร้อยแล้วให้สร้ำง frame ที่2 โดยคลิ๊ก
ที่ frame ที่ 2 แล้วเลือกคำำว่ำ Insert Keyframe ดังร้ป

4 คลิ๊กที่ frame ที่ 2 แล้วตกแต่งดังร้ป

 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 13
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 ให้กำำหนดคุณสมบัติดังร้ป
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 14
e-mail mathawee_wattana@hotmail.com tel 0833237853

ในช่องหมำยเลข 2 ให้กำำหนดคุณสมบัติดังร้ป
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 15
e-mail mathawee_wattana@hotmail.com tel 0833237853

การใส่ไฟล์เสียง
1.นำำเสียงเข้ำมำในโปรแกรม flash cs3 โดยทำำดังนี้
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 16
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);
}
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 17
e-mail mathawee_wattana@hotmail.com tel 0833237853
6. เลือก frame ที่ 2 แล้วคลิ๊กขวำที่ร้ป stop แล้วเลือก action
แล้วใส่ script ดังนี้
on(release)
{
stopAllSounds();
gotoAndStop(1);
}
7.สร้ำง layer ขึ้นมำใหม่อีก 1 layer

8.คลิ๊กขวำที่ frame ที่ 2 layer ที่ 2 เลือก Insert Keyframe หลัง

จำกนั้ นเลือกที่ frame ที่ 2 layer ที่ 2 แล้วไปเลือก file เสียงจำก
library ดังร้ป
 จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 18
e-mail mathawee_wattana@hotmail.com tel 0833237853

นำำ file เสียงลำกลงมำใน พื้ นที่ของกำรทำำงำน (เสร็จเรียบร้อย

แล้วครับ )