Create Animations using Illustrator

Web Designers can Create Animations using Illustrator

Using Illustrator for animations is a smart choice for both website designers and graphic designers. Illustrator is a great source for designing pixel perfect images. Illustrator give designers various file extensions to save images.

Some of the extensions are as follows:

.AI

.JPEG

.PNG

.EPS

.AIT

.SVG

.SVGZ

.FXG

.SWF

By using all the above file extensions you can create professional and pixel perfect designs. What I mean by perfect designs is Illustrator is a Vector based graphic design tool, when graphic or web designer creates any object in illustrator it converts the design to a vector which is drawn using vector graphics. Having the design in vector gives you benefits of generating high resolution designs which is good for print and have no worries about having your image pixelated once it is printed. As we all know Abode always take care of designers. We will use Illustrator to create our animation because creating animations in Illustrator will give us the benefit we can have both things done in one place having Pixel perfect graphics and animations.

Let’s start creating our first animation, creating animation in Illustrator is really simple and easy. Just follow these steps and in the end you will be amazed.

Step 1:

Open new file in Adobe Illustrator and draw a circle.

Step 2:

Now draw another circle but smaller than the first one, draw it at the bottom of the first circle with some vertical space as follows:

Step 3:

Select both circles and go to Object > Blend > Blend options.

Step 4:

Select Spacing Steps and number of copied circles you want then click OK.

Step 5:

Now Select both circles and again go to Object > Blend > Make. Here you have your copied circles and all sizes.

Step 6:

Now draw a curve line like shown in the image bellow and then select both line and the Circles go to Object > Blend > Replace Spine. Now your circle will blend with the curve line.

Step 7:

Create a new layer on same art board and draw a circle now go to Windows > Symbols > Select Nature and Drop grass7 from it on your art board. Now place grass on top of your circle line shown in the image.

Step 8:

Select both circle and grass and go to Object > Blend > Make. Our work is done here now Save your file go to File > import > save as Flash SWF.

Step 9:

Choose AI Layers to SWF Frames from set Export drop down options and choose version Flash Player9 now click Advance and check Animated Blend. That’s it, click OK now your file has been saved, open it in your browser.