Developer

Adobe Edge Animate CC review: Putting the animation and responsive options to the test

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.

edgeanimatefiga041414.gif

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.

Features

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.

Requirements

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.

Getting started

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.

Figure A

edgeanimatefigb041414.gif

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.

Figure B

edgeanimatefigc041414.gif

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.

Figure C

edgeanimatefigd041414.gif

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).

Figure D

edgeanimatefige041414.gif

8. Press the Space bar to play back the simple animation.

I saved the file as QuickStart.html, which in addition to the HTML file creates a set of associated files including five JavaScript files (QuickStart_edge.js, QuickStart_edgeActions.js, QuickStart_edgePreload.js, edge.3.0.0.min.js, jquery-2.0.3.min.js) and one "an" file (QuickStart.an). The HTML code created from the quick start lesson is displayed in the code snippet below.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="QuickStart_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-19256339 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
	<div id="Stage" class="EDGE-19256339">
	</div>
</body>
</html>

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).

Figure E

edgeanimatefigf041414.gif

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).

Figure F

edgeanimatefigf041514.gif

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).

Figure G

edgeanimatefigh041414.gif

Clicking the preview shows an animated horizontal rectangle with some text and graphics, but it is not set with any responsive features (Figure H).

Figure H

edgeanimatefigh041514.jpg

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).

Figure I

edgeanimatefigj041414.gif

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).

Figure J

edgeanimatefigj041514.gif

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.

Figure K

edgeanimatefigl041414.gif

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.

Figure L

edgeanimatefigm041414.gif

The resulting preview is displayed in Chrome 33.0.1750.146 m in Figure M.

Figure M

edgeanimatefign041414.gif

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

During my quick run-through of these two lessons, I found Edge Animate easy to use. It's a worthwhile tool that I will continue exploring with its HTML, JavaScript, and JQuery-based animations for modern browsers.

Additional Edge Animate resources

Edge Animate has a built-in Resources section that offers links to Help and Tutorials, Adobe TV, Community, View and Download samples, and an Edge Animate JavaScript API source (Figure N).

Figure N

edgeanimatefigo041414.gif

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 API guide: This guide provides information and documentation on the technologies that Edge animations depends on for the Edge timeline and symbol JavaScript libraries.
  • Edge Animate Showcase: This resource allows you to view and download samples, examples, and reusable templates of websites built using Edge Animate.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks

Free Newsletters, In your Inbox