การเคลื่อนที่ตามเส้นทาง การเคลื่อนไหวโดยปกติจะเป็นแบบ Motion Tween แต่หากต้องการให้วัตถุเคลื่อนไหวไปตามเส้นทางที่กำหนดก็สามารถทำได้ โดยสร้างเส้นนำทางขึ้นมา ซึ่งเรียกว่า Motion Path ขั้นตอนการสร้าง ขั้นที่ 1 คลิกเลือกคีย์เฟรมแรกของการเคลื่อนไหว ขั้นที่ 3 สร้าง Guide Layer โดยคลิกปุ่ม Add Motion Guide ขั้นที่ 4
สร้างเส้น Motion Path ที่ Guide Layer โดยคลิกที่เฟรม แล้วสร้างเส้นโดยใช้เครื่องมือต่างๆ เช่น สร้างด้วยการวาดด้วยดินสอ โดยสร้างเป็นรูปปลายเปิด ขั้นที่ 5 ที่ Guide Layer กำหนดระยะห่างตามต้องการ แล้วสร้างคีย์เฟรม โดย กด F6 ขั้นที่ 6 ที่ Layer ของวัตถุ กำหนดให้เป็น Motion Tween โดยคลิกขวา คลิก Create Motion Tweenและกำหนดระยะห่างให้เท่ากับ Guide Layer แล้วสร้างคีย์เฟรม โดย กด F6 ขั้นที่ 7 นำวัตถุไปวางที่ปลายเส้นแต่ละข้าง โดยคลิกเฟรมเริ่มต้นของ Layer วัตถุ จับวัตถุ
มาวางที่ปลายเส้นเริ่มต้น (ให้จุดวงกลมศูนย์กลางของวัตถุอยู่ที่ปลายเส้น) และคลิกเฟรมสุดท้ายของ Layer วัตถุ จับวัตถุ มาวางที่ปลายสุดท้าย เช่นเดียวกัน กรณีที่ต้องการให้วัตถุ หันหัววิ่งตามเส้น ให้คลิกเฟรมเริ่มต้น ของ Layer วัตถุ หมายเหตุ กรณีที่ต้องการให้โชว์เส้น Motion path ด้วย ให้ Copy เส้นจาก Guide Layer และนำไปวางที่ Layer ใหม่โดยควรสร้าง Layer ใหม่อยู่ข้างล่าง Layer ของวัตถุ ( เวลาวางให้คลิก Edit > Paste in Place ซึ่งเป็นการวางตำแหน่งเดิม)  Chapter 6 : เทคนิค Motion Guide และ Mask Layerการสร้างเทคนิค Motion Guide เข้ามาช่วยกำหนดเส้นทางการเคลื่อนที่ของอ็อบเจ็กต์ด้วยตัวเอง โดยสร้างเส้นไกด์ หรือเส้นนำทางไว้ที่ Guide Layer ซึ่งจะอยู่ด้านบนของเลเยอร์อ็อบเจ็กต์ที่ต้องการให้เคลื่อนที่ไปตามเส้นไกด์นั้นๆ ขั้นที่ 1 เพิ่มวัตถุเข้าไปใน Stage แล้วคลิกขวาที่เฟรมที่ 1 เลือกคำสั่ง Create Motion Tween ขั้นที่ 2 คลิกเฟรมที่ 20 หรือ เฟรมอื่นๆ แล้วแต่เราจะกำหนด แล้วกดปุ่ม F6 เพื่อ Insert keyframes แล้วใช้เครื่องมือ Selection Tool คลิกเพื่อย้ายตำแหน่งวัตถุ (เช่นย้ายจากซ้ายไปขวา) ขั้นที่ 3 คลิกที่ปุ่ม Add Motion Guide จะมีเลเยอร์เพิ่มขึ้นมาชื่อ Guide แล้วให้คลิกเฟรมที่ 1 ของเลเยอร์ Guide ขั้นที่ 4 วาดเส้นสำหรับให้วัตถุเคลื่อนที่ด้วยดินสอ (Pen Tool) โดยปรับค่าตัวเลือก (Option) ที่อยู่ด้านล่างของ Tool Bar เลือกรูปแบบ Smooth เริ่มวาดจากตำแหน่งเริ่มต้นของวัตถุ สามารถวาดเป็นเส้นโค้งตัดกันได้ แต่ต้องไม่ซับซ้อนเกินไป ขั้นที่ 5 คลิกเฟรมที่ 1 ของLayer 1 ใช้เมาส์ย้ายวัตถุให้วงกลมตรงกลางวัตถุไปอยู่ที่ส่วนปลายของเส้น Guide ด้านหนึ่ง จากนั้นให้คลิกเฟรมที่ 20 แล้วย้ายตำแหน่งวัตถุให้วงกลมตรงกลางวัตถุอยู่ที่ปลายเส้นอีกด้านหนึ่ง เฟรมที่ 1 เฟรมที่ 20 ขั้นที่ 6 ทดสอบภาพเคลื่อนไหวโดยการกดปุ่ม Ctrl+Enter จะได้ภาพเคลื่อนไหวไปตามเส้นที่กำหนด (หากภาพไม่เคลื่อนตามเส้นแสดงว่า 1. วงกลมตรงกลางวัตถุไม่อยู่ตรงส่วนปลายของเส้น 2. เส้นที่วาดไม่ต่อเนื่องกันหรือซับซ้อนเกินไป) หมายเหตุ...เวลาทดสอบจะมองไม่เห็นเส้นที่เราวาดนะคะ การสร้างภาพเคลื่อนไหวแบบ Mask Layerการสร้างเทคนิค Mask Layer ให้กับภาพเคลื่อนไหว ที่เรียกว่า "Mask" หรือการทำหน้ากาก จะเหมือนกับมีหน้ากากเป็นตัวบัง Object ที่อยู่ในเลเยอร์ด้านล่าง โดยมีช่องบนหน้ากากเป็นตัวแสดงเนื้อหาเฉพาะส่วนของอ็อบเจ็กต์ หรือมีลักษณะคล้ายกับการส่องไฟฉายไปยังบริเวณที่มืด ซึ่งจะปรากฎภาพเฉพาะส่วนที่ไฟส่องสว่างเท่านั้น เลเยอร์ที่อยู่ต่ำกว่าจะถูกบังโดยเลเยอร์ที่อยู่สูงกว่า ขั้นที่ 1 เพิ่มวัตถุเข้าไปใน Stage วัตถุจะอยู่ที่เฟรมแรกของ Layer 1 (ในที่นี้จะใช้การสร้างข้อความด้วยเครื่องมือ Text tool) ขั้นที่ 2 เพิ่ม Layer ใหม่ โดยคลิกปุ่ม Insert Layer แล้ววาดรูปทรงตามต้องการ (ตามตัวอย่างเป็นรูปทรงสี่เหลี่ยมผืนผ้า) โดยต้องวาดในรูปแบบของ Shape เท่านั้น และวางไว้ด้านซ้ายของข้อความ ขั้นที่ 3 กดปุ่ม F5 เฟรมที่ 40 ของเลเยอร์ 1 เพื่อ Insert frame ขั้นที่ 4 คลิกขวาเฟรมที่ 1 ของเลเยอร์ 2 แล้วเลือกคำสั่ง Create Motion Tween ขั้นที่ 5 กดปุ่ม F6 เฟรมที่ 40 ของเลเยอร์ 2 เพื่อ Insert Keyframe ขั้นที่ 6 เฟรมที่ 40 ของเลเยอร์ 2 ให้ใช้ Free Transform tool ขยายรูปสี่เหลี่ยมให้มีขนาดใหญ่ขึ้นทับข้อความจนมองไม่เห็นข้อความ (ก่อนขยายรูปสี่เหลี่ยม ให้ย้ายวงกลมที่อยู่ตรงกลางรูปสี่เหลี่ยมไปอยู่ตรงขอบรูปตรงกลางด้านซ้าย แล้วขยายรูปไปทางขวามือ) ขั้นที่ 7 คลิกขวาเฟรมที่ 1 ของเลเยอร์ 2 เลือกคำสั่ง Creat Shape Tween ขั้นที่ 8 คลิกขวาที่ชื่อเลเยอร์ 2 แล้วเลือกคำสั่ง Mask ขั้นที่ 9 กดปุ่ม Ctrl+Enter เพื่อดูผลงาน หมายเหตุ : หากต้องการแก้ไขรูปสี่เหลี่ยมให้คลิกที่รูปแม่กุญแจเพื่อปลดล็อคก่อนแล้วก็ทำการย้ายหรือปรับขนาดของสี่เหลี่ยมได้ตามต้องการ เมื่อแก้ไขเสร็จล็อคไว้ตามเดิม |
การเคลื่อนไหวไปตามเส้น
กระทู้ที่เกี่ยวข้อง
ลิขสิทธิ์ © 2024 th.ketajaman Inc.
