|
|
|
Exporting Illustrator
9 to Flash
Sequences |
| |
|
|
I never liked the way Flash handled shape tweens.
Since I found out about this trick, with the
Blend Tool in Illustrator, my shape tweens have
never looked better.
|
|
|
 |
|
|
|
|
|
|
|
In Illustrator 9 |
| |
|
 |
1. Create
two objects in Illustrator that you wish to blend together,
or download my artwork. They don't have to be the same colour
like mine. I made two compound paths. One is a skater, the other
is a bmx rider.
|
| |
|
|
|
2. Stack
the two objects so they're relatively centered on each
other.
It is important to pay attention to
which object is on top of the other. Your final tween will depend
on it.
If I want the final animation to start
with the bmx rider, then I put the bmx rider on the bottom
and the skater on top of him. You do not need to create 2 separate
layers. I have one layer named Layer 1 with two objects on it.
|
| |
|
 |
3. Go to
Objects > Blend > Blend Options.
For this blend, I am going to select
Specified Steps from the drop down menu, and enter a value
of 15.
If my Flash Movie is going to be 30fps,
this setting will make for a nice smooth animation.
|
| |
|
| |
4. Select
both objects on your artboard (click and drag a box around
them). Go to Objects > Blend > Make
(Ctrl+Alt+B / Cmd+Option+B)
|
| |
|
|
5. Go to
your Layers Palette. Click on the little
arrow of Layer 1 to expand it.
You should see one "sublayer"
underneath Layer 1 named blend. And your artwork should look something
like this (if you're using mine).
Select the blend "sublayer".
|
| |
|
 |
6. Click
on the Arrow at the top right corner of the Layers Palette
to access the Layers Menu.
Select Release
to Layers. Your blend should now have expanded
into a lot of layers. This is GOOD!
|
| |
|
| |
7. Go to File
> Export. Select Flash(*.swf).
Name your file (mine's called xtreme_tween.swf).
Click Save.
|
| |
|
 |
8. In the
dialog box that appears, select:
- AI Layers to SWF Frames
- 30fps
- Curve Quality 7
- Resolution 72
- Click OK
|
| |
|
| |
9.
Save your Illustrator file(*.ai). Close
Illustrator. |
| |
|
In Flash |
| |
|
| |
10. Open
Flash, create a new movie. Modify
your Movie Properties (Ctrl+M / Cmd+M) to:
- 30fps
- I have a white background
|
 |
11. Create
a New Movie Clip (Ctrl+F8 / Cmd+F8). Name it shape-tween.
Inside the new movie clip timeline named shape-tween,
import (Ctrl+R / Cmd+R) your
swf (xtreme_tween.swf).
|
| |
|
 |
12. Go
to the root timeline of your
movie. Drag a copy of the shape-tween
movie clip from your library to the stage.
Test your
Movie.
|
| |
Preview |
| |
|
|
|
In actuality, we didn't create a real tween, we created a sequence,
like in classical animation. Each layer could represent one cell
of an animation. In Flash we have a seperate keyframe in each
frame between the two objects. You can get pretty creative with
small sequences created using Illustrator's Blend Tool. Use your
imagination.
Check out www.melondesign.com.
I don't really know if they used Illustrator, but it's great animation!
If I wanted to incorporate this animation
into the movie we made in the previous tutorial, I would just
create a new movie clip in my xtreme.fla, and import the xtreme_tween.swf
we created with Illustrator, into the new movie clip.
To loop the animation, I created a Behavior
Movie Clip that plays any movie clip it's placed into, backwards.
I'm more impressed with the transition created by Illustrator
than the one with Flash. You can use Shape Hints in Flash to tweak
your shape tweens, but I find that more painful and time consuming
than using Illustrator.
Remember to use sequences and shape tweens sparingly. They can
quickly bloat your file size and slow down the playback of your
movie.
And why stop at Flash. You could create sequences in Illustrator
and export them out as PSDs in Layers to PhotoShop & Image
Ready or even better...
After Effects!
|
| |
|
|
| |
| email: rkovacs@thevein.com
|
© 2001 Rod Kovacs -- A RK
Tutorial |