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

67,974 views

Published on

15 Comments
40 Likes
Statistics
Notes
No Downloads
Views
Total views
67,974
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
2,316
Comments
15
Likes
40
Embeds 0
No embeds

No notes for slide

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

  1. 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 4 e-mail mathawee_wattana@hotmail.com tel 0833237853 สร้ำงช่องสำำหรับรับข้อมูลโดยใช้เครื่องมือ T นำำมำวำดลงบนพื้นที่ ดังรูปหลังจำกนั้นให้กำำหนดคุณสมบัติของกล่องรับข้อมูลดังรูปคือ เลือกรูปแบบเป็น Input Text แล้วตั้งชื่อตัวแปรว่ำ iname สร้ำงปุ่มตำมขั้นตอน(ขั้นตอนเหมือนกับตอนสร้ำงหน้ำแรก) หลัง จำกนั้น คลิ๊กขำวที่ปุ่มแล้วพิมพ์Script ดังรูป
  5. 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 10 e-mail mathawee_wattana@hotmail.com tel 0833237853 การใส่ไฟล์เสียง 1.นำำเสียงเข้ำมำในโปรแกรม flash cs3 โดยทำำดังนี้
  11. 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. จัดทำำโดย นำยเมธำวี วัฒนะ และนำยธัญวัฒน์ กำบคำำ หน้ำ 12 e-mail mathawee_wattana@hotmail.com tel 0833237853 8.คลิ๊กขวำที่ frame ที่ 2 layer ที่ 2 เลือก Insert Keyframe หลัง จำกนั้นเลือกที่ frame ที่ 2 layer ที่ 2 แล้วไปเลือก file เสียงจำก library ดังรูป นำำ file เสียงลำกลงมำใน พื้นที่ของกำรทำำงำน (เสร็จเรียบร้อย แล้วครับ)

×