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

Adobe24F4lash CS6 บทที่ 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 2 1 3. คลิกเลอื กท่ี Bone Tool 4. คลกิ เลือกลากสว่ นต่าง ๆ 5. คลิกขวาทเี่ ฟรม 10 เลือก Insert Frame 6. จัดทา่ ทางตามตอ้ งการ 7. ทดสอบการเคลอื่ นไหวโดยกดคีย์ Enter 3 64 5

การสรา้ งภาพเคล่อื นไหวเบือ้ งตน้ Adobe Fla2s45h CS6 การใช้ Bind Tool การใช้ Bind Tool ใชไ้ ดก้ ับวัตถชุ นิ้ เดยี ว โดยเลือก Bind Tool ที่จุดหมุนช้นิ สดุ ทา้ ยกจ็ ะเหน็ เสน้ พาธจากจุดเริม่ ต้น ถงึ จดุ ปลาย สรปุ ทา้ ยบท การสร้างแอนิเมชันเคล่ือนไหวในโปรแกรม Flash สามารถท�ำได้หลายรูปแบบ เช่น การซูม (Zoom In/Out) เขย่าภาพ (Tilting) การหมุน (Rotate) วิ่งตามภาพ (Tracking) การท�ำทรานซิชัน (Transition) ปรับความโปร่งใสของภาพ (Alpha) ก�ำหนดทิศทางของชิ้นงานด้วย Guide Layer เปล่ยี นรปู (Shape Tween) เป็นตน้ และชนดิ ของภาพเคล่ือนไหว มอี ยู่ 2 รูปแบบ คอื เคลื่อนไหวแบบ เฟรมต่อเฟรม (Frame - by - Frame Animation) และเคล่ือนไหวแบบทวีน (Tween Animation) นอกจากนี้ยังมีการใชก้ ารเคลื่อนไหวดว้ ยการสร้าง Bone & Bind Tool ในการท�ำการเคลอ่ื นไหวแบบใช้ กระดูกเหมอื นเพอื่ ท�ำให้การเคลื่อนไหวดูสมจริงมากขนึ้

Adobe24F6lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 แบบทดสอบและกิจกรรมการฝึกทกั ษะ บทที่ 8 การสรา้ งผลงาน Animation ดว้ ย โปรแกรม Adobe Flash CS6 ตอนที่ 1 : อธิบาย (หมายถึง การให้รายละเอยี ดเพ่ิมเตมิ ขยายความ ถ้ามีตวั อย่างให้ยกตวั อย่าง ประกอบ) 1. Tilting คอื อะไรในการสร้างภาพเคลือ่ นไหว 2. Tracking คืออะไรในการสร้างภาพเคล่อื นไหว 3. Frame - by - Frame Animation หมายถงึ อะไร 4. Tween Animation เปน็ การสรา้ งภาพเคลอื่ นไหวแบบใด 5. ภาพเคลอ่ื นไหวแบบทวนี แบง่ ออกเปน็ 2 ประเภท มอี ะไรบา้ ง 6. การสรา้ งภาพเคลือ่ นไหวแบบแยกเฟรมเหมาะส�ำหรบั แบบใด และมขี ้อเสียอยา่ งไร 7. การเคลือ่ นไหวแบบ Motion Tween คอื อะไร และเหมาะกบั งานแบบใด 8. วิธกี ารสรา้ งดว้ ยค�ำสง่ั Motion Tween จะแตกต่างกับ Classic Tween อย่างไร 9. เครือ่ งมอื 3D Rotation และเคร่ืองมือ 3D Translation ใช้ส�ำหรับท�ำอะไร 10. Bind Tool มีการใช้งานอยา่ งไร ตอนท่ี 2 : จงเลอื กคำ� ตอบทถ่ี ูกต้องที่สดุ เพียงขอ้ เดยี ว 1. ถ้าต้องการปรับความโปร่งใสให้กับภาพต้องปรบั ค่าในข้อใด ก. Alpha ข. Radius ค. Stroke ง. Scale 2. ถา้ เราตอ้ งการหมนุ ภาพตอ้ งเลอื กใชเ้ ครอื่ งมอื ใด ก. Subselection Tool ข. Free Transform Tool ค. Selection Tool ง. Gradient Transform Tool 3. เทคนคิ Shape Tween คอื อะไร ก. การเปลยี่ นต�ำแหนง่ หรอื ทศิ ทางและยงั รวม ไปถงึ การเปลยี่ นแปลงคณุ สมบตั ขิ องตวั ออบเจก็ ตเ์ อง ข. การก�ำหนดเส้นทางให้ชิ้นงานเคลอ่ื นไหวไปตามทศิ ทางที่ต้องการ ค. การเปล่ียนจากรูปรา่ งหน่งึ ไปเป็นอีกรูปร่างหนงึ่ ง. การสรา้ งคยี เ์ ฟรมหลาย ๆ เฟรมเรยี งตอ่ กนั โดยแตล่ ะเฟรมจะมเี นอ้ื หาทเ่ี ปน็ ภาพนง่ิ และคอ่ ย ๆ เปล่ียนแปลงไปทลี ะเฟรม

การสรา้ งภาพเคลือ่ นไหวเบ้อื งต้น Adobe Fla2s47h CS6 4. การเปล่ยี นขนาด การเปล่ียนสี การหมนุ และการจางหาย จดั อยูใ่ นเทคนคิ ใด ก. Motion Tween ข. Frame - by - Frame Animation ค. Shape Tween ง. Guide Layer 5. การก�ำหนดเส้นทางให้ช้นิ งานเคล่อื นไหวไปตามทศิ ทางทตี่ อ้ งการคอื ขอ้ ใด ก. Motion Tween ข. Frame - by - Frame Animation ค. Shape Tween ง. Guide Layer 6. การสร้าง Blank Keyframe สามารถใชค้ ียล์ ดั ในขอ้ ใด ก. F5 ข. F6 ค. F7 ง. F8 7. ภาพเคล่ือนไหวที่ต้องการความต่อเนื่องสม่�ำเสมอ เช่น ภาพดวงอาทิตย์ก�ำลังตกดิน ภาพกังหันท่ี ก�ำลงั หมุน ภาพเครื่องบนิ ก�ำลังบินข้ึน หรอื ภาพกอ้ นเมฆทล่ี อยอยู่ เหมาะกับเทคนิคในข้อใด ก. Motion Tween ข. Frame - by - Frame Animation ค. Shape Tween ง. Guide Layer 8. ถา้ ตอ้ งการสรา้ งกระดกู เพอื่ ทจ่ี ะควบคมุ การเคลอ่ื นไหวของวตั ถทุ น่ี �ำมาประกอบกนั ตอ้ งใชเ้ ครอื่ งมอื ใด ก. Bind Tool ข. Bone Tool ค. Free Transform Tool ง. 3D Rotation Tool 9. เคร่อื งมือทใี่ ชใ้ นการแกไ้ ขจดุ เชื่อมตอ่ ของวตั ถุทีท่ �ำการสรา้ งขึ้นคอื ข้อใด ก. Bind Tool ข. Bone Tool ค. Free Transform Tool ง. 3D Rotation Tool 10. วธิ ีการสรา้ งด้วยค�ำสง่ั Motion Tween จะแตกต่างกับ Classic Tween อย่างไร ก. มเี สน้ ไกด์อตั โนมตั มิ าให้ ข. สร้างการเคล่ือนไหวให้โดยอตั โนมัติ ค. สรา้ งจดุ หมนุ ให้กบั วัตถุโดยอัตโนมตั ิ ง. ภาพเคลื่อนไหวท่ีสร้างมคี วามต่อเนอ่ื งสม่ำ� เสมอ ตอนที่ 3 : อธบิ ายคำ� ศัพท์ (หมายถึง การใหร้ ายละเอียดเพิม่ เตมิ ขยายความ ถ้ามีตวั อยา่ งให้ยก ตวั อยา่ งประกอบ) 1. Zoom In/Out 6. Tween Animation 2. Rotate 7. Motion Tween 3. Tilting 8. Shape Tween 4. Tracking 9. 3D Rotation 5. Frame - by - Frame Animation 10. Bone Tool

Adobe24F8lash CS6 บทที่ 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 ใบงานที่ 8.1 ตอนท่ี 1 ใหน้ ักศกึ ษาใช้โปรแกรม Flash สร้างผลงาน Animation ใหไ้ ด้ผลลพั ธ์ดงั ตวั อย่าง สามารถทำ�ตามข้ันตอนได้ดังน้ี 1. น�ำ รปู ภาพเขา้ มา โดยเลอื กเมนู File > Import > Import to Library 1 2. จากนั้นลากรูปภาพมาไว้ท่ี Stage จดั วางต�ำ แหนง่ ใหส้ วยงาม 2

การสร้างภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla2s49h CS6 3. ตั้งช่ือเลเยอร3์ใหม่ว่า Picture 4. กดปุ่ม F8 เพื่อทำ�การ Convert to Symbol ให้เปน็ Movie Clip 4 5 5. คลิกเฟรมที่ 40 กดปมุ่ F6 เพอื่ Insert Keyframe 6. คลิกเฟรมท่ี 1 ที่หน้าต่าง Properties ท่ีเมนู Filters คลิกท่ีปุ่ม เลือก Blur ปรบั คา่ ตามรปู ภาพ 6 6 7 7. คลกิ ขวาเลือก Create Classic Tween

Adobe25F0lash CS6 บทท่ี 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 8H.e arสtร้างเลเย8อร์ใหม่ ต้ังชอ่ื วา่ 10. ค ลิ ก เ ฟ ร ม ท่ี 9. วาดรูปหัวใจให้ครอบคลุมพ้ืนที่รูปภาพ ดังรูป 40 กดปุ่ม F6 เพ่ือ Insert ตัวอยา่ ง Keyframe 9 10 11. คลิกเฟรมที่ 1 แล้วเลือกเครื่องมือ Free Transform Tool ปรบั ขนาดรูปหัวใจให้เล็กลง ดงั ภาพ 11 12 12. คลกิ ขวาเลือก Create Shape Tween 13 13. คลิกขวาทเ่ี ลเยอร์ Heart เลอื กคำ�ส่งั Mask

การสร้างภาพเคล่อื นไหวเบ้อื งต้น Adobe Fla2s51h CS6 14. จากน้นั ทดสอบผลงานท่ีสร้าง กดปมุ่ Ctrl + Enter 15. จะสังเกตเห็นว่า ภาพท่ีแสดงจะเล่นอย่างรวดเร็วทำ�ให้ดูไม่ทัน ให้ทำ�การ Insert Frame เพิม่ ถึงเฟรมที่ 60 ทง้ั 2 เลเยอร์ โดยกดปุ่ม F5 15 ตอนท่ี 2 ใหน้ กั ศกึ ษาท�ำ Animation เพม่ิ เตมิ จากตอนท่ี 1 ใสข่ อ้ ความลงไปในผลงาน โดยนกั ศกึ ษาเปน็ ผคู้ ดิ Animation เองอยา่ งอสิ ระ ใชค้ วามรตู้ า่ ง ๆ จากบทเรยี นทเ่ี รยี นมา พรอ้ มบอกขน้ั ตอนการท�ำ Animation เป็นข้อ ๆ ตัวอยา่ งผลงานเมือ่ เพิ่มตวั อักษร ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………

