Quick Overview of an Edge Animate Composition - dummies

Quick Overview of an Edge Animate Composition

By Michael Rohde

The process for creating an Edge Animate composition isn’t too different from creating any other type of content. When starting, you should consider what, where, and how you want your animation to appear. Will your animation be part of an existing website? Are you adding an animation to complement a book? Is your client requesting a brand new animated logo?

Perhaps you want to create an advertisement to appear on the web? You can create all these projects using Edge Animate.

Here’s the basic outline for creating an Edge Animate composition:

  1. Determine how you and your audience will use this animation.

  2. Collect your images and other assets.

  3. Write an outline.

  4. Create and save commonly used elements such as buttons for re-use later.

  5. Start animating.

  6. Save and export your finished animation.

Before you start animating, consider whether your animation will be viewed in an e-reader, in the browser, in iBooks, or be an app for use on both iOS and Android devices.

No matter the device, if it supports HTML5 and JavaScript, your Edge Animate project will run smoothly.

Gathering your assets

After you know what you want to create and where you want it to appear, it’s time to start gathering your assets — electronically drawn images, photographs, paragraphs of text, or a combination of all three — that will make up the final animation. Edge Animate makes it easy to import or create these assets.

Creating an outlined approach to your animation

At this point you have defined the purpose of your animation and the art to make it beautiful. Now you need to create a wireframe, essentially an outline of how you want your animation to play.

Sure, you can wing it and make it up as you go along, but an excellent idea is to picture your animation in your head, and then put down on paper how you imagine your animation will play from start to finish. This outline provides a base from which you can work.

Making symbols for frequently used elements

If you know your animation is going to contain many similar elements, or the same elements repeated over and over, you want to create those elements first. Elements are the different pieces that make up your animation. An element can be a box that you draw, a text box that you specify, an image that you import, and so on.

An element that you may want to reuse can be a button, or an asset that you re-use throughout the animation, or any type of navigation the audience can use.

After you create this element and have it behaving the way you want, you can then save it as a symbol. You can then export this symbol for use in other projects. That way, if this animation becomes a part of a series of animations and you want to re-use the same symbols, you’ll be ahead of the game by having some assets already saved and ready to go when you create the actual animation.

You can even save an entire animation project as a symbol. For example, if you create a slideshow animation, you can save that entire slide show as a symbol, which you can then export from Edge Animate — and then import into a different Edge Animate project.

Animators, start your animating

When you have a purpose for your animation, all of your assets are lined up and ready to go, and you’ve saved your multi-use elements as symbols, it’s time to start animating.

To start animating, you import your assets onto the Stage. Then you use the Timeline to create keyframes. A keyframe represents an animation sequence. For example, if you animate a box moving from one side of the Stage to the other, that animation is represented in the Timeline as a keyframe.

From there, you add actions to your elements for interactivity. As you create your animation, you can preview it to make sure the animation is behaving as you expect it to behave.

Saving and exporting your animation

When you finish creating your animation project, you want to save or export your composition for use by your audience or for use in another project or design tool. Edge Animate provides many options to export and save your work. Likewise, there are multitudes of options on how you can present your work both online, or in iBooks, or for use with other design tools.

Finishing the process

Eventually, through this process, you’ve created an animation using HTML5 and jQuery — without typing a single line of code. Your audience may never know the technologies that made the animation they watch and interact with possible (for that matter, you may not fully understand the advanced coding techniques that make it possible — or ever have to).

But that’s the beauty of Adobe Edge Animate CC: It does all the heavy lifting behind the scenes, which allows you to sit back and do what you do best — create beautiful animated and interactive content that can respond to fit and form with any number of screen sizes and devices.