September 5, 2013 - Elaine Chao

Floral Matchmaker Tutorial #3: Hiding and Showing the Game Board

In the first two tutorials of the series, I covered the code solution for the automatic colorization of our flowers and the way I got the ornaments to swing naturally.  For this tutorial, I wanted to focus on how to combine responsive and traditional layouts to expand and shrink the stage.  If you view the live example and mouse over the panel, you’ll notice that the game board pops out to the left, over the text of the webpage.  Once the mouse leaves the confines of the stage, the stage closes back to its original dimensions.  Some of our users think of this as “expanding and shrinking the stage,” and go through extensive code solutions to actually change the size of the Stage.


When the game board is open, it covers existing text.


I decided to approach this problem in a different manner; instead of resizing the stage, I decided I would resize the container and let Animate’s scalable content handle the rest.

This article is intended for intermediate users of Adobe Edge Animate who have a light coding background.

Topics covered in this article:

  • scalable layout
  • direction anchors
  • gradients
  • HTML iframes
  • jQuery’s animate() function

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


Resizable Content and iFrames

Animate’s resizable content settings allows you to change the dimensions of your objects based on percentage instead of pixels.  This is commonly used to create content that will fit on multiple platforms, such as content that should take the full size of the browser on multiple mobile devices, each of which has similar but not identical form factors.

Stepping back to a more conceptual level, I wanted my match-two game to slide in and out from behind the informational half of my advertisement.  At first, I thought (like many others) I should resize the stage using jQuery.  But after taking a look at what might be involved, I realized that I was thinking of the Stage as the container, when in reality my advertisement would actually live within an iframe.  If my iframe didn’t resize, all I’d get would be an iframe with a horizontal scrollbar on the side of a webpage.

I realized I should be focusing on changing the iframe’s size, not the stage size.  Knowing that we had a scalable layout feature made it all that much easier for me to make my content change with the size of the iframe.


Step 1: Resize the Background

Since I knew that my advertisement would stay 600px high, I only had to resize the width of the Stage.

  • Click on the Stage in the Elements panel, or click on an empty part of the Stage in the main Stage panel
  • Select the toggle button next to the W (width) selection in the properties panel to change it from px to %
  • Preview in browser and change the browser size

Scalable Stage setting

Notice that the previewed project takes up the entire width of the browser.  This is expected until you place the Animate file in its parent iframe.

You can also preview what this looks like by changing the size of the stage by adjusting the preview marks.  Once you select the % property for the Stage, you can drag the slider in the ruler left and right to see the Stage resize.



Step 2: Set the Reference of the Major Objects to Different Sides

Default Reference PointsBy default, all of the objects take their references from the top and left sides.  This means that any X or Y value you set references 0,0 in the upper left hand corner of the Stage, and move the object based on a point defined in its upper left hand corner.  However, in order to make the expansion and shrinking to work, I needed to have objects pinned to both left and right of my Stage.

Animate makes this easy by providing a four-square selection box in the properties panel for every object.  Since the main part of the advertisement would stay pinned to the right hand side, I decided to pin my cascadingFlowers object and the associated text to the right side of the Stage.

  • Select the first four objects in the Elements panel (“playGame”, “sfflowerexpo”, “decorateTheOutdoorsText”, and “cascadingFlowers”)
  • In the properties panel, select the top-right rectangle
  • Preview in browser and change the browser size, or adjust the preview marks to see how the objects flow



Step 3: Place the Project in an iframe

Many times, an Animate project is placed within the context of another HTML file, like as a menu, an animated header, or content rotator.  In this case, our skyscraper advertisement lives on a news site and will pop over existing text when the user mouses over the project.

  • Start with an HTML file with some text in it.  In this case, I used the following as my container:
    <div align="left" style="width:700px; position: absolute; top: 0px; left: 0px; border: none; font-family: Verdana, Geneva, sans-serif; font-size: small">
  • Add jQuery to the parent page by adding a <script> tag in the header of the file:
    <script src=""></script>

    This allows us to use jQuery within the parent page.  Even though Animate has jQuery in it, we’re not allowed to use it in the parent unless we reference it properly due to scope.

  • Create an iframe and load the Animate project into it
    <iframe id="advertisement" src="skyscraper.html" height="600" frameborder="0" style="position:absolute; top: 50px; right: 10px; width: 160px"></iframe>

