Turning Flash Movies into rollover, clickable buttons

You gotta love web designers – they create lovely animations in Flash then expect you, the developer, to be able to instantly transfer them into roll-over-able, clickable buttons using the wonders of HTML.

Hmm. Time to roll up my sleeves and delve into the murky world of Flash and ActionScript again. (Didn’t help that I only have Flash 8 either)

Actually once I had figured it out it was quite simple. The designer had sent me the animation fla file – which just played continuously. We wanted to make this into a animated button that would appear on the home page of a site – that would play the animation when you rolled over it and stop when you rolled out. And to click on it and it will take you somewhere.

OK here are the steps you need to take:

1) Add 2 new frames on top of your current frames. Name one actions and one holderframe

2) Edit the holderframe and insert a new symbol – make it a Button with the name of “LauraBtn“. This should appear in the Library

3) Draw a blue box (don’t worry about the colour we’ll change it later. btw -Why can’t you see the size of your Stage when you are in the Library eh?)

4) Go back to Scene 1 and drag this button onto the stage. Give this button an instance name of “LauraBtn1“

5) Then change to the size selector tool and drag the box so it completely covers the area of the movie. We want the whole movie to be a clickable button

6) Then in Properties for the button change the Color Alpha to 0% – voila a transaparent button covering the whole area!

Now for the Actionscript:

In the actionscript frame you created earlier copy this code:

this.gotoAndStop(1); //this stops the movie the first time it is loaded

LauraBtn1.onRollOver=function(){
//this plays the movie everytime this movie is rolled over
 //trace ("LauraBtn1 rolled over");
 _root.gotoAndPlay(1);
}
LauraBtn1.onRollOut=function(){
//this stops the movie everytime this mouse moves off
 //trace ("LauraBtn1 rolled off");
 _root.gotoAndStop(1);
}
LauraBtn1.onRelease = function() {
//goes to the selected url on button click
 getURL("team.php", "_self");
 //trace ("LauraBtn1 clicked");
};

And thats it!

There are probably other (better) ways of doing this – so if you can improve on it please let me know!