Instantly share code, notes, and snippets.
Last active
December 16, 2015 08:59
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
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+)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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;
porimport com.goto.display.layout.VLayout;
. note que cambiogt.
porcom.goto
. este error debe salir 3 veces porque está presente en los 3 ejemplos.Aquí esta el nuevo archivo: http://j.mp/XU7NS5