HomePhotoshopDreamweaverIllustrator
 
 
Illustrator Tutorial - Animation

Some of you who have read our tutorials about exporting your Illustrator files into Photoshop or Importing your Photoshop files into Illustrator - and preserving all your layers - may have been unaware of this cross-program capability. Why would you want to do that? Well, this may explain more.

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.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Flag

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.

 

Flag Layers

Flag files

This downloadable ai. file contains the two layers as above.

Make sure you are on the 'flag' layer and, with the Selection Tool 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.

Appearance Palette

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.

Warp Options

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.

Flag Appearance

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.

Flag Appearance
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. Flag Appearance
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. Transform Effect

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 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.

Blend Options
Export as SWF
The SWF Options box (below) will appear.  In 'Export As' choose AI Layers to SWF Frames.  Press the Advanced button.
SWF Options

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.

Press Web Preview.

SWF Options

The result!

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

©grafikhaus 2015 | sheffield-central.com