マニュアル キャンセル

仮想現実のオーサリングとパブリッシング

検索
Animate

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. Animate でのオブジェクトの描画および作成
    9. 線とシェイプの変更
    10. Animate CC での線、塗り、グラデーション
    11. Adobe Premiere Pro と After Effects の使用
    12. Animate CC のカラーパネル
    13. Animate で Flash CS6 ファイルを開く
    14. Animate でのクラシックテキストの操作
    15. Animate へのアートワークの挿入
    16. Animate に読み込まれたビットマップ
    17. 3D グラフィック
    18. Animate でのシンボルの操作
    19. Adobe Animate での線とシェイプの描画
    20. Animate でのライブラリの使用
    21. サウンドの書き出し
    22. Animate CC でのオブジェクトの選択
    23. Animate での Illustrator AI ファイルの操作
    24. ブレンドモードの適用
    25. オブジェクトの配置
    26. コマンドメニューを使用したタスクの自動化
    27. 多言語テキスト
    28. Animate でのカメラの使用
    29. グラフィックフィルター
    30. サウンドと ActionScript
    31. 描画の環境設定
    32. ペンツールを使用した描画
  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. Animate ワークスペースのアクセシビリティ
    12. スクリプトの記述と管理
    13. カスタムプラットフォームサポートの有効化
    14. カスタムプラットフォームサポートの概要
    15. カスタムプラットフォームサポートプラグインの操作
    16. ActionScript 3.0 のデバッグ
    17. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    9. ベストプラクティス - ビデオ規則
    10. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    11. ベストプラクティス - FLA ファイルの構造化
    12. FLA ファイルを Animate 向けに最適化するベストプラクティス
    13. ActionScript パブリッシュ設定
    14. Animate のパブリッシュ設定の指定
    15. プロジェクターファイルの書き出し
    16. 画像とアニメーション GIF の書き出し
    17. HTML パブリッシュ用テンプレート
    18. Adobe Premiere Pro と After Effects の使用
    19. アニメーションのクイック共有とパブリッシュ
  9. トラブルシューティング
    1. 解決済みの問題
    2. 既知の問題

 

Animate では、このような魅力的なコンテンツを容易に作れるよう、VR 360 および VR パノラマドキュメントタイプが導入されました。また、新しい仮想現実ドキュメントタイプを使用して、3D モデル（.glb ファイル）を Animate プロジェクトに読み込み、3D コンテンツにアニメーションを作成することもできます。 

VR ドキュメントタイプで作成されたコンテンツをプレビューするには、新しく導入された VR 表示パネルを使用します。VR 表示パネルで、MovieClip インスタンスをクリックして移動できます。Animate では、オブジェクトをクリックして移動すると、オブジェクトが自動的に検出されます。VR ビューでは 3D 空間内にオブジェクトを配置できます。VR 表示のオブジェクト（ムービークリップ）の配置に対する変更は、自動的に第 2 ステージへ反映されます。タイムラインパネルでレイヤーをテクスチャレイヤーとしてマークして、これら 2 つのドキュメントタイプのそれぞれの場合に円柱または球体上にラップされるようにすることもできます。

また、Animate では、一連の豊富な API を利用して、実行時に仮想現実アニメーションを管理することもできます。例えば、ボタンをクリックして、仮想現実環境に複数のオブジェクトを追加できます。 

 Animate の VR 360 および VR パノラマは、2018 年 10 月リリースのベータ版です。

仮想現実のドキュメントタイプ

仮想現実（VR）には 2 つのドキュメントタイプがあります。

VR パノラマ

  • このドキュメントタイプを使用して、仮想現実アプリケーション用のパノラマコンテンツを作成します。 
  • このドキュメントタイプでは、テクスチャレイヤー上に直接描画されたコンテンツは円柱上にラップされます。
  • テクスチャレイヤー上にパノラマ画像を配置するか、背景を描画するかを選択できます。 
  • Animate では、作成した 2D アニメーションを、インタラクティブ機能を備えたパノラマコンテンツに変換できます。 

VR 360

  • このドキュメントタイプを使用して、仮想現実アプリケーション用の 360°コンテンツを作成します。  
  • このドキュメントタイプでは、テクスチャレイヤー上に直接描画されたコンテンツは球面上にラップされます。
  • 正距円筒画像を使用するか、コンテンツを描画することを選択できます。 
  • Animate では、作成した 2D アニメーションを、インタラクティブ機能を備えた 360°コンテンツに変換できます。
起動画面での VR 360 およびパノラマ
起動画面での VR 360 およびパノラマ

仮想現実コンテンツのオーサリングとパブリッシング

Animate で仮想現実コンテンツを作成するには、次の手順に従います。

  1. 背景用に、ステージで 360 またはパノラマ画像を読み込みます。

    画像サイズが大きい場合は、ステージビューのサイズを調整できます。

    • サイズを設定するには、変更／ドキュメントを選択します
    •  「コンテンツに合わせる」をクリックします

    ウィンドウの右上隅にある「ステージの中央を表示」アイコンをクリックして、画像を画面の中央に設定します。

  2. レイヤーをテクスチャレイヤーとして作成するには、以下のスクリーンショットのように、タイムラインパネルですべてのレイヤーのテクスチャラッピングを作成アイコンをクリックします。

    レイヤーのテクスチャラッパーの作成
    レイヤーのテクスチャラッパーの作成

    テクスチャレイヤーは、選択したドキュメントタイプに応じて、円柱または球体をラップします。

  3. ステージにオブジェクトを追加し、アセットに応じてクラシックトゥイーンまたはモーショントゥイーンをオブジェクトに追加し、アニメーションを作成します。 

    VR 360 ステージ
    VR 360 ステージ

    上記のスクリーンショットは、VR 360 ドキュメントタイプの正距円筒画像、ガイド付きモーションパスの付いた鳥、およびタイムラインでクラシックトゥイーンを表示した Animate のステージング表示を示しています。 

  4. ウィンドウ／VR 表示を使用してコンテンツをプレビューします。

    VR 表示を使用した VR コンテンツのプレビュー
    VR 表示を使用した VR コンテンツのプレビュー

    VR 表示ダイアログで「VR 表示の起動」ボタンをクリックします。

    VR 表示パネル
    VR 表示パネル

    VR 表示のプレビューモードでは、コンテンツを初期状態にリセットするには、「リセット」ボタンを使用します。オーサリングステージでの変更は VR 表示には自動的には反映されません。ステージング環境で、アセットに適用した変更を表示するには、「更新」をクリックします。

    VR 表示の「更新」オプションと「リセット」オプション
    VR 表示の「更新」オプションと「リセット」オプション

    プレビューモードで MovieClip インスタンスを移動させることができます。Animate では、マウスを重ねるとオブジェクトを自動的に検出します。以下のスクリーンショットで示すように、マウスをオブジェクトの上に移動すると、カーソルの形状がクロスバーアイコンに変わります。選択したドキュメントに応じて、円柱または球体に沿ってオブジェクトを移動できます。

    VR 表示ウィンドウをパンするには、プレビュー画面をクリックしてドラッグします。 

    オブジェクトを移動するためのクロスバーアイコン
    オブジェクトを移動するためのクロスバーアイコン

  5. ファイル／パブリッシュまたは Ctrl + Enter キーを使用して、コンテンツをパブリッシュします。パブリッシュすると、画像は Animate で円柱または球体メッシュ上にラップされます。これらのレイヤーにレイヤーやアニメーションコンテンツを追加できます。

    VR 360 のパブリッシュされた出力のサンプルが、以下のアニメーション GIF で示すように表示されます。 

    VR 360 出力サンプル
    VR 360 出力サンプル

    VR パノラマ出力サンプル
    VR パノラマ出力サンプル

    仮想現実コンテンツをパブリッシュする際、ホストされた JavaScript ライブラリをランタイムとして使用することを選択できます。デフォルトでは、Animate は、ホストされたライブラリから、パブリッシュされたコンテンツ用のランタイムを使用します。パブリッシュする出力と一緒にランタイムをパッケージ化する場合は、パブリッシュ設定のオプションをオフにすることができます。 

    パブリッシュ設定
    ライブラリのパブリッシュ設定

仮想現実によるアニメーションの最新化

仮想現実は、市場で優勢なトレンドです。コンテンツに仮想現実を導入するには、この例の最後にあるチュートリアルを参照して、次の手順に従ってください。

  1. 「ホーム」タブで、「詳細」をクリックします。

  2. 「VR パノラマ」を選択して、「作成」をクリックします。

Animate でのパノラマコンテンツの作成方法

パノラマ表示にさらにエフェクトを追加して仮想体験を向上させる方法を学習するには、このビデオをご覧ください。

WebGL- glTF （Standard および Extended） に関するビデオチュートリアル

WebGL-glTF Export（Standard および Extended）の使用方法を示すビデオ

3D コンテンツの使用

