User Guide Cancel

Virtual Reality authoring and publishing

Search
  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Working with video cue points
    9. Draw and create objects with Animate
    10. Reshape lines and shapes
    11. Strokes, fills, and gradients with Animate CC
    12. Working with Adobe Premiere Pro and After Effects
    13. Color Panels in Animate CC
    14. Opening Flash CS6 files with Animate
    15. Work with classic text in Animate
    16. Placing artwork into Animate
    17. Imported bitmaps in Animate
    18. 3D graphics
    19. Working with symbols in Animate
    20. Draw lines & shapes with Adobe Animate
    21. Work with the libraries in Animate
    22. Exporting Sounds
    23. Selecting objects in Animate CC
    24. Working with Illustrator AI files in Animate
    25. Apply patterns with the Spray Brushtool
    26. Applying blend modes
    27. Arranging objects
    28. Automating tasks with the Commands menu
    29. Multilanguage text
    30. Using camera in Animate
    31. Using Animate with Adobe Scout
    32. Working with Fireworks files
    33. Graphic filters
    34. Sound and ActionScript
    35. Drawing preferences
    36. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Best practices - Accessibility guidelines
    12. Accessibility in the Animate workspace
    13. Writing and managing scripts
    14. Enabling Support for Custom Platforms
    15. Custom Platform Support Overview
    16. Creating accessible content
    17. Working with Custom Platform Support Plug-in
    18. Debugging ActionScript 3.0
    19. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Export QuickTime video files
    9. Controlling external video playback with ActionScript
    10. Best practices - Tips for creating content for mobile devices
    11. Best practices - Video conventions
    12. Best practices - SWF application authoring guidelines
    13. Best practices - Structuring FLA files
    14. Best Practices to optimize FLA files for Animate
    15. ActionScript publish settings
    16. Specify publish settings for Animate
    17. Exporting projector files
    18. Export Images and Animated GIFs
    19. HTML publishing templates
    20. Working with Adobe Premiere Pro and After Effects
    21. Quick share and publish your animations

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

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.

  1. In the Home tab, click Advanced.

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

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

 

More like this

Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy