AdobeFeature

Create HTML5 animations easily with Edge Animate

Edge Animate is a tool in Adobe's Creative Cloud that enables you to quickly produce HTML5 animations to use across mobile, the web or desktop. Here are 10 things you need to know about this cool tool.

Edge Animate CC is the perfect tool for the designer wanting to create slick animated HTML5 content. It fits into your Creative Cloud workflow beautifully: create your assets in Illustrator or Photoshop, import and start animating. If you’re familiar with After Effects, you can get going straight away with Edge Animate. Here's 10 things you need to know about this oft-overlooked tool...

01. Creative Cloud integration

Edge Animate CC integrates perfectly with the Creative Cloud tools. You can easily export graphics from Illustrator as SVG files to save on file size, or of course as PNG or JPEGs from Photoshop or Illustrator. You can also drag and drop files onto the Edge Animate stage.

02. Templates

To improve workflow further, you can save custom templates for quick access to reusable assets – saving you a huge amount of time when you’re working on many similar projects.

03. Precise animation

The timeline in Edge Animate is based on the timeline in After Effects – and thus you get a huge amount of control over your animations. You can, just like in AE, edit property-based keyframes for precise control over movement.

04. Swipe gesture support

Designing for mobile? Well, luckily Edge Animate CC enables you to add left and right swipe events to elements for your projects. It takes the fuss out of coding and provides a simple way to deliver interactive animated content to mobile devices.

05. Motion paths

In Edge Animate CC, you can animate elements along fully customisable motion paths, giving you huge control over the movement of your objects. As in After Effects, you can apply easing functions too. You can also use motion paths in resizable layouts.

06. Reuse those symbols

If you’re familiar with Illustrator, this feature will be a cinch to use. In Edge Animate CC, you can use the symbols feature to create nested animations with independent timelines and interactive capabilities. It makes managing your projects much easier.

07. Mobile ready

As Adobe says: “Content created with Edge Animate is designed to work reliably on iOS and Android devices, as well as in modern browsers such as Firefox, Chrome, Safari, and Internet Explorer 9+.” You don’t need to worry about your HTML5 content displaying correctly across multiple platforms.

08. OAM ease of use

Using the Edge Animate CC OAM format you can quickly and easily import your Edge Animate CC compositions into the likes of Adobe Muse CC or InDesign CC. No matter what your target platform or device is, Edge Animate CC makes it easy to produce high-quality animated content.

09. Web font services support

Edge Animate CC has Typekit and Edge Web Fonts support built in, so you can add richer typography to your HTML5 projects. You can preview fonts from the Edge Web Fonts service via the web font interface.

10. Create within Edge Animate CC

As well as being able to import from the rest of the tools in Creative Cloud, you can also create directly within Edge Animate CC thanks to its drawing and text tools. And because the tools work in the same way as those in your familiar Creative Cloud apps, there’s no learning curve to master.

Now read these:

What Creative Cloud tools do you use? Tell us in the comments...

Advert

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection