Nuchun's Atelier

บล็อกรีวิวเครื่องเขียน l สีมาร์คเกอร์ l อุปกรณ์วาดรูป พร้อมวิธีทำงานประดิษฐ์สนุกๆ ที่ทำได้ที่บ้าน

[Interactive CD] ตอนที่ 2 : การทำภาพเคลื่อนไหวใน Adobe Animate

วันนี้จะมาต่อกันกับ Adobe Animate ค่ะ ครั้งนี้จะมาเรียนรู้การทำภาพเคลื่อนไหวอย่างง่ายๆ กันซึ่งเป็นส่วนสำคัญของการทำ Intro กันค่ะ (จันทำแล้วเหมือนทำ Powerpoint เลยอ่ะ ใช้ Animate แล้วรู้สึกรักความใช้ง่ายของ Powerpoint ขึ้นนิดนึงค่ะ 55) มาเริ่มกันเลยดีกว่า

เริ่มการทำ Intro

Intro คือส่วนที่นำเข้าสู่เมนูหลักค่ะ ส่วนใหญ่ก็จะมีอะไรวิ่งไปวิ่งมา เพื่อบอกข้อมูลต่างๆ เช่น บอกวัตถุประสงค์ — เป็น Annual Report นะ เป็นแบบเรียนภาษาอังกฤษนะ อะไรแบบนี้ ของบริษัทอะไร อาจจะเอาโลโก้เข้ามาใส่ เป็นต้นค่ะ Intro ก็ไม่ควรจะยาวมาก ไม่เกิน 6 วินาที สักไม่เกิน 120 Frames กำลังสวยค่ะ

Intro ส่วนใหญ่จะทำงานกับ Timeline เป็นหลักค่ะ เพราะฉะนั้นมาทำความเข้าใจเรื่อง Timeline ก่อนนะคะ

ในความเข้าใจของจัน Timeline นั้นเป็นสิ่งที่กำหนดระยะเวลาของสิ่งที่เกิดขึ้นในจอภาพ จะให้ปรากฏก่อน-หลัง-พร้อมกัน หรือให้เริ่มทำตาม Script ต่างๆ เมื่อไหร่ เรากำหนดได้ใน Timeline ทั้งหมดค่ะ

ส่วนประกอบใน Timeline

  • Layer ที่เป็นเส้นบรรทัดตามแนวนอน (เผื่อใครไม่เข้าใจเลเยอร์ สิ่งที่เรียกว่าเลเยอร์ในหมู่โปรแกรมกราฟิกก็เปรียบเหมือนแผ่นใสที่เราวางสิ่งของลงไป แล้วกำหนดได้ว่าจะให้สิ่งของอยู่ข้างหน้าหรือข้างหลังค่ะ ลองดูภาพนี้จะเข้าใจขึ้นนะ) จันแนะนำให้ใส่ 1 รูปหรือ Vector ต่อ 1 Layer สิ่งที่อยู่ในเลเยอร์เดียวกันจะขยับไปพร้อมๆ กันหมด หรือถ้าจะใส่คำสั่ง ก็จะได้เพียงคำสั่งเดียวใน 1 เฟรมเท่านั้น เพราะฉะนั้น อย่าเอาทุกอย่างไปกระจุกในเลเยอร์เดียวกัน จะไม่เกิดประโยชน์ค่ะ (และให้ดีก็ตั้งชื่อเลเยอร์ด้วยนะคะ)
  • Keyframe คือ จุดเริ่มต้นของความเคลื่อนไหวในเลเยอร์
  • Frame คือ 1 ช่องเล็กๆ ใน Timeline เป็นเหมือนการกำหนดเวลาเคลื่อนไหวให้ Keyframe อยากให้สิ่งที่อยู่ใน Layer แสดงความเคลื่อนไหวโดยใช้เวลานานหรือสั้น ก็เพิ่มลดเฟรมไปค่ะ

โปรแกรม Adobe Animate จะใช้ Timeline เป็นศูนย์รวมการควบคุมสิ่งที่ปรากฏขึ้นบนจอ และใช้การเขียน Script ในการออกคำสั่งให้ทำงานค่ะ เช่น ถ้าเราจะให้โลโก้ปรากฏบนหน้าจอ เราต้องทำงานกับ Timeline แต่ถ้าเราอยากให้โลโก้นี้ลิงค์ไปยังเว็บไซต์ เราต้องทำงานกับ Script แบบนี้เป็นต้นค่ะ

สั่งให้ Flash ขยายเต็มหน้าจอ

ก่อนอื่น ทันทีที่คนเปิดตัว Flash ของเรา เราต้องสั่งตัว Flash ให้ทำงานเต็มหน้าจอก่อนค่ะ ทุกครั้งที่ขึ้น Scene ให้เราใส่ Action นี้ลงไปทุกครั้งนะคะ


  1. .
    สร้าง Layer ขึ้นมา 1 Layer กดที่ปุ่ม New Layer ใต้ Timeline ก็จะมี Layer ปรากฏขึ้น Double Click ที่ชื่อ Layer (น่าจะเป็น Layer 2) แล้วตั้งชื่อว่า Fullscreen ค่ะ
    .

  2. .
    คลิกขวาที่ Frame แรกเลย แล้วกด Actions เพื่อใส่ Script ค่ะ
    .
  3. .
    ใส่ Script ด้านล่างลงไปในช่อง Action Panel ค่ะ
    ดูรายละเอียดเพิ่มเติมการปรับแต่ง Script ได้ในเว็บนี้ค่ะ

    stage.displayState=StageDisplayState.FULL_SCREEN; 
    stage.scaleMode=StageScaleMode.EXACT_FIT;

  4. .
    หลังจากนั้นล็อคเลเยอร์ด้วยการกดปุ่มกลมๆ ตรงแถวแม่กุญแจ เลเยอร์นี้เราจะปล่อยไว้อย่างนี้ ไม่ยุ่งอะไรกับมันอีกค่ะ

ต่อไปก็คือการสร้างลูกเล่นให้กับ Intro ค่ะ เราจะมาเรียนรู้การเคลื่อนไหวพื้นฐานกันนะคะ

  • Fade คือ การปรากฏขึ้นแบบค่อยๆ เข้มขึ้นจนเห็นชัด เรียกว่า Fade In หรือ จากเข้มจางจนหายไป เรียกว่า Fade Out ค่ะ
  • เปลี่ยนตำแหน่ง คือการย้ายที่จากจุดหนึ่งไปยังอีกจุดหนึ่ง
  • Rotate คือการเอียงหรือทำให้มันหมุนติ้วๆ
  • Zoom เข้า-ออก
  • เปลี่ยนสีจากสีหนึ่งไปอีกสีหนึ่ง

เราใช้พื้นฐานง่ายๆ เหล่านี้ในการทำ Intro ค่ะ
(เพราะจันทำแบบอื่นไม่เป็นค่ะ 😭😭😭😭😭)

