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,....