Edge Animate's Properties Panel - dummies

Edge Animate’s Properties Panel

By Michael Rohde

You can use the Clip feature in animations to reveal or hide parts of an element; you have two ways to do it. In addition to the Clipping tool, Adobe Edge Animate CC features a Clip section in the Properties panel that you can use to clip or cut off portions of an element (text, images, or whatever). This figure shows the Clip section in the Properties panel.

You must toggle the Clip switch to enable the properties.

The default setting of the Clip attributes.
The default setting of the Clip attributes.

The px controls affect the element in a circular fashion: The top px (orange number) affects the top of the image, the right px affects the right side of the image, the bottom px affects the bottom of the image and the px on the left affects the left side of the image.

In order to see the green border and the clipped area, you must select the Clip tool.

The following steps show how this use of the Clip feature works:

  1. Click the clipped element to select it.

  2. Click the Clip tool.

    The element acquires a green border, and the clipped area becomes visible.

  3. Clip exactly 50 px of the element from the top down by setting the orange number on top to 50 and the number on the right to the width of the element (as shown in the figure).

    Adobe Edge Animate CC is smart enough to provide the width and height of the element for you.

  4. Click the keyframe diamond to set your chosen properties in the Timeline.

    If you don’t want to type in a number to specify how much Clip property to apply, you can click and drag on the orange number to increase or decrease the clip area.

    Click the diamond to create a keyframe.
    Click the diamond to create a keyframe.
  5. Set the Pin and the Playhead in the Timeline, and then set the Top and Left value for the Clip property to 0.

    The resulting animation unveils the clipped area of the element.

You can preview the complete animation, showing both the veiling and unveiling of the clipped part of the element, on the Stage or in a browser.

If you set the bottom and the right Clip values to 0, you make the element invisible.