June 18, 2014 - Tareq Aljaber

Unleash Web Interactivity With The 2014 Release Of Edge Animate CC

The 2014 release of Edge Animate CC

Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.


The 2014 release of Adobe Edge Animate is finally here! This release offers a rich set of features such as support for HTML5 video, importing sprite sheets from Flash Professional and Photoshop, linking support for DPS articles, a designer friendly action editor, and the ability to copy and paste SVG artwork from Illustrator, and more.

Continue reading…

12:12 PM Permalink
May 7, 2014 - Tareq Aljaber

Create Visuals that Communicate Ideas Quickly

The ability to create visuals that communicate ideas quickly, and get from strategy and ideation to the approval phase is a very long and expensive road. Jim McArthur, Senior Vice President of Digitaria, shares how his agency utilizes the power of animation to easily create quick interactive prototyping which helps cut costs and improve your creative workflow.


2:31 PM Permalink
April 14, 2014 - Rich Lee

Coachella and Edge Animate CC

Vibrant energy captured for any device


As one of the hottest festivals on the national music-and-arts circuit, the Coachella Valley Music and Arts Festival attracts 90,000 fans on each of its two weekends. No doubt many of them got information on the event lineup from the festival’s official website, which features interactive animations by Heavenspot that reflect the round-the-clock energy of Coachella.

The digital agency spent two weeks designing and developing animated headers using Adobe Edge Animate CC in Adobe Creative Cloud. To capture the energy and creativity of Coachella on any device, Heavenspot used Adobe Edge Inspect CC for rapid testing on multiple devices, which cut development time by 20%.

“Most people still aren’t used to experiencing this depth of animation, especially in a mobile-friendly format,” says Tim Jaramillo, a lead developer at Heavenspot. “Adobe Edge Animate CC makes it easy for us to develop animations with impact that strengthen our client relationships and enable our clients to more fully engage and inspire their audiences.”

Visit the Coachella website to view the animations, which change depending on the time of day.

Read the full story here (PDF).

9:43 AM Permalink
February 26, 2014 - Lewis Haidt

Adobe SXSW 2014 Creative Camp – Edge Animate in the House

Adobe is traveling to SXSW for our Annual Creative Camp, Friday March 7th at the Radisson Town Lake, Riverside Ballroom and Edge Animate is in the house. Our Product Manager, Sarah Hunt shares how to create dynamic, interactive infographics. All of our sessions dive into topics shaping the modern web. Plus, you’ll need your fuel to make it through SXSW and we’ve got you covered all day with lunch, and snacks galore – flavored popcorn, mini-burgers and petit BLT’s plus a happy hour during our final session of the day.

Continue reading…

10:35 AM Permalink
February 13, 2014 - Rich Lee

A Re-imagined Annual Report and Edge Animate CC


When the not-for-profit Calgary Urban Projects Society (CUPS) wanted a new way to promote its initiatives and attract donations, its marketing agency, ZGM, suggested creating an animated digital annual report using Adobe Edge Animate CC, part of Adobe Creative Cloud.

“We used many tools in Adobe Creative Cloud for teams, but Adobe Edge Animate CC really stood out in helping us achieve our vision,” says Peter Bishop, creative director at ZGM. “Adobe Edge Animate CC breaks new ground in HTML animation and lets designers make a simple transition from traditional motion graphics to web animation without heavy coding or a steep learning curve.”

Read the full story here (PDF).

Rich Lee
Sr. Product Marketing Manager

10:17 AM Permalink
January 21, 2014 - Sarah Hunt

Did you hear that? A new version of Edge Animate CC is here!

Hello Edge Animate fans!

After months of intensive development from the Animate team, we’re proud to release a major update to Edge Animate CC (3.0) available right now with your Creative Cloud membership. This release comes jam-packed with brand new features, giving you the tools you need to keep pushing the boundaries of animating with HTML.

What will you find in this release?

Continue reading…

10:39 AM Permalink
November 4, 2013 - Sarah Hunt

Want to relink AN project files on a CDN? It’s easier than you might think.

It’s not uncommon to find yourself wanting to deploy an Animate project online and have control over where your scripts and images are linked from. There’s several situations where you might want to do this:

  • Loading multiple Animate projects with shared resources and you want to avoid duplicate loading
  • Managing multiple Animate projects across your server and you want to point to a single JS folder to save on load time
  • Content needs to be dynamically packaged and loaded from a single source due to CMS or other server-side requirements

Whatever environment you’re working in, you may want the option to control the source of Animate dependent files. This post will describe how to point to your own CDN source and the files to edit to do so. The below writing is fairly technical and assumes you have some fundamental knowledge about Edge Animate and JavaScript.

Continue reading…

3:10 PM Permalink
October 24, 2013 - Rich Lee

Rush Movie Companion Site and Edge Animate CC

Rush of a Lifetime

Websites that help build buzz for Hollywood movies are nothing new. But what is new is how they are created. For Universal Pictures’ new film Rush, the studio wanted a site that would build excitement for the movie. Concept Arts created a site that highlights famous daredevils and rivals in history using a parallax scrolling timeline created with Edge Animate.

“Edge Animate enabled us to cut our previous parallax development cycle in half,” says Aaron Nicholson, developer on the project. “Without it, we would not have been able to address this project’s business requirements while handling its complexity.”

Edge Animate enabled the team to cut its previous parallax development cycle in half. Developers were up to speed quickly, and even with the addition of new features were able to complete the site in less than four weeks. The parallax technique enhances rather than overwhelms the experience and social media integration makes it easy for users to share their own sports stories.

Read the full story here (PDF).

Rich Lee
Sr. Product Marketing Manager

7:24 AM Permalink
October 8, 2013 - Chris Converse

Motion graphics in a mobile world

The spectacular popularity of mobile devices means interactive designers need to extend their skills beyond the desktop to embrace the universe of HTML5. Among mobile devices, including tablet computers, smartphones, and interactive books and magazines, HTML5 is the common denominator.

With HTML5 comes the need to find new ways to integrate interactive media. Specifically built to meet web standards, Adobe Edge Animate provides a way to create interactive and animated content using HTML, CSS, and JavaScript with confidence that it will look and behave how you want it to no matter what device you’re using.

Now I know there are a lot of people who don’t think HTML animation is very robust. They imagine type and div boxes animating and fading in and out, which I agree is less than optimal. But when you start combining that functionality with CSS3 and some of the styling and imagery, it starts to get compelling— you’re only limited by the browsers. Android and iOS devices have latest CSS3 capabilities that support features such as blurring, so it’s possible to offer a more sophisticated animation experience on these devices.

Animated illustrations in HTML5

Recently I created a course for the annual conference of the Association of Medical Illustrators that covered how to simulate illustrations in HTML for use in iBooks and digital magazines or for viewing on websites or mobile devices. While the subject matter experts were all medical illustrators, the session itself focused on making content today—easily digestible to readers—something that spans across industries. How do you capture your consumers’ attention with animation, and across various devices?

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

For the class, I created an animated interactive graphic that compares a healthy eye to an eye with glaucoma. The illustration shows how an eye with glaucoma can’t properly drain fluid, and includes a vision simulator that displays the effect of this condition on a person’s vision. The animated droplets are actually a series of nested animated symbols that create the constant, flowing effect. Edge Animate is able to replace a time and labor intensive coding process with one that is both easy and affordable.

One of the keys to easily creating interactive components in Edge Animate is how the symbols talk to each other via targeting. You can associate an interactive element, such as a click, with a symbol. In the glaucoma example, the user clicks the words Affected by Glaucoma, which then tells another symbol (in this case, the sunset photograph) to change its state. It is this ability to combine the functions and the order of symbols—each with their own timelines—that enables us to create these engaging animations. In the relatively short two hour class with 20 participants, it was exciting to see how quickly attendees were able to create their own animation projects using Edge Animate.

