User Guide Cancel

3D graphics

Search
Animate

Animate

Open app
  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. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. 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. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. 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. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

About 3D graphics in Animate

Animate allows you to create 3D effects by moving and rotating movie clips in 3D space on the Stage. Animate represents 3D space by including a z axis in the properties of each movie clip instance. You add 3D perspective effects to movie clip instances by moving them along their x axis or rotating them around their x or y axis using the 3D Translation and 3D Rotation tools. In 3D terminology, moving an object in 3D space is called a translation and rotating an object in 3D space is called a transformation. Once you have applied either of these effects to a movie clip, Animate considers it a 3D movie clip and a colored axes indicator appears overlaid onto the movie clip whenever it is selected.

To make an object appear nearer or further away from the viewer, move it along its z axis with the 3D Translation tool or the Property inspector. To give the impression of an object that is at an angle to the viewer, rotate the movie clip around its z axis with the 3D Rotation tool. By using these tools in combination, you can create realistic perspective effects.

Both the 3D Translation and the 3D Rotation tools allow you to manipulate objects in global or local 3D space. Global 3D space is the Stage space. Global transforms and translations are relative to the Stage. Local 3D space is the movie clip space. Local transforms and translations are relative to the movie clip space. For example, if you have a movie clip containing several nested movie clips, local 3D transforms of the nested movie clips are relative to the drawing area inside the container movie clip. The default mode of the 3D Translation and Rotation tools is global. To use them in local mode, click the Global toggle button in the Options section of the Tools panel.

By using the 3D properties of movie clip instances in your FLA file, you can create a variety of graphic effects without duplicating movie clips in the library. However, when you edit a movie clip from the library, 3D transforms and translations that have been applied are not visible. When editing the contents of a movie clip, only 3D transforms of nested movie clips are visible.

The Stage with a movie clip rotated in global 3D space.

The Stage with a movie clip containing a nested movie clip rotated in local 3D space.

Note:

Once a 3D transform is added to a movie clip instance, its parent movie clip symbol cannot be edited in Edit in Place mode.

If you have 3D objects on the Stage, you can add certain 3D effects to all of those objects as a group by adjusting the Perspective Angle and Vanishing Point properties of your FLA file. The Perspective Angle property has the effect of zooming the view of the Stage. The Vanishing Point property has the effect of panning the 3D objects on the Stage. These settings only affect the appearance of movie clips that have a 3D transform or translation applied to them.

In the Animate authoring tool, you can control only one viewpoint, or camera. The camera view of your FLA file is the same as the Stage view. Each FLA file has only one perspective Angle and Vanishing Point setting.

To use the 3D capabilities of Animate' , the publish settings of your FLA file must be set to Flash Player 10 and ActionScript 3.0. Only movie clip instances can be rotated or translated along the z axis. Some 3D capabilities are available through ActionScript that are not available directly in the Animate user interface, such as multiple Vanishing Points and separate cameras for each movie clip. Using ActionScript 3.0, you can apply 3D properties to objects such as text, FLV Playback components, and buttons, in addition to movie clips.

Note:

The 3D tools cannot be used on objects on mask layers and layers containing 3D objects cannot be used as mask layers. For more information about mask layers, see Using mask layers.

Move objects in 3D space

You move movie clip instances in 3D space with the 3D Translation tool . When you select a movie clip with the tool, its three axes, X, Y, and Z, appear on the Stage on top of the object. The x axis is red, the y axis is green, and the z axis is blue.

The default mode of the 3D Translation tool is global. Moving an object in global 3D space is the same as moving it relative to the Stage. Moving an object in local 3D space is the same as moving it relative to its parent movie clip if it has one. To toggle the 3D Translation tool between global and local modes, click the Global toggle button in the Options section of the Tools panel while the 3D Translation tool is selected. You can temporarily toggle the mode from global to local by pressing the D key while dragging with the 3D Translation tool.

The 3D Translation and Rotation tools occupy the same space in the Tools panel. Click and hold the active 3D tool icon in the Tools panel to select the currently inactive 3D tool.

By default, selected objects that have 3D translation applied appear with a 3D axis overlay on the Stage. You can turn off this overlay in the General section of Animate Preferences.

The 3D Translation tool overlay.

Note:

Changing the z axis position of a 3D movie clip will cause the movie clip to appear to change its x and y position as well. This is because movement along the z axis follows the invisible perspective lines which radiate from the 3D vanishing point (set in the 3D symbol instance Property inspector) to the edges of the Stage.

Move a single object in 3D space

  1. Select the 3D Translation tool  in the Tools panel (or press the G key to select it).
  2. Set the tool to Local or Global mode.

    Be sure that the tool is in the mode you want mode by checking the Global toggle button in the Options section of the Tools panel. Click the button or press the D key to toggle the mode.

  3. Select a movie clip with the 3D Translation tool  .
  4. To move the object by dragging with the tool, move the pointer over the x-, y-, or z-axis controls. The pointer changes when over any of the controls.

    The x- and y-axis controls are the arrow tips on each axis. Drag one of these controls in the direction of its arrow to move the object along the selected axis. The z-axis control is the black dot at the center of the movie clip. Drag the z-axis control up or down to move the object on the z axis.

  5. To move the object using the Property inspector, enter a value for X, Y, or Z in the 3D Position and View section of the Property inspector.

    When you move an object on the z axis, its apparent size changes. The apparent size appears in the Property inspector as the Width and Height values in the 3D Position and View section of the Property inspector. These values are read-only.

Move a multiple-object selection in 3D space

When you select multiple movie clips, you can move one of the selected objects with the 3D Translation tool  and the others move in the same way.

  • To move each object in the group in the same way in global 3D space, set the 3D Translation tool to global mode and then drag one of the objects with the axis controls. Shift-double-click one of the selected objects to move the axis controls to that object.

  • To move each object in the group in the same way in local 3D space, set the 3D Translation tool to local mode and then drag one of the objects with the axis controls. Shift-double-click one of the selected objects to move the axis controls to that object.

You can also move the axis controls to the center of the multiple selection by double-clicking the z-axis control. Shift-double-click one of the selected objects to move the axis controls to that object.

Rotate objects in 3D space

You rotate movie clip instances in 3D space with the 3D Rotation tool . A 3D rotation control appears on top of selected objects on the Stage. The X control is red, the Y control is green, and the Z control is blue. Use the orange free rotate control to rotate around the X and Y axes at the same time.

The default mode of the 3D Rotation tool is global. Rotating an object in global 3D space is the same as moving it relative to the Stage. Rotating an object in local 3D space is the same as moving it relative to its parent movie clip if it has one. To toggle the 3D Rotation tool between global and local modes, click the Global toggle button in the Options section of the Tools panel while the 3D Rotation tool is selected. You can temporarily toggle the mode from global to local by pressing the D key while dragging with the 3D Rotation tool.

The 3D Rotation and Translation tools occupy the same space in the Tools panel. Click and hold the active 3D tool icon in the Tools panel to select the currently inactive 3D tool.

By default, selected objects that have 3D rotation applied appear with a 3D axis overlay on the Stage. You can turn off this overlay in the General section of Animate Preferences.

The Global 3D Rotation tool overlay.

The Local 3D Rotation tool overlay.

Rotate a single object in 3D space

  1. Select the 3D Rotation tool  in the Tools panel (or press the W key).

    Verify that the tool is in the mode that you want by checking the Global toggle button in the Options section of the Tools panel. Click the button or press the D key to toggle the mode between global and local.

  2. Select a movie clip on the Stage.

    The 3D Rotation controls appear overlaid on selected object. If the controls appear in a different location, double-click the control center point to move it to the selected object.

  3. Place the pointer over one of the four rotation axis controls.

    The pointer changes when over one of the four controls.

  4. Drag one of the axis controls to rotate around that axis, or the free rotate control (outer orange circle) to rotate x and y simultaneously.

    Drag the X axis control left or right to rotate around the x axis. Drag the y-axis control up or down to rotate around the y axis. Drag the z-axis control in a circular motion to rotate around the z axis.

  5. To relocate the rotation control center point relative to the movie clip, drag the center point. To constrain the movement of the center point to 45° increments, press the Shift key while dragging.

    Moving the rotation control center point lets you control the effect of the rotation on the object and its appearance. Double-click the center point to move it back to the center of the selected movie clip.

    The location of the rotation control center point for the selected object appears in the Transform panel as the 3D Center Point property. You can modify the location of the center point in the Transform panel.

