Skip to content

Instantly share code, notes, and snippets.

@fenixkim
Last active December 16, 2015 08:59
Show Gist options
  • Save fenixkim/5409674 to your computer and use it in GitHub Desktop.
Save fenixkim/5409674 to your computer and use it in GitHub Desktop.
El siguiente código crea un menú de acordeón de 2 niveles. Para que el código siguiente funcione usted debe tener los elementos de la bibliotecas exportados para Action Script. Se recomienda crear un clip de película y pegar el código en el primer fotograba Aquí hay un ejemplo funcional en Flash: http://j.mp/XU7NS5 (Requiere CS5+)
import com.goto.display.layout.VLayout;
import flash.display.MovieClip;
import com.goto.display.View;
import com.greensock.TweenMax;
import com.greensock.easing.*;
////////////////////////////////////
// Variables
////////////////////////////////////
var Ease:Class = Expo;
var velocidad:Number = 1.0;
var separacionSubmenu:Number = 3;
var separacionExtraSubmenu:Number = 20;
var separacionEntreItemsMenu:Number = 3;
var separacionEntreItemsSubmenu:Number = 3;
// Guarda el item selecionada
var itemActual:MovieClip;
////////////////////////////////////
//
// Contiene la información del menú
// Agregue o quite elementos del menú y submenu aquí
//
// la propiedad item recibe cualquier instancia vinculada previamente
// para action script. Cada item tiene una propiedad submenu el cual es un
// arreglo de objetos
var menu:Array = [{item:crearMainItem(), submenu:[{item:crearSubmenuItem()},
{item:crearSubmenuItem()},
{item:crearSubmenuItem()}]},
{item:crearMainItem(), submenu:[{item:crearSubmenuItem()},
{item:crearSubmenuItem()},
{item:crearSubmenuItem()},
{item:crearSubmenuItem()},
{item:crearSubmenuItem()},
{item:crearSubmenuItem()}]},
{item:crearMainItem(), submenu:[{item:crearSubmenuItem()},
{item:crearSubmenuItem()},
{item:crearSubmenuItem()}]}];
////////////////////////////////////
// Menu : Level 1
////////////////////////////////////
// Este es el contenedor de los elementos del menu
var layout:VLayout = new VLayout();
layout.x = 0; // Mover el menú aquí
layout.y = 60; //
layout.gab = separacionEntreItemsMenu;
addChild(layout); // Se agrega el contenedor al escenario
function crearMenu()
{
var count:uint;
for each (var itemData:Object in menu)
{
// Cada item se agrega en un contenedor de yipo View
// este contenedor permite cambiar su tamaño sin afectar
// el contenido
var cont:View = new View();
// Cuando el contenedor cambia de tamaño se actualiza el tamaño del layout
cont.onDraw(layout.draw, false);
// Escucha el click del contenedor y abre el menu
cont.onClick(abrirMenu, false, [itemData.item]);
// Se agrega el contenedor al objeto
itemData.cont = cont;
// El objeto se guarda en el item en la propiedad data
// para acceder fácilmente a los datos desde el item
itemData.item.data = itemData;
// Inicialmente el contenedor tiene el mismo tamaño del item
cont.setSize(itemData.item.width, itemData.item.height);
// se crea el submenu
var submenuLayout:VLayout = createSubmenu(itemData);
submenuLayout.alpha = 0; //
submenuLayout.visible = false; // Inicia invisible
itemData.submenuLayout = submenuLayout;
// Se agrega el submenu al contedor View
cont.addChild(submenuLayout);
// Se agrega el item al contedor View
cont.addChild(itemData.item);
// Se agrega el contenedor al layout
layout.addChild(cont);
// Animación opcional
TweenMax.from(itemData.item, 1, {alpha:0, x:200, ease:Ease.easeOut, delay:0.05*count++});
}
}
// Devuelve la instancia de un item
function crearMainItem():MovieClip {
return new MainMenuItem();
}
// Abre el menú
// Cambia de tamaño el contenedor del item al cual se le hizo click
function abrirMenu(item:MovieClip) {
cerrarMenu(itemActual);
itemActual = item;
TweenMax.to(item.data.cont, velocidad, {height:item.height + item.data.submenuHeight, ease:Ease.easeInOut});
abrirSubmenu(item.data.submenu);
TweenMax.to(item.data.submenuLayout, velocidad, {y:item.height + separacionSubmenu, autoAlpha:1, ease:Ease.easeInOut});
}
// Cierra el menú
function cerrarMenu(item:MovieClip) {
if (!item) return;
TweenMax.to(item.data.cont, velocidad, {height:item.height, ease:Ease.easeInOut});
cerrarSubmenu(item.data.submenu);
TweenMax.to(item.data.submenuLayout, velocidad, {y:0, autoAlpha:0, ease:Ease.easeInOut});
}
////////////////////////////////////
// Submenu : Level 2
////////////////////////////////////
function createSubmenu (data:Object):VLayout
{
var l:VLayout = new VLayout();
l.gab = separacionEntreItemsSubmenu;
for each (var itemData:Object in data.submenu)
{
var cont:View = new View();
cont.onDraw(l.draw, false);
itemData.cont = cont;
itemData.item.data = itemData;
cont.setSize(itemData.item.width, itemData.item.height); // Inicia cerrado
cont.addChild(itemData.item);
l.addChild(cont);
}
data.submenuHeight = l.height + separacionExtraSubmenu;
cerrarSubmenu(data.submenu);
return l;
}
// Devuelve la instancia de un submenu
function crearSubmenuItem():MovieClip {
return new SubmenuItem();
}
function abrirSubmenu(items:Array) {
for each (var itemData:Object in items) {
TweenMax.to(itemData.item.data.cont, velocidad, {height:itemData.item.height});
}
}
function cerrarSubmenu(items:Array) {
for each (var itemData:Object in items) {
TweenMax.to(itemData.item.data.cont, velocidad, {height:0});
}
}
crearMenu();
@fenixkim
Copy link
Author

Que pena pero hay un error en el archivo de flash, tuve problemas con con una biblioteca antigua.

Cuando salga el error hacen doble click sobre él y reemplazan: import gt.display.layout.VLayout; por import com.goto.display.layout.VLayout;. note que cambio gt. por com.goto. este error debe salir 3 veces porque está presente en los 3 ejemplos.

Aquí esta el nuevo archivo: http://j.mp/XU7NS5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment