Call us 01491 413333

Adobe Edge Animate: Taking back control of animation design

Our senior designer Peter Pickthall takes a look at how Adobe Edge Animate has replaced Flash as a hands on creative tool for animation.

The death of Flash as a way of creating and delivering animations, games and rich internet applications on the web has been heavily documented and exalted over the years, with people shifting to HTML5 as a preferred platform.

As a long term and advanced user of Flash for animating, my worry about this rapid shift wasn’t surrounding the technology used to distribute the outputted content, but that the tools available to create this new format content just weren’t available.

Although animating with Javascript has been around for many years and more recently with CSS, the big advantage, and unrivalled feature of Flash as a content creation tool was the direct control you had over the animations and interactions without having to know how to code. As a designer and animator I found myself having to design things and then try and explain to a developer how I wanted it to come to life, which was very frustrating!

Animated Future

Now though, there is finally a tool that has enabled me to take that control back, Adobe Edge Animate.

If you have used Flash, then the Edge Animate (EA) environment and features such as a stage, a timeline, keyframes, tweens and symbols will feel very familiar to you. Adobe have also added a handy javascript code selector which makes it quick and easy to apply simple interactive functionality to your project with little understanding of coding.

While you can draw simple shapes within the application, the intended workflow is to create in Photoshop/Illustrator/Flash, and import individual bitmap/svg assets into EA to animate. At the click of a button you can then publish your project as HTML, CSS and Javascript for incorporating into your website.

[iframe src=”http://www.theboxtrolls.co.uk/assets/anims/wheels/wheels.html” width=”400″]

(© Universal Pictures International)
‘Wheels’ created for The Boxtrolls international website.

Google’s at it too

To keep Adobe on their toes, Google have entered the HTML5 animation arena with their own FREE tool, Google Web Designer. This is in beta at the moment and doesn’t have some of the vital animation features, that EA currently has (symbols being the most important one).

At this early stage it is unclear which direction Google are intending to take this tool – whether it will be predominantly for creating animated ad banners which will fit in nicely with their DoubleClick and AdMob advertising distribution network, or whether they want to develop it into an advanced web animation tool that will directly compete with EA.

While these tools are still in their infant stages, they offer enough for me to get excited about animation on the web again,  and I am very much looking forward to see they grow and develop over the coming months and years.

Links

Adobe Edge Animate – https://creative.adobe.com/products/animate
Google Web Designer Beta – http://www.google.co.uk/webdesigner/
DoubleClick – http://www.google.com/doubleclick/studio/homepage/
AdMob – http://www.google.co.uk/ads/admob/

Why not share this...
Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+Pin on PinterestShare on StumbleUponEmail this to someone

About

Senior Designer

Leave a Reply

Your email address will not be published. Required fields are marked *