Add gradients to objects

The gradient panel introduced in this release allows you to add gradients to Edge Animate elements. You can create both linear and radial gradients using the options in the panel.

Gradients can be animated. However, you cannot animate between a radial gradient and a linear gradient.

You can do the following in the gradients panel:

  • Use color stops to create complex gradients.
  • Create linear gradients or radial gradients.
  • For linear gradients, specify the angle of the gradient.
  • Save custom gradients as swatches.
  • Specify a value for color in any of the three formats (RGBa, Hexadecimal, or HSLa). The "a" refers to the alpha value or the opacity value. Irrespective of the format you use to define color, Animate ultimately converts the values to RGB format.
  • To apply CSS properties to the radial gradient such as Ellipse-farthest-corner, Circle-farthest-side, and so on, click and hold the Radial Gradient button. Select the option that you want to apply.


Gradients are not supported in Internet Explorer version 9. Any applied gradients are replaced with the background color.

A. Remove color B. Angle for linear gradient C. Linear gradient swatch D. Radial gradient swatch E. Color stop F. Add gradient swatch G. Repeat pattern H. Color format buttons I. Lightness slider J. Color slider K. Opacity slider L. Add color swatch M. Color swatch N. Selected color O. Original color P. Radial gradient button Q. Gradient button R. Linear gradient button 

For a video tutorial on using colors and gradients in Edge Animate, click here.

Updates to the color panel

In the color panel,  you can now do the following:

  • Use the Lightness bar slider to customize the intensity for a selected color.
  • Use the Opacity bar slider to specify the opacity (transparency) for the selected color.
  • Save the custom colors as swatches for reuse.
  • Specify a value for color in any of the three formats (RGBa, Hexadecimal, or HSLa). The a refers to the alpha value or the opacity value. Irrespective of the format you use to define color, Animate ultimately converts the values to RGB format.
A. Option to enter color code B. Color button C. Option to remove color D. Added color swatch E. Option to add color swatch F. Slider for opacity G. Slider for color lightness H. Slider for color I. Color code format options 

Using CSS filters

Options in the Filters panel help you quickly apply CSS filters to symbols, text, Divs, and images. The only way you could previously apply such effects was using an image editor.

CSS filters are currently supported on the latest versions of Chrome, Safari, iOS6, and Blackberry 10.

To apply a CSS filter, select an object on the stage, and use the options in the Filters panel to apply the desired effects. For example, to apply filters to an inserted image, select the image, and apply filters as required. 

To remove a filter from the element, click the corresponding "x" button.

For a video tutorial on using CSS filters in Edge Animate, click here.

Leverage Edge web fonts for better typography

Edge Animate helps leverage the power of the @font-face CSS property by providing you with an array of web fonts for your design. Edge web fonts allow you to bring the typographic experience of the print medium to the web.

Edge Web Fonts features hundreds of web fonts from the Adobe library as well as a large collection of open source fonts. Edge Web fonts are free and require no account or kit configuration — making it faster and easier to get started. 

Using Edge Web fonts in Edge Animate

When applying font to Text, click the "+" button next to the Font menu to view the Edge Web Font dialog. Select the font that  you want to use from the list and click Add Font.

You can filter the fonts in the panel by their type using the buttons to the left of the panel. For example, to view only fonts of the sans serif type, click the Sans Serif button. For more information, see Use Web Fonts.

The selected and applied fonts are added to the Font library in Edge Animate. Double-click the font in the Font library to specify fallback fonts. If the selected font, for some reason, cannot be applied, the fallback fonts are used based on the order in which they are listed.

Iframe friendly preloaders

Preloading is now optimized to work within Iframes for coordinated resource loading. Animate compositions contained within Iframes wait for the document to load before playing the file. 

Iframe preloaders allow you to preload the Iframe with an advertisement before the Animate file and the web page are downloaded.

For more information on using preloaders, see Adobe Edge Animate JavaScript APIs.

Symbol editing mode preserved during Preview

Animate preserves your current editing state on each preview. The composition does not return to the stage when previewing in a browser.

Easily identify locked and unlocked elements

Locked elements appear dimmed on the Timeline and the Elements panel allowing you to easily distinguish them from unlocked elements.