Virtual Reality authoring and publishing

Search
Adobe Animate User Guide

On this page

Applies to: Adobe Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Animate introduces VR 360 and VR Panorama document types to help you create engaging content with ease. Also, you can use the new virtual reality document type to import 3D models (as .glb files) to your Animate project and create animations on 3D content. 

To preview content created in VR document types, you can use the newly introduced VR View panel. You can click and move MovieClip instances in the VR View panel. Animate detects the objects automatically when you click and move them around. VR View enables you to place the objects in the 3d space. The changes made in placement of the objects (movie clip) in the VR View are reflected back to the 2d stage automatically. You can also mark layers as texture layers on the Timeline panel, to be wrapped on a cylinder or a sphere for the two respective document types.

Animate also lets you manage the virtual reality animations at runtime with the help of a rich set of APIs. For example, you can introduce some objects in the virtual reality environment when a user clicks a button. 

Note:

Virtual Reality (360) and Virtual Reality (Panorama) in Animate are Beta versions for October 2018 release. 

Virtual reality document types

There are two document types for Virtual Reality (VR): 

VR Panorama

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • Use this document type to create panoramic content for Virtual Reality applications. 
  • In this document type, the content which is drawn directly on texture layers is wrapped on a cylinder.
  • You can choose to either have a panoramic image on texture layer or draw a background. 
  • Animate converts 2D animations that you create into panoramic content along with interactivity. 

VR 360

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • Use this document type to create 360-degree content for Virtual Reality applications.  
  • In this document type, the content which is drawn directly on texture layers is wrapped on a sphere.
  • You can choose to either have a equirectangular image or draw the content. 
  • Animate converts 2D animations that you create into 360-degree content along with interactivity.
Virtual Reality 360 and panorama in launch screen
Virtual Reality 360 and panorama in launch screen

Authoring and publishing virtual reality content

Use the following steps to create virtual reality content in Animate:

  1. Import a 360 or panoramic image on stage for background.

    If the image size is large, you can adjust the size of stage view.

    • To set the size, select Modify > Document
    •  Click Match Contents

    Choose Center Stage icon at upper-right corner of window, to set the image to the center of your screen. 

  2. To create a layer as texture layer, click the Create Texture Wrapping for all Layers icon in timeline panel, as shown below in the screenshot:

    Create texture wrapper for layers
    Create texture wrapper for layers

    The texture layer wraps around the cylinder or sphere, depending on the document type you selected.

  3. Add objects to the stage, add classic or motion tweening to the objects depending upon your assets, and create your animation. 

    VR 360 stage
    VR 360 stage

    The screenshot shown above demonstrates the staging view of Animate with the equirectangular image in VR 360 document type, a bird with a guided motion path, and classic tweening in the timeline. 

  4. Preview the content using Windows > VR View.

    Using VR View to preview VR content
    Using VR View to preview VR content

    Click Launch VR View button in the VR View panel. 

    VR View panel
    VR View panel

    In VR View preview mode, to reset the content to its initial state, use Reset button. VR View does not automatically reflect any changes on the authoring stage. To view the changes applied on your assets in staging environment, click Refresh. 

    Refresh and Reset options of VR View
    Refresh and Reset options of VR View

    You can move MovieClip instances in the preview mode. Animate detects the objects automatically when you hover the mouse on them. The cursor shape changes to cross bar icon when you hover the mouse on objects as shown in the screenshot below.You can move objects along a cylinder or a sphere path depending on the selected document type.

    To pan around the VR View window, click on preview screen and drag around. 

    Cross-bar icon to move objects
    Cross-bar icon to move objects

  5. Use File > Publish or Ctrl + Enter to publish the content. When you publish, the image wraps on a cylindrical or sphere mesh in Animate. You can add more layers and animation content on those layers.

    The sample Virtual Reality 360 published output appears as shown in the below animated GIF. 

    VR 360 output sample
    VR 360 output sample
    VR panorama output sample
    VR panorama output sample

    When you publish the virtual reality content, you can choose to use hosted JavaScript libraries as runtime. By default, the Animate uses the runtime for published content from the hosted libraries. You can uncheck the option in Publish Settings if you want to package runtime with your published output. 

    Publish settings
    Publish settings for libraries

Using 3D content

You can use the virtual reality document type to import 3D models (.glb files) to your Animate project and create 3D content.

  1. Create a document of type VR (360) preview or VR (panorama).

  2. Choose File > Import and browse to the .glb file to import into stage or library.

    Importing 3D content to staging
    import 3D content to stage

  3. Add animations and interactivity similar to movie clip objects and publish.

    You can also preview the 3D model in VR View. 

Using virtual reality at runtime

Animate also lets you manage the virtual reality animations at runtime with the help of APIs. For example, you can introduce some objects in a 360 virtual reality environment when a user clicks a button. 

The list of virtual reality runtime APIs are as follows: 

Package : anWebgl

Properties

Name

Type / Class

Access

Description

Example

Stage

Stage

RW

Get / set stage properties

anWebgl.stage

virtualCamera

VirtualCamera

RW

Access default camera

anWebgl.virtualCamera

Root

MovieClip

RO

Top-most display object (Current Scene timeline).

anWebgl.root

Methods

Name

Prototype

Description

Example

addGLBFile

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

Load the 3d model from specified GLB file

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

playAll

playAll() : void

Play animaion for all Movieclips including root

 anWebgl.playAll();

stopAll

stopAll() : void

Stop animation for all Movieclips including root

anWebgl.stopAll();

Class: MovieClip

Inherits: DisplayObjectContainer

Properties

Methods

Name

Prototype

Description

Example

Play

play(): void

Plays animation for the movie clip.

anWebgl.root.getChildByName("name").play();
(or)

this.play(); 

Stop

stop(): void

Stops animation for movieclip

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

 

playAll

playAll() : void

Plays animation for all movie clips including root.

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

 

stopAll

stopAll():void

Stops animation for all movie clips including root.

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

 

Class: DisplayObject

Inherits: IEventDispatcher

Name

Prototype

Description

Example

hitTestPoint

 hitTestPoint(x, y, Boolean).

returns displayObject/displayObjectContainer/movieClip based on the type of the hit object.

x and y are point cordinates on the screen.

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

Name

Type / Class

Access

Description

Example

X

Number

RW

Translation on X axis

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

 

Y

Number

RW

Translation on Y axis

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

 

Z

Number

RW

Translation on Z axis

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

 

scaleX

Number

RW

Scale along X axis

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

 

scaleY

Number

RW

Scale along Y axis

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

 

scaleZ

Number

RW

Scale along Z axis

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

 

rotationX

Number

RW

Rotation along X axis

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

(or)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Rotation along Y axis

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

 

rotationZ

Number

RW

Rotation along Z axis

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

 

Parent

DisplayObjectContainer

RO

Parent container

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

 

Visible

Boolean

RW

Object visibility

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

Class: DisplayObjectContainer

Inherits: DisplayObject

Name

Prototype

Description

Example

numChildren

numChildren:num

returns number of children of an object

 anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

removes argument object if present

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

returns true if the argument object is a child, else false

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

returns child at argument index

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String): DisplayObject

returns child with argument name if it exists

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Class: Stage

Properties

Name

Access

Description

Example

stageWidth

RO

Width of stage

 anWebgl.stage.stageWidth

stageHeight

RO

Height of stage

 anWebgl.stage.stageHeight

Color

RW

Color of stage background

 anWebgl.stage.color

Class: VirtualCamera

Methods

Name

Prototype

Description

Example

getCamera

getCamera()

Get the camera object. To get or set the camera properties at runtime.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

Return object with x,y, and z properties that specify current location of camera.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

Move camera to absolute position given by input parameters. Default value = 0.

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

 

moveBy

moveBy()

Move camera relative to current position.

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

 

resetPosition

resetPosition()

Reset camera position to the original position i.e (0,0,0).


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

 

SetRotation

SetRotation()

Rotate camera by absolute angle given as input parameters.

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

 

resetRotation

resetRotation()

Reset camera angle to zero.

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