2901-2011 การสร้างภาพเคลื่อนไหวเบื้องต้น

Adobe29F4lash CS6 บทที่ 10 การนำ�เสนอผลงานใหแ้ พรห่ ลาย 8. ผลลพั ธ์ทไี่ ดจ้ ะเป็นดังน้ี 8 วธิ เี อก็ ซพ์ อร์ตทง้ั มูฟว่ี วิธีน้ีจะเป็นการเอ็กซ์พอร์ตภาพเคลื่อนไหวทั้งมูฟวี่  โดยถ้าชนิดไฟล์ที่เลือกสามารถแสดง ภาพเคล่อื นไหวได้ เชน่ AVI, QuickTime หรอื Animated GIF กจ็ ะไดผ้ ลลัพธ์ออกมาเพยี งไฟลเ์ ดยี ว แตถ่ า้ เปน็ ไฟล์ชนดิ ภาพนงิ่ จะไดผ้ ลลัพธเ์ ป็นภาพน่ิงหลายไฟล์ท่ีแสดงการเคลือ่ นไหวแตล่ ะข้ันตอน วธิ ีเอ็กซพ์ อร์ตท�ำไดโ้ ดย 1. เปิดมฟู วที่ ีต่ ้องการเอก็ ซ์พอร์ต แล้วเลือกค�ำส่ัง File > Export > Export Movie…

การสรา้ งภาพเคลอื่ นไหวเบอื้ งตน้ Adobe Fla2s95h CS6 2. ตัง้ ชื่อและเลือกชนดิ ของไฟล์ แล้วคลกิ ปุ่ม Save 2 3. ส�ำหรบั ไฟลบ์ างชนดิ จะมอี อปชนั่ เพม่ิ เตมิ ใหก้ �ำหนดดว้ ย โดยในตวั อยา่ งจะเปน็ ไฟลน์ ามสกลุ AVI 3

Adobe29F6lash CS6 บทที่ 10 การนำ�เสนอผลงานใหแ้ พรห่ ลาย 4. ผลลัพธท์ ีไ่ ดด้ งั น้ี 4

การสรา้ งภาพเคลอื่ นไหวเบ้ืองต้น Adobe Fla2s97h CS6 วธิ ีเอก็ ซพ์ อรต์ ไฟลภ์ าพน่งิ แบบต่อเนอื่ ง วธิ นี ี้เปน็ สง่ิ ทีเ่ พิ่มข้ึนมาใน Flash CS6 การแปลงซิมโบลเป็นไฟลภ์ าพ PNG ต่อเนอื่ งมีวิธีการดังน้ี 1. คลกิ ขวาท่ซี มิ โบล เลือก Export PNG Sequence 1 2. ตง้ั ช่อื แลว้ คลกิ ปมุ่ Save 2

Adobe29F8lash CS6 บทที่ 10 การนำ�เสนอผลงานให้แพรห่ ลาย 3. ก�ำหนดออปชนั่ ของไฟล์ 3 4. ผลลัพธ์จะไดร้ ปู มาตามจ�ำนวนเฟรมทเ่ี ราได้ท�ำการสร้างเอาไวใ้ นมูฟวี่นั้น ๆ 4

การสร้างภาพเคลอื่ นไหวเบ้ืองต้น Adobe Fla2s99h CS6 วิธเี อก็ ซ์พอรต์ ไฟลภ์ าพนง่ิ แบบต่อเนือ่ งรวมไฟล์ภาพเปน็ ภาพเดียว วธิ นี เี้ ปน็ สง่ิ ทเี่ พมิ่ ขน้ึ มาใน Flash CS6 การแปลงซมิ โบลเปน็ ไฟลภ์ าพ PNG ตอ่ เนอื่ งแบบรวมไฟล์ มวี ิธีการท�ำดงั น้ี 1 1. คลกิ ขวาทมี่ ูฟว่ีที่ตอ้ งการแปลงที่อยู่ใน Library 2. เลอื ก Generate Sprite Sheet 2

Adobe30F0lash CS6 บทท่ี 10 การนำ�เสนอผลงานใหแ้ พร่หลาย 3. ก�ำหนดออปช่ันของไฟล์ 3 4. ผลลพั ธท์ ไ่ี ดจ้ ะไดร้ ปู มาตามจ�ำนวนเฟรมทเ่ี ราไดท้ �ำการสรา้ งเอาไวใ้ นมฟู วน่ี นั้ ๆ แตจ่ ะรวมอยู่ ในไฟลเ์ ดยี ว 4

การสร้างภาพเคลื่อนไหวเบื้องต้น Adobe Fla3s01h CS6 วธิ ีพับลชิ เป็นไฟล์ตดิ ตั้งส�ำหรบั Android โดยในโปรแกรม Flash จะสามารถพบั ลิชเปน็ แอพพลเิ คชน่ั ที่ใชง้ านส�ำหรบั Android โดย จะมไี ฟลต์ ิดตง้ั .apk ดว้ ยการรวมเอาไฟล์ .swf และ .xml ทไ่ี ด้สรา้ งไวแ้ ลว้ เข้าไว้ดว้ ยกัน สามารถเข้าสู่ หน้าตา่ งการพับลิชดงั น้ี 1. เลอื ก Flie > Air 3.2 for Android Settings 1 2. จะเจอหน้าต่างดังรูปโดยจะเลือก  General เป็นคา่ เริม่ ต้น 2

Adobe30F2lash CS6 บทที่ 10 การนำ�เสนอผลงานให้แพรห่ ลาย ออปชัน่ รายละเอยี ด Output File ต้งั ชอ่ื ไฟล์ จะมนี ามสกลุ .apk ส�ำหรับ Android App Name App ID Air ช่อื แอพพลิเคชน่ั Version Version Label ต้งั รหสั แอพพลิเคช่นั Aspect Ratio ตงั้ ค่าเวอรช์ ั่น Render Mode ต้งั ชื่อเวอรช์ นั่ Included Files ก�ำหนดขนาดการแสดงผล - Portrait แสดงผลแนวต้งั - Landscape แสดงผลในแนวนอน - Auto เลือกอตั โนมตั ิ - Full screen แสดงผลเต็มจอ - Auto orientation แสดงผลตามอุปกรณ์ ก�ำหนดโหมดการประมวลผลเรนเดอร์ของข้อมูล - Auto เลือกอตั โนมัติ - CPU เลือกการประมวลผลจาก CPU - GPU เลอื กการประมวลผลจาก GPU - Direct เลอื กการประเมนิ ผลโดยตรงจากอปุ กรณท์ เ่ี ชอื่ มตอ่ จากภายนอก รวมไฟลต์ า่ ง ๆ ท่ีจะแพ็กเกจเขา้ ไปใช้ส�ำหรับแอพพลิเคช่ันน้ี โดยจะตอ้ ง มีไฟล์ swf ทเ่ี ราได้สร้างงานไว้ และไฟล์ –app.xml ทีพ่ ับลิชออกมาให้ อัตโนมัติ

การสรา้ งภาพเคลอ่ื นไหวเบื้องตน้ Adobe Fla3s03h CS6 3. เมอื่ เลอื กเมนู Deployment 3 ออปชัน่ รายละเอียด Certificate หากมไี ฟล์ Certificate อยูแ่ ลว้ ให้เลือก เพื่อเลือกไฟล์ Certificate หากยัง ไมม่ ไี ฟลด์ งั กลา่ วให้เลือก เพื่อท�ำการสมคั รเพมิ่ เตมิ ถ้ายงั ไมม่ ี Certificate Password ก็จะไมส่ ามารถพับลชิ เป็นไฟล์ .apk ได้ Device Release ใชร้ หัสผา่ นของผู้ผลิตแอพพลิเคชน่ั เลือกชนิดของแอพพลเิ คชัน่ ส�ำหรับใชง้ านบนอุปกรณพ์ กพา

Adobe30F4lash CS6 บทที่ 10 การนำ�เสนอผลงานให้แพรห่ ลาย ออปชั่น รายละเอยี ด Emulator เลอื กชนิดของแอพพลิเคชน่ั ใชง้ านระบบจ�ำลอง Release เลอื กชนดิ ของแอพพลิเคชนั่ ส�ำหรบั ตรวจสอบผา่ นเครือข่าย Debug ก�ำหนดแหล่งใหเ้ รียกใช้งาน AIR runtime AIR Runtime เลอื กให้ตดิ ตง้ั แอพพลิเคช่ันทนั ทีหลังจากการพับลชิ แอพพลิเคช่นั After Publishing 4. เมือ่ เลอื กเมนู Icons 4

การสรา้ งภาพเคล่อื นไหวเบื้องตน้ Adobe Fla3s05h CS6 เมื่อเลือกหนา้ Icons ส่วนแรกให้ท�ำการเลอื กขนาดของไอคอนทเ่ี ราตอ้ งการใช้ ส่วนที่ 2 ใหท้ �ำการเลือกไฟลภ์ าพส�ำหรับท�ำไอคอน ส่วนท่ี 3 จะแสดงภาพไอคอนท่เี ราเลอื กใช้

Adobe30F6lash CS6 บทที่ 10 การนำ�เสนอผลงานใหแ้ พร่หลาย 5. เม่อื เลอื กเมนู Permissions โดย Permissions จะเป็นการก�ำหนดรายละเอียดของสิทธ์แิ ละการเข้าถงึ ขอ้ มลู 5

การสร้างภาพเคลื่อนไหวเบื้องต้น Adobe Fla3s07h CS6 ออปชน่ั รายละเอยี ด INTERNET อนญุ าตใหแ้ อพพลเิ คช่นั เชอ่ื มต่ออินเทอรเ์ นต็ ได้ WRITE_EXTERNAL_STORAGE อนุญาตใหแ้ อพพลิเคช่นั เขียนข้อมูลลงหนว่ ยความจ�ำภายนอก READ_PHONE_STATE อนญุ าตใหแ้ อพพลิเคชน่ั สัง่ ปิดเสียงเมื่อมีการโทรเขา้ ACCESS_FINE_LOCATION อนญุ าตให้แอพพลเิ คชน่ั เข้าถงึ GPS ACCESS_COARSE_LOCATION อนญุ าตใหแ้ อพพลเิ คชน่ั เข้าถึงการเช่ือมต่อ WIFI CAMERA อนุญาตให้แอพพลเิ คชน่ั เชื่อมตอ่ กับกล้องได้ RECORD_AUDIO อนุญาตใหแ้ อพพลเิ คช่นั เชอ่ื มต่อไมโครโฟนเพอื่ บันทึกเสยี งได้ DISABLE_KEYGUARD อนุญาตใหแ้ อพพลิเคชั่นปดิ การท�ำงานปุ่ม Sleep WAKE_LOCK อนญุ าตให้แอพพลเิ คชั่นปอ้ งกนั การเขา้ สู่สถานะ Sleep ACCESS_NETWORK_STATE อนญุ าตให้แอพพลเิ คช่นั เขา้ ถงึ ขอ้ มูลเครอื ขา่ ยได้ ACCESS_WIFI_STATE อนญุ าตใหแ้ อพพลเิ คชัน่ เข้าถึงเครอื ข่ายไร้สายได้

Adobe30F8lash CS6 บทท่ี 10 การนำ�เสนอผลงานให้แพรห่ ลาย 6. เลอื กเมนู Languages โดยเมนู Languages เปน็ การก�ำหนดภาษาทแ่ี อพพลิเคชั่นรองรับ 6 7. เมอ่ื ท�ำการตง้ั คา่ ครบทกุ อยา่ งเรยี บรอ้ ยแลว้ ใหค้ ลกิ ทป่ี มุ่ Publish โปรแกรมจะท�ำการพบั ลชิ เปน็ ไฟล์ .apk เพือ่ ให้เราน�ำไปติดต้ังบนอปุ กรณ์ Android

การสรา้ งภาพเคลอ่ื นไหวเบื้องต้น Adobe Fla3s09h CS6 สรุปท้ายบท เมอื่ ไดท้ �ำการสรา้ งผลงานแอนเิ มชนั ขน้ึ มาเปน็ ทเ่ี รยี บรอ้ ยแลว้ ขน้ั ตอนตอ่ ไปกค็ อื การน�ำเสนอผลงาน ให้อย่ใู นรปู แบบต่าง ๆ เราควรจะก�ำหนดค่าตา่ ง ๆ เพ่ือปรบั คุณสมบัติและขนาดของไฟลใ์ ห้เหมาะสมกบั การน�ำไปใช้ โดยไฟลเ์ อกสาร (.fla) ท่สี ร้างขึน้ จะถูกน�ำไปใช้ในรปู ไฟล์มูฟว่ี (.swf) ซ่ึงขนั้ ตอนการแปลง ไฟล์นเ้ี รียกวา่ การ “พับลิช” (Publish) นอกจากนี้ เรายังสามารถเอก็ ซ์พอร์ต (Export) มฟู วอี่ อกไป ในรปู แบบของไฟล์ภาพ GIF, JPEG รวมทงั้ ไฟลว์ ิดีโอ QuickTime, AVI และอ่ืน ๆ กระบวนการพบั ลชิ เอกสาร Flash ประกอบดว้ ย 2 ขน้ั ตอน เรมิ่ จากการเลอื กประเภทของไฟล์ พร้อมกบั ตัง้ ค่าต่าง ๆ ด้วยค�ำสง่ั Publish Settings โดยใช้ค�ำสั่ง Publish ซ่งึ สามารถสรา้ งไฟล์ในฟอรแ์ มต ตา่ ง ๆ ได้ดงั น้ี 1. Flash Movie ทีแ่ สดงใน Flash Player และ Flash Lite 2. เอกสาร HTML ท่ีชว่ ยในการแสดงมูฟวีห่ รือกราฟิกในบราวเซอร์ 3. กราฟกิ ประเภท GIF, JPEG และ PNG ซง่ึ สามารถแสดงผลไดโ้ ดยไมจ่ �ำเปน็ ตอ้ งใช้ Flash Player 4. ไฟล์ Projector ส�ำหรับระบบ Windows และ Macintosh รวมถงึ QuickTime วิดีโอ ได้แก่ EXE, HOX และ MOV นอกจากน้ี โปรแกรม Flash จะสามารถพับลิชเปน็ แอพพลเิ คชั่นทใี่ ชง้ านส�ำหรบั Android โดย จะมีไฟล์ติดตั้ง .apk ด้วยการรวมเอาไฟล์ .swf และ .xml ท่ีได้สร้างแลว้ เขา้ ไวด้ ว้ ยกัน

