Goal

In this exercise you will learn how to import Flash 8 buttons into a Director MX 2004, or later movie.

Background:

There are many advantages for using Flash with Director. Flash assets, by virtue of being vector-based, are typically very small in file size and look good at nearly every viewed scale. Flash is especially handy when you want to integrate buttons into your Director movies because each button has self-contained rollovers so only one cast member is required. Lingo can then be added very easily to a Flash button to handle the various mouse events. Another advantage for integrating Flash into Director movies is that Flash files have integrated alpha channels so Flash artwork is easy to key into a background image in Director seamlessly. There are numerous other advantages, including the ability to have Flash ActionScript code send messages to Lingo, and vice versa. In this exercise we will focus on incorporating Flash buttons into Director.

Note: This exercise shows steps that are based on Flash 8 Professional. Other versions of Flash can be used to export artwork into Director MX 2004 or later, but the steps may be different, or the appearance and location of menu items may not be the same as the screen shots shown.


Flash Buttons:

Step 1

Create a new Flash movie having a width and height of at least 200 pixels, or large enough to accommodate a typical button.

Go to the Window menu and choose Common Libraries, then Buttons.

This will give you a list of pre-defined Flash buttons that you can import.

Window Menu for Library Buttons


Step 2

Peruse the available styles of buttons and find one you like. We'll choose the "oval red" button for this example.

Buttons Library



Step 3

Your library will be empty at first. Drag the button you like from the buttons library into your Flash movie library and drop it just under the word "Name," toward the bottom of the palette.

Internal Empty Library


Step 4

You should see the button Library item you just dropped, show up in the internal Button Library. The button item is now available for use in your movie.

Internal Library with an Item


Step 5

You want any artwork that is part of your Flash movie to be as close to the upper left corner of the canvas as possible to keep the overall area of your movie only as big as the artwork within it.

The "Enter" button here has been nudged up to within 1 pixel of the top left corner of the canvas.

Canvas Area



Step 6

One of the easiest ways to move artwork to the upper left corner of the screen is to use the X and Y properties and to type a "1.0" as the position for each. Entering properties numerically gives you full accuracy over object position and size.

Properties Tab


Step 7

Now that the artwork is in the upper left corner of the screen, we can have Flash automatically shrink the canvas area of the movie to match the dimensions of the button. To do this, go to the Modify menu, and choose Document... .

Modify Document Menu


Step 8

Within the window that appears, choose the "Contents" option. This will shrink the canvas of the Flash movie to match the exact size of the content. That is, it will make the canvas as large as the upper left corner to the rightmost bottom of where any artwork appears within the canvas. This is why it was important to move the button as far up and to the left as possible.

If you don't do this your artwork will still import into Director without a problem, but you'll notice a large transparent area around the artwork, which can get in the way. You'll find that most of the time it's much easier to have the Flash movie exported at the same dimensions as the artwork.

Canvas Size


Step 9

Once you've completed Step 8 you should see the canvas of the Flash movie appear at almost the same size as the button.

Sized Canvas


Step 10

If you double-click the button you can see all of it's rollover and hit properties. All of the built-in Flash buttons from the common libraries are well-designed and easy to modify. For example, it's easy to see the exact layer you would want to modify to change just the text of the button because the layers are clearly labeled.

Modify the button to suit your needs before exporting it, or leave it as-is.

Button State Editor


Step 11

You're now ready to export the button. To do this choose the File menu, and Export, then Export Image....

File Export Menu


Step 12

Make sure the Format of the file is a Flash Movie. Name the file, choose a save path location, then click the Save button.

Save As Dialog Window


Step 13

You're almost finished, but you need to se a couple of other options before the file will go smoothly into Director. In general, you can ignore all of the options except the ones shown here.

Choose "Flash Player 7" as the version and ActionsScript 1.0. You can leave the "Load Order" at its default, which is usually Bottom up. The load order doesn't matter in this case anyway.

File Export Settings


Step 14

Click the OK button when you've made the changes to the export options.

OK Button

You're now done, and you should be able to import the Flash button into Director without a hitch. The rollover qualities of the Flash button will work automatically in your Director movie, but you will need to add mouse event handlers to make the Flash button operate. You may also need to set the ink of the Flash sprite to "Background Transparent" to key it into a background in your Director movie having a different color from the the color of the Flash movie.

It's always a good idea to save your original Flash (.FLA) files in case you need to modify one of the imported buttons later.


Exercise:

Create a movie in Director that includes at least a couple of Flash buttons that you copied from the common Flash library, or better still, one or more buttons you made yourself using Flash. The above steps may seem tedious at first, but after you've exported a few buttons this way you'll be an expert. You'll also find that you can export any kind of Flash content in a similar way and have it easily import as a Director Cast Member.

<     Table of Contents     >