การสร้างบทเรียน cai ด้วย flash

15
จจจจจจจจจ จจจจจจจจจ จจจจจ จจจจจจจจจจจจจจ จจจ จจจ e-mail [email protected] tel 0833237853 กกกกกกกกกกกกกกก CAI กกกก Flash จจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจ จจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจ จจจจ CAI จจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจ จจจจจจจจจจจจจจจจจจจ CAI จจจจจจจจจจจจจจจจจจจ จจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจจ จจจจจจจจจจจจ จจจจจจจ 1 จจจจจจจจจจจจจจจจ flash cs3 จจจจจจ จจจจจจจจจจจจจจจจจจจ ActionScript 2.0 จจ จจจจ(จจจจจจจจจจจจจจจจจจจจจจจจจจจจ ActionScript 2.0 จจจจจจ จจจจ 1

Upload: krumac

Post on 27-Jul-2015

7.453 views

Category:

Documents


0 download

DESCRIPTION

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

TRANSCRIPT

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

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

การสร�างบทเรยน CAI ด้�วย Flashในก�รสร��งบทำน��ผู้��จั�ดทำ��ได�ก��หนดร�ปแบบฝั$งโคำรงสร��งด�งน��เพื่&'อเป)นแนวีทำ�งในก�รสร��งส&'อ CAI

เม&'อออกแบบโคำรงสร��งเสร+จัเร�ยบร�อยแล�วีก+เร,'มลงม&อสร��งส&'อ CAI

ทำ�'ต้�องก�รต้�มร�ปแบบทำ�'ได�ออกแบบไวี�ได�แล�วีนะคำร�บก�รสร��งทำ��ด�งน��นะคำร�บขั้��นทำ�' 1 เม&'อเป/ดโปรแกรม flash cs3 ขั้0�นม�แล�วีเล&อกร�ปแบบเป)น ActionScript 2.0 นะคำร�บ(เพื่ร�ะในบทำน��จัะใช้�ก�รเขั้�ยนแบบ ActionScript 2.0 นะคำร�บ

หน�� 1

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

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

ขั้��นทำ�' 2 ก��หนดขั้น�ดแต้2ในบทำน��จัะได�ขั้น�ดต้�มทำ�'โปรแกรม flash

cs3 ก��หนดม�ให�แล�วีนะคำร�บขั้��นทำ�' 3 เร,'มสร��งบทำเร�ยน CAI ก�นเลยนะคำร�บ สร��งหน��แรกคำ&อหน�� ทำ�กทำ�ยหน��แรก ออกแบบหน��ต้�ขั้องต้�วีโปรแกรมให�สวียง�ม(จัะทำ��ต้�มร�ปก+ได�นะคำร�บ)คำล,3กขั้วี�ทำ�' frame ทำ�'ต้อ�งก�รเล&อก Actions หย4ดแล�วีพื่,มพื่� Script ด�งน��stop();

ขั้��นต้อนทำ�' 4 ให�สร��งป45มขั้0�นม�หน0'งป45มในบทำน��จัะเล&อกป45มม�จั�กเคำร&'องม&อ Flash เลยนะคำร�บ โดยทำ��ด�งน�� ไปทำ�' window-

>common libraries->Buttons หล�งจั�กน��นจัะปร�กฏหน��ต้2�งป45มให�เล&อกด�งร�ป แล�วีให�เล&อกป45มต้�มต้�องก�ร

ขั้��นทำ�' 5 เม&'อเร�เล&อกป45มใสลงบนช้,�นง�นทำ�'เร�สร��งแล�วีด�งร�ปก+เร,'มเขั้�ยน Script คำวีบคำ4มก�รทำ��ง�นได�เลยคำร�บ

หน�� 2

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

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

ขั้��นต้อนก�รเขั้�ยน Script ให�ก�บป45มทำ�'สร��งขั้0�นม�ให�ทำ��ด�งน��นนะคำร�บ คำล,3กขั้วี�บนป45มทำ�'สร��งขั้0�นม� แล�วีเล&อกคำ��ส�'ง Actions จัะปร�กฏหน��จัอด�งร�ปแล�วีให�พื่,มพื่�คำ��ส�'งด�งในร�ปนะคำร�บ

ขั้��นต้อนทำ�' 6 เม&'อเขั้�ยน Script เร�ยบร�อยแล�วีด�งร�ป จั�กคำ��ส�'ง ทำ�'พื่,มพื่�วี2� gotoAndStop(“Scene 2”,1); เน&'องจั�ก script ทำ�'เร�เขั้�ยนขั้0�นม�น��เร�ระบ4วี2�ให�ไปเป/ด Scene 2 ด�งน��นเร�ต้�องสร��ง Scene อ�ก 1 Scene ทำ�'ม�ช้&'อ Scene วี2� Scene 2 วี,ธ�ก�รสร��ง Scene ให�ทำ��ด�งน�� ไปทำ�'เมน�บ�ร� เล&อก window->other

Panels->scene จัะปร�กฏหน��จัอด�งร�ป หล�งจั�กน��นให�คำล,3กทำ�'ร�ป ก+จัะได� Scene 2 ขั้0�นม�

หน�� 3

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

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

หม�เหต้4ช้&'อ Scene ส�ม�รถเปล�'ยนได�ต้�มคำวี�มเหม�ะสมโดยด�บเบ,ลคำล,3กใน Scene ทำ�'ต้�องก�รจัะเปล�'ยนช้&'อนะคำร�บขั้��นต้อนทำ�' 7 จั�กร�ปในขั้��นต้อนทำ�' 6 ให�คำล,3กเล&อกคำ��วี2� Scene 2

หน��ต้2�งก+จัะเป/ด scene 2 ขั้0�นม�แล�วีให�ต้กแต้2งด�งร�ปแล�วีก��หนดเง&'อนไขั้ต้�มร�ปนะคำร�บ

สร��งช้2องส��หร�บร�บขั้�อม�ลโดยใช้�เคำร&'องม&อ T น��ม�วี�ดลงบนพื่&�นทำ�'ด�งร�ปหล�งจั�กน��นให�ก��หนดคำ4ณสมบ�ต้,ขั้องกล2องร�บขั้�อม�ลด�งร�ปคำ&อ เล&อกร�ปแบบเป)น Input Text แล�วีต้��งช้&'อต้�วีแปรวี2� iname

