Number จาก SourceText โดยไม่ง้อ Plugins

   โดยปกติถ้าจะอนิเมทตัวเลข จะมีปลั๊กอินตัวหนึ่งชื่อ Numbers เอามาใส่ใน Solid ก็จะได้ตัวเลข ที่ปรับโน่นปรับนี่ได้อย่างง่ายดาย....แต่พอดีผมมันพวกไม่นิยมปลั๊กอินน่ะครับ ลองหาวิธีใช้ Text บ้านๆมาอนิเมทกันดีกว่า

   ถ้าใช้ Text Tool สร้างตัวอักษรเปล่าๆ แล้วเปิดดูใน Property ของ Text Layer จะเห็นบรรทัดที่เขียนว่า Text - Source Text อยู่ การจะควบคุมตัวเลขได้ ก็อาศัยใส่ Expression ใน Source Text นี่ล่ะครับ โดยลิงค์ไปที่ Slider Control ที่ใส่เป็น Effect เข้าไป แค่นี้แหละ อนิเมท Slider Control ได้เลย

   ปัญหาจะเริ่มมาตอนที่อนิเมท Slider Control แล้วจำนวนจุดทศนิยมมันมากมายหลายหลักนี่ล่ะครับ

 

ปัญหานี้ Dan Ebbert สอนไว้ง่ายๆคือ ให้ใส่ .toFixed(จำนวนทศนิยม) ลงไป จะได้ Expression ดังนี้

effect("Slider Control")("Slider").value.toFixed(2)

หมายความว่าเราอยากได้จำนวนจุดทศนิยมแค่สองหลัก ง่ายดาย !!!

 

ไม่จบแค่เรื่องทศนิยมแค่นั้น ถ้าอยากได้คอมมาร์คั่นหลักร้อยก็ทำได้ด้วย Expression ยาวหน่อยแต่ก็ใช้ได้

numDecimals = 2;
commas = true;
dur = 4;

s =effect("Slider Control")("Slider").value.toFixed(numDecimals);
 
if (commas){
  decimals = "";
  if (numDecimals > 0){
    decimals = s.substr(-(numDecimals + 1));
    s = s.substr(0,s.length - (numDecimals + 1));
  }
  outStr = s.substr(-s.length, (s.length-1)%3 +1);
  for (i = Math.floor((s.length-1)/3); i > 0; i--){
    outStr += "," + s.substr(-i*3,3);
  }
 outStr + decimals;
}else{
s;
}

ก็จะได้รูปแบบนี้

แรกๆอาจจะงงๆ แต่เดี๋ยวก็ชินครับ Happy Expression นะครับ

Credit : http://www.motionscript.com/design-guide/counter.html