こどもスナップ |初心者のための写真が上手くなるブログ

こどもの写真をキレイに撮ろう! ニコン一眼レフとディズニーが大好きなカメラブログ

MENU

AfterEffectsでスライダー制御を使って数値が増える動きを作る

f:id:hechima_papa:20180209175818p:plain

どうも、へちまです。

前回はエクスプレッションをソーステキストに入れてあげて簡単なカウントアップタイマーを作ってみました。

そして今回は一気に数値が増加する動きを作ってみましょう。

youtu.be

動画にあるように「0」から5秒かけて「100」まで増えるという、数値が短時間で一気に増加する動きを作ってみます。

 

バージョンはCS6で作成しております。

 

エクスプレッションにスライダー制御を使う

テキストレイヤーを作成

テキストでまず「0」と打ってみます。

f:id:hechima_papa:20180209173211p:plain

テキストレイヤーをどセンターにポジションしたい場合は

 option + command + home でアンカーポイントをレイヤーのセンターへ

 command + home でレイヤーを全体のセンターにポジションします。

 

ちなみにアンカーポイントをセンターにするショートカットはCC以降で実装されたものなので、CS以前のバージョンでは使用できません。

 

スライダー制御

「0」のテキストレイヤーのエフェクトにスライダー制御を挿入します。

f:id:hechima_papa:20180209192046p:plain

 

テキストレイヤーのエフェクトに「スライダー制御」が挿入されたので、0秒に「0」を5秒に「100」のキーフレームを打ってみます。

f:id:hechima_papa:20180209192657p:plain

これで5秒かけて0から100まで変化する値が出力される状態になったので、この出力された値をテキストレイヤーのソーステキストに挿入してあげます。

 

ソーステキストにエクスプレッションを挿入

ソーステキスト左横のストップウォッチをoption + クリックしてエクスプレッションを記入できる状態にします。

f:id:hechima_papa:20180209173341p:plain

 

上記で作ったスライダー制御をこのエクスプレッションに挿入します。

f:id:hechima_papa:20180209193714p:plain

 渦巻きマークをクリックしたままスライダーまで持って行きます。そうするとソーステキストにeffect("スライダー制御")("スライダー")が記入されます。

 

小数点以下をバッサリ切る

このままだと小数点以下まで表示されてしまうので、小数点以下を切って整数にします。

f:id:hechima_papa:20180209173601p:plain

Math.floor()で小数点以下を切り捨て

Math.floor()は小数点を切り捨てて最も近い小さな整数を出力する効果があります。

f:id:hechima_papa:20180209194336p:plain

上記のように記入してみましょう。

すると小数点以下がバッサリ切られて、整数に整えられます。

 

まとめ

スライダー制御はその名の通り、数値をスライドさせるという「0から100へ」のような動きを簡単に行うことができるエフェクトです。

今回やったことは、要約すると「5秒かけて0から100へスライドさせた値」をソーステキストに流してあげただけで、すごく簡単な方法です。そして小数点以下まで表示されてしまうのを「Math.floor()」を入れてあげて、小数点以下を切ってあげました。

hechima-papa.hatenablog.com

同じくエクスプレッションを使った簡単なタイマーの作り方を記事にしています!

 

AfterEffectsのオススメ書籍

僕は現在、大手ポストプロダクションで番組編集の仕事に携わっております。もちろん僕が編集した映像も公共の電波にとっております。

全くの『0』の状態から触った頃の無いAfterEffectsを手取り足取り教えてくれたのはこの一冊

基本操作やショートカットキー、マスク抜きなどAfterEffectsの基礎の基礎がこの一冊に全て書いてあります。少々お値段は高いですが学校に通うよりかは全然安いと思います。ちなみに僕はこの書籍一冊だけしか本を買っていません。
基礎はこの本から全部教わりました。
AfterEffectsは興味があるけど操作が難しいと思いの人は、この本をおすすめします。