บทที่7 การแทรกไฟล์vdo และ sound - wordpress.com...4. ท...

27
บทที 7 การแทรกไฟล์ VDO และ Sound 7,1 การแทรกไฟล์ VDO โปรแกรม Flash นอกจากทา Animation ได้แล้วยังสามารถนาไฟล์ภาพเคลื่อนไหวอย่าง VDO เข้า มาใช้งานได้ เช่นการทาสื่อการสอนที่ต้องมีครูพูดเกริ่นนาเป็น VDO หรือการถ่ายทาเรื่องบางเรื่องที่ต้องเป็น ภาพของจริงเท่านั้น โปรแกรม Flash ลองรับการนาเข้าไฟล์หลายประเภท แต่ไฟล์ประเภทที่สะดวกที่สุดก็ คือไฟล์ FLV ซึ่งเป็นไฟล์ VDO ของโปรแกรม Flash ซึ่งสามารถ convert ได้จากโปรแกรมแปลงไฟล์ทั่ว ๆ ไป และยังสามารถหาไฟล์ FLV ได้ง่าย ๆ จาก Clip ของ YouTube 7.2 การแปลงไฟล์ VDO ในความเป็นจริงแล้ว Flash สามารถ import ไฟล์ต่าง ๆ ที่เป็น VDO เข้ามาได้เลย แต่มักจะเกิด ปัญหาการเข้ารหัสของไฟล์ VDO ทาให้เปิดได้บ้างไม่ได้บ้าง วิธีที่ง่ายที่สุดคือแปลงเป็นไฟล์ FLV เสียก่อน โดยโปรแกรมที่แนะนาคือ xilisoft video converter วิธีการแปลงไฟล์ทาได้ดังนี 1. เปิดโปรแกรม xilisoft video converter 2. คลิกทีProfile เพื่อเลือกว่าจะแปลงไฟล์เป็นไฟล์ใดใช้กับอุปกรณ์ใด ในที่นี ้ให ้เลือกเป็น picture and Animation -> FLV-Flash Video Format (*”flv) และกาหนดตาแหน่งของไฟล์ที่แปลงแล้วทีDestination 3. คลิกที่ปุ ่ม Add file แล้วเลือกไฟล์ต้นฉบับที่ต้องการจะแปลง 4. สามารถปรับแต่งค่าความละเอียดของไฟล์ ขนาดไฟล์ โดยปรับแต่งทางด้านขวาของโปรแกรม 51 โครงการฝึกอบรมเชิงปฏิบัติการผลิตสื่อการเรียนการสอน ไม่สงวนลิขสิทธิแต่อยากให้ครูเอาไปใช้เยอะ ครับ

Upload: others

Post on 07-Feb-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

บทท 7 การแทรกไฟลVDO และ Sound

7,1 การแทรกไฟลVDO

โปรแกรม Flash นอกจากท า Animation ไดแลวยงสามารถน าไฟลภาพเคลอนไหวอยาง VDO เขา

มาใชงานได เชนการท าสอการสอนทตองมครพดเกรนน าเปน VDO หรอการถายท าเรองบางเรองทตองเปน

ภาพของจรงเทานน โปรแกรม Flash ลองรบการน าเขาไฟลหลายประเภท แตไฟลประเภททสะดวกทสดก

คอไฟล FLV ซงเปนไฟล VDO ของโปรแกรม Flash ซงสามารถ convert ไดจากโปรแกรมแปลงไฟลทว ๆ

ไป และยงสามารถหาไฟล FLV ไดงาย ๆ จาก Clip ของ YouTube

7.2 การแปลงไฟล VDO

ในความเปนจรงแลว Flash สามารถ import ไฟลตาง ๆ ทเปน VDO เขามาไดเลย แตมกจะเกด

ปญหาการเขารหสของไฟล VDO ท าใหเปดไดบางไมไดบาง วธทงายทสดคอแปลงเปนไฟล FLV เสยกอน

โดยโปรแกรมทแนะน าคอ xilisoft video converter วธการแปลงไฟลท าไดดงน

1. เปดโปรแกรม xilisoft video converter

2. คลกท Profile เพอเลอกวาจะแปลงไฟลเปนไฟลใดใชกบอปกรณใด ในทนใหเลอกเปน picture

and Animation -> FLV-Flash Video Format (*”flv) และก าหนดต าแหนงของไฟลทแปลงแลวท

Destination

3. คลกทป ม Add file แลวเลอกไฟลตนฉบบทตองการจะแปลง

4. สามารถปรบแตงคาความละเอยดของไฟล ขนาดไฟล โดยปรบแตงทางดานขวาของโปรแกรม

51

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 2: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

