Comunidad de diseño web y desarrollo en internet online

Preload que no funciona

Citar            
MensajeEscrito el 24 Jul 2014 06:36 am
Estoy intentando hacer un simple preload. He creado lo siguiente:

Código Flex :

package empardopo
{
   import flash.display.Stage;
   import flash.display.MovieClip;
   import flash.display.Shape;
   import flash.text.TextField;
   import flash.events.*
   
   public class MiPreload extends MovieClip
   {
      private var texto:TextField;
      private var marco:Shape;      
      private var barra:Shape;
      
      public function MiPreload()
      {         
         dibujaPreload();
         posicionaPreload();
         this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
         this.loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
      }
      
      public function dibujaPreload():void {
         texto = new TextField();
         marco = new Shape();
         barra = new Shape();
         marco.graphics.lineStyle(1, 0x000000);
         marco.graphics.drawRoundRect(0, 20, 70, 5, 0);
         barra.graphics.beginFill(0x000000);
         barra.graphics.drawRect(0, 20, 70, 5);
         barra.graphics.endFill();   
         addChild(texto);
         addChild(marco);         
         addChild(barra);
      }
      //----------------------------------------
      public function posicionaPreload():void {
         texto.x = marco.x = barra.x = stage.stageWidth /2 - marco.width /2
         texto.y = stage.stageHeight /2 - texto.height /2
         marco.y = barra.y = texto.y + 5
      }
      
      public function onLoadProgress (event:ProgressEvent):void
      {
         var cargado:int = event.bytesLoaded;
         var total:int = event.bytesTotal;
         var porcentaje:int = cargado/total*100;
         texto.text = "Cargado: "+String(porcentaje)+"%";
         barra.width = porcentaje*marco.width/100;
      }
      //----------------------------------------
      public function onLoadComplete (event:Event):void
      {
         removeChild(texto);
         removeChild(marco);
         removeChild(barra);
         nextFrame();
      }
      
   }
}


Luego en mi aplicación principal, añado preloader="empardopo.MiPreload".
Todo compila bien, no tengo errores pero sin embargo no veo nada en pantalla.
¿Se os ocurre que puedo estar haciendo mal?

Thanks

Por empardopo

71 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Jul 2014 12:23 pm
Es un preloader para Flex?

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 25 Jul 2014 05:41 am
En teoría sí. Ahora no encuentro el enlace pero era de este foro aunque algo antiguo.

¿Tenéis algún ejemplo de alguno? La verdad es que me necesito algo simple. Tan sólo querría mostrar en pantalla un label con un mensaje sin barra de descarga ni nada parecido.

Gracias

Por empardopo

71 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Jul 2014 01:02 pm

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 25 Jul 2014 01:57 pm
Gracias Jorge. Ese post lo había visto pero no hace lo que realmente quería que hiciera puesto que aquí carga un swf externo.

Lo he resuelto creándome este paquete.

Código Flex :

package empardopo
{
   // Copied from: http://www.pathf.com/blogs/2008/08/custom-flex-3-lightweight-preloader-with-source-code/
   
   //As seen at: https://defiantmouse.com/yetanotherforum.net/Default.aspx?g=posts&t=82
   //Code for this base provided by Andrew
   //base has been slightly modified to exculude _msecMinimumDuration
   import flash.display.DisplayObject;
   import flash.display.GradientType;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.events.ProgressEvent;
   import flash.events.TimerEvent;
   import flash.filters.DropShadowFilter;
   import flash.geom.Matrix;
   import flash.text.TextField;
   import flash.text.TextFormat;
   import flash.utils.Timer;
   
   import mx.events.FlexEvent;
   import mx.preloaders.IPreloaderDisplay;
   
   /**
    * This custom preloader was originally copied from the examples on this website:
    * http://www.pathf.com/blogs/2008/08/custom-flex-3-lightweight-preloader-with-source-code/
    * 
    * I merged the two classes (PathfinderCustomPreloader.as and PreloaderDisplayBase.as) into this one class
    * and added more constants for defining the sizes and colors of the preloader.
    * 
    * The preloader has a main box which is rendered in a blue gradient background, and it contains
    * a logo, a progress bar Sprite, a progress bar frame Sprite, and a TextField for showing the "Loading 0%" text.
    * 
    * @author Chris Callendar
    */
   public class CustomPreloader extends Sprite implements IPreloaderDisplay
   {
      
      [Embed("assets/miGrafico.jpg") ]
      [Bindable] 
      public var LogoClass:Class; 
      private var logo:DisplayObject;
      
      // Implementation variables, used to make everything work properly
      private var _IsInitComplete:Boolean = false;
      private var _timer:Timer;                 // we have a timer for animation
      private var _bytesLoaded:uint = 0;
      private var _bytesExpected:uint = 1;      // we start at 1 to avoid division by zero errors.
      private var _fractionLoaded:Number = 0;   // 0-1
      private var _preloader:Sprite;
      
      // drop shadow filters used on many sprites
      private var smallDropShadow:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000,0.5)
      private var largeDropShadow:DropShadowFilter = new DropShadowFilter(6, 45, 0x333333, 0.9)
      
      // this is the border mainBox
      private var mainBox:Sprite;
      // the progress sprite
      private var bar:Sprite = new Sprite();
      // draws the border around the progress bar
      private var barFrame:Sprite;
      // the textfield for rendering the "Loading 0%" string
      private var loadingTextField:TextField;
      
      // the background color(s) - specify 1 or 2 colors
      private var bgColors:Array = [ 0x0, 0x0 ];
      // the mainBox background gradient colors - specify 1 or 2 colors
      private var boxColors:Array = [ 0x4184d4, 0x14479a ];
      // the progress bar color - specify either 1, 2, or 4 colors
      private var barColors:Array = [ 0x95b7e7, 0x6e99d5, 0x1379fb, 0x2d9be8 ];  //0x0687d7;
      // the progress bar border color
      private var barBorderColor:uint = 0xdddddd;
      // the rounded corner radius for the progressbar
      private var barRadius:int = 0;
      // the width of the progressbar
      private var barWidth:int = 400;
      // the height of the progressbar
      private var barHeight:int = 30;
      // the loading text font
      private var textFont:String = "Tahoma"; // "Verdana";
      // the loading text color
      private var textColor:uint = 0xffffff;
      
      private var loading:String = "Loading ";
      
      public function CustomPreloader()
      {
         super();
      }
      
       public function initialize():void {
         _timer = new Timer(1);
         _timer.addEventListener(TimerEvent.TIMER, timerHandler);
         _timer.start();
         
         // clear here, rather than in draw(), to speed up the drawing
         clear();  
         
         //creates all visual elements
         createAssets();
      }
      
      private function clear():void {    
         // Draw background
         var bg:Sprite = new Sprite();
         if (bgColors.length == 2) {
            var matrix:Matrix =  new Matrix();
            matrix.createGradientBox(stageWidth, stageHeight, Math.PI/2);
            bg.graphics.beginGradientFill(GradientType.LINEAR, bgColors, [1, 1], [0, 255], matrix);
         } else {
            bg.graphics.beginFill(uint(bgColors[0]));
         }
         bg.graphics.drawRect(0, 0, stageWidth, stageHeight);
         bg.graphics.endFill(); 
         addChild(bg);
      }
      
      private function createAssets():void {
         // load the logo first so that we can get its dimensions
         logo = new LogoClass();
         var logoWidth:Number = logo.width;
         var logoHeight:Number = logo.height;
         
         // make the progress bar the same width as the logo if the logo is large
         barWidth = Math.max(barWidth, logoWidth);
         // calculate the box size & add some padding
         var boxWidth:Number = Math.max(logoWidth, barWidth) + 100;
         var boxHeight:Number = logoHeight + barHeight + 100;
         
         // create and position the main box (all other sprites are added to it)
         mainBox = new Sprite();
         mainBox.x = stageWidth/2 - boxWidth/2;
         mainBox.y = stageHeight/2 - boxHeight/2;
         mainBox.filters = [ largeDropShadow ];
         if (boxColors.length == 2) {
            var matrix:Matrix =  new Matrix();
            matrix.createGradientBox(boxWidth, boxHeight, Math.PI/2);
            mainBox.graphics.beginGradientFill(GradientType.LINEAR, boxColors, [1, 1], [0, 255], matrix);
         } else {
            mainBox.graphics.beginFill(uint(boxColors[0]));
         }
         mainBox.graphics.drawRoundRectComplex(0, 0, boxWidth, boxHeight, 12, 0, 0, 12);
         mainBox.graphics.endFill(); 
         addChild(mainBox);
         
         // position the logo
         logo.y = 40;
         logo.x = 50;
         mainBox.addChild(logo);
         //addChild(logo);
         
         //create progress bar
         bar = new Sprite();
         bar.graphics.drawRoundRect(0, 0, barWidth, barHeight, barRadius, barRadius);
         bar.x = 50;
         bar.y = logo.y + logoHeight + 20;
         mainBox.addChild(bar);
         
         //create progress bar frame
         barFrame = new Sprite();
         barFrame.graphics.lineStyle(1, barBorderColor, 1)
         barFrame.graphics.drawRoundRect(0, 0, barWidth, barHeight, barRadius, barRadius);
         barFrame.graphics.endFill();
         barFrame.x = bar.x;
         barFrame.y = bar.y;
         barFrame.filters = [ smallDropShadow ];
         mainBox.addChild(barFrame);
         
         //create text field to show percentage of loading, centered over the progress bar
         loadingTextField = new TextField()
         loadingTextField.width = barWidth;
         // setup the loading text font, color, and center alignment
         var tf:TextFormat = new TextFormat(textFont, null, textColor, true, null, null, null, null, "center");
         loadingTextField.defaultTextFormat = tf;
         // set the text AFTER the textformat has been set, otherwise the text sizes are wrong
         loadingTextField.text = loading + " 0%";
         // important - give the textfield a proper height
         loadingTextField.height = loadingTextField.textHeight + 8;
         loadingTextField.x = barFrame.x;
         // center the textfield vertically on the progress bar
         loadingTextField.y = barFrame.y + Math.round((barFrame.height - loadingTextField.height) / 2);
         mainBox.addChild(loadingTextField);
      }
      
      // This function is called whenever the state of the preloader changes.  
      // Use the _fractionLoaded variable to draw your progress bar.
       protected function draw():void {
         // update the % loaded string
         loadingTextField.text = loading + Math.round(_fractionLoaded * 100).toString() + "%";
         
         // draw a complex gradient progress bar
         var matrix:Matrix =  new Matrix();
         matrix.createGradientBox(bar.width, bar.height, Math.PI/2);
         if (barColors.length == 2) {
            bar.graphics.beginGradientFill(GradientType.LINEAR, barColors, [1, 1], [0, 255], matrix);
         } else if (barColors.length == 4) {
            bar.graphics.beginGradientFill(GradientType.LINEAR, barColors, [1, 1, 1, 1], [0, 127, 128, 255], matrix);
         } else {
            bar.graphics.beginFill(uint(barColors[0]), 1);
         }
         bar.graphics.drawRoundRect(0, 0, bar.width * _fractionLoaded, bar.height, barRadius, barRadius);
         bar.graphics.endFill();
      }
      
      /**
       * The Preloader class passes in a reference to itself to the display class
       * so that it can listen for events from the preloader.
       * This code comes from DownloadProgressBar.  I have modified it to remove some unused event handlers.
       */
       public function set preloader(value:Sprite):void {
         _preloader = value;
         
         value.addEventListener(ProgressEvent.PROGRESS, progressHandler);    
         value.addEventListener(Event.COMPLETE, completeHandler);
         value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
         value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
      }
      
       public function set backgroundAlpha(alpha:Number):void{}
       public function get backgroundAlpha():Number { return 1; }
      
      protected var _backgroundColor:uint = 0xffffffff;
       public function set backgroundColor(color:uint):void { _backgroundColor = color; }
       public function get backgroundColor():uint { return _backgroundColor; }
      
       public function set backgroundImage(image:Object):void {}
       public function get backgroundImage():Object { return null; }
      
       public function set backgroundSize(size:String):void {}
       public function get backgroundSize():String { return "auto"; }
      
      protected var _stageHeight:Number = 300;
       public function set stageHeight(height:Number):void { _stageHeight = height; }
       public function get stageHeight():Number { return _stageHeight; }
      
      protected var _stageWidth:Number = 400;
       public function set stageWidth(width:Number):void { _stageWidth = width; }
       public function get stageWidth():Number { return _stageWidth; }
      
      //--------------------------------------------------------------------------
      //  Event handlers
      //--------------------------------------------------------------------------
      
      // Called from time to time as the download progresses.
       protected function progressHandler(event:ProgressEvent):void {
         _bytesLoaded = event.bytesLoaded;
         _bytesExpected = event.bytesTotal;
         _fractionLoaded = Number(_bytesLoaded) / Number(_bytesExpected);
         
         draw();
      }
      
      // Called when the download is complete, but initialization might not be done yet.  (I *think*)
      // Note that there are two phases- download, and init
       protected function completeHandler(event:Event):void {
      }
      
      
      // Called from time to time as the initialization continues.        
       protected function initProgressHandler(event:Event):void {
         draw();
      }
      
      // Called when both download and initialization are complete    
       protected function initCompleteHandler(event:Event):void {
         _IsInitComplete = true;
      }
      
      // Called as often as possible
       protected function timerHandler(event:Event):void {
         if (_IsInitComplete) {    
            // We're done!
            _timer.stop();
            dispatchEvent(new Event(Event.COMPLETE));
         } else {
            draw();
         }
      }
      
   }
}


Este me ha funcionado sólo que quería mostrar un gráfico en pantalla y ahora sólo me tocaría quitar lo de la barrita de descarga.

Ahora tengo otro problema pero abriré otro post distinto.

Muchas gracias.

Por empardopo

71 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.