Share
En este Consejo rápido, aprenderá cómo usar la clase Tween de AS3 para crear un menú con una barra deslizante genial. Excelente para la navegación!
Echemos un vistazo al resultado final en el que trabajaremos:
Comience un nuevo documento Flash Actionscript 3.0 con un tamaño de 600 x 300 px.
Primero, seleccione la herramienta Texto y escriba su menú de navegación. Por el bien de este tutorial he usado Botón 1 | Botón 2 | Botón 3 | Botón 4, usando "Arista Light" a 30 puntos para la fuente y # 999999 para el color.
Luego vaya a la pestaña de alineación (si no puede verla, haga clic en Ventana> Alinear) luego alinea el texto centrado vertical y horizontalmente en tu escenario.
Renombra la capa existente a "Texto" y bloquéala para que no muevas accidentalmente el texto. Luego crea una nueva capa llamada "Botones". Seleccione la herramienta de rectángulo y arrastre un rectángulo (de cualquier color) sobre "Botón 1" para que se ajuste perfectamente a los bordes. Esta será el área de éxito para su elemento de menú.
Seleccione el rectángulo que acaba de dibujar, haga clic en Modificar> Convertir a símbolo y nombrarlo botón. Asegúrese de que el punto de registro esté en el centro (es posible que tenga que usar el panel Alinear nuevamente).
Luego, en el panel Propiedades, asigne a este botón un nombre de instancia de botón 1 y establece el alfa en 0%.
Copie y pegue su nuevo botón "invisible" sobre los otros tres botones y deles nombres de instancia de button2, button3 y botón 4 respectivamente. Use la herramienta Transformación libre para ampliarlos o reducirlos de modo que cada uno se ajuste perfectamente a su elemento de menú, sin espacios entre ellos..
Seleccione la herramienta Rectángulo nuevamente, establezca las esquinas redondeadas a 5 píxeles y dibuje un rectángulo que tenga 4 píxeles de alto y aproximadamente el ancho de su primer botón.
Colócalo debajo de tu primer botón, haz clic Modificar> Convertir a símbolo y nombrarlo bar. Una vez más, asegúrese de que el punto de registro está en el centro.
Dale un nombre de instancia de bar y un alfa del 0%, igual que los botones. Bloquea la capa de botones y crea una nueva capa llamada comportamiento; Bloquea esto también. Ahora haga clic derecho en el primer cuadro de su nuevo comportamiento capa y haga clic Comportamiento.
// Importar clases necesarias para interpolar import fl.transitions.Tween; importar fl.transitions.easing. *;
Estaremos usando el Tween Clase para hacer que la barra se mueva usando código, así que impórtala. los facilitandoTambién se necesita un paquete, para que podamos especificar el tipo exacto de movimiento de interpolación que se utilizará.
// Defina la variable de interpolación para la posición "x" de la barra var barX: Tween; // Defina la variable de interpolación para la aparición gradual de la barra var barAlphaIn: Tween; // Defina la variable de interpolación para el fade-out var barAlphaOut: Tween de la barra; // Defina la variable de interpolación para las barras ancho var barWidth: Tween;
Definir las variables que usaremos para interpolar la barra..
// Agregar un detector de eventos para el traspaso del botón 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Agregar un detector de eventos para el despliegue del botón 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Agregar un detector de eventos para el traspaso del botón 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Agregar un detector de eventos para el despliegue del botón 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Agregue un detector de eventos para el traspaso del botón 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Agregar un detector de eventos para el despliegue del botón 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Agregue un detector de eventos para el traspaso del botón 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Agregar un detector de eventos para el despliegue del botón 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Esto puede parecer mucho código, pero en realidad es muy simple.
Primero agregamos un detector de eventos que escucha el mouse para pasar el botón 1 y luego ejecuta el comando rollOverHandler función. Luego agregamos otro detector de eventos que escucha el movimiento del mouse afuera de button1 y ejecuta el rollOutHandler función.
Solo repetimos esos oyentes para los cuatro botones..
// Ejecutar la función para la función de evento de rollover rollOverHandler (e: MouseEvent): void // Ajuste la posición de la "x" de la barra al mismo que el botón. Los parámetros son: // objeto a interpolar (es decir, animar) // propiedad del objeto a interpolar // tipo de flexibilización (tipo de movimiento) para usar // valor inicial (es decir, valor para interpolar la propiedad de) // fin valor (es decir, el valor con el que terminará la propiedad cuando termine la interpolación) // duración de la interpolación // si se mide la duración en segundos (verdadero) o los marcos (falso) barX = new Tween (barra, "x", Atrás. easeOut, bar.x, e.target.x, 1, true); // Interprete el alfa de la barra para que se desvanezca en barAlphaIn = new Tween (barra, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); // Entre el ancho de la barra para ser el mismo que el botón barWidth = new Tween (barra, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Ejecutar la función para la función de evento rollout rollOutHandler (e: MouseEvent): void // Tween el alfa de la barra para que desaparezca barAlphaOut = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 0, 1, verdadero);
Cuando rodamos sobre un botón, la función rollOverHandler se ejecuta, lo que interpolará la barra desde su posición x actual a la posición x del botón que se está moviendo actualmente. (Nota: e.target Siempre se refiere al botón que activó el rollOverHandler Función.) Esto le da a la barra un buen movimiento horizontal suave.
Luego, desvanece el alfa de la barra de su alfa actual a 1 (100% alfa), y el ancho desde su ancho actual hasta el ancho del botón que activó la función de controlador..
Cuando salimos del botón, la función rollOutHandler se ejecuta y la barra se desvanece de su alfa actual a 0 (totalmente transparente).
Ya que los botones encajan estrechamente sin un espacio entre ellos, solo verás que la barra se desvanece si se sale de todos los elementos del menú a la vez, de lo contrario, volverá a aparecer demasiado pronto para que lo veas!
Ahora debería tener algo similar a la vista previa. ¡Genial! Ha aprendido a usar la clase Tween en ActionScript 3.0 para crear una animación de menú efectiva que llame la atención de las personas y se destaque de los menús normales. Las posibilidades son infinitas.
Siguiente paso: ¿qué hay de agregar una MouseEvent.CLICK escucha y controla cada botón para permitir que el usuario active diferentes acciones con un clic?
Espero que hayan disfrutado este tutorial y gracias por leer..
Accentsconagua