Como hacer un menú corredizo

Hace algunas entradas mostré un menú corredizo en donde al hacer rollOver los botones se deslizaban dejando ver el item seleccionado. Ahora como lo prometí (aunque ya un poco tarde) voy a explicar como funciona.

El fla tiene una estructura sencilla que consta de los botones con su respectivo nombre de instancia y una máscara que cubre a todos los botones.

La lógica es muy sencilla y las transiciones son manejadas con TweenLite de Grant Skinner. El código es el siguiente:

stop();
import gs.*;
import gs.easing.*;
import flash.display.MovieClip;

//Tiempo que dura la transición
var tiempoTrans:Number = 0.3;
var numButtons:Number = 7;

inicializarBotones(mcMenu);

function inicializarBotones(mc:MovieClip):void{
	//recorer los botones que tenemos y les agrega el listener para mouseOver
	for(var i:Number=1;i<=numButtons;i++){
		var btn:MovieClip = mc.getChildByName("menu"+i) as MovieClip;
		//le damos un número único a cada botón
		btn.num = i;
		btn.addEventListener(MouseEvent.MOUSE_OVER,funcRollOver);
	}
}

function funcRollOver(event:MouseEvent):void{
	//funcion que corre al dar rollOver sobre un rectángulo

	var numMenu:Number = event.target.num;
	var btn:MovieClip;

	for(var i:Number = 1;i<=numButtons;i++){
		//toma todos los botones hasta para hcer un tween
		btn = mcMenu.getChildByName("menu"+i) as MovieClip;
		if(i<=numMenu)
		{
			//desde el primer boton hasta al que se le hizo rollOver
			//se suben
			TweenLite.to(btn,tiempoTrans,{
				 y:(btn.num-1)*40,
				 ease:Back.easeOut}
			);
		}
		else
		{
			//y los demás se bajan
			TweenLite.to(btn,tiempoTrans,{
				 y:440-(numButtons+1-btn.num)*40,
				 ease:Back.easeOut}
			);
		}
	}
}

1 Comment

• Menú corredizo « EderChrono 02/17/2012 at 2:53 am

  [...] Aquí está el tutorial. Tweet Tags: as3, experimento, Flash, menú, rollOver, tweenlite [+] Share & Bookmark • [...]

  Reply