วิธีการสร้างความเคลื่อนไหวบนหน้าจอ

  1. สร้าง Layer ใหม่แล้ว ตั้งชื่อให้เรียบร้อย จัดรูปหรือ  Vector นั้นวางลงบนตำแหน่งที่เราต้องการ
    1. เลือกรูปหรือ Vector จากไฟล์ *.ai หรือ *.pdf ก็เปิดไฟล์ใน Adobe Illustrator > เลือกรูปหรือ Vector > Copy (CTRL+C) แล้วก็ Paste (CTRL+V) บน Adobe Animate ได้เลย
      .

      .
      ตอนที่จะ Paste มาใน Adobe Animate เขาจะถามแบบนี้ ก็ให้เลือกตามภาพเลยนะคะแนะนำให้เช็คดูตอนเอามาวางนะ ว่ามันแตกเป็นส่วนๆ รึเปล่า ถ้ามันแยกออกจากกัน ให้ลากเมาส์ครอบ Vector แล้วกด CTRL+G เพื่อ Group มันเสียค่ะ
    2. .
      ถ้าเป็นรูป เราเข้าไปเลือกรูปใน Window Explorer แล้วคลิกค้างที่รูป (Drag) มาใส่ในโปรแกรม Adobe Animate
  2. คลิกขวาที่รูปหรือ Vector แล้วคลิกขวา Convert to symbol > เลือก Graphic หรือ Button (ถ้าเป็นปุ่มกด)
  3. คลิกขวาที่เฟรมที่เราต้องการให้รูปเริ่ม Fade ในเลเยอร์นั้น จากนั้นกด Insert Keyframe แล้ว… (มีข้อ 4 ต่อด้านล่างจ้า)
    1. กรณี Fade in-out :
      .
      .
      หันมองทางขวามือ ตรง Properties จะมีแถบ Color Effect อยู่
      เลือกที่ Alpha ปรับค่าความจางของรูป (0% คือไม่เห็นรูปเลย 100% คือเห็นรูปชัดเจน) ถ้าอยากให้รูป Fade in เข้ามาในกระดาษก็ปรับเป็น 0% แต่ถ้าอยากให้ค่อยๆ จางหายไปก็เลือก 100% หลังจากนั้น กลับมาดูที่ Timeline เลือกเฟรมที่เราจะสิ้นสุดการ Fade (หรือก็คือจุดที่อยากให้ภาพปรากฏ 100% หรือหายไป 100% นั่นเอง) คลิกที่เฟรมที่ต้องการ แล้วคลิกขวา Insert Keyframe จากนั้นปรับ Alpha อีกครั้งค่ะ
    2. กรณีเปลี่ยนตำแหน่ง :.
      กด Insert Keyframe ที่ Frame แรกที่เราต้องการให้เริ่มต้นเลือก Frame แล้ว Insert Keyframe เริ่มต้นกับ Keyframe จบ ใน Keyframe จบ ย้ายรูปหรือ Vector ไปยังจุดที่ต้องการ
    3. กรณี Rotate :
      .
      เลือก Frame แล้ว Insert Keyframe เริ่มต้นกับ Keyframe จบ ใน Keyframe จบ คลิกที่ปุ่ม Free Transform Tool ด้านซ้ายมือ พอเอาเมาส์เข้าไปใกล้ๆ รูป Cursor จะขึ้นเป็นลูกศรกลมๆ แล้วโยกหมุนรูปตามใจชอบเลยค่ะ
    4. กรณีเปลี่ยนขนาดและ Zoom In-Out :
      จริงๆ แล้ว หลักการ Zoom in-out ก็คือการขยายขนาดภาพ เพื่อให้ความรู้สึกใกล้ขึ้นนั่นเองค่ะ ใช้ Free Transform Tool ด้านซ้ายมือเหมือนการ Rotate เลย แต่ถ้าไม่อยากขยายให้ผิดสเกล อย่าลืมกด Shift ด้วยนะ !! ใน Keyframe จบ เราแค่ขยายขนาดของรูปหรือ Vector แล้วปรับให้อยู่ในตำแหน่งที่ต้องการ ภาพก็จะเหมือนถูกดึงเข้ามาใกล้ค่ะ
      ปล. จริงๆ มันมี Tools ที่ชื่อ Camera ให้ใช้นะ แต่จันยังเล่นไม่เป็น งือ—–😭การย่อขนาดของ Adobe Animate จะต่างจากเวลาย่อในโปรแกรมพวก Photoshop หรือ Illustrator ตรงที่เวลาย่อมันจะย่อเข้ามาทั้งสองด้าน นั่นเพราะว่าจุดศูนย์กลางการย่อรูปจะเซ็ทไว้ที่ตรงกลางค่ะ ถ้าอยากให้ย่อให้อีกด้านหนึ่งคงที่ไว้ เราต้องเปลี่ยนจุดศูนย์กลาง โดยย้ายจุดกลมๆ สีขาวจากที่อยู่ตรงกลาง ไปไว้มุมใดมุมหนึ่งของรูปหรือ Vector ค่ะ

  4. .
    คลิกขวาที่เฟรมใดก็ได้ ระหว่าง Keyframe ต้นกับจบ แล้วกด Create Classic Tween ค่ะ
    .
  5. .
    เมื่อได้ Keyframe เริ่มต้นกับสิ้นสุดแล้ว เราก็จะให้โปรแกรมสร้าง Frame ระหว่าง Keyframe ทั้งสองหรือที่เรียกว่า In-between ให้ค่ะ ด้วยการคลิกขวาที่ Frame ใดก็ได้ระหว่าง Keyframe ต้นกับ Keyframe จบแล้ว เลือก Create Classic Tween ก็จะได้ความเคลื่อนไหวที่เราต้องการค่ะ
    * ถ้าหากอยากให้เร็วขึ้นหรือช้าลงก็เพิ่มหรือลด Frame ตรงแถบสีฟ้าๆ นั้น (โดยคลิกขวาที่เฟรมสักเฟรมหนึ่ง แล้วเลือก Insert Frame/Remove Frame) ค่ะ

ทั้งหมดนี้เป็นวิธีการแบบพื้นฐานในการทำ Intro ค่ะ จริงๆ Adobe Animate ยังเล่นได้อีกหลายอย่าง เช่น จะวาดเป็นการ์ตูนก็ยังได้ แต่อันนั้นจะระดับ Advance เกิน 555 ลองเล่นกันดูนะคะ

*********************
ทั้งหมดเป็นการเขียนและวาดโดยจันเอง
ใครจะก๊อปไปไว้ไหน เครดิต www.nuchun.com ด้วยนะคะ
ขอบคุณค่ะ