Bouncing Rope with Expression

bouncing_rope




Bouncing Rope with Expression

เริ่มต้นเดือนแห่งความรักไปกับ Tutorial ที่แสนจะน่ารักของเรานะคับ เป็น Tutorial ที่ดัดแปลงมาจาก Tutorial ของ Mathhew Butler ที่สอนแบบ Premium (คิดเงิน) นะคับ ซึ่งจะเน้นหนักไปที่ Expression Script และ คณิตศาสตร์ แต่ไม่ได้ยากอย่างที่คิดคับ

จากที่ผมเคยสอนใน Tutorial “Flipping Like a Pro” นะคับ เพื่อนๆก็คงจะเข้าใจในเรื่องของ กราฟ กันขึ้นมาบ้างนะคับ มาใน Tutorial นี้ก็ยังคงเป็นแนวความคิดเดิม เพียงแต่เรานำมันมาใช้ในมุมใหม่ๆคับ


มาพูดกันถึงเรื่องหลักๆก่อนนะคับ Script ในงานนี้ถูกแบ่างออกมาเป็น 3 ส่วนหลักๆนะคับ คือ หัวใจ, เชือก และ ตัวหนังสือ ซึ่งแต่ละส่วนก็จะมีการทำงานที่แยกจากกัน แต่หลักการเดียวกันทั้งหมดคับ


เรามาดูที่ หัวใจ กันก่อนนะคับ หัวใจของเราจะมีการใส่ Script ทั้งหมด 2 ส่วนด้วยกัน คือ Anchor Point กับ Rotation

ส่วนแรก ใส่ที่ Anchor Point นะคับ

freq = 1.5;
amplitude = -400;
decay = 2.5;
t = time-marker.key(1).time;
posCos = Math.abs(Math.cos(freq*t*2*Math.PI));
y = amplitude*posCos/Math.exp(decay*t);
value-[0,y]

มาดูกันทีละบรรทัดนะคับ

freq = ความถี่คับ (Frequency) ยิ่งมีค่ามาก ยิ่งแกว่งบ่อยขึ้นคับ (Oscillation)
amplitude = ขนาดของการเปลี่ยนแปลงที่เกิดจากการแกว่งตัวคับ ยิ่งมีค่ามาก ยิ่งแกว่งแรงขึ้นคับ
decay = การสลายของแรงคับ ยิ่งมีค่ามาก ก็จะหยุดแกว่งเร็วขึ้นคับ (Exponential Decay)
t = เวลา คับ โดยที่ time คือ เวลาจริงตาม Time Indicator ส่วน marker.key(1) เป็นเวลาที่เราตั้ง Marker ตัวที่หนึ่งไว้คับ ค่าตรงนี้มีส่วนทำให้ Script เริ่มทำงาน (นับ0) จากจุด Mark คับ
posCos = Math.abs(Math.cos(freq*t*2*Math.PI)) อันนี้เป็นการใช้ฟังก์ชั่นมาคำนวณเส้นกราฟให้เราคับ โดยที่มี Math.abs เป็นตัวทำให้เป็นค่าสัมบูรณ์คับ (Absolute Number)
y = อันนี้เป็นการนำเอากราฟมาคิดเข้ากับ Exponential Decay และ Amplitude คับ
value-[0,y] บรรทัดนี้เป็นการนำไปใช้งานจริงคับ คือ value = ค่าตั้งต้นของสิ่งที่เราใส่สคริป ในที่นี้คือ Anchor Point คับ -[0,y] หมายถึง ลบด้วยค่า y ที่คิดได้จากฟังก์ชั่นด้านบนคับ

ส่วนต่อมาเป็นส่วนที่ใส่กับ Rotation นะคับ

freq = 1.5;
amplitude = 60;
decay = 2;
t = effect(“Slider Control”)(“Slider”);
value + amplitude*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t)

t ในที่นี้เราให้เท่ากับ Slider นะคับ ที่เราทำการ Keyframe ไว้คับ
value + amplitude*Math.sin(freq*theTime*2*Math.PI)/Math.exp(decay*theTime) ก็คล้ายๆกับการเอา สามบรรทัดสุดท้ายของ Script ใน AnchorPoint มารวมไว้ด้วยกันคับ



สำหรับ เชือกนะคับ เราจะใส่ Script แยกกันนะคับ
โดยเริ่มจาก Slider ก่อนคับ

freq=1.37;
amp=-700;
decay = 1.9;
t = time-marker.key(1).time;
amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t)

เราใช้ Math.sin นะคับ เพราะว่า Math.sin มีค่าเริ่มจาก 0 ซึ่งเราจะให้เชือกตึง ก่อนที่จะสะบัดคับ

Script ที่ใส่ใน Tangent ของแต่ละแขนของ Bezier Warp นะคับ (มี 4 แขนที่ต้องใส่)

value+[0,effect("Slider Control")("Slider")]

ก็คือ นำค่าตั้งต้น มาบวกกับค่าที่คิดได้จาก Slider คับ


ส่วนสุดท้ายเป็น ตัวหนังสือนะคับ

Ancor Point นะคับ

freq = 1.5;
amplitude = -200;
decay = 2.3;
t = time-startTime;
posSin = (Math.sin(freq*t*2*Math.PI));
y = amplitude*posSin/Math.exp(decay*t);
value-[0,y]

จะเห็นว่าเราใช้ time – startTime นะคับ หมายถึงเราเปลี่ยนให้เวลาเริ่มที่จุดเริ่มต้นของ Layer คับ นอกจากนี้เรายังใช้ Math.sin ด้วยคับ

Rotation นะคับ

freq = 1.5;
amplitude = 15;
decay = 2;
t = effect(“Slider Control”)(“Slider”);
value + amplitude*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t)

เหมือนเดิมคับ ใช้ Slider มาช่วยควบคุมเวลา

สุดท้ายเป็น Scale นะคับ ที่เราต้อง Animate ขึ้นมาให้ด้วย

freq = 1.5;
amplitude = 100;
decay = 2.3;
t = time-startTime;
scaSin = Math.abs(Math.sin(freq*t*2*Math.PI));
s = (amplitude*scaSin/Math.exp(decay*t));
value + [s,s]

เราใช้ Sin นะคับเพราะเราขยายขนาดขึ้นจาก 0 โดยที่ผมใส่ Math.abs ไปด้วยเพราะต้องการใช้แต่ค่าบวกเท่านั้นคับ
ในส่วนของการนำไปใช้(บรรทัดสุดท้าย) value+[s,s] หมายถึงบวกทั้งค่า x และ y นะคับเพื่อให้มันขยายขนาดเท่าๆกันทั้งสองแกนคับ



อาจจะดูงงๆนะคับสำหรับ Tutorial นี้ เพราะเรื่องที่พูดถึงนั้นไม่ใช่เรื่องง่ายๆของมือใหม่ แต่ก็ถือว่าไม่ได้ยากที่จะทำความเข้าใจถ้าเราพยายามคับ :D


ต้องขอขอบคุณ คุณ Matthew Butler นะคับที่ทำเทคนิคนี้ขึ้นมา หากเพื่อนๆมีคำถามหรือสงสัยอะไร Comment ได้เลยคับ :)



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

Vimeo’s Direct Link of ‘Bouncing Rope with Expression’
Matthew Butler’s Website

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

10 Comments

  • Reply February 2, 2012

    หนุ่ม

    สุดยอดซับซ้อนมากเลยครับ

  • Reply February 2, 2012

    ผู้ฝึกหัด

    ของผมเวลาใส่ Scrip เข้าไปแล้วขึ้นว่าแบบนี้ครับ

    after effect warning : Syntax error Expressiondisabled

    Eror occurred at line 4
    Comp: “Comp1″
    Layer: 1 (“h”)
    Property: “Anchor Point”

    ทั้งๆ ที่ Add marker ก็ยัง eror อยู่ดีไม่ทำงาน

  • Reply February 3, 2012

    เชิร์ช

    ผมรู้แล้วครับ ในLine 4 กับ Line7 มันผิดพลาดที่ ขีดครับ ต้องลบขีดหน้าคำว่า >> – marker.key(1).time; << ลบ – ออกแล้วใส่ – แทนครับ ที่ Line7 ก็เช่นกัน ครับ อิอิ

    • Reply February 3, 2012

      soetheby

      ขอบคุณมากคับ ทางเราแก้ไขใน Entry ให้แล้วคับ

  • Reply February 12, 2012

    Matthew Butler

    :)

    • Reply February 12, 2012

      Soetheby

      Thanks, for creating this wonderful technique. :D ~*

  • Reply February 14, 2012

    bird

    ไม่มีไฟล์ ที่อิมพอตให้ลองด้วยหรอครับ

  • Reply February 24, 2012

    JacK MaN

    ฮาตรงที่ “ทำใจดีๆนะครับ” 5555

  • Reply January 13, 2013

    wisarn

    ขอบคุณครับ :)

  • Reply June 21, 2014

    Arm

    สวัสดีครับ ก่อนอื่นเลยต้องขอบคุณมากครับที่ทำติวเตอร์ดี ๆ แบบนี้ขึ้นมา คือผมอยากจะสอบถาม

    ถ้าเราอยากให้มันเด้งกลับขึ้นไป มันจะเป็นจะเป็นไปได้มั้ยครับ(ในส่วนของพาร์ทที่มีเชือกกับกล่องของขวัญเด้งลงมา) ไม่ทราบว่าเราจะเพิ่มสคริปให้มันเด้งกลับขึ้นไปได้หรือป่าว ถ้าได้รบกวนแนะนำด้วยครับ หรือมีวิธีอื่นแนะนำได้เลยครับ ขอบคุณมากครับ

    ^_^

Leave a Reply