Button RollOver/RollOut/Clicked States and AS3

Created Feb 15, 2010     Last Updated: September 18, 2011

Skill Level: Intermediate. Actionscript version: AS3

Flash skills needed:
  1. Creating MovieClip symbols
  2. Simple animation
  3. Using ActionScript panel

This tutorial is going to show you how to create 'buttons' which will have rollover state, rollout state, and a clicked state that will remain/be 'sticky' until another button is clicked.

Here is the finished piece that we will be aiming for:

This file consists of a 1 frame "main time-line" that has three movie clips to use as buttons.

The decision we have to make is about the movieclip buttons. How are we going to create them and give them the different states we want?

We could of course either create on the stage or in code a Simple Button. A button symbol is OK to use in certain situations, and their ease makes them attractive for simpler situations, but you can not access via code their various button states. So when we want to get more specific, we use movieclip symbols as our 'buttons'.

An oft used method is to create a 2 or 3 frame movieclip, and have the first frame have the look you want for the 'up' state - the normal state. Then you can change the second frame to have the button look like the way you want it to appear in its 'over' state. A third, optional frame, could serve as it's 'down' or 'clicked' state. Fully animated buttons would just extend this concept. We use either extended logic to take care of keeping the clicked button in its'clicked' state, or we can employ an auxilary movieclip to fake this appearance.

Another way would be to have the RollOver and RollOut functions swap out the images via add/removeChild, or using Loaders.

Another way is to write code to make some changes - color change, alpha change, or size change being most common visual signals that the button is rolled over.

For this example we will use a 3 frame movieclip to give the button different states.

LET'S SET UP THE FLA FIRST:

The fla has 2 layers. The bottom layer is to create the movielclips to use as buttons, and the top layer is for the actionscript.

On the bottom layer, I drew a shape - a rectangle - to use as the 'button'. Mine had a fill color of light green/tan. This was selected and turned into a MovieClip symbol. This symbol was double clicked to get inside of its timeline. This timeline likewise should have 2 layers - 1 for the shapes, and the other for the frame labels. The timeline is extended out to 3 frames.On the bottom layer with the rectangle shape, add a new keyframe in frames 2 and 3. change the color of the rectangle in frame 2 to, maybe, red. also change the color of the rectangle in fame 3 to, lets say, blue. Now if you scrub the 3 frame timeline you see the color change from tan in fame 1, to red in frame 2, to blue in frame 3. We will make these the 3 button states: tan for its 'up' state - the normal way it is viewed, red for its 'over' state for when the mouse is over it, and blue for its 'clicked' or 'active state.

