Making a simple button using Tweens and Sprites in ActionScript 3

This tutorial could also be a tutorial about how to make a class using combining ActionScript and element from the library. This simple button will have two states, over and out. And the transition between the two state will be a fade. So in order to do this we will start in the Flash authoring tool (Flash CS3).

So first you will want to create a new symbol, so right click on your library in Flash CS3 and choose new symbol. In the window that will open, name your new symbol "simpleButton" and in the linkage section click the export for ActionScript option. The tricky part is next. It will automatically fill the Class and the Base Class field. The Class field is ok, what we want to change is the Base Class field. Since we are going to use ActionScript Tweens for animation, we don't need the timeline. So our Base Class will not be MovieClip, but Sprite. So instead of "flash.display.MovieClip", write "flash.display.Sprite" in the Base Class field. Now every thing should be fine, click "ok".

Now we are inside our simpleButton. We want to make 4 layers for this button, so on the timeline create 4 layers and rename them like this starting from the lower one: "back", "Over", "Label", "LabelOver". On the layer "back" create a rectangle using the drawing tool. On the layer "Over" copy the previous rectangle, but change its color. This color will be the color the button changes to when you roll over it. Now right click on the second rectangle and convert it to symbol. On the next window, name it whatever you want, but click the export for ActionScript option. We will want to change the Base Class to Sprite also, so do as we did earlier. Click ok to close the window. Now click on the new Sprite you created and in the property inspector at the bottom, in the Color select box choose Alpha, and give it an Alpha of 0%.

We created the back of the button, now we have to create the label. On the third layer "Label", create a dynamic textfield over the rectangles you created earlier. Give it an instance name "myLabel". Choose the font you want, give it a black color, make it not selectable and embed the characters you want for that font. Now copy that textfield at the same place but on the layer named "LabelOver", change its instance name to"myLabelOver" and also change its color so that we may see a change when we roll over the button. We are now done with what we have to do using Flash CS3. Basically, we have a new symbol with for layers in it; 2 rectangles and 2 textfields. Now lets do some ActionScript.

Now make a new ActionScript 3 document and save it as simpleButon.as in the same folder than your fla file. Here is the code you need to make it work.

PLAIN TEXT
Actionscript:
  1. package{
  2. import flash.display.Sprite;
  3. import flash.text.TextField;
  4. import flash.events.MouseEvent;
  5. import fl.transitions.Tween;
  6. import fl.transitions.easing.Strong;
  7. public class simpleButton extends Sprite{
  8. private var alphaOver:Tween;
  9. private var alphaLabelOver:Tween;
  10. private var alphaLabel:Tween;
  11. public function simpleButton(newLabel:String){
  12. myLabel.text = newLabel;
  13. myLabelOver.text = newLabel;
  14. myLabelOver.alpha = 0;
  15. buttonMode = true;
  16. mouseChildren = false;
  17. addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
  18. addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
  19. addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
  20. }
  21. private function handleMouseOver(event:MouseEvent):void{
  22. if (alphaOver != null)
  23. {
  24. alphaOver.stop();
  25. alphaLabelOver.stop();
  26. alphaLabel.stop();
  27. }
  28. alphaOver = new Tween(this.Over, "alpha", Strong.easeOut,this.Over.alpha, 1, 0.5, true);
  29. alphaLabelOver = new Tween(this.myLabelOver, "alpha", Strong.easeOut,this.myLabelOver.alpha, 1, 0.5, true);
  30. alphaLabel = new Tween(this.myLabel, "alpha", Strong.easeOut,this.myLabel.alpha, 0, 0.5, true);
  31. }
  32. private function handleMouseOut(event:MouseEvent):void{
  33. if (alphaOver != null)
  34. {
  35. alphaOver.stop();
  36. alphaLabelOver.stop();
  37. alphaLabel.stop();
  38. }
  39. alphaOver = new Tween(this.Over, "alpha", Strong.easeOut,this.Over.alpha, 0, 0.5, true);
  40. alphaLabelOver = new Tween(this.myLabelOver, "alpha", Strong.easeOut,this.myLabelOver.alpha, 0, 0.5, true);
  41. alphaLabel = new Tween(this.myLabel, "alpha", Strong.easeOut,this.myLabel.alpha, 1, 0.5, true);
  42. }
  43. private function handleMouseUp(event:MouseEvent):void{
  44. }
  45. }
  46. }

First we need to include all the classes that we will be needing. After that, you can see the constructor is quite simple, first we set the textfields to the String that was passed in parameter. After that, it's the tricky part about Sprites and the hand cursor. Even if you add mouse listener to your Sprite, it won't show the hand cursor if you roll over it. For that, you have to set the property buttonMode to true (in a similar way to useHandCursor in ActionScript 2). The thing we do next is set the mouseChildren to false. This goes with the buttonMode property. If you don't set it this way it will show the write cursor because the texfields are over our button and we don't want this. The last things in the constructor are the listeners, I have filled the mouse over and out, but I have left the mouse up for you to fill.

The interesting thing in the listeners is the stop() functions of the Tweens. You have to do this for rollOvers, if you don't and you roll out quickly and rollOver again, you might see glitchy behaviors because flash will always try to finish the Tweens, if you stop them, every thing will be fine.

Now there is only one step left, adding the button to the display list in the fla file.  Since everything is done in the class, this is pretty easy.

PLAIN TEXT
Actionscript:
  1. var testButton:simpleButton = new simpleButton ("test");
  2. addChild (testButton);

That's it, you can add as many button as you want with different labels in two lines of code. I guess this tutorial will need a bit of tweaking, but that's it for now

Close
E-mail It