Crear un remolque de ratón brillante en Flash

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.


Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:

Paso 1: Breve descripción

Usando ActionScript duplicaremos un MovieClip y luego modificaremos sus propiedades de alfa, escala y posición para obtener un buen efecto final..

Paso 2: Inicio

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..

Paso 3: Creando la Forma Principal

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".

Paso 4: ActionScript

Cree un nuevo archivo ActionScript (Comando + N) y guárdelo como "MouseTrailer.as"

Paso 5: Importar clases necesarias

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;

Paso 6: Clase de remolque de ratón

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 

Paso 7: Variables

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;

Paso 8: Constructor

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); 

Paso 9: Iniciar la función de remolque

Esta función manejará el trailer, configurando sus propiedades..

 Función privada startTrailer (e: MouseEvent): void 

Paso 10: Duplicar el LightBall

Este código crea un nuevo LightBall cuando se mueve el mouse.

 / * Crear un nuevo objeto LightBall * / lightBall = new LightBall ();

Paso 11: Posición

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;

Paso 12: Añadiendo a la etapa

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);

Paso 13: Animar la función

El alfa, la escala y la posición vertical se manejan en esta función..

 función privada animar (e: Evento): void 

Paso 14: Alfa

El alfa se reduce en un 5% cada fotograma..

 / * Alpha * / e.target.alpha - = 0.05;

Paso 15: Eliminar objetos invisibles

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); 

Paso 16: Escala

La escala se reduce en un 10% en cada cuadro..

 / * Scale * / e.target.scaleX - = 0.1; e.target.scaleY - = 0.1;

Paso 17: Posición vertical

 / * Posición Y * / e.target.y + = 3; 

Paso 18: Usando la Clase

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!

Conclusión

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..