Encontronazos con ActionScript 3: Cargando gráficos y sonidos externos en tu aplicación

Este artículo es la parte 5 de 6 de la serie Encontronazos con ActionScript 3

drawing

En artículos anteriores estuvimos haciendo gráficos utilizando las primitivas de la clase Graphics que nos permite dibujar líneas, círculos, curvas, gradientes y otras figuras. Por supuesto que para tener gráficos de calidad en tu juego, vas a necesitar ilustraciones más complejas que lo que puedes hacer con ello. En este artículo aprenderás a cargar gráficos y sonidos que estén en Internet.

Debo aclarar que existe una diferencia entre cargar imágenes y sonidos e incluirlos dentro del SWF. El objetivo de este artículo es hacer un SWF que cargará imágenes y sonidos desde Internet. La alternativa es incluir estas imágenes y sonidos dentro del SWF, un proceso conocido como embed o embeber recursos. En este caso el acceso a los recursos es inmediato, aunque el tamaño del SWF va a aumentar considerablemente por contener estos archivos. (Foto por rick)

¿Qué vamos a usar?

ActionScript 3 utiliza la clase Loader para mostrar y guardar la información de un recurso gráfico (vector o imagen). En particular, Loader es un DisplayObject, como cualquier otro MovieClip, por lo que es posible cargar el recurso y agregar el objeto al Stage, con el resultado de que una vez cargada la imagen se actualizaráuna vez terminada su carga. Además, en AS3 se utiliza la clase Sound para cargar los sonidos.

En ambos casos se requiere informar a la clase del origen de estos archivos. La clase URLRequest sirve para indcar este origen, y tanto Loader como Sound aceptan este objeto para comenzar a cargar el archivo.

A continuación daremos unos ejemplos de cómo utilizar estas clases. En este artículo proveeremos una imagen (origen), un vector y un sonido (origen) de ejemplos para no perder tiempo buscandolos.

¿Cómo nos organizamos?

Los archivos que vamos a cargar deben estar en lugar accesible desde el SWF compilado. En FlashDevelop crearemos un proyecto de ActionScript 3 nuevo, en las propiedades determinaremos el tamaño de 300×300 pixeles. En el directorio bin, donde se coloca el compilado, colocaremos kitten.jpg, computer.swf y thunder.mp3.

Cargando una imagen vectorial o bitmap

Utilizar un Loader es muy sencillo. Veremos a continuación el código para cargar un vector:

package
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	public class Main extends Sprite
	{
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			var l : Loader = new Loader();
			l.load(new URLRequest("computer.swf"));
			this.addChild(l);
		}
	}
}

Si compilamos y ejecutamos la película obtendremos este resultado:

computer-swf

El código para cargar una imagen es exactamente igual, cambiando la dirección del URLRequest:

[...]
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			var l : Loader = new Loader();
			l.load(new URLRequest("kitten.jpg"));
			this.addChild(l);
		}
[...]

Loader puede cargar JPG, PNG y GIF. En el caso de que se cargue un GIF animado, sólo mostrará el primer fotografa del GIF. Si queremos mostrar un GIF animado, tendremos que usar una librería externa: AS3 GIF Player. Es muy sencillo utilizarlo, pero si ustedes lo piden, podemos repasarlo en un próximo artículo. La película resultante se verá como en la imagen a continuación.

kitten-jpg

En ambos casos, el Loader carga la película o la imagen  y considera el punto (0, 0) como la esquina superior izquierda. Esto es importante saberlo ya que es el punto de origen lo que se toma en cuenta para hacer las transformaciones (translación, escalamiento y rotación).

Cargando un sonido

Ahora cargaremos un sonido. Utilizaremos el siguiente código:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.media.Sound;
	import flash.net.URLRequest;
	public class Main extends Sprite
	{
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			var s : Sound = new Sound(new URLRequest("thunder.mp3"));
			s.play();
		}
	}
}

Al compilar y ejecutar, la película estará en blanco pero escucharemos el sonido de un trueno.

Y ahora…

Dejamos por acá el archivo comprimido con todo el proyecto (ZIP, 256Kb) para referencia. Ya sabemos cargar estos recursos desde Internet. Quedaría cargar un tipo de archivo de tipo texto para datos de juegos, pero me gustaría dar un ejemplo concreto y hacer un paseo por los distintos tipos de organización de los datos.

Si hacemos un juego que requiere cargar un montón de recursos, es muy probable que muchos de esos dibujos e imágenes no se vean sino hasta que terminen de cargarse. Una solución sería cargar todos los archivos antes de seguir adelante con el juego. Prequel es una librería que permite hacer esto con mucha facilidad. Otra solución sería incluir los recursos dentro de la película. Este será el tema del próximo artículo. Hasta entonces.

Navegar la seriePost anterior en la seriePróximo post en la serie

6 comentarios en “Encontronazos con ActionScript 3: Cargando gráficos y sonidos externos en tu aplicación”

  1. hola, estoy intentndo hacer una galeria en flash que cargue las imagenes mediante un while que recorre un vector en el que estan las rutas de las imagenes, me las carga bien…pero quiero que se posiciones unas debajo de otras, haciendo una columna, y no consigo de ninguna manera acceder a las propiedades X e Y del loader, si alguien me puede exar una mano…Gracias!!

    1. Hola Alberto, tengo entendido que un Loader carga una sola imagen, así que deberías crear tantos Loaders como imagenes necesites cargar. El Loader como tal es un Display Object, al que puedes modificar sus propiedades x, y como cualquier otro gráfico.

      Ahora, si necesitas acceder a las propiedades del objeto que has cargado, eso lo vas a conseguir en (objetoLoader.content).

  2. Hola, tengo una duda acerca del url, que pasa si quiero cargar un archivos desde una direccion externa a la del documento.fla como debo poner la direccion¿?. bueno gracias, bye.

    1. Hola Dante, la dirección debe ser en formato URL, puede ser relativa, ej. "./archivo.txt" asume que el archivo está en el mismo directorio que el compilado, o absoluta, ej. http://www.elchiguire.com/files/archivo.txt.

      Ten en cuenta que si vas a cargar archivos de un dominio que no es el mismo que el del swf (ej. http://www.elchiguire.com/pelicula.swf quiere acceder a http://www.nytimes.com/imagen.jpg), el dominio de destino debe darle permiso al dominio del swf. Eso se hace a través de un archivo llamado cross-domain.xml que debe estar en la raíz del dominio.

      Esto es por consideraciones de seguridad y también tiene sus sutilezas, yo te lo estoy describiendo muy grosso modo. Consulta la documentación de Adobe para mayor información. Es excelente y te dice casi todo lo que tienes que saber.

    2. Hola Dante, la dirección debe ser en formato URL, puede ser relativa, ej. "./archivo.txt" asume que el archivo está en el mismo directorio que el compilado, o absoluta, ej. http://www.elchiguire.com/files/archivo.txt.

      Ten en cuenta que si vas a cargar archivos de un dominio que no es el mismo que el del swf (ej. http://www.elchiguire.com/pelicula.swf quiere acceder a http://www.nytimes.com/imagen.jpg), el dominio de destino debe darle permiso al dominio del swf. Eso se hace a través de un archivo llamado cross-domain.xml que debe estar en la raíz del dominio.

      Esto es por consideraciones de seguridad y también tiene sus sutilezas, yo te lo estoy describiendo muy grosso modo. Consulta la documentación de Adobe para mayor información. Es excelente y te dice casi todo lo que tienes que saber.

Deja un comentario