As you can see from the iframe statement, the default width of the iframe is 160 pixels.


Step 4: Opening and Closing the iFrame

We can now use jQuery to open and close the iFrame by adding the following script to the body of the parent HTML file:

   $('#advertisement').mouseenter(function() {
      $('#advertisement').animate({width: "600px"}, 500);

   $('#advertisement').mouseleave(function() {
      $('#advertisement').animate({width: "160px"}, 500);

This is jQuery that says: “When the mouse enters the ‘advertisement’ object, resize the width of that object to 600px.  When the mouse leaves the ‘advertisement’ object, resize the width of that object to 160px.”  Both resizing functions (using the jQuery animate() API) will animate over the course of 500ms, or half a second.

Note that we’re using the mouseenter and mouseleave events and not the mouseover and mouseout events.  Many new users will confuse the two, but mouseover and mouseout will fire whenever the mouse moves, which means that your animation will oftentimes flicker as you move your mouse.  Instead, use mouseenter and mouseleave – it’s what you want 90% of the time.


Step 5: The Need for a Background Object

At this point of development, I noticed I had a problem.  To see the problem in the project:

  • Click on the eyeball next to the “background” element in the Elements Panel
  • Resize the Stage width to 160px using the preview slider in the ruler


The text with the game (and really, the game board itself) displayed behind my flower wind chimes.  But the animation trigger for opening and closing the advertisement lives within the parent HTML, and I didn’t want to call back into the project if I could help it.  Instead of doing the complicated code solution, I realized I could just create an object that would live below the wind chime flowers but on top of the game board and all of its associated text.

Since I had a gradient as the background, I used color swatches to save my gradient.Gradient swatches

  • Click on the Stage in the elements panel
  • Click on the gradients icon in the properties panel to load the gradients color selector
  • Click on the + next to the vertical gradient bar to add it to the color swatch
  • Draw a rectangle and set it to 160px wide by 600px high
  • Click on the gradient selector in the properties panel
  • Click on the saved gradient in the color swatch to reload it
  • (optional) Convert to symbol (notice that background is a symbol, though it isn’t required in this case)
  • Drag the background object in the Elements Panel until it’s below the cascadingFlowers
  • Change the reference point of background to top-right and align it with the right side of the project

Gradient swatches and color swatches are saved with your Animate project, so you can reuse them over and over again through the lifetime of your project.



By inserting Animate into an iframe, you can easily add independent animated content to existing HTML projects.  You can use a little bit of jQuery in the parent HTML to take advantage of Animate’s scalable layout feature and adjust the size based on whatever you’d like, including mouse events and media queries, to name a few options.  And, finally, the color and gradient swatches feature is a great little time saver for when you’re working with the same colors over and over again.

Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

9:18 AM Permalink
August 19, 2013 - Elaine Chao

Floral Matchmaker Tutorial #2: Animating with the Timeline

The last tutorial I posted had a code solution for the automatic colorization of one of our flowers in the Floral Match Maker sample.  For this tutorial, I wanted to focus more on the power of timeline animation.  If you view the live example, you’ll notice that the initial animation has seven ornaments that drop from the top of the composition.  Afterward, they start a slow, subtle independent wave back and forth to look like a wind chime.  I took about a half an hour to get this animation working and just right, whereas coding it by hand would probably have taken me easily four or five times the time to get the animation looking the way I wanted it to.

With a little timeline magic and very little code, I was able to create an animation that looks sophisticated and draws the eye.

This article is intended for novice users of Animate who do not have a deep coding background.

Topics covered in this article:

  • simple timeline animation and easing
  • reuse of symbols
  • simple triggers

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 a paid subscription to the Creative Cloud.

Download the finished project files
See a live example


Creating the Wave

Originally, I created the simpleFlower symbol to group together the string (which is a 3px wide div) and the colorized simpleFlower element.  In retrospect, I could have also used a group (right click > Group Elements in DIV) to create the same effect, as I only used this symbol once.  Either way will function in this part of the tutorial.

Open the swingingFlower symbol by double clicking on the icon next to its name in the Library Panel.  This symbol handles only the right-and-left swaying motion.  In the symbol substage, you can see the flower element placed in the center of the symbol substage by default and the autoplay is off, because I don’t want the animation to start until the bounce has completed.  “Autoplay” is more or less what it sounds like: the setting determines whether or not the timeline begins playing when the symbol instance is loaded.  If it is unchecked, the symbol will be frozen at time 0.

From a high level perspective, the motion is a simple rotation.  However, by default, the rotation point is in the center of the object, which would have the object moving like a pinwheel instead of a hanging object.  The first thing to do, then, is to set the transform origin:

  • select the element
  • in the Properties panel, go to the Transform section
  • set the Y value to 0.00%


Note that the transform origin property only affects the reference point for the properties within the transform section of the properties panel.

Then, set the motion from -3 degrees to 3 degrees over a 1 second period.  In order to do this, you can use the auto keyframe setting to animate.

  • First, place a keyframe at 0 seconds so that the default is always 0 when the symbol initializes.  Move the playhead to 0 seconds and click on the diamond next to the rotate value.
  • Then, move the playhead just to the left of 1 second and place a second keyframe so that the value is maintained.  The second keyframe should be hollow, which means that the value has not changed from the previous keyframe.
  • Turn off auto-transition mode by pressing the button on the timeline panel or pressing X


  • Move the playhead to 1 second and set the value to 3 degrees rotation in the properties panel.  A new keyframe should be placed automatically, because the auto-keyframe setting is on by default.
  • Turn on auto-transition mode again
  • Move the playhead to 1.5 seconds and set the value to 0 degrees rotation in the properties panel.  A new keyframe and a new transition should be created so that there’s now a transition between 3 and 0.
  • Move the playhead to 2 seconds and set the value to -3 degrees rotation in the properties panel.

Keyframing should be familiar to those who use AfterEffects.  Remember that we also have the Pin, which is extremely powerful for creating transitions quickly.

However, at this point in time, the motion isn’t really very natural – the flower just swings across the stage woodenly.  The culprit is the linear easing, so the best thing to do is to play with the easing in order to make it faster at the bottom and slower at each side:

  • select the left transition and select the easing button in the Timeline panel
  • select Ease In and Quad.  This will mean that the animation gets faster close to the end of the animation
  • select the right transition and select the easing button in the Timeline panel
  • select Ease Out and Quad.  This means that the animation gets slower as it progresses

Now the swing is more natural as it progresses across the stage.  The final thing for us to do here is to make the animation swing from side to side repeatedly.  The way to do this is to use timeline triggers.

  •  Move the playhead to 1 second and press Ctrl/Cmd-T (or go to Timeline > Insert Trigger)
  •  In the actions pop-up that appears, click on the Play button in the snippets on the right side of the window
  •  Move the playhead to 2 seconds and insert another trigger
  •  In the actions pop-up, click on the Play Reverse button in the snippets


Note that these two snippets allow for you to insert canned code that will help you in your animation. plays from the timeline location forward in time, and sym.playReverse() plays from the timeline location backward in time.

If you’re following along in the finished file, you’ve probably noticed that the triggers aren’t actually exactly on 1 second and 2 seconds – in fact, they’re pulled slightly to the outside of the transitions.  I fiddled with this for a little while before getting it where it felt right.  Leaving the triggers at the end of the transitions made it feel as if the flowers just hit a wall and bounced right back.  By giving it just a moment of no movement at the peak, I made the objects react the way that they would if they were actually affected by gravity: each flower naturally comes to a stop for a brief moment before swinging back.  In order to do this:

  • click and drag the trigger on 1s to the left a little
  • click and drag the trigger on 2s to the right a little

The last thing in this symbol is the creation of a label.  I can use either time codes or a label to refer to a specific location on the timeline, so I’ve placed a label at the point where we hit 0 in rotation to begin our animation.  (Press Ctrl/Cmd-L or Timeline > Insert Label)  Name this label “center”.

Creating the Bounce

The way I handled the animation of the bounce was first laying out the final location of the flowers and then doing the animate in.  This is easiest with the Pin, which is described in videos and in our own in-app lessons (Animate II: The Pin, which can be found in both the Lessons Panel and linked off of the Welcome page).

  • Drag seven copies of swingingFlower onto the Stage
  • Highlight them all and create a symbol called “cascadingFlowers”
  • Double click on the new symbol on the Stage or click on the icon next to “cascadingFlowers” in the Library Panel
  • Adjust the symbols into their final positions and adjust the symbol stage if desired
  • Rename the elements if desired (e.g. “falling0”, “falling1”, etc.)
  • Move the playhead to 3/4 of a second, or 0.750 seconds
  • Press “P” to toggle the pin, or click on the pin button in the Timeline Panel
  • Drag the playhead to the left to 0 on the Timeline

If you’ve dragged the playhead to the left, the bar between the playhead and Pin should be blue; if you’ve accidentally dragged the Pin to the left, the bar between the playhead and Pin will be yellow.  If you need to switch the location, press Shift-P to swap the Pin and the playhead.


The Pin marks the value that you don’t want to change, and the playhead marks the value that will change.

  • Shift-drag the first object straight up so that it’s off the symbol stage.
  • Drag the pin region (the blue bar between the Pin and the playhead) to the right so that the playhead sits at 1/2 of a second, or 0.500 seconds
  • Repeat the shift-drag with another flower
  • Repeat the previous two steps until the flowers cascade
  • Highlight all of the transitions created in this symbol and change the easing to Ease Out > Bounce



Starting the Playback

Now that we have the bounce in, we can start each flower playing the slow wave back and forth.  In order to get the vague sense of unpredictability, I set each flower to play once the bounce-in animation completes.  Because I set up the flower’s animation to go from left to right over time, I need to start from the middle of the timeline.

Notice that we have a label at the center of the movement called “center.”  We’re going to play from this label so that we don’t get any awkward jumps.

In the cascadingFlowers symbol:

  • At the end of the falling0 transition, press Ctrl/Cmd-T to create a trigger
  • Add the following code to start the animation from the label “center”:
  • At the end of the falling1 transition, press Ctrl/Cmd-T to create a trigger
  • Add the following code to start the animation from the label “center”:

Repeat for each one of the falling flowers, and enjoy your wind chime effect!


Simple timeline transitions can be very powerful, and with just a little bit of code, you can make animations that will ping-pong back and forth along the timeline perpetually.  Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.


3:39 PM Permalink
August 7, 2013 - Sarah Hunt

Update to Edge Animate CC is here, fixing compatibility issues with IE11

Hello Edge Animate lovers!

Today we’ve release an update to Edge Animate CC, fixing compatibility issues with Internet Explorer 11. This update is recommended for all users, ready for you to download at

View the full Edge Animate release notes here.

About this update:

Due to the evolving nature of the web, sometimes things break when newer browsers are released and we do our best to stay ahead of the game with compatibility as browsers progress. Animate uses the popular library yepnope for preloading your AN content, and this fix leverages an updated version of that library. Keep in mind that content created with Animate versions prior to CC (this includes 1.x and Preview versions) will face compatibility issues in IE11. We have two options for you to update your files:

Recommended: Load your Animate CC 2.0 composition in Animate CC 2.0.1, resave, and republish. Done!

Don’t want to go through the hassle of resaving already live content? No problem, there’s an easy manual fix.

Note: The below fix is not roundtrippable! If you load a changed file inside of an older version of Animate, the changed preloader will not save as Animate will overwrite the default preloader. Only use the below solution if you’re unable to resave your composition through the Animate CC update, or if you’re looking to update a completed project.

1)   Download the latest version of yepnope (1.5.4 as of this writing) from Github and open it up in a code editor.

Open yepnope.1.4.5-min.js








2)   Open yourAwesomeFile_edgePreload.js (it’ll say “Do not edit this file” at the top – don’t worry, we won’t tell.)

Open preload.js








3)   Copy the contents of  yepnope.1.5.4-min. js and paste into your preloader.js between:

if(!AdobeEdge.yepnope) {


AdobeEdge.yepnope = window.yepnope;

Replace the old yepnope code with the new code









Thanks for using Animate! If you have any questions, please direct them to our Animate user forums.

– The Edge Animate Team

10:01 AM Permalink
July 17, 2013 - Elaine Chao

Floral Matchmaker Tutorial #1: Dynamic Colors

For those of you who don’t know me, I am one of the quality engineers on Edge Animate and work directly on the product itself.  As a part of every release, our team releases a couple of sample files in our Edge Animate Showcase to get users started.  My contribution for the Animate CC was Floral Match Maker, which is a game rolled into an advertisement.  Several users have asked how the project was built, so I thought I would break down the project into its component parts and talk about how I made each part of the scenario work.

The first topic I’d like to introduce is that of dynamic colors.  This is a technique that Sarah first introduced in the “Catch Cracidae” game, which had a number of pastel birds fluttering across the screen for you to click.  I liked it so much that I brought it into this sample file, which featured a number of flower ornaments that moved like a hanging wind chime.

This article is intended for novice users of Animate who may not have a deep coding background.

Topics covered in this article:

  • leveraging transparency in an asset
  • getting a reference to an object in a nested symbol
  • assigning colors to a managed object

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 Only Image Asset

Since this file was supposed to be an advertisement, I wanted to ensure that the smallest number of assets were used.  Since I had seen the Catch Cracidae sample, I wanted to recreate something like it.  Using Adobe Fireworks, I created a PNG32 file that relied on transparency and opacity.


As you can see from the screenshot, I created an ellipse that had a black background with some level of opacity set, a solid yellow ellipse for the center of the flower, and two five point stars, one of which had an erase filter and the second of which had a lighter opacity setting (about 30%).  After exporting into PNG32 to give me the flattened file, I was ready to work in Animate.

Download the original Fireworks asset

My exported asset ended up being 2k, which meant that the download overhead would be very small for this project.


A Single Flower

If you look at the finished project file and double click on the “simpleFlower” symbol, you will see the setup for the flowers I used all over this project.  As you can see, it’s the image with an ellipse behind it.  In order for me to see it, I set the ellipse to red (#ff0000) as a temporary placeholder within my project.  By placing the ellipse (which I renamed “background”) lower in the Elements Panel, the color displays through the transparency of the PNG.  As you can see, the darker segment automatically provides a darker shade of the background color.



I’ve skipped over the creation of the intermediary symbol (“flower”), which adds the thread upon which the ornament hangs and handles some of the movement, as I plan to cover the movement in another post.  In the “cascadingFlowers” symbol, I have seven flowers that now statically hang on the stage.  Move the playhead to about 4 seconds on the symbol’s timeline to see all of them.

Open up the code panel and select the “creationComplete” event under cascadingFlowers, or simply select the Open Actions button next to the cascadingFlowers line in the elements panel.


The first line has an array with all of the objects in it.  As a side note, some people prefer to dynamically generate variable names, as it is a fairly common practice in ActionScript 1 and 2 and is allowed in JavaScript.  However, debugging with this practice tends to be a little more complex, so I personally lean toward the coding method of iterating through an array instead.

The second chunk has a for loop, which will step through each one of the objects in the flowerNames array and assigns a hue.

The magic of dynamic colorization happens in the next two lines, which I’ll explain in detail:

The first line creates an RGB string, which looks something like this: “rgb(XXX, YYY, ZZZ)”.  This is a string that can be passed as a parameter to jQuery’s css assignment method in the second line, therefore setting the background-color to a particular RGB hue.  There are three segments in the string, which I’ve denoted as XXX, YYY, and ZZZ.  Each one of these numbers is created in the same method.

Let’s start from the inside out.  Math.random() will return a random fractional number between 0 and 1.  256 is the max value for each one of the RGB parameters, so you’ll get a value somewhere between 0 and 256 when it’s multiplied against the random number we just created.  Then, since it’ll probably be a fractional number (like 100.5206234) and the CSS value has to be an integer, we wrap this number with Math.floor() to round down to the nearest whole number.  Finally, we want to shift all of it into the pastel range by adding 50 to each value.  We then call this code three times, one to get the red value, one to get the green value, and one to get the blue value, and join them all together using the + operator into the hue variable.

Now that we have the RGB value, we can assign the current flower in the loop to the color.  We’ll do this in a series of getSymbol() calls to drill down to the current flower’s “background” element.  In order to do this, we have to look up the current flower name, the flower inside of the instance, the simpleFlower within that instance, and finally, get the DOM handle of the “background” element.  We then can call the .css() assignment operator and assign this new value to the “background-color” CSS property.


With an asset with some transparency and some fancy coding, you can put together a colorful, randomized set of assets that doesn’t require you to create separate images for each color.  Have questions on this technique?  Edge Animate engineering staff and great community members answer questions in the Animate user forum.

3:45 PM Permalink
May 6, 2013 - Rich Lee

Edge Animate CC – Coming in June is here!


EDIT: Edge Animate CC is here!

If you haven’t heard by now, Adobe announced major updates to nearly all of its creative tools at MAX this morning, available in June today, June 17. This includes a major update for Edge Animate, with the upcoming version being called Edge Animate CC. We’ve added some new features that we think you’ll love:

  • Motion paths – Finally!
  • Templates that you can save and re-use
  • Swipe gesture support for touch devices
  • Optimized publishing with CDN hosting, at no cost to you

Check out the features page for more info.

Also, the free introductory offer expires when Animate CC releases next month. To get the new features, you can either subscribe to a Creative Cloud single-app or full membership, or sign up for a free 30-day trial. Here’s our FAQ for more details.

We can’t wait to launch Animate CC and hope you’re excited to try it out. Stay tuned for more updates!


Rich Lee
Sr. Product Marketing Manager

1:52 PM Permalink
March 11, 2013 - Sarah Hunt

What’s in a filter?

What’s in a filter?

With the release of Edge Animate 1.5 we’re excited to announce the implementation of CSS built-in filters, a cutting edge new spec which enables web developers and designers to bring stimulating visual effects to their elements which could previously only be achieved in design tools like Photoshop.

So what is a filter, exactly?

CSS filters are a powerful introduction to the CSS language, which bring eye-catching visual effects to the web. Backed by hardware acceleration, filters provide a fast and simple way to style your content. But how do they work? Think of filters as post-processing step similar to how you would edit effects in Photoshop. The browser takes a snapshot of the page, grabs the pixel data, styles your elements, and then serves it back to you with the filter effect intact.

Similar to how you can stack lenses on a camera, filters can also be stacked to create unique effects. Combined with the power of Edge Animate, you can achieve compelling animated effects in your compositions.

Keep in mind that CSS filter effects are highly experimental, and are currently only available using the –webkit prefix in Chrome, Safari, iOS6 Safari and Blackberry 10 browsers.

Filters in Animate

Usually when we think of filter effects we think of images. Filters are much more powerful and can be applied to a variety of elements.

Rollover the thumbnails to see the applied filters (only works in webkit browsers)

In the above example, a filter is applied to a symbol, which in turn applies the effect to the image and text underneath. Translated into DOM-speak, symbols are glorified divs where each sub-symbol is akin to a child div. What makes this special is when filters are applied to the parent div, all the children inherit the style. This includes divs, text, images and other symbol children, eliminating the need to drill down into your symbols to render individual elements.

Before filters, the above effect could only be achieved through layering of multiple graphics. By using filters, you can minimize server requests and reduce your output payload by using a single graphic instead of two or more.

Supported Filter Types

Animate offers support for the following built-in filters:

  • Invert
  • Hue-Rotate
  • Contrast
  • Saturate
  • Sepia
  • Greyscale
  • Blur and,
  • Shadow

Box/Text-shadow vs. Filter: drop-shadow

Drop-shadow is a valuable add to the filter stack, allowing you to take shadows above and beyond what can be achieved with a box-shadow.


A graphic styled with box-shadow


The above graphic is rendered using box-shadow. Not bad. We have a transparent PNG file, though it’s highly evident the shadow is being applied to the dimensions of the graphic. Box-shadow is a literal rendering of its’ definition; a box-esque shadow is applied based on the current dimensions defined by the container.


The same graphic styled with drop-shadow

This is where the magic of drop-shadow comes in. This effectual property grabs transparent pixel data, and then applies the shadow around the opaque pixels. Since the property is also intelligent enough to pick up translucent pixels, your shadow will also appear behind semi-transparent elements (as opposed to box-shadow, which only renders around the outline.)


Since built-in filters are GPU accelerated, their performance is fairly stellar considering the processing demands on the browser for rendering. However, be aware that the more filters you implement, the harder the browser has to work, leading to degraded performance. The following table outlines each filter and how you can expect them to perform:

Filter effect Browser support Performance
very fast
very fast
very fast
very fast
slow unless accelerated
can be slow
Table from

As you can see, filters can add rich effects with hardware-accelerated performance. By styling content leveraging the power of browser rendering, you can optimize your compositions for richer effects with less payload. We encourage you to give filters a shot, and see how they can enhance your Animate projects. If you haven’t downloaded Animate 1.5 yet, be sure to get it here while it’s still free.

For more information on other exciting CSS features coming to a browser near you, visit

4:47 PM Permalink
February 14, 2013 - Sarah Hunt

Adobe Edge Animate 1.5 is here, bringing new design capabilities to the web

Happy Valentine’s day for all you Edge Animate lovers! Today we’re introducing version 1.5, with new capabilities and features that allow you to style content with browser-based effects. In the past, these effects could only be achieved by importing multiple graphics. We’ve been working very hard over the past few months to bring you this updated release, and best of all, it’s still available for free through any subscription tier of Creative Cloud.

Download Edge Animate


CSS Built-In Filters

Up until now, special effects and UI transitions could only be accomplished by stacking multiple images and using transitions to reveal and hide each layer. This increases the payload of your website and forces you to control multiple stacks of imagery instead of a single element. With CSS filters, you can now apply effects which were previously only available to you in image editing software like Photoshop. Filters are especially powerful in Animate and can be used on more than just images. You can apply filters to images, text, divs and symbols.

CSS built-in filters

CSS built-in filters

Since filters are a highly experimental feature, they’re still making their way into all the popular browser channels. Currently CSS filters are only supported in Chrome, Safari, iOS6 and Blackberry 10 browsers, but if you’re targeting a mobile-first experience or want to add some flair to your site with graceful degradation, give them a try.


Gradient Support

Gradients in Animate not only allow you to style your elements, but they’re fully animatable like any other property. This enables you to go beyond typical styling and create some interesting 2.5D effects by emulating light and depth. In this example, I’ve used a CSS filter shadow with a radial gradient to give the illusion of light being cast on the sphere. The new gradients panel allows you to apply linear or radial gradients and adjust the gradient positioning for fine-grained control. You can also choose how a radial is applied based on properties available in CSS by click-holding the radial icon.

Editable gradients.

Animatable gradients.


Typography enhancements with Edge Web Fonts

No longer do you have to manually juggle code to add fonts to your Animate compositions. Edge Web Fonts gives you access to a vast library of fonts made possible by contributions from Adobe, Google and designers around the world. Edge Web Fonts are powered by Typekit, so you can be assured of high performance and stability. This will make it much easier for you to control typography at production time. Sort your fonts by style and add as many as you want to your font library. The Edge Web Font service is completely free and there’s no limit to how many fonts you can add to your content.

Control typography with Edge Web Fonts.

Control typography with Edge Web Fonts.


Check out the above features in action on YouTube.

To learn more about what you can find with this update, visit the Edge Animate release notes. Thanks for using Animate, and we hope you enjoy this update available for download here.

8:55 AM Permalink
December 14, 2012 - Sarah Hunt

Adobe Edge Animate 1.01 is now available!

The first official Adobe Edge Animate update is now available, containing several performance improvements and bug fixes. This update is recommended for all users and contains the following updates:

  • Added support for Edge Web Fonts
  • Performance improvements on published content
  • iOS 6 fix for multiple compositions embedded via iFrame and Adobe DPS
  • Various fixes to improve application stability

To better understand the features that matter most to our users, this update also includes the ability to report back anonymous data related to the usage of specific features in Edge Animate. This information will help our team make more informed decisions for prioritization and focus on particular features. The Edge Animate team has had a very close relationship with our users during the development of 1.0, and their feedback influenced the product greatly. This update allows you to speak to us through your actions in the application.

To install the update, click on the “Update Available” banner on the EA welcome screen. Download instructions and release notes can also be found here.

Thanks everyone for using Adobe Edge Animate, and happy animating!

Sarah Hunt
Product Manager

9:39 AM Permalink
September 24, 2012 - Rich Lee

Adobe Edge Animate 1.0 is available now, with a surprise!

The day has finally come — Adobe Edge Animate 1.0 is here! We’re proud to announce that the first commercial version is now available from the Adobe Creative Cloud, as a perpetual (non-expiring) product. The surprise is that it’s FREE as an introductory offer, as a thank you for the tons of feedback we received during the preview phase, helping us get to version 1.0. We hope by making it free, we’ll get even more feedback and adoption. If you’re new to the Creative Cloud, all you need to download Edge Animate for free is go to and sign up for a membership. You’ll also have access to other Adobe Edge Tools & Services, such as Edge Inspect and PhoneGap Build.

New mnemonic for Adobe Edge Animate

Concluding the Preview Period

It’s been a thrilling ride for the Edge Animate team, since we first sneaked an experimental prototype of it at MAX 2010. Less than a year later, on August 1, 2011, we released Preview 1 on Adobe Labs. We really didn’t know how it would be received, but the response was overwhelming — there were 70K downloads on the first day, and major press coverage from publications like Cnet, USA Today, The New York Times, and Mac World. However, the most surprising aspect was that users were already showing off what they made with it within the first 12 hours of launch. It was incredible and flattering to know people had downloaded Preview 1, figured out how to use it, and posted their work on production sites in less than a day.

Looking back, some of us feel that Preview 1 was released too early. It only had a single timeline and couldn’t handle user interactions at all. Just about the only thing you could do with it was create a static, linear animation. There was concern that people would look at the tool and write it off as too basic or primitive for real-world use. We made a conscious decision to release early and often, taking in user feedback to help us improve it. Our development philosophy was very different from what people came to expect from Adobe. In just over a year, we released six more previews. Each release incorporated user feedback and had a mix of major and incremental  improvements to the previous version. There were over half a million downloads during the preview phase, and as I mentioned earlier, the feedback we received was instrumental in making Edge Animate 1.0 what it is today.

Here’s a quick summary of the major enhancements of each Preview:

  • Preview 1 (8/1/11) – Single timeline, import graphic files, open HTML files
  • Preview 2 (9/7/11) – Fit and finish improvements and bug fixes
  • Preview 3 (10/1/11) – Interactivity and access to the Edge Animate API
  • Preview 4 (1/19/12) – Symbols, web fonts, element display lifetime
  • Preview 5 (3/11/12) – Optimized publishing options, down-level support for non-HTML5 browsers
  • Preview 6 (5/10/12) – Built-in lessons, localized in six languages, DPS and iBooks publishing
  • Preview 7 (8/20/12) – Resizable layouts, new drawing tools, stage improvements

We plan on releasing more updates to Edge Animate, to add new capabilities as well incorporating more feedback. Stay tuned for more news! With that said, please download Edge Animate 1.0 and let us know what you think!


Rich Lee
Product Marketing Manager

10:35 AM Permalink
August 20, 2012 - Rich Lee

Edge Animate Preview 7 is now available

Today we have some big news – Preview 7 has just been released, and our new name is now Edge Animate.

Starting with this release, the name has changed from Edge to Edge Animate. Edge has been renamed to better reflect its capabilities as a tool to create animated, interactive content.

Preview 7 is a major update that our team is VERY excited about. We’ve been hard at work since Preview 6 launched in May, and added a lot of features to make your compositions more compelling and easier to create. Here’s a quick snapshot of what’s new:

  • Resizable Layouts: Enable your projects to adapt to different screen sizes.
  • Creativity Tools: New ellipse tool, box and text shadows, more robust text editing.
  • Stage Improvements: Rulers, guides, resizable stage, and positioning
  • Timeline Improvements: Adjust snapping, time-based increments that emulate FPS, visible grid.
  • Keyframe Improvements: Lots of improvements were made to make it easier and faster to work with keyframes.
  • Usability Enhancements: Grouping, refreshed properties panel, new keyboard shortcuts, and more.
  • Updated Code Editor: Re-skinned code tree, updates to symbols, error prompts.
  • Accessibility: Publish screen-reader friendly HTML tags.

Our team leader Mark Anders just released a new video that shows Preview 7 in action.

Be sure to check out the complete list of new features here. You can also see all the features we’ve added since Preview 1 launched a little over a year ago.

We hope you’re excited about Preview 7 – please get the complimentary download here and let us know what you think!


8:44 PM Permalink