マニュアル キャンセル

Animate のコードスニペットを使用したインタラクティブ機能の追加

 

コードスニペットパネルは、シンプルな JavaScript および ActionScript 3.0 をプログラマー以外の方でも簡単に使用できるよう設計されています。このパネルを使用すると、FLA ファイルにコードを追加して、よく使用される機能を有効にすることができます。コードスニペットパネルを使用する際は、JavaScript または ActionScript 3.0 に関する知識は不要です。

コードスニペットパネルで行うことのできる操作は次のとおりです。

  • ステージ上のオブジェクトのビヘイビアーに影響するコードの追加

  • タイムラインの再生ヘッドの移動を制御するコードの追加

  • (CS5.5 のみ) - タッチスクリーンでのユーザー操作を許可するコードの追加

  • 作成する新しいコードスニペットのパネルへの追加

Animate に含まれているコードスニペットは、JavaScript または ActionScript 3.0 を初めて学習する際に役立ちます。スニペット内のコードを調べ、スニペット内の命令セットをたどることで、コードの構造とボキャブラリを理解することができます。

Animate のコードスニペットオプション
Animate のコードスニペットオプション

始める前に

コードスニペットパネルを操作するときは、次に示す Animate の基本事項を理解しておくことが重要です。

  • 多くのコードスニペットでは、コード内のいくつかのアイテムをカスタマイズする必要があります。Animate では、アクションパネルでこれを行うことができます。各スニペットには、このタスクの手順が含まれています。

  • 含まれているコードスニペットはすべて JavaScript または ActionScript 3.0 です。

  • 一部のスニペットには、オブジェクトの動作に影響し、オブジェクトをクリック可能にしたり、移動したり、非表示したりする機能があります。このようなスニペットはステージ上のオブジェクトに適用します。

  • 一部のスニペットでは、そのスニペットを含んだフレームに再生ヘッドが入ると、すぐにアクションが実行されます。このようなスニペットはタイムラインフレームに適用します。

  • コードスニペットを適用すると、コードは、タイムライン内にあるアクションレイヤーの現在のフレームに追加されます。アクションレイヤーをまだ作成していない場合は、タイムライン内にある他のすべてのレイヤーの上にアクションレイヤーが追加されます。

  • ステージ上のオブジェクトを ActionScript を使用して制御する場合、そのオブジェクトは、プロパティインスペクターで割り当てられたインスタンス名を持っている必要があります。

  • パネル内でスニペットを選択すると表示される「説明を表示」ボタンおよび「コードを表示」ボタンをクリックできます。

オブジェクトまたはタイムラインフレームへのコードスニペットの追加

オブジェクトまたは再生ヘッドに影響を及ぼすアクションを追加するには:

  1. ステージ上のオブジェクトまたはタイムラインのフレームを選択します。

    シンボルインスタンスではないオブジェクトを選択した場合、そのオブジェクトは、スニペットの適用時にムービークリップシンボルに変換されます。

    インスタンス名のないオブジェクトを選択した場合、スニペットの適用時にインスタンス名が追加されます。

  2. コードスニペットパネル(ウィンドウ/コードスニペット)で、適用するスニペットをダブルクリックします。

    ステージ上のオブジェクトを選択した場合、スニペットは、選択したオブジェクトを含んでいるフレームのアクションパネルに追加されます。

    タイムラインフレームを選択した場合は、スニペットは当該フレームにのみ追加されます。

  3. アクションパネルで、新しく追加したコードを表示し、スニペットの上部に表示される手順に従って必要なアイテムを置き換えます。

アクションパネルのコードスニペット

コードスニペットパネルへの新しいスニペットの追加

新しいコードスニペットは、次の 2 とおりの方法でコードスニペットパネルに追加できます。

  • 新規コードスニペットを作成ダイアログボックスで、スニペットを入力します。

  • コードスニペット XML ファイルを読み込みます。

新規コードスニペットを作成ダイアログボックスを使用するには:

  1. コードスニペットパネルで、パネルメニューの「新規コードスニペットを作成」を選択します。

  2. ダイアログボックスで、コードのタイトル、ツールヒントテキストおよび JavaScript または ActionScript 3.0 コードを入力します。

    「自動読み込み」ボタンをクリックすることにより、アクションパネルで選択中の任意のコードを追加できます。

  3. 「コードスニペットを適用する時に、「instance_name_here」の部分を自動的に置き換える」チェックボックスを選択すると、コードに「instance_name_here」というストリングが含まれている場合、スニペットを適用するときにこのストリングが適切なインスタンス名に置き換えられます。

    コードスニペットパネルのカスタムフォルダーに新しいスニペットが追加されます。

XML 形式のコードスニペットを読み込むには:

  1. コードスニペットパネルで、パネルメニューの「コードスニペットの XML を読み込む」を選択します。

  2. 読み込む XML ファイルを選択し、「開く」をクリックします。

コードスニペット用の適切な XML 形式を表示するには、パネルメニューの「コードスニペットの XML を編集」を選択します。

コードスニペットを削除するには、パネル内でスニペットを右クリックして、コンテキストメニューからコードスニペットの削除を選択します。

HTML5 を使用したインタラクティブアニメーション

一部のアニメーションは、様々な公開プラットフォームをサポートするために、コードのスニペットが必要です。コードのスニペットの使用してアニメーションをインタラクティブにする方法を学習するには、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

  1. ライブラリで、「パブリッシュ設定」をクリックします。

  2. JavaScript/HTML を選択します。

  3. HTML/JS」タブで、「書き出し」をクリックして、次のオプションを選択します。

    • ファイル名:ファイルの名前を入力します。
    • ファイルの種類:HTML を選択します。
  4. OK」をクリックします。

HTML5 インタラクティブアニメーションの強化方法

コードの編集方法については、このビデオをご覧ください。

ヘルプをすばやく簡単に入手

新規ユーザーの場合