หนังสือเรียนรายวิชา การสร้างแอนิเมชี่น ม.4

96 Sound Effect เพลงและดนตรีประกอบ เพลงและดนตรปี ระกอบเปน็ ส่งทีช่ ว่ ยส่ือใหผ้ ู้ชมได้เข้าใจ และสมั ผัสถงึ อารมณ์ ความรู้สึกของตวั ละครในบรรยายน้นั ไดด้ ียิ่งขึน้ เช่น เสยี งเพลงซึ่ง เมอ่ื ตวั ละครอยู่ใน อารมณ์ซงึ่ กําลงั ร้องไห้ เสียงเพลงหวานๆ เม่ือตวั ละครมคี วามรัก หรอื เสยี งเพลงมนั ๆ เม่ือมฉี ากต่ืนเต้น การนําเขา้ ไฟลเ์ สยี ง เราสามารถนาํ เขา้ ไฟล์ไดต้ ามชนิดเสียงตอ่ ไปน้ี - Sun AU(.au) ใช้ไดท้ ั้งวินโดวสแ์ ละแมคอนิ ทอช - MP 3 (.mp3) ใชไ้ ด้ทัง้ วนิ โดวส์และแมคอินทอช - Wave (.wav) ใช้ได้กับวินโดวส์เทา่ น้ัน - Audio Interchange File Format (.aiff)ใช้ไดก้ ับแมคอนิ ทอชเท่าน้ัน - Adobe Soundbooth (.asnd) ) ใช้ไดท้ ง้ั วินโดวสแ์ ละแมคอนิ ทอช - Sound Desingner II (.sd2) ใชไ้ ดก้ ับแมคอนิ ทอชเทา่ นน้ั - Sound-only QuickTime movies (.mov , .qt) ) ใชไ้ ด้ทงั้ วินโดวส์และแมคอนิ ทอช - System 7 sounds (.snd) ใช้ไดก้ ับแมคอนิ ทอชเท่านน้ั การนําเขา้ ไฟลเ์ สยี งจะมีวธิ กี ารดังต่อไปนี้ 1. ไปทเี่ มนู File -> Import -> Import to Library... บทท่ี 7 การใชง้ านเสยี ง

97 2. ปรากฏหนา้ ต่าง Import to Library ขึน้ มา เลอื กไฟล์ทจี่ ะนาํ เขา้ มาให้ แลว้ กดปุ่ม Open 3. เสียงท่เี ราเลอื กจะถกู นําเขา้ ไปไวใ้ น library ดงั รปู บทที่ 7 การใชง้ านเสยี ง

98 4. จากน้นั เลือกเฟรมที่ตอ้ งการจะใสเ่ สียง 5. ไปทพี่ าเนล properties ทส่ี ่วนของ Name: ใหเ้ ลอื กท่เี สียงที่เรา import เขา้ มา บทที่ 7 การใชง้ านเสียง

99 6. ในชอ่ ง Effect จะเปน็ การกําหนดเอฟเฟก็ ต์ให้กบั เสยี ง โดยมีรปู แบบตา่ ง ๆ ดังน้ี - None ไมใ่ ช้เอฟเฟก็ ตใ์ ด ๆ - Left/Right Channel คอื ใหเ้ สยี งออกลําโพงซ้ายหรอื ขวาเท่านน้ั - Fade to Right/Left คอื การไลเ่ สียงจากลาํ โพงซ้ายว่ิงไปขวา หรอื จากลาํ โพงขวาวิ่งไปซา้ ย - Fade In คอื ให้เสยี งเริม่ ต้นเบา และค่อย ๆ ดงั ข้ึน - Fade out คอื ให้เสียงเรม่ิ ต้นดัง และคอ่ ย ๆ เบาลง - Custom คือ ใหเ้ รากาํ หนดเอฟเฟก็ ตเ์ สียงเอง 7. ในสว่ นของ Synce (Synchronize) คอื การกาํ หนดวา่ จะให้เรม่ิ ตน้ และ จบการเล่นเสยี งอย่างไร ซ่งึ จะประกอบด้วย การตงั้ ค่าตา่ งๆดงั นี้ บทที่ 7 การใช้งานเสยี ง

100 - Event : กําหนดให้เสยี งเล่นโดยมคี วามสัมพันธ์กบั เหตุการณต์ า่ ง เช่น เมื่อกดปุม่ หรือเม่อื animation เลน่ เฟรมแรก ในกรณที ีใ่ สเ่ สียงในเฟรมหาก animation กับ มาเล่นซา้ํ ท่เี ฟรมเดมิ จะทําใหเ้ กิดการเล่นเสยี งเดิมอีกคร้ังและเสียงจะเล่นซ้อนกัน - Start : มลี ักษณะคล้ายกบั แบบ Event แตจ่ ะไม่มีการเล่นเสียงซอ้ นกัน - Stop : หากมีการเลอื ก Sync แบบนีจ้ ะทําให้เสยี งหยดุ เลน่ - Stream : Sysnc แบบน้ีจะมกี ารเลน่ ตามความยาวของเฟรม เมอ่ื Animation เล่นจนหมดเฟรม เสยี งจะหยดุ เล่น และหาก Animation วนไปยังเฟรมแรก ที่ใส่เสยี ง เสยี งเร่มิ เล่นใหมท่ นั ที Sound Loop - Repeat : เล่นซ้าํ จํานวนรอบทีร่ ะบุไว้ด้านหลงั - Loop : เล่นซาํ้ ไปเร่อื ย ๆ 8. เมือ่ ใส่เสียงลงไปในเฟรมเรยี บรอ้ ย ใหล้ องเพิ่มเฟรม สังเกตท่ีเฟรมมีลักษณะเป็น กราฟดงั ภาพ บทท่ี 7 การใช้งานเสียง

101 9. หากต้องการลบไฟล์เสียงในเฟรม ใหค้ ลิกขวาเลอื กคยี เ์ ฟรมท่ใี ส่เสียง เลอื กคาํ สั่ง Clear Keyframe สังเกตว่าเฟรมจะไมม่ ีภาพรปู คลน่ื เสียงอกี ตอ่ ไป แสดงวา่ เสยี ง ถกู ลบออกจากเฟรมนัน้ แลว้ ใส่เสียงใน flash ไม่ได้ ? 1. สําหรับวิธีทแ่ี กไ้ ขจะใช้ Nero WaveEditor ในการแกไ้ ขกอ่ นอน่ื มาดตู ัวอยา่ ง เม่ือมีการ Import เสียงเขา้ มา จะปรากฎ Error ดังรูป บทท่ี 7 การใช้งานเสียง

102 2. สาํ หรบั การแกไ้ ขก็ใช้ Nero WaveEditor เปดิ ไฟลเ์ สียงขึน้ มา 3. จากน้ันไปทเ่ี มนู File เลอื ก Save As 4. ทําการ save ไฟล์ และตงั้ ช่อื ตามตอ้ งการ 5. หลังจากนัน้ ก็ทาํ การ Import ไฟล์เสยี งทเ่ี รา save ไว้ เขา้ มาใน Flash ใหมอ่ ีกคร้งั บทที่ 7 การใชง้ านเสียง

