Animate buttons on a rollover

November 22, 1998
by Pat McClellan

Dear Multimedia Handyman,

I'm a relatively new Director user, but I'm learning fast. I hope you can help me figure out something I've seen in several CD-ROMs. I'm using bitmapped icons as my buttons and I know how to get a different image to swap in on rollover, but I'd like to have the button animate when the cursor rolls over it. How do I get it to continue swapping images while rolledOver?

Chuckie

Dear Chuckie,

This is a really easy task to accomplish. Normally I'd just send you the answer without writing a column about it, but this is a question I receive at least once a month so I think I'll give it some exposure.

You don't need any new lingo to animate those buttons on rollover. In fact, I'd continue to use the "UI Rollover Change Member" behavior in the Behavior Library that ships with Director. The trick is in creating and specifying the member for the rollover swap image.

What you need to do is create a film loop cast member which will contain the animated sequence for the button. Here's an example.

I created a single yin/yang image. In the paint window, I selected the entire image, clicked on the rotate button and rotated the selected area 360 degrees. From the Xtras menu, select Auto Distort...

I entered 10 members, which will create 10 additional members at intermediate increments of rotations (36 degrees apart). When I click the begin button, cast members 2 thru 11 are created. Note that cast member 11 will be exactly identical to cast member 1, since I rotated the graphic a full 360 degrees. We don't want any of the images repeated in our animation, so delete cast member 11. Why do I create a member just to delete it? Because it's very easy to rotate an image exactly 360 degrees, but it's nearly impossible to rotate it 324 degrees. That leaves us with 10 images that will create our animated cycle.

Follow these steps to created the animated film loop:

Select all 10 members.
In the score, select a frame with nothing else in it.
From the Modify menu, select "Cast to Time". This will move the cast members into sequencial frames in the score.
You may add other sprites to the sequence if desired, though it doesn't apply to my example.
Apply any desired ink effects now. For example, if you're going to want this button to have a transparent background, apply that ink effect to this sequence now -- even though the eventual background is not in the score at this point.
Play or drag the playback head through the sequence to make sure it looks good.
Select the area of the score which will comprise the film loop (all of the needed sprites through all of the frames of the sequence.)
Copy.
Select an empty cast member in the cast window, and paste. This will open the film loop properties window. Name the film loop (I used "spinner" for this example." Select the "loop" option if you want the member to cycle, and select "Play Sound" if you included sound in the film loop.

Now that the film loop is created, test it by dragging it into the score and playing it. Note that you can't simply drag the play head through the frames. The movie must be playing for the sequencial frames of the film loop to be displayed. This is kind of a pain but there's no way around it because you haven't really dragged the members into the score. The film loop is just a "pointer" to the appropriate cast members. Once you've tested the film loop, you can delete the part in the score where you laid out the film loop.

Now comes the easy part. I used the first image in my sequence (cast member 1) as the static image for my "button". I dragged this member into my score and applied the "UI Rollover Change Member" behavior from the Library. When the dialog box appeared, I selected "spinner" (my film loop) from the pulldown menu. Note that spinner is not the cast member following my static image, so I deselected the "Use Next Member" property.

I also added a simple behavior to beep when the button is clicked. That's just for my demo so you'll see that it behaves as a button.

So that's the whole thing. Easy. Good luck with your program and have fun with Director!

Patrick McClellan is Director Online's co-founder. Pat is Vice President, Managing Director for Jack Morton Worldwide, a global experiential marketing company. He is responsible for the San Francisco office, which helps major technology clients to develop marketing communications programs to reach enterprise and consumer audiences.