Today we have a guest blogger in the house, his name is Tsafi, he agreed to contribute a tutorial for us so here it is…
This is Complex Button class pure AS3 with a rounded corner, gradient fill, Tween color and Auto text size adjust. First you need to ask your self why do I want to make custom button base on Action Script?
Well a few reasons:
1. You can reuse the class and apply it to your project with 1 line of code.
2. When working with round edges you will never have smudge corner as to a timeline base button when copy and past your button into a new Fla, and pixel are very accurate.
3. You can always add more function into your class and build more elements in to your button.
4. Class graphics are getting more popular with CS4/CS5 and there are many elements you won’t be able to do on the timeline(this version is base on CS3).
5. I can continue all day but you get the point of the benefit.
Let’s start
Live preview: click
Download: ComplexButton (11)
Adding Shape/Sprite.
Why shapes and not Sprite? Shape class is used to create lightweight shapes, but Shape cannot contain child display objects so Shape objects consume less memory than Sprite objects that contain the same graphics. However, a Sprite object supports mouse click events, while a Shape object does not ,so this is why the _Sp (Sprite) is my holder of all my shapes and the _Bhit(Sprite) is when roll over or click the button .
public class Button extends MovieClip{
private var _BMatrix :Matrix = new Matrix();
private var _Sp :Sprite = new Sprite();
private var _Bhit :Sprite = new Sprite();
private var _Base :Shape = new Shape();
private var _Border :Shape = new Shape();
private var _TopGlow :Shape = new Shape();
private var _mask :Shape = new Shape();
private var _GlowBut :Shape = new Shape();
/*publics:
This will pass all necessary variables in to our main class*/
private var _Color :uint;
private var _OverColor :uint;
private var _TextColor :uint;
private var _Size :Number;
private var _Round :Number;
private var _Stext :String;
private var _FontType :String;
private var _AdjTxtH :Number;
private var _TxtSize :Number;
//Text
//Custom text for our button
private var _Txt :TextField = new TextField();
private var _Tfm :TextFormat = new TextFormat();
//MOUSE_OVER/OUT for colorTransform:
//We are going to Tween color with timer
private var StartTmr :Number;
private var CurrentTmr :Number;
private var PercentVal :Number = 0;
private var SwitchMod :Number = 0;
private var BaseColor :ColorTransform;
private var NewColor :ColorTransform;
private var ActiveColor :Boolean;
//Consider this as a bridge to your main class
public function Button(Stx:String,///Yout button text
Siz:Number,///Button size
rou:Number,///Button Round edges
col:uint,/////Button base color
Oco:uint,/////Button on rollover new color
TCo:uint,/////Button Text color
Adj:Number,//Since this is auto text adjust, on so many font type`s
///i add a shift text position to adjust if it's
Fon:String,///Font type (Arial)
Tis:Number)///Text size Set to default 0 {
_Size = Siz;
_Stext = Stx;
_Round = rou;
_Color = col;
_OverColor = Oco;
_TextColor = TCo;
_AdjTxtH = Adj;
_FontType = Fon;
_TxtSize = Tis;
private function AddBtn():void{
/*Add all Childs, my _sp is my holder for all shape/sprite, make note
its very imported to set your childes in the right order just as you do with timeline layer
so the _Bhit is the last one since its our mouse click events.*/
addChild(_Sp);
_Sp.addChild(_Base);
_Sp.addChild(_Border);
_Sp.addChild(_TopGlow);
_Sp.addChild(_mask);
_Sp.addChild(_GlowBut);
_Sp.addChild(_Txt);
_Sp.addChild(_Bhit);
// GradientBox the Math.PI / 2 is the Gradien angle
_BMatrix.createGradientBox(_Size, _Size, Math.PI / 2);
BuildBtn();
//set our setMouseEvent:
setMouseEvent();
}
//START BUILD GRAFHICS FUNCTIONS:
private function BuildBtn():void{
/*The _Bhit as you remember is the sprite since we need the support of mouse click events.
Note that we are using drawRoundRect since we are using Round edges .*/
_Bhit.graphics.clear();
_Bhit.graphics.beginFill(0, 0);
_Bhit.graphics.drawRoundRect(0, 0, _Size, _Size, _Round, _Round);
//The Base shape is the color shape when roll over out.
_Base.graphics.clear();
_Base.graphics.beginFill(_Color);
_Base.graphics.drawRoundRect(0, 0, _Size, _Size, _Round, _Round);
/*We are adding a Top glow, you can revarse this on the _BMatrix fonction Math.PI / -2
and using GradientFill linear*/
_TopGlow.graphics.clear();
_TopGlow.graphics.beginGradientFill("linear", [0xffffff, 0xffffff], [1, 0.2], [0, 128], _BMatrix);
_TopGlow.graphics.drawEllipse(-_Size / 2, -_Size / 2, _Size * 2, _Size);
_TopGlow.blendMode = BlendMode.LIGHTEN;
/*Top Mask-add mask for top glow,If you remove the mask line (_TopGlow.mask = _mask;)
you can see the original shape.*/
_mask.graphics.clear();
_mask.graphics.beginFill(0);
_mask.graphics.drawRoundRect(0, 0, _Size, _Size, _Round, _Round);
_TopGlow.mask = _mask;
//We are adding Bottom Shadow to our buuton
_GlowBut.graphics.clear();
_GlowBut.graphics.beginGradientFill("linear", [0x000000, 0x000000], [1, 0], [50, 255], _BMatrix);
_GlowBut.graphics.drawRoundRect(0, 0, _Size, _Size, _Round, _Round);
_GlowBut.blendMode = BlendMode.OVERLAY;
/*lets build our text
We are setting our autoSize to center since we are
using Auto text size adjust base on our button size,
so we don’t care about font size we are leaning on
the button size proportion to do the text size job for us.*/
_Txt.autoSize = "center";
// Position our text in center of the button.
_Txt.x = _Size /2-2;
_Txt.y = _Size /4+_AdjTxtH
// The text size will adjust base on your button size.
_Tfm.size = Math.max(Math.ceil(_Size /3.5+_TxtSize));
// text color
_Tfm.color = _TextColor;
_Tfm.font = _FontType;
_Tfm.bold = true;
_Txt.defaultTextFormat = _Tfm;
_Txt.htmlText = _Stext;
_Txt.selectable = false;
//That's it we are done with building our graphic button
}
/*We are going to Tween color with timer ,There are many way doing it
most flasher`s will go with Tween engine like GS or Tweensy but here is one more option */
private function setMouseEvent():void{
//We are adding MouseEvent in to our _Bhit sprite that we make in our BUILD GRAFHICS function.
_Bhit.addEventListener(MouseEvent.MOUSE_OVER, BOver);
_Bhit.addEventListener(MouseEvent.MOUSE_OUT, BOut);
_Bhit.buttonMode = true;
/* set our transform.colorTransform
where we set NewColor and BaseColor in our private constructor*/
NewColor = _Base.transform.colorTransform;
BaseColor = _Base.transform.colorTransform;
//We set our GRAFHICS _Base shape to our color
_Base.transform.colorTransform = NewColor;
_Base.transform.colorTransform = BaseColor;
BaseColor.color = _Color;
NewColor.color = _OverColor;
StartTmr = getTimer();
}
// When roll over new color
private function BOver(e:Event):void
{
if (SwitchMod == 0) {
this.addEventListener(Event.ENTER_FRAME, UpdateColor, false, 0, true);
}
//0.01 is the speed of the colorTransform(slow)
SwitchMod = 0.01;
StartTmr = getTimer();
ActiveColor = true;
}
private function BOut(e:Event):void
{
//Speed on roll out of the colorTransform
SwitchMod = -0.01;
ActiveColor = false;
}
//Execute and update our color transform
private function UpdateColor(event:Event):void {
CurrentTmr = getTimer();
// PercentVal defines the state of the color-fade on activated interpolateTransform
PercentVal += SwitchMod;
if (PercentVal < 0) {
PercentVal = 0;
}
//This is the color strength base on alpha
if (PercentVal > .7) {
PercentVal = .7;
}
// Applay the Color.interpolateTransform function to our _Base shape .
_Base.transform.colorTransform =Color.interpolateTransform (BaseColor, NewColor, PercentVal);
//SwitchMod determine if initial rollover action
if (PercentVal == 0 && SwitchMod != 0 && ActiveColor == false) {
SwitchMod = 0;
//and remove the event when timer is done
this.removeEventListener(Event.ENTER_FRAME, UpdateColor);
}
}
/*That's it we are done with building our graphic button with our Tween color but 1 more thing
lets add public remove funtion ...the slay function for garbage collection*/
public function BtnSlay():void{
_Sp.removeChild(_Base);
_Sp.removeChild(_Border);
_Sp.removeChild(_TopGlow);
_Sp.removeChild(_mask);
_Sp.removeChild(_GlowBut);
_Sp.removeChild(_Txt);
_Sp.removeChild(_Bhit);
this.removeChild(_Sp);
}
/*so now we can go to our main class to add our button to our stage .
so :
text ,size ,round edge ,base color ,color over ,text color ,text adjust ,font text size =0*/
var _Btn:Button = new Button("Button",70,22,0x000000,0xff0000,0xffffff,3,"Arial",0);
addChild(_Btn);
Live preview: click
Download: ComplexButton (11)
About the author
Hallow My name is Tsafi.Y I am Brazilian in origin but live today in Israel. I am a graduate of School of Visual Arts NYC, i am also a flash developer (ACI) and Audio engineering for the last 12 years. I start my way as a partner team in Adobe on the flash ME version, left Adobe around 6 years ago for the Matrix flash learning division, and was teaching flash course for Adobe certified exam. Today i do mostly consulting for companies that need flash base integration around the world. My flash expertly is breaking the barrier and implements complex language in flash. Flash AS2, AS3, Flex/Air, CS3, CS4, CS5 ….. Is away of life for me ,and like any flash developer i do carry a little scratch in brain (:
