Adobe Edge Animate CC: Stage - dummies

By Michael Rohde

Building even a basic animation in Adobe Edge Animate CC involves using three primary tools: Stage, Timeline, and Drawing toolbar. The Stage is a live HTML window built directly into Edge Animate.

It’s where you draw elements such as rectangles, squares, and circles. Later on, you can add style and animations to those elements and even add actions such as links. You can also import images to the Stage — which you can also animate and make interactive for your audience. Finally, you can use the Stage to preview your animation.

The majority of the Adobe Edge Animate CC interface consists of the Stage. The Stage is where you build your animations. When you first open Edge Animate, and you choose to create a new file, you’re presented with a crisp, white, blank Stage from which you can start to build your project.


The Stage is located at the top center of the interface and has the following handy characteristics for creating your animations:

  • It is a live HTML window: At first, the Stage may not look like much — but as you create your animation, you notice an abundance of functionality.

    One of the Stage’s best features is that you can watch your animation play on it. You don’t necessarily have to switch to a browser to preview your work. Instead, you can preview your animation by watching it on the Stage — because the Stage is actually an HTML window. It’s virtually the same as a standard web browser, but it’s built right into Edge Animate.

  • It has rules and guides: Two additional features to the Stage are the rules and guides here:

    • One ruler runs along both the top of the Stage; another runs down the length of the Stage on the left side. You can use these rulers to help place your assets (such as images and text) on the Stage.

    • The guides are thin purple lines that stretch from the ruler across the Stage and to the opposite side of the screen. You can use these guides to help position your elements on the Stage. (Elements can be anything from drawn circles and rectangles to images to text boxes and other parts that make up the animation.)


To place a guide on the Stage, place the cursor over the ruler, and then click and drag. The purple guide then appears. To move the guide around the Stage, click it and drag it.

After you place guides on the Stage, any elements (images, text boxes, and such) then snap to the guides. This helps you place elements exactly where you want them.