WebGL ドキュメントの作成とパブリッシュ

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

WebGL とは

WebGL は、プラグインを追加することなく互換ブラウザー上でグラフィックをレンダリングするためのオープン Web スタンダードです。WebGL は、Web スタンダードであるすべてのブラウザーに完全に統合され、Web ページキャンバスの一部として、画像処理および効果の使用を加速する GPU を活用できます。WebGL エレメントは他の HTML エレメントに埋め込んで、ページの他の部分と合成することができます。

最新ブラウザーのほとんどで WebGL がサポートされますが、サポートされる正確なバージョンについて詳しくは、このリンクを参照してください。

一部のブラウザーでは、WebGL がデフォルトで有効になっていません。ご使用のブラウザーで WebGL を有効にするには、この記事を参照してください。

注意:

お使いのブラウザーで WebGL が有効であることを確認してください。一部のブラウザーでは WebGL がデフォルトで無効になっているからです。

WebGL- glTF ドキュメントタイプ(ベータ版)の使用

Animate には、2 つの WebGL-glTF ドキュメントタイプがあります。WebGL- glTF Standard ドキュメントタイプを使用して、どの標準 WebGL- glTF パッケージとも統合することができます。標準に完全に準拠しています。

  1. WebGL- glTF ベースのドキュメントを作成するには、ホーム画面の「詳細設定」インテントから WebGL- glTF Standard または WebGL- glTF Extended を選択します。

    WebGL-glTF ドキュメントタイプ
    WebGL-glTF ドキュメントタイプ

  2. 要件に応じて幅、高さ、単位を指定し、「作成」を選択します。

WebGL-glTF ファイルのパブリッシュ

  1. プロパティインスペクターの「プロパティ」を選択します。

    WebGL-glTF ファイルをパブリッシュ
    WebGL-glTF ファイルをパブリッシュ

  2. 出力名」テキストボックスに名前を入力します。

    WebGL- glTF 標準ドキュメントタイプのパブリッシュ設定ダイアログ
    WebGL- glTF 標準ドキュメントタイプのパブリッシュ設定ダイアログ

  3. 「形式」オプションで GLB または GLTF を選択します。

  4. 「画像解像度」テキストボックスで 10 進数字(1 ~ 3 )を指定します。

  5. ファイルサイズを減らすには、「JSON ファイル内の空白を削除」をオンにします。

  6. デフォルトでは、標準のオプション(タイムラインをループおよび非表示レイヤーを含める)が選択されています。小さなエラーを見つけるには、それらをオフにすることができます。

  7. パブリッシュ」ボタンをクリックしてファイルをパブリッシュします。

アニメーションの GLTF および GLB 形式への変換

WebGL-glTF および GLB は、ファイルサイズおよびランタイム処理を減らします。Animate では、両方の形式のドキュメントを使用できます。両方の形式でビデオを使用したい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

  1. プロパティで、「パブリッシュ設定」をクリックします。

  2. 出力名」テキストボックスに名前を入力します。

  3. 「形式」オプションで GLB または GLTF を選択します。

  4. 画像解像度」テキストボックスで、10 進数(~ 3)を指定します。

  5. ファイルサイズを減らすには、「JSON ファイル内の空白を削除」をオンにします。

Animate での WebGL GLTF の書き出しを使用した高度なアニメーションの作成方法

WebGL GLTF、GLB 形式でアニメーションがどのように見えるかを知るには、このビデオをご覧ください。

Animate 18.0 以前のバージョン

Animate 18.0 または以前のバージョンの Animate を使用している場合は、次のコンテンツを参照できます。

WebGL ドキュメントタイプ

Animate では、インタラクティブなリッチコンテンツを作成して Web Graphics Library(WebGL)形式でパブリッシュできます。WebGL は、ブラウザーに完全に統合されるので、Animate は、Web ページキャンバスの一部として、グラフィックの処理およびレンダリングの使用を加速する GPU を活用できます。

