Existen muchas maneras de representar gráficamente una precarga en flash, algunas muestran el porcentaje, otras solo una pequeña animación dando a entender que la aplicación está cargando antes de mostrarse, otras van mostrando textos con el nombre de los elementos que se llevan cargados, etc. Una de ellas es la gráfica de torta, un tipo de precaga que lo que hace es mostrar como un círculo se va completando gradualmente hasta quedar completamente pintado. Esto significa que la precaga se divide en 360º los cuales serían semejantes al 100% de la carga de una aplicación.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

En esta oportunidad, lo que vamos a describir es una clase, que hace la precarga por nosotros, para la cual, simplemente nos bastará con crear una instancia de esta clase por cada precarga que queramos. Esta nos permite precarga tres tipos diferentes de elementos; películas completas, clips de película y archivos XML. Sólo tendremos que pasar dentro de nuestros parámetros, cuál será el elemento a precargar.

Para aquellos que únicamente quieran implementarla, simplemente bastará con entender qué parámetros hay que pasarle a la instancia de clase y saber dónde copiar el archivo *.as para que el SWF en cuestión pueda compilarme dicha clase (esto lo pueden ver en los archivos fuente).

En cambio los que quieran aprender a programar una clase “precarga” tendrán que entender programación orientada a objetos; entender que es un objeto, que es una instancia y qué ventajas tiene programar de esta manera. Por lo tanto, y haciendo referencia a un léxico de programadores, podemos decir que habrán usuarios que les interese saber “¿Qué hace?” y otros a los que les interese saber “¿Cómo lo hace?“, haciendo referencia a la definición de abstracción (lo que no se ve).

/*
Parámetros

1 - Movie Clip dónde insertaremos la precarga
2 - Elemento a cargar (Movie Clip - clipname, película principal - this.stage.loaderInfo o XML - "items.xml")
3 - Elemento circular principal
4 - Elemento circular secundario
5 - Posición x dónde se inserta la precarga
6 - Posición y dónde se inserta la precarga
7 - Estado de rotación (true o flase)
*/
var general:PiePreloader = new PiePreloader(this,this.stage.loaderInfo,clipfront,clipback,stage.stageWidth/2 + 70,stage.stageHeight/2,true);

general.theend = function(){
	play();
}

Lo que acabamos de ver es la creación de una instancia de la clase para poder crear una precarga. Tenemos que crear una instancia por cada precarga que queramos crear. En este caso, “general” es el nombre de la instancia que acabo de crear para hacer una precarga general de toda la película. Arriba en los comentarios, puedo observar para que me sirve cada parámetro que paso en en la construcción del sub clase.

El primer parámetro es el clip de película en dónde voy a insertar el clip de la precarga, luego especifico el elemento a cargar “this.stage.loaderInfo”, en este caso, toda la película; posteriormente indico el círculo que estará enmascarado, luego el clip círculo de fondo que siempre aparecerá visible de fondo; después la posición X en dónde quiero ubicar la precarga, después la posición Y dónde ubicar la misma y por último el parámetro que especifica si quiero que los clip roten o no (esto es un plus extra).

package {
	import flash.display.*;
	import flash.events.*;
	import flash.utils.*;
	import flash.net.*;
	import flash.ui.*;
	import flash.text.*
	import flash.filters.BlurFilter;
	import flash.media.*;
	import flash.geom.Rectangle;

Ahora ya nos encontramos dentro de la clase “PiePreloader“, que es lo mismo que decir, dentro del archivo “PiePreloader.as“. La primer tarea que tenemos, es la de importar todas las clases nativas de flash que necesitaremos para trabajar en nuestro desarrollo, por lo tanto, luego de definir el package, importamos todos estos paquetes de clases.

	public class PiePreloader {
		private var container:MovieClip;
		private var type;
		private var root:MovieClip;
		private var clipfront:MovieClip;
		private var clipback:MovieClip;
		private var masc:MovieClip;
		private var angle:Number;
		private var centerx:Number;
		private var centery:Number;
		private var radio:Number;
		private var status:Boolean;
		private var cargados:Number;
		private var totales:Number;
		public var theend:Function;

Posteriormente creamos la clase, y definimos todas las propiedades que necesitaremos.

		public function PiePreloader(root:MovieClip,type,clipfront:MovieClip,clipback:MovieClip,centerx:Number,centery:Number,status:Boolean){
			this.root = root;
			this.angle = 0;
			this.status = status;
			this.container = new MovieClip();
			this.root.addChild(this.container);
			this.container.x = centerx;
			this.container.y = centery;
			this.clipback = clipback;
			this.container.addChild(this.clipback);
			this.clipback.x = 0;
			this.clipback.y = 0;
			this.clipfront = clipfront;
			this.container.addChild(this.clipfront);
			this.clipfront.x = 0;
			this.clipfront.y = 0;
			this.radio = this.clipfront.width/2 + 10;
			this.masc = new MovieClip();
			this.container.addChild(this.masc);
			this.masc.x = 0 - (this.clipfront.width/2);
			this.masc.y = 0 - (this.clipfront.height/2);
			this.centerx = this.clipfront.width/2;
			this.centery = this.clipfront.height/2;
			this.clipfront.mask = this.masc;
			this.type = type;

			if(typeof this.type == "string"){
				var loader:URLLoader = new URLLoader();
				var request:URLRequest = new URLRequest(this.type);
				loader.load(request);
				this.setPreloader(loader);
			}else if(typeof this.type == "object"){
				this.setPreloader(this.type);
			}
		}

Ahora creamos la función constructora, esa que se ejecutará cada vez que se cree una instancia de la clase.
Asignamos como valor a las propiedades los parámetros recibidos. “this.container” será el contenedor que albergará, el círculo superior, el círculo de fondo y la máscara. Por tanto, cada vez que quiera posicionar la precarga en el escenario, estaré ubicando al clip de película “container”.
“this.radio” es la propiedad que tiene el radio del círculo, esta la obtenemos de dividir la mitad del clip que pasamos como parámetro (radio del círculo).
La máscara será un clip vacío en el cual se dibujarán las formas que harán mostrar el clip principal en forma progresiva; para esto usaremos trigonometría y la API de dibujo de Flash (luego lo veremos).

Posteriormente definimos dos propiedades más para posicionar la precarga (this.centerx y this.centery); luego aplicamos la mascara (this.masc) al clip del primer círculo.

“this.type” guarda el tipo de elemento que quiero precargar (XML, película principal o clip de película).
Después tenemos un condicional que según el elemento que recibimos, nos permitirá definir qué variables tengo que crear para almacenar los bytes cargados y totales del elemento.

		private function setPreloader(element):void{
			this.type = element;
			this.container.addEventListener(Event.ENTER_FRAME,onLoadElement);
		}

Con esta función, defino el tipo de elemento que voy a precargar y creo la función ENTER_FRAME para empezar revisar la carga y mover los elementos.

		private function onLoadElement(e:Event):void{
			if(this.type == "[object MovieClip]"){
				this.cargados = this.type.framesLoaded;
				this.totales = this.type.totalFrames;
			}else{
				this.cargados = this.type.bytesLoaded;
				this.totales = this.type.bytesTotal;
			}

			if(this.cargados >= this.totales && this.angle >= 360){
				this.clipfront.scaleX = this.clipfront.scaleY-= 0.1;
				this.clipback.scaleX = this.clipback.scaleY-= 0.1;
				if(this.clipfront.scaleX < = 0.01){
					this.container.removeEventListener(Event.ENTER_FRAME,onLoadElement);
					this.root.removeChild(this.container);
					this.theend();
				}
			}

			this.calculateAngle();
		}

Lo primero que haré dentro de la función ENTER_FRAME será chequear que tipo de elemento es el que voy a precargar para así saber qué tipo de variables voy a definir. Si el elemento es un movie clip, defino las variables: this.cargados = this.type.framesLoaded y this.totales = this.type.totalFrames en cambio si es un XML: this.cargados = this.type.bytesLoaded y this.totales = this.type.bytesTotal.

Luego voy a chequear dos condiciones, la primera es si ya ha cargado el elemento, o sea, si los bytes cargados llegaron a alcanzar a al total y lo otro, es si el ángulo de la torta llego a los 360º; si esto ocurre, escalo la precarga hasta que desaparezca y posteriormente elimino la función ENTER_FRAME y su clip de película. Por otra parte, ejecuto la función pública theend(); la cuál está definida fuera de la clase y con la cuál puedo ejecutar las acciones que desee una vez cargado el elemento.

Fuera de la condición y por último, ejecuto constantemente la función que calcula el ángulo de la torta.

		
private function calculateAngle():void{
	var estado = (this.cargados / this.totales) * 360;
	if(estado > this.angle){
		this.angle+= 5;
	}
	if(this.status){
		this.clipfront.rotation+= 10;
		this.clipback.rotation+= 10;
	}
	var radianes1 = (Math.PI * (this.angle - 5)) / 180;
	var pos1x = Math.cos(radianes1) * this.radio;
	var pos1y = Math.sin(radianes1) * this.radio;
	var radianes2 = (Math.PI * this.angle) / 180;
	var pos2x = Math.cos(radianes2) * this.radio;
	var pos2y = Math.sin(radianes2) * this.radio;
	this.drawCircle(this.masc,pos1x,pos1y,pos2x,pos2y);
}

Con este método hago el cálculo trigonométrico del triángulo que quiero dibujar en la máscara según el ángulo. En conclusión, acá obtengo los valores para luego pasarlos como parámetro a la función drawCircle() que utiliza la API de dibujo de flash, de esta manera voy dibujando triángulos contiguos incrementando su rotación en 5º hasta completar el dibujo de la torta. Mis triángulos empezarán a dibujarse desde el centro del clip hasta una distancia igual al radio ubicada según el ángulo; para ello utilizo el seno y coseno del ángulo y determino la posición X e Y de este punto; posteriormente calculo lo mismo pero restándole 5º; esto significa que tendré un triángulo rectángulo con el ángulo opuesto de 5º. Al ir incrementando el ángulo (this.angle+= 5), si irán dibujando triángulos contiguos hasta completar la torta… ¡Acá está en jeito!.

		
private function drawCircle(clip,pos1x,pos1y,pos2x,pos2y):void{
		clip.graphics.beginFill(0xFF0000);
		clip.graphics.moveTo(this.centerx,this.centery);
		clip.graphics.lineTo(this.centerx + pos1x, this.centery + pos1y);
		clip.graphics.lineTo(this.centerx + pos2x, this.centery + pos2y);
		clip.graphics.lineTo(this.centerx,this.centery);
		clip.graphics.endFill();
	}
}
}

Por último, encontramos la función que se encarga de dibujar los triángulos; no hace más que recibir los parámetros de las posiciones y en base a estas, trazar el dibujo de un triángulo rectángulo con un ángulo opuesto de 5º.

Espero hayan podido entender como funciona o por lo menos puedan tener la posibilidad de implementarla.

Aquí pueden descargar los archivos

¡Hasta pronto!

Categoría: Multimedia, Tutoriales, Web

Publicado por: negro

Entradas más populares

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>