การสรา้ งวัตถุใหเ้ คลอ่ื นไหว บทที่ โดยเคร่ืองมือ Bone Tool การสรา้ งวตั ถใุ ห้เคลือ่ นไหว โดยเครอื่ งมอื Bone Tool

104 Bone Tool การสรา้ งวตั ถใุ หเ้ คลือ่ นไหวโดยเครื่องมือ Bone Tool เครื่องมอื สาหรบั สร้างโครงกระดกู (Bone Tool) และเครอ่ื งมือ (Bind Tool) เป็นเคร่อื งมอื ที่สามารถเชื่อมตอ่ โครงกระดูกเพ่อื ใส่เข้าไปบนการ์ตูน ทาํ ให้ การ์ตนู มีการเคลือ่ นไหวที่เป็นอสิ ระมากยง่ิ ขน้ึ โดยขน้ั ตอนการใช้งานของเครื่องมอื (Bone Tool) พาแนล Motion Editor พาแนล Motion Editor เป็นลกู เล่นใหมข่ อง Flash CS5 เพราะจะทาให้เรา สามารถปรับแต่งรายละเอยี ดของการเคลอ่ื นไหวได้ละเอยี ดขนึ้ บทท่ี 8 การสรา้ งวตั ถุให้เคลือ่ นไหวโดยเครอื่ งมือ Bone Tool

105 คาํ สัง่ Motion Tween สาํ หรบั คําสั่ง Motion Tween ในโปรแกรม Flash เป็นเวอรช์ ันล่าสดุ น้ีจะตา่ ง ออกไปจากเดิม ไม่วา่ จะเป็นการใชง้ านในลักษณะท่ีต่างกันแล้ว เราจะพบวา่ มีลกู เล่นใหมๆ่ ทเ่ี สริมข้ึนมาอกี มากมาย รู้จักกับเครื่องมอื Bone Tool สรา้ งแอนเิ มชนั ด้วยเครือ่ งมือ (Bone Tool) นั้น เป็นการสรา้ งข้อตอ่ กระดกู ใหก้ บั ชน้ิ งาน และควบคุมการเคลื่อนไหวของกระดกู ช้นิ งานแบบอัตโนมัติ ทาํ ใหช้ น้ิ งานมี การเคลอ่ื นไหวท่ีสมจรงิ มากขนึ้ แตเ่ ดมิ นนั้ การเคลือ่ นไหวลักษณะน้ีจะใชส้ รา้ งแอนิเมชัน แบบ Frame by Frame ซ่งึ ต้องขยับช้นิ งานทีละเฟรม ซงึ่ ทาํ ได้ช้าและยงุ่ ยาก ขอ้ ตอ่ กระดกู ทีเ่ ชอ่ื มต่อแต่ละช้ิน นอกจากน้ี ยังมเี คร่ืองมือทใ่ี ชจ้ ดั การกบั ข้อตอ่ กระดูกให้กบั ชน้ิ งานอกี เคร่ืองมือหนง่ึ คือ Bind Tool เป็นเครือ่ งมือทใี่ ชค้ วบคมุ การเคล่ือนไหวของขอ้ ต่อกระดูกแบบกาํ หนดเองใช้ใน กรณีทไ่ี ม่ต้องการให้ขอ้ ตอ่ บางจุดเคล่อื นไหวตามข้อตอ่ ช้นิ งานเก่า บทท่ี 8 การสร้างวัตถใุ ห้เคลื่อนไหวโดยเคร่ืองมอื Bone Tool

106 สรา้ งแอนเิ มชันเช่อื มตอ่ ชิน้ งานให้เคลื่อนไหวด้วย Bone Tool การสร้างแอนเิ มชนั แบบน้ี จะตอ้ งเลอื กรูปแบบการทํางานเปน็ Action Script 3.0 เสยี กอ่ น แลว้ ก่อนทีจ่ ะใส่กระดูกจะต้องตรวจสอบช้ินงานก่อนวา่ ภาพถูก Group ไวห้ รือไม่ หาก Group ภาพไว้จะไม่สามารถใสข่ อ้ ต่อกระดูกได้และควรแยกเลเยอรข์ อง ชนิ้ ส่วนที่ต้องการใส่กระดกู ออกจากสว่ นอืน่ ๆ เพือ่ ใหส้ ามารถแก้ไขงานได้งา่ ย แยกเลเยอรข์ องแตล่ ะชิน้ งาน โดยการสร้างแอนิเมชันเคล่อื นไหวด้วย Bone Tool มีดงั น้ี 1. คลกิ เครื่องมือ Bone Tool เพอ่ื ใส่กระดูกใหก้ ับช้นิ งาน 2. จากนั้นเมาสจ์ ะเปล่ียนเป็นรปู ใหค้ ลกิ บนชิน้ งานเริ่มต้น แล้วลากจากจุดเร่มิ ตน้ ท่ี จะใชเ้ ป็นจดุ หมุนของชิน้ งานท่หี น่งึ ไปยังชิ้นทีส่ อง ระหว่างที่ลากจะปรากฏกระดุกสเี ทา เมือ่ เสรจ็ จะไดก้ ระดกู เปน็ สสี ้ม บทท่ี 8 การสรา้ งวตั ถใุ ห้เคลื่อนไหวโดยเครือ่ งมอื Bone Tool

107 1 2 จากนั้นจะปรากฏเลเยอร์การเคล่อื นไหวชื่อ Armature ขั้นมา นอกจากน้เี รายงั สามารถใสก่ ระดกู เชอื่ มต่อช้ินงานก่ชี ้นิ ก็ไดต้ ามตอ้ งการ จะได้เลเยอรเ์ คล่ือนไหว บทท่ี 8 การสร้างวตั ถุให้เคล่อื นไหวโดยเคร่อื งมือ Bone Tool

108 3. สร้างการเคล่อื นไหวโดยคลิกเมาสข์ วาเฟรมทตี่ อ้ งการ แล้วเลือกคําสงั่ Insert Pose หรอื คลกิ เลือกเมาสไ์ ปยังเฟรมทตี่ ้องการ 4. จากนั้นใชเ้ คร่อื งมือ Select Tool ขยับกระดูกไปตามทิศทางทตี่ อ้ งการ เมอ่ื เสรจ็ แล้วใหท้ ดลองผลโดยการกดแป้น Ctrl + Enter จะพบว่าข้อต่อกระดกู จะคอ่ ย ๆ ขยับไปตามทศิ ทางทกี่ าํ หนด ยกเลิกการสร้างการเคลอื่ นไหวด้วยขอ้ ต่อกระดกู เมื่อเราต้องการยกเลกิ การสรา้ งการเคลอื่ นไหวด้วยข้อต่อกระดูก สามารถทําได้ 2 กรณี ดังน้ี ยกเลิกการเคลือ่ นไหว เมอ่ื เราต้องการยกเลกิ การเคลือ่ นไหวของกระดกู ในสว่ นทีท่ ําการขยบั ไปแล้ว เราสามารถทําได้โดยคลกิ เมาสข์ วาที่คีย์เฟรม แลว้ เลอื กคาํ สง่ั Remove Armature จากนัน้ คียเ์ ฟรมของเลเยอร์ Armature จะกลายเปน็ สเี ทา เราก็จะไดช้ ้นิ งานทเ่ี ราได้สรา้ งไวเ้ ม่อื ตอนเริม่ ตน้ คลกิ เมาส์ขวาท่ี คยี ์เฟรม แล้ว เลือกคาํ สัง่ Remove Armature บทท่ี 8 การสรา้ งวตั ถใุ ห้เคลอื่ นไหวโดยเคร่ืองมอื Bone Tool

