warapornn

การสรา้ งภาพเคลอื่ นไหวแบบตา่ งๆ Adobe Flash

คำนำ ปจั จุบันมีการสารสนเทศมาใช้ ทาเป็นสอื่ การเรยี นการสอนมากขน้ึ เพื่อเป็นการเพิ่มความสนนา่ สนใจใหก้ บั สอื่การเรียนการสอนน้นั การใส่ภาพเคล่ือนไหวลงไปจะทาให้นา่ สนใจมากขึ้น และภาพเคล่อื นไหวยงั สามารถสรา้ งความเพลดิ เพลินใหก้ ับผู้ท่รี บั ชมได้ โปรแกรม Flash เปน็ โปรแรมทีไ่ ดร้ บั ความนยิ มอยา่ งมากในหมู่นกั สร้างงานมลั ตมิ ิเดยี เพราะ สามารถสร้างภาพเคลอื่ นไหวทสี่ มบูรณแ์ บบ ทัง้ ภาพและเสียง และการโต้ตอบจากผใู้ ชไ้ ฟล์งานทไี่ ด้ยงั มีขนาดเลก็ เหมาะสมกบัการนาไปเผยแพรผ่ ลงานผา่ นเวบ็ บราวเซอรต์ า่ งๆซ่ึงกม็ ีผู้ใช้อนิ เทอร์เนต็ กวา่ 90% ทส่ี ามารถเปิดดผู ลงานทส่ี รา้ งโดยโปรแกรม Flash ผ่านเบบราวเซอร์ได้ที่สาคัญเราสามารถเรยี นรู้การใช้งานโปรแกรมนี้ได้ไมย่ าก และสามารถพัฒนาจากการสรา้ งงานระดบั พ้ืนฐานไปเปน็งานมัลติมิเดียระดบั มืออาชพี อยา่ งทเ่ี ราเห็นตามหนา้เว็บไซต์สวยๆ

สารบัญ หนา้Frame By Frame 5-7Shape Tween 8-10Motion Tween 11-13Rotate 14-15Zoom 16-17Alpha 18-20Guide Layer 21-24Mask Layer 25-28

การสรา้ งภาพเคลื่อนไหว Frame By Frame Shape Tween Motion Tween Rotate Zoom Alpha Guide Layer Mask Layer

Frame By Frameรปู แบบท่ี 1 การสรา้ งข้อความเคลอื่ นไหวข้นั ที่ 1 พมิ พข์ ้อความลงบน Stage โดยเริม่ ทค่ี ยี ์เฟรมใดคยี ์เฟรมหน่งึข้ันท่ี 2 เพิ่มคีย์เฟรมท่ี 2 โดย กด F6 หรือ คลิกขวาท่ีคีย์เฟรมที่ 1 แล้วคลิก Insert Keyframe

ขัน้ ท่ี 3 คลกิ ท่ีคีย์เฟรมท่ี 2 พิมพ์ตวั อกั ษรตวั ท่ี 2 หรอื ข้อความท่ีตอ้ งการขั้นที่ 4 ทาข้ันตอนที่ 2 ต่อด้วยข้ันตอนท่ี 3 วนอย่างน้ี จนกว่าจะครบข้อความท่ีตอ้ งการ

ข้ันที่ 5 ทาจนครบข้อความท่ตี อ้ งการดังภาพข้นั ที่ 6 ทดสอบ Movie โดยกดCtrl+ Enter หรือ คลกิเมนู Control > Test Movie จะไดไ้ ฟล์ Movie เป็น .swf

Shape Tweenขนั้ ท่ี 1 คลิกท่เี ฟรมท่ี 1 แลว้ วาดรูปวตั ถุขึ้นมาหนึ่งรปูขั้นท่ี 2 คลิกท่ีเฟรมท่ี 1 (สาคัญมากเพราะถ้าไม่คลิกตัวเลือกจะไม่แสดงข้นึ ในหนา้ ตา่ ง Properties)เลอื กคาสง่ั Shape ในช่อง Tween

ขนั้ ที่ 3 คลิกขวาที่เฟรมท่ี 20 แล้วเลอื กคาสัง่ Insert Keyframeข้ันท่ี 4 คลิกเฟรมที่ 20 แล้วกดปุ่ม Delete ลบวัตถุเดิมออกตอนน้ีบนไทมไ์ ลนจ์ ะมีแถบเส้นประสเี ขยี ว

ข้ันที่ 5 วาดรปู ทตี่ ้องการให้เปลี่ยนลงไปในเฟรมที่ 20ข้ันที่ 6 กดปุ่ม Ctrl+Enter เพื่อทดสอบการเปลี่ยนแปลงจะเห็นภาพค่อยๆเปล่ยี นจากรูปหนึ่งเป็นอีกรปู หนงึ่

Motion Tween1. การสรา้ งภาพเคลอ่ื นไหวแบบลอยในแนวเสน้ ตรงขนั้ ท่ี 1 คลกิ เลือกคีย์เฟรมจดุ เรมิ่ ต้นข้นั ท่ี 2 สร้างวตั ถุ หรอื เนื้อหาตามต้องการ

ขนั้ ที่ 3 คลิกขวาท่ีคยี ์เฟรม คลิกเลอื กเมนู Create Motion Tweenขั้ น ที่ 4 ก า ห น ด ร ะ ย ะ ห่ า ง จ า ก จุ ด แ ร ก ต า ม ต้ อ ง ก า ร เ ช่ นห่าง 15 เฟรม คลิกท่ีเฟรมท่ี 15 แล้วเพ่ิมคีย์เฟรม โดยกด F6 หรือคลิกเมนู Insert > Timeline > Keyframe

ขั้นที่ 5 จับวัตถุท่ี stage แล้วปรับเปล่ียนคุณลักษณะ เช่น ย้ายตาแหนง่ ยอ่ -ขยาย เปล่ยี นสี หรืออนื่ ๆ ตามตอ้ งการขน้ั ท่ี 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรอื คลิกเมนู Control > Test Movie จะได้ไฟล์ Movie เปน็ .swf

แบบหมนุ ไปพรอ้ มกับเคลอื่ นท่ีขั้นท่ี 1 คลิกเลือกคีย์เฟรมแรกหรือเฟรมท่ีอยู่ระหว่างคีย์เฟรมทั้งสองของการเคลอ่ื นไหวขัน้ ที่ 2 กาหนดคา่ ต่างๆ ท่ีหน้าตาง Properties Rotate : CW หมายถงึ ลักษณะการหมุนแบบตามเข็ม นาฬกิ า CCW หมายถึงการ หมนุ ทวนเข็มนาฬิกา 1 times หมายถึงจานวนรอบของ การหมนุ ภายใน 15 เฟรม

ขั้นที่ 3 ทดสอบการเคล่อื นท่โี ดยกดปุ่ม Ctrl+Enter(ถ้าไมต่ อ้ งการใหว้ ตั ถุเคลื่อนทีแ่ ต่หมุนอยู่ที่เดิมกไ็ มต่ อ้ งเคล่อื นย้ายวัตถุในตาแหนง่ คีย์เฟรมท่ี 15)

แบบเคลือ่ นไหวแบบยอ่ -ขยายข้นั ตอนท่ี 1 คลกิ ทเี่ ฟรมท่ี 1 แลว้ วาดรปู ท่ีต้องการลงไปขน้ั ที่ 2 คลิกขวาทีเ่ ฟรมที่ 1 แลว้ เลือกคาส่งั Create Motion Tween

ข้ันท่ี 3 คลิกขวาเฟรมท่ี 20 เลือกคาส่ัง Insert Keyframe แล้วขยายรปู ให้ใหญข่ ึน้ ดว้ ย Free Transform Toolข้ันที่ 4 กดปมุ่ Ctrl+Enter เพ่ือดตู วั อย่างภาพเคล่ือนไหว จะเหน็ภาพคอ่ ยใหญข่ ึ้น

แบบปรับให้คอ่ ยชดั หรือจางลง (Alpha)ข้นั ตอนที่ 1 คลิกทเ่ี ฟรมที่ 1 แลว้ วาดรูปท่ีต้องการลงไปขั้นท่ี 2 คลกิ ขวาท่เี ฟรมที่ 1 แล้วเลือกคาสั่ง Create Motion Tween

ขั้นที่ 3 คลิกขวาเฟรมที่ 20 เลือกคาส่ัง Insert Keyframe แล้วขยายรูปใหใ้ หญ่ข้นึ ดว้ ย Free Transform Tool (ไม่ขยายกไ็ ด้)ขน้ั ท่ี 4 คลกิ ท่วี ตั ถเุ พื่อให้ตัวเลือกปรากฏขึ้นท่ี Properties จากน้ันเลือก Alpha แล้วปรับค่า Alpha เป็นค่าที่น้อยลง จะได้ภาพที่จางลงมองทะลพุ ้นื หลังได้

ขั้นที่ 5 กดปุ่ม Ctrl+Enter เพ่ือดูตัวอย่างภาพเคล่ือนไหว จะเห็นภาพค่อยใหญ่ข้ึนและจางหายไปแต่ตาแหน่งไม่เปลี่ยนเนื่องจากเราไมไ่ ดย้ ้ายตาแหนง่ ของวัตถุ

แบบเคลอื่ นไหวตามเสน้ ทางทกี่ าหนด (Guide Layer)ข้ันที่ 1 คลิกขวาทเี่ ฟรมท่ี 1 เลือกคาสง่ั Create Motion Tweenขั้นท่ี 2 คลิกขวาท่ีเฟรมที่ 20 หรือ เฟรมอื่นๆแล้วแต่เราจะกาหนดแล้วเลือกคาสั่ง Insert keyframes

ข้ันที่ 3 คลิกที่เฟรมท่ี 20 (เฟรมปลายทาง) ใช้เครื่องมือ SelectionTool คลิกเพอ่ื ยา้ ยตาแหนง่ วัตถุข้นั ที่ 4 คลกิ ท่ปี ุ่ม Add Motion Guideแล้วคลกิ ทีเ่ ฟรมท่ี 1

ข้ันท่ี 5 วาดเส้นสาหรับให้วัตถุเคล่ือนที่ด้วยดินสอ (Pen Tool)โดยปรับค่าตัวเลือก (Option) ที่อยู่ด้านล่างของ Tool Bar เลือกคาสั่ง Smooth เรม่ิ วาดจากตาแหนง่ เริ่มตน้ ของวัตถุข้ันท่ี 6 หลังจากวาดเสร็จสังเกตวงกลมท่ีตาแหน่งปลายเส้นไกด์ด้านเริ่มต้นแล้ว จากนั้นให้คลิกที่ตาแหน่งคีย์เฟรมท่ี 20 แล้วย้ายตาแหนง่ วัตถุใหว้ งกลมตรงกลางอยทู่ ปี่ ลายเส้นอกี ดา้ นหน่ึง

ขน้ั ท่ี 7 ทดสอบภาพเคล่ือนไหวโดยการกดป่มุ Ctrl+Enterจะได้ภาพเคล่อื นไหวตามเสน้ ที่กาหนดหากภาพไมเ่ คล่อื นตามเสน้ แสดงวา่1. วงกลมเลก็ ตรงกลางวตั ถุไม่อยบู่ นเส้น2. เสน้ ทวี่ าดไม่ต่อเน่อื งกันข้ันท่ี 8 ปรับแต่งเพ่ิมเติมโดยการคลิกท่ีตาแหน่งเฟรมท่ี 1 แล้วเลือก Orient to path ในหน้าต่าง Properties เพ่ือกาหนดทิศทางการหนั ของวตั ถุให้ถกู ตอ้ ง(หมายเหตุ* เวลาทดสอบจะมองไมเ่ หน็ เส้นที่เราวาดนะค่ะ)

แบบเคล่อื นไหวแบบ Mask Layerขั้นที่ 1 เขียนวตั ถหุ รอื นาภาพที่ต้องการท่ี เฟรมแรกของLayer 1ขั้นท่ี 2 เพิ่ม Layer โดยคลิกหมายเลข 1 แล้วเขียนรูปทรงส่วนท่ีจะไม่บัง (ส่วนท่ีเป็นไฟส่อง) ตามตัวอย่างเป็นรูปทรงวงกลม โดยเขยี นท่ี Layer 2 (หมายเลข 2)

ขั้นที่ 3 คลกิ ขวา Insert frame ที่เฟรมท่ี 40 บนเลเยอร์ 1ขั้นท่ี 4 คลิกขวา ทเี่ ฟรมที่ 1 ของ เลเยอร์ 2 แลว้ เลือกคาสง่ั Create Motion Tween

ขั้นที่ 5 คลิกขวาท่ีเฟรมที่ 40 ของเลเยอร์ 2 เลือกคาสั่ง InsertKeyframeขน้ั ที่ 6 ณ เฟรมที่ 40 ใช้ลูกศรสีดาจับรูปวงกลมเลื่อนไปตาแหน่งอื่นหรือขยายรูปให้มขี นาดใหญข่ ้ึนตามต้องการ

ขั้นท่ี 7 คลิกขวาที่ชื่อเลเยอร์ 2แล้วเลือกคาส่ัง Mask จากนั้นกดปุ่ม Ctrl+Enter เพื่อดผู ลงานหากต้องการแก้ไขตาแหน่งของวงกลมให้คลิกที่รูปแม่กุญแจเพ่ือปลดล็อคกอ่ นแล้วก็ทาการย้ายหรือปรับขนาดของวงกลมได้ตามต้องการเม่ือแก้ไขเสร็จลอ็ คไว้ตามเดมิ*หลักการของการ Mask Layer ก็คือการสรา้ งเลเยอร์ข้นึ มาเป็นคู่ เลเยอร์ดา้ นลา่ งจะเป็นเลเยอร์ท่ีมองเหน็ (ภาพทเ่ี รานาเข้ามา)ส่วนเลเยอร์ดา้ นบนจะเป็นชอ่ งทีเ่ รามองผ่าน ขึ้นอยู่กับว่าเราวาดเป็นรูปอะไร (วงกลม ส่ีเหล่ียม รูปดาว) แล้วเราก็ทาให้วัตถุท่ีอยู่ เลเยอร์ด้านบนเคล่ือนที่ไปมาจากนั้นก็คลิกขวาที่ชือ่ เลเยอรด์ า้ นบนเลือก Mask เปน็ อนั เสร็จ

อาจารย์ผ้สู อนอาจารย์ : วิลาวลั ย์ วชั โรทยัวิชา อินเตอรเ์ นต็ เพอ่ื งานธรุ กจิ