design-nation.blog/en

Resizable button

The problem: to make a button that could be resized without transforming the text.

The solution: building the button at runtime.

First, let's take a look at the final product:

There are three clips: the left and right borders, and the background.

So, here's the code attached to the first frame:

Stage.scaleMode = "noScale";
Stage.align="TL";

import net.designnation.botones.*;
//Callback, it will be fired when the button is clicked

function CallBack(){
 	getURL("javascript:alert('Hey, you clicked me!')");
}


/* **
* 
* parameters: text (it's passed through flashvars)
* left border linkage name
* right border linkage name
* background linkage name
* callback's name
* the timeline where the button is built
** */
var miBoton:Boton = new Boton(textButton, "left", "right", "background", "CallBack", this);
//Textformat
miBoton.setFormat("verdana", 20, 0xFFFFFF);
//build the button
miBoton.init();

stop();

So, here is the main class:

class net.designnation.botones.Boton{
 private var left;
 private var right;
 private var fondo;
 private var tempLeft;
 private var tempRight;
 private var tempFondo;
 private var texto:String;
 private var callback:String;
 private var timeline;
 private var ancho:Number;
 private var alto:Number;
 private var anchoUtil:Number;
 private var nDepth = 0;
 private var innerDepth = 0;
 private var innerClip;
 private var innerText;
 private var formato:TextFormat;
 
 function Boton(){
  trace("constructor");
  texto = arguments[0];//text
  left = arguments[1];//left border
  right = arguments[2];//right border
  fondo = arguments[3];//Background
  callback = arguments[4];//callback function
  timeline = arguments[5];//reference to _level0
  //init();
 };
 	
 public function setFormat(){
  formato = new TextFormat();
  formato.font = arguments[0];
  formato.size = arguments[1];
  formato.color = arguments[2];
  formato.bold = true;
 };
 	
 public function onOver(){
  /*
  tempLeft.gotoAndStop(2);
  tempRight.gotoAndStop(2);
  tempFondo.gotoAndStop(2);
  */
 };
 	
 public function onOut(){
  /*
  tempLeft.gotoAndStop(1);
  tempRight.gotoAndStop(1);
  tempFondo.gotoAndStop(1);	
  */
 };
 	
 public function onClick(){
  timeline[callback]();
 };
 	
 	
 public function init(){
  ancho = Stage.width;
  alto = Stage.height;
  //trace("ancho " + ancho + " alto " + alto);
  tempLeft = timeline.attachMovie(left,"tLeft", nDepth++, {_x:0, _y:0, _height:alto});
  
  tempRight = timeline.attachMovie(right, "tRight", nDepth++, {_y:0, _height:alto});
  tempRight._x = ancho - tempRight._width;
  
  anchoUtil = ancho-(tempLeft._width*2);
  tempFondo = timeline.attachMovie(fondo, "tFondo", nDepth++, {_x:tempLeft._width, _width:anchoUtil, _height:alto});
  
  innerClip = timeline.createEmptyMovieClip("tempInner", nDepth++);
  innerClip.ref = this;
  innerClip.onRollOver = function(){
   this.ref.onOver();
  };
  innerClip.onRollOut = function(){
   this.ref.onOut();
  };
  innerClip.onRelease = function(){
   this.ref.onClick();
  };
  innerClip.createTextField("tempText", innerDepth++,0,(alto/4),anchoUtil, alto);
  innerText = innerClip.tempText;
  innerText.text = texto;
  innerText._x = tempLeft._width;
  innerText.setTextFormat(formato);
 };
 	
 	
}