Adobe25F2lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 ใบงานท่ี 8.2 ให้นกั ศกึ ษาสร้างผลงานใหไ้ ดผ้ ลลพั ธด์ งั ตวั อยา่ ง สามารถทำ�ตามขนั้ ตอนไดด้ ังนี้ 1. เลือกเครือ่ งมอื Text Tool พิมพ์คำ� วา่ Please Enter Your Name แลว้ ตงั้ ชื่อเลเยอร์ วา่ Text ดังรปู 1 2. สร้างเลเยอร์ใหม่ ตง้ั ชื่อว่า Input text 2

การสร้างภาพเคลื่อนไหวเบื้องตน้ Adobe Fla2s53h CS6 3. วาดรปู สเ่ี หล่ียม 1 รูปส�ำ หรับชอ่ ง Input text 4. ใช้เครอื่ งมอื Text Tool วาดครอบให้มีขนาดเทา่ รปู ส่ีเหล่ยี มทว่ี าดในขอ้ 3. 5. ที่แทบ็ Properties เลือกเป็น Input text และทช่ี ่อง Instance name ต้งั ชื่อวา่ box1 6. ที่เมนู Character สว่ น Anti-alias ต้ังคา่ เปน็ Use device fonts 7. สว่ นท่ี Paragraph เลอื ก Format เป็นแบบจัดกลาง และเลือก Behavior เป็น แบบ Single line ตามรูปตวั อย่าง 7 8 8. สร้างเลเยอร์ใหม่ ต้ังช่ือว่า Button วาดรปู ปุม่ ข้นึ มาและพมิ พช์ ือ่ 9. ทำ�การ Convert to Symbol ให้เป็นแบบ วา่ Press Me Button และต้ังชื่อว่า Press Me จากนั้นเข้าไปจัดการ Button ตามที่เคยทำ�ตามแบบในบทเรียน 9 10 10. ทีแ่ ท็บ Properties ตั้งชือ่ Instance name วา่ MyButton

Adobe25F4lash CS6 บทท่ี 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 11. สร้างเลเยอร์ใหม่ ตงั้ ชอื่ วา่ Dyna text 11 12. จากนั้นสร้าง Dynamic Text ขน้ึ มาจากเคร่อื งมือ Text Tool 13. ตัง้ ชื่อ Instance name ว่า box2 จากน้ันตงั้ คา่ รปู แบบตวั อักษร ขนาดตัวอักษร สี ทเี่ มนู Character ตามต้องการ และต้ังคา่ Anti-alias เป็น Use device fonts 14. ทเ่ี มนู Paragraph เลอื ก Format เปน็ แบบจดั กลาง และเลอื ก Behavior เปน็ แบบ Multiline ตามรปู ตวั อย่าง 13 14

การสร้างภาพเคล่ือนไหวเบื้องตน้ Adobe Fla2s55h CS6 15. ทำ�การเขียนสคริปต์ โดยกดปุ่ม F9 เพื่อเปิดหน้าต่างสำ�หรับเขียนโค้ด ให้เขียนโค้ดตาม ตวั อย่างดงั นี้ 15 15 16. เมอื่ เขยี นเสรจ็ จะสงั เกตเห็นว่ามเี ลเยอร์ Actions เกดิ ขึ้นโดยอัตโนมตั ิ 16 17. ทดสอบงานทีส่ รา้ ง โดยกดปมุ่ Ctrl + Enter จะไดผ้ ลลัพธ์ดังตวั อย่าง

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

การสรา้ งภาพเคลอ่ื นไหวเบอ้ื งตน้ Adobe Fla2s57h CS6 บทท่ี การเพิ่มเสียงประกอบให้กับ 9 ชิน้ งานเพอ่ื ความเพลดิ เพลนิ เราสามารถนำ�ไฟล์เสียงเข้ามาใช้ใน Flash เพื่อช่วยเพ่ิมความน่าสนใจให้กับมูฟว่ีหรือเพ่ือ ประกอบเขา้ กับเหตกุ ารณต์ ่าง ๆ ได้ โดยไฟลเ์ สียงทนี่ �ำ เขา้ มาถกู เกบ็ ไวใ้ นไลบรารี่ ซ่ึงเราสามารถดึงออก มาใช้ในลักษณะต่าง ๆ ตามความเหมาะสม เช่น ถ้าเป็นเสียงประกอบก็ให้เล่นคลอไปกับมูฟว่ีเรื่อย ๆ ถา้ เปน็ เสยี งทเ่ี กย่ี วขอ้ งกบั ภาพเคลอ่ื นไหวชว่ งใดชว่ งหนง่ึ กใ็ หเ้ ลน่ อยา่ งสอดคลอ้ งกบั จงั หวะของภาพนน้ั ๆ หรือถ้าเป็นเสียงส้ัน ๆ ก็ใช้ประกอบกับปุ่ม เช่น เสียง “กร๊ิก” เม่ือปุ่มถูกคลิก เป็นต้น นอกจากน้ี เรายังสามารถปรับแต่งเสียงโดยการปรับความดัง - ค่อยของเสียงแต่ละช่วง หรือปรับความแรงของ ชอ่ งสญั ญาณซา้ ย - ขวา แลว้ แตค่ วามเหมาะสมกบั เน้ือหาของมฟู วห่ี รอื เอฟเฟ็กตท์ ต่ี อ้ งการ เสยี งประกอบในมฟู ว่ีของ Flash แบง่ ออกเป็น 2 ประเภท ดังน้ี 1. Event Sound หมายถึง เสียงท่ีต้องดาวน์โหลดมาครบสมบูรณ์ก่อนจึงจะเร่ิมเล่นได้ และเมือ่ เล่นแลว้ กจ็ ะเลน่ อยา่ งต่อเนอ่ื งไปจนกวา่ เราจะสัง่ ใหห้ ยดุ 2. Stream Sound หมายถงึ เสยี งทจ่ี ะเริม่ เลน่ ทันทีทขี่ อ้ มลู ของเฟรมแรก ๆ ถกู ดาวน์โหลด เข้ามามากพอทจี่ ะเล่นได้ ไฟล์เสียงที่สามารถอิมพอร์ตมาใช้ใน Flash คือ ไฟล์ประเภท WAV, AIFF (.aif) และ MP3 นอกจากน้ี หากเคร่ืองติดต้ังโปรแกรม QuickTime 4 ขึ้นไป ก็จะสามารถใช้ไฟล์เสียงประเภทอื่นได้อีก หลายชนดิ คอื AU, QuickTime, System 7 และ Sound Designer II เน่ืองจากไฟล์เสียงมักมีขนาดใหญ่ โดยเฉพาะไฟล์ WAV และ AIFF แต่ส�ำหรับไฟล์ MP3 น้ัน มีขนาดเล็กกว่ามาก ดังนั้น เม่ือจะน�ำไปใช้บนเว็บเพจจึงจ�ำเป็นต้องเลือกให้เหมาะสม รวมทั้งจะต้อง บีบอัดข้อมูลหรือลดคุณภาพของเสียงลงบ้าง คุณสมบัติของไฟล์เสียงท่ีควรใช้ก็คือ ชนิด Mono ขนาด 16 - bit 22 kHz (ถ้าเป็นเสียงชนดิ Stereo จะมปี รมิ าณขอ้ มลู มากกว่า Mono ถงึ 2 เทา่ ) อยา่ งไรก็ดี Flash สามารถจะอมิ พอรต์ ไฟลเ์ สยี งแบบ 8 - bit หรอื 16 - bit ซง่ึ มอี ตั ราสมุ่ (Sample Rate หนว่ ยเปน็ kHz) ท่ี 11 kHz, 22 kHz หรอื 44 kHz เข้ามาใช้ไดด้ ้วยเชน่ กัน โดยในกรณีท่ีไฟล์ตน้ ฉบบั มีอัตราสุ่ม สงู ๆ เราสามารถสงั่ โปรแกรมแปลงเสยี งดังกลา่ วให้มีคุณภาพตำ่� ลง (ซ่งึ จะท�ำให้ปรมิ าณข้อมูลลดลงด้วย) เหมาะส�ำหรบั น�ำไปใช้กบั เว็บเพจ

Adobe25F8lash CS6 บทท่ี 9 การเพิ่มเสยี งประกอบใหก้ บั ชน้ิ งานเพอ่ื ความเพลิดเพลิน การอมิ พอร์ตเสยี ง การอิมพอรต์ เสียงสามารถท�ำได้โดย เลอื ก File > Import > Import to Library เมือ่ ปรากฏ หน้าต่างข้ึนมาให้ท�ำการเลือกเสียง หลังจากนั้นกดปุ่ม Open ไฟล์เสียงจะถูกน�ำเข้ามาเก็บไว้ท่ีใน Library 1. คลิกทคี่ �ำสั่ง Flie > Import to Library 1 2. เลือกโฟลเดอรท์ เี่ กบ็ ไฟล์ 3 3. คลกิ เลือกไฟลเ์ สียง 4. คลกิ ปุ่ม Open 2 4 จากนั้นไฟล์เสียงจะถกู น�ำเขา้ มาเกบ็ ไว้ในไลบรารี่ โดยมีไอคอนเปน็ รูป เมื่อเราคลิกเลือกชอื่ ไฟล์เสียงในไลบราร่ีจะมีภาพคล่ืนแสดงในช่องด้านบน พร้อมท้ังมีปุ่มควบคุมปรากฏ ซ่ึงเราสามารถใช้ ฟังเสียงได้ โดยคลกิ ปุ่ม Play เสียงจะถูกเล่น 1 ครง้ั และเม่ือต้องการหยดุ เลน่ ก็คลิกปมุ่ Stop

การสรา้ งภาพเคลื่อนไหวเบ้ืองต้น Adobe Fla2s59h CS6 ชนดิ ของเสียง ภาพคลน่ื เสียงจะมี 2 แบบ คือ ถา้ เป็นเสยี งชนิด Mono จะมเี พยี งช่องสญั ญาณเดยี ว แต่ถา้ เปน็ ชนดิ Stereo จะมี 2 ช่องสญั ญาณ ดังรปู คลืน่ เสยี งแบบ Mono คล่นื เสียงแบบ Stereo การใสเ่ สยี งประกอบตลอดการแสดง หากต้องการให้ปรากฏเล่นเสียงประกอบข้ึนมาตลอดในขณะก�ำลังแสดงผลงานผ่านทางเว็บไซต์ น้ันก็สามารถท�ำได้ แต่ข้อพึงระวัง คือ ผลงานที่สร้างขึ้นจะมีขนาดไฟล์ท่ีใหญ่ข้ึน แต่หากต้องการ ให้ไฟล์ท่ีได้มีขนาดเล็กลง ก็จะต้องมีการก�ำหนดจุดหยุดให้กับการแสดงผลงานด้วย ซ่ึงนอกจากจะ ท�ำใหไ้ ฟลม์ ขี นาดเลก็ แลว้ ยังเป็นการชว่ ยประหยดั หน่วยความจ�ำไดม้ ากขน้ึ อีกด้วย ข้ันตอนการน�ำไฟล์เสียงเข้ามาประกอบลงในผลงาน เม่ือท�ำการแสดงผลจะปรากฏได้ยินไฟล์ เสียงหรือไฟล์เพลงประกอบท่วงท�ำนองขึ้นมาทันที ส�ำหรับข้ันตอนการน�ำไฟล์เสียงเข้ามาประกอบ สามารถท�ำได้ดังน้ี 1. คลิกเพือ่ สร้างเลเยอรใ์ ห้กบั เสียง 2. คลิกเลอื กคยี ์เฟรม 3. ท่พี าเนล Properties ในส่วนของ Sound ใหเ้ ลอื กช่อื ไฟล์เสยี งที่ Name 4. ช่อง Sync เลอื ก Start และเลือก Loop 5. ทดสอบมฟู วีโ่ ดยกดคีย์ Enter

Adobe26F0lash CS6 บทที่ 9 การเพ่มิ เสียงประกอบให้กบั ชน้ิ งานเพอื่ ความเพลดิ เพลิน 2 3 4 1 2 3 การใส่เสียงประกอบการแสดงบางช่วง 1. คลิกเฟรมท่ีตอ้ งการเร่ิมเล่นเสยี งแลว้ กดคีย์ F6 เพื่อสร้างคียเ์ ฟรม 2. ทีพ่ าเนล Properties ทีส่ ่วน Sound คลกิ เลอื กช่ือไฟลเ์ สียงที่ Name 3. คลิกชอ่ ง Sync แล้วเลอื ก Start 1

การสรา้ งภาพเคลือ่ นไหวเบอ้ื งต้น Adobe Fla2s61h CS6 4 5 6 4. คลกิ เลอื กเฟรมสดุ ท้ายทีเ่ ปน็ จุดจบแล้วกดคีย์ F6 5. ทพี่ าเนล Properties ในส่วนของ Sound ใหเ้ ลือกไฟล์เสยี งเดมิ 6. ช่อง Sync เลอื ก Stop ทดสอบฟังเสียงประกอบตลอดการแสดง การน�ำไฟล์เสียงเข้ามาประกอบลงในผลงานสามารถท�ำได้อย่างง่าย เพียงแค่ Import ไฟล์เสียง ท่ีต้องการเข้ามา จากน้ันจึงให้คลิกเมาส์ซ้ายค้างไว้แล้วลากน�ำเอาไฟล์เสียงที่ได้ Import เข้ามาไว้ท่ี พื้นงาน และเมื่อได้ทดสอบการแสดงผล โปรแกรมจะท�ำการเล่นไฟล์เสียงประกอบขึ้นมาโดยอัตโนมัติ แตห่ ากคลกิ ทป่ี มุ่ โปรแกรมกจ็ ะปรากฏเลน่ ไฟลเ์ สยี งอกี เสยี งหนงึ่ ทไ่ี ดเ้ คยสรา้ งไว้ พรอ้ มทง้ั ท�ำการเชอ่ื มตอ่ เข้าสู่ Scene ท่ี 2 ใหท้ นั ที ข้นั ตอนในการทดสอบท�ำไดด้ งั น้ี คลกิ เมนู Control > Test Movie หรือกด <Ctrl + L> จากนัน้ โปรแกรมจะท�ำการเล่นแสดง ผลงานแอนิเมชนั พรอ้ มท้งั เลน่ ไฟลเ์ สียงประกอบท่วงท�ำนองขนึ้ มา

Adobe26F2lash CS6 บทท่ี 9 การเพม่ิ เสยี งประกอบให้กับช้ินงานเพอ่ื ความเพลิดเพลิน ก�ำหนดจุดหยดุ ให้กับเสยี งประกอบตลอดการแสดง ในบางคร้ังผู้เข้าชมเว็บไซต์อาจจะเพลิดเพลินกับการฟังเพลงประกอบท่วงท�ำนองจนลืมคลิก ปุ่มท่ีต้องการให้เชื่อมโยงเพ่ือดูข้อมูลใน Scene 2 ดังนั้น เราสามารถก�ำหนดจุดหยุดให้กับไฟล์เสียง ประกอบท่วงท�ำนอง ณ ต�ำแหน่งท่ีต้องการให้มีการส้ินสุดการแสดงข้อมูลและไฟล์เสียงน้ันลงได้เช่นกัน ซ่ึงหากผู้ชมเข้ามาชมและไม่ได้คลิกที่ปุ่มเม่ือถึง Frame ท่ีก�ำหนด โปรแกรมก็จะหยุดเล่นเสียงประกอบ ท่วงท�ำนองลงทันที ส�ำหรับการก�ำหนดจุดหยุดให้กับเสียงประกอบสามารถท�ำได้ตามขั้นตอนดังต่อไปน้ี 1. คลกิ เมนู Window > Actions ให้ปรากฏเครื่องหมายถูก จากนน้ั จะปรากฏ Actions Panel ขน้ึ มา 1 2. คลิก Global Function > Timeline Control > StopAllSounds 2

การสรา้ งภาพเคล่ือนไหวเบ้อื งตน้ Adobe Fla2s63h CS6 3. คลิก Global Function > Timeline Control > Stop ภาพจะหยดุ เมือ่ แสดงมาถงึ Frame ท่ีก�ำหนด 3 4. คลิกเมาสค์ า้ งไวแ้ ล้วลาก Action จากเฟรม 1 มาไวเ้ ฟรม 40 เพอ่ื ก�ำหนดจุดหยุดของข้อมูล Frame สดุ ทา้ ยใน Scene 1 4

Adobe26F4lash CS6 บทท่ี 9 การเพิม่ เสยี งประกอบให้กบั ชน้ิ งานเพ่อื ความเพลิดเพลนิ ทดสอบฟงั เสียงประกอบตลอดการแสดงพร้อมจุดหยดุ เมื่อได้ใส่ค�ำส่ัง Stop All Sounds เพื่อเป็นการก�ำหนดจุดหยุดในการเล่นไฟล์เสียงประกอบ ท่วงท�ำนอง พร้อมทั้งสั่งค�ำสั่ง Stop เพ่ือก�ำหนดจุดหยุดในการแสดงภาพให้กับช้ินงานเรียบร้อยแล้ว หากผู้เข้ามาเยี่ยมชมเว็บและไม่ได้คลิกท่ีปุ่ม เมื่อถึงช่วงจังหวะที่ก�ำหนดเสียงประกอบท่วงท�ำนองนั้น จะหยุดเล่นลงทันที แต่หากมีการคลิกท่ีปุ่มโปรแกรมก็จะปรากฏเล่นไฟล์เสียงที่ได้สร้างไว้บนปุ่ม พร้อม ทัง้ ท�ำการเชื่อมต่อเขา้ สู่ Scene 2 ให้โดยอตั โนมัติ 1. คลิกเมนู Control > Test Movie จากน้ันโปรแกรมจะท�ำการเล่นแสดงผลงานแอนิเมชัน พร้อมท้ังเล่นไฟล์เสียงประกอบท่วงท�ำนองขึ้นมา ซ่ึงหากไม่ได้คลิกท่ีปุ่มเมื่อถึงจุดที่ก�ำหนดไว้เสียงนั้นจะ หยุดเลน่ ลงทนั ที 1

การสรา้ งภาพเคล่อื นไหวเบ้ืองต้น Adobe Fla2s65h CS6 การปรบั แตง่ เสยี ง เสียงที่น�ำเข้ามาใช้ในมูฟว่ีสามารถปรับแต่งลักษณะการเล่นได้หลายอย่าง ไม่ว่าจะเป็นการสั่งให้ หยุดเล่นเมื่อถึงจุดที่ต้องการ ส่ังให้เล่นเสียงตามจังหวะของภาพเคล่ือนไหว ใส่เอฟเฟ็กต์ส�ำเร็จรูป หรอื การปรบั ความดงั - เบาของเสยี งตรงต�ำแหนง่ ตา่ ง ๆ เพอ่ื ใหส้ อดคลอ้ งกบั เนอ้ื หาของภาพเคลอ่ื นไหว เป็นต้น ใสเ่ อฟเฟ็กต์และกำ� หนดวธิ ีการเล่น การปรับแต่งเหล่าน้ีจะท�ำกับเสียงเฉพาะที่น�ำมาใช้ในเฟรม ดังนั้น ไฟล์เสียงเดียวกันเม่ือน�ำมา ใช้แต่ละคร้งั หรือแต่ละจุด อาจปรบั แตง่ ให้มคี ณุ สมบตั ทิ ่แี ตกตา่ งกันออกไปได้ตามต้องการ ซ่งึ มขี น้ั ตอน ดงั น้ี 1. คลกิ คยี เ์ ฟรมเสยี ง 2. ที่ Property ช่อง Effect เลอื กเอฟเฟก็ ต์เสียง 3. ท่ี Property ช่อง Sync ใหก้ �ำหนดวิธกี ารเลน่ เสียง เอฟเฟก็ ตข์ องเสยี ง 2 3 1

