How to Configure Positioning and Sizing in Edge Animate

By Michael Rohde

Adobe Edge Animate CC has no shortage of settings when it comes to positioning and sizing. Many of these features work best when nesting elements, so you want to understand how the Element panel works.

Positioning refers to the coordinates of the element relative either to the Stage or to the parent element when one element is nested inside the other. You can also use a position attribute to affect how you want the element to react when you size it.

Set the relative position

Specifying the relative position of an element affects which corner of your element is manipulated when you resize it. You can find the Position and Size attributes in the Properties panel (as shown). Be sure to select an element from the Stage to have these attributes appear.

Here relative position is used in the context of Edge Animate; note that it doesn’t mean the same as relative positioning in Cascading Style Sheets (that is, the distinction between Position: absolute and Position: relative). In strict CSS terms, Edge Animate 1.0 uses only absolute positioning.

Here’s how to test the way relative position works in Edge Animate:

  1. Make sure the top-left corner of the element is highlighted (as indicated in the figure).

  2. Adjust the width or height of the element by using the W and H attributes (as indicated in the figure).

    Notice that when you adjust the width or height, the top-left corner of the element stays where it is, while the rest of the element shrinks or grows.

  3. Select the bottom-right corner, resize the element, and see what a difference it makes.

    The bottom-right corner stays in the same location while the other three corners are affected.

    Setting the relative position to affect how elements are manipulated.

    Setting the relative position to affect how elements are manipulated.