5. ไฟลจะเขาไปอยในรายการ เตรยมพรอมทจะแปลงไฟล

6. กดทป ม เพอท าการ Convert ไฟล

7. ไฟลจะอยใน Folder ทเราก าหนดไว พรอมน าไปใชงาน

7.3 การบนทกไฟล Clip จาก YouTube

มหลายเวบไซตทมบรการบนทกไฟลจาก YouTube วธการคนหางาย ๆ เพยงพมพค าวา “ Save

Youtube” กจะพบเวบไซตมากมาย ในทนขอยกตวอยางเวบไซต http://downloadyoutubevideo.org/

ขนตอนการบนทกไฟล VDO ท าไดดงน

1. เปดเวบไซต Youtube พมพ http://www.youtube.com ทชอง Url

2. พมพ Clip Video ทตองการคนหา ในตวอยางตองการคนหา”วธการท าอาหาร”

3. คลกเขาไปทคลปวดโอ ใหคดลอก URL จากกลองขอมลทางดานขวาโดยการกดป ม Ctrl +C

52

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 3: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

4. เขาเวบไซต http://downloadyoutubevideo.org ตรงชองกรอกขอมลใหกด Ctrl+V เพอวาง URL

แลวกดป ม Download

5. จะปรากฏหนาใหคลกทป ม download video link โดยไฟลทจะ download มาจะเปนไฟล .FLV

ใหจดเกบไวใน Folder ทตองการ ชอของไฟลเบองตนจะเปน Vidio.flv ซงควรจะเปลยนให

สอดคลองกบเนอหาใน Clip

7.4 การน าไฟล VDO เขาไปใสใน flashแบบท 1

ใหจดเตรยมไฟล VDO จดเกบไวใน Folder เดยวกบไฟลชนงานเพอความสะดวกในการเรยกไฟล

VDO ขนมาใช และไมมปญหาต าแหนงของไฟลไมสอดคลองกนดวย วธการท ามดงน

1. ใหท าการ บนทกไฟล Flash กอน ในทนตงชอวา vdo.fla

2. ไปท File-> Import -> Import to stage

3. เลอกไฟล VDO ในตวอยางเปนไฟลชอวา guide.flv

4. ปรากฏหนาตางแสดงต าแหนงของไฟล VDO จากนนกด Next เพอสขนตอนตอไป

53

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 4: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

5. โปรแกรมจะถามถงรปแบบการน าไฟล Video เขามาใช จะปรากฏหวขอใหเลอกดงน

a. Prograssive download from a web server ดาวนโหลดไฟล Video จาก Web server ท

เกบไฟลนน

b. Stream from Flash Video Straming Service ดาวนโหลดไฟล Video แบบ Straming

จากผใหบรการ

c. Stream from Flash Communication Server ดาวนโหลดไฟล Video จาก Flash

Commuication Server

d. As Mobile Device Video bundled in SWF ใชส าหรบไฟลทน าเสนอผานมอถอ

e. Embed video in SWF and play in timeline แทรกไฟล Video ฝงเขาไปในชนงาน

f. Linked QuickTime video for publishing to Quicktime เชอมโยงกบไฟลประเภท MOV

6. ใหเลอก Prograssive download from a web server

7. เลอก Skin ของไฟล VDO ใหเหมาะสมกบ VDO

8. ตรงสวนของกลอง Color สามารถปรบแตงส และคา Alpha ความโปรงใส ของป มควบคมการ

เคลอนทและเสยงของ Video

9. จากนนกด Next และจบขนตอนดวยป ม Finish

10. ไฟล Clip Vdo จะเขาไปอยท Layer 1 โดยท

สามารถขยบไปมาตามต าแหนงทตองการได

11. กดป ม Ctrl + Enter เพอแสดงผลงาน

54

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 5: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

7.5 การน าไฟล VDO เขาไปใสใน flashแบบท 2

ใหจดเตรยมไฟล VDO จดเกบไวใน Folder เดยวกบไฟลชนงานเพอความสะดวกในการเรยกไฟล

VDO ขนมาใช และไมมปญหาต าแหนงของไฟลไมสอดคลองกนดวย วธการท ามดงน

1. ใหท าการ บนทกไฟล Flash กอน ในทนตงชอวา vdo2.fla

2. ไปท File-> Import -> Import to stage

3. เลอกไฟล VDO ในตวอยางเปนไฟลชอวา guide.flv

4. ปรากฏหนาตางแสดงต าแหนงของไฟล VDO เลอก Embed video in SWF and play in timeline

จากนนกด Next ให

5. ตงคาการ Embed ไฟล ตรงสวนของ symbol Type ถาเลอกเปน Embedded video จะท าให Clip

