How to Scale Elements in Edge Animate - dummies

How to Scale Elements in Edge Animate

By Michael Rohde

Scaling an element in Adobe Edge Animate means essentially that you can change the size of an element while keeping its proportions consistent if you want. You can:

  • Scale elements with the Transform tool

  • Scale elements from the Properties panel

Scaling with the Transform tool

If you prefer to use a click-and-drag method for scaling elements, you can use the Transform tool to do just that by following these steps:

  1. Click the Transform tool to select it.

  2. Place the cursor over one of the corner selectors on an element.

    As shown in this figure, you see a diagonal cursor with an arrow at each end.

  3. Click, hold, and drag the corner selector.

    If you drag outward, you make the element larger; if you drag inward, you make the element smaller.


To keep the element’s proportions the same, hold down Shift while clicking and dragging.

Scaling with the Properties panel

You can shrink and grow objects through a Scale feature on the Properties panel. You can Scale objects both horizontally and vertically.

The Scale feature has a Link Scale attribute that enables you to synch the proportions (see the figure). When the Link Scale attribute is on, the horizontal and vertical sizes remain in synch — but only when you’re modifying the values from the Properties panel. With the Link Scale attribute turned off, you can set two different values for horizontal and vertical.

Scaling your text is different from animating the font size.


Shrinking elements

To make an element shrink, go to the Properties panel and click the diamonds next to Scale with the percentages at 100%. Clicking the diamonds creates keyframes.

Next, toggle the Pin and slide out the Playhead in the Timeline to the point where you want the shrinking to stop. Last, adjust the percentages in the Scale feature to a value lesser than 100%. This should create an animated keyframe for you in the Timeline.

Scaling an element can create a neat trick by making your object appear to flip over. To see this in action, create an animated keyframe where the object starts at 100% and ends at –100%. The animation shrinks the element down to nothing, and then makes it reappear flipped upside down. The negative percentage is what flips the object over.

Growing elements

To make your element grow larger, start the keyframe with the object at a value lesser than or equal to 100%. Then slide out the Playhead in the Timeline to the point where you want the growing to stop (making sure to keep the Pin at the point where you want the animation to start).

Then go back to the Properties panel and increase the percentage to the size desired. Provided the Stopwatch is still red, Edge Animate creates a new animated keyframe for you.