マニュアル キャンセル

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. アニメーションのクイック共有とパブリッシュ

コードスニペットパネルは、シンプルな 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 インタラクティブアニメーションの強化方法

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

アカウントにログイン