この新しいドキュメントタイプを使用すると、コンテンツを作成してすぐに WebGL 出力にパブリッシュできます。Animate 内の強力なツールを活用してリッチコンテンツを作成しながらも、すべての互換ブラウザー上で実行される WebGL 出力をレンダリングできます。そのため、従来形式の Animate のタイムライン、ワークスペースおよび描画ツールを使用して、WebGL コンテンツをネイティブにオーサリングして生成できます。一般的に使用されているほとんどのブラウザーが WebGL をサポートしているので、Animate でほとんどの Web プラットフォーム上のコンテンツをレンダリングできます。

注意:

WebGL のサポートはプレビュー目的でのみ利用可能です。この Animate のアップデートには、サウンド、スクリプトおよび一連のインタラクティブ機能を使用する基本アニメーション向けのサポートが含まれます。今後の Animate リリースで、WebGL ドキュメントタイプ向けに有効となる機能が追加される予定です。WebGL 向けにサポートされる Animate 機能の一覧については、KB の記事を参照してください。

WebGL ドキュメントの作成

Animate では、WebGL ドキュメントを使用して、WebGL 形式のコンテンツをすばやく作成してパブリッシュできます。WebGL ドキュメントを作成するには、次の操作を行います。

  1. Animate を起動します。
  2. ようこそ画面で、「WebGL (プレビュー)」オプションをクリックします。または、ファイル新規メニューオプションを選択して、新規ドキュメントダイアログを表示します。「WebGL (プレビュー)」オプションをクリックします。

ブラウザーでの WebGL コンテンツのプレビュー

Animate のムービープレビュー機能を使用して、コンテンツをプレビューまたはテストできます。プレビューするには、次の操作をおこないます。

  1. Animate で、Ctrl + Enter キー(Windows)または Command + Enter キー(MAC)を押します。これにより、デフォルトブラウザーが起動し、WebGL コンテンツがレンダリングされます。
Animate では、WebGL コンテンツを実行するための Web サーバーが必要です。Animate には、WebGL コンテンツをポート番号 8090 で実行するように設定された Web サーバーが組み込まれています。他のサーバーがこのポートを既に使用している場合は、Animate により競合が自動的に検出され解消されます。

WebGL 形式でのコンテンツのパブリッシュ

Animate では、WebGL コンテンツをツール内でネイティブに作成してパブリッシュできます。

WebGL ドキュメントをパブリッシュするには、次の操作をおこないます。

  1. ファイル パブリッシュ設定を選択し、パブリッシュ設定ダイアログを表示します。または、ファイルパブリッシュを選択します(既に WebGL のパブリッシュ設定を行っている場合)。
  2. パブリッシュ設定ダイアログで、次の値を指定します。

出力ファイル

出力ファイルの分かりやすい名前を入力します。また、WebGL 出力のパブリッシュ先を参照して指定するか、入力します。

HTML を上書き

WebGL プロジェクトをパブリッシュするたびに HTML ラッパーを上書きするかどうかを指定できます。パブリッシュされた HTML ファイルに対して既に外部で変更を加えており、Animate でアニメーションやアセットに対する変更を更新する際にその変更を保持する場合は、このチェックボックスをオフにします。

非表示レイヤーを含める

すべての非表示レイヤーが WebGL 出力に含まれるようになります。「非表示レイヤーを含める」をオフにすると、ムービークリップ内でネストされているレイヤーを含めて、非表示になっているすべてのレイヤーは、作成される WebGL に書き出されません。レイヤーを非表示にすることによって、WebGL ドキュメントの各バージョンを簡単にテストすることができます。

タイムラインをループ

コンテンツが最後のフレームまで来ると最初から繰り返して再生されます。フレームの最後でコンテンツを停止する場合は、このオプションをオフにします。

  1. 「パブリッシュ」をクリックして、指定した場所に WebGL コンテンツをパブリッシュします。
注意:

ブラウザーで実行される WebGL コンテンツに指定可能な最大 FPS は 60 FPS です。

