I work closely with medical illustrators and web designers, designing and coding interactive media for distribution in the pharmaceutical industry. The web designers I work with are always striving to find new ways to create expressive motion graphics for their sites. I use Adobe Edge Animate CC extensively because it enables me to create content that is visually compelling, informative, and portable to a wide variety of devices.
My medical illustrator clients need to visually convey processes of the human body in an easily understandable format that can be viewed on any screen. For example, check out the interactive animation in Figure 1, which demonstrates the difference between a healthy eye and one with glaucoma. To interact with this example:
Edge Animate CC is a timeline-based animation tool that generates HTML5-based web content. This content plays back on smartphones, tablets, and modern desktop browsers without requiring a plug-in.
I've found that Edge Animate has several key benefits that make it a powerful motion graphics tool for the web. With it, you can:
In this article, I focus on one of my favorite features in Edge Animate CC symbols. I describe how symbols work and what makes them so useful. I also demonstrate how you can add one line of code to have two symbols communicate with each other, making it possible to create mind-blowing animations and cool interactive effects.
I used this symbol communication technique (also known as "targeting") when building the interactive example shown in Figure 1. For example, the movement of water droplets in the eye was designed using many different targeted symbols to create the flowing effect. Video 1 shows my process for creating the animation.
Video 1. Demonstration of defining symbols in Edge Animate CC to simulate the effects of glaucoma.
Using symbols, you can compartmentalize portions of a project. This makes symbol content easy to locate and manage. Additionally, symbols simplify project updates. If you change one element in a symbol, all instances of the symbol update automatically.
If you've ever worked with Adobe Flash Professional, you know that symbols are comparable to movie clips in FLA projects. Here are some of the many reasons I use symbols:
The ability to create a symbol object (complete with its own graphic assets, browser-based effects, interactivity, and motion along its timeline) and then manipulate it on the main timeline alongside other symbols enables a faster and more intuitive workflow. By separating pieces of an animation into bite-size chunks, you can drill down to quickly access and update a specific section. And you can repurpose commonly used assets with symbols to improve playback performance while also ensuring design consistency.
Symbols can be set up to communicate programmatically with other symbols. Each symbol has a name, and you can use that unique identifier to control it with code. Communication between symbols enables interactivity. For example, one symbol can be a button and a second symbol can display a new graphic or play an animation triggered by the user's interaction with the button.
For this example, you can set up a symbol named
button to detect
click events. The
button symbol can then target the symbol named
display-image, causing it to update its state when an event is received. This strategy lets you set up dependencies so that certain symbols begin to animate when other symbols are finished moving. It also helps in situations when you want one symbol to interact with another.
You can target named symbols with a small amount of code. Follow these steps:
clickevent, add a line of code that connects the first symbol to the second symbol (see Figure 7).
Here's the code that targets a symbol:
mySymbolObject = sym.getSymbol("display-image").getSymbol("button").play();
To use this code in your own projects, update the names of the symbols in the syntax above (
"display-image") and (
"button"), replacing them with the names of two symbols in your file.
Now that you’ve seen how to use Edge Animate CC to create interactive illustrations and you know more about the benefits of using symbols to build visually compelling animations, I encourage you to try Edge Animate yourself.
To get started using Edge Animate CC, visit the Edge Animate product page and download the free 30-day trial. Get up to speed quickly by following the official getting-started tutorial, How to build a web banner in Edge Animate, and by watching Adobe TV training videos. For more inspiration, check out these other Inspire articles: