Import a 360 or panoramic image on stage for background.
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.
There are two document types for Virtual Reality (VR):
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.
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.
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.
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.
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.
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(); 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");
|
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; |
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();
|
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();
|
Logige oma kontole sisse