Animate

Animate 說明

開啟 Animate
Adobe 支援中心
Adobe 支援中心

虛擬實境編寫和發佈

上次更新時間 2023年5月24日

Animate 引進 VR 360 和 VR 全景文件類型，可協助您輕鬆地建立吸引人的內容。 此外，您也可以使用新的虛擬實境文件類型，將 3D 模型 (例如 .glb 檔案) 匯入您的 Animate 專案並在 3D 內容上建立動畫。 

若要預覽以 VR 文件類型建立的內容，您可以使用新引進的「VR 檢視」面板。 您可以在「VR 檢視」面板中按一下並移動 MovieClip 實體。 當您按一下並四處移動物件時，Animate 會自動偵測物件。 「VR 檢視」可讓您將物件放置在 3D 空間裡。 對「VR 檢視」中物件 (影片片段) 放置的變更會自動反映回 2D 舞台。 此外，您也可以在「時間軸」面板上，將圖層標記為紋理圖層，以便在圓柱體或圓球上彎曲，做為兩個不同的文件類型之用。

此外，Animate 還可讓您透過一組豐富的 API 的協助，在執行階段管理虛擬實境動畫。 例如，您可以在使用者按一下按鈕時在虛擬實境環境中引入一些物件。 

 Animate 中的虛擬實境 (360) 和虛擬實境 (全景) 是 2018 年 10 月發行的 Beta 版本。

虛擬實境文件類型

虛擬實境 (VR) 有兩個文件類型： 

VR 全景

  • 使用這個文件類型可以為虛擬實境應用程式建立全景內容。 
  • 在這個文件類型中，直接在紋理圖層上繪製的內容會在圓柱體上彎曲。
  • 您可以選擇讓紋理圖層具有全景影像，或是要繪製背景。 
  • Animate 會將您建立的 2D 動畫轉換為全景內容及互動功能。 

VR 360

  • 使用這個文件類型可以為虛擬實境應用程式建立 360 度內容。  
  • 在這個文件類型中，直接在紋理圖層上繪製的內容會在圓球上彎曲。
  • 您可以選擇具有等量矩形影像或是繪製內容。 
  • Animate 會將您建立的 2D 動畫轉換為 360 度內容及互動功能。
啟動畫面中的 Virtual Reality 360 和全景
啟動畫面中的 Virtual Reality 360 和全景

編寫和發佈虛擬實境內容

請使用下列步驟，在 Animate 中建立虛擬實境內容：

在舞台上匯入 360 或全景影像，做為背景。

如果影像大小不小，您可以調整舞台檢視的大小。

  • 若要設定大小，請選取「修改 > 文件」
  •  按一下「符合內容」

選擇視窗右上角的「舞台置中」，將影像設定在畫面中央。 

若要將圖層建立做為紋理圖層，請按一下時間軸面板中的「為所有圖層建立紋理換行」圖示，如下列螢幕快照所示：

為圖層建立紋理換行
為圖層建立紋理換行

紋理圖層會沿著圓柱體或圓球彎曲，視所選的文件類型而定。

在舞台增加物件，視您的資源而定，為物件增加傳統或移動補間動畫，然後建立您的動畫。 

VR 360 舞台
VR 360 舞台

上面的螢幕擷取畫面示範 Animate 的配置檢視，即 VR 360 文件類型中的等量矩形影像、小鳥與導引的移動路徑，以及時間軸中的傳統補間動畫。 

使用「視窗 > VR 檢視」預覽內容。

使用「VR 檢視」預覽 VR 內容
使用「VR 檢視」預覽 VR 內容

按一下「VR 檢視」面板中的「啟動 VR 檢視」按鈕。 

「VR 檢視」面板
「VR 檢視」面板

在「VR 檢視」預覽模式中，若要將內容重設為初始狀態，請使用「重設」按鈕。 「VR 檢視」不會自動反映編寫舞台上的任何變更。 若要在配置環境檢視您的資源上套用的變更，請按一下「重新整理」。 

