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.
For a video tutorial on using colors and gradients in Edge Animate, click here.
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.
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.
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.
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.
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.
Animate preserves your current editing state on each preview. The composition does not return to the stage when previewing in a browser.