Comunidad de diseño web y desarrollo en internet

Precargas externas de archivos con Actionscript 3

Para este tutorial puedes usar la versión Alpha publica de Flash 9, aunque con un poco de lectura es posible usarlo con Flex 2.

Lo primero que haremos será crear una barra que crecerá dependiendo de porcentaje cargado. En este tutorial verás cómo crearla. Una vez creada necesitamos exportarla a una clase para tenerla a nuestra disposicion cuando queramos. Así que vamos a buscarla en la biblioteca y damos click derecho - > Linkage... y seleccionamos la casilla de Export for ActionScript, asigandole el nombre de "barra".

linkage

Una vez hecho esto crearemos un lugar donde mostrar nuestro archivo cargado. Ponemos este código en nuestro primer keyframe.

import flash.display.*;
var pantalla:Sprite = new Sprite();
pantalla.graphics.beginFill(0xcccccc);
pantalla.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
pantalla.graphics.endFill();
addChild(pantalla);

Si ejecutamos este script nos aparecerá un cuadro de color gris, del ancho y alto del Stage, algo parecido a esto:

Ahora solo nos falta crear la carga de nuestro archivos. Fijense en los comentarios del código para la explicación de su funcionamiento.

//agregámos las clases que ocupamos
import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.utils.getDefinitionByName;
import flash.text.TextField;

//declaramos las variables que ocuparemos durante la carga externa
//texto con el porcentaje cargado
var por_txt:TextField = new TextField();
//una barra que es el movieClip exportado y asignado a 'instancia'
var ClassReference:Class = getDefinitionByName("barra") as Class;
var instancia:Object = new ClassReference();
//variable del porcentaje
var por:uint = 0;

//pantalla será donde colocaremos nuestro archivo externo
var pantalla:Sprite = new Sprite();
pantalla.graphics.beginFill(0xcccccc);
pantalla.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
pantalla.graphics.endFill();

addChild(pantalla);
//si corren hasta aqui, deberá aparecer un cuadro gris del tamaño del stage

//declaramos una varieble de tipo Loader la cúal
//cargará nuestro archivo
var ldr:Loader = new Loader();
//esta función carga cualquier archivo swf, jpg, gif(si es con animación solo carga
//el primer frame
function cargar(url:String):void
{
    //esta función configurá todos los listeners que ocuparemos
    //la propiedad contentLoaderInfo proveé información acerca del archivo que se ésta cargando
    configurarListeners(ldr.contentLoaderInfo );
    //agregamos la mascara
    ldr.mask = pantalla;
    //cuando se le de un click, se descargará
    ldr.addEventListener(MouseEvent.CLICK, remover);
    //creamos un objeto de tipo URLRequest con nuestra URL
    var urlReq:URLRequest = new URLRequest(url);
    ldr.load(urlReq);
    addChild(ldr);
}

//esta función configura los diferentes eventos en los que se llevará la carga
//disparador es un objeto que nos dirá que está ocurriendo
function configurarListeners(disparador:IEventDispatcher):void
{
    disparador.addEventListener(Event.COMPLETE, completo);
    disparador.addEventListener(Event.OPEN, comienzo);
    disparador.addEventListener(ProgressEvent.PROGRESS, progreso);
    disparador.addEventListener(IOErrorEvent.IO_ERROR, error);
    disparador.addEventListener(Event.UNLOAD, descargado);
}
//éstas son las funciones que se llevarán a cabo dependiendo de lo que este
//ocurriendo
//cuando comienza la carga agregamos la barra al escenario y la caja de texto
function comienzo(e:Event):void
{
    trace("Comenzo la carga" + e);
    addChild(DisplayObject(instancia));
    DisplayObject(instancia).x=(pantalla.width/2-pantalla.width/8);
    DisplayObject(instancia).y=pantalla.height/2;
    //caja de texto
    por_txt.x=(pantalla.width/2-pantalla.width/8);
    por_txt.y=pantalla.height/2-50;
    addChild(por_txt);
    por_txt.text = "0%";

}
//este evento se dispara durante el progreso de la carga
//y cálcula el porcentaje cargado y tambien mueve la barra de acuerdo a lo cargado
function progreso(e:ProgressEvent):void
{
    trace("Cargados(bytes): " + e.bytesLoaded + " de Total(bytes) " + e.bytesTotal);
    por = Math.round((e.bytesLoaded*100)/e.bytesTotal);
    por_txt.text=String(por)+" %";
    DisplayObject(instancia).gotoAndStop(por);
}
//cuando se completa la carga, removemos la barra y la caja de texto
function completo(e:Event):void
{
    trace("Se completo la carga" + e);
    removeChild(DisplayObject(instancia));
    removeChild(por_txt);
}

//esta función se dispara si ocurrio un error ya sea que no se encuentra el archivo
//o por seguridad
function error(e:IOErrorEvent):void
{
    trace("Ocurrio un error: " + e);
}
//esta función ocurre cuando el archivo se descarga con el unload
function descargado(e:Event):void
{
    trace("Archivo descargado: " + e);
}
//esta funcion descarga el archivo
function remover(e:Event):void
{
    ldr.unload();
}
//aquí llamamos la funcion
cargar("chica.jpg")

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate