How to create smooth vector/graphic animation for websites in gif format

What is the best Adobe tool to create Animated GIFs?

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 all the focus, hard work and working through all the nitty-gritties in every single animation 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.

To create an animated gif, I choose Adobe Flash. I create my entire animation is Adobe 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, quicker and professional.

Imajine creates professional and best quality graphic animation for corporate websites


Basic intro about Adobe Flash

If you are a newbie to Adobe Flash, here’s an intro to the same.

In Adobe 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 basics to Adobe Flash. Adobe Flash is an extremely easy to use and very interesting tool. You spend time and play around with the same, you will definitely figure out more.


What should I keep in mind while creating animated gifs?

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

Imajine creates Adobe HTML5 animations, Video animations, Flash animations and animated gifs for corporate business


How to display mp4 animation/video files in website?

If you have created your animation in mp4 files. You can display the same in website pages using html5’s video tag.

Below is MP4 video animations created in Adobe Flash.


How to create mp4 video animation using Adobe Flash?

Creating mp4 video animation and displaying the same in website pages is even quicker, also gives access to broader colour palette.


Steps to create video animation in Adobe Flash

1. Create animation in Adobe Flash
2. Export it as QuickTime ‘.mov’ format
3. Using an online converter, convert ‘.mov’ to ‘.mp4’ format.

This approach is very helpful.

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

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


By Jayanthi Varma

Jayanthi is Imajine's Co-Founder, Designer and Developer. Jayanthi is in the field of website design and web app development since 2003. Jayanthi is also a certified User Centered Analyst.