สร��งป45มต้�มขั้��นต้อน(ขั้��นต้อนเหม&อนก�บต้อนสร��งหน��แรก) หล�งจั�กน��น คำล,3กขั้�วีทำ�'ป45มแล�วีพื่,มพื่�Script ด�งร�ป

หน�� 4

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

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

ขั้��นต้อนทำ�' 8 สร��ง Scene 3 ขั้0�นม�โดยทำ��เหม&อนก�บขั้��นต้อนทำ�' 6หล�งจั�กน��นก+ทำ��ก�รต้กแต้2ง Scene 3 และสร��งป45มขั้0�นม�ด�งร�ป

ให�สร��งช้2องส��หร�บแสดงช้&'อทำ�'ผู้��ใช้�กรอกม�โดยก��หนดคำ4ณสมบ�ต้,ด�งร�ปส��หร�บก�รสร��งป45ม คำ��น�� จั4ดประสงคำ�และอ&'นทำ��ด�งน��

1. ให�ใช้�เคำร&'องม&อ ในกล2องเคำร&'องม&อทำ��ก�รวี�ดร�ปหล�งจั�กน��นก+ใช้�เคำร&'องม&อพื่,มพื่�ขั้�อคำวี�มลงบนร�ปโดยก��หนดให�คำ4ณสมบ�ต้,ขั้องขั้�อคำวี�มเป)นแบบ static text นะคำร�บ -หล�งจั�กน��นให�กดป45ม Shift คำ��งเอ�ไวี� -ใช้�mouse คำล,กเล&อกทำ��งต้�วีหน�งส&อละร�ปภ�พื่ป45ม

หน�� 5

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

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

- คำล,กขั้�วีแล�วีเล&อกคำ��วี2� convert to symbol จัะปร�กฎหน��ต้2�งขั้0�นม�ด�งร�ป ให�ทำ��ก�รต้��งช้&'อ และเล&อกเป)น button เสร+จัเร�ยบร�อยกดป45ม Ok

ขั้��นต้อนทำ�' 9 ให�สร��งป45มให�คำรบด�งร�ปในขั้��นต้อนทำ�' 8 หล�งจั�กน��นทำ��ก�รเขั้�ยน script ให�ก�บทำ4กป45มด�งน��ป45ม คำ��น��on(press){

gotoAndStop("perface",1);}ป45ม จั4ดประสงคำ�on(press){

gotoAndStop("objective",1);}ป45มแบบฝั;กห�ดon(press){

gotoAndStop("test",1);}ป45มผู้��จั�ดทำ��on(press){

gotoAndStop("create",1);}ป45มเขั้��ส�2บทำเร�ยนon(press){

หน�� 6

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

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

gotoAndStop("learn",1);}ป45มออกจั�กโปรแกรมon(press){

fscommand("quit","true");}ขั้��นต้อนทำ�' 10 สร��ง Scene ใหม2ขั้0�นม� 5 Scene ให�ม�ช้&'อด�งน��เพื่&'อให�สอดคำล�องก�บ script ทำ�'เขั้�ยนขั้0�นม�โดยก�รสร��งจัะเหม&อนก�บขั้��นต้อนทำ�' 6 แต้2จัะแต้กต้2�งต้รงทำ�'เร�ต้�องทำ��ก�รเปล�'ยนช้&'อ Scene ให�เป)นช้&'อด�งน�� preface, objective, test, create, learn โดยก�รเปล�'ยนช้&'อโดยด�บเบ,ลคำล,3กใน Scene ทำ�'ต้�องก�รจัะเปล�'ยนช้&'อในช้2อง Scene ด�งร�ปถ��ต้�องก�รเปล�'ยนอ�นไหนก+ให�ด�บเบ,ลคำล,3กใน Scene น��น

เม&'อเปล�'ยนช้&'อเสร+จัแล�วีให�ต้กแต้2งแต้ละ Scene ให�สอดคำล�องก�บเน&�อห�ขั้อง Scene น��นโดยทำ�'จัะต้กแต้2ง Scene ไหนก+ให�เล&อก Scene จั�กช้2อง Scene ด�งร�ปด��นบนขั้��นต้อนทำ�' 11 สร��งป45มคำล,กกล�บหน��หล�กขั้องแต้2ละ Scene วี,ธ�ทำ��ให�สร��งป45มขั้0�นม�หล�งจั�กน��นให�พื่,มพื่� Script ให�ก�บป5มด�งน��on(press){

gotoAndStop("Scene 3",1);}

ก�รทำ��แบบฝั;กห�ดหร&อขั้�อสอบใน Scene ทำ�'ช้&'อวี2� Test ทำ��ด�งน��

หน�� 7

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

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

1 เป/ด Scene ทำ�'ช้&'อวี2� Tests หล�งจั�กน��นต้กแต้2งหน��ต้�ขั้อง Scene ด�งภ�พื่

ด��นหน��ขั้องคำ��ต้อบให�ส�ร�งเป)นป45มเพื่&'อจัะใช้�เขั้�ยน Script เม&'อทำ��หน��แรกด�งร�ปแล�วีให�คำล,3กขั้วี�ทำ�' frame ทำ�'1 แล�วีเล&อก Actions

แล�วีเขั้�ยน Script ให�ก�บ frame แรกด�งน��stop();var sum;sum=0;2 เขั้�ยน script ให�ก�บป45มขั้�อทำ�'ถ�กด�งน��on(press){

gotoAndStop(2);sum++;

}3 เขั้�ยน script ให�ก�บป45มขั้�อทำ�'ผู้,ดด�งน��on(press){

gotoAndStop(2);}

หน�� 8

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

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

เม&'อทำ�� frame แรกเสร+จัเร�ยบร�อยแล�วีให�สร��ง frame ทำ�'2 โดยคำล,3กทำ�' frame ทำ�' 2 แล�วีเล&อกคำ��วี2� Insert Keyframe ด�งร�ป

4 คำล,3กทำ�' frame ทำ�' 2 แล�วีต้กแต้2งด�งร�ป

5 เขั้�ยน script ให�ก�บป45มขั้�อทำ�'ถ�กด�งน��on(press){

gotoAndStop(3);sum++;

}6 เขั้�ยน script ให�ก�บป45มขั้�อทำ�'ผู้,ดด�งน��on(press){

gotoAndStop(3);}7 เม&'อทำ�� frame ทำ�' 2 เสร+จัเร�ยบร�อยแล�วีให�สร��ง frame ทำ�'3 โดยคำล,3กทำ�' frame ทำ�' 3 แล�วีเล&อกคำ��วี2� Insert Keyframe

หน�� 9

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

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

8 คำล,3กทำ�' frame ทำ�' 3 แล�วีต้กแต้2งด�งร�ป

ในช้2องหม�ยเลขั้ 1 ให�ก��หนดคำ4ณสมบ�ต้,ด�งร�ป

ในช้2องหม�ยเลขั้ 2 ให�ก��หนดคำ4ณสมบ�ต้,ด�งร�ป

หน�� 10

1

2

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

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

การใส�ไฟล์�เสยง1.น��เส�ยงเขั้��ม�ในโปรแกรม flash cs3 โดยทำ��ด�งน��

2.เม&'อน��เส�ยงเขั้��ม�แล�วีให�สร��ง scene ทำ�'ต้�องก�รใส2เส�ยงหร&อเล&อก scene ทำ�'ต้�องก�รใส2ไฟล�เส�ยงหล�งจั�กน��นให�สร��งป45มขั้0�นม� 2

ป45มโดยใช้�เคำร&'องม&อ window->common libraries-

>Buttons เล&อกป45มทำ�'ต้�องก�ร หล�งจั�กน��นทำ��ก�รเล&อกป45มทำ��งสองป45มแล�วีคำล,3กขั้วี� เล&อก convert to Symbol ->movie clip

3. ด�บเบ,ลคำล=กทำ�'ไฟล� movie clip ทำ�'สร��งขั้0�นม� หล�งจั�กน��นให�คำล,3กขั้�วีใน layer ทำ�' 1 frame ทำ�' 1 เล&อก action หล�งจั�กน��นให�ใส scrip ด�งน��stop();stopAllSounds();

หน�� 11

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

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

4. สร��ง frame ใหม2อ�ก 1 frame ใน layer ทำ�' 1 จัะม�อย�2 2

frame หล�งจั�กน��นให�คำล,3กทำ�' frame ทำ�' 1 ด�งร�ป

5. คำล,3กขั้วี�ทำ�'ร�ป play แล�วีเล&อก action แล�วีใส2 script ด�งน��on(release){gotoAndStop(2);}6. เล&อก frame ทำ�' 2 แล�วีคำล,3กขั้วี�ทำ�'ร�ป stop แล�วีเล&อก action

แล�วีใส2 script ด�งน��on(release){stopAllSounds();gotoAndStop(1);}7.สร��ง layer ขั้0�นม�ใหม2อ�ก 1 layer

8.คำล,3กขั้วี�ทำ�' frame ทำ�' 2 layer ทำ�' 2 เล&อก Insert Keyframe

หล�งจั�กน��นเล&อกทำ�' frame ทำ�' 2 layer ทำ�' 2 แล�วีไปเล&อก file เส�ยงจั�ก library ด�งร�ป

หน�� 12

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

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

น�� file เส�ยงล�กลงม�ใน พื่&�นทำ�'ขั้องก�รทำ��ง�น (เสร+จัเร�ยบร�อยแล�วีคำร�บ)

หน�� 13