Consejo rápido imite la función de las pilas de Mac OS X usando AS3

La función Stacks ha sido parte de Mac OS desde Leopard y es una excelente manera de manejar elementos de visualización. En este Consejo rápido imitaremos esta función utilizando las clases de ActionScript 3.


Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:


Paso 1: Breve descripción

Haremos uso de la impresionante clase creada por PixelFumes y gráficos personalizados para crear un menú de pilas en Flash. Puedes descargar la fuente de la clase desde el sitio del desarrollador..


Paso 2: Configura tu archivo flash

Inicie Flash y cree un nuevo documento de Flash, establezca el tamaño del escenario en 508x243px y la velocidad de fotogramas en 24 fps.


Paso 3: Interfaz

Esta es la interfaz que usaremos; el fondo es una imagen tomada desde mi escritorio y los geniales logotipos son parte de la red Tuts +.

Convierta los logos a MovieClip y marque el Exportar para ActionScript caja. El cuadrado gris es un botón de escenario llamado stackButton.


Paso 4: ActionScript

Cree una nueva clase de ActionScript (Cmd + N), guarde el archivo como Main.as y escribe las siguientes líneas; por favor lea los comentarios en el código para entender completamente el comportamiento de la clase.

 paquete import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importar com.pixelfumes.stacks.Stack; // Recuerde importar la clase personalizada import fl.transitions.easing.Elastic; La clase final pública Principal extiende Sprite private var stack: Stack = new Stack (); // Crea un nuevo contenedor de pila / * Las siguientes variables son los nombres de los movieclips, puede agregar cualquier movieclip a las pilas * / private var nt: NT = new NT (); // Nettuts + logo private var at: AT = new AT (); // Activetuts + logo private var mt: MT = new MT (); // Mobiletuts + logo public final function Main (): void / * Establezca las propiedades de la pila * / stack.setRadius (240); stack.setAngle (35); stack.setStartAngle (0); stack.setOpenEasing (Elastic.easeOut); stack.setOpenTime (1); stack.setCloseEasing (Elastic.easeOut); stack.setCloseTime (0.5); / * Agrega los elementos al contenedor de pila * / stack.addItem (nt); stack.addItem (at); stack.addItem (mt); / * Coloca y agrega las pilas al escenario * / addChild (pila); stack.x = stackButton.x; stack.y = stackButton.y; / * Escucha los clics en el botón stack * / stackButton.addEventListener (MouseEvent.MOUSE_DOWN, stackClick);  función final privada stackClick (e: Event): void if (stack.getStackOpen () == false) // si la pila está cerrada, ábrala stack.openStack ();  else // stack está abierto, así que ciérralo stack.closeStack (); 

Paso 5: Clase de documento

Agregue el nombre de la clase a la Clase campo en el Publicar sección de la Propiedades panel.


Conclusión

Ha creado un menú de pilas útil para sus aplicaciones o sitio web. Puedes adaptar el proyecto para satisfacer tus necesidades o usar esta técnica para construir tus Stacks personalizados.

Espero que les haya gustado este Consejo rápido, gracias por leer.!