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.

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

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.

1
2
3
 
var testButton:simpleButton = new simpleButton ("test");
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

  1. #1 by Michael - March 27th, 2009 at 08:44

    I followed this step by step with no luck. I just want to create simple reusable buttons.

    Has the link to the .as file been left off this tutorial?

    I tried:
    include “simpleButton.as”;

    This gave me an error:
    packages cannot be nested.

    Any ideas?

    Thanks

    Michael

  2. #2 by zedia.net - March 27th, 2009 at 16:37

    @Michael
    You don’t need to include the the as file. Make sure that the name of your Class is exactly the same as the name of your MovieClip in the library. Also make sure the as file is in the same folder as the fla.

    That should solve your problem.

  3. #3 by Sokina - June 22nd, 2009 at 04:55

    I’m a bit confused on the last section. I added the button on the stage. I made an actions layer and added the final script, but nothing happened. Can you please explain exactly the final steps please. I’m new to AS3 and I’m using Flash cs4. A demo file would be great.

    Cheers

  4. #4 by DavidC - October 7th, 2009 at 00:26

    Thanks for posting this. I’m new to AS3 and have what has to be a bonehead question. How do I place two (or more) of these buttons on the stage at the same time. I have everything working (but I needed to add a instance name of “Over’ to the second sprite), but I can’t seem to have two of these buttons appear at the same time. Here’s what I thought I needed to use:

    var testButton1:simpleButton = new simpleButton (“DA”);
    addChild (testButton1);

    var testButton2:simpleButton = new simpleButton (“RD”);
    addChild (testButton2);
    y = 100;

    Thanks again for the great tutorial!

  5. #5 by lala - December 1st, 2009 at 17:00

    @DavidC
    to set the positiong of testButton2, you need to specify testButton2:

    testButton2.y = 100;

    Thank for the toot :)

  6. #6 by jHaas - March 30th, 2010 at 15:52

    I get this error:

    1119: Access of possibly undefined property Over through a reference with static type simpleButton.

    at this source:

    alphaOver=new Tween(this.Over,”alpha”,Strong.easeOut,this.Over.alpha,0,0.5,true);

  7. #7 by Denesh - May 6th, 2010 at 07:49

    Please put the Source files here so we can have demo on this .

  8. #8 by KTLE - May 16th, 2010 at 07:25

    @jHaas
    Because you have not any object named Over. On the layer “Over” on the rectangle instance name box type “Over”.

  9. #9 by colin - January 12th, 2011 at 03:07

    i ‘m trying to figure out how to add a down state from and have multiple buttons interact to create a basic nav. in the base class i have. for (var i:int = 0; i < destArray.length; i++) {
    var testButton:simpleButton = new simpleButton (destArray[i]);
    testButton.name = destArray[i];
    trace(testButton.name);
    addChild (testButton);
    destArray[i] = testButton;
    destArray[i].x = (i*80)+80;
    destArray[i].y = 300;

    destArray[i].buttonMode = true;
    destArray[i].addEventListener(MouseEvent.CLICK, clickHandler);
    }
    but if i try and add destArray[i].alpha = 50; for example it doesn't effect the buttons i create. ideas?

  10. #10 by Zachary Dremann - February 5th, 2011 at 18:26

    One line, actually.

    var testButton:simpleButton =simpleButton(addChild(new simpleButton (“test”)));

    that works because add child returns the display object you are adding to the display list. You have to cast it back to simpleButton because addChild returns it as an object of type DisplayObject.

    Btw, generally, classes are done with capitals as the first letter, to differentiate them from variables.

  11. #11 by Zachary Dremann - February 5th, 2011 at 18:28

    @colin

    alpha ranges from 0 to 1 in as3, not from 0 to 100 like in as2.

    you should be setting destArray[i].alpha to 0.5, not 50.

  12. #12 by weindians - March 2nd, 2011 at 16:41

    i have some difficulty with on firefox

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.