Flipping Like a Pro

flip_FEA



Flipping with simple Math

ใน Tutorial นี้ ผมจะใช้ Expression Script ในการสั่งให้วัตถุ พลิก(Flip) ตามที่ผมต้องการ โดยที่จะสั่งให้พลิกแล้วค่อยๆหยุดลง โดยใช้ความรู้ทางคณิตศาสตร์ง่ายๆที่คิดว่าเราทุกคนต้องเรียนกันมาบ้างแล้วในสมัยมัธยม (และคืนคุณครูกันไปหมดแล้ว) ผมจะอธิบาย คำสั่งแต่ละตัวใน Entry นี้นะคับ ใน Video Tutorial เองจะมีแค่การอธิบายคร่าวๆเท่านั้น

เริ่มที่คณิตศาสตร์ก่อนนะคับ

จากการที่เรารู้ว่า ถ้าเราเพิ่มค่าในการ point กราฟของ sin และ cos กราฟที่ได้จะเป็น คลื่นที่มีค่า จาก 1 ไปหา -1 ไปเรื่อยๆ


ภาพของ Sin คิดจาก Math.sin(time) จะเห็นว่าค่าเริ่มต้นที่ 0


ภาพของ Cosine คิดจาก Math.cos(time) จะเห็นว่าค่าเริ่มต้นที่ 1 (จุดยอดของกราฟ หรือ ค่าสูงสุด)

ใน Expression ของเรา จะใช้ Math.cos นะคับ เพราะการพลิกของเรา ค่าตั้งต้นเป็นค่าสูงสุด เพราะฉะนั้นเราจะกำหนดให้มันเป็นค่าสูงสุด และแกว่งเข้าหา 0


ในส่วนของ Exponential นะคับ เมื่อเรานำมาใช้คำนวน กราฟจะเป็นเช่นนี้คับ


เกิดจาก Math.sin(time)/Math.exp(time) จะเห็นว่าการแกว่งมีน้อยไป เราเลยจำเป็นจะต้องใส่ ตัวคูณ (Multiplier) เพิ่มลงไปนะคับ


เกิดจาก Math.sin(time*6)/Math.exp(time) จะเห็นว่ากราฟมีลูกคลื่นมากขึ้น และนำไปใช้งานได้

คร่าวๆก็ประมาณนี้นะคับ น่าจะพอเห็นภาพว่าค่าตัวเลขมันแกว่งขึ้นลงได้ยังไง และวิ่งเข้าหา 0 ได้ยังไง



ส่วนของ Expression Script นะคับ

จากที่เราเห็นใน Video นะคับ Expression Script ที่ว่าคือ


freq=1.6;
decay=2.4;
value*Math.cos(time*2*Math.PI*freq)/Math.exp(time*decay)




ผมจะอธิบายทีละส่วนนะคับ

freq=1.6;

เป็นการกำหนดตัวแปรของ ความถี่ หรือ Frequent มีหน้าที่เป็นตัวบอกว่าการสะบัดหรือพลิกเป็นจำนวนกี่ครั้งต่อวินาที หรือเราอาจจะเรียกตัวนี้ว่า Oscillation ก็ได้คับ

decay=2.4;

ตัวแปรนี้เป็นตัวแปรที่เข้ามาเพิ่มค่าในส่วนของ Exponential Decay ทำให้การพลิก (Animation) หยุดลง ช้า หรือ เร็ว กว่าปกติ
โดยที่ค่าตั้งต้นจะอยู่ที่ 1 เพราะฉะนั้น ถ้าเราใส่เป็น 0.5 จะทำให้การพลิกช้าลง ถ้าเราใส่ 2 จะทำให้เร็วขึ้น

value*Math.cos(time*2*Math.PI*freq)/Math.exp(time*decay)

Value หมายถึง ค่าตั้งต้นที่มีอยู่แล้วใน Attribute อันนั้นนะคับ เช่นตัวนี้ เราตั้งค่า x rotation ไว้ที่ 80 เพราะฉะนั้น value จะมีค่า 80 คับ

Math เป็นการบอกว่าใช้ function ทางคณิตศาสตร์ของ Javascript ต้องเป็น M ตัวใหญ่เสมอนะคับ

ส่วนของ Math.cos จะเป็นการคิดค่า cosine ของเวลาที่เพิ่มขึ้นเรื่อยๆ

time คือค่าเวลา เพราะเวลาเดินไปข้างหน้าเรื่อยๆ (เพิ่มขึ้นเรื่อยๆ) จึงเหมาะในการนำมาใส่แทนค่าที่เราต้องการให้เพิ่มขึ้นเรื่อยๆตามเวลาคับ

2*Math.PI ก็คือค่า 2PI (สองพาย) PI ในที่นี้ก็คือ 3.14… ซึ่งใน Javascript จะมี Function นี้ให้เราเพื่อให้ได้ค่า PI ที่ถูกต้อง สาเหตุที่ต้องใส่ตัวนี้ลงไปเพราะ Math เป็นคำสั่งของ Javascript และ Function ตรีโกณมิติของ Javascript ต้องการหน่วยเป็น Radians จึงต้องใช้ 2PI มาร่วมในการคำนวน

*freq เป็นการ คูณความถี่ เพื่อที่จะกำหนดจำนวนรอบการพลิกต่อหนึ่งวินาที (รอบ Cycle ใน 1 วินาที) freq เป็นตัวแปรที่ถูกเรียกใช้ ไม่ใช่คำสั่งนะคับ

Math.exp คือการคำนวน Exponential Decay ให้ค่ากราฟของ cosine ลดลง (เข้าหา 0) โดยอิงจาก เวลา*decay

*decay คือการ คูณตัวแปรที่จะเพิ่มหรือค่าของเวลาที่ใช้ใน Math.exp เพื่อควบคุมความสั้นยาวของ Animation

หากมีข้อสงสัย ทิ้งคำถามไว้ใน Comment ได้เลยนะคับ ผมยินดีที่จะตอบให้นะคับ ขอบคุณคับ :)

Link สำหรับผู้ที่สนใจ

Download ‘Flipping Like a Pro’ // 154 MB

Founder of chilltorial.net, Motion graphic designer who loves to share ideas and knowledges for the better of our community.

