Your SlideShare is downloading. ×
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
การสร้างบทเรียน Cai ด้วย Flash
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

58,411

Published on

12 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
58,411
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2,028
Comments
12
Likes
35
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 เสียงลำกลงมำใน พื้นที่ของกำรทำำงำน (เสร็จเรียบร้อย แล้วครับ)

×