Adobe31F0lash CS6 บทที่ 10 การนำ�เสนอผลงานให้แพร่หลาย แบบทดสอบและกิจกรรมการฝึกทกั ษะ บทที่ 10 การน�ำเสนอผลงานใหแ้ พร่หลาย ตอนที่ 1 : อธบิ าย (หมายถึง การใหร้ ายละเอียดเพมิ่ เติม ขยายความ ถา้ มตี วั อย่างใหย้ กตวั อย่าง ประกอบ) 1. กระบวนการพับลชิ เอกสาร Flash ประกอบดว้ ย 2 ขน้ั ตอน อะไรบ้าง 2. ค�ำส่งั Publish สามารถสร้างไฟลใ์ นฟอร์แมตตา่ ง ๆ ได้ มอี ะไรบา้ ง 3. การตั้งค่าใน  Publish  Settings  มขี ้ันตอนอย่างไร 4. ออปช่ัน JPEG quality ในการ Publish แบบ .swf คืออะไร 5. ออปช่ัน Audio event ในการ Publish แบบ .swf คืออะไร 6. ออปชั่น Template ในการสร้างไฟล์ HTML คอื อะไร 7. ออปช่ัน Playback ในการสร้างไฟล์ HTML คอื อะไร 8. ออปชั่น Transparent ในการสร้างไฟล์ GIF คอื อะไร และมีค�ำสัง่ เพิม่ เติมใดบา้ ง 9. ออปชนั่ Playback ในการสรา้ งไฟล์ GIF คอื ก�ำหนดการเลน่ GIF ซงึ่ ประกอบดว้ ยค�ำสงั่ เพมิ่ เตมิ ใดบา้ ง 10. วิธี Export Movie มีขั้นตอนอย่างไร จงบอกเป็นข้อ ๆ ตอนท่ี 2 : จงเลอื กคำ� ตอบท่ถี กู ตอ้ งทส่ี ุดเพียงข้อเดียว 1. ขอ้ ใดไมใ่ ชค่ �ำสั่ง Publish ท่สี ามารถสรา้ งไฟลใ์ นฟอร์แมตต่าง ๆ ได้ ก. JPEGก ข. HTML ค. Flash Movie ง. MP3 2. คยี ล์ ดั ในขอ้ ใดใชเ้ รยี กค�ำสั่ง Publish Setting ก. Ctrl + Shift + F12 ข. Ctrl + Shift + F11 ค. Alt + Shift + F12 ง. Alt + Shift + F11 3. ออปช่นั ใดในการสร้างไฟล์ SWF ทีใ่ ชก้ �ำหนดระดับการบีบอดั ข้อมลู ส�ำหรับรปู ภาพบิตแมปทน่ี �ำมาใช้ ในมฟู วี่ ก. Compress Movie ข. JPEG Quality ค. Audio Stream ง. Audio Event

การสร้างภาพเคลือ่ นไหวเบ้ืองต้น Adobe Fla3s11h CS6 4. ออปชนั่ ใดในการสรา้ งไฟล์ SWF ทม่ี ีประโยชนส์ �ำหรบั ไฟล์ทมี่ ีตัวอักษรหรอื โค้ด ActionScript มาก ๆ ก. Compress Movie ข. JPEG Quality ค. Audio Stream ง. Audio Event 5. ออปชั่น Dimensions ในการสร้างไฟล์ HTML มีรายละเอยี ดอยา่ งไร ก. ก�ำหนดลักษณะพเิ ศษในการแสดงผลมูฟวีบ่ นเว็บเพจ ข. ก�ำหนดขนาดความกวา้ ง (Width) และความสูง (Height) ของมฟู วที่ ่ปี รากฏบนบราวเซอร์ ค. ก�ำหนดคุณภาพของมฟู ว่ที ่จี ะปรากฏในขณะเล่น ง. ก�ำหนดลกั ษณะพิเศษในการแสดงผลมฟู ว่บี นเวบ็ เพจ 6. ค�ำสง่ั Opaque Windowless ของออปช่ัน Window Mode ในการสรา้ งไฟล์ HTML คอื อะไร ก. ก�ำหนดใหม้ ฟู ว่ถี ูกเล่นวนอยา่ งตอ่ เน่ือง ข. ก�ำหนดไมใ่ หม้ ฟู วเ่ี ร่ิมเล่นทนั ทโี ดยอตั โนมตั ิ แต่จะเล่นเมอ่ื ผูช้ มคลกิ ปุ่มในมฟู วี่ ค. ใหพ้ ้นื หลงั ของบรเิ วณท่ีใชแ้ สดงมูฟว่ีโปรง่ ใสซ่ึงจะท�ำให้มองเหน็ สงิ่ ที่อยู่ด้านหลงั ง. ให้พ้ืนหลังของมูฟวี่เป็นสีทึบและแสดงอยู่ภายในขอบเขตที่แยกต่างหากจากองค์ประกอบอื่น ของเว็บเพจ 7. ถา้ ต้องการก�ำหนดการเลน่ GIF ใหว้ นซ้ำ� ตามจ�ำนวนรอบทีเ่ ราได้ตง้ั ไวต้ อ้ งเลอื กออปช่ันใด ก. Static ข. Animated ค. Loop Continuously ง. Repeat Times 8. ออปชนั่ Bit Depth ในการสร้างไฟล์ PNG มีหนา้ ทอี่ ะไร ก. ก�ำหนดความละเอียดของส ี ข. เปลีย่ นสีเกรเดียนทใ์ ห้เป็นสที ึบ ค. ก�ำหนดชนดิ ของส ี ง. ก�ำหนดจ�ำนวนสี 9. ถ้าตอ้ งการก�ำหนดสีท่ีใชใ้ นการสรา้ งไฟล์ PNG ต้องใชอ้ อปช่นั ใด ก. Bit Depth ข. Palette Type ค. Palette ง. Max Colors 10. ถา้ ต้องการ Export ภาพเพยี งภาพเดยี วในโปรแกรม Adobe Flash ตอ้ งเลือกค�ำสั่งใด ก. Export Movie ข. Export Image ค. Export PNG Sequence ง. Generate Sprite Sheet ตอนท่ี 3 : อธิบายคำ� ศพั ท์ (หมายถึง การให้รายละเอยี ดเพม่ิ เติม ขยายความ ถ้ามตี ัวอยา่ งให้ยก ตัวอยา่ งประกอบ) 1. Publish 6. Template 2. Player 7. Playback 3. Script 8. Window Mode 4. Permit Debuging 9. Flash Alignment 5. Local Playback 10. Filter Options

