Consistent Properties for All Elements in Edge Animate - dummies

Consistent Properties for All Elements in Edge Animate

By Michael Rohde

The Adobe Edge Animate Properties panel appears in the left column of the default view of the interface. This is where you can configure, toggle, set, animate, etc. all of your different elements, including the Stage.


Depending on the type of element that you select, different properties appear in the Properties panel, but some of them remain consistent (as shown):

  • ID: Name an element in this box, which then appears in the Timeline.

  • Class: You can specify the user class for a specific element. If you aren’t a developer and see yourself strictly as a designer, you may not use this box; if you do know JavaScript and CSS, you may use this feature. When you type a name into the Class box, and then open the .js file from the folder structure, you should see that your content elements now have a user class assigned.

  • Actions: You can assign actions to elements from the Properties panel.

  • Display block: This is where you can set when an element is Always On, On, or Off. If an element is On, you can see it; if it’s Off, it’s hidden from view. You can also set the Overflow properties to Visible, Hidden, Scroll, or Auto. Opacity is another property that you can set from this block.

  • Position and Size: You can use these settings in association with building a responsive web design. Here you can set an element’s anchor point (which determines the point of an element that Edge Animate considers the center, thus affecting how certain animations display the element). You can also position the element on the Stage and change its actual size. You can even use Layout Presets.

  • Transform: In this block, you can skew and rotate elements. You can also change the scale of the element and move the origin point.

  • Cursor: If you want a specific type of cursor to appear when your audience hovers the mouse pointer over an element, you can set that from here.

  • Shadow: Whether your element is a rectangle, ellipses, a text box, or an image, you can add a shadow to make it stand out. You can even animate that shadow.

  • Clip: You can use clip to cover or uncover portions of an element. For example, you can animate an image so that parts of the element slowly appear or disappear.

  • Accessibility: Refers to setting a tab index for elements. This allows your audience to use the Tab key on the keyboard to select different elements.