使用手冊 取消

虛擬實境編寫和發佈

 

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 中建立虛擬實境內容:

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

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

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

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

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

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

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

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

    VR 360 舞台
    VR 360 舞台

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何使用 Animate 建立全景內容

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

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

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

使用 3D 內容

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

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

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

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

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

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

在執行階段使用虛擬實境

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

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

套件:anWebgl

Properties

名稱

類型 / Class

存取

說明

範例

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);

名稱

類型 / Class

存取

說明

範例

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();

 

更快、更輕鬆地獲得協助

新的使用者?