WebGL 出力について

パブリッシュされた WebGL 出力には次のファイルが含まれます。

HTML ラッパーファイル

このファイルにはランタイムが含まれます。また、このファイルはアセットを呼び出し、WebGL レンダラーの初期化もおこないます。ファイル名はデフォルトで <FLA_name>.html です。パブリッシュ設定ダイアログ(ファイル/パブリッシュ設定)で、この HTML ファイルに別の名前を付けることができます。

この HTML ファイルは、デフォルトでは FLA と同じディレクトリに配置されます。パブリッシュ設定ダイアログで、別の場所を指定できます。

JavaScript ファイル(WebGL ランタイム)

WebGL 上でパブリッシュされたコンテンツをレンダリングします。WebGL ドキュメントの libs/ フォルダー内にパブリッシュされます。ファイル名は flwebgl-<version>.min.js です。

HTML ラッパーは、この JS ファイルを利用して WebGL コンテンツをレンダリングします。

テクスチャアトラス

ステージ上のビットマップインスタンスを含む、(シェイプの)すべてのカラー値が保存されます。

WebGL ドキュメントへのオーディオの追加

オーディオを読み込んで WebGL ドキュメントに埋め込み、同期設定(イベント、開始および停止)を使用して再生を制御し、実行時にタイムラインのオーディオを再生することができます。WebGL では現在、.wav 形式と .mp3 形式のみがサポートされます。

オーディオの操作について詳しくは、「Animate でのサウンドの使用」を参照してください。

既存のコンテンツの WebGL ドキュメントへの移行

Animate 内の既存のコンテンツを WebGL ドキュメントに移行できます。この目的のために、Animate では、コンテンツの手動によるコピーまたは読み込みによって、コンテンツを移行できます。また、Animate 内で複数のドキュメントを操作している場合は、複数のドキュメントに及ぶコンテンツをレイヤーまたはライブラリ内のアセットとしてコピーするのが一般的なプラクティスです。Animate のほとんどの機能がサポートされますが、WebGL 形式にさらに適応させるために、一部のコンテンツタイプが変更されます。

Animate には、視覚的にリッチなコンテンツを生成するための複数の強力な機能があります。ただし、それらの機能の一部は Animate 特有のものであり、WebGL ドキュメントではサポートされません。Animate は、そのようなコンテンツをサポートされる形式に変更し、サポートされないツールまたは機能については視覚的に示すように設計されています。

コピー

コンテンツ(レイヤーまたはライブラリシンボル)を従来形式の Animate ドキュメントタイプ(ActionScript 3.0、AIR for Android、AIR for Desktop など)から WebGL ドキュメントにコピーする場合。この場合、サポートされていないコンテンツタイプは、削除されるか、またはサポートされているデフォルトに変換されます。

例えば、3D アニメーションをコピーした場合、ステージ上のオブジェクトに適用されているすべての 3D 変形が削除されます。

読み込み

サポートされていないコンテンツを含む PSD または AI ファイルを読み込む場合。この場合、コンテンツは、削除されるか、またはサポートされているデフォルトに変換されます。

例えば、ぼかし効果が適用されている PSD ファイルを読み込むと、Animate では、その効果を削除します。

複数のドキュメントタイプでの作業

複数のドキュメントタイプ(例えば、ActionScript 3.0 と WebGL)で同時に作業し、サポートされていないツールまたはオプションを選択した状態でドキュメントを切り替えた場合。この場合、Animate は、その機能がサポートされていないことを視覚的に示します。

例えば、ActionScript 3.0 ドキュメント内で点線を作成した状態で、線ツールを選択したまま WebGL に切り替えます。ポインターおよびプロパティインスペクターでは、WebGL 内で点線がサポートされないことが視覚的に示されます。

スクリプト

アクションパネルで JavaScript コードを記述できます。このコードは、プレーヤーがフレームを開始した後に実行されます。フレームスクリプトのコンテキストにおける「this」変数は、それが属する MovieClip のインスタンスを指します。また、フレームのスクリプトでは、コンテナ HTML ファイルで宣言された JavaScript 関数および変数にアクセスできます。ActionScript ドキュメントからフレームまたはレイヤーをコピーして WebGL ドキュメントに貼り付けた場合、スクリプト(存在する場合)はコメントアウトされます。

移行後にコンテンツに適用される変更点

従来形式のコンテンツを WebGL ドキュメントに移行した場合に適用される変更のタイプを次に示します。

コンテンツが削除される

HTML5 Canvas でサポートされないコンテンツタイプは削除されます。次に例を示します。

フィルター

サポートされていません。効果は削除され、代わりにシェイプに単色の塗りが適用されます。

ぼかしフィルター効果が削除され、単色の塗りに置き換えられます。

サポートされるデフォルト値にコンテンツが変更される

コンテンツタイプまたは機能はサポートされますが、機能のプロパティはサポートされません。次に例を示します。

 

放射状グラデーション

主要な色を使用して、単色の塗りを適用するように変更されます。

放射状グラデーションは、主要な色を使用した単色の塗りに変更されます。

サポートされない機能の一覧および移行時におけるそれらのフォールバック値については、この記事を参照してください。

ビットマップキャッシュによるレンダリングパフォーマンスの向上

ランタイムビットマップキャッシュでは、静的なムービークリップ(背景イメージなど)やボタンシンボルを実行時にビットマップとしてキャッシュするように指定することにより、レンダリングパフォーマンスを最適化できます。デフォルトでは、ベクターアイテムはフレームごとに再描画されます。ムービークリップまたはボタンシンボルをビットマップとしてキャッシュすると、ブラウザー上でそのアイテムが連続して再描画されることがなくなります。これは、イメージがビットマップであり、位置が変更されないためです。この結果、WebGL コンテンツのレンダリングパフォーマンスが大幅に向上します。

例えば、複雑な背景を持つアニメーションを作成するときは、背景にすべてのアイテムが含まれたムービークリップを作成します。次に、プロパティインスペクターで、背景のムービークリップのビットマップとしてキャッシュを選択します。再生中、背景は、現在のスクリーン深度で保存されたビットマップとして描画されます。ビットマップがステージ上で素早く 1 回のみ描画されるので、アニメーションの再生が高速でよりスムーズになります。

ビットマップキャッシュを使用すると、所定の位置にムービークリップを自動的に「定着」させることができます。変更が生じた領域については、ベクターデータを使ってビットマップキャッシュが更新されます。これにより、ブラウザーで再描画処理が必要となる頻度が下がり、よりスムーズで高速なレンダリングパフォーマンスが得られます。

ムービークリップシンボルに対して「ビットマップとしてキャッシュ」プロパティを有効にするには、ムービークリップインスタンスを選択し、プロパティインスペクター(ウィンドウプロパティ)の「レンダリング」ドロップダウンで「ビットマップとしてキャッシュ」を選択します。

ビットマップとしてキャッシュを使用する場合の考慮事項

WebGL コンテンツで「ビットマップとしてキャッシュ」プロパティを使用する場合は、次の点について考慮してください。

  • ムービークリップシンボルの最大サイズは 2048 x 2048 に制限されます。WebGL では一部のピクセルが予約されているので、キャッシュ可能なムービークリップインスタンスの実際の上限は 2048 x 2048 よりも小さくなります。
  • 同じムービークリップのインスタンスが複数ある場合、最初に検出されたインスタンスのサイズでキャッシュが生成されます。ただし、そのキャッシュは再生成されず、ムービークリップが大幅に変形された場合にも、「ビットマップとしてキャッシュ」プロパティは無視されません。そのため、アニメーションの途中でムービークリップシンボルのサイズが大きく変化する場合、そのアニメーションでブロックノイズが発生しているように見えることがあります。
アドビのロゴ

アカウントにログイン