Jueves de Actionscript: Creando una botonera íntegramente con AS3

Buenas che, bienvenidos a un nueva y divertida sección!
Los jueves de actionscript es una nueva sección dentro de mi blog, donde van a encontrar scripts simples para usar en sus proyectos y tambien, por que no, aprender un poco…

Hoy vamos a aprender a hacer una botonera simple, íntegramente en Actionscript, estilo CSS.
Cuando trabajas freelance muchos clientes te piden que le hagas el logo y la botonera animada, si bien hay diversas técnicas para hacer una linda botonera con CSS y Javascript también hay formas de hacerlo muy fácil con flash.

En el archivo final van a tener todos los pasos mas detallados.
Descarga el archivo de acá

En nuestra botonera vamos a usar Tweener para las animaciones

import caurina.transitions.*;
import caurina.transitions.properties.*;
caurina.transitions.properties.ColorShortcuts.init();
caurina.transitions.properties.DisplayShortcuts.init();

Primero que nada vamos a crear el sprite que va a contener la botonera

var navholder:Sprite = new Sprite();
navholder.name = "navholder";
navholder.x = 10;
navholder.y = 40;

Ahora creamos el fondo de nuestra botonera

var navbackground:Sprite = new Sprite();
navbackground.graphics.beginFill(0x666666, .5);
navbackground.graphics.lineStyle(1,0x333333);
navbackground.graphics.drawRect(0, 0, 500, 30);
navbackground.x = 0;
navbackground.y = 0;

Ahora vamos a agregar los Sprites que creamos al Display List

navholder.addChild(navbackground);
addChild(navholder);

Ahora vamos a crear un array con los nombres de nuestros botones

var menuArr:Array = ["Inicio", "La Empresa", "Servicios", "Contacto"];

El segundo array que creamos es para los links, deben ir en el mismo orden que el array anterior.

var menuLinks:Array = ["inicio", "la-empresa", "servicios", "contacto"];

Hora de empezar con los botones

Ahora vamos a crear el movieclip que luego se va a transformar en nuestro botón

var btn:MovieClip;

Y acá definimos algunas variables para nuestra botonera

var btnXPos:Number = 2;
var btnYPos:Number = 2;
var btnMargin:Number = 2;
var i:int = 0;

Listo, terminamos. Ya creamos todos los elementos que necesitamos para armar nuestra botonera.
Recordemos que la botonera es bastante simple y básica pero ustedes pueden mejorarla, agregarle mas efectos y hasta pasar el script a una class y re-usarlo (:

Ahora vamos a crear la funcion que va a crear los botones

function botonera():void {
	if (i < menuArr.length) {
			btn = new MovieClip;
			btn.name = "btn_"+i;
			btn.id = i;
			btn.link = menuLinks[i];
			btn.alpha = 0;

			var fondo:Sprite = new Sprite();
			fondo.name = "fondo";
			fondo.graphics.beginFill(0x000000);
			fondo.graphics.drawRect(0, 0, 28, 28);
			fondo.alpha = 1;

			var formato:TextFormat = new TextFormat();
			formato.font = new btnFont().fontName;
			formato.color = "0xFFFFFF";
			formato.size = "11";

			var texto:TextField = new TextField();
			texto.name = "texto";
			texto.embedFonts = true;
			texto.autoSize = TextFieldAutoSize.LEFT;
			texto.antiAliasType = AntiAliasType.ADVANCED;
			texto.selectable = false;
			texto.defaultTextFormat = formato;
			texto.multiline = false;
			texto.wordWrap = false;
			texto.text = menuArr[i];
			texto.x = 0;
			texto.y = 0;

			btn.addChild(fondo);
			btn.addChild(texto);

			fondo.width = texto.width + 10;
			fondo.height = texto.height + 10;
			texto.x = fondo.width/2 - texto.width/2;
			texto.y = fondo.height/2 - texto.height/2;
			navbackground.height = fondo.height + 4;

			btn.x = btnXPos;
			btn.y = btnYPos;
			btnXPos += btn.width + btnMargin;

			navholder.addChild(btn);

			Tweener.addTween(btn, {alpha:1, time:.35, delay:.1*i, transition:"easeOutQuad"});

			btn.buttonMode = true;
			btn.mouseChildren = false;
			btn.addEventListener(MouseEvent.ROLL_OVER, rollover);
			btn.addEventListener(MouseEvent.ROLL_OUT, rollout);
			btn.addEventListener(MouseEvent.CLICK, onclick);

			i++;

			if (i < menuArr.length) {
				botonera();
			}
	}
}

Ahora vamos a crear las funciones del boton

function rollover(e:MouseEvent):void {
	var btn:MovieClip = MovieClip(e.currentTarget);
	Tweener.addTween(btn.getChildByName("fondo"), {alpha:.5, time:.35, transition:"easeOutQuad"});
}

function rollout(e:MouseEvent):void {
	var btn:MovieClip = MovieClip(e.currentTarget);
	Tweener.addTween(btn.getChildByName("fondo"), {alpha:1, time:.35, transition:"easeOutQuad"});
}

function onclick(e:MouseEvent):void {
	var link = e.currentTarget.link;
	var url:String = "?page="+link;
	var request:URLRequest = new URLRequest(url);
	try {
		navigateToURL(request, '_blank');
	} catch (e:Error) {
		trace("Ha ocurrido un error!");
	}
}

Y ahora para finalizar llamamos a la función que crea la botonera

botonera();

Bueno con esto terminamos la botonera, pero no se olviden que en el archivo esta explicado linea por linea.
Recuerden que es un ejemplo simple y básico, es super mejorable asi que espero su feedback en los comentarios!

Hasta el jueves que viene

Tweet