虛擬實境編寫和發佈

  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 Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    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. 搭配使用 Animate 與 Adobe Scout
    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 for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    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. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

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 會針對發佈的內容使用裝載的元件庫中的執行階段。如果您希望將執行階段與所發佈的輸出一起封裝,可以在「發佈設定」中取消核取選項。 

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

使用 3D 內容

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

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

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

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

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

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

在執行階段使用虛擬實境

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

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

套件:anWebgl

屬性

名稱

類型/類別

存取

說明

範例

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

屬性

方法

名稱

原型

說明

範例

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

屬性

名稱

存取

說明

範例

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 標誌

登入您的帳戶