However, did you know that it was possible to create different 'states' of an Illustrator file and save them as a .swf file? In this way, you can create an animated file for insertion into a web page.
In the image above, we've drawn a Union Jack flag with a sky and flagpole. If you look at the layers to the right, the sky and flagpole are on one layer (which is locked), and the flag is on its own, separate layer. This is important.
This downloadable ai. file contains the two layers as above.
Make sure you are on the 'flag' layer and, with the Selection Tool drag a selection all across the flag to select all its components. (This is why we've locked the 'sky and flagpole layer' - so we don't include these items when we select the flag).
Make sure the Appearance palette is visible (WINDOW...Appearance) and click to select the 'Group' level. Then click the fx button at the bottom of this palette.
Under the pop-up options, choose Warp...Flag.
The dialogue box to the right will appear. Make sure the 'Preview' box is checked and apply a Horizontal bend of 4%. Click OK.
Note: The higher this 'Bend' value is set, the more the flag will 'wave'. We've started with a low figure for minimal wave as it gives a smoother animation. Feel free to use your own settings.
The flag is still selected and we are going to copy it. Press Ctrl + C to copy it, and then Ctrl + F to paste the copy in front of the original.
Looking at your flag, it will appear that nothing has changed, but click Warp: Flag in the Appearance palette as shown to the right.
This will make the 'Warp Options' dialogue box reappear. Again, make sure the 'Preview' box is checked and make the Horizontal Bend 4% (previously it was -4%)
Also, add a bit of Horizontal and Vertical Distortion. We've used 2% for both. Click OK.
We still want a bit more distortion so, with 'Group' selected in the Appearance Palette, click the fx button at the bottom of this palette. From the pop-up menu, go to Distort & Transform...Transform.
The 'Transform Effect' dialogue box will appear. Again, make sure the 'Preview' box is ticked and add just a slight adjustment to the Horizontal Scale - we've used 95%. Press OK.
Let's make a final copy of the flag. It's still on our clipboard, so press Ctrl + F to paste another copy in front of the other two.
Use the Selection Tool drag a selection all across the flag to select all its components. (This is why we've locked the 'sky and flagpole layer' - so we don't include these items when we select the flag).
With all flag copies and components selected, go to OBJECT...Blend...Blend Options. The box to the right will appear. Use the drop-down and select 'Specified Steps' and make the number (of steps) 15. Press OK.
Now go to OBJECT...Blend...Make. This has made a 'blend' between the three copies of the flag. Press OK.
Now it's time to export our flag as a .swf file so that we can add it to a web page. Go to FILE...Export and make sure the 'Save as type' box is set to Flash [*.SWF]. Press Save.
The SWF Options box (below) will appear. In 'Export As' choose AI Layers to SWF Frames. Press the Advanced button.
The Advanced Options dialogue will appear (below). Use the settings as shown:
Resolution: 72 ppi (the standard screen resolution. Frame Rate: 15 fps (frames per second) should be OK Looping: Means the animation will continue to 'play' rather than a one-time sequence. Export Static Layers: Make sure the 'sky and flag' layer is exported along with the various flag shapes.