At some point in time in every designer’s life there comes a time where you need to make an animated web banner.
Illustrator itself has always been a print based application and one thing it just doesn’t do is animation.
There is an application called Adobe Flash. Flash does have the ability to create animation. It’s also one of the most popular applications being used to create animation. Flash uses the concept of framed based animation whereas in Illustrator, there is no frame. However, there are layers inside Illustrator and the beauty of Illustrator is that it can turn layers into frames for you.
Let’s see how we can do that.
Creating Layers
Opening my layers panel will show you that my banner is made up of 5 different layers. If you are familiar with the Flash application, you’ll know how easy it is to create an image like that. Now, just think of a layer as a frame and you’ll see how easy this will be.
What I have done here is basically to put every frame of my animation onto a separate layer. Right now I have five different layers and when combined, it will produce the full image like the example above.
Once you have completed setting up your layers, let’s create our animation.
Saving Your Animation
Things to consider when setting up the Save for Web & Devices command:
- Optimized file format: SWF
- Flash Player version: Flash Player 9 (the latest version on your machine)
- Type of export: Layers to SWF Frames (this is the most important setting)
- Curve Quality: 7
- Frame Rate: 1 second
- Loop: Play animation repeatedly (tick this checkbox)
Saving the file to SWF, a Flash format, Illustrator will ask you which flash player you want to optimize. Select Flash Player 9 which is the latest version at the time of writing this tutorial.
Type of export, this is the most important setting that you need to set. You can tell Illustrator to save your file into a big flash file by selecting the AI File to SWF File. You can also turn all your Illustrator layers into frames by selecting the second option which is Layers to SWF Frames and that’s going to create an animation.
Next, if you want to play the animation over and over again, put a tick in the Loop check box. Setting the frame rate to one frame per second means that every one second it’s going to switch within the layer.
Let’s go ahead and save the animation and select HTML and Images (*.html) in the Save as type. This will then automatically export an html demo file with the table already in it, so on and so forth.
This is how your html will look like, automatically generated for you by Illustrator.
<html> <head> <title>Simple-Animation-In-Illustrator-2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script src="images/Simple-Animation-with-Illustrator.js" type="text/javascript" ></script> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><noscript> <!-- ImageReady Slices (Simple-Animation-with-Illustrator.ai) --> <embed src="images/Simple-Animation-with-Illustrator.swf" width="569" height="80" alt="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/"> <!-- End ImageReady Slices --></noscript><script type="text/javascript">fn00000()</script> </body> </html>
Really new with me. I alway use photoshop and flash to make animation. Now, i learn one more way.
Thanks