design-nation.blog/es

Botón redimensionable

El problema: hace falta un botón que pueda presentarse en distintos tamaños, sin que deforme el texto del mismo.

La solución: construir el botón en tiempo de ejecución. Para ello, tenemos tres clips: borde izquerdo, borde derecho, y fondo. Lo demás, lo resolveremos al inicializar el botón.

Pero primero veamos el resultado:

Bien, pues tenemos, como hemos dicho, tres clips: izquierdo, derecho y fondo, con nombre de vinculación, respectivamente, de "left", "right" y "background"

En el primer frame, tenemos este código

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

import net.designnation.botones.*;
//función que ejecutará el botón al cliquearlo

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


/* **
* Inicialización del botón
* Parámetros: texto a presentar (que se pasa como parámetro desde el html)
* nombre de vinculación de borde izquierdo, derecho y fondo
* nombre de la función a ejecutar en el click
* línea de tiempo sobre la que se construye el botón
** */
var miBoton:Boton = new Boton(textButton, "left", "right", "background", "CallBack", this);
//Se asigna formato al texto
miBoton.setFormat("verdana", 20, 0xFFFFFF);
//Se inicializa el botón
miBoton.init();

stop();

La clase que construye el botón:

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];
  left = arguments[1];
  right = arguments[2];
  fondo = arguments[3];
  callback = arguments[4];
  timeline = arguments[5];
  //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);
 };
 	
 	
}

En este caso queremos que el botón ejecute una función de javascript, que también podríamos haber pasado como parámetro, pasar también como parámetro el formato del texto,....