Now on the other layer, we need to give each of the 3 frames a keyframe ( the first one is a key frame by default), and then in the properties inspector, give each of the frames a frame label. call the first frame 'up', the second frame 'over' and the third frame 'out' ( don't use quote marks in the frame labels !).

Get out of the movieclip symbol's timeline, and back to the main timeline. Duplicate the button twice ( on a mac, drag the symbol while holding down the 'option/alt' key). Give each button an instance name: 'button1' , 'button2', 'button3' for example.

Now we can set up the Actionscript.

Here is the actionscript to make it all work. I will describe it below.

The ActionScript to make it all work:

screen shot

Explanation of the ActionScript:

The first 3 lines are optional and just make sure that the cursor changes over to a hand symbol while over the button ( this is 'buttonMode').

Next I begin to put all my event listener groups into separate functions which I can then call on seperately anytime later.

The first function 'allButtonsUp',lines 5 - 9 tell all the buttons to go to and stop on the 'up' frame - so that they are all on the first frame.

The second function 'allButtonsOver',lines 12 - 16, assigns the mouse over event listener to all the buttons.

The third function, 'allButtonsCLICK', lines 17 - 22, assigns the click event listener to all the buttons.

The forth function, 'allButtonsOut', lines 24 - 28, assigns the mouse out listener to all the buttons.

Lines 30 - 33 call on all those 4 functions to run, therefore initializing each button with all the listeners, and having them all stopped on the first frame.

Lines 36 - 38 are the 'overFunction', which tells the button that is moused over to got ot and stop on its 'over' frame. (e.target is great shorthand to say that the target of the event - in the is case the event is the mouse over and the target is that movieclip which was moused over)

Lines 40 - 42 likewise handle the mouse out function, and tells the target of this mouse out event to go back to and stop on the 'up' frame.

Lines 44 - 53 are interseting and are for the function to handle the button click. Rememebr, we want multiple things to happen.We want the button that was clicked to go to and stop on frame 3. We will have to disable its mouse out and mouse over listeners, otherswise once it is clicked it would change to blue, but then would revert back once the mouse moved out of it. We do not want that to happen - we want it to remain 'sticky',so we have to do some special accounting for all the event listeners.

There are of course many approached to handle this. This is only one way, a way that I came up with that I feel is easy, succint, and a simple and direct way to accomplish this, without having to resort to assigning variables or counters to keep track of which button was clicked. Once you read through the code - and it is very readable - it should all make sense.

So, this one little button click must take care of all this - to change the button clicked to blue, to change back any previously clicked button , all the while making sure that the event listeners are disabled and re-enabled. If we examine lines 45 - 51 this will now make sense.

Line 45 calls the function to make ALL the buttons go back to frame 1.

Line 46 calls the function to re-enable ALL the buttons with the mouse over listener.

Line 47 calls the function to re-enable ALL the buttons with the Click function.

Line 48 calls the function to re-enable ALL the buttons with the mouse out listener.

Line 49 tells the button that was clicked to go to the 'clicked' frame, the 3rd frame (blue).

Line 50 removes the mouse over listener from the button that was clicked, and

Line 51 removes the mouse out listener from the button that was clicked ( VERY important). We could likewise remove the click listener, but it would not make any visual difference.

We could have made this code a little more compact by putting allthe button manes into an array, and cycling through the array with a 'for' loop to assign the properties to each button. I did not do that here for 2 reasons. 1 is if you don't yet undersstand arrays, then it would confuse the matter at hand. The second is that for just 3 buttons it does not save that much coding. However, if you had more buttons , then it would make sense to use a button array.

That's really it. I hope this all makes sense. It might seem complicated, but it really is not so bad. I have tried to present it in a way that you can grasp all the main concepts, and then use them for yourselves. If you have questions, feel free to ask! Contact me through the form below.

HERE's THE CODE:

button1.buttonMode = true;
        button2.buttonMode = true;
      button2.buttonMode = true;
      
      function allButtonsUp():void {
        button1.gotoAndStop("up");
        button2.gotoAndStop("up");
        button3.gotoAndStop("up");
        }
     
      function allButtonsOver():void {
        button1.addEventListener(MouseEvent.MOUSE_OVER, 
overFunction);
        button2.addEventListener(MouseEvent.MOUSE_OVER, 
overFunction);
        button3.addEventListener(MouseEvent.MOUSE_OVER, 
overFunction);
        }
        
       function allButtonsCLICK():void {
        button1.addEventListener(MouseEvent.CLICK, 
clickFunction);
        button2.addEventListener(MouseEvent.CLICK, 
clickFunction);
        button3.addEventListener(MouseEvent.CLICK, 
clickFunction);
        }
        
       function allButtonsOut():void {
        button1.addEventListener(MouseEvent.MOUSE_OUT, 
outFunction);
        button2.addEventListener(MouseEvent.MOUSE_OUT, 
outFunction);
        button3.addEventListener(MouseEvent.MOUSE_OUT, 
outFunction);
        }
        
        allButtonsUp();
        allButtonsOver();
        allButtonsCLICK();
        allButtonsOut();
      
      function overFunction(e:MouseEvent):void {
        e.target.gotoAndStop("over");
        }
      
      function outFunction(e:MouseEvent):void {
        e.target.gotoAndStop("up");
        }
        
      function clickFunction(e:MouseEvent):void {
        allButtonsUp();
        allButtonsOver();
        allButtonsCLICK();
        allButtonsOut();
        e.target.gotoAndStop("clicked");
        e.target.removeEventListener(MouseEvent.MOUSE_OVER, 
overFunction);
        e.target.removeEventListener(MouseEvent.MOUSE_OUT, 
outFunction);
      }
    

If you have questions or comments, feel free to let me know.

You must have 'styles' or 'CSS' disabled. That's OK.

If so, and you see this, please DO NOT fill out the next 3 fields: name, email and zipcode. Thank you.

Name:

Email:

Just continue on to the rest of the form below this. Thank you.








Thanks for helping us control spam by filling in this question:
What is 10 + 3 = ? (Use numerals only)