Actionscript 3.0: Ejemplo básico para cargar imágenes

Etiquetas: Loader URLRequest contentLoaderInfo addEventListener

Uno de los primeros post que escribí, fue "Carga de imágenes y SWF en AS3 con Loader" . Básicamente era una explicación de los diferentes eventos disponibles para trabajar con Loader, y de como añadirlos al objeto. Esta es una explicación más "sencilla" de como cargar una imagen, o un SWF en Actionscript.

Lo primero que tenemos que hacer es crear un objeto tipo Loader. Los Loader son los encargados de cargar imágenes (JPG, PNG o GIF) y SWFs en Flash. Esto lo hacemos así:

 
  var loader:Loader = new Loader();

Ahora que tenemos un "cargador", hay que pedirle que informe de los eventos de la carga. Hay muchos eventos, pero los principales son tres:

-Error al cargar la imagen (no se encuentra el archivo)

-Progreso de la imagen (nos informa del progreso de la carga)

-Imagen cargada (la imagen ya se ha cargado y podemos trabajar con ella).

Para que el Loader nos informe de estos eventos, tenemos que asociar cada uno a una función. Es decir, debemos decirle: "si la carga falla, ejecuta esta función, y si se carga, ejecuta esta". Esta charla, traducida a Actionscript 3.0 es:

 
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imagenCargada);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imagenError);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imagenProgreso);

Lo que hemos hecho es "añadir listener de los eventos". Como se puede ver, cada evento vá asociado a una función. El evento Event.COMPLETE, por ejemplo, está asociado a la función "imagenCargada". Estas funciones suelen tener esta apariencia:

 private function imagenCargada(e:Event):void {
  trace("Cargada: " + e);
  addChild(e.target.content);
  }
 
  private function imagenError(e:IOErrorEvent):void {
  trace("Error: " + e);
  }
 
  private function imagenProgreso(e:ProgressEvent):void {
  trace("Cargados=" + e.bytesLoaded + " Total=" + e.bytesTotal);
  }

Como se puede ver, cada función recibe un parámetro (al que hemos llamado "e", en este caso) que no servirá para obtener información del evento. Por ejemplo, cuando pongamos a cargar la foto, se comenzará a ejecutar periódicamente la función imagenProgreso hasta que termine la carga. Cada vez que Flash ejecute esa función, pasará como parámetro un "e distinto", que contendrá información sobre el progreso de carga en los atributos bytesLoaded y bytesTotal del evento.

Una vez que tenemos añadidos los eventos, tenemos que cargar la imagen mediante la función load:

 
  loader.load( new URLRequest(url));

Y listo. El loader que hemos creado se encargará de ejecutar las funciones asignadas a los eventos que le hemos asociado. El evento más importante es Event.COMPLETE, que ejecuta la función imagenCargada cuando el archivo termina de cargarse. Podemos acceder al archivo dentro del parámetro e.target.content den evento.

El código completo, sería el siguiente:

Dibujar en un cristal con vaho en Actionscript 3.0

Etiquetas: addEventListener MOUSE_MOVE drawCircle beginFill endFill

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera más sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programación. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

-Imagen de cristal sin vaho:

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir serían los siguientes:

