Animate でのボタンの作成

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

基本的なボタン作成手順

  1. ニーズに最もよく合うボタンタイプを決定します。

    ボタンシンボル

    ほとんどの場合、柔軟性を確保するためにボタンシンボルが選択されます。ボタンシンボルには、ボタンの状態を保持するための特殊な内部タイムラインが含まれます。視覚的に異なる「アップ」「ダウン」および「オーバー」の状態を簡単に作成できます。ボタンシンボルでは、ユーザー操作への応答時に状態が自動的に変更されます。

    ムービークリップボタン

    ムービークリップシンボルは、洗練されたボタンエフェクトを生むために使用できます。ムービークリップシンボルには、アニメーションなどのほぼすべての種類のコンテンツを含めることができます。ただし、ムービークリップシンボルにはビルトインの「アップ」「ダウン」および「オーバー」の各状態は含まれていません。これらの状態については、ActionScript で独自に作成します。欠点は、ムービークリップファイルのサイズがボタンファイルよりも大きくなることです。

    ActionScript ボタンコンポーネント

    標準ボタンまたはトグルしか必要なく、大規模なカスタマイズを行わない場合は、ボタンコンポーネントを使用します。ActionScript 2.0 と 3.0 の両方のボタンコンポーネントに、状態の変更が可能なビルトインコードが付属しています。そのため、ボタンの状態に関する外観と動作を定義する必要はありません。コンポーネントをステージにドラッグするだけで済みます。

    • ActionScript 3.0 ボタンコンポーネントではカスタマイズが一部可能です。ボタンを他のコンポーネントにバインドして、アプリケーションデータを共有し表示することができます。アクセシビリティサポートなどのビルトイン機能があります。ButtonRadioButton および CheckBox コンポーネントを使用できます。

    • ActionScript 2.0 ボタンコンポーネントはカスタマイズできません。このコンポーネントでは状態の変更が可能です。

  2. ボタンの状態を定義します。

    「アップ」フレーム

    ユーザーがボタンを操作していないときのボタンの外観です。

    「オーバー」フレーム

    ユーザーがボタンを選択する直前のボタンの外観です。

    「ダウン」フレーム

    ユーザーがボタンを選択したときのボタンの外観です。

    「ヒット」フレーム

    ユーザーのクリックに応答する領域です。「ヒット」フレームの定義はオプションです。ボタンが小さい場合や、グラフィック領域が連続していない場合は、このフレームを定義すると便利です。

    • ヒット」フレームの内容は再生中にはステージに表示されません。

    • ヒット」フレームのグラフィックは、「アップ」、「ダウン」、「オーバー」の各フレームのすべてのグラフィックエレメントを囲むのに十分な大きさを持つ、切れ目のない領域です。

    • ヒット」フレームを指定しない場合は、「アップ」状態のイメージが使用されます。

      ステージの別の領域をクリックするか、ロールオーバー(ボタン領域以外をロールオーバーに反応させること)したときにボタンを反応するようにできます。他のボタンフレームグラフィックとは別の場所に、「ヒット」フレームグラフィックを配置します。

  3. ボタンにアクションを関連付けます。

    ユーザーがボタンを選択したときに何らかの処理を実行するには、タイムラインに ActionScript コードを追加します。ボタンと同じフレームに ActionScript コードを配置してください。コードスニペットパネルには、多くの一般的なボタンで使用できる事前に記述された ActionScript 3.0 コードがあります。コードスニペットを使用したインタラクティブ機能の追加を参照してください。

    注意:

    ActionScript 2.0 と ActionScript 3.0 には互換性がありません。お使いの Animate のバージョンで ActionScript 3.0 が使用される場合、ActionScript 2.0 のコードをボタンにペーストすることはできません(この逆も同様です)。他のソースの ActionScript をボタンにペーストする前に、バージョンの互換性があることを確認してください。

ボタンシンボルを使用したボタンの作成

ボタンをインタラクティブにするには、ボタンシンボルのインスタンスをステージに配置し、そのインスタンスにアクションを割り当てます。FLA ファイルのルートタイムラインにアクションを割り当てます。ボタンシンボルのタイムラインにアクションを追加しないでください。ボタンタイムラインにアクションを追加する場合は、代わりにムービークリップボタンを使用してください。

  1. 編集すべて選択解除を選択するか、ステージの空の領域をクリックして、ステージ上で何も選択されていない状態にします。

  2. 挿入新規シンボルを選択します。

  3. 新規シンボルの作成ダイアログボックスで、名前を入力します。シンボルタイプで「ボタン」を選択します。

    Animate が自動的にシンボル編集モードに切り替わります。タイムラインが変わり、「アップ」、「オーバー」、「ダウン」および「ヒット」というラベルの付いた 4 つの連続するフレームが表示されます。最初のフレームである「アップ」は、空白のキーフレームです。

  4. 「アップ」状態のボタンイメージを作成するには、タイムラインで「アップ」フレームを選択してから、描画ツールを使用するか、グラフィックを読み込むか、またはステージ上の別のシンボルのインスタンスを配置します。

    ボタン内部にグラフィックシンボルまたはムービークリップシンボルを使用できますが、別のボタンシンボルを使用することはできません。

  5. タイムラインで、「オーバー」フレームをクリックし、挿入タイムラインキーフレームを選択します。

    Animate で前の「アップ」フレームの内容を複製したキーフレームが挿入されます。

  6. オーバー」フレームを選択した状態で、ステージのボタンイメージを変更または編集して、「オーバー」状態の外観を作成します。

  7. 手順 5 および 6 を、「ダウン」フレームと、オプションの「ヒット」フレームに対して繰り返します。

  8. ボタンの状態にサウンドを割り当てるには、タイムライン内の状態のフレームを選択し、ウィンドウプロパティを選択します。さらに、プロパティインスペクターで、サウンドメニューからサウンドを選択します。サウンドメニューに表示されるのは、読み込み済みのサウンドのみです。

  9. 操作が終了したら、編集ドキュメントの編集を選択します。Animate では、FLA ファイルのメインタイムラインに戻ります。ステージで作成したボタンのインスタンスを作成するには、ライブラリパネルからステージにボタンシンボルをドラッグします。

  10. ボタンの機能をテストするには、制御テストコマンドを使用します。また、ステージ上のボタンシンボルの状態は、制御シンプルボタンを有効にするを選択することでプレビューできます。このコマンドによって、制御テストを使用しなくてもボタンシンボルの「アップ」、「オーバー」、「ダウン」の各状態を確認できます。

ボタンシンボルの有効化、編集、テスト

デフォルトでは、Animate での作成時にボタンシンボルは無効になります。ボタンを選択して有効にすると、ボタンがマウスイベントに応答するようになります。ベストプラクティスは、作業中はボタンを無効にし、動作をすばやくテストする際にボタンを有効にすることです。

  • ボタンを選択するには、選択ツールを使用してボタンを囲む長方形をドラッグします。

  • ステージ上でボタンの有効、無効を切り替えるには、制御シンプルボタンを有効にするを選択します。このコマンドは、2 つの状態のトグルとして動作します。

  • ボタンを移動するには、矢印キーを使用します。

  • ボタンを編集するには、プロパティインスペクターを使用します。プロパティインスペクターが非表示の場合は、ウィンドウプロパティを選択します。

  • オーサリング環境でボタンをテストするには、制御シンプルボタンを有効にするを選択します。

  • Flash Player でボタンをテストするには、制御ムービープレビュー(またはシーンプレビュー)/テストを選択します。ムービークリップボタンをテストする方法はこれ以外にありません。

  • ライブラリプレビューパネルでボタンをテストするには、「ライブラリ」でボタンを選択し、「再生」をクリックします。

ボタンのトラブルシューティング

ボタンに関する一般的な問題のトラブルシューティングには、次のリソースを参照してください。

ボタンに関するその他のリソース

次の TechNote では、ボタンを特定の用途に使用するいくつかの例の手順を示しています。

アドビのロゴ

アカウントにログイン