Blog

Home > Blog  > Design  > Graphic Animation for websites and web application

Are you creating animated gifs in tools like Photoshop / Fireworks and wondering why you have not been able to create that smooth easing effect despite of so much hard work and enhancing all the nitty-gritties of your graphic in each frame.

Let me tell you, it has nothing to do with your capabilities, it’s the tool. It is very hard to manually create smooth animation with smooth easing effects adjusting every single frame.

In Photoshop/Fireworks getting this job right demands extreme focus, effort, time and patience.

When I have to create an animated gif, I choose Adobe Flash. I create my entire animation is flash and export it as ‘.fla’ file. Then in fireworks, I import my ‘.fla’ file.

Magic! This method automatically creates all the frames under single page. Beautiful, this is so so easy.

 

Basic idea about Adobe Flash

In flash, we do not create every consecutive frame. We create first and the last keyframes and get flash to tween in between frames and add easing attribute to get your desired effect. This is the very basics of flash, when you play around, you will definitely figure out more.

 

What you should take care of when creating animated gif

As gif format of images limit to a very small spectrum of colours, you should be careful about colours you choose. As much as possible, use less colours. Avoid gradient fills and textures.

 

Another alternative to create Animation for web applications

If you are creating animations for web apps, you don’t have to create animated gifs, you can even create mp4 files. And display them in your pages using html5’s video tag. That is easy too.

 

How I create mp4 Animations?

I create my animation in flash, export it as QuickTime ‘.mov’ format. Using an online converter, I convert ‘.mov’ to ‘.mp4’ format.

This approach helped me a lot, because I could avoid an in between tool, Photoshop/Fireworks.

Importing animation to Fireworks, made all my edits an elaborate process. And this is unavoidable because invariably I would have at least a couple of edits, change colours or improve graphic.

I don’t know how many of you are familiar with Flash. Flash is one of the old tools to create animation and am an old school designer. Been using flash since 2003, right from the beginning of my career.

I also heard that people use new tools like Adobe After Effects.