VDO แทรกเขาไปใน Frame ของ Layer ซงเราสามารถเลอนแถบ Play Head ไปมาได

55

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 6: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

7.6 การแทรกไฟลเสยง

เสยงทน ามาใชในงาน Animation สอการสอน งานบางงานใชเสยงเพลงประกอบ และเสยงเอ

ฟเฟกทสอดคลองกบการเคลอนทของ animation ท าใหงานออกมาดนาสนใจนาตดตาม มากกวาผลงานท

มแตภาพเคลอนไหวไมมเสยง เสยงทใชมลกษณะดงน

1. เสยงบรรยาย เสยงสนทนา ใชสอสารบอกเลากนระหวางตวละคร หรอเลาเรอง 2. เสยงบรรเลงประกอบใชสรางบรรยากาศของเรองราวใหนาเชอมากยงขน

3. เสยง FX ประกอบ เชน เสยงการเดน เสยงประตปด เสยงฟาผา

การใชเสยงตามลกษณะทบอกนนมรปแบบการแสดงเสยงทแตกตางกน เชนเสยงบรรเลงประกอบ

จะตองเปดคลอดตลอดทงเนอเรอง สวนเสยงสนทนาจะมเฉพาะชวง และเสยงประกอบทจะเขามาแทรก

เปนระยะ ซงการท างานเสยงกบ Flash ควรสราง Layer เสยง 3 Layer แยกตามหวขอขางตน

7.7 การน าไฟลเพลงเขามาใชเบองหลง

ลกษณะการน าเสยงดนตรหรอเพลงเขามาใชประกอบเบองหลง จะเลนตลอดทงไฟล เมอเพลงจบ

แลวกจะวนกลบมาจดเรมตนใหม ในไฟลตวอยางทเตรยมไวใหเปน Animation กระตายกระโดดจาก

ทางขวาไปซาย เราจะแทรกเสยงเพลงเขาไปโดยวธการดงน

1. ไฟลมดวยกน 3 Layer ซงเปน Layer ทมวตถอยแลว เราจงตองสราง Layer ขนมาใหมและเปลยน

ชอใหเปน Music ซง Frame จะถกสรางใหเทา ๆ กบ Layer ทมอยกอนหนาน

2. ไปท File ->Import->Import to Library แลวใหเลอกไฟลเพลงทเตรยมไว ในตวอยางนใชไฟล

เพลงทชอวา Cartoon2.mp3

3. คลกท Frame ท 1 ของ Layer music

56

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 7: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

4. ทแถบ Properties Inspector สวนของ Sound ใหเปลยนเปนชอไฟลเพลงทเรานะเขามา แลวให

ปรบแตงคาเปน loop เพอนใหเพลงวนไมมสนสด ส าหรบการตงคาสวนอน ๆ ถาตองการปรบแตง

มรายละเอยดดงน

a. Sound ชอไฟลเพลงหรอเสยง

b. Effect การเพมลกเลนใหไฟลเสยงเชน Left / Right Channel เลนเสยงออกล าโพง

ดานซายหรอขวาขางใดขางหนง Fade ไลเสยงจากล าโพงดานหนงไปยงอกดานหนง

c. Fade In – out ใหเสยงคอย ๆ ดงขนและเบาลง

d. Edit แกไขลกเลนเสยงขนสง โดยสามารถก าหนดจดของระดบความดงของเสยงได

e. Sync การตงคาการเลนเสยง มตวเลอกดงน

i. Event เลนเมอ Movie ถง Keyframe แรกของเสยง เสยงทเลนจะเรมจนจบ

ถงแมวา animation จะหมดแลวเสยงกยงคงเลนอยจนจบไฟลเสยง

ii. Start เลนเมอ Movie ถง Keyframe แรกของเสยง เสยงทเลนจะเรมจนจบ

ถงแมวา animation จะหมดแลวเสยงกยงคงเลนอยจนจบไฟลเสยง แตถาใช

Start เสยงจะเรมใหมนบจากจดการตงคา Start

iii. Stop ใชส าหรบหยดเสยง

57

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 8: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

iv. Stream เปนการ Synchronize เสยงใหเหมาะสมกบงาน Animation โดยจะม

ความเทยงตรงมากทสด มกใชกบการ Sync ปากตวละครระหวางสนทนา

v. Repeat จ านวนรอบในการวนไฟลเสยง

vi. Loop เสยงจะวนรอบเมอจบไฟลเสยงแลว

5. กดป ม Ctrl + Enter เพอแสดงผลงาน กระตายจะวงไปและมเสยงเพลงประกอบ

7.8 การน าไฟลเสยง Fx เขามาใช

ตามตวอยางท 1 กระตายโดดไปทางซาย แลวมเสยงเพลงประกอบ ซงยงขาดเสยงของการกระโดด

