Share
Durante este tutorial, usaremos el Panel de proyectos en Flash para crear un menú de AS3 animado vertical. Todo el proceso le permitirá personalizar fácilmente todos los aspectos del menú utilizando los constructores parametrizados. Sigue leyendo para saber más.!
Echemos un vistazo al resultado final en el que trabajaremos:
Comience creando un nuevo proyecto. Abra Flash y vaya a Archivo> Nuevo, luego seleccione Proyecto Flash. Aparecerá el panel Proyecto..
En el menú desplegable Proyectos, seleccione Nuevo proyecto. Escriba el nombre del proyecto "AnimatedMenu". En la Carpeta raíz, navegue y elija dónde desea guardar su proyecto; puede seleccionar una carpeta ya existente o crear una nueva. Asegúrese de que la versión de ActionScript esté establecida en ActionScript 3.0 y haga clic en Crear proyecto.
Ahora que el proyecto está creado, vamos a agregar una nueva carpeta para agrupar en él nuestras clases. Aún en el mismo panel "Proyecto", presione el icono "Nueva carpeta" en la parte inferior, nombre la nueva carpeta "Clases" y haga clic en Crear carpeta.
Durante este tutorial usaremos las clases TweenLite de GreenSock para la interpolación, por lo que necesitamos agregarlo a nuestro proyecto. Descárguelo y extráigalo, colóquelo en la carpeta de su proyecto (para que tenga AnimatedMenu / com / greensock /).
Ahora, si actualiza el panel Proyecto, debería ver esta estructura:
Haga clic en el icono "Nuevo archivo" en el panel Proyecto para crear un nuevo archivo, asígnele el nombre "AnimatedMenu.fla" (asegúrese de que el tipo de archivo sea un archivo Flash) y haga clic en Crear archivo.
Establecer el tamaño del escenario a 600x350px.
Seleccione la carpeta Clases y haga clic en el icono "Nuevo archivo", establezca el Tipo de archivo en ActionScript y asígnele el nombre "Principal". Esta será nuestra clase de documentos. Si no está familiarizado con las clases de documentos, este Consejo rápido sobre el uso de una clase de documentos lo ayudará..
Esto nos permitirá usar cualquier clase ubicada en nuestra carpeta de Clases sin la necesidad de cambiar el nombre del paquete. Vaya a Archivo> Configuración de publicación, seleccione la pestaña Flash y haga clic en Configuración de ActionScript. Haga clic en el botón más "Agregar nueva ruta" y escriba la ruta relativa './Clases'.
Dentro de las clases del paquete, importe la clase Sprite y utilícela para extender la clase "Main". Aquí está el código:
Clases de paquetes import flash.display.Sprite; Clase pública Principal extiende Sprite
Estas son las variables que utilizaremos (Opción del menú es una clase de ActionScript que crearemos más adelante)
private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem;
Ahora vamos a codificar el constructor, contiene el código que se ejecutará cuando se llame a esta clase..
Función pública Main (): void
Cree una instancia de la clase MenuItem para crear cuatro elementos de menú con diferentes colores, etiquetas, funcionalidades y posiciones:
// Cree cuatro instancias de la clase MenuItem y espacie los parámetros (x, y, color, etiqueta, URL). item1 = nuevo MenuItem (100,60,0x28D9E9, "Página de inicio", "http://active.tutsplus.com/"); item2 = nuevo MenuItem (140,150,0xA8FA2D, "Servicios", "http://psd.tutsplus.com/"); item3 = nuevo MenuItem (120,240,0xFC30FC, "Acerca de mí", "http://net.tutsplus.com/"); item4 = nuevo MenuItem (160,330,0xEE2B2B, "Contactos", "http://vector.tutsplus.com/");
Puedes cambiar las URL para que apunten a otros sitios..
Este código simplemente agrega los cuatro elementos creados anteriormente a la etapa..
// Añadir los elementos al escenario. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Ahora que hemos terminado con la clase principal, aquí está el código completo de esta clase.
Clases de paquetes import flash.display.Sprite; clase pública principal extiende Sprite private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem; función pública Main (): void // Cree cuatro instancias de la clase MenuItem y especifique los parámetros (x, y, color, etiqueta, URL). item1 = nuevo MenuItem (100,60,0x28D9E9, "Página de inicio", "http://active.tutsplus.com/"); item2 = nuevo MenuItem (140,150,0xA8FA2D, "Servicios", "http://psd.tutsplus.com/"); item3 = nuevo MenuItem (120,240,0xFC30FC, "Acerca de mí", "http://net.tutsplus.com/"); item4 = nuevo MenuItem (160,330,0xEE2B2B, "Contactos", "http://vector.tutsplus.com/"); // Añadir los elementos al escenario. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Esta clase es demasiado corta para realizar todas las funciones que se supone que debe hacer nuestro menú, por lo que crearemos la clase "MenuItem.as" que contiene las funciones necesarias para nuestro menú..
Agregue un nuevo archivo ActionScript 3 en la carpeta Clases exactamente como lo hizo para Main.as. Nómbrelo como "MenuItem.as".
Estas son las clases que necesitamos importar para nuestra nueva clase. No olvides que siempre puedes buscarlos en LiveDocs..
Clases de paquetes import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock. *; import com.greensock.TweenLite; import com.greensock.easing. *; import com.greensock.plugins. *; importar flash.text.TextField; import flash.media.Sound; importar flash.net.navigateToURL; importar flash.net.URLRequest;
Declarar la Opción del menú class (debe tener el mismo nombre que su nombre de archivo "MenuItem") y extender la clase Sprite.
La clase pública MenuItem extiende Sprite
Estas son las variables que necesitamos en este momento, más adelante agregaremos algunas otras a medida que avanzamos en este tutorial..
private var rect1: DynamicMovie = new DynamicMovie (); // Usa la clase DynamicMovie en lugar de la clase Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Esto nos permite cambiar el punto de registro. private var rect3: DynamicMovie = new DynamicMovie (); // Así podemos rotar los rectangels alrededor de sus centros. var privado X: Número; var privado Y: Número; Color de var privado: uint;
DynamicMovie es una clase de AS3 basada en una antigua clase de AS2 escrita por Darron Schall; esta clase de AS3 amplía MovieClip y agrega un nuevo conjunto de propiedades (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2) que le permiten manipular el sprite en función de un punto de registro contextual que se puede configurar utilizando setRegistration () método.
Necesitamos esta clase para rotar los rectángulos alrededor de sus centros. Así que vamos a colocarlo.
Puede encontrar esta clase en la carpeta de origen de este tutorial o puede descargarla desde oscartrelles.com, luego colóquela en la Carpeta de Clases para que nuestro código la reconozca..
Este es el constructor del MenuItem..
función pública MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Obtenga los parámetros de posición y color. X = posX; Y = posY; Color = color; // Llame a la función addRect para agregar 3 rectángulos con los parámetros especificados. addRect (rect1, X-12, Y, 360,62, color, 0,3,3); addRect (rect2, X-4, Y, 360,62, Color, 0.4,0); addRect (rect3, X, Y, 360,62, Color, 0.7, -2);
Esta función es responsable de dibujar los rectángulos de acuerdo con los parámetros dados: posición, ancho, altura, color, alfa y rotación.
función privada addRect (rect: DynamicMovie, X: Número, Y: Número, ancho: Número, altura: Número, color: uint, alfa: Número, rotación: Número) rect.setRegistration (X + (ancho / 2), Y + ( altura / 2)); rect.graphics.beginFill (color, alfa); rect.graphics.drawRect (X, Y, ancho, alto); addChild (rect); rect.rotation2 = rotación;
Ahora puedes probarlo y verás esto:
Claro, no podemos llamarlo menú si no agregamos algunas etiquetas. Nos ocuparemos de eso en el siguiente paso..
Vuelve a tu archivo AnimatedMenu.fla y agrega un nuevo símbolo (Ctrl + F8); llámalo "Text_mc" y selecciona "Exportar para ActionScript".
Ahora, dentro de este símbolo, agregue un campo de texto dinámico de 160x30 px con la herramienta de texto (T). Esta es la fuente que utilicé: Creampuff Regular, 24px, #FFFFFF. Nombra la instancia "txtLabel".
Seleccione el campo de texto y vaya a Ventana> Alinear (Ctrl + K) y presione los botones "Alinear borde izquierdo" y "Alinear borde superior" (asegúrese de que la casilla de verificación "Alinear al escenario" esté seleccionada)
Después de crear el campo de texto con la fuente especificada, debemos incrustarlo para mostrar el texto correctamente..
Así que ve a Texto> Incrustación de fuentes, dale un nombre (por ejemplo, "Fuente1"), selecciona la fuente Creampuff en el cuadro combinado de Familia, en los rangos de Caracteres selecciona todo en mayúsculas y minúsculas, luego presiona el botón "más" que se encuentra en la sección izquierda. Vea la imagen de abajo:
Para agregar etiquetas a los elementos del menú vamos a crear una instancia de la Text_mc MovieClip. Agregue esta línea de código a las variables en el MenuItem.as expediente.
private var txt: Text_mc = new Text_mc ();
Ahora deberíamos asignar a TextField el título dado en los parámetros del constructor..
Agrega este código al final del constructor..
// Asignar un título al campo de texto y colocarlo. txt.txtLabel.text = Título; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Esto es lo que debes conseguir:
En los próximos pasos agregaremos algunas funciones para animar el menú..
Para convertir nuestro elemento de menú en un botón, debemos agregar un rectángulo transparente sobre él y establecer el buttonMode a cierto. Entonces agrega esta variable a la lista de variables.
privado var menuButton: DynamicMovie = new DynamicMovie ();
Al final del constructor agrega este código:
// Use la función addRect para dibujar un rectángulo transparente sobre el elemento del menú. addRect (menuButton, X-10, Y-5,380,80, Color, 0,0); buttonMode = true;
Agregue los siguientes oyentes de eventos a la botón de menú al final del constructor.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick);
Esta función se llamará cuando el ratón esté sobre el botón de menú.
función privada mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Rotar los rectangels. nuevo TweenLite (rect1, .3, rotation2: -4); nuevo TweenLite (rect2, .3, rotation2: 0); nuevo TweenLite (rect3, .3, rotation2: 5); // Entre el texto. timeline.append (nuevo TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (nuevo TweenLite (txt, .3, x: X + 70, alpha: 1)); // Añadir un filtro de brillo al texto .; nuevo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, fuerza: 1, calidad: 3);
Aquí estamos usando las clases GreenSock TimelineLite y TweenMax para animar el botón. Busque en el sitio Activetuts + para ver más tutoriales con GreenSock.
Cuando el mouse está fuera, esta función devolverá el menú a su posición inicial.
función privada mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Rota los rectángulos a su posición inicial. nuevo TweenLite (rect1, .3, rotation2: 3); nuevo TweenLite (rect2, .3, rotation2: 0); nuevo TweenLite (rect3, .3, rotation2: -2); // hacia atrás la animación de texto. timeline.append (nuevo TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (nuevo TweenLite (txt, .3, x: X + 70)); nuevo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, fuerza: 0, calidad: 3);
Esta función abrirá la URL especificada cuando se haga clic en el elemento del menú.
función privada mouseClick (e: MouseEvent) // Abra la URL solicitada. navigationToURL (nueva URLRequest (myURL));
Debe agregar esta variable a la lista de variables.
privado var myURL: String;
Y añadir esta instrucción al constructor..
myURL = URL;
Esto es lo que debes conseguir. Desplácese sobre el menú para ver la animación..
Ahora vamos a añadir un efecto de burbujas frías..
Esta función creará una serie de burbujas con una posición aleatoria, tamaño y alfa en dos direcciones. Este es el código:
burbujas de funciones privadas (posición: número, dirección: número) // Crea 50 burbujas, puedes modificar el número para obtener más o menos burbujas. para (var i = 0; i<50; i++) var bubble:DynamicMovie= new DynamicMovie(); //Set the registration point for the current bubble. bubble.setRegistration(X+position,Y); //Give the bubble the same color as the menu item and a random alpha (but greater than 0.2). bubble.graphics.beginFill(Color,Math.random()+0.2); //draw a circle with a random position and radius. bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5); //add the bubble at the third index so that it is under the menuButton. addChildAt(bubble,3); //Tween the Bubble randomly according to the direction. new TweenLite(bubble,Math.random() + 1,x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut);
Necesitamos llamar al burbujas () Funciona cuando el ratón se desplaza sobre el elemento del menú. Así que agregue este código a la ratón sobre() función:
// Burbujas a la izquierda. burbujas (70,1); // Burbujas a la derecha burbujas (270, -1);
Esto es lo que obtenemos:
Vamos a terminar agregando un efecto de sonido al menú cuando se desplace con el mouse. Para hacerlo, descargue el sonido desde aquí (descargue el archivo mp3). Luego importalo a la biblioteca, Archivo> Importar> Importar a biblioteca. Cambie el nombre a "MySound.mp3".
Abra sus propiedades y haga clic en Avanzado; La ventana mostrará contenido adicional, seleccione "Exportar para ActionScript" y nombre a la clase "MySound".
Para agregar el efecto de sonido, cree una instancia del sonido importado anteriormente en la biblioteca y reprodúzcalo. Coloque este código en la ratón sobre() función.
var mySound: MySound = new MySound (); mySound.play ();
Hemos terminado con nuestro menú! Aquí está el código completo del MenuItem.as:
paquete import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock. *; import com.greensock.TweenLite; import com.greensock.easing. *; import com.greensock.plugins. *; importar flash.text.TextField; import flash.media.Sound; importar flash.net.navigateToURL; importar flash.net.URLRequest; la clase pública MenuItem extiende Sprite private var rect1: DynamicMovie = new DynamicMovie (); // Use la clase DynamicMovie en lugar de la clase Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Esto nos permite cambiar el punto de registro. private var rect3: DynamicMovie = new DynamicMovie (); // Así podemos rotar los rectángulos alrededor de sus centros. privado var menuButton: DynamicMovie = new DynamicMovie (); var privado X: Número; var privado Y: Número; Color de var privado: uint; private var txt: Text_mc = new Text_mc (); privado var myURL: String; función pública MenuItem (posX: Number, posY: Number, color: uint, Title: String, URL: String) // Obtenga los parámetros de posición y color. X = posX; Y = posY; Color = color; myURL = URL; // Llame a la función addRect para agregar 3 rectángulos con los parámetros especificados. addRect (rect1, X-12, Y, 360,62, color, 0,3,3); addRect (rect2, X-4, Y, 360,62, Color, 0.4,0); addRect (rect3, X, Y, 360,62, Color, 0.7, -2); // Asignar un título al campo de texto y colocarlo. txt.txtLabel.text = Título; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Use la función addRect para dibujar un rectángulo transparente sobre el elemento del menú. addRect (menuButton, X-10, Y-5,380,80, Color, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick); función privada addRect (rect: DynamicMovie, X: Número, Y: Número, ancho: Número, altura: Número, color: uint, alfa: Número, rotación: Número) rect.setRegistration (X + (ancho / 2), Y + (altura / 2)); rect.graphics.beginFill (color, alfa); rect.graphics.drawRect (X, Y, ancho, alto); addChild (rect); rect.rotation2 = rotación; función privada mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); var mySound: MySound = new MySound (); mySound.play (); // Rotar los rectangels. nuevo TweenLite (rect1, .3, rotation2: -4); nuevo TweenLite (rect2, .3, rotation2: 0); nuevo TweenLite (rect3, .3, rotation2: 5); // Entre el texto. timeline.append (nuevo TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (nuevo TweenLite (txt, .3, x: X + 70, alpha: 1)); // Añadir un filtro de brillo al texto .; nuevo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 1, blurX: 5, blurY: 5, fuerza: 1, calidad: 3); // Burbujas a la izquierda. burbujas (70,1); // Burbujas a la derecha burbujas (270, -1); función privada mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Rota los rectángulos a su posición inicial. nuevo TweenLite (rect1, .3, rotation2: 3); nuevo TweenLite (rect2, .3, rotation2: 0); nuevo TweenLite (rect3, .3, rotation2: -2); // hacia atrás la animación de texto. timeline.append (nuevo TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (nuevo TweenLite (txt, .3, x: X + 70)); nuevo TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, blurY: 0, fuerza: 0, calidad: 3); función privada mouseClick (e: MouseEvent) // Abra la URL solicitada. navigationToURL (nueva URLRequest (myURL)); burbujas de funciones privadas (posición: número, dirección: número) // Crear 50 burbujas, puede modificar el número para obtener más o menos burbujas. para (var i = 0; i<50; i++) var bubble:DynamicMovie= new DynamicMovie(); //Set the registration point for the bubble. bubble.setRegistration(X+position,Y); //Give the bubble the same color as the menu item and a random alpha but upper than 0.2. bubble.graphics.beginFill(Color,Math.random()+0.2); //draw a circle with a random Position and Radius. ; bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5); //add the bubble at the third index to be under the menuButton.; addChildAt(bubble,3); //Tween the Bubble randomly according to the direction. new TweenLite(bubble,Math.random() + 1,x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut);
Y aquí está el resultado final:
Ahora puede crear su propio menú y personalizarlo agregando más elementos de menú, cambiando los colores, cambiando el texto ...
El menú se codificó en una clase separada de ActionScript que le permite usarlo fácilmente en otros proyectos.
Quiero agradecerte por leer; Espero que lo hayan disfrutado!
Accentsconagua