ActionScript » unijimpe

Precarga multiple en AS3

02/06/2008
11:49 pm
unijimpe

BulkLoader es una clase escrita en AS3 que te permitirá cargar y manejar múltiples archivos de manera sencilla. Esta clase te permitirá cargar múltiples archivos de diferente tipo en una interface unificada, accediendo a los eventos de carga en la misma instancia.

Utilizando BulkLoader
Lo primero es descargar la ultima versión de BulkLoader, extraen los archivos y en la carpeta src se encuentran las clases necesarias para el uso de esta librería.

Lo primero es importar las clases BulkLoader y BulkProgressEvent y posteriormente creamos una instancia de la clase BulkLoader, al cual le asignamos un nombre, en este caso mainLoader:

import br.com.stimuli.loading.BulkLoader;
import br.com.stimuli.loading.BulkProgressEvent;
var loader:BulkLoader = new BulkLoader("mainLoader");

A continuación agregamos los items o elementos que deseamos cargar, pueden ser archivos jpg, gif, png, xml, mp3, flv, etc. Para ello utilizamos el método add donde asignamos la ruta a cargar y un nombre de id para recuperar los datos cargados posteriormente.

loader.add("background.jpg", {id: "bg"});
loader.add("menu.xml", {id:"menu"});
loader.add("sound.mp3", {id: "sound"});

El siguiente paso es agregar los detectores de eventos o listeners (COMPLETE, PROGRESS, ERROR) con los cuales podemos detectar el progreso de la carga y el termino de la misma.

// para la carga de todos los archivos
loader.addEventListener(BulkLoader.COMPLETE, onLoaded);
loader.addEventListener(BulkLoader.PROGRESS, onProgress);
loader.addEventListener(BulkLoader.ERROR, onError);
// para la carga de uno de los elementos
loader.get("bg").addEventListener(Event.COMPLETE,onBgLoaded);
loader.get("bg").addEventListener(Event.PROGRESS,onBgProgress);
loader.get("bg").addEventListener(Event.ERROR,onBgError);

Luego iniciamos la carga utilizando el método start.

loader.start();

Finalmente implementamos las funciones asociadas a los detectores de eventos y obtenemos los archivos cargados, para ello podemos utilizar getBitmap, getSound, getXML, getText, getNetStream, getSound, getMovieClip de acuerdo al archivo que estemos cargando.

function onLoaded(evt:Event) {
// extraemos la imagen
var mcBg:Bitmap = loader.getBitmap("bg");
addChild(mcBg);
// extraemos el sonido
var sonido:Sound = loader.getSound("sound");
sonido.play();
// extraemos el XML
var xmlMenu:XML = loader.getXML("menu");
trace(xmlMenu);
}

Luego uniendo todos los elementos, obtenemos nuestro precargador de múltiples archivos.

import br.com.stimuli.loading.BulkLoader;
import br.com.stimuli.loading.BulkProgressEvent;
var loader:BulkLoader = new BulkLoader("mainLoader");
loader.add("background.jpg", {id: "bg"});
loader.add("menu.xml", {id:"menu"});
loader.add("sound.mp3", {id: "sound"});
loader.addEventListener(BulkLoader.COMPLETE, onLoaded);
loader.addEventListener(BulkLoader.PROGRESS, onProgress);
function onLoaded(evt:Event) {
// extraemos la imagen
var mcBg:Bitmap = loader.getBitmap("bg");
addChild(mcBg);
// extraemos el sonido
var sonido:Sound = loader.getSound("sound");
sonido.play();
// extraemos el XML
var xmlMenu:XML = loader.getXML("menu");
trace(xmlMenu);
}
public function onAllItemsProgress(evt:BulkProgressEvent) {
trace(evt.bytesLoaded + " - " + evt.bytesTotal);
}

Como pueden ver es muy sencillo el uso de esta clase y puede facilitar y ahorrar tiempo en la implementación de sitios con acceso a múltiples tipo de datos.

Posts Relacionados

Precargar archivos en AS3

27/05/2008
12:19 am
unijimpe

ActionScript 3 trae nuevos métodos, propiedades y eventos para implementar nuestras aplicaciones, en esta ocasión crearemos un precargador de archivos en AS3, para ello ahora estan disponibles nuevas clases: URLRequest y Loader.

Cargando Flash

La clase URLRequest nos permitirá asignar el archivo que deseamos cargar y la clase Loader nos permitirá hacer el seguimiento en el proceso de la carga.

var mcRequ:URLRequest = new URLRequest("image.jpg");
var mcLoad:Loader = new Loader();

Luego de ello iniciamos la carga del archivo utilizando el método load de la clase Loader.

mcLoad.load(mcRequ);

Luego el siguiente paso es agregar los detectores de eventos, en esta caso detectaremos el inicio de la carga, el progreso de la carga y el fin de la carga.

mcLoad.contentLoaderInfo.addEventListener(Event.OPEN, onOpen);
mcLoad.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
mcLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

Nótese que hemos agregado las funciones onOpen, onProgress y onComplete que se ejecutarán al inicio, progreso y fin de la carga. Entonces lo que hace falta es implementar estas funciones.

function onOpen(event:Event):void {
txtload.text = "CARGANDO 0%";
}
function onProgress(event:ProgressEvent):void {
var bLoad = event.bytesLoaded;
var bTot = event.bytesTotal;
txtload.text = "CARGANDO "+Math.round(100*bLoad/bTot)+"%";
}
function onComplete(event:Event):void {
txtload.text = "";
mcclip.addChild(mcLoad);
mcclip.width = 400;
mcclip.height = 134;
}

En este paso hay que notar como se obtienes los valores de los bytes cargados (bytesLoaded) y los bytes totales (bytesTotal) para hacer el calculo del porcentaje de carga. Además de ello txtload es un campo de texto y mcclip un MovieClip que están en el Stage en donde se cargará la imagen. Finalmente una vez cargado la imagen la agregamos al MovieClip mcclip y luego lo escalamos para que encaje en nuestra película.

Uniendo todos los elementos, tenemos nuestro precargador de archivos en ActionScript 3, el cual fácilmente se puede convertir en una clase para poder utilizarla para precargar cualquier archivo.

var mcRequ:URLRequest = new URLRequest("image.jpg");
var mcLoad:Loader = new Loader();
mcLoad.load(mcRequ);
mcLoad.contentLoaderInfo.addEventListener(Event.OPEN, onOpen);
mcLoad.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
mcLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onOpen(event:Event):void {
txtload.text = "CARGANDO 0%";
}
function onProgress(event:ProgressEvent):void {
var bLoad = event.bytesLoaded;
var bTot = event.bytesTotal;
txtload.text = "CARGANDO "+Math.round(100*bLoad/bTot)+"%";
}
function onComplete(event:Event):void {
txtload.text = "";
mcclip.addChild(mcLoad);
mcclip.width = 400;
mcclip.height = 134;
}

Como pueden ver, no es muy complicado solo hay que entender la logica de funcionamiento de AS3 y el correcto uso de los detectores de eventos. Para finalizar les dejo los archivos fuentes para que puedan descargar y hacer sus pruebas.

Posts Relacionados

Como utilizar Flashvars

27/04/2008
7:23 pm
unijimpe

Flashvars es un propiedad de Flash Player que ofrece un método eficaz para enviar variables desde HTML al archivos SWF, esta función fue implementada a partir de Flash Player 6, en esta ocasión veremos como utilizarla en AS2 o AS3.

Pasando variables FlashVars
Si estas usando el método tradicional de insertar SWFs, pueden asignarlos en un parámetro adicional al cual deben llamar flashvars y cuyo valor debe contener todas las variables a pasar codificadas en url.

<object width="200" height="100">
<param name="movie" value="movie.swf" />
<param name="FlashVars" value="var1=valor1&var2=valor2" />
<embed src="miSwf.swf" width="100" height="100
FlashVars="var1=valor1&var2=valor2"/>
</object>

Si estas utilizando SWFObject, puedes pasar las variables separadas utilizando el método addVariable, entonces el ejemplo anterior se vería de la siguiente forma:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "my", "200", "100", "8", "");
so.addVariable("var1", "valor1");
so.addVariable("var2", "valor2");
so.write("divmovie");
</script>

Accediendo a FlashVars desde AS2
Cuando uno utiliza Flashvars, estas pasan a ser variables del _root de nuestra película principal. Luego podemos acceder de manera sencilla a estas variables anteponiendo la palabra _root.

trace(_root.var1); // imprime "valor1"
trace(_root.var2); // imprime "valor2"

Accediendo a FlashVars desde AS3
En AS3 las variables externas están contenidas en la propiedad LoaderInfo, entonces lo primero es tomar esta propiedad de la cual extraemos las variables contenidas en el método parameters.