Virtual Reality authoring and publishing

Last updated on May 24, 2023

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.

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

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

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

Authoring and publishing virtual reality content

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:

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.

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.

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

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.

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.

Modernize animations with virtual reality

Virtual reality is a trend that is predominant in the market. Want to bring virtual reality to your content? Watch the tutorial at the end of this example and follow these steps.

In the Home tab, click Advanced.

Select VR Panorama and click Create.

How to create panoramic content with Animate

Watch the video to learn how to add more effects in panoramic view to boost up a virtual experience.

A video tutorial on WebGL-glTF Export (Standard and Extended)

Video demonstrating how to use WebGL-glTF Export (Standard and Extended)

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.

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.

Importing 3D content to staging — 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.

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

More like this

Create interactive animations with Animate
Design animations for cartoons, banners, games, and the web.

Open the app

Best practices - Advertising with Animate

Learn

Learn with step-by-step video tutorials and hands-on guidance right in the app.

Community

Join discussions, find answers, learn from experts, and share your knowledge.

Adobe Home

Access your favorite Creative Cloud apps, services, file management, and more.