文字が筆順通りに塗られていくアニメーション at AEP Project

text0
シェイプレイヤーを使って、文字が筆順通りに塗られていくアニメーションの作り方を紹介します。
ロゴのアニメーションとかにも使えます。
正直、使える場合が結構限定されますが、場合によっては大分楽ができます。

この手法をオススメするケース：

文字の太さが一定
画数が少ない
カーブ箇所の角度を正確に描きたい
ベクターで描きたい
ストロークにモーションブラーをつけたい
描きたいラインの中央線のデータがある、もしくは中央線が作り易い

シェイプレイヤーの基本的な部分についてはこちらを参照して下さい。

□　実際の手順
1. 塗りたい文字をコンポジションに配置します。（テキストレイヤーでもIllustratorデータでも可）
2. どのレイヤーも選択されていない状態にします。
3. ペンツールで、文字の中央にパスを筆順通りに引いていきます。
text1

レイヤーが選択されていない状態でペンツールを使うと、その時点でシェイプレイヤーが作られます。
次の画に行く時は、一旦下のレイヤー名部分「シェイプレイヤー１」をクリックすれば、パスが途切れます。
この時点では塗りや線は不要なので、気になるようなら上のバーでオフにします。

4. シェイプレイヤーのコンテンツ内を上から「シェイプ１～シェイプ＊(総画数)」になるように並べ替えます。
5. シェイプレイヤーのコンテンツの最後に、「線」「パスのトリミング」を追加します。
text1_2

6. 「パスのトリミング」>「複数のシェイプをトリム」を「個別に」。
7. 「パスのトリミング」>「終了点」に、0% → 100%になるようにキーフレームを打ちます。
text2

8. テキストのレイヤーの下にシェイプレイヤーを持ってきて、トラックマットを「アルファマット」にします。
text3

9. 「線」の太さを書体に合わせ、パスの位置を調整します。

text4

最後サラッと書きましたが、場合によってはこれが面倒だったりします。
（でもこの手のアニメーションは綺麗に仕上げようとするとどっちみち面倒なので･･･。）
方法の１つとして参考になれば幸いです。

ダウンロード

タグ : シェイプレイヤー[タグを追加する]

この記事の投稿者について：gupon

映像が好きです。

guponのウェブサイト

guponの投稿一覧

この投稿者のTwitter @gupon

この記事に対する 8 の反応があります

この投稿への反応のRSS トラックバックURL Twitterでつぶやく（URLを挿入して投稿画面に飛びます）

1 AE-USERS 4月 11th, 2009 at 12:00

新着記事 : 文字が筆順通りに塗られていくアニメーション http://tinyurl.com/dfjquz
2 Shiramine Keisuke 5月 5th, 2009 at 01:04

文字が筆順通りに塗られていくアニメーション | AEP Project http://tinyurl.com/ct78kd
3 @MineAP 5月 5th, 2009 at 10:04

文字が筆順通りに塗られていくアニメーション | AEP Project http://tinyurl.com/ct78kd
4 perosan21 9月 24th, 2009 at 05:51

AE初心者です。
http://www.tavo.es/v2/view.php?vid=../motion/kiariders.mov&w=480&h=380&title=KiaRiders
この動画のように線やら絵やらがうにょうにょだすには、どうしたら良いのでしょうか？
5 llcheesell (ちーず) 9月 24th, 2009 at 20:09

>Perosan21さん
空間に線やら絵を配置した後、マスクで表示させていくという流れでしょうね。この記事の方法は向いていないと思います。
そして結構手間のかかる作業です。

また、線の立体感を出すのは標準の機能では難しいので、上記の動画と同じようにしたいならばTrapcodeのサードパーティープラグインや3Dソフトの使用が必要だと思います。頑張ってください！
6 Ohgochi 1月 28th, 2010 at 13:10

@pgcafe これか？ http://bit.ly/cibmDL 筆順アニメデータってのも、幾つかありますねぇ
7 三鷹プログラマーズカフェ 1月 28th, 2010 at 13:15

RT @Ohgochi : これか？ http://bit.ly/cibmDL 筆順アニメデータってのも、幾つかありますねぇ