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

จัดทําโดย นายเมธาวี วัฒนะ และนายธัญวัฒน กาบคํา e-mail [email protected] tel 0857153099

การสรางบทเรียน CAI ดวย Flash ในการสรางบทน้ีผูจัดทําไดกําหนดรูปแบบฝงโครงสรางดังนี้เพื่อเปนแนวทางในการสรางส่ือ CAI เม่ือออกแบบโครงสรางเสร็จเรียบรอยแลวก็เร่ิมลงมือสรางส่ือ CAI ท่ีตองการตามรูปแบบท่ีไดออกแบบไวไดแลวนะครับการสรางทําดังนี้นะครับ ข้ันท่ี 1 เม่ือเปดโปรแกรม flash cs3 ข้ึนมาแลวเลือกรูปแบบเปน ActionScript 2.0 นะครับ(เพราะในบทนี้จะใชการเขียนแบบ ActionScript 2.0 นะครับ


ข้ันท่ี 2 กําหนดขนาดแตในบทนี้จะไดขนาดตามท่ีโปรแกรม flash cs3 กําหนดมาใหแลวนะครับ ข้ันท่ี 3 เร่ิมสรางบทเรียน CAI กันเลยนะครับ สรางหนาแรกคือหนา ทักทายหนาแรก ออกแบบหนาตาของตัวโปรแกรมใหสวยงาม(จะทําตามรูปก็ไดนะครับ)คล๊ิกขวาท่ี frame ท่ีตองการเลือก Actions หยุดแลวพิมพ Script ดังนี้ stop(); ข้ันตอนท่ี 4 ใหสรางปุมข้ึนมาหนึ่งปุมในบทน้ีจะเลือกปุมมาจากเคร่ืองมือ Flash เลยนะครับ โดยทําดังนี้ ไปท่ี window->common libraries->Buttons หลังจากนั้นจะปรากฏหนาตางปุมใหเลือกดังรูป แลวใหเลือกปุมตามตองการ ข้ันท่ี 5 เม่ือเราเลือกปุมใสลงบนช้ินงานท่ีเราสรางแลวดังรูปก็เร่ิมเขียน Script ควบคุมการทํางานไดเลยครับ


ข้ันตอนการเขียน 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 ข้ึนมาแลวใหตกแตงดังรูปแลวกําหนดเงื่อนไขตามรูปนะครับ


สรางชองสําหรับรับขอมูลโดยใชเคร่ืองมือ T นํามาวาดลงบนพ้ืนท่ีดังรูปหลังจากนัน้ใหกําหนดคุณสมบัติของกลองรับขอมูลดังรูปคือ เลือกรูปแบบเปน Input Text แลวต้ังช่ือตัวแปรวา iname สรางปุมตามข้ันตอน(ข้ันตอนเหมือนกับตอนสรางหนาแรก) หลังจากนัน้ คล๊ิกขาวท่ีปุมแลวพิมพScript ดังรูป


ข้ันตอนท่ี 8 สราง Scene 3 ข้ึนมาโดยทําเหมือนกับข้ันตอนท่ี 6 หลังจากนัน้กทํ็าการตกแตง Scene 3 และสรางปุมข้ึนมาดงัรูป ใหสรางชองสําหรับแสดงช่ือท่ีผูใชกรอกมาโดยกําหนดคุณสมบัติดังรูป สําหรับการสรางปุม คํานํา จดุประสงคและอื่นทําดังนี ้ 1. ใหใชเคร่ืองมือ ในกลองเคร่ืองมือทําการวาดรูปหลังจากนั้นกใ็ชเคร่ืองมือพิมพขอความลงบนรูปโดยกาํหนดใหคุณสมบัติของขอความเปนแบบ static textนะครับ -หลังจากนั้นใหกดปุม Shift คางเอาไว -ใชmouse คลิกเลือกท้ังตัวหนังสือละรูปภาพปุม - คลิกขาวแลวเลือกคําวา convert to symbol จะปรากฎหนาตางข้ึนมาดังรูป ใหทําการต้ังช่ือ และเลือกเปน button เสร็จเรียบรอยกดปุมOk


ข้ันตอนท่ี 9 ใหสรางปุมใหครบดังรูปในขั้นตอนท่ี 8 หลังจากนั้นทําการเขียน script ใหกับทุกปุมดังนี ้ปุม คํานํา 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 นั้น เม่ือเปล่ียนช่ือเสร็จแลวใหตกแตงแตละ Scene ใหสอดคลองกับเนื้อหาของ Scene นั้นโดยท่ีจะตกแตง Scene ไหนกใ็หเลือก Scene จากชอง Scene ดังรูปดานบน ข้ันตอนท่ี 11 สรางปุมคลิกกลับหนาหลักของแตละ Scene วิธีทําใหสรางปุมข้ึนมาหลังจากนั้นใหพิมพ Script ใหกับปมดังนี ้on(press) { gotoAndStop("Scene 3",1); } การทําแบบฝกหัดหรือขอสอบใน Scene ท่ีช่ือวา Test ทําดังนี ้1 เปด Scene ท่ีช่ือวา Tests หลังจากนัน้ตกแตงหนาตาของScene ดังภาพ


ดานหนาของคําตอบใหสรางเปนปุมเพื่อจะใชเขียน 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 แลวตกแตงดังรูป 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 ใหกําหนดคุณสมบัติดังรูป


การใสไฟลเสียง 1.นําเสียงเขามาในโปรแกรม flash cs3 โดยทําดังนี ้ 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 8.คล๊ิกขวาท่ี frameท่ี 2 layer ท่ี 2 เลือก Insert Keyframe หลังจากนัน้เลือกท่ี frameท่ี 2 layer ท่ี 2 แลวไปเลือก file เสียงจาก library ดังรูป นํา file เสียงลากลงมาใน พืน้ท่ีของการทํางาน (เสร็จเรียบรอยแลวครับ)

Documents

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