Share
Dos veces al mes, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores de toda la historia de Activetuts +. Este tutorial se publicó por primera vez en mayo de 2009..
Utilizando ActionScript 3.0, crearemos un fondo animado genial que podemos usar en las pantallas de menú o como un visualizador de música..
Echemos un vistazo a lo que vamos a trabajar:
Crearemos una clase que se encargará de todo el efecto. Cuando llame a la clase, podrá cambiar la cantidad de luces, color, alfa, tamaño, dirección, velocidad y la calidad del filtro Desenfoque. De esta manera es posible lograr muchos resultados diferentes cuando se usa. Además, puedes usar cualquier fondo que quieras..
Cree un nuevo documento ActionScript 3.0 (Archivo> Nuevo ...). Establece el tamaño del escenario a tus dimensiones deseadas, he usado 600 x 300 px.
Agregar o dibujar una imagen para usar como fondo, he usado un degradado azul simple (# 02C7FB, # 1F63B4).
Cambie el nombre de la primera capa a "Fondo" y luego cree otra y nombre "Código". Puede bloquear la capa "Código" para evitar la colocación de dibujos no deseados allí.
Guarda tu trabajo y entremos en el código.!
Supongo que ya tiene un conocimiento básico de ActionScript 3.0, si tiene alguna duda específica de palabras clave, consulte la Ayuda de Flash (F1).
Crear un nuevo archivo de ActionScript (Archivo> Nuevo ...).
Clases de paquetes / * Importar clases requeridas * / import flash.display.MovieClip; importar flash.filters.BitmapFilter; importar flash.filters.BlurFilter; import flash.events.Event;
Aquí importamos las Clases que usaremos, recuerde que la palabra al lado de "paquete" es el nombre de la carpeta donde se encuentra nuestra Clase.
// Necesitamos extender la clase para poder usar el método addChild (). Luces de la clase pública extiende MovieClip
La extensión de la clase MovieClip permitirá que nuestra clase herede todos los métodos, propiedades y funciones que posee el MovieClip, en este caso lo usamos para obtener acceso al método addChild ().
Aunque tienen nombres bastante autoexplicativos, agregaré comentarios breves sobre cada var para asegurarme de que quede claro. Obtienen sus valores a partir de los parámetros de la función Main..
luces privadas varNumber: int; // El número de Lights on Stage private var xSpeed: int; // La velocidad horizontal de las luces tiene una variación privada y Velocidad: int; // Vertical speed private var lightsDir: String; // Dirección a la que van las luces, esto puede ser Arriba, Abajo, Izquierda o Derecha privado var areaW: int; // El ancho del área donde tendrá lugar el efecto private var areaH: int; // Altura privada var lights: Array = new Array (); // Esta matriz almacenará todos los Clips de Movie de Lights para que podamos usarlos fuera de For For donde los vamos a crear.
/ * Función principal * / función pública init (areaWidth: int, areaHeight: int, numberOfLights: int, lightSize: int, lightColor: uint, minimumScale: Number, hSpeed: int, vSpeed: int, dir: String, quality: int) : void areaW = areaWidth; areaH = areaHeight; lightsNumber = numberOfLights; lightsDir = dir;
Esta es la función que necesitamos para iniciar el efecto, también establecemos los valores de las variables en este código..
para (var i: int = 0; i < numberOfLights; i++) /* Create the specified number of lights */ var light:MovieClip = new MovieClip(); /* Set random speed to x and y based on the params */ xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed); ySpeed = Math.round((Math.random() * vSpeed) + 0.5); light.xSpeed = xSpeed; light.ySpeed = ySpeed; /* Create lights */ light.graphics.beginFill(lightColor); light.graphics.drawCircle(0, 0, lightSize / 2); light.graphics.endFill();
En este código, utilizamos una declaración "For" para crear la cantidad de luces que el usuario establece en el parámetro y calcular una velocidad semi-aleatoria para cada luz..
Esto establece una posición de inicio aleatoria para las luces según los parámetros del área.
light.x = Math.floor (Math.random () * areaWidth); light.y = Math.floor (Math.random () * areaHeight);
var b: int = Math.floor (Math.random () * 10) + 5; // Calcula un desenfoque aleatorio entre 0-9 y agrega 5 al resultado. var blur: BitmapFilter = nuevo BlurFilter (b, b, calidad); // El objeto BlurFilter. var filterArray: Array = new Array (blur); // Para aplicar el filtro necesitamos una matriz de filtros. light.filters = filterArray; // Establece la matriz de filtros a la luz
El código anterior aplica el desenfoque. Recuerde que este código todavía es parte del For, por lo que las Luces obtienen diferentes Desenfoques.
light.alpha = Math.random () * 0.6 + 0.1;
Una fácil; esto establece la propiedad alfa entre 0.1 y 0.6.
light.scaleX = Math.round ((((Math.random () * (1-minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
Esto establece la escala de las Luces entre el tamaño original y el parámetro de escala mínima. Utilizamos un método redondo para ahorrar procesador..
addChild (light); / * Almacena las luces en una matriz para usarlas más adelante * / lights.push (light); / * Compruebe la dirección de las luces * / checkDirection ();
Esto agrega las luces al escenario, luego las guardamos en una matriz para usarlas más adelante. También es la función checkDirection para ver en qué dirección irán las luces.
Accentsconagua
función privada checkDirection (): void for (var i: int = 0; i < lights.length; i++) switch ( lightsDir ) case "up" : lights[i].addEventListener(Event.ENTER_FRAME, moveUp); break; case "down" : lights[i].addEventListener(Event.ENTER_FRAME, moveDown); break; case "right" : lights[i].addEventListener(Event.ENTER_FRAME, moveRight); break; case "left" : lights[i].addEventListener(Event.ENTER_FRAME, moveLeft); break; default : trace("Invalid Direction!"); Aquí usamos un para para acceder a todas las Luces en el Arreglo, luego verifique la variable de dirección para determinar dónde mover las Luces. Dependiendo de la dirección, agregamos el oyente a la función correspondiente..
La siguiente sección puede parecer un poco complicada, pero es más fácil de lo que piensas. Básicamente, mueve la Luz según la velocidad calculada en la función Principal, luego verifica si la Luz ha "dejado" el Área del efecto. Si ese es el caso, establece una posición aleatoria contraria a la dirección hacia la que se dirige la Luz.
función privada moveUp (e: Event): void e.target.x + = e.target.xSpeed; e.target.y- = e.target.ySpeed; / * Restablecer la posición de la luz, Y primero, luego X * / if (e.target.y + (e.target.height / 2) < 0) e.target.y = areaH + (e.target.height / 2); e.target.x=Math.floor(Math.random()*areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Función Mover hacia abajo * / función privada moveDown (e: Event): void e.target.x + = e.target.xSpeed; e.target.y + = e.target.ySpeed; / * Restablecer la posición de la luz, Y primero, luego X * / if (e.target.y - (e.target.height / 2)> areaH) e.target.y = 0 - (e.target.height / 2 ); e.target.x = Math.floor (Math.random () * areaW); if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW) e.target.y = areaH + (e.target.height / 2); e.target.x = Math.floor (Math.random () * areaW); / * Función Move Move * / function private moveRight (e: Event): void e.target.x + = e.target.ySpeed; e.target.y + = e.target.xSpeed; / * Restablecer la posición de la luz, Y primero, luego X * / if (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor(Math.random()*areaH); if ((e.target.x - e.target.width / 2) > areaW) e.target.x = 0 - (e.target.height / 2); e.target.y = Math.floor (Math.random () * areaW); / * Función Move Left * / private function moveLeft (e: Event): void e.target.x- = e.target.ySpeed; e.target.y- = e.target.xSpeed; / * Restablecer la posición de la luz, Y primero, luego X * / if (e.target.y - (e.target.height / 2)> areaH || e.target.y + (e.target.height / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaH); if ((e.target.x + e.target.width / 2) < 0) e.target.x = areaW + (e.target.width / 2); e.target.y=Math.floor(Math.random()*areaW);
Guarde su clase (recuerde que el archivo debe tener el mismo nombre que la Clase) y volvamos a Fla. Abra el Panel de acciones y escriba:
Importar Classes.Lights; var light: Lights = new Lights (); light.init (600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2); addChild (light);
¡Eso es! Prueba tu película para ver tu bonito fondo animado!
Jugar con los parámetros en la clase resultará en muchos efectos diferentes, intente cambiar el fondo, establezca velocidades más lentas o más rápidas, use más Luces, menos Desenfoque, etc.!
Espero que hayas aprendido algo que puedas usar, gracias por leer.!