Adobe26F6lash CS6 บทท่ี 9 การเพิ่มเสยี งประกอบให้กับช้ินงานเพ่อื ความเพลิดเพลิน เปน็ เอฟเฟ็กต์ทใี่ ชเ้ ลน่ ดว้ ยการควบคมุ ล�ำโพงซา้ ย - ขวาและความดงั - เบาของเสยี ง ซ่งึ มใี ห้เลอื ก ดงั น้ี None ไมใ่ ชเ้ อฟเฟก็ ตใ์ ด ๆ เสยี งจะมีลกั ษณะเหมอื นไฟล์ตน้ ฉบับ Left Channel เล่นเสยี งเฉพาะช่องสญั ญาณซ้ายเทา่ น้นั เสยี งจะออกเฉพาะล�ำโพงซา้ ย Right Channel เลน่ เสยี งเฉพาะชอ่ งสญั ญาณขวาเทา่ นนั้ เสียงจะออกเฉพาะล�ำโพงขวา Fade Left to Right ใหเ้ สียงเคลอ่ื นยา้ ยจากช่องสัญญาณซ้ายไปยงั ช่องสัญญาณขวา Fade Right to Left ใหเ้ สยี งเคลอ่ื นย้ายจากช่องสัญญาณขวาไปยงั ช่องสญั ญาณซ้าย Fade In ใหเ้ สยี งเร่มิ จากเบา แล้วค่อย ๆ ดงั ขนึ้ ในขณะทเ่ี ลน่ Fade Out ให้เสยี งเรม่ิ จากดงั แลว้ ค่อย ๆ เบาลงในขณะท่เี ล่น Custom ก�ำหนดเอฟเฟ็กต์ด้วยตนเอง โดยการปรับแต่งสัญญาณเสียงในกรอบ Edit Envelope วธิ กี ารเลน่ เสยี ง Sync (Synchronization) ใชส้ �ำหรบั ก�ำหนดวิธีเลน่ เสียง ควบคุมการเริม่ เล่นและการจบ ซงึ่ มี ดังน้ี Event ใช้กับเสียงท่ีเราต้องการให้เล่นเมื่อเกิดเหตุการณ์อย่างใดอย่างหนึ่งขึ้น วิธีนี้เสียงจะ เริ่มเล่นเม่ือมูฟว่ีถูกเล่นมาถึงคีย์เฟรมของมัน และจะเล่นไปเรื่อย ๆ จนกว่าจะหมดข้อมูลโดยไม่ข้ึน กับไทม์ไลน์แม้ว่ามูฟวี่จะจบไปแล้วก็ตาม หากต้องการให้หยุดเราต้องส่ังหยุดเอง และจะไม่เร่ิมเล่น จนกว่าไฟล์เสยี งท้ังไฟลถ์ ูกดาวน์โหลดมาครบแลว้ Start มีวธิ ีการเริม่ เล่นเหมือนกับ Event เพียงแตถ่ า้ เสยี งก�ำลงั เลน่ อยู่ และเกิดเหตกุ ารณท์ ่ีท�ำให้ ตอ้ งเลน่ เสียงเดมิ ซอ้ นข้นึ มา เช่น เมอื่ มฟู วถ่ี ูกเลน่ วนกลบั มาเฟรมเดมิ มนั จะไม่เล่นซ้อนขึ้นมาอกี แต่จะ เล่นเสียงเดิมต่อไปเรือ่ ย ๆ Stop ใช้ส�ำหรบั สง่ ให้หยุดเล่นเสยี งทก่ี �ำลงั เลน่ อยู่ Stream ใช้ในกรณีของการเล่นเสียงบนเว็บ เป็นการบังคับให้ภาพเคล่ือนไหวถูกแสดงแบบ สอดคล้องกับเสียง ถ้าภาพเคล่ือนไหวตามไม่ทันเสียงก็จะข้ามเฟรมบางเฟรมไป โดยจะหยุดเมื่อมูฟว่ีจบ และจะไมเ่ ล่นเกินกว่าจ�ำนวนเฟรมบนเลเยอร์ท่มี ันอยู่ Report ก�ำหนดให้มกี ารเลน่ เป็นจ�ำนวนรอบตามตัวเลขท่รี ะบุไวใ้ นช่องถดั ไป Loops ก�ำหนดให้วนเล่นเสียงอย่างต่อเนอื่ งไมห่ ยดุ

การสร้างภาพเคลอื่ นไหวเบอื้ งตน้ Adobe Fla2s67h CS6 วธิ บี บี อดั และปรบั คณุ ภาพขอ้ มลู บางคร้ังไฟล์เสียงต้นฉบับท่ีน�ำมาใช้ในมูฟว่ีอาจจะมีคุณสมบัติไม่เหมาะสม เช่น ยังไม่ได้ผ่าน การบบี อดั หรือมีคุณภาพสงู เกินไป ส่ิงเหลา่ นีล้ ้วนเป็นสาเหตุใหไ้ ฟล์เสยี งมีขนาดใหญ่ ไมเ่ หมาะจะน�ำไปใช้ กับเว็บเพจซงึ่ ตอ้ งการขอ้ มูลท่มี ขี นาดเล็ก เพ่ือให้สามารถดาวน์โหลดได้อย่างรวดเรว็ มีหลายวิธีท่สี ามารถ ใช้ปรับขนาดข้อมูลเสียงในมูฟวี่ให้เล็กลงกว่าไฟล์เสียงต้นฉบับ เช่น ก�ำหนดให้มีการบีบอัดข้อมูล (Compression) โดยเลอื กวธิ ีบบี อัดท่ีเหมาะสมกบั เสยี งแตล่ ะประเภท การลดอตั ราสุม่ (Sample Rate) และการเปลี่ยนเสียงชนิด Stereo ให้เป็น Mono เป็นต้น อย่างไรก็ดี การลดขนาดข้อมูลมาก คุณภาพ ของเสยี งก็จะยงิ่ ต�่ำลง ดังนนั้ จงึ ต้องพจิ ารณาเลือกระหว่างคุณภาพเสียงและขนาดไฟล์ แล้วพยายามปรบั ให้ไดจ้ ุดทเ่ี หมาะสมส�ำหรับงานของเรา การปรับคุณภาพข้อมูลเสียงนี้ ท�ำได้โดยการเลือกวิธีบีบอัดพร้อมทั้งก�ำหนดค่าต่าง ๆ ที่ เก่ียวข้อง ผลการปรับจะเกิดกับข้อมูลเสียงในไฟล์มูฟวี่ (swf) โดยไม่ท�ำให้เกิดการเปล่ียนแปลงข้อมูล เสียงทอี่ ยู่ในไลบราร่ีหรือในไฟลต์ น้ ฉบับแตอ่ ย่างใด ซึง่ แต่ละเสยี งเราสามารถปรบั ด้วยวธิ ที ่แี ตกต่างกันได้ ตามความเหมาะสม โดยมขี น้ั ตอนดงั นี้ 1. คลกิ เลือกไฟล์เสยี งในไลบราร่ี 2. คลิกปุ่ม Properties… 1 2

Adobe26F8lash CS6 บทที่ 9 การเพิม่ เสยี งประกอบใหก้ ับชิ้นงานเพ่อื ความเพลดิ เพลนิ 3. ทช่ี ่อง Compression เลอื กวิธีการบีบอัด มใี ห้เลอื ก 5 แบบ - Default การก�ำหนดใหใ้ ช้ค่าดฟี อลต์ของมฟู วตี่ ามคา่ การพบั ลิชทกี่ �ำหนดไว้ (Publish Settings) - ADPCM วิธีบบี อดั ท่ีใช้กับข้อมูลเสียงแบบ 8 - bit หรอื 16 - bit วธิ ีนีเ้ หมาะจะใช้กบั เสียงสัน้ ๆ ท่นี �ำมาเลน่ ประกอบเหตุการณ์ เชน่ เสียงคลกิ ของปมุ่ - MP3 วิธบี บี อัดทีเ่ หมาะส�ำหรับเสียงทีม่ คี วามยาวมากและเล่นแบบ Stream เช่น เสยี งเพลง - Raw เป็นการก�ำหนดไม่ให้มีการบีบอัดข้อมูล แต่ยังคงสามารถเลือกแปลงเสียงชนิด Stereo ใหเ้ ป็น Mono และปรบั อตั ราสุ่มเพอื่ ใหข้ ้อมลู มีปริมาณลดลงได้ - Speech เปน็ การบีบอัดทด่ี ัดแปลงใหใ้ ช้กบั เสยี งพดู 4. คลกิ ปมุ่ Test เพอ่ื ทดสอบและฟงั เสียงท่ไี ดจ้ ากการบีบอัดทเ่ี ลอื ก 5. คลิกปมุ่ Stop เพอ่ื สั่งให้หยดุ เลน่ เสยี ง 6. คลิก Update เพ่อื ปรบั ปรุงเสยี งตน้ ฉบบั หากปรับแตง่ เสียงตามต้องการเรยี บร้อยใหค้ ลิกที่ ป่มุ OK 6 4 3 5

การสร้างภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla2s69h CS6 แนวทางในการใสเ่ สยี งไปกบั มฟู วข่ี อง Flash นอกเหนอื จากการก�ำหนดวธิ บี บี อดั และปรบั คณุ ภาพขอ้ มลู เสยี งแลว้ หากใชเ้ สยี งอยา่ งเหมาะสม จะเปน็ อีกวิธีหน่ึงทช่ี ว่ ยใหข้ ้อมูลเสียงในไฟล์มูฟวม่ี ีขนาดไม่ใหญ่จนเกนิ ไป โดยปฏิบตั ดิ งั น้ี 1. ก�ำหนด Time In และ Time Out ในไดอะล็อกบ็อกซ์ Edit Envelope เพ่ือตัดเสียงว่าง หรือส่วนทไ่ี มไ่ ด้ใชอ้ อกไป ท�ำใหม้ ูฟวไี่ ม่จ�ำเป็นตอ้ งเก็บข้อมลู สว่ นเกนิ ไว้ 2. ดัดแปลงไฟล์เสียงเดิมให้แตกต่างไปโดยใช้เทคนิคต่าง ๆ เช่น การใส่เอฟเฟ็กต์ การเล่นวน (Loop) การปรับความดังเสยี ง การก�ำหนดจดุ ทีจ่ ะเร่มิ ใช้และเลิกใช้เสยี งด้วย Time In และ Time Out เป็นตน้ ท�ำใหไ้ ดเ้ สยี งหลายแบบจากไฟลเ์ สียงเดยี วกนั 3. ใช้การเล่นวน (Loop) ส�ำหรับเสียงท่ีต้องการให้เล่นอย่างต่อเนื่อง เช่น เสียงดนตรี เล่นคลอไปกบั มูฟว่ี เสยี งดนตรสี ่วนใหญจ่ ะมีท�ำนองแต่ละทอ่ นซำ้� กัน ดังนัน้ แทนท่จี ะน�ำไฟลเ์ สยี งทั้งไฟล์ มาใช้ เราก็เลือกมาเพยี งทอ่ นเดียวแลว้ สงั่ ให้โปรแกรมเล่นวนแทน 4. การเล่นเสียงแบบ Stream น้ันอย่าให้เล่นวน เพราะจะท�ำให้เกิดเฟรมเพิ่มเติมขึ้นในมูฟวี่ ตามความยาวของเสียงทเ่ี ลน่ วน 5. การใช้เสียงประกอบกับภาพเคล่ือนไหว ควรก�ำหนดวิธีการเล่นเป็นแบบ Stream เพ่ือให้ ภาพเคล่อื นไหวนัน้ เลน่ สอดคลอ้ งกนั กับเสียงเสมอ 6. การเอ็กซ์พอร์ตไปเปน็ ไฟล์ QuickTime Movie (mov) นน้ั จ�ำนวนของชอ่ งสญั ญาณและ จ�ำนวนของไฟล์เสียงที่เล่นจะไม่มีผลต่อขนาดของไฟล์ .mov เน่ืองจากโปรแกรมจะท�ำการรวมเสียง ทง้ั หมดนั้นเข้าเปน็ เสยี งเดียวกัน สรปุ ทา้ ยบท การใช้งานเสียงในโปรแกรม Flash เราสามารถท�ำให้เสียงเล่นไปอย่างต่อเน่ืองโดยแต่ละเสียง จะเปน็ อสิ ระต่อกนั ไฟล์เสียงทส่ี ามารถอมิ พอร์ตมาใชใ้ น Flash คือ ไฟลป์ ระเภท WAV, AIFF (.aif) และ MP3 นอกจากน้ี หากเครอ่ื งตดิ ตงั้ โปรแกรม Quick Time 4 ขึน้ ไป ก็จะสามารถใช้ไฟล์เสยี งประเภทอืน่ ได้อีกหลายชนดิ คอื AU, Quick Time, System 7 และ Sound Designer II และในโปรแกรม Flash ก็สามารถปรับแต่งหรือใส่เอฟเฟ็กต์ของเสียง เพื่อความน่าสนใจของงานแอนิเมชันน้ัน ๆ ได้ และยัง สามารถบบี อัดและปรับปรงุ คณุ ภาพของเสียงไดอ้ ีกด้วย

Adobe27F0lash CS6 บทที่ 9 การเพิม่ เสยี งประกอบให้กับช้ินงานเพ่อื ความเพลิดเพลนิ แบบทดสอบและกจิ กรรมการฝกึ ทักษะ บทที่ 9 การเพม่ิ เสียงประกอบให้กบั ชิน้ งาน เพื่อความเพลิดเพลิน ตอนที่ 1 : อธิบาย (หมายถึง การใหร้ ายละเอยี ดเพิ่มเติม ขยายความ ถา้ มตี ัวอย่างใหย้ กตัวอย่าง ประกอบ) 1. เสียงประกอบในมฟู วขี่ อง  Flash  แบ่งออกเปน็ 2 ประเภท อะไรบ้าง และแตล่ ะประเภท มีลักษณะ อยา่ งไร 2. ไฟลเ์ สยี งท่ีสามารถอมิ พอรต์ มาใช้ใน Flash คือไฟลป์ ระเภทใดบ้าง 3. คุณสมบตั ขิ องไฟล์เสยี งท่ีควรใชค้ อื แบบใด 4. ชนดิ ของเสียงมีกแ่ี บบ อะไรบา้ ง 5. อธิบายข้นั ตอนการน�ำ ไฟล์เสยี งเขา้ เปน็ ขอ้ ๆ 6. การใส่เสียงประกอบการแสดงบางช่วงมีขั้นตอนอย่างไร จงอธิบาย 7. ทดสอบฟงั เสยี งประกอบตลอดการแสดงมีวธิ กี ารอยา่ งไร 8. เอฟเฟ็กต์ของเสียงแบบ Fade In คืออะไร 9. เอฟเฟก็ ต์ของเสียงแบบ Fade Out คืออะไร 10. วธิ กี ารเล่นเสียงแบบ Event มลี ักษณะอยา่ งไร ตอนท่ี 2 : จงเลอื กคำ�ตอบท่ีถูกตอ้ งทีส่ ดุ เพียงขอ้ เดยี ว 1. เสียงประเภทใดท่ีตอ้ งดาวน์โหลดมาครบสมบูรณ์ก่อนจึงจะเรมิ่ เล่นได้ และเมื่อเลน่ แล้วกจ็ ะเล่นอย่าง ต่อเนือ่ งไปจนกวา่ เราจะสั่งให้หยุด ก. Stereo ข. Mono ค. Stream Sound ง. Event Sound 2. ไฟลเ์ สียงใดท่ไี ม่สามารถอิมพอร์ตมาใชใ้ น Flash ได้ ก. MP3 ข. ACC ค. AIFF ง. WAV 3. คุณสมบัตขิ องไฟล์เสยี งทีค่ วรใช้ใน Flash คือข้อใด ก. Mono ขนาด 16 - bit 22 kHz ข. Mono ขนาด 8 - bit 22 kHz ค. Mono ขนาด 16 - bit 44 kHz ง. Mono ขนาด 8 - bit 44 kHz 4. การทดสอบฟงั เสียงประกอบสามารถใช้คีย์ลดั ในข้อใดได้ ก. Ctrl + T ข. Alt + T ค. Ctrl + L ง. Alt + L

การสร้างภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla2s71h CS6 5. คำ�สง่ั Stop All Sounds มีหนา้ ทอ่ี ย่างไร ก. เพือ่ เป็นการกำ�หนดจุดหยดุ ในการเล่นไฟล์เสยี งประกอบ ข. เพอ่ื กำ�หนดจุดหยดุ ในการแสดงภาพ ค. เพอ่ื ควบคมุ การเลน่ ไฟลเ์ สยี ง ง. เพ่อื ควบคมุ การหยุดไฟล์เสยี งชัว่ คราว 6. ตอ้ งใชเ้ อฟเฟ็กต์เสยี งในข้อใดเพ่ือใหเ้ สียงเร่ิมจากเบา แลว้ คอ่ ย ๆ ดังขึน้ ในขณะที่เลน่ ก. Fade Right to Left ข. Fade Left to Right ค. Fade Out ง. Fade In 7. ถ้าตอ้ งการใหเ้ สยี งเร่ิมจากดงั แลว้ คอ่ ย ๆ เบาลงในขณะที่เลน่ ต้องใช้เอฟเฟก็ ตเ์ สียงแบบใด ก. Fade Right to Left ข. Fade Left to Right ค. Fade Out ง. Fade In 8. ถา้ ตอ้ งการให้เสยี งมลี ักษณะเหมอื นไฟล์ตน้ ฉบบั ต้องเลือกใชเ้ อฟเฟ็กตใ์ ด ก. Custom ข. None ค. Fade In ง. Fade Out 9. วิธีการเล่นเสยี งแบบใดใชก้ บั เสียงทเ่ี ราต้องการใหเ้ ลน่ เมื่อเกิดเหตุการณอ์ ยา่ งใดอย่างหนึง่ ขึ้น จะเล่น ไปเรื่อย ๆ หากตอ้ งการใหห้ ยุดเราต้องสงั่ หยุดเอง ก. Stream ข. Stop ค. Event ง. Start 10. หากต้องการใหไ้ ฟล์เสียงเลน่ วนอย่างตอ่ เนื่องไมห่ ยดุ ควรเลอื กวธิ กี ารเล่นเสียงในข้อใด ก. Stream ข. Event ค. Loops ง. Start ตอนที่ 3 : อธบิ ายคำ�ศพั ท์ (หมายถงึ การให้รายละเอียดเพ่ิมเตมิ ขยายความ ถ้ามตี ัวอยา่ งให้ยก ตัวอย่างประกอบ) 1. Event Sound 6. Fade In 2. Stream Sound 7. Fade Out 3. Stop All Sounds 8. Report 4. Custom 9. Loops 5. Sync 10. Compression

Adobe27F2lash CS6 บทที่ 9 การเพ่ิมเสียงประกอบใหก้ ับชิน้ งานเพ่ือความเพลิดเพลิน ใบงานที่ 9.1 ใหน้ กั ศกึ ษาเปดิ ไฟล์งานทท่ี �ำ ในใบงานที่ 1 ของบทท่ี 8 ข้ึนมา เพื่อทำ�การใสเ่ สยี งประกอบลงใน ผลงาน โดยท�ำ ตามขั้นตอนดงั นี้ 1. เปดิ ไฟลง์ านที่สร้างในใบงานที่ 1 ของบทเรียนที่ 8 ขึ้นมา 1 2. เลือกเมนู File > Import > Import to Library เลือกไฟล์เสียงทีต่ อ้ งการ 2

การสร้างภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla2s73h CS6 3. สรา้ งเลเยอร์ใหม่ ตงั้ ชอื่ วา่ Sound 3 4. ลากไฟล์เสยี งทต่ี อ้ งการลงมาที่ Stage ขณะทีเ่ ลอื กเลเยอร์ Sound อยู่ 4 5. ลองทดสอบฟังเสยี งโดยกดปุ่ม Ctrl + Enter จะเห็นว่าเสียงทเ่ี ลน่ เหมอื นมีการทับซ้อนกนั 6. ทแ่ี ทบ็ Properties ใหต้ งั้ คา่ ตามตวั อยา่ งดังน้ี 6 7. แลว้ ทดสอบฟงั เสียงอีกครัง้ 8. บันทกึ ไฟลง์ านใหม่เป็นชอื่ Lesson 9 Sound.fla

Adobe27F4lash CS6 บทท่ี 9 การเพม่ิ เสยี งประกอบให้กบั ช้ินงานเพอ่ื ความเพลดิ เพลนิ ใบงานที่ 9.2 ให้นักศึกษาทดลองใส่เสียงลงในผลงาน และทำ�ให้เสียงหยุดเล่นเมื่อ Animation เล่นจบ โดย สามารถท�ำ ตามขั้นตอนได้ดงั นี้ 1. เปดิ ไฟล์งานช่อื Lesson 9 Practice.fla ทก่ี ำ�หนดให้ 2. คลกิ เฟรมสดุ ทา้ ยของ Timeline ทเ่ี ลเยอร์ Guide : Text กดปมุ่ F9 เพอ่ื เปดิ หนา้ ตา่ ง Action 2 3. ใส่โค้ด stop(); เพือ่ กำ�หนดให้ Animation หยุดเล่น 3 4. สร้างเลเยอรใ์ หม่ ต้ังชอื่ ว่า Sound 4

การสร้างภาพเคลอ่ื นไหวเบื้องตน้ Adobe Fla2s75h CS6 5. นำ�ไฟล์เสียงเข้าสู่โปรแกรม คลิกท่ีเมนู File > Import > Import to Library 5 6. ลากไฟลเ์ สยี งลง Stage จะเห็นเลเยอร์แสดงรูปไฟลเ์ สยี ง ดังภาพ 6 7. คลิกเฟรมสดุ ท้ายของเลเยอร์ Sound กดปุ่ม F6 8 8. แท็บ Properties ต้งั ค่าตัวเลือก Sound ดงั น้ี ชอ่ ง Name เลือกไฟลเ์ สยี งท่ี Import เขา้ มาใชใ้ น ผลงาน ชอ่ ง Sync เลือก Stop เพอื่ หยดุ เล่นไฟลเ์ สยี ง

Adobe27F6lash CS6 บทที่ 9 การเพิม่ เสยี งประกอบใหก้ บั ช้นิ งานเพื่อความเพลดิ เพลนิ 9. ทดสอบผลงาน กดปุ่ม Ctrl + Enter จะได้ผลลพั ธ์ตามตอ้ งการ ผลลัพธท์ ไ่ี ด้ จะมเี สยี งประกอบเลน่ ไปจน Animation หยุด เสียงกจ็ ะหยดุ เลน่ ด้วยเชน่ กนั

Adobe Flash CS6 บทท่ี การนำ� เสนอผลงาน 10 ใหแ้ พรห่ ลาย จดุ ประสงค์เชงิ พฤตกิ รรม (Behavioral Objectives) หลังจากศกึ ษาจบบทเรยี นนีแ้ ลว้ นกั ศึกษาจะมคี วามสามารถดงั นี้ 1. ระบุชือ่ ไฟลจ์ ากการสรา้ งในฟอร์แมตได้ 2. บอกกระบวนการพบั ลิชเอกสาร Flash ได้ 3. ปฏิบตั ิการตงั้ คา่ ใน Publish Setting ได้ 4. ระบรุ ายละเอยี ดการสร้างไฟล์ swf ได้ 5. บอกออปชัน่ ในการสร้างไฟล์ HTML ได้ 6. ปฏิบัติการในการสร้างเอ็กซ์พอรต์ ไฟลส์ ำ�หรบั นำ�ไปใชใ้ นสื่ออน่ื ๆ ได้

บทท่ี 10Adobe27F8lash CS6 บทท่ี 10 การนำ�เสนอผลงานใหแ้ พร่หลาย การน�ำ เสนอผลงาน ใหแ้ พรห่ ลาย เม่ือได้ทำ�การสร้างผลงานแอนิเมชันขึ้นมาเป็นท่ีเรียบร้อยแล้ว จากน้ันก็จะเป็นขั้นตอน ในการนำ�เสนอส่งออกผลงานให้อยู่ในรูปแบบต่างๆ ในการนำ�มูฟวี่ไปเล่นบนเว็บเพจ เราควรจะกำ�หนด ค่าต่าง ๆ เพ่ือปรับคุณสมบัติและขนาดของไฟล์ให้เหมาะสมกับการนำ�ไปใช้ โดยไฟล์เอกสาร (fla) ที่สร้างขึ้นจะถูกนำ�ไปใช้ในรูปไฟล์มูฟว่ี (swf) ซึ่งขั้นตอนการแปลงไฟล์น้ีเรียกว่า การ “พับลิช” (Publish) นอกจากนี้ เรายังสามารถเอ็กซ์พอร์ต (Export) มูฟว่ีออกไปในรูปแบบของไฟล์ภาพ GIF, JPEG รวมทงั้ ไฟลว์ ิดีโอ QuickTime, AVI และอน่ื ๆ การพบั ลชิ เอกสาร Flash กระบวนการพบั ลิชเอกสาร 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 5. ไฟล์วดิ ีโอแบบ QuickTime ต้ังค่า Publish Settings โปรแกรม Flash มีคำ�สั่ง Publish สำ�หรับสร้างไฟล์มูฟวี่ (swf) และเว็บเพจ (htm) เพื่อนำ�ไป เผยแพรบ่ นอนิ เทอรเ์ น็ตไดท้ นั ที แต่ก่อนอื่นเราจะต้องก�ำ หนดออปชน่ั และต้ังคา่ ต่าง ๆ ซึง่ จะมผี ลต่อการ

การสร้างภาพเคลอื่ นไหวเบอ้ื งตน้ Adobe Fla2s79h CS6 สร้างไฟล์ดังกล่าว โดยใช้คำ�ส่ัง Publish Settings นอกจากน้ียังสามารถกำ�หนดให้ Flash สร้างไฟล์ใน รูปแบบอ่ืนออกมาพร้อมกันได้ด้วย เช่น GIF, JPEG, QuickTime เป็นต้น การตั้งค่าใน Publish Settings ให้ทำ�ดังนี้ 1. เลอื กคำ�สั่ง File > Publish Setting หรือคลิกปุม่ Edit บนพาเนล Properties ให้คลิกแท็บ Formats แล้วเลอื กประเภทไฟล์ ทีต่ อ้ งการ 1 2. กำ�หนดออปช่นั ตา่ ง ๆ ในแตล่ ะแทบ็ 3. คลิกปุ่ม OK เพ่ือจบการต้ังค่า หรือคลิกปุ่ม Publish เพอื่ พับลิชไฟลน์ นั้ ทันที เลือก swf ใช้เพื่อกำ�หนดเง่ือนไขในการสร้างไฟล์ .swf ซึ่งเป็นไฟล์ที่จะถูกนำ�ไปแสดงจริงบน เว็บเพจ ในแท็บน้ีประกอบด้วยออปชั่นต่าง ๆ 2 โดยกดเพม่ิ ท่ี ADENCED คือ 3

Adobe28F0lash CS6 บทท่ี 10 การนำ�เสนอผลงานให้แพรห่ ลาย ออปช่ัน รายละเอียด Player เวอร์ชัน่ ของ Flash Player ที่จะใช้เลน่ มูฟว่ีนี้ โดยก�ำหนดใหส้ อดคล้องกบั กลุ่มผชู้ มและคณุ สมบัติของมฟู วท่ี ต่ี อ้ งการใช้ เพราะถา้ เลือกเวอร์ช่นั เก่า Script กจ็ ะท�ำให้ไมส่ ามารถใช้คุณสมบตั ิของเวอรช์ น่ั ใหมใ่ นมูฟวี่ แต่ถา้ เลือก JPEG Quality เวอร์ชั่นใหมผ่ ชู้ มท่ยี ังคงใช้ Flash Player รุ่นเกา่ อยู่ก็อาจจะชมมูฟว่ไี มไ่ ด้ เลอื กเวอร์ช่นั ของ Action Script ทจี่ ะใช้ในมฟู วี่ ซึ่งจะขน้ึ อยูก่ บั เวอร์ชั่น Audio Stream Flash Player Audio Event ก�ำหนดระดบั การบบี อัดข้อมลู ส�ำหรับรปู ภาพบิตแมปที่น�ำมาใช้ในมฟู ว่ี ยง่ิ Override Sound ใช้คา่ นอ้ ยการบีบอัดข้อมลู จะสูง ซงึ่ ท�ำใหข้ นาดไฟล์เลก็ ลง แต่คุณภาพของ Setting ภาพก็ตำ�่ ลงดว้ ย Export Device ก�ำหนดวิธีบบี อัดและปรับคณุ ภาพข้อมลู เสยี งชนิด Stream Sound หาก Sounds ต้องการเปลย่ี นแปลงใหค้ ลกิ ทป่ี ุม่ Set แลว้ ก�ำหนดค่าใหม่ Compress Movie ก�ำหนดวิธบี ีบอดั และปรบั คณุ ภาพข้อมูลเสยี งชนิด Event Sound เลือกเพอ่ื ยกเลกิ ค่าการบบี อดั ไฟล์เสียงท้งั ชนดิ Stream และ Event ของ Include Hidden ไฟล์เสยี งแต่ละไฟล์ และใช้ค่าทีก่ �ำหนดในหัวข้อ Audio Stream และ Layers Audio Event แทน Export SWC เลือกเพอ่ื เอ็กซ์พอรต์ ไฟล์เสยี งแบบ Device Sound แทนไฟลท์ เี่ รยี กใช้ Generate Size มฟู ว่ี เมอ่ื สร้างไฟล์มูฟว่ีส�ำหรบั อุปกรณ์มือถอื ออปช่นั นจ้ี ะถกู เลือกโดย Report อัตโนมัติ ใหม้ กี ารบบี อดั ขอ้ มลู ในไฟล์มฟู ว่ีเพ่อื ลดขนาดไฟล์และลดเวลาในการ ดาวน์โหลด ซ่งึ จะมปี ระโยชนส์ �ำ หรบั ไฟลท์ ม่ี ีตวั อกั ษรหรือโค้ด ActionScript มาก ๆ ในกรณที ่ีมีการซ่อนเลเยอร์ไว้ ให้เอ็กซพ์ อร์ตเลเยอรท์ ี่ถกู ซ่อนอยู่ดว้ ย ในกรณที ่มี กี ารใชค้ อมโพเนนต์ สามารถเลอื กเอก็ ซ์พอร์ตไฟล์คอมโพเนนตด์ ว้ ย เลอื กเพอื่ สร้างไฟลข์ อ้ ความ (txt) ในช่อื เดียวกบั ไฟล์มูฟวี่ (swf) โดยไฟล์นี้ จะใหร้ ายละเอียดเก่ยี วกบั ขนาดของแตล่ ะสว่ นประกอบของมฟู วี่ในหน่วย เป็นไบต์ (byte) เพอ่ื ใชใ้ นการวเิ คราะหส์ �ำหรับชว่ ยปรบั ลดขนาดมูฟวภี่ ายหลงั

การสร้างภาพเคลือ่ นไหวเบอื้ งตน้ Adobe Fla2s81h CS6 ออปชนั่ รายละเอยี ด Protect from Import เลอื กเพอื่ ปอ้ งกนั ไมใ่ หบ้ คุ คลอน่ื สามารถดาวนโ์ หลดไฟลน์ ้ี น�ำไปอมิ พอรต์ เขา้ โปรแกรม Flash กลับเปน็ ไฟล์ .fla แล้วท�ำการแก้ไข (ใชเ้ พอ่ื ป้องกันผลงาน ไม่ใหถ้ ูกน�ำไปใช้ต่อนั่นเอง) Omit Trace Actions เลือกเพ่อื บงั คบั Flash ไม่ให้สนใจค�ำสั่ง Trace ท่อี ย่ใู นมฟู ว่ี Permit Debuging เปดิ ใหโ้ ปรแกรมส�ำหรบั ชว่ ยตรวจหาและแกไ้ ขความผดิ พลาดของค�ำสง่ั Action Script ท�ำงาน และยอมใหม้ กี ารเรียกใช้จากระยะไกลได้เมือ่ เลือกออปชั่นน้ี หากต้องการป้องกันไมใ่ ห้คนอ่นื เรยี กใช้ Debugger ได้ กใ็ ห้ก�ำหนดรหสั ผ่าน ลงในชอ่ ง Password ด้านล่าง Local Playback วิธจี �ำกัดการเรยี กใชไ้ ฟล์ภายนอกของมฟู วนี่ ้ี โดย Acess local files only จะท�ำใหม้ ูฟวเี่ รียกใช้ได้เฉพาะไฟล์ในเครอ่ื งของผู้ชม ส่วน Access network only จะท�ำให้มูฟวเี่ รียกใช้และรับสง่ ข้อมลู ได้เฉพาะกับไฟล์บนอินเทอรเ์ นต็ Script Time Limit ก�ำหนดเวลาทย่ี อมให้โปรแกรม Action Script ท�ำงานตอ่ เนอ่ื ง หน่วยเปน็ วินาที Password หากเลือก Debugging Permitted และ/หรอื Protect from Import จะ สามารถก�ำหนดรหสั ผา่ นได้โดยการปอ้ นลงไปในช่องน้ี เลอื ก HTML ในการแสดงมูฟว่บี นเวบ็ เพจจะตอ้ งสร้างโคด้ ภาษา HTML เพ่ือสง่ั ใหบ้ ราวเซอรไ์ ปดงึ ไฟลม์ ูฟว่ี มาแสดง พร้อมทงั้ ก�ำหนดรายละเอยี ดท่เี ก่ียวข้องไว้ดว้ ย เช่น ขนาดของมฟู วท่ี จี่ ะปรากฏบนเวบ็ เพจ และ จ�ำนวนครัง้ ทเ่ี ล่นวน เป็นตน้ แตส่ �ำหรบั ผ้ทู ่ีไมค่ ุ้นเคยกับภาษา HTML กส็ ามารถสั่งให้ Flash ช่วยสรา้ ง โคด้ ดงั กลา่ วโดยอตั โนมตั ิ ดว้ ยการก�ำหนดออปชนั่ ทตี่ อ้ งการ หลงั จากนนั้ เมอ่ื ไดไ้ ฟล์ HTML เรากส็ ามารถ น�ำไปแกไ้ ขเพ่มิ เตมิ ขอ้ มลู อ่นื หรือจะกอ๊ ปปีโ้ คด้ ภายในไฟลด์ ังกล่าวไปใช้กบั เวบ็ เพจท่เี รามีอย่แู ลว้ กไ็ ด้

Adobe28F2lash CS6 บทท่ี 10 การนำ�เสนอผลงานใหแ้ พร่หลาย ออปชัน่ ในการสร้างไฟล์ HTML มีดังนี้

การสรา้ งภาพเคลือ่ นไหวเบ้ืองต้น Adobe Fla2s83h CS6 ออปช่ัน รายละเอยี ด Template เป็นการเลอื กเทมเพลตที่จะใช้ ซงึ่ จะมีผลต่อคณุ สมบัติของไฟล์ HTML ที่ สรา้ ง เราสามารถดคู วามหมายของเทมเพลตแต่ละแบบได้ โดยการเลอื ก เทมเพลตนนั้ แลว้ คลกิ ปมุ่ Info... จะไดไ้ ดอะลอ็ กบอ็ กซ์ HTML Template Info ดังรปู ส�ำหรับบางเทมเพลตท่ีต้องมกี ารสร้างไฟล์อืน่ เพิม่ เติม โปรแกรมจะแสดง ไวใ้ นไดอะลอ็ กบอ็ กซ์นี้ Flash Only เป็นเทมเพลตดีฟอลต์ ซึง่ จะใหผ้ ลเปน็ ไฟล์ HTML ที่ใชแ้ ท็ก <OBJECT> และ <EMBED> รว่ มกนั ในการแสดงมูฟวี่ โดยแทก็ <OBJECT> จะใช้ส�ำหรับเลน่ มฟู วีใ่ น Internet Explorer และแทก็ EMBED ใชส้ �ำหรับเล่นมูฟว่ใี น Netscape และ FireFox ดงั นั้น โค้ด HTML ทีไ่ ด้จากเทมเพลตนีจ้ ึงสามารถท�ำงานทัง้ ใน IE และ FireFox Detect Flash Version เมอื่ เลอื กออปชนั่ น้จี ะไดไ้ ฟล์ HTML ที่มโี คด้ JavaScript และ VBScript ส�ำหรบั ตรวจสอบว่าบราวเซอร์มปี ลั๊กอนิ Flash Player (ตามเวอรช์ นั่ ท่ี ก�ำหนดดา้ นลา่ ง) ติดต้งั อยูห่ รือไม่ ถา้ ไม่มีบราวเซอร์จะแสดงลงิ ค์เพ่อื ให้ ผู้ชมไปดาวน์โหลดปล๊ักอินเวอร์ช่นั ลา่ สุด Dimensions ขนาดความกวา้ ง (Width) และความสงู (Height) ของมฟู ว่ที ป่ี รากฏบน บราวเซอร์ - Match Movie ใช้ขนาดตามทกี่ �ำหนดไวใ้ นการสรา้ งมูฟวี่ - Pixels ก�ำหนดขนาดด้วยตัวเอง โดยมีหนว่ ยเป็นพิกเซล - Percent ก�ำหนดขนาดเปน็ เปอรเ์ ซน็ ต์ โดยเทียบกบั ความกวา้ งและ ความสงู ของวินโดวสบ์ ราวเซอร์ทใ่ี ช้ดมู ฟู ว่ี

Adobe28F4lash CS6 บทที่ 10 การนำ�เสนอผลงานใหแ้ พร่หลาย ออปช่นั รายละเอยี ด Playback ก�ำหนดวิธีการเล่นมฟู วี่ - Paused at Start ก�ำหนดไม่ให้มูฟว่ีเร่มิ เลน่ ทนั ทีโดยอัตโนมตั ิ แตจ่ ะ Quality เล่นเมื่อผู้ชมคลกิ ป่มุ ในมฟู ว่ี (ซึ่งเราต้องสร้างไว)้ หรือโดยการคลิกขวาบน มูฟว่ี แล้วเลือกค�ำสง่ั Play จากเมนูลดั - Loop  ก�ำหนดให้มูฟว่ีถูกเล่นวนอย่างต่อเน่ือง  ถ้าไม่เลือกข้อน้ีมูฟว่ี จะเลน่ เพยี งคร้ังเดยี วแลว้ หยุด - Display Menu ใหแ้ สดงเมนเู มอ่ื ผู้ชมคลกิ ขวาบนมูฟว่ี เมนปู ระกอบด้วย ค�ำส่ังต่าง ๆ  เช่น  การย่อ/ขยายมุมมองของมูฟวี่  และการสั่งให้เล่นหรือ หยุดเลน่ - DeviceFont ใหใ้ ชฟ้ อนตต์ วั อกั ษรบนเครอ่ื งปลายทาง (System Font) แทนฟอนต์ที่ใช้ในมูฟว่ี  ในกรณีท่ีคอมพิวเตอร์ของผู้ชมไม่มีฟอนต์น้ัน ติดตั้งอยู่ ก�ำหนดคณุ ภาพของมฟู ว่ที ี่จะปรากฏในขณะเล่น เนอื่ งจาก Flash Player สามารถแสดงภาพในลักษณะที่หยาบหรือประณีตก็ได้  แต่การแสดงภาพ ท่ีประณีตจะต้องใช้คอมพิวเตอร์ซึ่งมีคุณสมบัติสูงจึงจะท�ำได้  มิฉะน้ัน ความเร็วในการเลน่ อาจจะตกและภาพจะกระตุก - Low ใหค้ วามส�ำคญั กบั ความเรว็ ในการเลน่ มากกว่าคณุ ภาพของภาพ ทีป่ รากฏ ดังน้ัน ขอบของออบเจก็ ต์จะดูหยัก - Auto Low เน้นทค่ี วามเร็วเป็นอยา่ งแรก แต่กจ็ ะปรับปรงุ คุณภาพของ ภาพเป็นประการต่อไป  หากเคร่ืองคอมพิวเตอร์ของผู้ชมมีความสามารถ ในการท�ำงานสูงพอ - Auto  High  เน้นที่ความเร็วและคุณภาพของภาพพอ ๆ  กันในตอน เร่ิมต้น  แต่ถ้าคอมพิวเตอร์ของผู้ชมมีความสามารถต�่ำ  โปรแกรมก็จะลด คณุ ภาพของภาพลง - Medium แสดงรปู เวคเตอร์ดว้ ยคุณภาพสงู แต่แสดงรูปบติ แมปด้วย คุณภาพต่ำ� คือ ไม่มีการปรบั ภาพใหน้ ุ่มนวล (เป็นออปชั่นทใ่ี ห้ผลลัพธอ์ ยู่ ระหว่าง Low กับ High)

การสร้างภาพเคล่อื นไหวเบอื้ งต้น Adobe Fla2s85h CS6 ออปช่ัน รายละเอียด Quality - High  เน้นที่คุณภาพของภาพมากกว่าความเร็ว  แม้ว่าคอมพิวเตอร์ ของผู้ชมจะมีความสามารถต�่ำ  โดยออปชั่นนี้จะแสดงรูปเวคเตอร์ด้วย Window Mode คณุ ภาพสูงเสมอ ส่วนรปู บติ แมปนั้นถ้าอยใู่ นมฟู วท่ี ีเ่ ป็นภาพเคลือ่ นไหว จะไมถ่ ูกปรบั ให้นมุ่ นวล HTML Alignment - Best เน้นท่คี ุณภาพของภาพเสมอทง้ั รูปประเภทเวคเตอร์และบติ แมป Scale ท้งั ภาพเคล่อื นไหวและภาพนิ่งโดยไมส่ นใจความเร็ว ก�ำหนดลักษณะพิเศษในการแสดงผลมฟู ว่บี นเวบ็ เพจ - Window  ให้พ้ืนหลังของมูฟวี่เป็นสีทึบและแสดงอยู่ภายในขอบเขตท่ี แยกตา่ งหากจากองค์ประกอบอ่ืนของเวบ็ เพจ - Opaque Windowless ใหพ้ น้ื หลังของบริเวณที่ใชแ้ สดงมูฟวี่โปรง่ ใส ซง่ึ จะท�ำให้มองเห็นสิ่งทีอ่ ยูด่ า้ นหลัง (ท่ไี ม่ถกู บงั โดยออบเจ็กตใ์ นมูฟวี่) ได้ เลือกวิธีการจัดวางมูฟว่ีบนเว็บเพจว่าจะให้อยู่ชิดด้านใด  เมื่อเทียบกับ วินโดวส์ของบราวเซอร์  หรือช่องตารางที่เราแทรกมูฟว่ีไว้  (การท�ำงาน ขนึ้ อยู่กบั บราวเซอร)์ ก�ำหนดวธิ ีการแสดงเนื้อหามูฟว่ี  (ในกรณที ี่เราเลอื กออปชนั่   Dimension เป็นแบบ Pixels หรือแบบ Percent) ซ่ึงมีใหเ้ ลอื กดังน้ี - Default  (Show  All)  แสดงเนื้อหาทั้งหมดของมูฟวี่ภายในขนาดที่ ก�ำหนดไว้  โดยคงสัดส่วนภาพไว้ไม่เปล่ียนแปลง  ดังนั้น  จึงอาจจะท�ำให้ เกิดขอบขน้ึ มา 2 ด้าน - No Border ยอ่ มูฟวลี่ งมาแสดงให้เตม็ ภายในขนาดท่กี �ำหนด โดยคง สัดสว่ นของภาพไวแ้ ละไมใ่ ห้มขี อบเหลือ ดังนัน้ จงึ อาจจะต้องตดั บางส่วน ของภาพออกไป - Exact  Fit  ย่อมูฟว่ีลงมาแสดงให้เต็มภายในขนาดที่ก�ำหนด  โดยไม่ สนใจสัดส่วนภาพ ดงั น้ัน จึงอาจจะท�ำใหภ้ าพบดิ เบอื นไปจากปกติ - No Scale ปอ้ งกนั มูฟวี่ไมใ่ ห้มีการปรับขนาด ดังนน้ั ส่วนทเี่ กินอาจ ตกขอบหายไป

Adobe28F6lash CS6 บทท่ี 10 การนำ�เสนอผลงานให้แพรห่ ลาย ออปชั่น รายละเอียด Flash Alignment ก�ำหนดต�ำแหน่งการจัดวางมูฟว่ีภายในขอบเขตการแสดงผลของ  Flash เอง  ซ่ึงมีผลในกรณีที่บางส่วนของภาพต้องถูกตัดท้ิงไป  ออปชั่นน้ีจะ Show Warning ก�ำหนดวา่ สว่ นไหนจะถกู ตดั หรอื สว่ นไหนยงั อยทู่ งั้ ในแนวนอน (Horizontal) Messages และแนวตง้ั (Vertical) ให้แสดงข้อความเตือน  เมื่อเกิดความขัดแย้งในออปชั่นต่าง ๆ  ท่ีเราเลือก เช่นในกรณีที่เลือกใชเ้ ทมเพลตแบบ Image Map ทีต่ ้องใช้รูปภาพ JPEG ด้วย แต่เราไม่ได้เลือกออปชั่นให้โปรแกรมสร้างรูป JPEG ให้ (เลือกที่แท็บ Formats)  โปรแกรมกจ็ ะแสดงขอ้ ความเตอื นขน้ึ วา่   ใหม้ กี ารเลอื กออปชน่ั ภาพ JPEG ดว้ ย เลือก SWC Flash Component หรือ ไฟล์ SWC คอื ไฟลท์ ี่เกบ็ คอมโพเนนตท์ ใ่ี ชใ้ นงาน ท�ำให้เราสามารถ เผยแพรค่ อมโพเนนตใ์ ห้ผอู้ นื่ ไปใช้ต่อได้ เลอื ก GIF GIF จะน�ำภาพในเฟรมแรกออกมา ซึ่ง เราสามารถปรับแต่งออปช่ันของไฟล์ได้หลายอย่าง ออปชน่ั ในการสร้างไฟล์ GIF มีดงั น้ี

การสรา้ งภาพเคล่อื นไหวเบือ้ งตน้ Adobe Fla2s87h CS6 ออปชั่น รายละเอียด Size ความกว้างและความสงู ของไฟล์ - Match Movie ขนาดเท่าไฟล์แฟลช Playback - Width/Height ก�ำหนดขนาดเอง ก�ำหนดการเลน่ GIF Optimize Colors - Static ภาพน่งิ เฟรมแรกสดุ Interlace - Animated ภาพเคลอื่ นไหว Smooth - Loop Continuously ใหว้ นซ�้ำเรือ่ ย ๆ Dither Solids - Repeat Times ใหว้ นซำ�้ ตามจ�ำนวนรอบท่ีเราได้ตง้ั ไว้ Remove Gradients ทอนสีให้เหมาะสม Transparent ท�ำให้ภาพดูน่มุ นวล Threshold เปลย่ี นสที ึบให้ดเู หมือนสีเกรเดียนท์ Dither เปล่ียนสเี กรเดยี นท์ใหเ้ ปน็ สีทึบ ก�ำหนดรูปแบบใหก้ ับพ้นื หลงั Palette Type - Opaque ให้พ้ืนหลังเปน็ สที บึ - Transparent ให้พนื้ หลังโปรง่ ใส - Alpha ก�ำหนดความโปร่งใสเอง ก�ำหนดความโปรง่ ใสจาก 0 – 255 ย่งิ คา่ น้อยยงิ่ โปร่งใสมาก ก�ำหนดวธิ ีการหาสใี กล้เคยี ง ปกติภาพ GIF จะมีสสี งู สุด 255 สี แต่ถา้ ไฟล์ มสี ที ใี่ ชน้ อกจากสที ม่ี ีจะใชว้ ิธีหาสีอน่ื มาแทน เรยี กวา่ การ Dither - None ไมใ่ ช้ Dither - Ordered คอื Dither ที่มีคุณภาพดแี ละขนาดไฟล์เลก็ - Diffusion คือ Dither ที่มีคณุ ภาพดีแตข่ นาดไฟลใ์ หญ่ ก�ำหนดชนดิ ของสี - Web 216 เป็นสีมาตรฐาน 216 สี - Adaptive วิเคราะหแ์ ละหาสที ่ีเหมาะสมท่สี ดุ - Web Snap Adaptive วิเคราะหแ์ ละหาสีทีเ่ หมาะทีส่ ุดโดยสีจะใกล้ เคยี งกบั สีใน Web 216 - Custom เลือกสีเอง

Adobe28F8lash CS6 บทที่ 10 การนำ�เสนอผลงานใหแ้ พรห่ ลาย ออปชน่ั รายละเอียด Max Colors ก�ำหนดจ�ำนวนสที ่ใี ชใ้ นภาพ Palette ก�ำหนดสที ี่ใชใ้ นภาพ เลอื ก PNG PNG  จะน�ำภาพในเฟรมแรกออกมา  ซ่ึงเราสามารถปรับแต่งออปช่ันของไฟล์ได้หลายอย่าง ออปชน่ั ในการสร้างไฟล์ PNG มีดงั นี้

การสรา้ งภาพเคลื่อนไหวเบ้ืองต้น Adobe Fla2s89h CS6 ออปช่นั รายละเอยี ด Size ความกวา้ งและความสงู ของไฟล์ - Match Movie ขนาดเทา่ ไฟล์แฟลช - Width/Height ก�ำหนดขนาดเอง Bit Depth ก�ำหนดความละเอยี ดของสี - 8 bit มีค่า 256 สี - 24 bit มคี า่ 16 สี - 24 bit with Alpha มีค่า 16 ลา้ นสี Optimize Colors Inter- ทอนสใี หเ้ หมาะสม lace Smooth ท�ำใหภ้ าพดนู ุ่มนวล Dither Solids เปลีย่ นสีทบึ ใหด้ เู หมอื นสเี กรเดียนท์ Remove Gradients เปล่ียนสีเกรเดยี นทใ์ หเ้ ปน็ สที ึบ Dither ก�ำหนดวิธีการหาสใี กลเ้ คียง ปกตภิ าพ GIF จะมสี ีสงู สุด 255 สี แตถ่ ้าไฟล์ Palette Type มสี ีท่ใี ชน้ อกจากสีท่มี ีจะใช้วิธีหาสอี น่ื มาแทน เรยี กวา่ การ Dither Max Colors - None ไม่ใช้ Dither - Ordered คอื Dither ท่ีมีคณุ ภาพดีและขนาดไฟลเ์ ลก็ - Diffusion คอื Dither ทม่ี คี ณุ ภาพดแี ตข่ นาดไฟลใ์ หญ่ ก�ำหนดชนิดของสี - Web 216 เปน็ สีมาตรฐาน 216 สี - Adaptive วิเคราะหแ์ ละหาสที ่ีเหมาะสมที่สุด - Web Snap Adaptive วเิ คราะหแ์ ละหาสที ่ีเหมาะทสี่ ุดโดยสจี ะใกล้ เคยี งกับสีใน Web 216 - Custom เลือกสเี อง ก�ำหนดจ�ำนวนสี Palette ก�ำหนดสีทใ่ี ช้ Filter Options ก�ำหนดการกรองภาพเพื่อชว่ ยลดขนาดไฟล์ภาพลง

Adobe29F0lash CS6 บทท่ี 10 การนำ�เสนอผลงานให้แพรห่ ลาย เลอื ก WIN/MAC Projector ไฟลท์ ร่ี วม SWF กบั Flash Player เปน็ ไฟล์เดียวกนั ท�ำใหเ้ ล่น Flash ได้ แมใ้ นเคร่อื งจะไม่ได้ตดิ ต้งั โปรแกรม ไฟลท์ ่ีไดจ้ ากวนิ โดวจ์ ะมีนามสกุล EXE ส่วนไฟล์ทไี่ ดจ้ ากเครือ่ งแมคจะมีนามสกลุ APP

การสรา้ งภาพเคลือ่ นไหวเบือ้ งตน้ Adobe Fla2s91h CS6 การพับลิช หลังจากก�ำหนดออปชน่ั ใน Publish Setting แล้ว เราสามารถพบั ลชิ เอกสาร Flash ออกมาในรูป ของไฟล์มูฟว่ี (.swf) ไฟล์ HTML, GIF, JPEG และอื่น ๆ ตามท่เี ลอื กไว้ ซง่ึ สามารถท�ำได้ 2 วธิ ี ดังน้ี 1. คลกิ ปุ่ม Publish ในไดอะล็อกบ็อกซ์ Publish Settings หลงั จากก�ำหนดออปช่นั ต่าง ๆ เรียบรอ้ ยแลว้ 1 2. หลงั จากทเี่ ราก�ำหนดออปชนั่ ในไดอะลอ็ กบ็อกซ์ Publish Settings เรียบร้อยแลว้ ใหค้ ลิก ปุ่ม OK จากนั้นจึงเลอื กค�ำสั่ง Flie > Publish หรือกดคีย์ Shift F12 23 4

Adobe29F2lash CS6 บทท่ี 10 การนำ�เสนอผลงานให้แพรห่ ลาย เอก็ ซพ์ อรต์ ไฟลส์ �ำ หรบั น�ำ ไปใช้ในสอ่ื อน่ื ๆ นอกจากการใชค้ �ำส่ัง Publish เพ่ือสรา้ งไฟล์ HTML ส�ำเร็จรปู และมูฟวขี่ อง Flash Player ส�ำหรับน�ำไปเผยแพร่บนเว็บแล้ว  ยังสามารถเอ็กซ์พอร์ตเฟรมเดี่ยว ๆ  หรือภาพเคลื่อนไหวท้ังหมดออก เปน็ ไฟล์ฟอรแ์ มตอื่นที่เหมาะสมกับการน�ำไปใช้งานเฉพาะเรอื่ งไดด้ ว้ ย เช่น ไฟล์ GIF, JPEG, PNG หรอื QuickTime เป็นตน้ วธิ เี อก็ ซ์พอรต์ ภาพเดยี ว 1. เลือกภาพหรือเฟรมท่ีตอ้ งการเอ็กซพ์ อร์ต 2. เลอื กค�ำสง่ั File > Export > Export Image… 1 2

การสร้างภาพเคล่อื นไหวเบื้องต้น Adobe Fla2s93h CS6 3 ท่ชี ่อง File Name ให้ตง้ั ชื่อไฟล์ แลว้ เลอื กฟอรแ์ มตของไฟลท์ ี่ตอ้ งการ 4. ท่ชี ่อง Save as type ใหค้ ลิกทีป่ ุ่ม 5. คลกิ ปุ่ม Save 3 45 6. ก�ำหนดออปช่นั ของไฟล์ (บางฟอร์แมต) ซึ่งแต่ละฟอร์แมตจะมีใหก้ �ำหนดต่างกนั 7. คลกิ ปุม่ OK 6 7