今回は文字をパーツ分解して動かすテキストモーションを作ってみたので紹介します。
完成形
文字分解のテキストアニメーション。シンプルに透明度とY座標の移動です。
文字の分解は画像編集
まず最初に行うのは画像編集ソフトで最終的なレイアウトを決めることです。テキストにスクリプトをかけて分解するわけではないので、細かな修正がききません。
そのかわり、綺麗に分解出来てエフェクトやモーションなどは割と自由にできます。
パーツはわかりやすく分解しました。もっと細かく分解もできますが、それに合わせて労力も倍増します。
パーツ分解のポイント。上画像のように全体として保存すると、オブジェクトを置いたときに再度レイアウトする必要がなくなります。今回作っているのはこちらですね。
反対にレイアウトを流動的にしたい場合や、後からレイアウトしたい場合は下画像のように文字の大きさでトリミングするほうがいいかもしれません。
個別オブジェクトだからできる工夫
文字を分解すると画像のように赤と緑の部分に分けられます。それぞれ別オブジェクトなので、色を変えたり動きを変えたりすることができます。
分解した文字を移動させる際には動きが大きく見えるように工夫しました。片方が下から登場するなら、もう一方は上から登場のように互いに逆方向から来るようにすることで動きを大きく見せています。
AviUtl、移動の方向とモーション
こんな感じ。
各文字の登場では、その位置にも工夫しました。開始位置が揃って平行に近くなると動きが単調になってしまうので、画像のように開始位置をバラバラにして動きにメリハリをつけています。
透明度やY座標の移動はメディアオブジェクトで行っています。メディアオブジェクトで出せば中間点を気にすることなく調整できるのでとても便利です。
AviUtl、中間点に邪魔されないフィルタ効果の追加
Y座標の移動方法は93さんのマルチベジェ軌道で調整しました。手動で調整が大変でしたらUndoFishさんのイージングスクリプトを利用してもいいですね。
AviUtlのイージングをカスタマイズ、マルチベジェ軌道
AviUtlで必須のスクリプト、イージング(トラックバー版)
文字分解はちょっと手間がかかりますが、部分的に色を変えるデザインも素敵ですし、点を花やハートなどのオブジェクトに置き換えたりもできます。タイトルロゴのアニメーションなどにぴったりだと思います。
いかがだったでしょうか。
見た目のわりに地味な作業が多いですね。テキストオブジェクトではなく画像を使用しているのでPCへの負荷も低いです。
文字を分割したテキストアニメーション、機会があれば是非試してみてください。