23 Comments

  • Reply April 14, 2011

    Soetheby

    สำหรับความรู้ตรงนี้นะคับ สามารถนำไปประยุกตร์ใช้กับ การสร้างแรงโน้มถ่วงหลอกๆใน After Effect, การทำ Spring, การทำวัตถุตกกระทบพื้นแล้วยืดหยุ่นเหมือนตัวการ์ตูน หรือ การแกว่งของนาฬิกาลูกตุ้ม ก็ทำได้คับ

    ใช้หลักการ ตรีโกณ และ Exponential นี้แหละคับ เอาไว้ถ้าเป็นไปได้ จะทำ การตกของตัวหนังสือให้ดูกันอีกทีนะคับ :D ~*

  • Reply April 19, 2011

    OATSUMOTO

    เป็นประโยชน์มากเลยครับ ทำติวตอเรียลออกมาอีกเรื่อยๆนะครับ

  • Reply April 20, 2011

    ทิดโอ๋

    ขอบคุณครับ ขอเอาไปลองทำหน่อยนะครับ

  • Reply April 21, 2011

    cuffsinter

    ได้ความรู้อีกแล้ว ขอบคุณมากๆครับ

  • Reply April 23, 2011

    arty-oh

    งง ฮ่าๆ

  • Reply July 30, 2011

    oatto

    ขอบคุณมากครับผม ไม่ทราบว่ารับงานทำพวกนี้หรือป่าวครับ

    • Reply July 30, 2011

      Soetheby

      รับฟรีแลนซ์ด้วยน่ะคับ แต่ต้องลองคุยรายละเอียดงานกันก่อน :)

      http://chilltorial.net/?page_id=51

      รายละเอียดผู้สอนผมจะลงไว้ในหน้า Host นะคับ ลองติดต่อได้ ~*

  • Reply July 31, 2011

    oatto

    ขอบคุณครับยินดีมากเลยครับที่ได้เจอ คนแบ่งปันสิ่งดีๆแบบนี้ครับ

  • [...] Tutorial “Flipping Like a Pro” นะคับ [...]

  • Reply February 23, 2012

    TUNG

    ถามอะไรหน่อยครับ พอดียังงงๆยุว่า ไอตรงที่จะให้เรา ใส่ค่าผมอยากพิมลงไปทำยังไงหรอคับ – - มันไม่มี ลูกศรเปิดให้อะครับ

    • Reply February 23, 2012

      Soetheby

      หมายถึงตรงที่ใส่ Expression Script เหรอคับ? กด alt ค้างไว้แล้วคลิกที่ StopWatch คับ (ตรง นาฬิกาจับเวลา ที่ใช้สร้างคีย์เฟรม) ~*

  • Reply February 23, 2012

    TUNG

    พี่ครับผมสร้าง Solid ขึ้นมา แบลคกาว มันไม่เปลี่ยนสีอ่ะ มันคงเปนสีดำยุเลยอ่ะครับ ขอบคุณมากครับ

    • Reply February 23, 2012

      Soetheby

      สีของ Solid กำหนดจาก Solid Setting ได้เลยคับ หรือจะใช้วิธีลัดๆแบบผม ก็คือ Effect > Generate > Fill

      จริงๆลองไปดู Basic ให้เข้าใจก่อนดีกว่ามั้ยคับ :) ~*

      • Reply October 19, 2014

        Zachary

        Stay inofamrtive, San Diego, yeah boy!

  • Reply September 1, 2012

    gap

    ผมใช้ cs6 ทำไมใส่ค่าแล้วมันerror ตลอดเลยครับ

    • Reply September 1, 2012

      Soetheby

      Error อะไรตรงไหนคับ ขยายความด้วยคับ :) ~*

  • Reply December 3, 2012

    JAck

    พี่ ครับ จะทำยังไงให้พลิกตอนกลางๆคลิปได้ ครับ ?

  • Reply January 26, 2013

    Same

    สุดยอดจริงๆ จะติดตามเรื่อยๆครับ

  • Reply February 17, 2013

    nus

    Expression Script ตัวที่2 ผมใส่แล้วมัน Error ครับ (time-start)นี้ไม่ทราบว่าใส่ตรงไหนครับ

    • Reply February 18, 2013

      Soetheby

      ตอน Copy Script ไปใช้จากใน Website ให้เราลองเช็คดูคับ ว่ามันตรงกันมั้ย
      ปกติถ้าเรา Copy มาจาก WordPress มันจะติด ? มาด้วยเพราะค่ามันไม่ตรงกันกับใน AE
      ให้เราลองแก้ให้เป็นเหมือนใน Entry นี้ดูคับ แค่ลบ ? แล้วก็กด Enter เว้นบรรทัดให้เหมือนกันก็น่าจะใช้ได้คับ :D ~*

  • Reply February 19, 2013

    nus

    ได้แล้วครับอาจารย์แต่ยังไม่เนียนครับ ขอบคุณมาก

  • Reply December 23, 2013

    mr.paramasin

    สร้าง Flipping เรียบร้อยทุกอย่างเรียบร้อยนะครับ แต่ทีนี้ มีมีแบล็กกราวดำ อ่ะครับ ติดมากับตอนทำ Flipping เลยทำให้ไม่เห็นพื้น Solid เลเยอร์หลังสุดที่กำหนดไว้เลยอ่ะครับ เกิดจากอะไรอ่ะครับพี่

  • Reply December 23, 2013

    mr.paramasin

    ได้ละครับ ลืมเปลี่ยน view 55

Leave a Reply