Learn how to useauthor and publish Virtual Reality content in Animate

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.

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

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.

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

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

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.

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

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

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

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.

Preview the content using Windows > VR View.

Using VR View to preview VR content

Click Launch VR View button in the 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

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

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 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 for libraries

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

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

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

import 3D content to stage

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

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

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

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices | Online Privacy Policy

Virtual Reality authoring and publishing

Virtual reality document types

VR Panorama

VR 360

Authoring and publishing virtual reality content

Using 3D content

Using virtual reality at runtime

Ask the Community

Contact Us

Virtual reality document types

VR Panorama

VR 360

Authoring and publishing virtual reality content

Using 3D content

Using virtual reality at runtime

More like this