massiveProCreation Blog

I personally never use Button symbol when creating a button, I always use MovieClip or Sprites and then I add to it button functionality. For example the simplest button I can think of is a green rectangle. We can make this kind of button very easily bellow I show you how:

1. Draw the green rectangle, you can do this either on the time line or using ActionScript, I will do this with ActionScript (if you want to do this on the time line just draw the rectangle, convert it to the symbol and give it a “button” instance name).
   
   
   
   

   //first we create the Sprite which will be our button
   var button:Sprite = new Sprite();
   // the we draw a green rectangle inside of it
   button.graphics.beginFill(0x00FF00, 1);
   button.graphics.drawRect(0, 0, 100, 50);
   button.graphics.endFill();
   // then we add the button to stage
   this.addChild(button);

   Ok so now we have a green sprite which will be our button.

2. In the second step we will have to set some very important properties of our Sprite (for those of you who draw the button on the time line you have to fallow the code from this part), first we would like to set the buttonMode to true so that the hand cursor shows up when we roll over the button, also it’s good to set the mouseChildren property to false so that none of the objects inside of our Sprite will receive the click.
   
   
   
   

   button.buttonMode  = true;
   button.mouseChildren = false;

   Now our button is ready, but it doesn’t do anything, in the next step we will add interactivity.

3. 3. Now we will add the events to our button so it will change after roll over/out and it will do something after the click event is triggered. For the visual “effect” I will use Tweener (which is free tween library, you can download it here).
   
   
   
   

   // first we add the events to our button
   button.addEventListener(MouseEvent.ROLL_OVER, bOver, false, 0, true);
   button.addEventListener(MouseEvent.ROLL_OUT, bOut, false, 0, true);
   button.addEventListener(MouseEvent.CLICK, bClick, false, 0, true);
    
   // next we create the functions that will handle our events
   function bOver(e:MouseEvent):void {
      // we tween the alpha when user rolls over the button
      Tweener.addTween(e.target, {alpha:0.8, time:1, transition:"easeOutExpo"});
   }
   function bOut(e:MouseEvent):void {
     // after roll out the alpha it tweened back to 1
     Tweener.addTween(e.target, {alpha:1, time:1, transition:"easeOutExpo"});
   }
   function bClick(e:MouseEvent):void {
      // when user clicks we will redirect him to my profile on ActiveDen website
      navigateToURL(new URLRequest("http://bit.ly/7I3xBb"), "_blank");
   }

   If you are missing any imports here is the list of those that you need to include in the ActionScript:

   import flash.display.Sprite;
   import flash.events.MouseEvent;
   import flash.net.navigateToURL;
   import flash.net.URLRequest;
    
   import caurina.transitions.*;

Here you can view the final effect of our work. Also if you want to download the source here it is: Simple button src (153)

P.S Please tell me what you think, this tutorial starts the series of simple and short tutorials on ActionScript 3.0

Kuba