カスタムコンポーネントの作成例

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

この記事では、HTML5 カスタムコンポーネントのサンプルについて説明します。

この記事では、カスタムコンポーネントの作成方法について説明します。最初の例では、フレームワークと開発手順を理解するために、画像コンポーネント(Animate CC にも付属しています)とそのプロセスを説明します。2 つ目の例では、既存の UI コンポーネント(jQueryUI など)をラップして Animate CC に読み込む方法を説明します。

  1. DOM 画像コンポーネントの作成

    My Components」というカテゴリーを作成します。

    a. First Run フォルダー下の <HTML5Components> フォルダーに mycomponents というフォルダーを作成します。

    b. 添付の myimage.zip ファイルをダウンロードし、

        mycomponents フォルダーの下に中身を抽出します。

    ダウンロード

    c. Animate.を再起動します。

mycomponents フォルダー内のディレクトリ構造
mycomponents フォルダー内のディレクトリ構造

コンポーネントフォルダー内に「My Components」という新しいカテゴリーがあり、そのカテゴリー下に My Image という新しいコンポーネントがあります。これをステージにドラッグ&ドロップし、画像ソースプロパティを設定して、ムービーをパブリッシュすると、動作しているカスタムコンポーネントを確認できます。 

コンポーネントメタデータ - components.js

Components.js コード
components.js

カテゴリーが CATEGORY_MY_COMPONENTS に設定されていることに注意してください。各プロパティの名前も同様のキーを使用しています。これは、カテゴリーのローカライズされた文字列のキーです。locale フォルダーから strings.json を開くと、次のエントリを確認できます。

注意:

このファイルの編集時には、配列の最終エレメントの末尾に不要なコンマが付いているエラーがよく起こります。

カテゴリーの詳細
カテゴリーの詳細

アイコンフィールドの値は Sp_Image_Sm に設定されています。assets フォルダーに移動すると、名前が Sp_Image_Sm で始まる次のような 2 つの png ファイルがその中にあります。

アイコンフィールドの値
アイコンフィールドの値

これらは暗い UI と明るい UI 用のアイコンです。

components.json の「source」フィールドの値は「src/myimage.js」に設定されています。 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget("my.Image", {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
  
_attrs: ["id", "src", "alt", "class", "border"],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate CC
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': "image" + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return "<img>";
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

コード内のコメントを読むと、コードを容易に理解できます。 

Animate に付属している他のコンポーネントのソースも自由にご覧ください。ほとんどの場合、まずはこれらのいずれかを使用し、その後、自分自身の要件に応じてそれを設定することができます。

jQuery-UI コンポーネントのラッピング

この節では、jQuery-UI ウィジェットをラップして Animate CC で使用する方法について説明します。この基本を理解すれば、他のどの UI フレームワークに含まれている他のどの既存コンポーネントをラップするときでも応用できます。

まず、Animate CC のパッケージされた DatePicker コンポーネント(jQuery-UI ウィジェット)を見てみましょう。次のアーカイブをダウンロードし、中身を解凍して参照します。

ダウンロード

解凍されたアーカイブの中身の構造
解凍されたアーカイブの中身の構造

jquery-ui-1.12.0 というフォルダーは jQuery UI フレームワークのソースです。この中に、元の DatePicker ウィジェットとそのリソース(画像や CSS など)が格納されています。これらがラップされ、Animate CC で他の HTML5 コンポーネントと同様に使用されます。これが必要なのはローカルプレビューをする場合だけで、パブリッシュ設定で「ホストのライブラリ」を有効にしているときは、cdn を使用して依存先のソースをダウンロードできます。 

Components.js コード
components.js

デフォルトで、jQuery と anwidget.js という 2 つの依存先モジュールがあります。anwidget.js は CDN 上にはないので、同様の CDN エントリはありません。

次のエントリセットは、日付ピッカーウィジェットを jQuery UI から読み込むのに必要なその他のリソースに対するものです。他のライブラリに含まれている別のウィジェットをラップする場合でも、同様の依存先モジュールセットを同じように指定することができます。これらの依存先モジュールは、コンポーネントの初期化の前にダウンロードされます。

properties セクションでは、label というプロパティだけが公開されています。これは、日付ピッカーコンポーネントのラベルプロパティにバインドされています。同様に、他のプロパティも公開できます。どれを公開する場合も、ユーザーが Animate のオーサリング環境で設定できるようにします。実行時には、これらのプロパティはそれぞれ、インスタンスの options 配列に格納されているキー/値ペアとして使用できます。設定済みの値を実行時に抽出して適用できます。

メインソースファイル: src/datepicker.js
メインソースファイル: src/datepicker.js

例とは異なるセクション

  1. getCreateString:

    jQuery-UI に含まれている日付ピッカーウィジェットでは、そのような入力テキストエレメントが取得されて、実行時にそれが日付ピッカーエレメントに変換されます。ですから、それに応じて適切に DOM を初期化するひよ痛があります。

  2. attach:

    このウィジェットの場合は、この関数をオーバーライドする必要があります。この API は、エレメントが DOM にアタッチされようとするたびに呼び出されます。ただし、ベースとなるランタイム(この場合は createjs)の動作方法が原因で、この API はフレームスパン中に何度も呼び出される可能性があります。

    ベースとなるエレメントのアタッチ状態を記憶した後、基底クラスのアタッチ API を呼び出します(this._superApply(arguments) を使用)。親となる DOM に初めてこのエレメントをアタッチしようとしている場合は、ベースとなる jQuery-UI ウィジェットの呼び出しを使用して、コンポーネントの DOM を日付ピッカーに変換します。https://jqueryui.com/datepicker/ を参照してください。

    JavaScript ウィジェットのほとんどは、これと同じように動作します。これと同じ手法を使用して、自分で選んだ任意のコンポーネントをラップして、同じように Animate CC に組み込むことができます。

  3. update:update をオーバーライドし、css プロパティをコンテナ div に、属性を実際の DOM エレメントにそれぞれ適用します。

    注意:

    attach、detach、update などの API をオーバーライドする場合は、基底クラスのデフォルト実装を評価し、その基底実装を適切なタイミングで呼び出す必要があります。そうしないと、コンポーネントの初期化が失敗する可能性があります。

アドビのロゴ

アカウントにログイン