massiveProCreation Blog

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 (163)

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 (163)

---

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 (: