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.

- 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.

- 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.

-
Using VR View to preview VR contentVR 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 ViewYou 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 -
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 sampleVR panorama output sampleWhen 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 for libraries
You can use the virtual reality document type to import 3D models (.glb files) to your Animate project and create 3D content.
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.
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 |
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(); |
Name |
Prototype |
Description |
Example |
Play |
play(): void |
Plays animation for the movie clip. |
anWebgl.root.getChildByName("name").play(); 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();
|
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");
|
Y |
Number |
RW |
Translation on Y axis |
var name = anWebgl.root.getChildByName("name");
|
Z |
Number |
RW |
Translation on Z axis |
var name = anWebgl.root.getChildByName("name");
|
scaleX |
Number |
RW |
Scale along X axis |
var root = anWebgl.root;
|
scaleY |
Number |
RW |
Scale along Y axis |
var root = anWebgl.root;
|
scaleZ |
Number |
RW |
Scale along Z axis |
var root = anWebgl.root;
|
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;
|
Visible |
Boolean |
RW |
Object visibility |
var root = anWebgl.root; |
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); |
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 |
Name |
Prototype |
Description |
Example |
getCamera |
getCamera() |
Get the camera object. To get or set the camera properties at runtime. |
let cam = anWebgl.virtualCamera.getCamera();
|
getPosition |
getPosition() |
Return object with x,y, and z properties that specify current location of camera. |
let cam = anWebgl.virtualCamera.getCamera();
|
setPosition |
setPosition() |
Move camera to absolute position given by input parameters. Default value = 0. |
let cameraPos = {x: 10, y:10, z:10};
|
moveBy |
moveBy() |
Move camera relative to current position. |
let moveByPos = {x: 10, y:10, z:10};
|
resetPosition |
resetPosition() |
Reset camera position to the original position i.e (0,0,0). |
|
SetRotation |
SetRotation() |
Rotate camera by absolute angle given as input parameters. |
let __rotation__ = {x: 10, y:10, z:10};
|
resetRotation |
resetRotation() |
Reset camera angle to zero. |
anWebgl.virtualCamera.getCamera().resetRotation();
|