Advertisement
  1. Web Design
  2. UX/UI
  3. Prototyping

A Web Designer’s Introduction to Adobe Animate CC

Scroll to top

What’s better than being static? Being in motion, my good friends. Motion is on the rise for the web, from simple interface interactions, to more complex scenarios and prototyping. In this article we’ll introduce ourselves to Adobe Animate, what it is, what it isn’t, and how it can help with your work as a web designer.

What is Adobe Animate?

Adobe Animate is described as being an evolution of Flash Professional; a product whose proprietary nature was doomed to the history books the moment Steve Jobs put pen to paper. 

“To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC” – , in 2015

So times change, and Adobe have changed their approach to the web as a result. 

Adobe Animate feature timelineAdobe Animate feature timelineAdobe Animate feature timeline
Adobe Animate’s feature timeline

Whether you’re new to motion, or consider yourself a veteran searching for an alternative to prototyping, Adobe Animate CC might be for you. As with all tools its purpose is specific to the person using it. This isn’t a tool everyone must use, but it’s in your interests to be aware of its presence. 

With Adobe Animate creations such as cartoons, advertisements, games, and other interactive content can be published to familiar platforms like HTML5 Canvas, Flash Player & Air, WebGL, and even Snap SVG. 

The Features

To help comprehend Adobe Animate’s capabilities I thought it would be best to list some key features I personally find interesting. The best thing about Adobe Animate is certainly the embracing of web standards. A close second is the fantastic range of exporting/publishing options, then then vector brushes, HiDPI support, 3rd party JavaScript integration and much more.

Timeline and Frames

All animations occur in sequence on what’s commonly known as a timeline. Flash developers will understand these concepts very well. This UI allows you, the developer, to manage your animations in a timeline by gaining a visual perspective of how the entire sequence fits together. Here’s a brief introduction by Adobe discussing timeline basics

Timelines can include fine-grained animations in a frame-based context. This means artists can create animations in isolation and integrate these isolated movements into a larger master timeline.

Exporting and Publishing

With open web standards finally being embraced by Animate CC, developers must still be aware of the technical limitations of the format they’re exporting to. Developers do have the option to export to the Flash player, SWF files, if needed. It’s also possible to export at multiple resolutions making it priceless for bitmap work. You can even generate a sprite sheet based on keyframes and animate through them using CSS! 

There’s no doubt that the export and publish options make it far more efficient to modernize your projects. Ship different versions of the same project without recreating your original source files from scratch by enabling the “scale content” option. Generate an HTML document for ActionsScript projects using the correct object and embed tags via the publish settings dialog box. 

The icing on the cake is you also have the ability to export to SVG.

Vector Brushes

Animate CC introduces new vector drawing tools, including vector brushes that don’t need to be converted to shapes in order to be edited. Everything you’re familiar with in Illustrator for brushes and drawing is also available to you in Animate CC. It allows you to custom-define a brush by setting parameters of the brush such as shape and even angle. Super slick if you care about quality and crisp artwork.

Bone Tool

Flash developers will be right at home with the bone tool to animate objects using “bones” chained linearly or branched in parent-child relationships; think of movements like an arm bending, a snake slithering or a leg kicking. These types of motion could take a tedious amount of time to prototype in code, but with Animate CC it can happen very quickly, making bad ideas cost less and nurturing good ideas faster. 

Armature-based motion sequences can also be included into symbols, or what are known as “instances”, which can be reused throughout your project. 

The bone tool comes with other tricks up its sleeve too. Gain realistic physical movement by integrating dynamic physics into the bones, like springness, making the motion far more realistic to the physical world.

Support for 3rd Party JavaScript

So you made a great piece of art to animate, but want to use a 3rd party helper like GreenSock, for example? Good news! You can do just that. Now from the Animate UI developers can have the flexibility they desire without feeling they reside in a walled garden with no help from the outside world. Use the latest JavaScript libraries at your disposal and get the flexibility you need for the frames in your animation.

Camera Positions and Stage Controls

Animators have complete control over how the stage (i.e canvas) is positioned. Options are  available for rotating the stage in any way, from any point you choose, such as centrally to the stage or even from the corner. Your animation can contain more dynamics too, like adding camera effects such as pan, zoom, or rotate giving your project even more realism; watch out James Cameron.

Animates virtual cameraAnimates virtual cameraAnimates virtual camera
Animate’s virtual camera

Conclusion

Tools are cool, but they don’t rule the world. Choose wisely, but choose what works for you. Tools are there to be of help not to dictate your workflow. If you’re using Animate in a project leave a comment and a link below of examples if you have some–tell us about your experience with this application. Happy animating!

Further Reading and Helpful Links

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.