Los remolques de ratón son objetos que siguen el cursor del ratón cuando lo mueves. En este tutorial, te ayudaré a crear un avance de mouse azul y brillante con ActionScript 3.0.
Echemos un vistazo al resultado final en el que trabajaremos:
Usando ActionScript duplicaremos un MovieClip y luego modificaremos sus propiedades de alfa, escala y posición para obtener un buen efecto final..
Abra Flash y cree un nuevo archivo Flash (ActionScript 3).
Establezca el tamaño del escenario en la resolución deseada y agregue un color de fondo. He usado 600x300 en tamaño y he agregado un degradado radial azul (# 4584D4, # 184D8F). Además, agregué un rectángulo negro con 60% de alfa y texto para mostrar un mensaje instructivo. Echemos un vistazo a la imagen..
Este avance se compone de una forma simple que se duplica y se escala cuando mueves el mouse.
Seleccione la herramienta Oval, dibuje un círculo de 6x6 px y llénelo con un degradado radial (#FFFFFF, # 5CFAFF).
Convierta esta forma en un clip de película, agregue un filtro de brillo, use los valores en la siguiente imagen:
Convierta esto en un MovieClip y llámelo "LightBall", recuerde marcar la opción "Exportar para ActionScript".
Cree un nuevo archivo ActionScript (Comando + N) y guárdelo como "MouseTrailer.as"
Estas son las clases que necesitaremos, si necesita ayuda específica con alguna de ellas, consulte la ayuda de Flash (F1).
paquete import flash.display.Sprite; importar flash.ui.Mouse; import flash.events.MouseEvent; import flash.events.Event;
Ampliamos la Clase Sprite para acceder al método addChild (). Recuerde que el nombre de la clase debe ser el mismo que el nombre del archivo..
clase pública MouseTrailer extiende Sprite
Solo hay una variable en esta clase, la variable LightBall. Esto se usa para crear una nueva instancia de LightBall que creamos en el Fla.
var lightBall: LightBall;
En la función de constructor, agregaremos las líneas que ocultan el cursor del mouse y el escucha que iniciará el trailer..
función pública MouseTrailer (): void Mouse.hide (); stage.addEventListener (MouseEvent.MOUSE_MOVE, startTrailer);
Esta función manejará el trailer, configurando sus propiedades..
Función privada startTrailer (e: MouseEvent): void
Este código crea un nuevo LightBall cuando se mueve el mouse.
/ * Crear un nuevo objeto LightBall * / lightBall = new LightBall ();
La nueva posición de LightBall se basa en el ancho y la altura del clip y la posición del cursor del mouse.
/ * Posición * / lightBall.x = mouseX + Math.random () * lightBall.width; lightBall.y = mouseY - Math.random () * lightBall.height;
Añadimos el LightBall al escenario con el siguiente código:
/ * Agregar al escenario * / addChild (lightBall); / * Agregar el servicio de escucha a la función Animate * / lightBall.addEventListener (Event.ENTER_FRAME, animate);
El alfa, la escala y la posición vertical se manejan en esta función..
función privada animar (e: Evento): void
El alfa se reduce en un 5% cada fotograma..
/ * Alpha * / e.target.alpha - = 0.05;
Cuando el LightBall ya no es visible (alfa < 0) the object is removed.
/ * Si lightBall ya no es visible, elimínelo * / if (e.target.alpha <= 0) e.target.removeEventListener(Event.ENTER_FRAME, animate); removeChild(e.target as Sprite);
La escala se reduce en un 10% en cada cuadro..
/ * Scale * / e.target.scaleX - = 0.1; e.target.scaleY - = 0.1;
/ * Posición Y * / e.target.y + = 3;
Es hora de volver a la Fla.
Abra el Panel de propiedades, agregue "MouseTrailer" como clase de documento y estará listo para probar su película!
Ahora tienes un buen Trailer de Mouse que puedes personalizar como quieras. Intente cambiar la forma del clip de película, el tamaño, el color, ¡hay muchas opciones! Espero que hayan disfrutado este tut, gracias por leer..