การสรางบทเรยน 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 กรงเทพฯ .