Illustrator for Flash and Director

Working in Flash

We now need to open up Flash, to put our graphics together into a button. We start this by doing a normal Flash, File>Import of our Illustrator-created SWF file. Once you’ve done that, your graphic will show up on the stage and, if you select it and zoom, it should look something like this:

I’ve zoomed in on this to show you the text. It looks just like Flash text after the ‘Break Apart’ function has been applied, doesn’t it?

So now we have our exported button graphics sitting on the main stage. It’s time to start to build our button!

Select the top button graphic (top graphic only) and copy it by selecting Edit > Copy. Then click Insert > New Symbol. This will bring up the New Symbol Properties box. You will see a name box (that will be set to the default ‘Symbol 1’) that you can leave or rename. It’s best to give this button a name other than Symbol 1 – preferably something that you’ll remember. I used flashButton.

Now, look below the name field: you’ll find the area where you tell Flash what sort of symbol you want to create. In our case, we want to create a button symbol. By default, Flash will have it set on Movie, but you want to select Button. Once you’ve done that, click OK!

No you’ll find yourself in edit mode for your new button. Choose Edit > Paste to drop the top button graphic you copied onto the canvas. Once you’ve pasted it in, it should look something like this:

I put the guides in there to ensure that I’ll be able to line up the second button graphic once I bring it in. You can set up guides for yourself by clicking View > Rulers. Once the rulers are visible, you can drag and drop your guides onto the stage in the same way you would in Illustrator or Photoshop.

Creating the Mouseover Effect

Our next step(s) will involve creating the actual mouseover steps. We need to get our keyframes built and insert the appropriate graphics. This is where we’ll use our second button graphic. First, let’s select the entire graphic we have right no, and hit the F6 key 3 times. This will create the remaining 3 keyframes needed for the button, and place the graphic into those keyframes.

Once you’ve done that, you should have something like the screenshot below:

We’re going to keep this button pretty simple -- we’ve come to the point where we need our second button graphic. First we have to prepare the keyframe in which it will reside. Look for the second keyframe (labeled ‘Over’) and click on it, to select the frame that we want to put our second button graphic in. As you’ll see, we’ve already got our first (top) button graphic in the keyframe. Don’t worry -- that’s easy to remedy. The graphic should be selected. If it is not, select it and hit ‘Delete’ on your keyboard. Done!

You should now have a keyframe that looks like this:

Your stage is blank and the second keyframe is white, which signifies that it’s empty. This is good – it’s exactly what we want. Now, above the stage you’ll see the word “Scene 1”, with flash_button displayed to the right of it. That’s a crumb trail of our location: flash_button is bold and appears at the end, to represent the fact that we’re in that button’s editing area. This feature allows easy navigation through your Flash movie. Click the words “Scene 1”, and you’re back at the initial (main) stage of our movie, where the original button graphics are located.

Next, we need to select and copy the second (bottom) button graphic. Once that is done, we’re going to have to open the Library to find our button: hitting the F11 key will do just that. Once you’ve opened your library, you’ll see your button appear. Double click on your button (in the library window) to open up its editing area again. Viola! We’re right back to the above screenshot.

As for the first button graphic, we now need to place our second (bottom) button graphic on the stage. Select that graphic and, using your guides, place it in the proper location. It should look like this: