Adobe Edge Animate's Clipping Tool - dummies

Adobe Edge Animate’s Clipping Tool

By Michael Rohde

Adobe Edge Animate CC features a Clipping tool, which you can find just under the main menu as shown in this figure. Clipping is an animation effect used to unveil or veil an onscreen element; you can animate the effect of an element appearing left-to-right or top-to-bottom.

The Clipping tool.
The Clipping tool.

Selecting the area

The following procedure demonstrates how to use the Clipping tool:

  1. Select an element on the Stage and then click the Clipping tool.

    The element takes on a green outline, as shown.

    Elements have a green outline when the Clipping tool is selected.
    Elements have a green outline when the Clipping tool is selected.
  2. Click and drag the selectors (the mini squares on the outline) from the green box.

    Doing so selects the areas of the element that you want clipped.

    • The solid gray area inside the green outline shows which parts of the element are visible.

    • The diagonal lines that create a shaded effect show which parts of the element will appear clipped (see the figure).

At this point, your element appears half-visible.

A partially clipped element.
A partially clipped element.

To undo the magic just done in the previous steps — creating an animation that unveils the clipped portion of the element to your audience — follow these steps:

  1. If the element isn’t already clipped, select the Clip tool and drag the left-middle green selector on the element all the way to the right.

    Doing so completely clips the element.

  2. Position the Playhead and the Pin in the Timeline to designate when the unveiling starts and how long you want the animation to last.

  3. Grab the left-middle selector again and drag it to the left until the entire element is unclipped.

    The result is an animated sequence keyframe that unveils the element.

You can watch this animation play on the Stage or preview it in a browser.