Elements

Use this glossary to learn about the various elements used in creating animations.

Symbols

A symbol is a graphic, button, or movie clip that you create once in the Animate authoring environment or by using the SimpleButton (AS 3.0) and MovieClip classes. You can then reuse the symbol throughout your document or in other documents.

A symbol can include artwork that you import from another application. Any symbol that you create automatically becomes part of the library for the current document.

An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance.

Movie clips

Use movie clip symbols to create reusable pieces of animation in Adobe Animate. Movie clips have their own multiframe timeline that is independent from the main movie's Timeline—think of movie clips as mini-timelines nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances.

You can also place movie clip instances inside the timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript.

For more information on Movie Clips, read the article on Working with scenes in Animate and watch the video tutorial on Creating bone tool animations.

Graphics

Graphics in motion tween animations

Graphic symbol is a collection of frames used in animations or single frame mode. An animated graphic symbol is tied to the Timeline of the document in which the symbol is placed.

In contrast, a movie clip symbol has its own independent Timeline. Animated graphic symbols, because they use the same Timeline as the main document, display their animation in document-editing mode. 

Use graphic symbols  for static images and to create reusable pieces of animation that are tied to the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.

Graphic Looping

Every graphic symbol instance has looping properties (that is loop mode, first frame, last frame) associated with it. Please see Looping section under object tab in Property inspector to change looping properties of selected symbol instance.

Graphic_Lopping
Graphic Lopping

Looping modes:

There are five looping modes: loop, play once, single frame, reverse play once, reverse loop. Looping mode associated with symbol instance decides playback behavior of that instance.

Names of loop modes are self-explanatory:

  • Loop: Plays the frames of the Graphic from ‘first frame’ to ‘last frame’ in sequence and keeps looping until there are frames on the parent timeline’s frame span.
  • Play Once: Plays the frames of the Graphic only once from ‘first frame’ to ‘last frame’. After that instance stays at ‘last frame’ for the rest of the frames in the parent timeline’s frame span.
  • Single Frame: Plays only one frame of Graphic that is pointed by the ‘first frame’ property.
  • Reverse Play Once: Plays the frames of the Graphic only once in reverse order that is starting from ‘last frame’ to ‘first frame’. After that instance stays at ‘first frame’ for the rest of the frames in the parent timeline’s frame span.
  • Reverse Loop: Plays the frames of the Graphic in reverse order that is starting from ‘last frame’ to ‘first frame’ in sequence & keep looping over in reverse order until there are frames on the parent timeline’s frame span.
  • First frame: ‘First' specifies from which frame of Graphic, the loop playback of symbol instance should begin.
  • Last frame: ‘Last’ specifies up to which frame of Graphic, the loop playback should go. By default, ‘Last frame’ is not set. In that case, the last frame of the Graphic timeline is assumed as the last frame. However, the user can change it to any other frame number.

Click the link to read more about 3D graphics in Animate.

Button

Buttons in motion tween animation

Button symbols are a special type of four-frame interactive movie clip in Adobe Animate. When you select the button type when creating a symbol, Animate creates a Timeline with four frames. The first three frames display the button's three possible states: Up, Over, and Down; the fourth frame defines the active area of the button.

The button symbol timeline doesn't actually play linearly like a normal timeline; it reacts to mouse pointer movement and actions by jumping to the appropriate frame. To make a button interactive, place an instance of the button symbol on the Stage and assign actions to the instance.

You assign the actions to the root timeline of the Animate file. If the button is inside a movie clip, you can add the actions to the movie clip's timeline. Do not add actions to the timeline of the button symbol.

For more information about buttons, see Creating buttons using Animate.

Basic Shapes

Raw shapes in Animate CC

The Oval and Rectangle tools let you create these basic geometric shapes, and apply strokes, fills, and specify rounded corners. In addition to the Merge and Object drawing modes, the Oval and Rectangle tools also provide the Primitive Object drawing mode.

When you create rectangles or ovals using the Rectangle Primitive or Oval Primitive tools, Animate draws the shapes as separate objects. These shapes unlike the shapes you create using Object Drawing mode. The primitive shape tools let you specify the corner radius of rectangles using controls in the Property inspector.

To learn how to create basic lines and shapes, see Drawing lines and shapes using Animate and Drawing and creating objects in Animate.

Drawing objects

When you draw vector graphics in Adobe Animate with the Object Drawing mode enabled at the bottom of the Tools panel, you create shapes referred to as drawing objects. These are separate graphic objects that do not automatically merge together when overlaid on other objects.

By choosing Object Drawing mode, you can overlap shapes on the same layer without altering their appearance if you move them apart, reposition, or rearrange their appearance.

In an Object Drawing mode, Animate creates each shape as a separate object that you can individually manipulate, similar to when objects are grouped. When a drawing tool is in Object Drawing mode, the shapes you create with it are self-contained. The stroke and fill of a shape are not separate elements, and shapes that overlap do not alter one another. When you select a shape created using Object Drawing mode, the shape displays a rectangular bounding box to identify it.

See Draw and create objects in Animate and Draw lines and shapes using Animate to view detailed information on drawing objects.

Bitmap

Bitmaps in Animate CC motion tween animation

Bitmap graphics are used to display photographic content, such as images captured with a digital camera. These files display individual pixels that contain unique color values; when viewed together, the pixels include the photo or image.

Bitmap graphics should not be scaled. If you want to import bitmap graphics into Animate, use an image-editing program to resize and optimize them before bringing them in. When you scale bitmap graphics, you lose pixel data and the quality of the image can be compromised. Convert imported bitmap graphics into symbols to improve performance in Animate.

You can use the Paint Bucket tool to fill a vector object with the pixels of an imported bitmap. The file format most commonly associated with bitmap graphics is JPEG.

To know how to import and use bitmaps in Animate, see Importing Bitmaps in Animate.

Video

When you embed video in Adobe Animate, the video file data is added to the Animate file. This results in a much larger Animate file and subsequent SWF file. The video is placed in the Timeline where you can see the individual video frames represented in the Timeline frames. Because each video frame is represented by a frame in the Timeline, the frame rate of the video clip and the SWF file must be set to the same rate.

If you use different frame rates for the SWF file and the embedded video clip, video playback will be inconsistent. Embedded video works best for smaller video clips, with a playback time of less than 10 seconds. If you are using video clips with longer playback times, consider using progressively downloaded video or streaming video using Flash Media Server.

Additional information

Audio

Adobe Animate offers several ways to use sound. Make sounds that play continuously, independent of the Timeline, or use the Timeline to synchronize animation to a soundtrack. Add sounds to buttons to make them more interactive, and make sounds fade in and out for a more polished soundtrack.

There are two types of sounds in Animate: event sounds and stream sounds:

  • An event sound must download completely before it begins playing, and it continues playing until explicitly stopped.
  • Stream sounds begin playing when enough data for the first few frames has been downloaded; stream sounds are synchronized to the Timeline for playing on a website.

Additional information

Groups

Use groups to logically organize objects for easy manipulation. For example, after creating a drawing, you might group the elements of the drawing so that you can easily select and move the drawing as a whole. When you select a group, the Property inspector displays the x and y coordinates of the group and its pixel dimensions. You can edit groups without ungrouping them. You can also select an individual object in a group for editing without ungrouping the objects.

Click the link to learn how to Stack and arrange objects in Animate.

Text

Text in motion tween animation

You can use the Text tool to create three types of text fields in Adobe Animate: static, dynamic, and input. All text fields support Unicode:

  • Static text fields display text characters that don't change dynamically.
  • Dynamic text fields display dynamically updating text, such as game scores or user names.
  • Input text fields allow users to enter text in forms or surveys.

You can create horizontal text (with a left-to-right flow) or static vertical text (with either a right-to-left or left-to-right flow).

Additional information

Get help faster and easier

New user?