基本的なボタン作成手順

  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 では、ボタンを特定の用途に使用するいくつかの例の手順を示しています。

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

リーガルノーティス   |   プライバシーポリシー