Getting Started with Adobe Edge Animate

Mike Rankin

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