「Animate」トゥイーンに緩急を加えてみよう

今回はAnimateで、緩急を使ったテキストのアニメーションを作成してみたいと思います。


ビュンっとアニメーションで出てくるテキストになるわけですが、どのようにやれば、緩急のあるアニメーションができるでしょうか。

最初に、テキストを入力して、キーフレームを追加し、トゥイーンで横から現れるタイトルを作ってみます。

10フレームのトゥーンを作成する

開始点のテキストの位置

終了点のテキストの位置


以上のように、簡単にトゥイーンでアニメーションを作成しました。このままでは、定速で横から現れるだけで、「緩急」はありません。

それでは、「緩急」をつけてみましょう。


エフェクトから設定を選択する

緩急を追加する方法として、一番簡単な方法かもしれません。

タイムラインでキーフレーム間のトゥイーンを選択し、プロパティにある「トゥイーン」の「エフェクト」にある「Classic Ease」と表示されている箇所をクリックします。

予め用意されたエフェクトを選択できる

ダイアログが開き、予め用意されている緩急を選択することができます。

項目をダブルクリックして適用する


ダイアログには、グラフが表示され、どのようにアニメーションするのかが表示されていますが、おそらく見ても、わかりにくいと思います。

実際に、選択してどのようにアニメーションするか確認したほうが早いでしょう。

さらに項目が分かれている


適用方法は、ダイアログの左側にある「項目」をダブルクリックするだけです。上の画像のように、ダイアログの項目によって、さらに項目が表示されます。


Classic Easeの値を変更する

緩急を加える方法として、AnimateがFlashと言う名前で呼ばれてた頃からある方法です。

先ほどの「エフェクト」に、ペンのアイコンがあり、さらに「0」と値が表示されていますいる箇所があります。この値を「-100」と変更します。

値(-100~100)を変更する


一旦これで、再生ボタンをクリックし、アニメーションさせてみましょう。

値「-100」にすることで、横から出てくるテキストが遅れて出てくるようになったかと思います。また、「Classic Ease」が「Classic Ease-In」となっているかと思います。

逆に、値を「100」にすると、「Classic Ease-Out」となり、「Classic Ease-Out」の場合は、テキストが横から素早く表れ、ゆっくり止まります。

ここまでは基本的な緩急の表現となります。


カスタムイージングで緩急を変更する

先ほどは値を変更するだけで、緩急をつけることができる説明をしましたが、ペンのアイコンでは「カスタムイージング」という設定を変更するダイアログを開くものです。

ペンのアイコンをクリックする


「カスタムイージング」では、より詳細に緩急の設定を変更することができます。

カスタムイージングで緩急を加える


カスタムイージングの操作方法

斜めに伸びた線の上をクリックすると、Illustratorのアンカーポイントのようなもの点が追加され、さらに2本の線の長さや位置を動かすことで、変化を加えることができます。

角度と位置を動かす


最初に説明した「エフェクト」の項目にある緩急のプリセットを参考に、変更してみるのが良いでしょう。


カスタムイージングの保存

カスタムイージングの変更ができると「保存して適用」のボタンが有効化されるので、クリックして適用させます。

残念ながら、保存した「カスタムイージング」は、別のファイルで使用することはできません。作成したファイルのみで使用可能です。


保存したカスタムイージングの削除

作成した「カスタムイージング」を削除するには、「エフェクト」の「Custom」に表示されるので、トゥイーンにダブルクリックして適用してから、「カスタムイージング」を開くと、「削除」ボタンが有効化され、クリックして削除できます。



キーフレームを追加して緩急を加える

最初に作成したキーフレームでは、始点と終点の2つのキーフレーム間をアニメーションさせるものでしたが、始点と終点の間にさらにキーフレームを追加することで、緩急を表現することもできます。


オニオンスキンを有効化する

最初に、以下の画像のように、タイムラインの上部にある青い箇所の「オニオンスキン」を有効化すると、連続的に表示されることで、アニメーションの過程がわかるようにします。

オニオンスキンを有効化して動作確認できる

連続したイメージは、重なりが強い場合、アニメーションでは変化がない箇所になります。重なりがない場合、アニメーションでは変化が強い箇所になります。

オニオンスキンは必須ではありませんが、このような方法で動きを確認することもできます。


キーフレームを追加する

キーフレームを追加して、緩急を加える場合、ちょっとした工夫が必要があります。

キーフレームを開始位置近く追加する

上の画像のように、開始点から少し離れた位置にキーフレームを追加します。


追加したキーフレームの位置を変更する

次に、上の画像のように追加したキーフレームを終了点に近い位置に移動させます。キーフレームはクリックしたまま動かすと、位置を変更できます。


オニオンスキンを有効化していると、以下のように表示され、緩急が加わったのがわかります。

キーフレームを追加して緩急を加えた

上の場合、最初はゆっくり横から表示され、最後は早く止まります。


今回は、トゥイーンで緩急を使う方法は、テレビアニメの緩急と比べ、少々チープだと感じる方もいるかもしれません。しかし、それだけテレビアニメのような緩急は、凄いテクニックだということが、おそらくわかるのではないでしょうか。



人気の投稿記事