Learn to move files and graphics from Illustrator to Flash

There's a lot of ways to bring Adobe Illustrator files into flash, but after trying everything from Copying and Pasting to using the Flash Import command, I've settled on a tried and true approach that is an extremely effective way to set up your animations in Flash.

Adobe Illustrator is a great drawing tool. After using it for a while it becomes an extension of your brain and is a very efficient tool. Drawing in Flash, on the other hand, is very awkward to the average computer user. A lot of times, I'll work with both programs side by side, to maximize my workflow, I like to create my illustrations in Adobe and quickly bring them into flash as keyframes.

Here's the artwork that I'm going to be working with, it can really be any type of artwork, but this one is pretty simple, just a bunch of typography with some fills, lines and gradients.

200509142344

Before you do any exporting, take a look at your illustration and think about how you want to animate it. In Flash, every object you want to animate should be it's own symbol and be on a layer by itself. When you export from Illustrator you can help yourself by arranging your illustration into Layers that you can export in the right order for Flash to use.

So your first task is to separate this logo...Just looking at this logo, I know that I'm probably going to need the word "al", then each of the letters of the words "PALO", and then the tagline "3-7 pm con juan carlos y franchy". So I'll need a total of 6 layers in Illustrator.

Create your layers

200509142355

1. Make sure your layers palette is showing. (if it's not, go to the WINDOW menu and select LAYERS).
2. On the layers palette, click on the CREATE NEW LAYER icon as many times as you need...we'll need six layers in this example.

Layer your artwork

Now that you have the six layers, your next step is to put each element on a layer by itself. This will simplify the process of importing the artwork into Flash.

1. Choose the Direct selection tool. It's the white pointer with the plus sign next to it. The direct selection tool allows you to select a path or a series of paths at once instead of having to make sure all points in the path are selected.

200509150012

2. Drag a selection square around part of one of the letters and one of the shadows. This will select all paths related to that artwork.

200509150014

3. On the layers palette, you'll notice a small blue square next to the first layer of the document. The layer we had when we opened up the original. Click and drag that small square to one of the other layers you created.

200509150019

5. Repeat steps two and three until all elements of your artwork are on individual layers.

200509150025

Now you're ready to export the artwork to flash. There's no need to name these layers, the naming will be forgotten once you bring it into Flash.

Exporting to Flash

1. From the FILE menu select the EXPORT option.
2. From the dialog box, choose Macromedia Flash SWF

200509150028

3. Name your file and hit the EXPORT button

4. If you're not going to animate the different layers of the logo, you can just choose the first option. The logo will import as a single item ignoring layers. I'm going to choose the second option called AI LAYERS TO SWF FRAMES. This will import each layer as a movie with a keyframe.

200509150032

Flash will save an .swf version of your movie wherever you specified. You can read about the other options on Illustrator's built in help system, you should probably leave everything unchecked like I have it in this example.

Now you're ready to go to Flash. When you import a file from Illustrator, you can choose to bring the artwork directly into the timeline or place it into the Library. If the artwork I'm bringing in is in layers, I like to bring it directly into the timeline. The only time this can be a problem is if you've already got artwork placed on the file. In that case, it may be better to bring it into the library.


Import the artwork

1. Run Flash or open your Flash document.
2. From the FILE menu, select the IMPORT option and the IMPORT TO STAGE sub-option
3. Choose the .swf file you exported from Illustrator (make sure you don't choose the .ai file instead).
4. Click on the IMPORT button

You should now see whatever was on the bottom layer of your artwork. If you scrub the timeline (click and drag the red selection square on top of the timeline, you'll see that the rest of the artwork is in different keyframes.

200509150049

There are two things you need to do to animate objects in Flash. Number one, you must make symbols out of them, number two is each object you want to animate needs to be on it's own layer.


Prepare the artwork in Flash

1. Click on the insert layer icon underneath the timeline to add as many layers as there are keyframes.

200509152130

2. Now click on the first keyframe of the first layer. Clicking on a keyframe on the timeline will select everything on that keyframe.

200509152136

3. Hit F8 to convert the layer items to a symbol. Make sure you choose Movie clip as the type and name the symbol something relevant.

200509152140

4. Once you convert the object in the first layer to a symbol, you'll need to move the newly created symbol into it's own layer. To do this, click on the keyframe where the symbol exists and drag it over to the new layer.

200509160634

5. Repeat steps 2-4 with all the remaining keyframes until each layer holds a symbol by itself.

6. When you get to the last keyframe, you'll need to make sure you move the keyframe not to another layer, but to the beginning of the same layer, just click and drag the keyframe (black dot) to the first frame of the layer.

200509160639

Now, you're done setting things up for animating. It would be a good idea to rename each layer so that it labeled what symbol it contained. We should also add additional frames to the animation so that we'll have some extra room to make things move around.

Add additional frames

1. Double click on each layer name and type in a new name to an image. (if you can't remember what's on each layer, it should highlight the object when you click on the layer.)

2. Click on the scrubber (red square above the timeline and move it as far as it will go to the right.

200509160644

3. Hit F5 repeatedly to add new frames at the end of the animation. Let's add a total of 30 frames. (hint: if you want to delete frames, you can hold down the SHIFT key while hitting F5.

We are ready to animate. Whenever I animate, I always start with a layout how I want it to look when the animation is done, then I add keyframes. Every element that needs to be animated needs at least to keyframes. One at the starting position and one at the end position. Let's add some keyframes at around frame 5 on all of the layers.

1. Click once on frame 1 of the first layer
2. Hold down the shift key
3. Click on frame 5 of the last layer

200509162137

4. Press F6 to add keyframes to all layers

This is a shortcut to adding keyframes to multiple layers. You can select a series of layers to add keyframes to. Now we need to make each of the first keyframes be a motion tween. A motion tween is an animation from one position (or state) of a keyframe to another one.

5. Put your cursor in anywhere in between the two keyframes of the first layer you've selected and right click (control click on a mac). A menu will pop up.

200509162141

6. Select Create Motion Tween from the pop-up menu
7. Repeat step 6 with all of your layers.

Every layer should have two keyframes on it...The starting position for an object, however will be in the same as the ending position. We need to change the starting position of all of the objects.

1. Click on frame 1 of layer 1 (the black dot).
2. Click, then drag the object on frame 1 layer 1 on a new position on the work area.

200509162154

After you move the object, you can also change it's alpha setting. this will make the object become more transparent. Flash will not only animate the positioning of the object, but the alpha setting as well so it will look like the object is appearing out of the position it is animating from.

Note: The properties palette always looks different depending on what elements you have selected. When you click on a keyframe (black dot) on the timeline, you'll notice certain options on the properties palette.

200509162220

You'll notice the tweening options, plus ease in and out, rotation between keyframes, sound, etc.

When you click on an element on the timeline, as long as it's been converted to a symbol, you'll see slightly different options.

200509162235-1

To change the alpha property of a symbol, make sure the symbol (not the keyframe is selected.

1. Click on the symbol for the object on the first keyframe
2. look for the color pop-up on the properties palette
3. Change the selection from NONE to alpha

200509162237

4. Set a very low alpha setting (0-10)

Repeat this process with the rest of the layers. Once you're done, if you test the animation, you'll see that it works pretty well, the only problem is that everything happens at the same time. You need to make things happen at different times. To do that, you'll need to move the keyframes to different spots on the timeline.

1. Click on the second keyframe of layer 1
2. Click and drag the second keyframe to a different spot

200509162354

3. Click on the first keyframe of layer 1
4. Click and drag the first keyframe to a different spot.
5. Repeat the process for all the remaining frames

200509162357

Once you finish this reorganizing, test your animation (go to the CONTROL menu and select TEST MOVIE. Your animation is ready.

blog comments powered by Disqus