-Importar las dos imágenes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posición (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aquí tenemos un pequeño "problema", y es que al estar vacio, no nos va a aplicar bien la máscara. Por ello, antes de ponerlo como máscara, nos metemos dentro de "Mascara_mc" y dibujamos un pequeño cuadrado.

La linea de tiempo nos quedaría asi:

-Por último, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El código en Actionscript 3.0, y el resultado, son los siguientes:

Programar un botón en Flash Actionscript 3.0 (AS3)

Etiquetas: MouseEvent addEventListener CLICK MOUSE_OVER MOUSE_OUT

En Actionscript 2.0 existía la opción de crear un botón, hacer click encima y escribir código encima del propio objeto. En AS3 no existe la posibilidad de escribir código sobre clips de película ni botones, todo el código debe estar situado en la linea de tiempo o en clases. Esto puede parecer un inconveniente, pero a la hora de hacer desarrollos medianos/complejos hace las cosas mucho más sencillas.

Además programar botones en AS3 no es más complicado que hacerlo en AS2, sólo tenemos que añadir el evento al objeto con addEventListener, indicar que evento añadimos ("Event.CLICK", "Event.MOUSE_DOWN, etc...) y crear la función que se vá a ejecutar cuando se reproduzca el event. Es decir, que traducido al castellano, lo que decimos es:

Utilizar clases con Actionscript 3.0: Parte II

Etiquetas: package import addEventListener

En este anterior post, mostraba como empezar a trabajar con clases en AS3. En este segundo tutorial, mostraré como podemos enlazar nuestros elementos de la biblioteca con sus clases correspondientes, y como insertar estos objetos en el escenario (haciendo algo "parecido" a lo que se hacía en AS2 con attachMovie.

Lo primero que voy a intentar explicar es como se "suelen" organizar las clases. Normalmente la clase principal (la que se asocia al documento, como vimos en el anterior tutorial) se deja en la misma carpeta que el .fla principal, y el resto de clases secundarias se ordenan en una serie de subcarpetas siguiendo esta estructura:

-Nombre del dominio invertido de la persona o empresa que crea el programa. Por ejemplo en mi caso tengo las clases en com/esedeerre/.. es decir, que siempre creo una carpeta com, que tiene dentro una carpeta esedeerre, que tiene dentro una serie de carpetas con los nombres de los paquetes (ahora veremos lo que es un paquete): "utilidades", "precargas", "sonido", etc...

Esta forma de nombrar las clases, garantiza que los nombres de paquete sean únicos. Por ejemplo si en una aplicación Flash usamos clases de Papervision, de Ape, propias y de Flash, y todas estuvieran nombradas de la misma manera, Flash tendría problemas para buscarlas. Utilizando esta estructura nos aseguramos que nuestras clases no se van "a pegar" con las de otros paquetes de clases.

Ahora que hemos visto como se suelen organizar las clases, vamos a ver como acceder a esas clases que están "escondidas" en carpetas. Si tenemos una clase en com/esedeerre/Bola.as, para acceder a ella tendremos que hacer:

 
import com.esedeerre.Bola

Dicho esto, creamos un documento nuevo de Flash(Actionscript 3.0) , y asociamos el escenario a la clase Main. Ahora vamos a crear un círculo, click encima, botón derecho, convertir en símbolo, y dejamos la pantalla como esta:

Flash: Exportar en primer fotograma

Lo que estamos haciendo es crear un clip de película con nombre de instancia Bola_mc. Lo asociamos a la clase com.esedeerre.Bola (que vamos a crear después), y le decimos a Flash que lo exporte en el primer fotograma y lo exporte para Actionscript.

Ahora que tenemos el clip de la clase "Bola", vamos a su archivo de clase. Creamos un nuevo Archivo de Actionscript y lo guardamos en una carpeta llamada esedeerre, que esté dentro de una carpera com, con el nombre de Bola.as.

En este archivo escribimos:

 
package com.esedeerre{
	import flash.display.MovieClip;
	public class Bola extends MovieClip {
		import flash.events.*;
		public function Bola():void {
			addEventListener(Event.ENTER_FRAME,mover);
		}
		private function mover(e:Event) {
			x+=5;
			if (x > 300) {
				x = 0;
			}
		}
	}
}

Lo que estamos haciendo es crear una clase Bola, que hereda de MovieClip. En la primera linea ponemos

package com.esedeerre{

porque hemos guardado el archivo Bola.as en com/esedeerre/. Si lo hubieramos guardado en la misma carpera que el fla, sólo tendríamos que poner package. Es decir. que le estamos indicando a Flash la ruta hasta el archivo Bola.as. El resto de lineas siguen la estructura que ya vimos en el primer tutorial. En este caso en la función constructora

 
public function Bola():void {

hemos añadido un evento enterframe para el objeto, asociado a la función mover. Esta función mueve 5 px hacia la derecha el objeto, y cuando llega a x=300 lo vuelve a colocar en 0.

Ahora que tenemos la clase Bola, vamos a crear la clase Main. Creamos un nuevo archivo de Actionscript, y escribimos:

 
package {
 
	import flash.display.MovieClip;
 
	public class Main extends MovieClip {
 
		import flash.text.TextField;
		import com.esedeerre.Bola;
 
		public function Main():void {
 
			var bola:Bola = new Bola();
			addChild(bola);
 
		}
	}
}

Como vemos, hemos tenido que importar la clase Bola para poder utilizarla. En la función constructora Main, creamos una nueva Bola y la añadimos al escenario:

 
var bola:Bola = new Bola();
addChild(bola);

Guardamos los dos archivos .as, publicamos el fla, y deberiamos nuestra bola moviéndose de izquierda a derecha.

Flash: Imágenes rotativas en AS3

Etiquetas: setTimeout removeChild addEventListener URLRequest Loader

Esta clase, explica paso a paso como hacer en AS3 una carga de imágenes que van rotando cada cierto tiempo. Para ello se almacenan las urls en una matriz y se van cargando los archivos cada cierto tiempo.

Actionscript 3.0: Simular el movimiento de una cuerda

Etiquetas: addEventListener graphics clear moveTo lineStyle curveTo Math.sin Math.sqrt

Cuando empecé a aprender Flash, lo que más me llamaba la atención eran los experimentos de páginas como uncontrol. Con el tiempo he ido viendo que algunos de esos experimentos no son tan complicados como me parecían, sino que son una mezcla de imaginación y matemáticas. Este es el código para simular el movimiento de una cuerda oscilando, utilizando la función curveTo y un poco de matemáticas.

Carga de imágenes y SWF en AS3 con Loader

Etiquetas: Loader URLRequest contentLoaderInfo addEventListener load

El código de este ejemplo sirve para cargar una imagen (jpg, gif o png) o swf controlando el proceso de carga. Para cargar otro tipo de archivos (por ejemplo XML o texto), hay que utilizar URLLoader.

Pasar parámetros en función asociada a un addEventListener

Etiquetas: addEventListener function

Esta es una forma de indicar que valores queremos que tengan los parámetros de una función asociada a un addEventListener dentro del mismo addEventListener.