Getting Started with Adobe Edge Animate
Excerpted from InDesign Magazine, October/November 2012 (issue 50). Subscribe now!
In addition to the HTML version of the excerpt below, you can also download the excerpt as a PDF that retains the full design of the magazine. This PDF is best viewed in Adobe Acrobat or the free Adobe Reader.
Last September, Adobe unveiled the first official version of its latest HTML5-based web animation and development tool: Edge Animate. This in itself was no big surprise—the program has been in development for over two years and had been available as a free public beta from Adobe Labs for over a year, under the name Adobe Edge. The big news is that Edge Animate is only one offering in a new suite of tools released by Adobe, geared for designing and developing fully responsive web content for the modern web. Today, Creative Cloud subscribers can download a perpetual (non-expiring) version of Edge Animate for free. That means you can download the program and get started right away replacing your existing Flash-based content.
But why would you want to? Because HTML5 is not just the future, it’s what’s happening now—whether you’re producing websites or interactive apps and documents for tablet devices such as the iPad. Adobe DPS, for example, can create some neat effects, but many of the coolest elements in DPS-based apps you may have seen on your iPad or Android device come from embedded HTML5—if you can’t make HTML5 animations, you’re out in the cold! So what are you waiting for? Let’s jump in.
Creating Your First Animation
The first step is to download and install Edge Animate from Creative Cloud. However, if you have an older beta version of the program, the following instructions should still work fine (with the understanding that some features may have been slightly changed or updated in version 1). Since version 1 is free, the installation procedure is simple and straightforward, without the hassle of entering any serial number or product key.
The first thing you will see is the Edge Animate splash screen (Figure 1). Like most Adobe Welcome screens, this window gives you access to standard commands, a list of recently created files, in app tutorials and other resources to help you learn and get the most from the program.
Figure 1: The Edge Animate splash screen
This article was last modified on January 18, 2023
This article was first published on February 4, 2013

.</p>
<p><em>Figure 3: Setting the width and height of the stage in the Properties panel</em></p>
<p><a href=)
.</p>
<p>Let’s start by creating and animating a simple object. Edge Animate provides three drawing tools: Rectangle, Rounded-rectangle, and Ellipse. Select the Ellipse tool, and draw a circle approximately one inch in diameter in the upper left corner of the Stage. Hold the Shift key as you draw to force the ellipse to be a perfect circle (<em>Figure 4</em>).</p>
<p><em>Figure 4: Drag with the Ellipse tool to draw a circle</em></p>
<p><a href=)
 is added to the Timeline at zero (0:00.00) seconds. In this case we intend to move the circle only horizontally, so there’s no need to create an equivalent keyframe for the Y-axis (<em>Figure 5</em>).</p>
<p><em>Figure 5: Setting a keyframe in the Properties panel</em></p>
<p><a href=)
.</p>
<p><em>Figure 6: Enabling Auto-Keyframe and Auto-Transition options</em></p>
<p><a href=)
. </p>
<p><em>Figure 7: Drag the ellipse to create a transition</em></p>
<p><a href=)
, you’ll see a keyframe for Top appear on the timeline, too. You can delete any extraneous keyframes by clicking on them and pressing the Delete key. </p>
<p>You can preview most simple animations within Edge Animate itself by simply pressing the spacebar. The animation will play, moving the circle across the Stage from left to right. I like to call this “front-to-back” animation, because you begin with the initial position of the element and then set the ending point. In the same vein, “back-to-front” animation establishes the ending point of the animation first and works backward from there. Depending on the needs of your animation, you can select the method that works best in each situation. </p>
<p>Along with movement, you can also alter the formatting of elements. If you can set an element property, you can animate it. For example, let’s change the color of the circle. </p>
<p>If necessary, select the circle on the Stage, and then move the playhead back to 00:00.00 seconds. </p>
<p>Click Add Keyframe for Background Color in the Color section of the Properties panel (<em>Figure 8</em>). </p>
<p><em>Figure 8: Adding a keyframe for the color of the circle</em></p>
<p><a href=)
. (Well, if your object is already red, choose a different color.) </p>
<p><em>Figure 9: Selecting a background color for the ellipse</em></p>
<p><a href=)
**@