ของกระตาย โดยจะตองน าเสยงกระตายกระโดดไปวางไวบน Keyframe ทกระตายตกถงพนหญา มวธการ

ดงน

1. ไปท File ->Import->Import to Library แลวใหเลอกไฟลเสยงทเตรยมไว ในตวอยางนใชไฟลเสยง

ทชอวา jump.mp3

2. คลกKey frame ทกระตายตกถงพน ในตวอยางคอ Frame ท 10 20 30 ของ Layer Bunny

3. ทแถบ Properties Inspector สวนของ Sound เลอกไฟล jump ท าแบบนทก ๆ Frame ท 10 20

และ 30

4. กดป ม Ctrl + Enter เพอแสดงผลงาน กระตายจะวงไปและมเสยงเพลงประกอบและเสยงกระโดด

58

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 9: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

7.9 การแทรกไฟลเสยงพดของตวละคร

1. เขาไปแกไข Stage ของชนงาน mama โดยการดบเบลคลกทหวผหญง

2. สราง Layer Talk เพมขนมาเพอใชจดเกบเสยง

3. ไปท File ->Import->Import to Library

แลวใหเลอกไฟลเสยงทเตรยมไว ใน

ตวอยางนใชไฟลเสยงทชอวา talk.wav

4. ทแถบ Properties Inspector สวนของ

Sound เลอกไฟล talk และ ตงคาเปนแบบ Stream

5. กดป ม Ctrl + Enter เพอแสดงผลงาน จะพบวาเสยงพดยงไมทนจบ กจะวนเรมใหม เนองจากการ

ใชรปแบบ Stream จะตองสราง time line ใหสอดคลองกบเสยง ใหกดป ม F5 ท Layer talk ,face

eye ใน frame ท 177

6. น าภาพปากลงมาใสใน Layer Mouth

โดยไดเตรยมภาพปากไวใน Library

โดยขนตนดวย m- ตามดวยเสยงสระ a

e I o u ไปใสใน Frame ตาง ๆ ของ

Mouth

7. ใหน าไปใสโดยคลกท Frame แลวกด F6

แลวจงลากมาใสตามภาพ ควรจะสลบ

กบ Symbol m-c เพอใหปดปากและ

เปดปาก จนถง Frame สดทาย เทคนคการใสปากขยบใหสมจรงควรเลอกแถบ Play head โดยกะ

ระยะของการพดการปดปากใหลงจงหวะของเสยง

59

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 10: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

8. กดป ม Ctrl + Enter เพอแสดงผลงาน

การขยบปาก ไมจ าเปนตองท าทกตวค าพด เราสามารถสรางแมแบบการขยบปากตามเสยงของสระไดดง

รปภาพดานลาง เมอน ามาผสมกนเปนค าดานขวามอ

http://www.how2machinima.com/lipsync.jpg

60

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 11: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

บทท 8 การสรางระบบการท างานแบบ Interactive

โปรแกรม Flash มความสามารถในการสรางงาน animation ในแบบทผใชงานสามารถตอบโตกบ

ชนงานได โดยการใชค าสงตอบโตนน จะตองใชการเขยน Script เพอสงการ ซงภาษาทโปรแกรม Flash ใช

เปนภาษา Action Script ถาใครมพนฐานทางดานการเขยน Java และ Script จะท าใหการใชงาน งายขน

ส าหรบผ ทเขยนโปรแกรมไมเปน โปรแกรม Flash มสวนชวยเหลอในการใชงานอยบาง การอบรมครงน

ไมไดเจาะลกถงโครงสรางของภาษา เนองจากระยะเวลาอนจ ากด แตทางผจดท าเอกสารประกอบการ

อบรมเลมนกไดคดรปแบบระบบ Interactive ทใชบอย ๆ เตรยมไวใหศกษากน

8.1 การท าปมเมน

ในตวอยางนจะพดถงการสรางป มเมน เมอคลกทป มจะมเนอหาปรากฏขนมา โดยมรปดวยกน 4

รปไดแก น า ตนไม พระจนทร พระอาทตย โดยมขนตอนการทดงน

1. เปดไฟลตวอยางซงเตรยมวตถรปภาพและป มไวใหแลว โดยจะม 2 Layer ไดแก menu ไวส าหรบ

ใสภาพป ม และ content ไวใสรปภาพเนอหา

2. กด F5 ท Layer Menu ในเฟรมท 5 เพอใหภาพเมนปรากฏตลอดชนงาน

3. กด F6 ท Layer Content ในเฟรมท 2 เพอสราง Keyframe

61

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 12: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

4. ลาก Symbol water จาก Library ลงใน Layer Content ในเฟรมท 2 และขยายขนาดรปภาพให

พอเหมาะ เนองจาก Layer content อยดานหลงท าใหสามารถซอนสวนทเกดไวหลงกรอบเมนได

5. กด F6 ท Layer Content ในเฟรมท 3 เพอสราง Keyframe

6. ลาก Symbol tree จาก Library ลงใน Layer Content ในเฟรมท 3

7. กด F6 ท Layer Content ในเฟรมท 4 เพอสราง Keyframe

8. ลาก Symbol sun จาก Library ลงใน Layer Content ในเฟรมท 4

9. กด F6 ท Layer Content ในเฟรมท 5 เพอสราง Keyframe

10. ลาก Symbol moon จาก Library ลงใน Layer Content ในเฟรมท 5

11. ใน Layer content จะมKeyframe ตงท Frame ท 2-5 และ Frame ท 1 เปน Black Frame

12. ถาท าการทดสอบผลงานตอนนจะพบวา เรายงไมสามารถควบคมเมนได จะปรากฏภาพตาง ๆ วนแสดงผล เราจงตองเขยน Script สงใหหยดการท างานของ Animationตงแตตนเสยกอน

13. คลกท Layer Menu ใน Frame ท 1 กด F9 เพอเรยกหนาตางการท างานของ Action Script ขนมา

62

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 13: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

14. เพอความงายตอการใชงานใหเลอกตวชวยกอนโดยการคลกทป ม จะปรากฏ

หนาจอชวยเหลอ

15. ทบรเวณกลอง Actions Toolbox เลอกท Global Functions -> Timeline Control -> Stop จะ

ปรากฏ code ตามรปดานลาง บรรทดท 1 เขยนวา “ stop (); “ แสดงความหมายวาเมอวงท

Frame ท 1 ใหหยด

16. คลกไปทป ม p1

17. กด F9 เพอเรยกหนาตาง Action script ทบรเวณกลอง Actions Toolbox เลอกท ท Global

Functions -> Timeline Control ->goto

Actions Toolbox

Script Pane Script Navigator

Toolbar

63

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 14: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

18. เพมเตมการตงคา โดยคลกท gotoAndStop จะปรากฏชองใหแกไขคา ใหแกไขในชอง Frame

number เปน 2 หมายถงใหวงมาท Frame ท 2 และเลอกท Go to and stop เพอก าหนดใหเมอ

คลกป ม p1 แลวจะวงมาท Frame ท 2 แลวใหหยด

19. คลกทป ม P2 แกไขในหนาตาง Action Script Frame number เปน 3และเลอกท Go to and stop

20. คลกทป ม P3 แกไขในหนาตาง Action Script Frame number เปน 4และเลอกท Go to and stop

21. คลกทป ม P4 แกไขในหนาตาง Action Script Frame number เปน 5และเลอกท Go to and stop

22. ถาตองการใหเพยงแคน าเมาสไปวางแลวภาพเปลยนใหคลกท บรรทดท 1 เลอกตกท Roll Over

และเอาเครองหมายถกท Release ออก ใหท าแบบนทกป ม

23. ท าการทดสอบผลงาน จะพบวาเมอคลก หรอน าเมาสไปวางทเมนจะปรากฏภาพตาง ๆ กน

64

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 15: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

8.2 การปรบแตงคาของ event

Script ในสวนของ Event ใชส าหรบก าหนดวาให

กระท าสงใด ถงจะท างานค าสงตอไป เชน ตองกดป ม ก ท

คยบอรด ถงจะปรากฏภาพ VDO หรอ ถาน าเมาสออกจากป ม

จะปรากฏค าเตอนขนมา วธการใชงานใหคลกทบรรทดทม

ค าสงของ Event ปรากฏอยแลวจงคลกเพอสรางเครองหมาย

ถกในกลอง โดยท event สามารถใชหลาย ๆ event พรอมกนได โดยการใช Event มรายละเอยดการ

เลอกใชงานดงน

on (press) เมอสมผสหรอกดไปบนวตถ

on(release) เมอปลอยป มทกดลงไป

on(releaseOutside) เมอคลกคางไวทป มและเอาเมาสเลอนออกจากบรเวณป ม

on(keypress) เมอใชคยบอรดพมพ โดยก าหนดไดวาจะใหพมพตวอกษรใด หรอคยค าสง

on(rollover) เมอใชเมาสวางอยเหนอวตถ

on(rollout) เมอใชเมาสเลอนออกจากวตถ

on(dragOver) เมอมการคลกเมาสลากอยในวตถ

on(dragOut) เมอมการคลกเมาสลากออกนอกวตถ

การปรบแตงคาเปาหมายของ Goto

ค าสง Goto ท Action Script ทก าหนดใหไปยงทตาง ๆ โดยจะตองเลอก set คาดงตอไปน

Frame Number ระบหมายเลข Frame

Frame Label ระบชอของ Frame

Expression ระบคาตวเลขจากการค านวณทางคณตศาสตร

Next Frame ระบใหเลน Frame ถดไป

Previous Frame ระบใหเลน Frame กอนหนา

65

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 16: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

8.3 การควบคมการหยดและการเลนของ Animation

ในตวอยางเปน Animation กระตายกระโดด โดยตองการใหมป มควบคมกระตายใหกระโดดและ

หยด สามารถน าไปประยกตใชกบบทเรยนทมเนอหาทเปน Animationได โดยมวธการดงน

1. ไฟลตวอยางทเตรยมให มป ม 2 ป มไดแก ป ม play และ stop และถาท าการทดสอบ animation

จะพบวากระตายจะวงวนไปมาเรอย ๆ

2. คลกทป ม Play เพอใส Action Script บรเวณกลอง Actions Toolbox เลอกท Global Functions -

> Timeline Control ->Play จะปรากฏ Script ดงรป

3. คลกทป ม Stop เพอใส Action Script บรเวณกลอง Actions Toolbox เลอกท Global Functions -

> Timeline Control ->Stop จะปรากฏ Scriptดงรป

66

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 17: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

4. เมอท าการท าทดสอบผลงาน จะพบวาเมอกด Play กระตายจะวง เมอกด Stop กระตายจะหยด

แตขาของกระตายจะยงคงกาวไปมาอย

ถาตองการให Symbol ของกระตายหยดวงแลหยดกาวเทาจะตองท าขนตอนดงน

1. จากไฟลเดมใหปดการท างานของ ตวชวยเหลอโดยการคลกทป ม

2. พมพขอมลเพมในบรรทดท 3 โดย bunny เปนชอของInstance Name ของ Movie clip

3. ท าการทดสอบผลงาน โดยกดทป ม Play กระตายจะวง ถากดป ม Stop กระตายจะหยดวง แตเมอ

กดป ม Play กระตายกจะกระโดดแตไมกาวเทา

4. ใหแกไขป ม Play เพมบรรทดท 3 เพอสงการให Symbol กระตายวง เมอทดสอบแลวจะพบวา

กระตายหยดวงและวงตามทกดป ม Play และ Stop

67

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 18: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

5. ถาตองการสงใหเพลงบรรเลงหยดดวยพรอมกบป ม Stop ใหเพม code ลงไปทบรรทดท 4 ดงน

6. เมอทดสอบแลวเสยงเพลงจะหยดทงหมดทนทเมอกดป ม Stop

8.4 การท าแบบทดสอบแบบเลอกตอบ

1. สรางขอความแบบทดสอบ ค าสงใหพมพชอ กลองส าหรบใสชอ ลงใน Frame ท 1

2. คลกทเฟรมท 1 แลวสราง action script โดยพมพตามรปดานลาง เพอสรางตวแปล idname

ขนมา พรอมกบสงหยด Animation เมอถง Frame แรก

3. สรางกลอง Dynamic text ทบรเวณกลองทสรางขนมากอนหนาน ปรบขนาดใหพอดและใสคา

Instance Name ของ Dynamic text เปน idname เพอเปนตวแปรในการสงคา

68

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 19: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

4. สราง ป ม หรอน าป มเขามาใช เพอท าการสงคาของชอผสอบและใสคา Actionscript ลงไปดงน

เปนการสงใหเมอมการคลกทป มสงคา Text ชอผานตวแปร idname และเงอนไขทตองพมพชอ

แลวเทานนถงสามารถเรมท าแบบทดสอบได

5. กด F6 ใน Frame ท 2 แลวพมพขอความลงไปดงน เพอตงค าถามขอท 1

69

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 20: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

6. สรางหรอน าป มเขามาวางในแตละตวเลอก และใส Action script ลงไปแตละป มดงนส าหรบขอท

ตอบผด สงใหเมอคลกแลวใหวงไปท Frame ถดไป

7. ส าหรบขอทตอบถกใหใส Action Script ลงไปดงน โดยเพมสวนของการ + คาลงไปทตวแปล

point และใหวงไปท Frame ถดไป

8. คลกทคยเฟรมท 2 ใส ใส Action Script ลงไปดงน เพอท าการสงใหหยดเมอวงมาท Frame ท 2

9. สราง Keyframe ท 3 และท าสรางแบบทดสอบ ตามขนตอนท 5 ท าแบบนจนครบขอทตองการ ใน

ทนใหผ เรยนท าทงหมด 5 ขอ