Adobe31F2lash CS6 บทที่ 10 การนำ�เสนอผลงานใหแ้ พร่หลาย ใบงานท่ี 10.1 ให้นักศึกษาทดลองตั้งค่า Publish ผลงาน Flash Animation ท่ีสร้างข้ึน ตามตัวอย่างเน้ือหา ในบทเรยี นบทท่ี 10 โดยเลอื กแบบ swf แบบ JPEG และแบบ Win Projector หมายเหตุ : ใชไ้ ฟลง์ าน Lesson 9 Sound.fla ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ใบงานที่ 10.2 ให้นักศึกษาทดลอง Export ไฟล์งาน สามารถทำ�ตามข้ันตอนได้ตามบทเรียนบทที่ 10 โดยให้ ทดลอง Export แบบ Movie, แบบ Image และ Export PNG Sequence หมายเหตุ : ใช้ไฟล์งาน Lesson 9 Sound.fla ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………

Adobe Flash CS6 11บทที่ การจัดทำ� โครงงานย่อยและ การสรา้ ง Flash Animation 2 มิติ และ 3 มิติ จุดประสงคเ์ ชงิ พฤติกรรม (Behavioral Objectives) หลังจากศึกษาจบบทเรียนน้แี ลว้ นักศกึ ษาจะมีความสามารถดังน้ี 1. ระบสุ ถานะของปุม่ ได้ 2. บอกขั้นตอนการสรา้ งปมุ่ ในสถานะตา่ ง ๆ ได้ 3. อธิบายการทำ�แอนิเมชันใหร้ ปู สนุ ัขกะพรบิ ตาได้ 4. ปฏิบัตกิ ารสรา้ งหน้าเวบ็ ลงิ ค์ได้

Adobe Flash CS6314 บทที่ 11 การจดั ทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มิติ และ 3 มติ ิ บทท่ี การจัดทำ�โครงงานย่อยและ 11 การสรา้ ง Flash Animation 2 มิติ และ 3 มติ ิ ในบทนี้จะเป็นการนำ�ผลงานท่ีสร้างข้ึนมาจากโปรแกรม Flash CS6 มานำ�เสนอในรูปแบบของ แอนเิ มชัน โดยตอ้ งการส่อื ให้เห็นถงึ การประยกุ ต์ใชง้ านโปรแกรม Flash CS6 ไดอ้ ย่างทีต่ อ้ งการ ไม่ว่าจะ ใช้ในการนำ�เสนองานต่าง ๆ โดยเราสามารถมองได้ในรปู แบบการสรา้ งแบบ 2 มติ ิ และใชก้ ารกดปุ่มเพอ่ื แสดงในรูปแบบชนิ้ งานแอนิเมชนั โดยเริม่ เรียนรู้จากการสร้างปุ่ม การสรา้ งปมุ่ การสร้างปุ่ม เราจะสร้างเนื้อหาไว้ในเฟรมท้ัง 4 เพ่ือใช้แสดงตามสถานะของปุ่มนั่นเอง โดย สถานะของปมุ่ จะประกอบด้วยเฟรม 4 เฟรม ดงั น้ี - เฟรม Up เป็นเฟรมทจ่ี ะแสดงออกมา เมื่อเมาส์พอยเตอรอ์ ยภู่ ายนอกขอบเขตของปุ่ม - เฟรม Over เปน็ เฟรมท่จี ะแสดง เมอ่ื เมาส์พอยเตอร์เลื่อนมาอย่ภู ายในขอบเขตของปุ่ม - เฟรม Down เปน็ เฟรมท่ีจะแสดง เม่อื ปมุ่ ถูกคลิก - เฟรม Hit เป็นเฟรมท่ีใช้สำ�หรับกำ�หนดขอบเขตของปุ่ม เพ่ือให้มีการตอบสนองต่อเมาส์ใน 3 สถานะขา้ งตน้ ดังนั้น เนือ้ หาท่อี ยูใ่ นเฟรมนีจ้ ะไมถ่ กู แสดงเมือ่ มกี ารนำ�ปุ่มไปใช้ การสร้างปุ่มจะให้มีการเคลื่อนไหวบ้างจากการเตรียมพร้อมในหัวข้อที่ผ่านมา ซึ่งในสถานะ อื่น ๆ เราจะใสใ่ หค้ รบตามขัน้ ตอนดังน ้ี คือ การสร้างปุ่มทีส่ ถานะ UP เพือ่ รอการคลิกปุ่ม 1 1. สร้างออบเจ็กต์ขึ้นมา ก๊อปปี้ออบเจ็กต์น้ีไว้ โดย กดป่มุ Ctrl + C แล้วคลิกที่เมนู Insert > New Symbol

การสรา้ งภาพเคลอ่ื นไหวเบือ้ งตน้ Adobe Fla3s15h CS6 2. ชอ่ ง Name ให้ต้ังช่อื ชอ่ ง Type เลือก Button แลว้ คลิกปมุ่ OK 2 3. สถานะแรกที่เห็นคือ สถานะ UP คลิกเลือกท่ีสถานะ UP แล้ววางออบเจ็กต์ที่เราก๊อปป้ีไว้ โดยกดปุ่ม Ctrl + V จากนน้ั ให้คลกิ ขวาเลอื ก Insert Keyframe หรอื กดปมุ่ F6 3 การสรา้ งปุม่ ทส่ี ถานะ Over ในขณะทีว่ างเมาสข์ วาบนป่มุ แตย่ ังไม่ไดค้ ลกิ ปุ่ม 4. คลิกเลือกท่ีสถานะ Over แลว้ กดปมุ่ F6 จากนนั้ ใหเ้ ปลี่ยนสีพ้นื ของออบเจก็ ตใ์ ห้เป็นสอี นื่ 4

