The Adobe Edge Animate Properties Panel - dummies

The Adobe Edge Animate Properties Panel

By Michael Rohde

The Edge Animate Properties panel (found along the left column) constantly updates itself depending on which type of element is selected. If you select a drawn element such as a rectangle, Edge Animate displays different configurations in the Properties panel than if you select a text box or an image.

This keeps the clutter down in that you only see what you need, or can, work with for a certain type of element.

Some properties are consistent, and appear no matter what type of element you select; other properties are specific to certain types of elements. Examples of consistent properties include: ID, Class, Actions, Display block, and Position and Size. All of these are discussed in detail in the following pages.

In addition to formatting and animating from the Properties panel, you can also:

  • Edit the Title tag

  • Set the class name

  • Add actions

  • Enable your audience to tab through elements

Specific properties for the Stage

Your first view of the Properties panel occurs when you start a new composition (see the figure). This initial view shows properties for the Stage, including:

  • Title tag: You can edit the title tag for the HTML page from the Properties panel.

  • Actions: You can add actions to the Stage from the Properties panel.

  • Size dimensions: You can edit the size of the Stage from the Properties panel.

  • Overflow: These attributes include Visible, Hidden Scroll, and Auto.

  • Toggle Autoplay: If you don’t want your animation to automatically start playing when the page loads, make sure this check box isn’t checked. If you do uncheck the box, then make sure to add an action to an element — such as a Play button — so your audience can start the animation.

  • Composition ID: Leave the Composition ID alone. Edge Animate uses this ID in the HTML file for reference.

  • Down-level Stage: This simpler version of the Stage accommodates browsers that don’t support HTML5 or CSS3.

  • Poster: Used with the down-level Stage.

  • Preloader: Used for setting what your audience first sees while your animation is loading to the screen.

    This is best used for large compositions that may not load immediately upon launch.

    The Properties panel for the Stage.
    The Properties panel for the Stage.