Precargas en Flex
Este post es una adaptación traducida al castellano, a petición del público, del método que nos muestran en este post de bit-101.
Hasta ahora para hacer una precarga bastaba con añadir un par de fotogramas en los que situarla al principio de nuestra película. Acostumbrados a tener nuestra línea de tiempo, cuando desarrollamos un site en flex nos encontramos que al no tener línea de tiempo la tarea de elaborar la precarga más simple se convierte en un obstáculo.
Afortunadamente flex tiene unas tags propias (sí, sí, esas que van entre corchetes []), que se ejecutan en el momento de compilar y al igual que nos permiten establecer la velocidad de la película, el color de fondo, etc. también nos permite insertar fotogramas, de forma que podemos añadir esos añorados fotogramas donde situar nuestra precarga :)
Básicamente necesitaremos solo un par de cosas: una clase que maneje nuestra precarga y una de las mencionadas tags en la clase principal que añade un frame previo a la película en el cual se sitúa la clase de precarga.
La línea que debemos añadir en nuestra clase principal, justo depués de los imports, sería algo así:
[Frame(factoryClass="com.uveproducers.utils.Preload")]
La clase de precarga ya la elaboramos a nuestra medida, con la única objeción de que una vez realizada la carga llamemos a un método que coloque la clase principal de nuevo en su sitio:
private function init():void { var mainClass:Class = Class(getDefinitionByName("Main")); if(mainClass) { var app:Object = new mainClass(); addChild(app as DisplayObject); } }
en mi caso, la forma en que lo apliqué en el site de coolShot, fue esta:
package com.uveproducers.utils { import flash.display.DisplayObject; import flash.display.MovieClip; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.utils.getDefinitionByName; [SWF(backgroundColor="#262116",framerate="31")] public class Preload extends MovieClip { private var preloadHolder:Sprite; private var holderGraphicBar1:Sprite; private var holderGraphicBar2:Sprite; public function Preload() { stop(); stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; stage.stageFocusRect=false; addEventListener(Event.ENTER_FRAME, onEnterFrame); preloadHolder=new Sprite(); stage.addChild(preloadHolder); holderGraphicBar1=new Sprite(); preloadHolder.addChild(holderGraphicBar1); holderGraphicBar2=new Sprite(); preloadHolder.addChild(holderGraphicBar2); holderGraphicBar1.graphics.beginFill(0xE4DFD5,.3); holderGraphicBar1.graphics.drawRect(54, 68, 800, 2); holderGraphicBar1.graphics.endFill(); } private function onEnterFrame(event:Event):void { holderGraphicBar2.graphics.clear(); if(framesLoaded == totalFrames) { removeEventListener(Event.ENTER_FRAME, onEnterFrame); nextFrame(); init(); } else { var percent:Number = root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal; holderGraphicBar2.graphics.beginFill(0xE4DFD5); holderGraphicBar2.graphics.drawRect(54, 68, 800 * percent, 2); holderGraphicBar2.graphics.endFill(); } } private function init():void { var mainClass:Class = Class(getDefinitionByName("Main")); if(mainClass) { var app:Object = new mainClass(); addChild(app as DisplayObject); } } } }
Nota: puede ser necesario que la clase principal compruebe que ha sido instanciada en el escenario antes de inicializarse, para lo cual podemos usar el evento ADDED_TO_STAGE
RSS Articles