また、仮想現実ドキュメントタイプを使用して、3D モデル（.glb ファイル）を Animate プロジェクトに読み込み、3D コンテンツを作成できます。

  1. VR（360）プレビューまたは VR(パノラマ）ドキュメントタイプを作成します。

  2. ファイル／読み込みを選択し、.glb ファイルを参照してステージまたはライブラリに読み込みます。

    3D コンテンツのステージへの読み込み
    3D コンテンツをステージに読み込む

  3. ムービークリップオブジェクトと似たアニメーションやインタラクティブ機能を追加し、パブリッシュします。

    VR 表示で 3D モデルをプレビューすることもできます。

実行時の仮想現実の使用

また、Animate では、API を使用して、実行時に仮想現実アニメーションを管理することもできます。例えば、ユーザーがボタンをクリックしたときに、360 仮想現実環境にオブジェクトを追加できます。 

仮想現実ランタイム API のリストは次のとおりです。

パッケージ：anWebgl

properties

名前

タイプ/ ソースファイルで

アクセス

説明

例

ステージ

ステージ

RW

ステージプロパティの取得／設定

anWebgl.stage

virtualCamera

VirtualCamera

RW

デフォルトカメラにアクセスする

anWebgl.virtualCamera

Root

MovieClip

RO

一番上表示オブジェクト（現在のシーンタイムライン）。

anWebgl.root

方法

名前

プロトタイプ

説明

例

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

指定した GLB ファイルから 3D モデルを読み込みます

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

playAll

playAll() : void

ルートを含むすべてのムービークリップのアニメーションを再生します

anWebgl.playAll();

stopAll

stopAll() : void

ルートを含むすべてのムービークリップのアニメーションを停止します

anWebgl.stopAll();

クラス：MovieClip

継承：DisplayObjectContainer

properties

方法

名前

プロトタイプ

説明

例

再生

play(): void

ムービークリップのアニメーションを再生します。

anWebgl.root.getChildByName("名前").play();
(または)

this.play(); 

停止

stop(): void

ムービークリップのアニメーションを停止します。

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

ルートを含むすべてのムービークリップのアニメーションを再生します。

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

ルートを含むすべてのムービークリップのアニメーションを停止します。

anWebgl.root.getChildAt(0)).stopAll();

 

クラス：DisplayObject

継承：IEventDispatcher

名前

プロトタイプ

説明

例

hitTestPoint

hitTestPoint(x, y, Boolean).

ヒットしたオブジェクトのタイプに基づいて displayObject／displayObjectContainer／movieClip を返します。

x と y は画面上の点の座標です。

anWebgl.root.hitTestPoint(300, 200, true, false);

名前

タイプ/ ソースファイルで

アクセス

説明

例

X

Number

RW

X 軸上の平行移動

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

Y

Number

RW

Y 軸上の平行移動

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Number

RW

Z 軸上の平行移動

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Number

RW

X 軸に沿って拡大・縮小

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Number

RW

Y 軸に沿って拡大・縮小

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Number

RW

Z 軸に沿って拡大・縮小

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Number

RW

X 軸に沿って回転

anWebgl.root.getChildByName("name").rotationX+=30;

(または)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Y 軸に沿って回転

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Number

RW

Z 軸に沿って回転

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Parent

DisplayObjectContainer

RO

親コンテナ

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

ブール値

RW

オブジェクトの表示

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

クラス：DisplayObjectContainer

Inherits: DisplayObject

名前

プロトタイプ

説明

例

numChildren

numChildren:num

オブジェクトの子の数を返します

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

引数オブジェクトを削除します（存在する場合）

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

引数オブジェクトが子の場合は true、それ以外の場合は false を返します

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

引数インデックスで子を返します

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

引数名を持つ子を返します（存在する場合）

anWebgl.root.movieClipInstanceName.getChildByName(childName);

クラス：Stage

properties

名前

アクセス

説明

例

stageWidth

RO

ステージの幅

anWebgl.stage.stageWidth

stageHeight

RO

ステージの高さ

anWebgl.stage.stageHeight

Color

RW

ステージの背景の色

anWebgl.stage.color

クラス：VirtualCamera

方法

名前

プロトタイプ

説明

例

getCamera

getCamera()

カメラオブジェクトを取得します。実行時にカメラのプロパティを取得または設定するために使用します。

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("カメラの位置 x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

カメラの現在位置を示す x、y、z のプロパティを持つオブジェクトを返します。

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("カメラの位置 x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

入力パラメーターで指定された絶対位置にカメラを移動します。デフォルト値は 0 です。

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

現在の位置を基準としてカメラを移動します。

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

カメラ位置を元の位置 (0,0,0) にリセットします。


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

入力パラメーターで指定された絶対角度でカメラを回転させます。

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

カメラの角度を 0 にリセットします。

anWebgl.virtualCamera.getCamera().resetRotation();

 

その他の関連ヘルプ

 Adobe

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

新規ユーザーの場合

クイックリンク

すべてのプランを表示 プランを管理
クイックリンクを表示する
クイックリンクを非表示にする
Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

今すぐ登録

法律上の注意    | プライバシーポリシー