Animation is fun again

A few years ago, the web was full of animations and cool interactions, but those faded away as more attention turned to offering content that behaved consistently across devices and platforms. But people are starting to get excited again about adding it back into projects, and with Edge Animate we can combine styling and imagery with cascading style sheets and simple animation to once again create content that is exciting, engaging, and fun.

Learn even more about Edge Animate with Chris Converse on lynda.com. Get a free 7-day trial with this link: lynda.com/trial/chrisconverse.

Chris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.com, Udemy.com, Amazon.com, HOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.

12:41 PM Permalink
September 19, 2013 - Elaine Chao

Floral Matchmaker Tutorial #4: Randomizing the Game Board

Over the past three tutorials in this series about the Floral Matchmaker sample, I’ve talked about animating with the timeline, using the scalable stage in conjunction with a resizable iframe, and creating dynamic colors.  This next post steps away from Edge Animate specifically and into JavaScript to explain how one might efficiently put together a randomized game board.

My game is a very simple match-2 game that has 12 pairs of colors.  The user flips over one token and then another.  If they match, the tokens stay on the flower; if they don’t match, the tokens turn back over so that they’re hidden again.  While I could have laid out a static layout, I thought it would be a more interesting game to play (if not test!) if the game board were randomized so that no one, not even the developer, knew the order of the colors underneath the token.

This article is intended for users of Animate who have some knowledge of coding in JavaScript.

Topics covered in this article:

  • Animate symbol scope
  • the code panel
  • Javascript objects
  • Javascript random number generation
  • Javascript arrays

The screen shots and project files from this post are based on Edge Animate CC, which is available for a free 30 day trial via the Adobe Creative Cloud and is included in any paid subscription to the Adobe Creative Cloud.

Download the finished project files
See a live example


The Problem with Random Numbers

Some users have asked the question: “I have <a bunch of things> that I want to display in a random order, one after another.  How do I do that?”  Sometimes their first solution looks something like this:

  • Pick a question at random by selecting a random number
  • When the question is complete, pick another question at random by selecting a random number
  • Repeat the previous step as many times as you have questions

Anyone who has done this has probably experienced the problem of repeated questions, where the random numbers turn out to be: 20, 5, 1, 2, 6, 7, 7, 8, 8, 8, 8, 8, etc.  The problem is that we aren’t guaranteed 20 equally distributed random numbers when we use standard random number generation.  In my case, I wanted to ensure that I had 12 unique matching pairs.


Would You Like a Hash with That?

Let’s say I have five marbles, each a different color: blue, red, white, green, and yellow.  I want to make a list of five unique colors.  These marbles all go into a bag, and every time I draw from the bag, I take note of the color and then stick it back into the bag.

Here’s how I start my list:

  • draw a marble (red)
  • write the color of the marble on my list (red), put the marble back in the bag
  • draw a marble…

At this point, if it’s red, we can’t just repeat step 2, because my list wouldn’t be unique anymore.  So, I keep a second list.  Here’s what it looks like:

  • draw a marble (red)
  • write the color of the marble on my first list (red), and write the color of the marble on my second list.  Put the marble back in the bag
  • draw a marble (green)
  • check the second list to see if the color is on the list (no).  Since it’s not, add it to my first list (red, green), and add it to the second list (red/green).  Put the marble back in the bag.
  • draw a marble (red)
  • check the second list to see if the color is on the list (yes).  Since it is, put the marble back in the bag.

At this point, you’re probably thinking that the two lists are the same.  Why, then, would I maintain a second list?  Well, here’s where things get interesting.  Let’s say that we have 1,000 colors on our first list and a very large bag of marbles.  The standard way of checking to see if a color is on the list is:

  • draw a marble (white)
  • look at the first item in the list.  Is it white?  (no)
  • look at the next item in the list.  Is it white? (no)
  • repeat until you either find a white object or you run out of items on the list

If your color (white) isn’t on the list, you’ve effectively had to look at every item in the list.  And if you’re drawing 2,000 unique colors, you can imagine that this would get pretty slow if you have to traverse the list every single time.

Instead, there’s a way to create an object called a hash where your workflow looks like this:

  • draw a marble (white)
  • ask the hash if it has a white object (no)
  • add the color to the first list and to the hash


  • draw a marble (white)
  • ask the hash if it has a white object (yes)
  • repeat the draw

While the first way of looking at the data requires you to check the list multiple times, the second type of list only requires one request.  A hash is a very efficient way of checking to see if you’ve already selected the object so that your first list only consists of unique items.  This comes in handy whether or not you’re making a list of questions or selecting 2 colors.

Now that we have a good concept of how we want to implement the code, let’s take a look at JavaScript.


JavaScript and Hashes

For those of you who are familiar with JavaScript, the first thing you might point out is that JavaScript doesn’t actually have a hash object or even an associative array object.  This is true; instead, you can use properties of a generic object to accomplish the same thing.  To follow along in the Floral Match Maker sample:

  • open the Code Panel by selecting Window > Code from the main menu or typing Ctrl/Cmd-E
  • Select the “gameBoard” line in the tree control

This will show you all of the code in the gameBoard symbol.  Note that there are some custom function outside of the scope of the creationComplete event handler.  Declaring them in the gameBoard symbol space means that any functions within the symbol closure can call them, somewhat akin to a private method in other programming languages.


  • scroll down to line 25

At this point, we declare two containers: one an array and the other a generic object.

var matchArray = new Array();
var colorHashObject = new Object();

In the parlance of the previous section, “matchArray” would be the first array and “colorHashObject” would be the second array.


Setting Up the Color List

We’re now going to introduce two more lists: a list of colors in order and a list of all of the flowers I need to populate.

Line 9 in the gameBoard scope has a variable declaration:

var colorArray = ["#989AE8","#D3A7FF", "#B4DBFF", "#98E8E6",
      "#F55A76", "#A384AD", "#FFFFBF", "#FFB6FF",
      "#BEF299", "#CCCCFF", "#FFD7A2", "#CCFFF8"];

This sets a series of hex color values into an array.  This means that if I query colorArray for the first value (colorArray[0]), it will return “#989AE8”, and so on and so forth down the line until we get to the 12th value (index 11).  Note that I came up with this number based on the fact that I have 24 matching pairs, and so need 12 predefined colors.

Similarly, line 2 in the gameBoard scope has a variable declaration:

var boardArray = ["flower0", "flower1", "flower2", "flower3", "flower4",
     "flower5", "flower6", "flower7", "flower8", "flower9", "flower10",
     "flower11", "flower13", "flower14", "flower15", "flower16",
     "flower17", "flower18", "flower19", "flower20", "flower21",
     "flower22", "flower23", "flower24" ];

This ordered list corresponds to the element names associated with the gameBoard.  To see where I got these element names:

  • go to the Library Panel
  • double click on the icon next to “gameBoard”
  • look in the elements panel

I’ve laid out a 5×5 grid in this symbol with the flowers named flower0-flower24 – a total of 25 flowers.  But since it’s an odd number of flowers, I decided the center would be a free square.  Therefore, my boardArray array doesn’t contain a “flower12” object.

In the boardArray array, I have 24 objects, with indices from 0-23.

Now that I understand my four lists, I’m ready to populate my game board.


Making the Slots

The first thing I need to do is to initialize my hash.  Since I’m keeping track of 2 of each object, I decided to use a number to track how many of each object I’ve already drawn.  If the number is 2, then I know to draw again.  If I were to only need one of each (like in my question example), I could use a Boolean value (true/false) instead.  In the sample project, line 28:

for (var i=0; i < 12; i++) {
    colorHashObject[i.toString()] = 0;

Note that we use JavaScript’s toString() function to convert the number (let’s say 5) from its numerical value to a text value.  This is important, because object parameters are referred to by a string, not a numerical value.  So, essentially, what we are doing is saying:

colorHashObject["0"] = 0;
colorHashObject["1"] = 0;
colorHashObject["11"] = 0;


Filling The First List

Now it’s time to fill our first list (matchArray) with 24 randomized, numerical values, and our second list (colorHashObject) is ready to be used as a checklist.

while(matchArray.length < 24) {
    var randNum = Math.floor(Math.random() * 100) % 12;
    if (colorHashObject[randNum.toString()] < 2) {
       colorHashObject[randNum.toString()] += 1;
    else {

This block creates a random number in the following way:
Math.random() creates a number between 0 and 1 (e.g. 0.260384).  We then multiply it by 100 (in this case, 260.384), then take the floor of the number (round down: 260).  Then, we modulo, or take the remainder, of the number once it’s been divided by 12 (therefore, 8).

Stepping through the function, we check to see if this number has already been chosen, by saying: “If colorHashObject[“8″] has not been hit twice, then add one to that object, add it to the end of the first list, and move to the next iteration.”  The index of colorHashObject is a string value, but the value it holds determines how many times it’s been called.  Since we’re looking for a pair, the number has to be less than 2 for us to keep going.

Let’s walk through this.  After we draw 8, our colorHashObject looks like this:

colorHashObject["0"] is 0
colorHashObject["1"] is 0
colorHashObject["8"] is 1
colorHashObject["11"] is 0

If we draw a 6 the next time, we now have:

colorHashObject["0"] is 0
colorHashObject["6"] is 1
colorHashObject["7"] is 0
colorHashObject["8"] is 1
colorHashObject["11"] is 0

Now, if we draw 8 again, we’ll get:

colorHashObject["8"] is 2

If we draw 8 again, the program checks:

if (colorHashObject["8"] < 2) ...

In this case, we reject the draw because we know we already have a pair in matchArray and try again.

Note that we use a while loop instead of a for loop because we don’t know how long it’s going to take to get 24 values.  We just keep on checking whether or not the list is long enough.  At the end of the while loop, we should have a matchArray of exactly 24 objects, with exactly 12 pairs of objects.


Setting Up the Game Board

When I set up each game piece, I want each one to not only have the background set, but also to know what its own value is for a quick comparison when I’m playing the game board.  Since each game piece is actually a symbol, I know that I can just set a variable in that symbol’s scope so I can just ask the game piece what its value is.

In the sample project, I separated this out into the colorizeBoard method.  I pass in the matchArray into the function as “randomColors,” so you can think of the two as identical.

// NOTE: randomColors is actually matchArray in this code
for (var i=0; i<24; i++) {
    // each flower knows what its color is
    var currColor = randomColors[i];
    currSym.getSymbol(boardArray[i]).setVariable("color", colorArray[currColor]);
    // set the color of the background
    currSym.getSymbol(boardArray[i]).$("background").css("background-color", colorArray[currColor]);

Since I have exactly 24 objects, I can use a for loop.  I use the colorArray I defined with all of the hex values and the list of elements in boardArray to essentially do the following:

  1. Grab the current index’s random number out of randomColors, each of which should be between 0 and 11
  2. Grab the associated element in boardArray, get its symbol, and assign a variable with the current index’s random number
  3. Get the color associated with the random number out of colorArray, grab the background out of the element, and get its DOM handler.  Assign the background-color to the color using jQuery.



Unique randomization can be a difficult problem for intermediate coders, but this little trick of using helper arrays and a hash (or generic JavaScript object) can really help optimize your code and make it more efficient.  Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

5:02 PM Permalink