|
|
|
Exporting Illustrator
9 to Flash
Interfaces & Artwork |
| |
|
| I know there's a lot you
can do with Flash's paint tools. But if you like
the tools available to you with Illustrator. Or,
create print projects that could double for use
online (kill two birds with one stone). You can
use Illustrator to create the artwork, and export
it for your Flash websites with ease. |
|
|
 |
|
| |
|
|
|
| |
|
In Illustrator 9 |
| |
|
 |
1. Create
your artwork in Illustrator (or download my artwork).
For this example I created a simple interface.
It is a good idea to break apart
your fonts
(Type > Create Outlines) in Illustrator before you
export to Flash. You don't have to when exporting to Flash,
but you might as well do it now rather than later in Flash.
My fonts are already broken up.
You can include bitmap images in your artwork as well. Try
to stay away from using clipping paths
though. You might encounter a problem with images that use a
clipping path.
Hidden layers will not export.
This is a great feature. You can do all your artwork and export
multiple (*.swf) files with one (*.ai) file by showing only
the layers you want to export.
|
| |
|
|
|
2. From
the File menu at the top choose
Export. If you are using my
artwork, make sure all your layers are visible first.
|
| |
|
 |
3. In
the dialog box that appears, name
your file (I called mine "xtreme_interface"), then use
the drop down menu to select Flash(*.swf)
as the type of file you want to save this artwork as. Click
Save.
|
| |
|
 |
4. In
the new dialog box that appears, under the Export Options, choose
AI File to SWF File from the drop down menu.
You can have Illustrator automatically
create Flash symbols for you, but I find it more efficient to
leave that option off. Your symbols will appear as Symbol 1,
Symbol 2 etc… in Flash. And some elements of my artwork do not
need to become symbols because they will not be animated or
interact with the user.
You can have your bitmaps export to
Flash as JPEGs, but since Flash is going to compress these bitmaps
as JPEGs when we make our Flash movie, we want to keep the images
at high quality, rather than compressing them twice.
I suggest you import your bitmaps
into Flash seperately, as PNG files. But we'll just export my
whole Illustrator file (including bitmaps) for this example.
I have Curve
Quality set to 7. Use my screen shot here as a reference.
|
| |
|
| |
5. Finally,
click OK. If you haven't already,
you may want to save your artwork
in the native Illustrator format (*.ai) before closing Illustrator.
Just incase you want or need to make changes later.
We can close
Illustrator now.
|
In Flash |
| |
|
 |
6. Open
Flash, create a new movie,
and import the Flash (*.swf) file
(mine is called xtreme_interface.swf) that we just created with
Illustrator.
Modify your Movie Settings (Ctrl+M / Cmd+M)
so your stage size matches your artwork. Mine is 700px X 400px
and my background is white.
|
| |
|
| |
7.
At this point it is a good idea to save
your Flash movie (*.fla). Mine is called "xtreme.fla". |
| |
|
 |
8. Ta-Da!
Now you should have one frame in Flash with all your artwork
on it. You can select the elements
you want to create symbols with, for buttons and animations.
You can recolour and manipulate all the objects in Flash that
you originally created in Illustrator.
Filters and Effects you used in Illustrator
will appear in different ways in Flash. My Drop Shadow Effects
came into Flash as bitmaps. So I deleted duplicates. My Hatch
Effects Filter turned into symbols. Again, delete duplicates.
If you have a plan for your interface on
paper, you can choose to just build the basic elements in Illustrator
so you don't end up with duplicated objects. I just didn't want
to complicate this tutorial with designing interfaces.
|
| |
|
| |
|
|
|
Here's my Interface again.
For the Xtreme interface movie, I also used Illustrator to set
up the artwork for Swift3D (Save one compound path as an EPS
v.8 then Import it into Swift), and to use a Blend
for a better shape tween which we will look at next.
|
| |
|
|
| |
| email: rkovacs@thevein.com
|
© 2001 Rod Kovacs -- A
RK Tutorial |