Getting Started with Adobe Edge Animate
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
Select File > New. This command creates a new Edge Animate document that focuses around the main workspace panel called the Stage (Figure 2). The size of the Stage is set by default and can be altered to meet the requirements of your project. For this example, let’s make the Stage 500 pixels by 300 pixels. You should see the current dimensions of the Stage on the left side of the program in the Properties panel. Whenever you want to access these specifications, just deselect all elements, and click anywhere on the Stage itself.
Figure 2: A new Edge Animate document
In the Properties panel, set W: 500 px and H: 300 px (Figure 3).
Figure 3: Setting the width and height of the stage in the Properties panel
Beside the Stage, there are four main panels: Properties, Timeline, Elements, and Library. The optional Lessons panel is not needed in most workflows; you can hide it to open more screen real estate (choose Window > Lessons).
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 (Figure 4).
Figure 4: Drag with the Ellipse tool to draw a circle
A circle appears on the Stage. If this is the first time you have used the drawing tools, the object should appear in a neutral gray color. Otherwise, Edge Animate may use the last color selected.
Although it looks like a circle, the objects created by Edge Animate’s drawing tools are actually HTML <div> elements formatted by CSS3. The program enables you to change their size, position, color, and even shape, and then manipulate these specifications in real time to produce both animation and interactivity for your web applications. To move the circle across the Stage, we first have to establish its starting position.
In the Properties panel to the left of the Stage, click the Add Keyframe for Left button.
A keyframe for Left (X-axis) 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 (Figure 5).
Figure 5: Setting a keyframe in the Properties panel
Before you do anything else, make sure the Auto-Keyframe and Auto-Transition modes are enabled in the area between the timeline and the Stage (Figure 6).
Figure 6: Enabling Auto-Keyframe and Auto-Transition options
Move the playhead to 00:02.00 seconds in the timeline area. Then drag the ellipse to the right side of the Stage, holding the Shift key as you drag it to enforce a horizontal-only movement (Figure 7).
Figure 7: Drag the ellipse to create a transition
A transition appears on the Timeline for Left. If you unintentionally move the element vertically (up or down), 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.
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.
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.
If necessary, select the circle on the Stage, and then move the playhead back to 00:00.00 seconds.
Click Add Keyframe for Background Color in the Color section of the Properties panel (Figure 8).
Figure 8: Adding a keyframe for the color of the circle
The new keyframe establishes the starting point color for the circle.
Move the playhead to forward to 00:02.00 once again, click the Background Color picker, and select a bright red from the palette (Figure 9). (Well, if your object is already red, choose a different color.)
Figure 9: Selecting a background color for the ellipse
Another keyframe and transition appear on the Timeline, indicating that the color is now animated as well.
Press the spacebar to preview the animation. The circle moves from the left to right, and changes from gray to red.
So now you can see how easy it is to get started with animating… just about anything. What you’ve seen here is just a tiny glimpse of the possible animations and interactivity that you can create in Edge Animate. But the possibilities don’t stop with just standalone animations. Edge Animate content can be inserted in any web page and is supported by most modern browsers. You can even package your animations and insert them in applications created by Adobe’s Digital Publishing Suite as well as the latest versions of electronic books, formatted for EPUB and iBooks Author. In other words, it’s not just for the web—it’s for everywhere your electronic pages may ever go.
Jim Maivald is an Adobe Certified Expert (ACE) and Instructor (ACI) in InDesign, Acrobat, and Dreamweaver and is author of several books, including A Designer’s Guide to Adobe InDesign and XML (Adobe Press, 2007), Adobe Dreamweaver CS6 Classroom in a Book (Adobe Press, 2012), and most recently, Introduction to Adobe Edge Animate, version 1. You can catch his video training titles on both lynda.com and TotalTraining.com. Contact Jim at email@example.com.