ภาพเคลื่อนไหวแบบ Frame by Frame

ถ้าคุณยังไม่เคยสร้างภาพเคลื่อนไหวมาก่อน หรืออาจเคยทดลองมาบ้าง แต่รู้สึกว่าทำได้ยาก เลยไม่ค่อยอยากใช้ภาพเคลื่อนไหวในเว็บสักเท่าไหร่ Fireworks มีฟีเจอร์พิเศษหลายๆอย่าง ที่จะช่วยให้คุณสร้างภาพเคลื่อนไหวได้อย่างสะดวก คุณจะได้รู้จักวิธีการสร้างภาพเคลื่อนไหวถึง 3 แบบ ตั้งแต่แบบพื้นๆที่เราต้องทำเองทุกอย่าง ไปจนถึงแบบที่สะดวกมากยิ่งขึ้นโดยอาศัยความสามารถของโปรแกรม ซึ่งได้แก่ Frame-by-Frame Animation, Tween Instances และ Animation Symbols เมื่อคุณเข้าใจหลักในการสร้างภาพเคลื่อนไหวเหล่านี้ดีแล้ว จะรู้สึกว่าภาพเคลื่อนไหวนั้นทำได้ง่าย และอยากนำไปใช้เพิ่มความน่าสนใจให้กับเว็บมากยิ่งขึ้น

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

ถ้าต้องการให้ภาพเคลื่อนไหวมีความซับซ้อนมากยิ่งขึ้น เราสามารถใช้ประโยชน์จากเลเยอร์ได้ โดยออกแบบให้แต่ละเฟรมประกอบด้วยหลายๆเลเยอร์ เมื่อมีการแสดงภาพเคลื่อนไหว ทุกเลเยอร์ในเฟรมที่ 1 จะปรากฏขึ้นมา ตามด้วยทุกเลเยอร์ในเฟรมที่ 2 และเฟรมที่ 3 ต่อเนื่องกันไป ด้วยระบบเลเยอร์ คุณจะจัดการกับออบเจ็คได้ดียิ่งขึ้น โดยสามารถแยกออบเจ็คแต่ละชุดไว้คนละเลเยอร์กัน

ภาพเคลื่อนไหวแบบ Frame-by-Frame นี้เหมาะสำหรับภาพเคลื่อนไหวที่ไม่ซับซ้อน หรือมีจำนวนเฟรมไม่มากนัก ซึ่งมีข้อดีคือ คุณสามารถสร้างภาพเคลื่อนไหวได้อย่างรวดเร็ว และสามารถออกแบบออบเจ็คในแต่ละเฟรมได้ตามต้องการ แต่ไฟล์ที่ได้มักจะมีขนาดค่อนข้างใหญ่ และเมื่อต้องการแก้ไข ก็จะต้องทำการแก้ไขทีละเฟรม

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

เนื่องจากเราได้ทราบถึงวิธีการทำงานกับพาเนล Frame มาแล้วเป็นอย่างดี ถึงเวลาที่เราจะทดลองสร้างภาพเคลื่อนไหวแบบพื้นฐานที่สุดกันแล้ว หลักการมีอยู่ง่ายๆว่า เราจะสร้างเฟรมหลายๆเฟรม แล้วใส่ออบเจ็คที่แตกต่างกันลงไปในแต่ละเฟรม สำหรับวิธีการทำนั้นมีหลายแบบ ตั้งแต่การสร้างเฟรมขึ้นเอง ไปจนถึงการใช้คำสั่ง Distribute to Frames เพื่อให้โปรแกรมสร้างเฟรมขึ้นมาให้ แล้วกระจายแต่ละออบเจ็คไปยังเฟรมต่างๆโดยอัตโนมัติ

การสร้างภาพเคลื่อนไหวด้วยวิธีนี้ คุณจะต้องระวังในเรื่องของตำแหน่งออบเจ็คในแต่ละเฟรม ซึ่งในกรณีนี้ควรจะอยู่ตรงกัน นอกเสียจากคุณต้องการให้อยู่คนละตำแหน่งกันจริงๆ เนื่องจากโดยปกติแล้ว พื้นที่เอกสารจะแสดงเนื้อหาเฉพาะของเฟรมใดเฟรมหนึ่ง จึงเป็นการยากที่เราจะจัดตำแหน่งออบเจ็คในแต่ละเฟรมให้ตรงกัน วิธีการหนึ่งที่จะช่วยให้คุณวางตำแหน่งของออบเจ็คก็คือ การใช้ออปชั่น Onion Skinning กำหนดให้แสดงออบเจ็คในเฟรมต่างๆทั้งหมดพร้อมกัน ประกอบกับออปชั่น Multi-Frame Editing คุณจะสามารถคลิกเลือกออบเจ็คในทุกๆเฟรมเพื่อเลื่อนตำแหน่งได้ เสมือนกับอยู่ในเฟรมเดียวกัน

Tip : เลือกออปชั่น Show All Frames ของ Onion Skinning เพื่อแสดงออบเจ็คทั้งหมดในทุกเฟรมขึ้นมาพร้อมกัน แล้วจึงเลื่อนรูปวงกลมให้อยู่ในตำแหน่งที่เหมาะสม

>> Source file (Fireworks PNG)

ถ้าต้องการศึกษาจากไฟล์ต้นฉบับของภาพเคลื่อนไหวนี้ ให้คลิกขวาที่รูปนี้แล้วเลือกคำสั่ง Save Picture as เพื่อเซฟไฟล์นี้ลงในเครื่องของคุณ