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.
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.
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.
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.
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.