テキストのフェードイン/フェードアウト

 

フェードイン/フェードアウトするテキストは Web サイトでは大変人気のあるアニメーションのひとつです。大抵の場合、そういったテキストにはイメージマップが施され、クリックすると他のページへ移動するものがほとんどです。

この文書では Fireworks4 を使用してテキストのフェードイン/フェードアウトアニメーションを作成する手順を紹介します。

 

セクション1: テキストをフェードインさせる

  1. [ウィンドウ]メニュー>[最適化]を選択し、[最適化]パネルを開きます。
  2. 書き出しファイル形式ポップアップメニューで、アニメーション GIF を選択します。
  3. [ウィンドウ]メニュー>[フレーム]を選択し、[フレーム]パネルを開きます。[フレーム1]を選択します。
  4. [ツール]パネルからテキストツールを選択し、キャンバス上をクリックします。テキストエディタが開きます。



  5. テキストエディタにテキストを入力します。必要であれば、設定を変更します。
  6. OK をクリックし、テキストエディタを閉じます。
  7. キャンバス上のテキストオブジェクトが選択されている状態で、[コマンド]メニュー>[ドキュメント]>[中央配置]を選択してオブジェクトをキャンバスの中央に配置します。
  8. テキストオブジェクトが選択されている状態で、[修正]メニュー>[アニメーション化]>[選択オブジェクトをアニメーション化]を選択し、[アニメーション]ダイアログボックスを開きます。



  9. アニメーションダイアログボックの様々なテキストボックスに適当な値を設定します。一般的に、不透明の変化は 10% 増でとてもスムーズに見えるので、0% から 100% への移行の場合は、フレーム数を 10 以上に設定することでとてもスムーズに見えます。

    ここでは下図のように設定します。



  10. OK をクリックします。
  11. メッセージボックスが表示され、アニメーションを実行する為に必要なフレームを追加するか聞かれます。

    (このメッセージは Fireworks 側のアニメーションの処理で追加フレームが必要と判断された時に表示されるものです。)



  12. 追加フレームを作成するにはOKをクリックしてください。
  13. これで、キャンバス上にシンボルが表示されます。(see Example 5)不透明度 0% からアニメーションを開始するように設定したので、フレーム 1 では透明に見えます。



 

セクション2: テキストをフェードアウトさせる

  1. 既にフェードインするアニメーションシンボルを作成したので、次にフェードアウトするシンボルインスタンスを追加します。

    フレームパネルを開き最終フレームをクリックします。
  2. フレームパネルの下部にあるフレームの追加ボタンをクリックします。

    こうすることで、フレームパネルに新しくフレームが追加されます。



  3. [ウィンドウ]メニュー>[ライブラリ]を選択し、ライブラリパネルを開きます。
  4. ライブラリパネルにはフレーム1からフレーム 10 にあるアニメーションシンボルがあります。そのシンボルをライブラリパネルからキャンバスの中央にドラッグします。



  5. シンボルが選択されている状態で、[コマンド]メニュー>[ドキュメント]>[中央配置]を選択し、オブジェクトをキャンバスの中央に配置します。
  6. シンボルが選択されている状態で、オブジェクトパネルを開き、セクション1でシンボルをフェードインさせたときと同じ要領で、今回は 10 フレーム間でフェードアウトする設定をします。



  7. キャンバスウィンドウの下部にある再生ボタンをクリックし、アニメーションの始めの部分をテストします。

 

セクション3: 2つ目のテキストをフェードインさせる

  1. 既にアニメーションシンボルをフェードイン/フェードアウトさせる方法は学んだので、更にフェードイン/フェードアウトのアニメーションを追加し、デザインにちょっとアクセントを効かせてみましょう。このセクションのアニメーションはセクション2のシンボルインスタンスと共に動きます。
  2. フレームパネルを開き、初めのアニメーションが終わるフレームを選択します。



  3. テキストツールを選択し、キャンバス上でクリックします。
  4. 前回とは異なるテキストを入力します。必要であれば、設定を変更します。



  5. OK をクリックしテキストエディタを閉じます。

    前のセクションで作成したシンボルとあわせて表示されています。



  6. テキストオブジェクトが選択されている状態で、[コマンド]メニュー>[ドキュメント]>[中央配置]を選択し、オブジェクトをキャンバスの中央に配置します。
  7. テキストオブジェクトが選択されている状態で、[修正]メニュー>[アニメーション化]>[選択オブジェクトをアニメーション化]を選択し、[アニメーション]ダイアログボックスを開きます。
  8. アニメーションダイアログボックスでアニメーションの設定をします。この場合、設定は1つ目のフェードインテキストと同じ設定です。



  9. OK をクリックします。
  10. 追加フレームを挿入する旨のメッセージが表示された場合はOKをクリックします。

 

セクション4: 2つ目のテキストをフェードアウトする

このテクニックを終了するには後一つだけフェードアウトするシンボルインスタンスを追加する必要があります。

手順はセクション2で紹介された手順によく似ています。

  1. 最終フレームをフレームパネルで選択します。



  2. ライブラリパネルで2つ目のアニメーションシンボルを選択します。
  3. ライブラリパネルから2つ目のアニメーションシンボルをキャンバスの中央にドラッグします。



  4. シンボルインスタンスが選択されている状態で、[コマンド]メニュー>[ドキュメント]>[中央配置]を選択し、オブジェクトをキャンバスの中央に配置します。
  5. シンボルが選択されている状態で、オブジェクトパネルでアニメーションの設定をします。



  6. 追加フレームを挿入する旨のメッセージが表示された場合は OK をクリックします。

    [ファイル]メニューから[書き出し]を選択し、アニメーション GIF を書き出します。(最適化パネルで書き出しファイル形式がアニメーション GIF に設定されているか確認してください。)







    ここで作成されたアニメーション GIF はこのように見えるはずです。



アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー