You can create animated and interactive HTML content with Adobe Edge Animate CC. After trying two main features of the design software, our reviewer shares his thoughts on whether it's worthwhile.
Edge Animate is part of Adobe's Creative Cloud (CC) offerings. The CC product line gives developers the ability to create animated and interactive HTML content, which makes for a storytelling tool with desktop and mobile functions.
Edge Animate's features include the intuitive interface designed with a wide range of tools, realistic motion for graphics and HTML elements for precision animation, user-dependent interactions, and playback controls for enhanced interactivity. It also comes with mobile-friendly content that works reliably on smartphones and tablets.
Subsequent to the initial release, Edge Animate's new features include:
- audio support, which enables users to import and sync audio files with animation playback and user interactions;
- responsive scaling, which allows responsive design compositions to fit within mobile and desktop screens; and
- script loading, which allows for integration of third-party libraries such as jQuery UI.
For a full list of the current release notes, see What's new in Edge Animate CC (3.0), which also provides steps to installing the software, minimum system requirements, known issues, technical resources, and other resources.
You'll need an Adobe ID and credentials to sign in to the Adobe CC to install and use Edge Animate. You must also have administrative rights to install software applications on your system.
Note: Unless otherwise noted, all screen captures are from the Edge Animate software running on a Windows 7 desktop PC.
Edge Animate offers In-App Lessons that help you learn the software's various tools. The built-in lessons you can access from the Getting Started screen (Figure A) are Quick Start, Create, Animate I, Animate II, Responsive Layout, Extend, Reuse, Motion Paths, and Audio.
A quick start
The Quick Start lesson walks you through an eight-step process to creating a simple rectangle and then animating it (Figure B). I'll share the steps I followed.
1. Select the Rectangle Tool (M).
2. Click and drag a rectangular shape starting from the top left side corner.
3. Click the Toggle Pin (P) button, which creates the "from" and "to" keyframes with a single edit and sets the stage and the rectangle.
4. Drag the Playhead to 0:01, which sets the animation at one second duration.
These first four steps are shown completed in Figure C.
5. Move the rectangle to the lower-right corner of the stage.
6. Click the gray color chip in the Properties panel.
7. Change the color to a blue hue and press Enter (Figure D).
8. Press the Space bar to play back the simple animation.
You can see the animation in action in the gif shown in Figure E (you may need to click the image to see it animate).
Before saving your animation, you can preview it in the browser by pressing CTRL+Enter or by going to File | Preview In Browser.
The simple Quick Start lesson provides a first look and insight into the capabilities of Edge Animate and a glimpse into the files that get delivered with the Edge Animate HTML file. This lesson took at most five minutes to complete.
A responsive layout
Next I wanted to test Edge Animate's responsive web capabilities, so I clicked the Responsive Layout lesson (Figure F).
This lesson walks you through the steps to create an animated composition using various techniques with responsive layout features. The first step has you click to open a sample HTML file named resize_start.html (Figure G).
Clicking the preview shows an animated horizontal rectangle with some text and graphics, but it is not set with any responsive features (Figure H).
The next step provides two options to create responsive content: Responsive Scaling and Percentage Scaling. The lesson starts with the Responsive Scaling option, which when completed will allow the project to scale up and down to fit various viewports or containers while maintaining the same aspect ratio no matter the device. To make the project responsive I clicked the Responsive Scaling checkbox in the Properties pane (Figure I).
Then I ran a preview of the project, and it does show responsive aspect ratios at any screen dimension, as shown in Chrome 33.0.1750.146 m (Figure J).
The next step in the lesson uses the Percentage Layouts option, which is where the stage is changed from a pixel width to a percentage width. I unchecked the Responsive Scaling setting and, in the Stage section of the Properties panel, clicked the unit toggle for the width, changing the setting from 500 pixels to 100% width. Then I deselected the default setting of the Max Width option from none, and set the maximum width value to 1024. Finally, I changed the Center Stage setting from Horizontal to Both, so the animation would display in the browser centered both horizontally and vertically. The settings are shown in Figure K.
The lesson's next steps have you modify the text settings, so I selected Text <div> in the Elements panel and then set the width in the Properties panel to 100%, which makes the text remain centered. Then I clicked the Right_Brace element and changed the relative position of the coordinate picker to the Top/Right as shown in Figure L.
The resulting preview is displayed in Chrome 33.0.1750.146 m in Figure M.
After running the steps in this lesson, I prefer the Responsive Scaling option for creating a responsive layout since it has fewer steps; however, I am sure there are other projects that would be more appropriate to incorporating the Percentage Layouts method.
The bottom line
Additional Edge Animate resources
These are additional online resources on using Edge Animate.
- Edge Animate CC manual: This is the official online Edge Animate Help and tutorials. A PDF version is also available.
- Learn / Edge Animate CC Tutorials: Get started, learn the fundamentals of the Edge Animate workspace, create animations, and add code to your project.
- Edge Animate Showcase: This resource allows you to view and download samples, examples, and reusable templates of websites built using Edge Animate.