เริ่มต้นโปรเจกแรกกับ Adobe Animate

เริ่มต้นโปรเจกแรกกับ Adobe Animate

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

โปรแกรม Adobe Animate ที่ผมจะใช้ในการเรียนและสอนไปพร้อม ๆ กันนี้เป็นโปรแกรมเวอร์ชัน 18.0.2 (build 126) ซึ่งผมจะใช้เวอร์ชันนี้ไปเรื่อย ๆ และจะแจ้งให้ทราบถ้าหากผมอัพเดตเป็นเวอร์ชันที่ใหม่กว่า เราสามารถดูเวอร์ชันได้โดยการคลิกเมนูบาร์ด้านบนของโปรแกรม Help > About Animate

เป้าหมายที่ผมต้องการในการฝึกหัดโปรแกรม Adobe Animate ในครั้งนี้ก็คืออมิเนชันภาพวิวซึ่งมีภูเขาเมฆ ดวงอาทิตย์ และดอกไม้ยิ้มโยกไปมา เป็นอนิเมชันที่คล้ายคลึงกับแบบฝึกของ Adobe ที่ผมคิดว่าน่าจะปรับปรุงให้เข้ากับความต้องการของผมได้ คือผมไม่อยากทำตามแบบฝึกเพียงอย่างเดียวโดยไม่เปลี่ยนแปลงอะไรเลย ผมมีความคิดที่ว่าเอาเรียนรู้วิธีการแล้วจึงประยุกต์ดัดแปลงมาเป็นของตนเอง แบบนี้จึงดีที่สุด

เริ่มต้นด้วยการสร้างโปรเจกใหม่ผ่านหน้า Splash Screen ซึ่งก็คือหน้าต้อนรับที่จะโผล่มากลางจอตอนที่เราเปิดโปรแกรม โดยคลิก HTML 5 Canvas ใต้หัวข้อ Create New บางทีเราอาจจะปิดหน้าต่างนี้ไปแล้วเราก็เลือกคลิกเอาจากที่เมนูบาร์ด้านบนได้ เลือก File > New เมื่อคลิกแล้วจะมีหน้าต่างให้เลือกว่าจะสร้างโปรเจกแบบไหน ก็คลิกเลือก HTML5 Canvas ซึ่งเป็นตัวเลือกบนสุดได้เลยครับ

โดยขนาดมาตรฐานของโปรเจกจะมีความกว้าง 550 px แล้วก็ความสูง 400 px เฟรมเรตคือ 24 fps ซึ่งเป็นค่ามาตรฐาน (24 เฟรมต่อวินาที) ถ้าเราต้องการอนิเมชันที่ลื่นกว่านี้เราก็อาจจะต้องปรับเพิ่ม fps ตัวนี้ให้มากขึ้น 24 fps นี่ก็ประมาณหนังทั่วไป แต่ถ้าเป็นเกมลื่น ๆ ก็จะอยู่ที่ประมาณ 60 fps ผมคิดว่าตอนนี้เอาไว้ที่ 24 fps ก็พอครับ

พอสร้างโปรเจกเสร็จปุ๊บตัวโปรแกรมก็จะพาเราข้าไปหน้าทำงานทันที สำหรับคนที่ไม่เคยมีประสบการณ์ในการใช้โปรแกรมคอมพิวเตอร์ทำงานประเภทนี้มาก่อนนี้มีความเป็นไปได้สูงว่าจะเกิดความสับสนไม่ทราบว่าจะเริ่มต้นจากตรงไหนอย่างไร ตัวผมมีความคุ้นเคยกับการทำงานของโปรแกรมแบบนี้อยู่บ้าง ผมจะบอกชื่อแล้วก็อธิบายส่วนต่าง ๆ ให้เข้าใจคร่าว ๆ ก่อนนะครับ แล้วค่อยเริ่มต้นทำอนิเมชันในบทต่อไป

* คลิกที่รูปภาพเพื่อดูภาพเต็มครับ

การอธิบายของผมจะไม่ตรงตามแบบเรียนของ Adobe เท่าไหร่นะครับ เพราะผมเน้นความเข้าใจของผมเองมากกว่า

  1. เมนูบาร์ จะเป็นรายการคำสั่งต่าง ๆ ที่เราต้องใช้ในระหว่างการทำงาน อย่างเช่นการสร้างโปรเจกใหม่ การเซฟโปรเจก การออกจากโปรแกรมเป็นต้น
  2. กระดานทำงาน เราจะทำอนิเมชันตรงนี้แหละครับ จินตนาการว่ามันเป็นพื้นโต๊ะทำงานที่เราเตรียมไว้ทำงานโดยเฉพาะก็ได้ครับ เหมือนโต๊ะว่าง ๆ ที่เราเอากระดาษมาวางแล้วก็วาดรูปนั่นแหละครับ
  3. หน้าต่างรายละเอียดวัตถุ เวลาเราทำงานบนกระดานทำงาน เราจะต้องหยิบเอาชิ้นงานต่าง ๆ ขึ้นมาปรับแต่งดัดแปลงทำอนิเมชันตามที่เราต้องการ หน้าต่างนี้จะคอยบอกรายละเอียดวัตถุที่เรากำลังจับ (Select) อยู่และเราสามารถเปลี่ยนแปลงคุณลักษณะต่าง ๆ ของวัตถุนั้นได้ครับ
  4. หน้าต่างเครื่องมือ หน้าต่างรวมเครื่องมือต่าง ๆ ที่เราใช้สร้างอนิเมชันและสิ่งของ (Object) ที่เราจะทำอนิเมชัน มีตั้งแต่ปากกา ยางลบ พู่กัน แว่นขยาย เหมือนกับถาดใส่เครื่องมือต่าง ๆ ที่เราวางไว้ที่มุมหนึ่งของโต๊ะทำงานอนิเมชันของเราน่ะครับ
  5. Timeline เส้นเวลา อันนี้จะอธิบายยากหน่อย โดยเฉพาะคนที่ไม่คุ้นเคยกับการทำงานเกี่ยวกับอนิเมชัน คืออนิเมชันนี่เราบอกได้ว่ามันเป็นชุดของภาพที่เปลี่ยนแปลงไปตามเวลา คือภาพมีการเปลี่ยนแปลงอย่างรวดเร็วจนทำให้เกิดภาพลวงตาในสมองของเราว่าภาพมันเคลื่อนไหว หน้าต่าง Timeline หรือเส้นเวลานี้เป็นตัวบ่งชี้ให้เรารู้ว่า 1 เฟรมนั้นมีการเปลี่ยนแปลงอะไรบ้าง ผมจะอธิบายตรงนี้เพิ่มเติมก่อนที่จะเริ่มสร้างอนิเมชันครับ เพราะมันเป็นความรู้พื้นฐานของการทำอนิเมชันเลย

บทนี้ยาวพอสมควรแล้วครับ เดี๋ยวพรุ่งนี้มาต่อบทต่อไป คือการอธิบายว่าอนิเมชันคืออะไรนะครับ อย่าลืมเซฟโปรเจกด้วยการคลิกที่เมนูบาร์ File > Save แล้วเลือกชื่อไฟล์ ผมตั้งใจจะทำอนิเมชันดอกไม้จึงตั้งชื่อไฟล์ว่า flower.flv ก็เลือกตั้งชื่อตามอนิเมชันที่ตัวเองอยากทำก็แล้วกันนะครับ

000 รู้จักกับ Adobe Animate CC