Adobe Flash CS6316 บทที่ 11 การจัดทำ�โครงงานย่อยและการสรา้ ง Flash Animation 2 มิติ และ 3 มติ ิ การสรา้ งปุ่มทส่ี ถานะ Down ในตอนทค่ี ลิกบนปุ่ม 5. คลกิ เลือกทสี่ ถานะ Down กดปมุ่ F6 แล้วเปลย่ี นสีพ้ืนออบเจก็ ต์ให้เปน็ สอี ื่น 5 สรา้ งปมุ่ ท่ีสถานะ Hit ก�ำ หนดขอบเขตการคลิกเมาส์ 6. คลิกเลอื กทีส่ ถานะ Hit แล้วกดปุ่ม F6 7. คลกิ ช่อื Scene1 เพ่ือส้นิ สดุ การสรา้ งปุม่ 7 6 ทดสอบการสร้างปมุ่ 8. เปดิ หนา้ ตา่ งไลบราร่ี โดยกดปมุ่ Ctrl + L 9. คลิกที่ช่อื ปมุ่ ท่สี รา้ งคา้ งไว้แลว้ ลากมาวางบน Stage แล้วเลือกการทดสอบ ดงั นี้

การสร้างภาพเคลอ่ื นไหวเบื้องต้น Adobe Fla3s17h CS6 - คลกิ คำ�สง่ั Control > Enable Simple Buttons เพ่ือทดสอบปมุ่ ทีว่ างอย่บู นสเตจได้ โดยตรงทนั ที - คลกิ คำ�ส่ัง Control > Test Scene หรอื ค�ำ สัง่ Control > Test Movie เพ่อื ทดสอบ ปมุ่ และองคป์ ระกอบอ่นื ของมูฟว่ีพรอ้ ม ๆ กันผ่านทาง Flash Player - คลิกเลือกปุม่ ในไลบราร่ี แลว้ คลกิ ปุม่ Play ในชอ่ ง Preview 8 9 ผลลัพธ์ สถานะเร่ิมต้น เมือ่ วางเมาสบ์ นปมุ่ เมอ่ื คลิกเมาสบ์ นปุม่ การท�ำ แอนเิ มชนั สนุ ขั กะพรบิ ตา 1. ทำ�การนำ�ไฟล์รูปที่ได้เตรียมไว้มาลงไว้ท่ี โปรแกรม Flash โดยแยกเป็น 3 ส่วน แบ่งเป็น ส่วนหัว และสว่ นล�ำ ตัว

Adobe Flash CS6318 บทที่ 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 2. ทำ�การ Create New Symbol เปน็ Movie Clip 2 3. นำ�ภาพส่วนตัวมาใสท่ ่ี Frame ท่ี 1 3 4. ทำ�การสรา้ ง Layer ขน้ึ มาใหม่ และน�ำ รปู สว่ นหวั มาไว้ท่ี Frame ที่ 1 4

การสรา้ งภาพเคล่อื นไหวเบื้องต้น Adobe Fla3s19h CS6 5. ทำ�การคลิกขวาท่ี Frame ท่ี 11 จากนั้นเลอื ก Insert Keyframe ท้ัง 2 Layer 5 6. ทำ�การเปลี่ยนรูปส่วนหวั ทีเ่ ฟรมที่ 11 ดังรปู 6

Adobe Flash CS6320 บทท่ี 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 7. ทำ�การคลกิ ขวาที่ Frame ที่ 21 จากน้นั เลอื ก Insert Keyframe ทง้ั 2 Layer และทำ�การ เปล่ียนรปู ส่วนหวั ทเ่ี ฟรมที่ 21 ดงั รูป 7 8. แค่นเ้ี รากจ็ ะไดแ้ อนิเมชันสนุ ขั นง่ั กะพริบตาดงั รูป 8

การสร้างภาพเคลื่อนไหวเบื้องตน้ Adobe Fla3s21h CS6 การสรา้ งหนา้ เวบ็ ลงิ ค์ 1 1. คลิกคำ�ส่ัง File > Import > Import to Library… 2. เลือกแบ็กกราวด์ แล้วคลิก Open 2 3 3. กดปุ่ม <Ctrl + L> เพ่ือเปดิ หนา้ ต่างไลบราร่ี 4. ที่หน้าต่างไลบราร่ีคลิก ท่ีชื่อรูปแบ็กกราวด์ค้างไว้แล้วลากมา วางบนสเตจ 5. บันทึกไฟล์เก็บไว้เพื่อ เตรยี มไว้ใช้งาน

