Illustrator for Flash and Director

In Review

Our button is now complete, and ready for use! For those that are unsure of what they’ve just created, you’ve built a button symbol that will have a mouseover effect. Here’s the keyframe run down:

• Up: This is the normal (unchanged) state of the button
• Over: This is what the button will change into once the mouse is hovered over it
• Down: The graphic to be displayed when the button is clicked
• Hit: This is a very important keyframe, which tells Flash were the ‘hot-spot’ of our button is. We can make the hot spot bigger or small -- or even a different shape than the button itself. We need not worry about this state for this particular example. When we first set up our keyframes, we put the first (top) button graphic in that area, hence our Hit Zone is the same size and shape as our button.

Okay... so now we need to head back to our initial (main) stage. Remember how to do that? That’s right! Click the Scene 1 link.

We still have our original graphics here and we now no longer need them. So highlight and delete them both from the stage.

Do you still have the Library open? If not, hit F11 to open it up. Now drag and drop your button onto the stage. Once you’ve done that, you can use the Align tool (Window > Align) to center the button, and Window > Properties to resize the window. I resized my window to be just slightly bigger than my button (I’ll explain why I did this in a moment). This is what I ended up with:

Cool! Now we need to export our Flash button. We can do that by clicking on File > Export Movie. Find a place where you want to save the movie, and hit ‘save’. This will bring up an options window. At this point, we don’t want to change the details here, so just hit OK.

Once the export has run its course (which should be very quick) you can save your Flash movie and shut down Flash. Then, find your exported Flash movie (SWF) and double click it. If everything went right, you should see a button that displays a mouseover effect. When you click it, though, it will do nothing, as it’s not yet linked to any action.

That is how you us Illustrator to create graphics for your Flash movies, though this was, of course, a very simple example. You very well could have made this button with the tools that the Flash drawing environment supplies, but if you’re familiar with Illustrator, this process will have been much easier.

Now it’s time to take this a step further! Let’s bring that button of ours into Director!

Importing into Director

You can import Flash into Director in the same way that you’d import any other element you’d like to use. First, start a Director movie that has the same dimensions as your Flash button: 200px X 50px.

Once you’ve done this, import the Flash button and place it on our stage. You’ll end up with this:

One thing I forgot to mention above was that I made my movie background black to illustrate Director’s awesome Ink feature. This is why I gave some extra space around the Flash button with a white background. We can get rid of that every easy with Director.

In the screenshot above, the flash button is not selected. Select it by clicking it. Then open the Cast Member Properties box. Once in there, change the Ink option to ‘Background Transparent’. You’ll end up with what I’ve got in the screenshot below.

Once you set the Ink to Background Transparent, your button will look like this:

That’s all there it to it! If you publish the movie now, you’ll end up with a nice Shockwave movie that contains your Flash movie! The best thing is, you don’t have to write any Lingo, or have any other images to make the button output the mouseover!

I’ve also made a Shockwave movie where I used Photoshop PSDs to make a mouseover button in Director. I did this as I wanted to illustrate the difference is file sizes. Another very important benefit to using vector graphics is the scalability... but that is a whole other tutorial!

Download this file to see all these buttons in action!