Making a simple button using Tweener and Sprites in AS3
Saturday, November 24th, 2007In a previous tutorial, I showed how to make a simple button using the Tween classes and Sprites. I am going to redo the same tutorial but using Tweener instead. I am not going to re-explain the first step which are all the same than in the previous tutorial; I am just going to speak about the mouse handler functions.
So here is the new code using Tweener:
-
package{
-
import flash.display.Sprite;
-
import flash.text.TextField;
-
import flash.events.MouseEvent;
-
import caurina.transitions.*;
-
public class simpleButton extends Sprite{
-
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{
-
Tweener.addTween(this.Over,{alpha:1, time:0.5, transition:"linear"});
-
Tweener.addTween(this.myLabelOver,{alpha:1, time:0.5, transition:"linear"});
-
Tweener.addTween(this.myLabel,{alpha:0, time:0.5, transition:"linear"});
-
}
-
private function handleMouseOut(event:MouseEvent):void{
-
Tweener.addTween(this.Over,{alpha:0, time:0.5, transition:"linear"});
-
Tweener.addTween(this.myLabelOver,{alpha:0, time:0.5, transition:"linear"});
-
Tweener.addTween(this.myLabel,{alpha:1, time:0.5, transition:"linear"});
-
}
-
private function handleMouseUp(event:MouseEvent):void{
-
}
-
}
-
}
The major advantage of Tweener in the case of a rollover and a rollout (like most buttons) is that you don't have to keep track of previous Tweens in order to stop them. With the Tween classes, if you don't do that, you're going to end up with strange rollover behaviors. Also, we had to check if the Tween existed before trying to stop them which added extra code. Tweener handles all that for us which is pretty practical. I spoke some times of the Fuse Kit; it seems packed with a lot of options, but you can't do simple rollovers with it; with Tweener you can.
Well I'm about done with my tutorial on Tweener but I think I'll do one about using Tweener to Tween between two colors, just like Color.interpolateColor static method.