Adobe Flash CS6322 บทที่ 11 การจัดทำ�โครงงานย่อยและการสรา้ ง Flash Animation 2 มิติ และ 3 มติ ิ ใส่ปมุ่ ลงไปในเวบ็ เพจ ในขณะท่ีเปิดไฟล์ท่ีบันทึกเอาไว้ จะทำ�การเปิดเฉพาะไลบราร่ีของไฟล์สร้างปุ่มแล้วใส่ในเว็บไซต์ ตามขั้นตอนดังนี้ 6. คลิกเมนู File > Import > Open External Library 6 7. เลอื กช่ือไฟลท์ บี่ นั ทึกการสรา้ งปุม่ แล้วคลิก Open 8. คลิกป่มุ Text Tool ที่ Tools Panel 9. ใส่ขอ้ ความลงไปในเวบ็ ไซตเ์ พอ่ื เปน็ คำ�อธิบายของแต่ละปุม่ 10. ปรับแตง่ รูปแบบตวั อักษรและขนาดใหเ้ หมาะสม 8 7

การสร้างภาพเคลอ่ื นไหวเบือ้ งต้น Adobe Fla3s23h CS6 11. คลกิ ปมุ่ Selection Tool ที่ Tools Panel 12. ในหนา้ ต่างไลบรารค่ี ลิกเมาสค์ า้ งไว้ แล้วลากป่มุ มาวางขา้ งหนา้ ขอ้ ความที่สร้างขึ้น 11 ใส่ลิงค์ให้กับปุม่ เม่ือใส่ปุ่มเข้าไปแล้ว ต่อไปจะเป็นการเพ่ิมคุณสมบัติต่าง ๆ ให้กับปุ่มในการเปิดเว็บไซต์หรือ Scene อ่ืน ๆ ได้ต่อไปตามขนั้ ตอนต่อไปน้ี 13. คลิกเมาส์ขวาบนปมุ่ ท่ีหลงั ข้อความ เลือกเมนู Actions 13

Adobe Flash CS6324 บทที่ 11 การจัดทำ�โครงงานยอ่ ยและการสรา้ ง Flash Animation 2 มิติ และ 3 มิติ 14. ที่ Actions คลิกท่ี Script 14 Assist 15. เลอื กเมนู Global Functions > Browser/Network >getURL ตอ้ งเลอื กใช้ ActionScript 1.0&2.0 ดว้ ย 16. ใสช่ ่อื เวบ็ ไซต์ในช่อง URL 15 16 17. คลกิ ท่บี รรทัดแรกในกรอบ Action 18 List ซ่ึงตอนนจี้ ะเปน็ ค�ำ สง่ั onRelease( ) 18. คลิกกำ�หนดเหตุการณ์ Press จะมีผลทำ�ให้เปิดหน้าเว็บไซต์ที่กำ�หนดไว้เมื่อมี การคลิกเมาสบ์ นปุม่ นี้ 19. กดปุ่ม Ctrl + Enter ทดสอบ การทำ�งานของป่มุ

การสรา้ งภาพเคล่อื นไหวเบ้อื งตน้ Adobe Fla3s25h CS6 การสรา้ งไฟลแ์ อนเิ มชนั 3 มติ ิ ในการสร้างไฟล์แอนิเมชันนำ�เสนอช้ินงาน เพ่ือให้การนำ�เสนอดูน่าสนใจมากข้ึน โดยสามารถ เพิ่มความน่าสนใจในการน�ำ เสนอแอนเิ มชันในรปู แบบ 3 มิติ ตัวอย่างการสรา้ งไฟลแ์ อนิเมชันในรปู แบบ 3 มิติ 1 1. คลกิ ที่ Rectangle Tool เพ่อื สร้างรปู ส่ีเหลี่ยมผืนผา้ 2. คลกิ เลอื กท่ี Selection Tool เพ่ือท�ำ การลากครอบสี่เหลย่ี มผนื ผา้ ที่เราได้ท�ำ การสร้างไว้ 2

Adobe Flash CS6326 บทที่ 11 การจัดทำ�โครงงานยอ่ ยและการสรา้ ง Flash Animation 2 มิติ และ 3 มติ ิ 3. ทำ�การเปล่ียนรูปส่ีเหล่ียม 3 ให้เป็นมูฟวี่ โดยการกดคีย์ลัด F8 เพ่ือ เข้าสกู่ าร Convert to Symbol จากนั้น เลือก Type เป็น Movie Clip และ ทำ�การตงั้ ชอ่ื มูฟว่ี 4. คลกิ ทป่ี มุ่ 3D Rotation Tool เพอ่ื ท�ำ การหมนุ รปู รา่ งทส่ี รา้ ง ซง่ึ จะมสี ญั ลกั ษณป์ รากฏดงั รปู 4 5. ไปท่ี Edit > Customize Tools Panel… 5

การสรา้ งภาพเคล่อื นไหวเบ้ืองต้น Adobe Fla3s27h CS6 6. จะขึน้ หน้าตา่ ง Customize Tools Panel ใหค้ ลกิ เลอื ก 3D Rotation Tool (W) ตามด้วย กดปมุ่ >>Add>> เพอ่ื เพ่มิ ลงไปทาง Current selection: จากนัน้ กดปมุ่ OK 6 7. จากนน้ั จากรปู สีเ่ หล่ียมผืนผา้ ธรรมดากส็ ามารถปรบั หมุนในรูปแบบ 3D ได้ 7

Adobe Flash CS6328 บทที่ 11 การจดั ทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มิติ และ 3 มิติ 8. ทำ�การสรา้ ง Insert Frame ที่ Frame ท่ี 15 8 9. จากนน้ั ทำ�การสร้าง Motion Tween โดยการคลกิ ขวาเลือก Create Motion Tween 9

การสรา้ งภาพเคล่อื นไหวเบือ้ งต้น Adobe Fla3s29h CS6 10. จากนั้นทำ�การลองปรบั หมุนรูปสีเ่ หลี่ยมตามต้องการ 10 การสรา้ งภาพแบบ 3 มติ ิ 1. ทำ�การวาดรปู ดาว 1

Adobe Flash CS6330 บทท่ี 11 การจดั ทำ�โครงงานย่อยและการสรา้ ง Flash Animation 2 มิติ และ 3 มิติ 2. คลกิ ขวาทีร่ ูปดาวและเลือก Convert to Symbol… 2 3. ตั้งชอ่ื และทำ�การเลือก Type เปน็ Graphic 3

การสรา้ งภาพเคลื่อนไหวเบอื้ งตน้ Adobe Fla3s31h CS6 4. คลิกขวาท่เี ฟรมท่ี 1 และเลอื ก Create Classic Tween 4 5. คลิกขวาท่ีเฟรมท่ี 7 และเลอื ก Insert Keyframe 5

Adobe Flash CS6332 บทท่ี 11 การจัดทำ�โครงงานย่อยและการสรา้ ง Flash Animation 2 มติ ิ และ 3 มติ ิ 6. ทำ�การย่อขนาดรูปดาวใหเ้ ล็กลง 6 7. เมื่อยอ่ เสร็จแล้วจะไดข้ นาดดังภาพ 7

การสร้างภาพเคลอ่ื นไหวเบ้ืองตน้ Adobe Fla3s33h CS6 8. คลกิ ขวาทเ่ี ฟรมท่ี 8 และเลอื ก Insert Keyframe 8 9. ทำ�การเลอ่ื นตำ�แหน่งรปู ดาวไปทางซา้ ย 9

Adobe Flash CS6334 บทที่ 11 การจดั ทำ�โครงงานย่อยและการสรา้ ง Flash Animation 2 มติ ิ และ 3 มติ ิ 10. คลกิ ขวาทเ่ี ฟรมที่ 15 และเลอื ก Insert Keyframe 10 11. ทำ�การขยายขนาดรูปให้มีขนาดใหญ่ตามเดมิ 11

การสร้างภาพเคลือ่ นไหวเบอ้ื งต้น Adobe Fla3s35h CS6 12. ทำ�การสร้างเลเยอร์ขน้ึ มาใหม่ 12 13. ทำ�การ Lock Layer 1 ไว้เพอ่ื ป้องกนั การเปล่ยี นแปลง 13 14. คลิกที่ Layer 2 และคลิกขวาเลือก Remove Frames เพ่ือทำ�การลบเฟรมท่ีสร้างขึ้นมา อัตโนมตั อิ อก 14

Adobe Flash CS6336 บทที่ 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มิติ และ 3 มติ ิ 15. คลิกขวาทเ่ี ฟรมที่ 1 ของ Layer 2 และเลอื ก Insert Keyframe 15 16. ทำ�การวาดรูปดาวขนึ้ มาทเ่ี ฟรม 1 ของ Layer 2 16

การสรา้ งภาพเคล่อื นไหวเบอื้ งต้น Adobe Fla3s37h CS6 17. คลิกขวาท่ีรปู ดาวและทำ�การเลือก Convert to Symbol… 17 18. ทำ�การตั้งชือ่ และเลอื กเป็น Graphic 18

Adobe Flash CS6338 บทท่ี 11 การจัดทำ�โครงงานยอ่ ยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 19. คลกิ ขวาท่เี ฟรมที่ 1 ของ Layer 2 และเลอื ก Create Classic Tween 19 20. คลกิ ขวาทเ่ี ฟรมที่ 7 ของ Layer 2 และเลอื ก Insert Keyframe 20

การสรา้ งภาพเคลอ่ื นไหวเบื้องต้น Adobe Fla3s39h CS6 21. ทำ�การยอ่ รปู ดาวให้มขี นาดเล็กเท่ารปู ดาวของ Layer 1 21 22. เลอ่ื นรปู ดาวไปทางซ้ายมือ 22

Adobe Flash CS6340 บทที่ 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 23. เลอื ก Style ของพาเนล Color EFFECT เปน็ Brightness 23 24. ตงั้ ค่า Bright เป็น -78% 24 25. คลิกขวาทเี่ ฟรมท่ี 8 ของ Layer 2 และเลือก Insert Keyframe 25

การสรา้ งภาพเคลอ่ื นไหวเบ้อื งต้น Adobe Fla3s41h CS6 26. ทำ�การเลอ่ื นตำ�แหนง่ รปู ดาวไปทางขวา 26 27. คลกิ ขวาทเ่ี ฟรมท่ี 15 ของ Layer 2 และทำ�การเลือก Insert Keyframe 27

Adobe Flash CS6342 บทท่ี 11 การจดั ทำ�โครงงานย่อยและการสร้าง Flash Animation 2 มติ ิ และ 3 มติ ิ 28. ขยายรปู ดาวใหม้ ีขนาดดังเดิม 28 29. ต้งั ค่า Bright เปน็ 6% 30. จะได้ผลดงั ภาพ 29 30

การสร้างภาพเคล่ือนไหวเบอื้ งต้น Adobe Fla3s43h CS6 31. เปล่ยี นสีแบ็กกราวด์ใหเ้ ป็นสดี ำ� 31 32. จะไดผ้ ลลัพธด์ งั ภาพ 32