Adobe Edge Animate CC: 6 Features That Interact and Adapt - dummies

Adobe Edge Animate CC: 6 Features That Interact and Adapt

By Michael Rohde

Adobe Edge Animate CC is about much more than moving elements around the screen. You can use many of its features to create interactivity for your audience — and fine-tune many more to configure the software to suit your preferences:

  • Interactivity: You can build fully interactive animations with such controls and actions as buttons, links, and loops.

  • Symbols: You can save elements you create (such as buttons) and use them again in a different animation.

  • Responsive web design: Edge Animate enables you to build a composition that responds to browser and device window sizes.

  • Multiple publishing options: Edge Animate offers numerous ways to publish your animation for use in different applications — such as different web browsers and iBooks — or you can import your Adobe Edge Animation into different Adobe products such as InDesign or Muse.

  • Font choices: Edge Animate provides a multitude of font choices. If you’re fussy about particular fonts, the good news is that if you can find a font on the web, you can most likely use it in your animation.

  • Choose your language: If English is not your native language and you prefer to work in (say) German, Spanish, French, or Japanese, then Edge Animate has you covered.

Implementing interactivity intelligently

Adobe Edge Animate CC enables you to do much more than just draw and animate elements. You can also make those elements interactive, which allows your audience to click on items to make different actions happen.

For example, you can make Stop, Play, and Pause buttons for an interactive slideshow. You can also create a menu by adding links that allow your audience to navigate to different parts of your animations — or to entirely different web pages.

When your audience moves the cursor around your animation, you can make different actions happen when the cursor moves over specific areas. This kind of cursor movement is called a mouseover. Or, if your audience is using tablets or smart phones to view your animation, you can allow them to simply tap an element to cause an action.

Using Symbols to make reusable objects

At first, using Symbols may prove a bit daunting, but after you gain experience working with them, they become indispensable.

So, what exactly is a Symbol? It’s essentially a nested animation you create that has its own independent Timeline and interactive capabilities. For example, say that you find yourself creating the same element with the same actions over and over for many different projects. By saving that recurring element as a Symbol, you can reuse it and its associated actions for any project.

A prime example of a Symbol is a button. If you find yourself recreating the same button — say, a Play button for a slide show — you may want to save that Play button as a Symbol for reuse later.

You can find your Symbols in the Library panel, as shown.


Incorporating responsive web design

Right along with HTML5, responsive web design is the latest buzzword terminology when it comes to web development. A responsive web design allows your animation to resize appropriately depending on the size of the browser window.

This can mean many things. Say, for example, someone is viewing your animation on a desktop computer. If the user resizes the browser window to make it bigger or smaller, the elements within your animation resize themselves appropriately, with the new sizes based on percentages.

For example, if the browser window is maximized at 100%, the images and so forth in your animation appear at 100%. If the browser window is shrunk to 50% of its size, then your images also shrink to 50% of their normal size.

This is a very powerful feature because there is such a wide variety of screen sizes these days. You never know whether your audience is viewing your animation on a 60-inch display, a 4-inch iPhone, or anything in between. Tablets add to the diversity of screen sizes.

Counting your multiple publishing options

You have more than one way to publish animations these days — and Adobe Edge Animate CC has you covered, offering a multitude of options (as shown in this figure). You can publish your animation as a standalone web page or you can embed it in an existing web page.

You also find options that allow you to export your animation for use in an iBook. You can even publish your animation as a static HTML page for use on older web browsers that don’t support HTML5 or animations.


Fonts in Adobe Edge Animate

You can use a multitude of fonts on the web, and Adobe Edge Animate CC has you covered. In addition to a standard default list of fonts that are available to you (see the figure), Edge Animate also enables you to import fonts from around the web.


If none of these fonts satisfy your needs, you can import fonts from many different sources — including Google Web Fonts. You can also use Adobe Edge Web Fonts, which is built into Animate. And if you’re familiar with Typekit (another free font tool), you can celebrate knowing that tool also works with Edge Animate.

Working in your language of choice

Adobe Edge Animate CC is global in many regards — including the language you see on menus and panels. If you feel more comfortable working in a language other than English, Edge Animate makes it easy for you to change the language used in the software to one of many popular languages.

From the Help menu, as shown in this figure, you can choose from several different languages. When you choose a language from the Help menu, that language appears in the software. The languages that you can choose from include German, English, Spanish, French, and Japanese.


If you do pick another language, you have to close and restart Edge Animate to see the change take effect. After you select the language that you want, the interface does not automatically update, simply close the program and then reopen it to see your newly selected language.