Rotate a multiple-object selection in 3D space

  1. Select the 3D Rotation tool  in the Tools panel (or press the W key).

    Verify that the tool is in the mode that you want by checking the Global toggle button in the Options section of the Tools panel. Click the button or press the D key to toggle the mode between global and local.

  2. Select multiple movie clips on the Stage.

    The 3D Rotation controls appear overlaid on the most recently selected object.

  3. Place the pointer over one of the four rotation axis controls.

    The pointer changes when over one of the four controls.

  4. Drag one of the axis controls to rotate around that axis, or the free rotate control (outer orange circle) to rotate X and Y simultaneously.

    Drag the x-axis control left or right to rotate around the x axis. Drag the y-axis control up or down to rotate around the y axis. Drag the z-axis control in a circular motion to rotate around the z axis.

    All of the selected movie clips rotate around the 3D center point which appears at the center of the rotation controls.

  5. To relocate the 3D rotation control center point, do one of the following:

    • To move the center point to an arbitrary location, drag the center point.

    • To move the center point to the center of one of the selected movie clips, Shift-double-click the movie clip.

    • To move the center point to the center of the group of selected movie clips, double-click the center point.

    Changing the location of the 3D rotation center point lets you control the effect of the rotation on the objects.

    The location of the rotation control center point for the selected object appears in the Transform panel as the 3D Center Point. You can modify the location of the center point in the Transform panel.

Rotate a selection with the Transform panel

  1. Open the Transform panel (Window > Transform).
  2. Select one or more movie clips on the Stage.
  3. In the Transform panel, enter the desired values in the 3D Rotation X, Y, and Z fields to rotate the selection. These fields contain hot text, so you can drag the values to change them.
    Note:

    The 3D rotation takes place in global or local 3D space, depending on the current mode of the 3D Rotation tool in the Tools panel.

  4. To move the 3D rotation point, enter the desired values in the 3D Center Point X, Y, and Z fields.

Adjusting the Perspective Angle

The Perspective Angle property of a FLA file controls the apparent angle of view of 3D movie clips on the Stage.

Increasing or decreasing the Perspective Angle affects the apparent size of 3D movie clips and their location relative to the edges of the Stage. By increasing the Perspective Angle, you make 3D objects appear closer to the viewer. By decreasing the Perspective Angle property, you make 3D objects appear further away. The effect is like zooming in or out with a camera lens which changes the angle of view through the lens.

The Stage with a Perspective Angle of 55.

The Stage with a Perspective Angle of 110.

The Perspective Angle property affects all movie clips with 3D translation or rotation applied to them. The Perspective Angle does not affect other movie clips. The default Perspective Angle is 55° of view, like a normal camera lens. The range of values is from 1° to 180°.

To view or set the Perspective Angle in the Property inspector, a 3D movie clip must be selected on Stage. Changes to the Perspective Angle are visible on the Stage immediately.

The Perspective Angle changes automatically when you change the Stage size so that the appearance of 3D objects does not change. You can turn off this behavior in the Document Properties dialog box.

To set the Perspective Angle:

  1. On the Stage, select a movie clip instance that has 3D rotation or translation applied to it.
  2. In the Property inspector, enter a new value in the Perspective Angle field, or drag the hot text to change the value.

Adjust the Vanishing Point

The Vanishing Point property of a FLA file controls the orientation of the z axis of 3D movie clips on the Stage. The z axes of all 3D movie clips in a FLA file recede toward the Vanishing Point. By relocating the Vanishing Point, you change the direction that an object moves when translated along its z axis. By adjusting the position of the Vanishing Point, you can precisely control the appearance of 3D objects and animation on the Stage.

For example, if you locate the Vanishing Point at the upper-left corner of the Stage (0, 0), then increasing the value of the Z property of a movie clip moves the movie clip away from the viewer and toward the upper-left corner of the Stage.

Because the Vanishing Point affects all 3D movie clips, changing it also changes the position of all movie clips that have a z-axis translation applied.

The Vanishing Point is a document property that affects all movie clips that have z-axis translation or rotation applied to them. The Vanishing Point does not affect other movie clips. The default location of the Vanishing Point is the center of the Stage.

To view or set the Vanishing Point in the Property inspector, a 3D movie clip must be selected on Stage. Changes to the Vanishing Point are visible on the Stage immediately.

To set the Vanishing Point:

  1. On the Stage, select a movie clip that has 3D rotation or translation applied to it.
  2. In the Property inspector, enter a new value in the Vanishing Point field, or drag the hot text to change the value. Guides indicating the location of the Vanishing Point appear on the Stage while dragging the hot text.
  3. To move the Vanishing Point back to the center of the Stage, click the Reset button in the Property inspector.
Note:

If you resize the Stage, the Vanishing Point does not update automatically. To maintain the 3D look created by a specific placement of the Vanishing Point, you will need to reposition the Vanishing Point relative to the new Stage size.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy