Page 2 - The Animation
Hey! So we've created a SmartClip and we know how to use it, now all we need is a proper button for our navigation.

Let's start by opening the Library panel again, and double-clicking on "mcButton".

1. Create a new layer titled "Button" and place it above your fill layer, but below the border layer.

2. Select the Rectangle tool, and deselect the border option. Choose any fill colour, it doesn't matter.

[ Rectangle Properties - No Border! ]

We want an animation, right? Well, we need something to trigger that animation, a button for example. However, we're already making the core of our button, so we just need something invisible to trigger an event...an invisible button, easy enough.

3. Now draw a rectangle exactly the same size and position as your button. Right click your fill and convert it to a button, entitled "butInvisible". Double-click on the new item.

4. As we don't want to actually see anything from this button, just create a keyframe at "Hit", and delete the rectangle from "Up".

[ butInv - Only Keyframe on "Hit" ]

We'll return to the button in a minute, let's get the animation done. I'm not going to explain the animation that I did, because I'm sure many of you can come up with something a lot better, and you will be able to download the source file afterwards if you want to see how I did it.

I will, however, give you some guidelines.

5. Create a layer for your animation, and create a keyframe at frame 5. Your animation must be in 3 stages, I call them: Start, Drift and Stop.
    
   • Start is obviously the entrance of your animation.
   • Drift will be any animation you want to occur whilst the mouse is held over the button.
   • Stop is the animation that takes place when the mouse is rolled away.
6. It is always good practice to add an "Actions" layer at the top of your movies. Do so, and label the beginnings of each transformation accordingly. Add Actionscript where needed:

[ Timeline after animation ]

Action on Frame 1:

stop();

Action on Frame 26:

gotoAndPlay("Drift");

Also note I added a sound file on "Start."

Nearly finished! Back to the button:

7. Select the element "butInv" from your stage, and add these very simple actions:
    

   on (rollOver) {

   gotoAndPlay("Start");

   }

   on (rollOut) {

   gotoAndPlay("Stop");

   }

And you're done! Go back to your main stage, check your instances + their variables, test the movie and marvel at your new navigation menu.

The beauty of this, is that you have the ground-work done. If you decide you want to change the animation, just change your "mcButton" movie, and all instances of the animation will change.

Now you're obviously going to want these buttons to lead somewhere ... My best advice, and the practice I always use, is to add a new layer above your movie, and insert a new instance of your invisible button per link, and add the Actionscript for each one :)
 
This gives the user the impression they are clicking on your movie clips, but they are actually clicking on invisible buttons. Devious eh!

I'll attach the source file for my menu, and I'll add a few more examples below

Download Source File

[ Final Tutorial Menu ]

[ Using the same concept + the "Drift" routine ]

[ Tab Menu (Scaled Down) ]

The End
Well I hope you learned something from this, no matter how insignificant.

Thanks a lot!

Lukus For Inspiration

page 2 of 2