「VR 檢視」的「重新整理」和「重設」選項
「VR 檢視」的「重新整理」和「重設」選項

您可以在預覽面板中移動 MovieClip 實體。 當您將滑鼠停留在物件上方時，Animate 會自動偵測物件。 當您如下面螢幕快照所示，將滑鼠停留在物件上方時，游標形狀會變成橫線圖示。視選取的文件類型而定，您可以沿著圓柱體或圓球路徑移動物件。

若要圍繞「VR 檢視」視窗平移，請按一下預覽畫面並進行拖曳。 

可移動物件的橫線圖示
可移動物件的橫線圖示

使用「檔案 > 發佈」或 Ctrl + Enter，以發佈內容。 發佈時，影像會在 Animate 的圓柱體或圓球網格上彎曲。 您可以在那些圖層增加更多圖層和動畫內容。

範例 Virtual Reality 360 發佈的輸出如下面的動畫 GIF 所示。 

VR 360 輸出範例
VR 360 輸出範例

VR 全景輸出範例
VR 全景輸出範例

當您發佈虛擬實境內容時，可以選擇使用裝載的 JavaScript 元件庫做為執行階段。 根據預設，Animate 會針對發佈的內容使用裝載的元件庫中的執行階段。 如果您希望將執行階段與所發佈的輸出一起封裝，可以在「發佈設定」中取消核取選項。 

發佈設定
元件庫的發佈設定

使用虛擬實境將動畫現代化

虛擬實境是市場中的主要趨勢。 想要為您的內容帶來虛擬實境嗎？ 請觀賞此範例結尾的教學課程並依照下列步驟執行。

在「首頁」索引標籤中，按一下「進階」。

選取「VR 全景」並按一下「建立」。

如何使用 Animate 建立全景內容

請觀看影片，以了解如何在全景檢視中加入更多效果，以提升虛擬體驗。

關於 WebGL-glTF 匯出 (標準和延伸) 的影片教學課程

影片示範如何使用 WebGL-glTF 匯出 (標準和延伸)

使用 3D 內容

您可以使用虛擬實境文件類型，將 3D 模型內容 (.glb 檔案) 匯入您的 Animate 專案並建立 3D 內容。

建立 VR (360) 預覽或 VR (全景) 類型的文件。

選擇「檔案 > 匯入」並瀏覽至 .glb 檔案，以匯入舞台或元件庫。

將 3D 內容匯入配置
將 3D 內容匯入舞台

與影片片段物件相似，增加動畫和互動功能並進行發佈。

您也可以在「VR檢視」中預覽3D模型。 

在執行階段使用虛擬實境

此外，Animate 還可讓您透過 API 的協助，在執行階段管理虛擬實境動畫。 例如，您可以在使用者按一下按鈕時在 360 虛擬實境環境中引入一些物件。 

虛擬實境執行階段 API 的清單如下所列： 

套件：anWebgl

Properties

名稱

型別/類別

存取

說明

範例

Stage

Stage

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

play(): void

播放影片片段的動畫。

anWebgl.root.getChildByName("name")。play();
（或）

this.play(); 

Stop

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

Boolean

RW

物件可見度

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

類別：DisplayObjectContainer

繼承：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("camera position 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("camera position 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()

將攝影機角度重設為零。

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

 

更多類似項目

Adobe Animate 標誌

使用 Animate 製作互動式動畫
為卡通、橫幅、遊戲和網頁設計動畫。

開啟應用程式
開啟應用程式

上一步

最佳作法 - 使用 Animate 做廣告

學習

card-link-icon

直接利用應用程式提供的逐步教學影片和實作指導學習。

社群

card-link-icon

加入討論、尋找解答、向專家學習並分享您的知識。

Adobe 首頁

card-link-icon

存取您最愛的 Creative Cloud 應用程式、服務、檔案管理等。