It seems everywhere you look now has some form of complex button. Most buttons that have an animation when rolled over and an animation when you roll out are done with some form of this concept that I intend to share with you.

If you understand basic Flash concepts and just a smidgen of Actionscript, you will catch on in no time.

Before we get started, take a look at what will be created. It may not look like much, but from this one simple concept, sites like " The Life Aquatic" movie site are possible.

[ an example of what you will create ]

Here is How

1. Create a new Flash document.

2. Open up the document properties by pressing ctrl+j (cmd+j on Mac) and change the stage size to 100x100. Change the Frame Rate to 30.

3. Rename layer 1 on the main timeline to complexButton. The main timeline should now look like this:

4. Create a new movieclip by pressing ctrl+F8 (cmd+F8 on Mac). Name it mc_complex.

5. Double click mc_complex in the library to edit the symbol. Select the Oval Tool(o) and make a 30x30 circle on the stage. In the properties panel set the x and y values for that circle to 0.

6. Double click the circle to select the Fill and Stroke. Press F8 to convert it to a symbol so we can tween it. Make it into a graphic symbol and name it gr_circle:

7. Still editing the mc_complex movieclip select frame 15 and press F6. This inserts a keyframe. Resize the circle a little bigger than what is there. I went with 40x40.

8. Right click on any frame between the two keyframes on the timeline and select Create Motion Tween.

9. Create a new layer and call it actions. Insert a blank keyframe(F7) on frame 15. The timeline for mc_complex should now look like this:

10. Select the first frame of the actions layer. Type this code in the actions panel:

//stop();

 

this.onEnterFrame = function(){

if(rewind == true){

prevFrame();

}

}

 

this.onRollOver = function(){

rewind = false;

play();

}

 

this.onRollOut = function(){

rewind = true;

}

 

this.onRelease = function(){

getURL("http://www.kirupa.com","_blank");

}

11. Select frame 15 of the actions layer, Type this code in the actions panel

stop();

12. Navigate back to the root timeline. Put an instance of mc_complex from the library onto the stage.

13. Save the flash document and test your movie(ctrl + enter). There you have it, a button that animates on rollover and on rollout.

Now lets look at the code:

stop();

 

this.onEnterFrame = function(){

if(rewind == true){

prevFrame();

}

}

The first stop command just stops the movieclip from playing (so the animation doesnt loop). What the onEnterFrame event handler is doing is checking to see if rewind is set to true. If it is, the animation plays backwards until it reaches a stop.

this.onRollOver = function(){

rewind = false;

play();

}

The onRollOver event handler does two things, it sets rewind to false so that the onEnterFrame event handler doesn't execute the prevFrame script. The other thing the onRollOver does is play the animation. So when you roll over the button, rewind gets set to false, then the animation plays and you see the button grow until the playhead hits the stop command on frame 15.

this.onRollOut = function(){

rewind = true;

}

 

this.onRelease = function(){

getURL("http://www.kirupa.com","_blank");

}

This last chunk of code is rather simple. When you roll out of the button, rewind gets set to true. So now the onEnterFrame will execute the prevFrame (becuase rewind is equal to true) until it reaches a stop. The onRelease event is where you place your code for when the button is clicked.

Download FLA

If you have any questions, please post them in the forums: kirupaForum