70

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 21: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

10. กด F6 เพอสราง Keyframe ใน Frame ท 7 ซงใน Frame นจะเปน Frame จบทรายงานผลคะแนน

ใหสรางกลอง Dynamic text ลงไปดงรปดานลาง โดยตงคา Instance name วา Show

11. คลกท Keyframe ท 7 ใส ActionScript ลงไปดงน ถาขอสอบมกขอกใหเปลยนจาก 100/5 เปน

จ านวนตวเลขขอ และสวนทอยใน เครองหมายค าพด จะเปนค าทปรากฏขนบนหนาจอ โดยจะ

แสดงตวแปลดงน

- +myname+คอขอของผท าแบบทดสอบ

- +point+ คอคะแนนของผท าแบบทดสอบและ

- +ss+ คะแนนทมการคดเปน %

12.ทดสอบชนงาน เมอเราท าการกรอกชอ และท าแบบทดสอบ จดหมดทกขอโปรแกรมจะแสดงผล

คะแนนทได พรอมคดเปน %

71

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 22: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

8.5 การท าแบบฝกหดระหวางเรยนแบบแสดงกาโตตอบทนท

จากตวอยางแบบทดสอบทเตรยมไว ตองการใหผ เรยนคลกทชอขอใหปรากฏค าตอบถกหรอผด

ทนทโดยไมมการเกบคะแนน เปนเพยงแคกระตนใหผ เรยนไดคดเทานน ท าไดดงน

1. สรางป มขนมาหรอใชป มทมอยแลวจาก Library โดยก าหนด Actionของป มใหครบ

2. คลกขวาทชอ symbol ป ม b1 จากนนเลอก duplicate เพอคดลอก Symbol มาเพม แลวเปลยนชอ

วา b2 และก าหนดเปน Type แบบ Button เชนเดม

3. น าป ม B1 ลากไปวางไวในขอทผด และวางป ม B2 ลากไปวางในขอทถก

4. ดบเบลคลกลงบน symbol b1 เขาไปแกไขในสถานะของ Down โดยการคลกท Keyframe Down

จากนนวาดเครองหมายกากบาททหนาป ม แลวจงกดยอนกลบไปท Scene 1

72

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 23: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

5. ดบเบลคลกลงบน symbol b2 เขาไปแกไขในสถานะของ Down โดยการคลกท Keyframe Down

จากนนวาดเครองหมายถกทหนาป ม แลวจงกดยอนกลบไปท Scene 1

6. ทดสอบผลงาน เมอเราคลกไปทป มในขอทผดจะขนเครองหมายแจงวาผด ถาคลกป มในขอทถกจะ

ปรากฏเครองหมายแจงวาถก

8.6 การโหลดไฟล Flash เขามาใชรวมกน

การสรางผลงาน Flash ดวยไฟลเดยวอาจะท าใหไฟลมขนาดใหญตองใชเวลาในการโหลดไฟล

และยากตอการแกไขชนงาน แตถาหากมหลายไฟลกจะสามารถแยกการแกไขไฟลไดและลดภาระการ

โหลดของไฟล ในตวอยางนไดมการเตรยมไฟล m1.swf m2.swf m3.swf และm4.swf ซงเปนไฟลเนอหาท

ไดท าไวลวงหนา โดยจะตองคลกทเมนแลวใหชนงานปรากฏขน โดยท Menu ยงอยดานบนชนงานมวธการ

ดงน

1. สรางไฟลทเปนศนยกลางของการโหลดชนงานโดยตองวางแผนเรองขนาดไฟลใหถกตอง ใน

ตวอยางจะตองสราง Stage ทมขนาด 790 x

460 px โดยคลกท Modify ->Document เมอ

แกไขเรยบรอยแลวใหคลก ok

2. บนทกไฟลงานชอวา main.fla

3. บนทกไฟลงานอกครงในชอ menu.fla ซง

73

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 24: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

ในตอนนจะมไฟลดวยกน 2 ไฟล

4. เรมแกไขไฟล menu ดวยการสรางป มขนมา 4 ป ม จดต าแหนงใหอยดานบนสดของไฟล

5. ใหคลกในป มท 1 ใส Action Script ลงไปดงน คลกทตวชวย Global

Functions ->Browser/Network เลอก LoadMovie

6. คลกทบรรทดท 3 เพอแกไข URL เปน m1.swf เพอเปดไฟล m1 ขนมา และ Level 1 คอการโหลด

ไฟล m1 ขนมาอยใน Layer ชนท 1

7. ท าแบบนจนครบ 4 ป ม โดยเปลยนจาก m1 เปนm2 m3 m4 ตามเมน สวน Level ยงคงตงคาไวท

