Crea tu propio efecto ActionScript 3.0 Pixel Explosion

En este tutorial, aprenderá a crear un efecto que seguramente le llamó la atención (por ejemplo, en archivos como este), la Explosión de píxeles. Durante el proceso de creación, aprenderemos cómo extraer BitmapData de un MovieClip, cómo usar un motor de interpolación y cómo usar los detectores de eventos..

Comencemos entonces!

Paso 1: Preparando el escenario

Lo primero que haremos es crear un archivo flash AS3. Luego configuraremos nuestro escenario a 400px x 400px y 30 fps. Estaremos codificando en la línea de tiempo para simplificar las cosas, pero aquellos que saben programar en OOP pueden escribir este código en las clases. Necesitará un conocimiento básico de AS3 para comprender todos los procesos que implica este tutorial; Sin embargo, voy a tratar de mantenerlo muy simple. Los botones azules desplazados son los que tendrá que presionar en su IDE. Puede parecer mucho trabajo al principio, pero en realidad es muy simple ...

Paso 2: Dibujando nuestra Imagen Principal

Ahora dibujaremos una imagen vectorial de lo que necesitamos. Realmente puedes configurar cualquier imagen con este efecto (.jpg, .png), pero los vectores son más fríos. Como te darás cuenta, no soy un gran diseñador. Todo lo que necesita hacer es dibujar su imagen (o importar un jpg desde su computadora), seleccionarlo y convertirlo en un clip de película (presione F8 en Windows).

Paso 3: Preparación para el Código

Una vez que haya transformado su imagen en un Movieclip, puede prepararla para el código que la apuntará. Crearemos una nueva capa para las acciones (1.) y luego le daremos un nombre de instancia de mcLogo (2.). Luego importaremos las clases para usar en nuestra capa de acciones. Para este efecto necesitaremos un buen motor de interpolación. El mejor que encontré que maneja tanto la velocidad como la estabilidad es TweenMax. Puedes descargarlo de http://blog.greensock.com/tweenmaxas3/ (dona si te gusta). Recuerde copiar el directorio de clases en el mismo directorio que su .fla (como puede ver en el cuadro azul). Finalmente, importe la clase TweenMax en su línea de tiempo (3.).

Paso 4: Preparándose para la acción

Ahora configuraremos el escenario y nuestras principales variables. Alinearemos el escenario a la esquina de TOP_LEFT y lo configuraremos para que no escale el contenido. En el lado de las variables, crearemos un contenedor para contener todos los píxeles que explotarán. También crearemos un GlowFilter, esto es opcional, por supuesto, pero mejorará la genialidad del efecto. "Animar" es un interruptor que se volverá verdadero cuando se produzca el efecto y "pixelBMP" son los datos de mapa de bits de su imagen..

 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = new MovieClip (); var glow: GlowFilter = nuevo GlowFilter (0xFFFF00, 1, 10, 10,5,2); animando var: booleano = falso; var pixelBMP: BitmapData;

A continuación, crearemos variables de repetición y asignaremos la posición del contenedor de píxeles para que sea la misma que su imagen.

 var i: int = 0; var j: int = 0;

Paso 5: Crear los titulares de píxeles

Ahora extraeremos los datos de mapa de bits (colores de píxel) de la imagen que configuró (1.). Recuerda estas dos líneas, te ayudarán en otros proyectos también. Crearemos un nuevo símbolo desde la biblioteca (2) y haremos clic en el botón Avanzado. Una vez que haga clic, seleccione Exportar para Actionscript (3.). Busque el campo de texto Clase y escriba "myPixel".

Paso 6: Configurar la clase MyPixel

Ahora vamos a configurar el contenedor de píxeles. Entraremos en nuestro efecto de píxel recién creado y haremos una capa llamada "acción".

Paso 7: Configuración de los píxeles para recibir colores

En la capa de acciones configuraremos el mapa de bits. Este pequeño fragmento de código te ayudará cada vez que quieras manipular el mapa de bitsDatos de un objeto (por ejemplo, con otros efectos útiles como desaturación y desenfoque).

pixelBMP = nuevo BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)

He creado un círculo que contiene el color de cada píxel, pero puede personalizarlo para lo que desee; Cuadrado, triángulo o incluso un píxel simple. Añadimos el efecto de brillo de píxeles del parámetro de función:

var orgX: int = 0; var orgía: int = 0; var bmpImg: Bitmap; función setUpPixel (bdData: BitmapData, glow: GlowFilter) var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [brillo]; addChild (mc);

Paso 8: Cruzando todos los píxeles

Crearemos dos declaraciones "for" para cubrir todos los píxeles de nuestra imagen. El primero para (i) es para vertical y el segundo (j) para horizontal. El método getPixel devuelve una unidad que representa el color del píxel en esa posición. Si no es nulo, iniciará las operaciones presentadas en el Paso 9. Cruzaremos los píxeles de dos en dos debido a la administración de la memoria..

 para (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)

Paso 9: Dándole color a los pixeles

Comenzaremos asignando el color de píxel al filtro de brillo. Luego crearemos un nuevo myPixel que llamaremos "pixel_mc". Llamaremos a la función "setUpPixel" que definimos durante el paso 7. Esto pasa el bitmapData - 2 píxeles de ancho, 2 píxeles de alto, color del píxel actual, originalX, originalY y el filtro de brillo. Finalmente, agregamos este píxel al contenedor de píxeles (línea 12)

para (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)  if(pixelBMP.getPixel(j, i)>0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (new BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), resplandor) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;

Paso 10: Probando lo que hemos hecho hasta ahora.

Pequeños errores son muy comunes en la programación, es por eso que necesitamos probar nuestro movieclip de vez en cuando. Esto nos da nuestra imagen, pero también algo de desenfoque. El desenfoque se debe al filtro de brillo, por lo que no se preocupa allí. Como ya sabrá, no necesitamos que estos píxeles sean visibles, excepto cuando tienen nuestro efecto aplicado. Hasta entonces tenemos nuestra bonita imagen. Así que todo lo que necesita hacer en este paso es la línea de comentario 13 - pixelContainer.visible = false; y recuperarás tu imagen original.

Paso 11: Configuración del efecto de explosión

Tenemos los píxeles en su lugar, ahora todo lo que tenemos que hacer es animarlos. Esto es donde TweenMax entra en escena. Comenzamos la función haciendo que la imagen original sea invisible y los píxeles visibles. A continuación, estableceremos la imagen original y el botón que crearemos más adelante (para habilitar la función) en el índice más alto. Recuerda esta funcion - setChildIndex (yourmc, numChildren-1) Te ayudará en otros proyectos..

 function explode () pixelContainer.alpha = 1; mcLogo.visible = falso; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;

Paso 12

Aquí es donde los píxeles cobrarán vida. El "para" atraviesa todos los hijos de pixelContainer. El píxel se extrae a través del getChildAt (i) método. El xdest y ydest son algunos destinos aleatorios a los que volarán nuestros píxeles (ya que Math.random () devuelve un número entre 0 y 1, es necesario multiplicarlo). Finalmente, agregamos la transición y un tipo de facilidad a través de TweenMax.

 function explode () pixelContainer.alpha = 1; mcLogo.visible = falso; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; para (var i: int = 0; i Paso 13: implosión
 Para la implosión, por supuesto, necesitamos almacenar nuestros valores iniciales en algún lugar. Crearemos (1.) 2 matrices - xArray y yArray que almacenan estos valores. Después de esto (2) lo insertaremos en el para (j = 0; j El código para empujar los valores en el siguiente índice..
  var xArray: Array = new Array (); var yArray: Array = new Array (); para (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (new BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), resplandor) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false; 
 Paso 14
 Ahora también agregaremos un efecto de retracción. Es casi lo mismo que el efecto de explosión, solo que utilizará los valores almacenados en la matriz creada anteriormente.
  Paso 15: El botón
 Vamos a crear nuestro botón. Comience por dibujarlo (1.). Convirtiéndolo en un movieclip (como aprendió en el paso 2. Crear una nueva capa de acciones y teclear stop (); (2.). Esto evita que nuestro mc realice un bucle. Ahora insertaremos un fotograma clave para cuando se presiona el botón ( 3.). Esto cambiará el texto y mostrará que ahora, al hacer clic en él, se invertirá el proceso..
  Paso 16: Exportando nuestro botón para ActionScript
 Tendremos que hacer lo mismo que hicimos con nuestra imagen, dando al botón un nombre de instancia..
  Paso 17: Configuración del botón
 La propiedad buttonMode establece el cursor normal para cambiar en la acción uno. 
 La propiedad mouseChildren cuando se establece en falso prohíbe a los botones niños robar mouseEvents.
 El método addEventListener habilita el botón para iniciar la función clickHandler cuando se hace clic (MouseEvent.CLICK).
  function initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler);  initbutton ();
 Paso 18: El detonador
 Ahora configuraremos la función que configura la explosión. "animar" es el valor que indica si los píxeles deberían explotar o implosionar.
  función clickHandler (e: MouseEvent) if (animating == false) explode (); animando = verdadero; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1); 
 Paso 19: Personalización
 Agregar filtros, cambiar los valores de los filtros y modificar los tipos de aceleración de las transiciones son excelentes cosas para jugar. Para cambiar los tipos de suavizado necesita importar las clases de suavizado. Puedes previsualizar los tipos de interpolación aquí.
  importar gs.easing. *;
 Paso 20: Suavizar la transición
 Si ha estado probando la película a medida que avanzamos, es posible que haya notado que la transición entre los píxeles y la imagen real es bastante dura. Podemos agregar un parámetro onComplete en la interpolación implícita para llamar a una función que suaviza esa transición:
 onComplete: smoothit function smoothit () mcLogo.visible = true; TweenMax.to (pixelContainer, 1, alpha: 0, onComplete: function () pixelContainer.visible = false; mcLogo.visible = true; animating = false;
 Paso 21: Revisión
 Entonces, ¿qué hemos cubierto hoy?
  Importando nuestras clases principales..
 Alineando el escenario.
 Declarar las principales variables..
 Añadiendo un contenedor de píxeles en el escenario..
 Extraer los datos de mapa de bits de nuestra imagen..
 Creando una clase MyPixel y enviando el color de cada uno de los píxeles de la imagen a esos píxeles.
 Crear una función que selecciona todos los píxeles y luego los interpone en una posición aleatoria.
 Realización de una función que ajusta los píxeles de nuevo a la posición original.
 Haciendo un botón que llama a esas funciones..
 
 Código Final
  importar gs.TweenMax; importar gs.easing. *; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = new MovieClip (); var glow: GlowFilter = nuevo GlowFilter (0xFFFF00, 1, 10, 10,5,2); animando var: booleano = falso; var pixelBMP: BitmapData; var i: int = 0; var j: int = 0; var xArray: Array = new Array (); var yArray: Array = new Array (); addChild (pixelContainer) pixelContainer.x = mcLogo.x; pixelContainer.y = mcLogo.y; pixelBMP = new BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo) para (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (new BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), resplandor) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;  function initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = false; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler); función clickHandler (e: MouseEvent) if (animating == false) explode (); animando = verdadero; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1);  initbutton (); function explode () pixelContainer.alpha = 1; mcLogo.visible = falso; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; para (var i: int = 0; i Espero que disfrutes este tutorial. Gracias por leer!



		
			
	   
	




Código