วันพุธที่ 25 สิงหาคม พ.ศ. 2553

Motion Tween

Motion Tween เป็นการเคลื่อนที่ของภาพจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือเปลี่ยนคุณสมบัติจากแบบหนึ่งเป็นอีกแบบหนึ่ง Step 1 ให้เราสร้างไฟล์เอกสาร มาตามปกติ

ต่อไปเราจะเห็นมี หน้าเอกสาร เปล่าขึ้นมา แล้วดูที่ Panel Layer โปรแกรม Flash จะทำการสร้าง Layer ให้เรา 1 Layer นะครับ เราสามารถ วาดงาน อะไรได้เลย แต่ในที่นี้ เราจะมาสร้าง การทำภาพเคลื่อนไหว แบบ Motion Tween นะ ให้เราเปลี่ยนชื่อตามต้องการนะครับ โดยการเปลี่ยนชื่อให้ ดับเบิ้ลคลิกที่ Layer นั้น แล้วพิมพ์ ชื่อที่เราต้องการ อะไรก็ได้ แล้วกด Enter ไป Step 2 ที่ Stage ของเราจะว่างเปล่านะครับไม่มีอะไร ให้เราไปคลิกที่ Frame ที่ 1 ที่อยู่ใน Layer ที่เราพึ่งตั้งชื่อเมื่อกี้ แล้วไปที่ Panel Tools ซึ่งก็คือหน้าต่างเครื่องมือของเรา ให้คลิกที่ Oval Tool แล้วให้เราเลื่อนเมาท์ไปวาดรูปที่ Stage ของเราวาดอะไรก็ได้ Step 3 เราจะทำ Animation การเคลื่อนที่ จากที่หนึ่งไปอีกที่หนึ่ง คือจาก ซ้าย วิ่งไปทางขวา ดังนั้นรูปที่เราวาดนั้นเรา จะต้องย้ายมันมาทางซ้าย ก่อน จะได้มีพื้นที่ในการวิ่ง จาก ซ้าย ไป ขวา - ให้เราไปคลิกที่ Arrow tool เพิ่มจะไปเลือกที่วงกลมของเรา สังเกตจากรูปด้านล่าง ถ้ามีการเลือกที่วงกลม รูปวงกลมนั้นจะเป็นจุด ถ้าเราไม่ได้เลือกที่ วงกลม มันก็จะเป็นเนื้อรูปวงกลม ธรรมดา การทำการเคลื่อนไหวแบบ Motion Tween นั้นจะมีกฏอยู่ง่ายๆ ว่า การจะให้วัตถุเคลื่อนที่นั้น วัตถุนั้น จะต้องจับกลุ่มเป็นก้อนเดียวกัน ดังนั้น จะสังเกตเห็นว่ารูปวงกลมเรานั้น จะมีการแยก เส้นขอบและ เนื้อวงกลมออกจากกัน เราจะได้ทำการ Group หรือทำให้ เส้นและเนื้องานนี้เป็น อันเดียวกัน หรือเราจะแปลงให้ รูปที่เราวาดเป็น Symbol ต่างๆก็ได้ (ดูได้จากหัวข้อการแปลงวัตถุเป็น Symbol) ในที่นี้ เราจะแปลง วัตถุที่เราวาดเป็น Symbol แบบ Graphic วิธีการแปลงก็ให้เรา - ลากเมาท์ค้าง แล้วลากคุม รูปวงกลมที่เราวาด ก็จะทำให้รูปวงกลมที่เราวาด เป็นจุดๆ เหมือนรูปตัวอย่างด้านบน - หรืออีกวิธีที่ง่าย ให้เรา ดับเบิ้ลคลิก ที่รูปวงกลมก็ได้ จะเป็นการเลือกวัตถุเหมือนกัน ส่วนตัวผมทำวิธีนี้เหละ เร็วดี - แล้วให้คลิกที่เมนู Insert – Convert to Symbol. - จะมีหน้าต่าง โชว์ขึ้นมา ให้เราตั้งชื่อของ Graphic ของเราตามต้องการ ในที่นี้จะตั้งชื่อว่า Ball - เลือก Type ที่ช่อง Behavior เป็นแบบ Graphic - ได้แล้วให้คลิกที่ปุ่ม OK เปิดหน้าต่าง Library ขึ้นมา โดยคลิกที่เมนู window > Library หรือกด Ctrl+L ก็ได้ - เราก็จะเห็น Item ชื่อ ball อยู่ในหน้าต่าง Library ของเรา Step 4 การสร้างการเคลื่อนที่จากที่หนึ่งไปอีกที่หนึ่งนั้น เราจะต้องมีจุดเริ่มต้น และจุดปลายทางที่เราจะไป ดังนั้นเราจะต้องมีการสร้างจุดเริ่มต้น และ จุดสิ้นสุดให้กับรูปวงกลมของเรา โดยจุดเริ่มต้นนั้นเรามีการสร้างไว้แล้ว ก็คือ Key Frame ที่ 1 ต่อไปให้เราสร้าง Key Frame ปลายทาง โดยให้นำเมาท์ไปคลิกขวาที่ Frame ที่ 36 แล้วเลือกคำสั่ง Insert Keyframe ดังรูป เราก็จะได้ Keyframe 2 จุดคือ อยู่ที่ Frame ที่1 และ Frame ที่ 36 สังเกต ถ้า Keyframe เฟรมนั้นจะเป็นจุดสีดำ ที่เฟรมนั้น ส่วน Frame ที่สีทึบๆนั้น จะเรียกว่า Frame ธรรมดา จะไม่เรียกว่า Keyframe Step 5 - ต่อไปให้เรานำเมาท์คลิกที่ Keyframe ที่ 36 แล้วคลิกเลือก รูปวงกลมของเรา แล้วคลิกเมาท์ค้างไว้ ลากไปทางด้านขวา ตามต้องการ step 6 - ต่อไปให้เรานำเมาท์มาคลิกขวาที่ Frame ธรรมดา Frame อะไรก็ได้ ดังรูป แล้วเลือกเมนู Create Motion Tween ดังรูป - เราก็จะเห็นเป็นเส้นลูกศรตรงที่ Frame ขอเราแล้ว - ให้เราลองกด Ctrl+Enter ดู - จะเห็นลูกบอลเราเคลื่อนที่แล้ว - ถ้าเราต้องการที่จะให้ลูกบอลเคลื่อนที่ไปที่จุดปลายทางไหน ก็ไปคลิกที่ Keyframe ปลายทาง (Keyframe ปลายทางของเราคือ Keyframe 36) ก็ให้คลิกที่ Keyframe นั้นก่อน แล้วค่อยทำการย้าย รูปวงกลมไปยังตำแหน่งที่ต้องการ - ส่วนจะย้ายตำแหน่งเริ่มต้นเคลื่อนที่ของ รูปวงกลมเรา ก็ทำเช่นกัน คือให้นำเมาท์ไปคลิกที่ Keyframe ต้นทางก่อน (Keyframe ต้นทางของเราคือ Keyframe 1) แล้วก็ค่อย ย้ายรูปวงกลมเรา



ตัวอย่างการสร้าง Motion Tween แบบที่ 2





การสร้าง Motion Tween กำหนดคีย์เฟรมแรกซึ่งมีภาพในตำแหน่งเริ่มต้น กำหนดอีกเฟรมหนึ่งให้เป็นคีย์เฟรมถัดมา แล้วทำการเปลี่ยนตำแหน่งหรือเปลี่ยนคุณสมบัติของภาพนั้น คลิกขวาในเฟรมที่อยู่ระหว่างคีย์เฟรมแรกและคีย์เฟรมถัดมา แล้วเลือก Create Motion Tween จะปรากฏเส้นลูกศรระหว่างคีย์เฟรมนั้น

การปรับแต่งระหว่างการเคลื่อนไหว สามารถปรับแต่งคุณสมบัติของอ็อบเจ็คเพื่อให้อ็อบเจ็คมีคุณสมบัติเปลี่ยนไปขณะเคลื่อนไหว โดยทำการคลิกเฟรมระหว่างการเคลื่อนไหว จะปรากฏ Property Inspector ตั้งค่า Scale เลือกเพื่อให้ขนาดอ็อบเจ็คเล็กหรือใหญ่ให้สัมพันธ์กับจังหวะการเคลื่อนที่ Ease จังหวะในการเคลื่อนที่ Edit ปรับจังหวะการเคลื่อนที่จากเส้นพาธ Rotate หมุนอ็อบเจ็ค และระบุจำนวนรอบในการหมุน Motion Path สามารถกำหนดให้อ็อบเจ็คเคลื่อนที่ในเส้นทางที่ต้องการได้ หลังจากที่สร้าง Motion Tween แล้ว สามารถสร้าง Motion Path ดังนี้ ให้คลิกที่คีย์เฟรมแรก คลิกปุ่ม Edit Multiple Frames แล้วเลื่อน End Onion Skin ให้ครอบคลุมทุกเฟรมที่เคลื่อนไหว คลิกปุ่ม Add Motion Guide โดยเลเยอร์ Motion Guide จะต้องอยู่เหนือเลเยอร์อ็อบเจ็ค ใช้เครื่องมือ Pen หรือ Pencil วางเส้นทางการเคลื่อนที่ คลิกที่คีย์เฟรมแรก จัดให้จุดกลางอ็อบเจ็คตรงกับจุดเริ่มต้นของเส้นทาง และคลิกที่คีย์เฟรมที่สอง จัดให้จุดกลางอ็อบเจ็คตรงกับจุดสิ้นสุดของเส้นทาง ตัวอย่างงาน Motion Tween



ตัวอย่าง Motin Tween


ไม่มีความคิดเห็น:

แสดงความคิดเห็น