5 Replies Latest reply on Jan 18, 2010 11:10 AM by Gregory Lafrance

    Add a logo image to a preloader.

    Gregory Lafrance Level 6

      I'm trying to add a 60x60 logo image to a preloader extending DownloadProgressBar like this but its not working.

       

      It's not working, and I have a feeling I'm using the wrong approach anyway.

       

      I believe I should not use <mx:Image> as its too heavy for a preloader.

       

      Can anyone please help? Thanks!

       

      _logoObj = new TextField();
      _logoObj.x = (stageWidth/2)-(borderRect.width/2)+labelRect.x;
      _logoObj.y = (stageHeight/2)+(borderRect.height/2)-35;
      _logoObj.width = 60;
      _logoObj.height = 60;   
      _logoObj.selectable = false;
      _logoObj.defaultTextFormat = super.labelFormat;
      _logoObj.htmlText = "<img src='Logo1.png' width='60' height='60' />";
      super.addChild(_logoObj);
      
        • 2. Re: Add a logo image to a preloader.
          Theodore Denovan

          You're correct about image being too heavy for a preloader. This post provides pretty good guidance: http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

          1 person found this helpful
          • 3. Re: Add a logo image to a preloader.
            Gregory Lafrance Level 6

            That was helpful, but the image does not show up until after the text and progress bar have displayed for a while. Please forgive the long code posting, but it should compile and run fine so you can see the problem.

             

            Does anyone have ideas as to what I could do differently so the entire preloader shows up at the same time, after the image has loaded?

             

            ----------- com/stardustsystems/preloader/BrandedPreloaderTest.as ------------
            package com.stardustsystems.preloader
            {
              import flash.display.Loader;
              import flash.events.*;
              import flash.geom.Rectangle;
              import flash.net.URLRequest;
              import flash.text.TextField;
              import flash.utils.Timer;
              
              import mx.graphics.RoundedRectangle;
              import mx.preloaders.DownloadProgressBar;
              
              public class BrandedPreloaderTest extends DownloadProgressBar{
                private var _title:String = "<font size='12'><b>Customized Image Flex Preloader</b></font>";
                private var _titleObj:TextField;
                private var _titleRect:Rectangle = new Rectangle(80, 62, 165, 16);
                private var _marquee:String = "<i>The Power of Flex 3 Apps</i>";
                private var _marqueeObj:TextField;
                private var _marqueeRect:Rectangle = new Rectangle(80, 62, 165, 16);
                private var _logoObj:TextField;
                private const LOGO_IMAGE:String = "Logo1.png";
                
                public function BrandedPreloaderTest(){
                  super();
                }
                
                override protected function createChildren():void{
                  super.createChildren();
                  // Attach the logo image. 
                  var loader:Loader = new Loader();
                  var request:URLRequest = new URLRequest(LOGO_IMAGE);
                  loader.load(request);
                  loader.x = (stageWidth/2)-(borderRect.width/2) + 15;
                  loader.y = (stageHeight/2)+(borderRect.height/2) - 105;
                  addChild(loader);
                  
                // Attach the title TextField.
                _titleObj = new TextField();
                _titleObj.x = (stageWidth/2)-(borderRect.width/2)+labelRect.x;
                _titleObj.y = (stageHeight/2)-(borderRect.height/2)+15;
                _titleObj.width = 165;
                _titleObj.height = 32;   
                _titleObj.selectable = false;
                _titleObj.defaultTextFormat = super.labelFormat;
                _titleObj.htmlText = _title;
                _titleObj.multiline = true;
                _titleObj.wordWrap = true;
                _titleObj.textColor = 0xFFFFFF;  
                this.addChild(_titleObj);
              // Attach the marquee TextField.
                _marqueeObj = new TextField();
                _marqueeObj.x = (stageWidth/2)-(borderRect.width/2)+labelRect.x;
                _marqueeObj.y = (stageHeight/2)+(borderRect.height/2)-35;
                _marqueeObj.width = 165;
                _marqueeObj.height = 32;   
                _marqueeObj.selectable = false;
                _marqueeObj.defaultTextFormat = super.labelFormat;
                _marqueeObj.htmlText = _marquee;
                _marqueeObj.multiline = true;
                _marqueeObj.wordWrap = true;
                _marqueeObj.textColor = 0xFFFFFF;  
                this.addChild(_marqueeObj);
                }
                override protected function get borderRect():RoundedRectangle{
                  return new RoundedRectangle(0, 0, 260, 120, 4);
                }
                override protected function get labelRect():Rectangle{
                  return new Rectangle(80, 55, 165, 16);
                }
                override protected function get barRect():RoundedRectangle{
                  return new RoundedRectangle(80, 72, 165, 6, 0);
                }    
                override protected function get barFrameRect():RoundedRectangle{
                  return new RoundedRectangle(80, 73, 165, 4);
                }    
              }
            }
            ----------- MainApp.mxml ------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              preloader="com.stardustsystems.preloader.BrandedPreloaderTest"
              cachePolicy="off">
              <mx:XML id="xml" source="states.xml"/>  
              <mx:XMLListCollection id="xlc" source="{xml..state}"/>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
              <mx:DataGrid dataProvider="{xlc}">
                <mx:columns>
                  <mx:DataGridColumn dataField="@name" width="100"/>
                  <mx:DataGridColumn dataField="@statehood" width="100"/>
                  <mx:DataGridColumn dataField="@capital" width="100"/>
                </mx:columns>
              </mx:DataGrid>
            </mx:Application>
            
            
            • 4. Re: Add a logo image to a preloader.
              Flex harUI Adobe Employee

              At preloader time, you are currently asking the player to download the logo

              image while the rest of the SWF is downloading.  Also anything loaded takes

              an extra frame to appear.

               

              You can make the entire DLPB invisible until the logo finishes downloading,

              but on a slow network that could still take a while since the network is

              downloading the app SWF as well as the logo, even though the logo is 60x60.

               

              I haven't tried it, but what I would do is embed the logo as a Sprite.  I

              don't think you can use a standard embed because we'll generate a

              SpriteAsset which may drag in more classes than you want.

               

              The way to do that is do a standard embed and grab the generated class then

              replace SpriteAsset with Sprite.

               

              Then instantiate that class and addChild it instead of using Loader.

              1 person found this helpful
              • 5. Re: Add a logo image to a preloader.
                Gregory Lafrance Level 6

                Thanks again for the reply Alex. I'll give that a try.