level 1 ทกป ม

8. ใหท าการบนทกผลงานเปนไฟล menu.swf หรอเมอท าการทดสอบผลงานไฟล menu จะมไฟล

menu.swf ปรากฏขนโดนอตโนมต ถาลองคลกทป มจะพบวาไฟลของสอการสอนจะมาทบตวป ม

นนกเพราะยงไมไดก าหนด Lavelใหกบเมน

9. กลบไปทไฟล main.fla ใหแกไขใส Action Script ทเฟรมท 1 โดยไปท Global Functions -

>Browser/Network เลอก LoadMovie แกไข URL เปน menu.swf เพอโหลดไฟล menuเขามา

บนชนงาน และตงคา Level 2 เพอใหเมนนนอยเหนอ เนอหา m1 m2 m3 m4

74

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 25: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

10. ท าการทดสอบไฟล main จะปรากฏเมนขนมาบนหนาจอ เมอคลกทป มใดจะมเนอหาปรากฏขน

ซงอยดานหลงป มตลอดเวลา

75

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 26: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

คยลดทส าคญของ Flash Tool bar A - Arrow/Cursor T - Text Tool P - Pencil I - Ink Bottle B - Paint Brush U - Paint Bucket E - Eraser D - Dropper M - Magnifier L – Lasso Frame F5 - Add frame Shift F5 - Delete Frame F6 - Add Key Frame F7 - Add Blank Key Frame F8 - Make Symbol Timeline Enter - Play Command/Control 0 (zero) - Rewind < - Previous Frame > - Next Frame Home - Goto First Scene End - Goto Last Scene Page Up - Goto Previous Scene Page Down - Goto Next Scene

ไฟล-File Ctrl+ R - Import Image/Sound/etc... Ctrl+ Shift R - Export to .swf/.spl/.gif/etc... Ctrl+ l Shift O - Open as Library วว-View Ctrl+ 1 - View movie at 100% size Ctrl+ l 2 - Show Frame Ctrl+ 3 - Show All Windows Ctrl+ L - Show/Hide Library Ctrl+ M - Modify Movie Properties Ctrl+ E - Toggle between Edit Movie& Edit Symbol Mode Ctrl+ Shift L - Show/Hide Timeline Ctrl+ Shift W - Show/Hide Work Area Modifying and editing Ctrl+ G - Group Ctrl+ U - Ungroup Ctrl+ B - Break Apart Ctrl+ Shift V - Paste in Place Ctrl+ D - Duplicate Ctrl+ A - Select All Ctrl+ Shift A - Deselect All Ctrl+ Shift O - Optimize Curves Ctrl+ K - Align Window Ctrl+ Shift S - Scale and Rotate Ctrl+ Shift Z - Remove Transform Ctrl+ Up Arrow - Move Ahead Ctrl+ Down Arrow - Move Behind Ctrl+ Shift Up Arrow - Bring to Front Ctrl+ Shift Down Arrow - Send to Back Ctrl+ T - Modify Font Ctrl+ Shift T - Modify Paragraph Ctrl+ left Arrow - Narrower Letter Spacing (kerning) Ctrl+ right Arrow - wider Letter Spacing (kerning)

76

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Page 27: บทที่7 การแทรกไฟล์VDO และ Sound - WordPress.com...4. ท แถบ Properties Inspector ส วนของ Sound ให เปล ยนเป

เอกสารอางอง

ภททรา เหลองวลาศ.. มอใหม Flash CS3 ใชงานอยางมอโปรฯ. กรงเทพ : ซเอดยเคชน.2551 Narin Roungsan. สรางการตน Animation ดวย Flash. กรงเทพ : โปรวชน.2551 อภชย เรองศรปยะกล. 2D Animation และ Interactive ดวย Flash 8. ซเอดยเคชน จ ากด , 2550. ก าพล ลลาภรณ .Flash Action Script.โปรวชน.2551 ดนย มวงแกว.Flash workshop 8: digiart.2549 ก าพล ลลาภรณ .Advanced Flash Action Script.โปรวชน.2544

เวบไซตทสามารถ หาความรเพมเตมได

1. http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=98&Itemid=31

2. http://knowflash.doubleclickspace.com/Ch3s007-P1.html 3. http://www.nmp.ac.th/2553/2553/study/4/tech04/21/standard/f02.html 4. http://alaska.reru.ac.th/flash/home.php 5. http://www.nr.ac.th/learning/flashforweb/indexflash.html 6. http://flashjournalism.com/book/ 7. http://www.howdoflash.net/ 8. http://flashkit.com 9. http://www.ahref.com 10. http://www.flashcentral.com 11. http://www.virtual-fx.net

77

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : [email protected]

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