การสร้างบทเรียน cai ด้วย flash · 1...
TRANSCRIPT
การสรางบทเรยน CAI ดวย Flash
ใชส าหรบการเรยน คอมพวเตอรกราฟกและแอนนเมชน
(Computer Graphics and Animation) 3602304
สารบญ
เนอหา การสรางบทเรยน CAI ดวย Flash ........................................................................................................................................................................... 1
พนฐานเบองตนของ Flash ................................................................................................................................................................................. 1
การสรางบทเรยน CAI ดวย Flash ..................................................................................................................................................................... 2
ตวอยางการใช flash ............................................................................................................................................................................................ 3
ขนตอนการท า CAI ............................................................................................................................................................................................... 3
การใสไฟลเสยง .................................................................................................................................................................................................. 18
อางอง................................................................................................................................................................................................................... 19
1
การสรางบทเรยน CAI ดวย Flash
พนฐานเบองตนของ Flash องคประกอบตาง ๆ ของ Flash อยางคราว ๆ เพอท าความเขาใจกอนวามอะไรบาง เครองมอชนด
ไหนมหนาทอยางไร มประโยชนอยางไรบาง มเครองมอชวยอ านวยความสะดวก ในการท างานและสรางชนงานจาก Flash ไปแลว บทนเราจะท าการสราง CAI กอนทจะเรม Flash เปนโปรแกรมทมความสามารถในดานการสรางภาพเคลอนไหว (Animation) ทไดรบความนยมมากทสดในปจจบน เปนผลตภณฑของบรษท Adobe (เดมคอ Macromedia) ซงไดพฒนาปรบปรงเครองมอตางๆ ใหมความสามารถใชงานไดสะดวก สามารถใชผลตสอการสอนเชงโตตอบ (Interactive), สอ Presentation เกมส แบบทดสอบ E-Book Website Streaming Video ฐานขอมล งานกราฟก และสรางภาพเคลอนไหว หรอแมแตภาพยนตรการตนเอนเมชน Computer Assisted Instruction (CAI) หมายถง สอการเรยนการสอนทางคอมพวเตอรรปแบบหนง ซงใชความสามารถของคอมพวเตอรในการน าเสนอสอประสมอนไดแก ขอความ ภาพนง กราฟก แผนภม กราฟ วดทศน ภาพเคลอนไหว และเสยง เพอถายทอดเนอหาบทเรยน หรอองคความรในลกษณะท ใกลเคยงกบการสอนจรงในหองเรยนมากทสดโดยมเปาหมายทส าคญกคอ สามารถดงดดความสนใจของผเรยน และกระตนใหเกดความตองการท จะเรยนร คณลกษณะส าคญของคอมพวเตอรชวยสอน (CAI)
1. สารสนเทศ (Information) หมายถง เนอหาสาระทไดรบการเรยบเรยง ท าใหผเรยนเกดการเรยนร หรอไดรบทกษะอยางหนงอยางใดตามทผสรางไดก าหนดวตถประสงคไว การน าเสนออาจเปนไปในลกษณะทางตรง หรอทางออมกได ทางตรงไดแก คอมพวเตอรชวยสอนประเภทตวเตอร เชนการอาน จ า ท าความเขาใจ ฝกฝน ตวอยาง การน าเสนอในทางออมไดแก คอมพวเตอรชวยสอนประเภทเกมและการจ าลอง
2. ความแตกตางระหวางบคคล (Individualization) การตอบสนองความแตกตางระหวางบคคล คอลกษณะส าคญของคอมพวเตอรชวยสอน บคคลแตละบคคลมความแตกตางกนทางการเรยนร คอมพวเตอรชวยสอน เปนสอประเภทหนงจงตองไดรบการออกแบบใหมลกษณะทตอบสนองตอความแตกตางระหวางบคคลใหมากทสด
3. การโตตอบ (Interaction) คอการมปฏสมพนธกนระหวางผเรยนกบคอมพวเตอรชวยสอนการเรยน การสอนรปแบบทดทสดกคอเปดโอกาสใหผเรยนไดมปฏสมพนธกบผสอนไดมากทสด
4. การใหผลปอนกลบโดยทนท (Immediate Feedback) ผลปอนกลบหรอการใหค าตอบนถอเปนการ เสรมแรงอยางหนง การใหผลปอนกลบแกผเรยนในทนทหมายรวมไปถงการทคอมพวเตอรชวยสอนทสมบรณจะตองมการ ทดสอบหรอประเมนความเขาใจของผเรยนในเนอหาหรอทกษะตาง ๆ ตามวตถประสงคทก าหนดไว
ประโยชนของคอมพวเตอรชวยสอน (CAI)
1. ชวยใหผเรยนทเรยนออน สามารถใชเวลานอกเวลาเรยนในการฝกฝนทกษะ และเพมเตมความร เพอปรบปรงการเรยนของตน
2
2. ผเรยนสามารถน าคอมพวเตอรชวยสอนไปใชในการเรยนดวยตนเองในเวลา และสถานททสะดวก 3. คอมพวเตอรชวยสอนสามารถทจะจงใจผเรยนใหเกดความกระตอรอรน สนกสนานไปกบการเรยน
การสรางบทเรยน CAI ดวย Flash
การสรางบทนผจดท าไดก าหนดรปแบบฝงโครงสรางดงนเพอเปนแนวทางในการสรางสอ CAI โดยทวไปจะประกอบไปดวย โครงสรางตาง ๆ ดงน โครงสรางพนฐานในการท า CAI ส าหรบสรางคอมพวเตอรชวยสอน โดยทวไปจะมดงภาพท 1 หรออาจจะมเพมเตมเรองอน ๆ เขามาดวย
รปท 2 ตวอยางบทเรยน CAI เมอออกแบบแลวจะไดหนาตางดงภาพ (http://www.kpc.ac.th)
ทกทายหนาแรก
ค าน า วตถประสงค ทดสอบกอนเรยน
ปอนชอผใชงาน
แสดงเมนหลก
บทเรยน
บทเรยน แบบฝกหด
สรปผล
ผลการทดสอบกอนเรยน
GAME, VDO ผจดท า ทดสอบหลงเรยน
รปท 1 โครงสรางการสรางบทเรยนดวย Adobe Flash
3
ตวอยางการใช flash สราง CAI ส าหรบเรยนวชา Flash ซงเมอน าความสามารถของ flash มารวมกนแลวจะสามารถสรางสอส าหรบการเรยนการสอนได หรอเรองตาง ๆ ส าหรบเผยแพร ไดไมจ ากด ขนตอนการท า CAI
เรมท า CAI เมอออกแบบโครงสรางเสรจเรยบรอยแลวกเรมลงมอสรางสอ CAI ทตองการตามรปแบบทไดออกแบบไวไดแลวการสรางท าดงน
ขนท 1 เมอเปดโปรแกรม flash cs3 ขนมาแลวเลอกรปแบบเปน Action Script 2.0
รปท 3 หนาแสดงเขาสโปรแกรม Flash Action Scrip 2.0
ขนท 2 ก าหนดขนาดแตในบทนจะไดขนาดตามทโปรแกรม flash cs3 ก าหนดมาใหแลว ก าหนดขนาดของชนงาน ไปท Modify => Document.. =
รปท 4 ก าหนดขนาดของชนงาน
1
4
รปท 5 Title : ชอ CAI ทจดท า Description : , Dimension ตามความตองการของผสราง 1. Title : ก าหนดชอ ชอ CAI ทจดท า
2. ค าอธบาย Description : 3. Dimension ตามความตองการของผสราง เชน 800 x 400 px
ขนท 3 เรมสรางบทเรยน CAI สรางหนาแรกคอหนา ทกทายหนาแรก
ออกแบบหนาตาของตวโปรแกรมใหสวยงาม (จะท าตามรปกไดนะครบ) ใชเมาสคลก ขวาท frame ทตองการเลอก Actions หยดแลวพมพ Script ดงน 3.1 ใหท าการคลกเลอก ขวาท frame ท 1 แลวกด F9
1
2
3
5
3.2 เมอคลกแลวจะแสดงขอมล พมพค าสงลงใน Action script stop();
รปท 6 พมพค าสงลงใน Action script stop();
3.1
3.2
6
ขนตอนท 4 ใหสรางปมขนมาหนงปมในบทนจะเลอกปมมาจากเครองมอ Flash เลย โดยท าดงน ไปท 4.1 windows-> common libraries-> Buttons หลงจากนนจะปรากฏรป 4.2 หนาตางปมใหเลอกดงแลวใหเลอกปมตามตองการ
รปท 7 เพมปม Button ส าหรบเขาสบทเรยน
ขนท 5 เมอเราเลอกปมใสลงบนชนงานทเราสรางแลวดงรปกเรมเขยน Script ควบคมการท างานได 5.1 คลกเลอก buttons ทตองการ ใหท าการกดคางไวแลวเลอก ปมทตองการดงภาพท 8 5.2 ลากปมทตองการแลวท าการวางขอมลหรอปมทตองการ
รปท 8 เลอกปม Buttons ทตองการในหนาตาง Library Buttons
4.1
4.2
5.1
5.2
7
ขนตอนการเขยน Script ใหกบปมทสรางขนมาใหท าดงน คลกขวาบนปม ทสรางขนมา แลวเลอกค าสง Actions จะปรากฏหนาจอดงรปแลวใหพมพค าสงดงในรป
รปท 9 เพม Actions Script
5.3
5.4
8
ขนตอนท 6 เมอเขยน Script เรยบรอยแลวดงรป จากค าสง ทพมพวา gotoAndStop(“Scene 2”,1); เนองจาก script ทเราเขยนขนมานเราระบวาใหไปเปด Scene 2 ดงนนเราตองสราง Scene อก 1 Scene ทมชอ Scene วา Scene 2 วธการสราง Scene ใหท าดงน ไปทเมนบาร เลอก 6.1 Windows->other Panels->scene จะปรากฏหนาจอดงรป หลงจากนนให Click ทรป กจะได Scene 2 ขนมา
หมาเหต ชอ Scene สามารถเปลยนไดตามความเหมาะสมโดยดบเบลคลกใน Scene ทตองการจะเปลยนชอไดเลยตามทเราตองการ
ขนตอนท 7 จากรปในขนตอนท 6 ให Click เลอกค าวา Scene 2 หนาตางกจะเปด scene 2 ขนมาแลวใหตกแตงดงรปแลวก าหนดเงอนไขตามรปนะครบ
6.1
9
รปท 10 แสดงการวาดรปและสราง Text การ Input Text
สรางชองส าหรบรบขอมลโดยใชเครองมอ
7.1 T น ามาวาดลงบนพนทดงรปหลงจากนนใหก าหนดคณสมบตของกลองรบขอมลดงรปคอ 7.2 เลอกรปแบบเปน Input Text
7.3 ตงชอตวแปรวา inputname สรางปมตามขนตอน(ขนตอนเหมอนกบตอนสรางหนาแรก) หลงจากนน คลกขาวทปมแลวพมพ Script ดงรป
7.3
7.1
7.2
10
รปท 11 พมพ Action Script
ขนตอนท 8 สราง Scene 3 ขนมาโดยท าเหมอนกบขนตอนท 6 หลงจากนนกท าการตกแตง Scene 3 และสรางปมขนมาดงรป
11
รปท 12 ก าหนดหนา ยนดตอนรบ ประกอบไปดวย ค าน า จดประสงค ทดสอบกอนเรยน และ ผจดท า
ใหสรางชองส าหรบแสดงชอทผใชกรอกมาโดยก าหนดคณสมบตดงรป ส าหรบการสรางปม ค าน า จดประสงคและอนท าดงน 1. ใหใชเครองมอ ในกลองเครองมอท าการวาดรปหลงจากนนกใชเครองมอพมพ ขอความลงบนรปโดยก าหนดใหคณสมบตของขอความเปนแบบ static text - หลงจากนนใหกดปม Shift คางเอาไว - ใชmouse คลกเลอกทงตวหนงสอละรปภาพปม - คลกขาวแลวเลอกค าวา convert to symbol จะปรากฏหนาตางขนมาดงรป ใหท าการตงชอ และเลอกเปน button เสรจเรยบรอยกดปมOk
12
รปท 13 แสดงการ Convert to Symbol
13
ขนตอนท 9 ใหสรางปมใหครบดงรปในขนตอนท 8 หลงจากนนท าการเขยน script ใหกบทกปมดงน ปม ค าน า on(press) { gotoAndStop("preface",1); } ปม จดประสงค on(press) { gotoAndStop("objective",1); } ปมแบบฝกหด on(press) { gotoAndStop("test",1); } ปมผจดท า on(press) { gotoAndStop("About Us",1); } ปมออกจากโปรแกรม on(press) { fscommand("quit","true"); } ปมเขาสบทเรยน on(press) { gotoAndStop("learn",1); }
รปท 14 หนาตาง Scene
14
ขนตอนท 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("Test",1); }
การท าแบบฝกหดหรอขอสอบใน Scene ทชอวา Test ท าดงน ขนตอนท 1 เปด Scene ทชอวา Tests หลงจากนนตกแตงหนาตาของScene ดงภาพ
รปท 15 แบบฝกหด ก-ง
15
ดานหนาของค าตอบใหสรางเปนปมเพอจะใชเขยน 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 ดงรป
16
ขนตอนท 4 คลกท frame ท 2 แลวตกแตงดงรป
รปท 16 ขอท 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 แลวตกแตงดงรป
17
ในชองหมายเลข 1 ใหก าหนดคณสมบตดงรป ในชองหมายเลข 2 ใหก าหนดคณสมบตดงรป
รปท 17 แสดงขอมลคะแนนรวม และ ชอผทดสอบ
18
การใสไฟลเสยง 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) {
19
stopAllSounds(); gotoAndStop(1); } 7.สราง layer ขนมาใหมอก 1 layer 8.คลกขวาท frameท 2 layer ท 2 เลอก Insert Key frame หลงจากนนเลอกท frameท 2 layer ท 2 แลวไปเลอก file เสยงจาก library ดงรป น า file เสยงลากลงมาใน พนทของการท างาน อางอง : พนจนทร ธนวฒนเสถยร สรางงานมลตมเดยแอนเมชน Flash CS6 2556 กรงเทพฯ .