109 คีย์เฟรมของเลเยอร์ Armature จะกลายเป็นสเี ทา ยกเลกิ เมอื่ กาํ หนดจุดสนิ้ สดุ การเคล่ือนไหวใหม่ หากต้องการกําหนดจดุ สน้ิ สุดการเคล่ือนไหวใหก้ ับกระดกู ใหม่ สามารถทําได้โดย ยกเลกิ จุดส้นิ สดุ ที่คีย์เฟรมสดุ ท้าย โดยคลิกเมาสข์ วาทค่ี ยี ์เฟรมสดุ ทา้ ย แล้วเลอื กคาํ ส่ัง Clear Pose จากนนั้ จุดสน้ิ สดุ ของคีย์เฟรมสุดท้ายกจ็ ะหายไป เราสามารถใชค้ ําสั่ง Insert Pose สร้างจุดสิ้นสดุ การเคลอ่ื นไหวไดใ้ หมต่ ามต้องการ คลกิ เมาสข์ วาท่ี คยี ์เฟรมสุดท้าย แลว้ เลือกคําส่ัง Clear Pose จากน้นั จดุ สิน้ สดุ ของคีย์เฟรมก็หายไป บทท่ี 8 การสร้างวตั ถุให้เคล่อื นไหวโดยเครื่องมอื Bone Tool

110 ปรับแตง่ รูปแบบการเคลอื่ นไหว เราสามารถปรับแต่งรูปแบบการเคล่ือนไหวให้กับเลเยอร์ Armature ไดด้ ังนี้ 1. คลกิ เลเยอร์ Armature ทต่ี อ้ งการปรับแต่ง หรอื เฟรมใดเฟรมหนึ่งบนเลเยอร์ Armature 2. ปรับแตง่ ค่าคุณสมบตั ิต่าง ๆ ทจี่ ําเป็นบนพาเนล Properties inspector ดังนี้ กําหนดชื่อเลเยอร์ Amature ใน IK Amature 1 2 - Ease กาํ หนดจังหวะในการเคล่อื นไหว สามารถทาํ ได้ 2 วธิ คี อื - ระบุตัวเลขลงในช่อง Strength ซึ่งถ้าเปน็ ค่าลบจะเป็นการเรม่ิ ตน้ ช้า ๆ แล้วเรง่ ความเรว็ ในชว่ งทา้ ย แตถ่ า้ เปน็ คา่ บวกจะเป็นคา่ เร่ิมต้นเรว็ แลว้ คอ่ ย ๆ ช้าลง - เลือกรูปแบบจงั หวะการเคลือ่ นไหวที่ Type ซง่ึ มีใหเ้ ลอื ก 7 แบบ โดยแบ่งเปน็ 2 กลุม่ หลักๆ คอื Simple (แบบปกติ) และ Stop and Start (กําหนด จังหวะการเคลอื่ นไหวใหจ้ ดุ เร่ิมตน้ และจุดสดุ ท้าย) ซ่ึงท้ัง 2 กลมุ่ สามารถเลือกความเร็ว โดยเริ่มจากช้าทสี่ ดุ ไปหาเรว็ ที่สุดได้ (Slow Medium Fast Faster) - Style รูปแบบข้อตอ่ กระดุก ซึ่งมีให้เลือก 3 แบบ คอื Wire : กระดูกแบบโครงรา่ ง Solid : แบบกระดูก Line : กระดกู แบบเสน้ บทท่ี 8 การสรา้ งวตั ถใุ ห้เคลื่อนไหวโดยเครือ่ งมอื Bone Tool

111 ปรบั แตง่ คณุ สมบตั ิให้กบั กระดกู เราสามารถปรบั แตง่ คณุ สมบตั ใิ หก้ บั กระดูกแต่ละช้นิ ได้ดังนี้ 1. คลกิ กระดูกที่ตอ้ งการปรับแต่ง 2. ปรับแต่งค่าคณุ สมบตั ิตา่ ง ๆ บนพาเนล Properties inspector ดังน้ี 1 2 คา่ คณุ สมบตั ิ รายละเอียด Location แสดงตําแหน่งการจัดวางในแนวนอนและ Joint : Rotation แนวตั้ง (Position X / Y), ความยาว (Length), Joint : X / Y Translation องศาหมนุ (Angle), และความเรว็ (Speed) ของกระดูกแตล่ ะชน้ิ การหมุนของข้อต่อกระดูก การปรบั ระยะหรอื เคลอ่ื นยา้ ยข้อตอ่ กระดูก ไปในแนวนอนหรือแนวตง้ั บทท่ี 8 การสรา้ งวตั ถุให้เคลอื่ นไหวโดยเครื่องมอื Bone Tool

112 บันทึกชว่ ยจาํ Aide Memoire ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ บทที่ 8 การสรา้ งวัตถุให้เคล่อื นไหวโดยเคร่ืองมือ Bone Tool

บทท่ี การสรา้ งแอนิเมชัน แบบปฏิสัมพันธ์ การสร้างแอนิเมชันแบบปฏิสัมพันธ์ Adobe Flash เป็นโปรแกรมสาํ หรับสรา้ งสรรคง์ านด้านมัลติมเี ดยี ปัจจบุ ันมี การนาํ ไปใช้งานหลากหลายไมว่ า่ จะเปน็ Animation และยังมกี ารนําไปสรา้ งเกมบนเครื่อง คอมพวิ เตอร์ หรือแมแ้ ต่บนอปุ กรณ์เคลือ่ นท่ี มอื ถือ แทบ็ เลต็ ต่างๆ จาํ นวนมาก นอกจาก การสร้างเอนิเมชัน่ ทแี่ สดงภาพหรือเลา่ เร่อื งเรา ตอ่ เนือ่ งกันไป ปจั จบุ นั การสรา้ งเอนเิ มชน่ั ได้ ยงั นาํ หลกั การแนวคิดในการปฏิสัมพนั ธ์ (Interactive) เขา้ มาใชใ้ นการสร้างสรรค์งานเพิม่ มากขน้ึ ผใู้ ช้หรือผ้ชู มสามารถควบคมุ การแสดงผล การเคล่ือนไหว หรือแม้แตก่ ารโตต้ อบ ทําให้เกิดความสนุกสนาน สร้างความน่าสนใจในช้นิ งาน ทาํ ใหง้ านท่สี รา้ งข้นึ มมี ูลค่า เพิม่ มากขึ้น การปฏสิ ัมพนั ธ์ คอื การส่ือสารกับส่อื ทนี่ ําเสนอ ท่เี นน้ การใหผ้ ใู้ ช้เปน็ ผูค้ วบคมุ การนาํ เสนอ การเลอื กเส้นทางเดิน (Navigation) การโตต้ อบ การใหค้ วามรู้ และกิจกรรม ต่างๆ ท่อี ยูใ่ นสือ่ ที่นาํ เสนอ

114 Interactive 1. Adobe Flash Player Adobe Flash Player พัฒนาและเผยแพร่โดย อะโดบซี สิ เต็มส์ (เรมิ่ ตน้ พัฒนา โดยบรษิ ัท ฟิวเจอรแ์ วร์ ตอนหลงั เปลี่ยนเป็น แมโครมเี ดยี ซงึ่ ภายหลังถกู ควบรวมกิจการเข้า กับ อะโดบี ) คือโปรแกรมสาํ หรบั ไวเ้ ล่นไฟลม์ เี ดยี ของ Flash ชนดิ ตา่ ง ๆ เช่น ไฟล์นามสกลุ .swf, .flv เป็นต้น และเป็นตัวเสรมิ สาํ หรับเวบ็ บราวเซอร์ ในการเลน่ ไฟลม์ ีเดียผ่านเว็บ บราวเซอร์ 2. Adobe AIR AIR = Adobe Integrated Runtime น้ัน เป็นเทคโนโลยที ่ีจะทําใหน้ ําช้นิ งาน ของ Flash Platform ให้สามารถทาํ งานได้ โดยไมต่ อ้ งมโี ปรแกรมอืน่ ใดมาช่วยทํางาน Adobe AIR สามารถทาํ งานใน Platform ต่างๆ ได้ ไม่ว่าจะเป็นบนระบบปฏิบตั กิ าร Android, iOS, BlackBerry Tablet OS, Windows, Macintosh และ Linux สามารถ ส่งไปใช้งานได้หลาย Platform โดยเครือ่ งท่ีใช้งาน AIR Application จําเป็นตอ้ งติดตง้ั AIR Runtime ลงไปเทา่ นน้ั ความสามารถของ Adobe AIR นั้นมคี วามสามารถมากมาย มากกว่าคําที่วา่ Cross Platform หรือ Multi Platform เชน่ การเขา้ ถึงระบบปฏบิ ัติการตา่ งๆ การเขยี นไฟลล์ งใน เครื่องของผู้ใช้งาน ใชง้ าน Drag and Drop, MultiTouch, Gesture การทํางานร่วมกับ Web Browser เป็นตน้ (ท่ีมา : http://www.think.co.th/think/?p=565 ) บทที่ 9 การสร้างแอนิเมชนั แบบปฏิสมั พันธ์

115 3. ActionScript ActionScript เปน็ ภาษาสคริปต์ทีม่ ีพน้ื ฐานมาจากเอ็กมาสครปิ ต์ (ECMAScript) ซ่ึงเป็นตระกลู เดียวกันกบั จาวาสคริปต์ ใชส้ ําหรับการพฒั นาเวบ็ ไซตห์ รอื ซอฟตแ์ วร์ทีท่ าํ งาน ดว้ ย Flash เพ่ือใชค้ าํ นวณและควบคมุ การทาํ งานในตัว Flash และใหส้ ามารถโต้ตอบกับ ผู้ใชไ้ ด้ เพราะในการสรา้ งช้ินงานบ้างช้ินงานจาํ เปน็ ต้องมีการสร้างชนิ้ งานทม่ี กี ารตอบโต้ กบั ผู้ใช้ จาํ เปน็ ตอ้ งเขยี นคําสงั่ ให้โปรแกรมรบั รู้ว่า ตอ้ งการใหค้ ลกิ ปมุ่ เพอ่ื ส่งั งานให้ทาํ อะไร หากไมเ่ ขียนคาํ ส่ังในภาษา ActionScript ควบคมุ ActionScript เปน็ ภาษาสครปิ ตท์ ่ีใช้ งานรว่ มกบั โปรแกรม Adobe Flash ซง่ึ ปจั จุบันไดม้ กี ารพฒั นามาจนถงึ เวอร์ช่ัน 3 นนั่ ก็ คอื ActionScript 3.0 ส่วนประกอบและเคร่อื งมือชว่ ยใน Panel Actions สว่ นประกอบและเคร่ืองมือชว่ ยเหลอื ใน Panel Actions ต่างๆ สามารถชว่ ยให้ การเขยี นคําสัง่ ActionScript โดยเฉพาะเครอ่ื งมือในส่วน Script Pane Toolbar น้นั หากใช้ได้คลอ่ งจะชว่ ยใหก้ ารเขยี น และจัดระเบยี บคาํ สงั่ ต่างๆ ไดม้ าก การเรียกใช้ Panel Actions ให้ไปท่ี Window > Actions หรือ กด F9 ภาพตัวอย่าง Panel Actions , A. Script pane, B. Panel menu, C. Actions toolbox, D Script navigator บทท่ี 9 การสร้างแอนิเมชนั แบบปฏิสัมพนั ธ์

116 Script Pane พ้ืนทีแ่ กไ้ ขโค้ดของ ActionScript ซ่ึงจะแสดงโค้ดทอี่ ยู่ภายใน Action Toolbox แสดงคําสั่ง ต่างๆ ของ ActionScript Script Navigator แสดงสว่ นประกอบต่างๆ ทอี่ ยใู่ น Project 4. หลักการเขยี น ActionScript 3.0 การเขยี นคาํ ส่งั ActionScript มาควบคุมชิ้นงานท่ีสรา้ งจาก Flash มหี ลักงา่ ย ๆ 3 ข้อ คือ 1. เขยี นคาํ ส่งั เพอ่ื สง่ั ใหอ้ อบเจก็ ต์ไปทํางานที่ฟังกช์ ันใด 2. เขียนคําสง่ั เพ่อื สร้างฟังก์ช่นั รองรบั การทํางานของออบเจ็กต์ตัวใด 3. เขียนคาํ สั่งควบคมุ การทาํ งานภายในฟังก์ชั่นใด ตัวอย่าง 1 fish_mc.addEventListener(Event.ENTER_FRAME,fish); //ส่งั ให้ mc fish_mc ทาํ งานตามฟงั กช์ ั่น fish function fish(myevent:Event):void //สรา้ งฟังกช์ น่ั ทมี่ ีการรบั ค่า Event { this.fish_mc.x-=10;//กําหนดให้ mc fish_mc เล่อื นไป ข้างหนา้ 10 px } ตวั อย่าง 2 star_mc.addEventListener(Event.ENTER_FRAME,rotatewitch); function rotatewitch (myevent:Event):void { star_mc.rotation-=10; // หากเครอ่ื งหมายเปน็ += จะกาํ หนดใหห้ มนุ ตามเข็มนาฬกิ า ถา้ เป็น -= จะหมนุ ตรงกันขา้ ม } บทที่ 9 การสร้างแอนเิ มชันแบบปฏิสัมพนั ธ์

117 สาํ หรับการเขยี นสครปิ ตแ์ ลว้ เราอาจจะต้องเพิ่มคําอธิบายลงไปในคาํ ส่งั ตา่ งๆ เพอื่ ให้คนอน่ื หรอื ตัวเราเข้าใจได้ ในกรณีทสี่ ครปิ ต์ยาว รปู แบบการเขยี นคาํ อธิบาย หรือ Comment ใน ActionScript นน้ั มี 2 แบบ คอื 1. //ขอ้ ความ คอื คําอธิบายน้ันมีผล 1 บรรทัด ตัง้ แต่ // ไปจนจบบรรทดั นน้ั ๆ 2. /* ขอ้ ความ /* คอื คาํ อธบิ ายนั้นมีผลระหวา่ ง /* กับ /* ซึ่งสามารถครอบคลุม ไดห้ ลายบรรทดั 5. ฟงั ก์ชั่น (Function) และการเรียกใช้งานฟงั กช์ นั่ ฟังก์ช่นั คอื การเขียนคาํ ส่งั ยอ่ ย ๆ ไว้ในบลอ็ กของคาํ ส่ังเพอ่ื ทํางานชิ้นเลก็ ๆ ชิ้น หนง่ึ ใหส้ ําเรจ็ และสามารถนาํ ไปทาํ งานรว่ มกบั คาํ ส่งั หรือฟงั กช์ นั่ อืน่ ๆ เพือ่ ให้การ สรา้ งสรรคช์ นิ้ งานสมบูรณ์ ฟังก์ช่ันนั้นมปี ระโยชนใ์ นการแบ่งคาํ สงั่ ต่างๆ ใหท้ ํางานเฉพาะ อยา่ ง แบง่ เป็นหนา้ ที่ตา่ งๆ ทต่ี อ้ งการ ซ่งึ การเขียนคาํ ส่ังไวภ้ ายในฟังก์ชัน่ น้นั จะช่วยให้ สามารถนาํ คาํ สง่ั นั้นไปใชต้ อ่ ได้ง่ายขน้ึ รวมถงึ การใชง้ านซาํ้ ๆ ภายในโปรแกรมไดไ้ มจ่ าํ กดั จาํ นวนครัง้ นอกจากนีจ้ ะช่วยให้ผูเ้ ขยี นโปรแกรมสามารถอา่ นโคด้ ไดง้ ่ายมากขน้ึ เน่อื งจาก โค้ดจะดเู ป็นระเบยี บเรยี บร้อย ตัวอยา่ งรปู แบบการเขยี น คําอธบิ าย function myFunction(e:Event) function คือ การประกาศว่า จะกาํ หนดฟงั กช์ ั่น { myFunction คือ ชอ่ื ฟังก์ช่ันท่เี ราต้งั ขนึ้ มาเอง เปน็ ชือ่ อะไรกไ็ ด้ myNum + 8; ยกเว้นพวกคําสงวน แลว้ ตามด้วย (e:Event) trace(\"value : \" + แต่ถา้ เป็นฟังกช์ ั่นที่จะทาํ งานเมอื่ รบั คาํ สงั่ จากเม้าส์ตอ้ ง myNum); เปลยี่ นเปน็ (e:MouseEvent) } { คอื เริ่มการเขยี นคาํ สงั่ ในฟงั กช์ น่ั น้ี myNum + 7; คอื คาํ สงั่ แรกในฟังกช์ ั่น โดยสงั่ ใหเ้ อาค่าของตวั แปรทช่ี อ่ื myNum มาบวกกับ 7 trace(\"value : \" + myNum); คือการกาํ หนดใหแ้ สดงค่า ออกมาทาง Output บนหนา้ จอคอมพิวเตอร์ } คือ การส้นิ สดุ ฟังก์ชัน่ นี้ บทท่ี 9 การสร้างแอนเิ มชันแบบปฏิสมั พนั ธ์

118 ในการตั้งชอื่ ฟังก์ช่นั จะคล้ายกบั การต้ังแปร โดยมีหลกั การง่ายๆ ดังน้ี  ช่อื ของฟังก์ช่นั ควรสมั พันธก์ ับการทํางานของฟังกช์ ่ัน  ชอ่ื ฟังก์ชั่นตอ้ งไม่ซา้ํ กัน  ชอ่ื ของฟังก์ชนั่ สามารถเป็นตวั อักษร ตัวเลข และเสน้ ขีดลา่ งได้ แตห่ า้ ม ขน้ึ ตน้ ดว้ ยตวั เลข ถงึ แม้จะเขยี นฟงั ก์ชนั ไวแ้ ลว้ แตม่ นั โปรแกรมยังไม่สามารถทาํ งานได้ ทง้ั น้ีเพราะ ยังไมม่ กี ารเรียกใชง้ าน ดังทไี่ ด้อธิบายไปถึงฟงั ก์ช่นั ซงึ่ เป็นเสมอื นคาํ สั่งย่อยที่สร้างขนึ้ เมอ่ื เป็นคาํ ส่ังจําเป็นตอ้ งมีการเรยี กใชง้ าน ตัวอยา่ ง บรรทัด 1. var myNumber:Number = 8; บรรทดั 2. function myFunction(e:MouseEvent) บรรทดั 3. { บรรทัด 4. myNum + 8; บรรทัด 5. trace(\"value : \" + myNum); บรรทดั 6. } บรรทดั 7. myMovieClip.addEventListener(MouseEvent.CLICK , myFunction); อธบิ ายในบรรทดั ที่ 7 myMovieClip.addEventListener(MouseEvent.CLICK , myFunction); myMovieClip คือ ช่ือ Instance ของ MC ท่ีสร้างขึน้ จาก Symbol แบบ Movie Clip ทค่ี อยรอรบั คาํ สงั่ จากเหตกุ ารณ์ต่อไป .addEventListener คือ เป็นการระบใุ ห้ MC ทช่ี ่อื myMovieClip ไดเ้ ตรยี มรับ คาํ สงั่ MouseEvent.CLICK คอื เมอ่ื เป็นการดกั รอเหตกุ ารณ์แบบคลิก myFunction คือ เมอ่ื MC ท่ชี อ่ื myMovieClip รบั คาํ ส่ังตามกาํ หนดแลว้ ใหเ้ รยี กฟงั กช์ น่ั ชอื่ myFunction ข้ึนมาทํางาน บทท่ี 9 การสร้างแอนเิ มชันแบบปฏิสัมพนั ธ์

119 ข้อสงั เกตคอื Event ใน Function บรรทัดท่ี 2 กับใน addEventListener ใน บรรทดั ท่ี 7 จะต้องตรงกัน ในตวั อยา่ งเป็น MouseEvent เหมือนกนั ถา้ ไม่ตรงกันการทํา ตามคําสั่งอาจสมบรู ณ์ขึ้นได้ addEventListener ใชส้ ําหรบั กาํ หนดวา่ ถ้ามเี หตกุ ารณ์ใดเหตกุ ารณ์หนึ่งทาํ งาน ข้ึนมาแลว้ จะใหโ้ ปรแกรมทํางานอะไรบา้ งต่อไปในฟงั ก์ชนั่ ท่เี รยี กขน้ึ มา 6. ตวั แปร การเขยี นโปรแกรมเบอื้ งต้นไมว่ ่าจะเขียนด้วยภาษาใด ๆ ยอ่ มหลีกเล่ยี งไมพ่ ้นที่ จะตอ้ งใช้ส่งิ ที่เรียกว่า ตวั แปร (Variable) ซงึ่ ในแต่ละภาษาก็จะมีรูปแบบการใช้งานที่ แตกตา่ งกันไป สาํ หรบั ActionScript ซึ่งเปน็ ภาษาหน่งึ ท่ีใชเ้ ขยี นโปรแกรมควบคุมงาน มลั ติมีเดียนนั้ กม็ กี ารใช้งานตัวแปรคล้ายคลงึ กบั ตวั แปรภาษาอน่ื ๆ น่นั คอื ใชเ้ ก็บขอ้ มลู หรือใช้พักข้อมูลชวั่ คราวในระหวา่ งการประมวลผล การประกาศตวั แปร (Variable declaration) คอื การบอกให้โปรแกรมร้จู กั กบั ตัวแปร และใหโ้ ปรแกรมนําตัวแปรและคา่ ของตวั แปรตวั น่นั มาใชง้ านในโปรแกรมได้ var ช่อื ตวั แปร: ชนิดตวั แปร; var ช่อื ตัวแปร: ชนิดของตวั แปร = ขอ้ มูลทจ่ี ะแทนคา่ ในตวั แปร; var variable_name:variable_type; เชน่ var i; var i:int; i = 20; trace(\"value : \" + i); อธิบาย : โค้ดขา้ งต้นเปน็ การบอกกบั โปรแกรม Flash รู้ว่าเราตอ้ งการ สรา้ งตัวแปร i ชนิด integer ขน้ึ มา และแสดงผลออกมาทาง output ดว้ ยคาํ สงั่ trace ผลลัพธท์ างหนา้ จอจะปรากฏเปน็ value : 20 บทที่ 9 การสร้างแอนเิ มชันแบบปฏสิ มั พนั ธ์

Console 120 คําสั่ง trace เปน็ คําสง่ั ท่ใี ช้แสดงข้อมูลหรอื ข้อความออกมาทางหน้าต่าง เชน่ trace (\"HelloWorld!!\"); trace (\"Hi! this is trace function.\"); trace (\"May be this can do something great.\"); 7. Event Event คือการเขียนโปรแกรมแบบ Graphic User Interface (GUI) ที่เตรยี มการ ตอบสนองตอ่ เหตุการณท์ เ่ี กดิ ข้นึ จากผู้ใช้ ไมว่ า่ จะเปน็ การเลอ่ื นเมาส์, คลกิ เมาส์ หรือ กดปุ่ม ต่างๆ บนคีย์บอร์ด Event ที่พบบ่อย ไดแ้ ก่ OPEN – เหตุการณน์ จี้ ะทํางาน เม่ือมกี ารส่ังเปดิ ไฟล์/เริม่ โหลดไฟล์อะไรซกั อยา่ ง COMPLETE - ทาํ งานเมื่อไฟลน์ ่นั โหลดเสรจ็ เรยี บร้อย SOUND_COMPLETE - ทาํ งานเม่ือเสยี งเล่นจบ CHANGE - ทาํ งานเมอื่ ค่าภายในกลอ่ งข้อความ, กลอ่ งเลือกส,ี กลอ่ งตวั เลือก ฯลฯ เปลย่ี นแปลง RESIZE - ทาํ งานเมื่อมกี ารเปล่ียนขนาด ENTER_FRAME - ทาํ งานตลอดเวลา มกั ใชก้ ับการตรวจสอบอะไรซกั อย่าง ท่ีต้องการผลตลอดเวลา เช่น การอัพเดตคา่ ตําแหนง่ เมาส์ ฯลฯ สว่ นมากใช้ใน งานเกมส์ โปรแกรม หรือการสงั่ วัตถุเคลอ่ื นท่ี ตัวอยา่ ง object_mc.addEventListener(Event.ENTER_FRAME, onObjectRunning); บทท่ี 9 การสร้างแอนิเมชนั แบบปฏสิ ัมพนั ธ์

121 รูปแบบการใชง้ าน event Function ชือ่ ฟังก์ชนั (event: ประเภทของอเี วนต)์ { คาํ สัง่ ทวั่ ไป คําสงั่ เรยี กใชง้ านอเี วนต์ หรอื คาํ สง่ั ยกเลกิ การทาํ งานอีเวนต์ } ประเภทของ Event นนั้ มหี ลายประเภท เชน่ อีเวนตท์ ว่ั ไป อเี วนตท์ ่ี เก่ยี วกับเมาส์, อเี วนต์ที่เกย่ี วกับคยี บ์ อร์ด อเี วนต์ที่เกีย่ วกับเวลา เปน็ ตน้ รูปแบบคาํ สง่ั เรยี กใช้งานอเี วนต์ MovieClipc.addEventListener(ประเภทของอเี วนต,์ คําสัง่ อเี วนต์ ,ชอื่ ฟังก์ชนั ); รูปแบบคําสัง่ เลิกการทํางาน Event MovieClipc.removeEventListener(ประเภทของอเี วนต,์ คาํ สง่ั อี เวนต,์ ชอื่ ฟงั กช์ นั ); 8. เร่มิ ตน้ สรา้ งช้นิ งานการแสดงผลแบบทีละหน้าจอ 1. เมื่อเปดิ โปรแกรม Adobe Flash Professional ขึน้ คลกิ ที่คําสง่ั ActionScript 3.0 หรือหากต้องการพัฒนาบนอุปกรณ์เคลอ่ื นที่ โทรศัพทม์ ือถอื แทบ็ เลต็ ที่เป็นระบบ ปฎบิ ัติการ Android ใหค้ ลิกเลือก AIR for Android หรอื ระบบอื่นๆ เพื่อสรา้ ง Project ใหม่ ทส่ี ามารถใช้งานบน Android บทที่ 9 การสร้างแอนเิ มชันแบบปฏิสัมพนั ธ์

122 2. เลือกขนาดกระดาษใหเ้ ปน็ 480 X 800 px 3. คลิกท่ี (Text tool) เพอื่ สรา้ งตัวเลข > คลกิ ท่ี stage เพ่อื สร้างตัวเลข > กําหนดขนาดตัวเลขและสีตามต้องการ 4. คลิกขวาทีเ่ ลเยอร์ท่ี 1 เฟรมที่ 1 > เลือก Copy Frames บทที่ 9 การสร้างแอนิเมชันแบบปฏิสมั พันธ์

123 5. คลิกขวาที่เลเยอรท์ ี่ 1 เฟรมท่ี 2 > เลือก Paste Frames > เปลี่ยนตวั เลข จากหมายเลข 1 เป็น 2 และเปลี่ยนสีตวั เลขตามตอ้ งการ 6. ทีเ่ ลเยอร์ที่ 1 จะมเี ฟรมทงั้ หมด 5 เฟรม ซง่ึ มีตวั เลข 1-5 อยู่ 7. คลกิ ที่ New Layer สร้าง Layer ใหม่ > ดับเบิ้ลคลิกเลเยอร์ที่ 2 ตัง้ ชื่อเลเยอร์ ใหมว่ ่า button บทที่ 9 การสร้างแอนิเมชนั แบบปฏิสมั พนั ธ์

124 8. คลกิ ทีเ่ ลเยอร์ button เฟรมท่ี 1 > คลกิ Rectangle Tool > วาดส่ีเหล่ยี มสีดํา > คลกิ Text Tool > สรา้ งตัวอกั ษร Next แลว้ นาํ มาวางไว้บนสีเหลีย่ มสดี ําเพือ่ สร้างปุ่ม 9. สรา้ งสามเหลี่ยมสีขาวไว้ในปมุ่ 10. คลิกเลือก Selection Tool บทที่ 9 การสรา้ งแอนเิ มชันแบบปฏสิ มั พันธ์

125 11. ใช้เมาส์คลกิ ลากคลุมส่เี หลี่ยมสดี ําและตัวอกั ษรดังรปู ด้านล่าง 12. คลกิ Convert to Symbol > ต้งั ชื่อวา่ btn_next > คลกิ เลือก Button > OK 13. สร้างปุ่ม Prve ตามข้นั ตอนท่ี 7-11 ตงั้ ช่ือปมุ่ ว่า btn_prve บทที่ 9 การสร้างแอนเิ มชนั แบบปฏิสมั พนั ธ์

126 14. คลกิ เลอื กท่ปี ่มุ Next > ต้งั ช่ือปมุ่ ในช่อง Properties ชื่อ btn_next 15. ต้งั ช่อื ปมุ่ Prve ว่า btn_prve 16. ใส่สครปิ ต์ให้กับปุม่ Next คลกิ ที่ Code Snippets > Timeline Navigation > Click to Go to Next Frame and Stop > { } > เปล่ยี นช่อื เปน็ btn_next > Insert บทท่ี 9 การสรา้ งแอนเิ มชันแบบปฏสิ มั พันธ์

127 17. จะได้เลเยอร์ Actions ไวส้ าํ หรบั เก็บสครปิ ต์ทง้ั หมด 18. ใสส่ ครปิ ตใ์ ห้กบั ป่มุ Prve คลิกท่ี Code Snippets > Timeline Navigation > Click to Go to Previous Frame and Stop > { } > เปลี่ยนชื่อเป็น btn_prve > Insert บทท่ี 9 การสร้างแอนเิ มชันแบบปฏิสมั พนั ธ์

128 19. คลิก window > Actions (F9) เพอื่ เรยี กสคริปตข์ ้นึ มาใชง้ าน 20. หน้าต่าง ActionScript (1) ใส่คําส่งั Stop ( ) ; เพือ่ ให้ตวั เลขหยดุ ว่งิ วนไปวนมา (2) เปน็ คาํ สงั่ ท่ีสร้างขน้ึ โดย Code Snippets สงั่ ให้ปุ่ม Next คลิกไปยงั เฟรมถดั ไป (3) เป็นคําสง่ั ที่สรา้ งข้นึ โดย Code Snippets สงั่ ให้ปุ่ม Prve คลิกกลับไป ยังเฟรมที่ผ่านมา บทท่ี 9 การสรา้ งแอนเิ มชนั แบบปฏิสัมพันธ์

129 21. ใสส่ คริปตเ์ พอ่ื ใหห้ นา้ จอเล่ือนโดยการใช้มอื สมั ผสั คลิกที่ Code Snippets > Molile Actions > Swipe to Go to Next/Previous Frame and Stop > { } > Insert 22. หน้าตา่ ง ActionScript เป็นคําสั่งท่ีสรา้ งข้ึนโดย Code Snippets ส่ังใหเ้ มื่อใช้ มอื สัมผสั ทห่ี นา้ จอแทบ็ เลต็ โดยใชม้ อื เลือ่ นหนา้ จอไปทางซ้ายจะ Next ไปยังเฟรมถัดไป และถ้าเล่อื นหนา้ จอไปทางขวาจะกลับไปยงั เฟรมที่ผ่านมา บทที่ 9 การสร้างแอนเิ มชันแบบปฏิสมั พนั ธ์

130 23. บันทกึ โปรเจคทส่ี รา้ งข้นึ คลิก File > Save as 24. สรา้ งโฟลเดอรใ์ หมต่ ั้งชอื่ วา่ Project > ต้ังชื่อโปรเจค NextPrve > Save 25. การ Publish เพอื่ ใหไ้ ดไ้ ฟล์ .apk มาตดิ ตัง้ บนแทบ็ เลต็ คลิกที่ File > Publish Settings บทท่ี 9 การสรา้ งแอนิเมชนั แบบปฏสิ ัมพันธ์

131 26. คลิกเลือกเครอ่ื งมือ Player Settings เพื่อตง้ั คา่ การ Publish 27. คลิก General > คลกิ เลอื กเครอ่ื งหมายถูกหนา้ Full screen บทที่ 9 การสรา้ งแอนิเมชนั แบบปฏิสมั พนั ธ์

132 28. คลิก Deployment > Create > ตง้ั คา่ ต่าง ๆ ใสช่ อื่ ของตัวเองลงไป > ลบ จาํ นวนปีออก > คลิก Browse แล้วเลอื กโฟลเดอรท์ ีอ่ ยู่ใหก้ บั โปรเจคท่ตี อ้ งการ Publish > คลกิ OK > ใส่ Password เดียวกันกับขนั้ ตอนที่ 3 บทท่ี 9 การสรา้ งแอนิเมชันแบบปฏสิ ัมพนั ธ์

133 29. คลกิ Icons > เลอื กขนาด 36X36 > เลอื กรปู ทตี่ อ้ งการนาํ มาเป็น Icon > OK 30. คลกิ Publish 31. ลองทดสอบโปรแกรมโดยคลิกท่ี Control > Test Movie > Test (หรือ Ctrl + Enter) 32. ทดสอบโปรแกรม ซ่งึ สามารถคลิก Next และ Prve ได้ บทที่ 9 การสร้างแอนเิ มชนั แบบปฏสิ ัมพนั ธ์

134 บันทกึ ชว่ ยจํา Aide Memoire ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ บทที่ 9 การสรา้ งแอนิเมชันแบบปฏิสัมพนั ธ์

บทท่ี การควบคุมเสียงดว้ ยคําสัง่ Play Stop Pause การควบคมุ เสยี งด้วยคาํ สง่ั Play Stop Pause ทีม่ า http://a1.s6img.com/cdn/0007/p/1019612_12526947_lz.jpg

136 Play Stop Pause โปรเจคนส้ี ามารถคลกิ ใหเ้ ลน่ เพลงได้ หยดุ เล่นได้และยังสามารถเพม่ิ เสียงและ ลดเสียงได้ การควบคุมเสยี งด้วยคาํ สง่ั Play Stop Pause 1. เมือ่ เปิดโปรแกรม Adobe Flash Professional สรา้ งชน้ื งานใหมข่ นึ้ มา 2. เลือกขนาดกระดาษใหเ้ ป็น 480 X 800 px 3. คลกิ Rectangle Tool(R) เพ่ือสร้างสี่เหลยี่ ม > คลิกที่ Stroke color เลอื กไม่มเี ส้น > คลิก fill color เพอ่ื เลอื กสีทต่ี อ้ งการ บทท่ี 10 การควบคมุ เสียงดว้ ยคําสั่ง Play Stop Pause

137 4. สร้างรูปสเ่ี หลี่ยมให้ไดส้ ามอนั และใชส้ เ่ี หล่ียมในการสรา้ งรปู สีขาวดา้ นใน ดังรูปด้านลา่ ง 5. คลกิ เลือกรปู Play รปู ท่ี 1 ให้เป็นจดุ ไขป่ ลา > คลกิ Convert to Symbol เพ่ือสรา้ ง รูปภาพใหเ้ ป็นปมุ่ 6. ตงั้ ช่อื ปุม่ btn_play > เลอื กประเภท Button > Ok บทที่ 10 การควบคุมเสียงดว้ ยคําสัง่ Play Stop Pause

138 7. ตง้ั ชือ่ Instance name ให้กับปมุ่ ที่ 1 เป็น btn_play 8. ต้งั คา่ ปุ่มใหก้ ับรูปภาพที่ 2 รปู stop และ 3 รูป pause ตามขน้ั ตอนที่ 5-7  ตั้งชอ่ื ปมุ่ และชื่อ Instance name ของรูปภาพที่ 2 เป็น btn_stop  ตงั้ ชอ่ื ปมุ่ และชื่อ Instance name ของรูปภาพที่ 3 เป็น btn_pause 9. ดับเบ้ลิ คลกิ ที่รปู ภาพท่ี 1 10. คลกิ ขวาทเี่ ฟรม Down > คลกิ Insert Frame 11. คลกิ ใหพ้ ื้นท่ีสดี ําเปน็ จุดไขป่ ลา > เปลย่ี นสีจากสีดาํ ให้เป็นสฟี ้า บทที่ 10 การควบคมุ เสยี งดว้ ยคําสั่ง Play Stop Pause

139 12. เปลีย่ นรปู ภาพที่ 2 และ 3 ใหเ้ ปน็ ปุ่มทีก่ ดคลิกแลว้ จะเปลย่ี นเป็นสฟี า้ ตามขั้นตอนท่ี 9-11 13. บันทกึ โปรเจคช่อื sound stop > ไว้ในโฟลเดอร์ Project4 > นาํ ไฟลเ์ สียงเพลงท่ี ต้องการมาไว้ในโฟลเดอร์ด้วย (ไฟล์เพลงต้องเป็นไฟล์ .mp3 เท่านัน้ ) 14. คลิก Rectangle Tool(R) เพ่อื สรา้ งส่เี หลยี่ ม > คลกิ ท่ี Stroke color เลอื กไม่มเี สน้ > คลิก fill color เพ่ือเลอื กสที ่ีต้องการ 15. สรา้ งรูปใหไ้ ดด้ งั รูปด้านล่าง โดยใช้เคร่ืองมอื สีเหลยี มและเส้น 16. เปลีย่ นรูปภาพให้เป็นปุม่ ตามขัน้ ตอนท่ี 5-7 เป็น btn_vol1  ต้ังชอ่ื ปุ่มและชื่อ Instance name ของรปู ภาพท่ี 1 บทที่ 10 การควบคุมเสียงดว้ ยคําสั่ง Play Stop Pause

140  ตัง้ ชอื่ ปมุ่ และช่ือ Instance name ของรปู ภาพที่ 2 เป็น btn_vol2  ต้งั ชื่อปมุ่ และช่ือ Instance name ของรูปภาพที่ 3 เปน็ btn_vol3 17. เปลยี่ นรูปภาพท่ี 1 2 และ 3 ใหเ้ ปน็ ปุม่ ทก่ี ดคลกิ แลว้ จะเปลย่ี นเป็นสีฟา้ ตามข้นั ตอนท่ี 9-11 18. คลิกที่ Text Tool สร้างข้อความใต้รูปดง้ ภาพ 19. ต้งั ชือ่ Instance name เป็น txt_position > เลอื ก Dynamic Text 20. สรา้ ง New Layer ใหม่ และตัง้ ชื่อวา่ Action บทท่ี 10 การควบคมุ เสียงด้วยคําส่ัง Play Stop Pause

141 21. คลิก Window > Actions หรือ F9 เพื่อเรียกใช้งาน Actions 22. นี้เป็น Action ของโปรเจคน้ี ส่วนแรกไมต่ อ้ งพิมพ์ โปรแกรมจะดงึ เขา้ มาเอง ส่วนที่สอง เป็นส่วนทเ่ี ราต้องพิมพ์เอง บทที่ 10 การควบคมุ เสียงด้วยคําสั่ง Play Stop Pause

142 23. การประกาศตวั แปรและเรียกไฟล์เพลงท่ตี อ้ งการ ใสช่ ือ่ เพลงให้ตรงกบั ไฟลท์ ่ีเรานํา มาวางไว้ในโฟลเ์ ดอร์ 24. ใสค่ ําสั่งใหก้ บั ปุ่มตา่ งๆ เม่อื คลกิ แล้วจะทาํ งานตามคาํ สง่ั ที่วางไว้ใน function 25. ฟังก์ช่นั ในการเพ่ิมเสยี ง เมื่อคลิกทปี่ ุม่ vol1 เสียงจะเบา คลกิ ทป่ี ุ่ม vol3 เสียงจะดัง เพิม่ ข้นึ บทท่ี 10 การควบคุมเสยี งดว้ ยคําสงั่ Play Stop Pause

143 26. ฟังกช์ ัน่ การ เล่นเพลง สตอ๊ ปเพลงและหยุดเพลง 27. โปรแกรมทีเ่ สรจ็ สมบูรณ์ สามารถคลิกใหเ้ ล่นเพลงได้ หยุดเล่นได้และยงั สามารถเพ่มิ เสียงและลดเสยี งได้ 28. การ Publish เพอ่ื ให้ไดไ้ ฟล์ .apk มาตดิ ต้งั บนแท็บเล็ต คลิกท่ี File > Publish Settings บทที่ 10 การควบคุมเสียงด้วยคําส่งั Play Stop Pause

144 24. คลิกเลือกเครือ่ งมือ Player Settings เพือ่ ตัง้ คา่ การ Publish 25. คลิก General > ตก๊ิ เคร่ืองหมายถูกหนา้ Full screen > เพ่มิ เพลงที่ใชใ้ นโปรเจค บทที่ 10 การควบคมุ เสียงด้วยคําสั่ง Play Stop Pause

145 25. คลิก Deployment > Create > ตั้งค่าตา่ ง ๆ ใส่ชอื่ ของตัวเองลงไป > ลบจาํ นวนปี ออก > คลิก Browse แลว้ เลอื กโฟลเดอร์ท่ีอยู่ให้กบั โปรเจคท่ตี อ้ งการ Publish > คลกิ OK > ใส่ Password เดยี วกันกบั ข้ันตอนท่ี 3 26. คลิก Icons > เลอื กขนาด 36X36 > เลือกรปู ที่ตอ้ งการนํามาเป็น Icon > OK บทท่ี 10 การควบคมุ เสยี งดว้ ยคําสั่ง Play Stop Pause