「Animate」テキストをフェードインする方法

Animate CCで、テキストをフェードインさせて表示させるアニメーションを作る方法を説明します。

ここで言う「フェードイン」とは、何も表示されていないところに、フワッと表示させるようなアニメーションを言います。

今回はテキストでフェードインのやり方を説明していきますが、テキストに限らず、グラフィックもフェードインにすることができますので、覚えておきたいところです。

テキストをシンボル化する

最初に「編集画面」でテキストツールを使って、テキストを入力し、シンボル化させます。

テキストを入力して、シンボル化する

テキストを入力後、テキストを編集画面で選択したまま、ツールバーにある「修正」から「シンボルに変換」をクリックします。

「修正」→「シンボルに変換」をクリック

シンボルに変換をクリックすると、ダイアログが表示されます。

種類をグラフィックにする

今回はシンボルの種類を「グラフィック」にします。「シンボル１」と表示された「名前」は変更しませんが、後々のことを考えて、名前を付けるようにしましょう。

次は「タイムライン」での編集になります。

タイムラインでキーフレームを追加する

先ほど編集画面でテキストを入力しましたが、入力前のタイムラインでは、以下のように何もない状態になっています。

テキストを入力する前のタイムライン

編集画面でテキストを入力すると、タイムラインにキーフレームが追加され、以下のようになります。

テキストを入力後のタイムライン

編集画面でテキストをシンボル化した後、タイムラインの10フレーム目を選択し、右クリックして、「フレームを挿入」をクリックします。

10フレームへ移動してフレームを挿入する

下のように、最初のキーフレームが、10フレームまで延長されました。

フレームが延長される

さらに、延長されたフレームの終点（10フレーム目）を選択し、右クリックして、「キーフレームの挿入」をクリックします。

延長されたフレームの終点でキーフレームを挿入する

以下のように、10フレーム目に新たにキーフレームが追加されます。

キーフレームが挿入された

ここまでで「トゥイーンを作成」する準備ができました。

トゥイーンを作成してアニメーションさせる

１フレーム目にあるキーフレーム（始点）から、10フレーム目のキーフレーム（終点）の間に「トゥイーン」を作成していきます。

トゥイーンとは、キーフレーム（始点）とキーフレーム（終点）の間を、Animateが一定の条件の元、補間してアニメーションしてくれる機能です。

（通常、アニメのような1フレーム単位でのアニメーションでは使用しません。）

クラシックトゥイーンを作成する

タイムラインのキーフレーム（始点と終点）の間を選択します。（中間であれば、どこでも構いません。）

タイムラインの中間で右クリックし、「クラシックトゥイーンを作成」をクリックします。

キーフレームの始点と終点の間にクラシックトゥイーンを作成する

上の画像のように、「クラシックトゥイーンを作成」をクリックすると、キーフレーム（始点から終点手前）の色が下の画像のように変化し、「→」が表示されます。

クラシックトゥイーンが作成された

これで、トゥイーンを作成することができましたが、見た目では何も変化はありません。

トゥイーンを作成する際は、以下の注意点に気を付けてください。

トゥイーンを作成する際の注意点

トゥイーンを作成する際に、始点と終点のキーフレームが同じ状態である必要があります。

次の場合、「意図したとおりのトゥイーン」は作成できません。

• 始点にあるグラフィックがシンボル化されているが、終点はシンボル化されていない。
• 始点にはグラフィックが複数あるが、終点は一つだけ。

トゥイーンを作成する前に、シンボル化しておき、キーフレーム（終点）を追加するようにしましょう。

キーフレームを透明にする

ここまでは、トゥイーンを作成しても何も変化がない状態ですが、「タイムライン」で最初のキーフレームに移動します。

次に「編集画面」でシンボル化されたテキストを選択します。

最初のキーフレームを選択した状態にします。

シンボル化されたテキストを選択したまま、ツールバーにあるウィンドウから「プロパティ」をクリックしてください。

「プロパティ」ウィンドウ内に、以下のように「カラー効果」と言う項目があるので、「アルファ」を選択します。

プロパティ・ウィンドウを開き、カラー効果をアルファに変更する

アルファを選択すると、以下のように「不透明度」を変更することができます。

アルファを０％にする

このアルファの変更は、シンボル化されていないので使用できませんので、注意してください。シンボル化せずに、透明度を変更することもできますが、ここでは説明を省かせていただきます。

上の画像では、「不透明度」が０％なので、見えない状態になっています。

編集画面では以下のようになります。

シンボル化したテキストのアルファが０％になった状態

これで、タイムラインの最初のキーフレームは透明になりました。

終点は何もしていないので、表示されたままになっているはずです。

タイムラインを移動すると、わかると思います。

再生ボタンをクリックする

タイムラインの上部にある再生ボタン（上の画像を参照）をクリックし、タイムラインを再生させて、確認してみてください。テキストがフワッと表示されるようになっていますでしょうか。

「タイムライン」と「編集画面」を行き来する作業になるため、最初のうちは混乱すると思いますが、いかがでしょうか。

このフェードインを応用させると、より面白いアニメーションを作成できますので、是非色々試してみてください。

例えば、タイムラインで最初のキーフレームに移動し、「編集画面」でグラフィックシンボルの位置を動かしてみてください。動きが加わったアニメーションになります。