4 Replies Latest reply on Jan 5, 2011 9:08 AM by injpix

    Flex 3 : Showing a Progress Bar during Application loading time

    kiran7881 Level 1

      Hi ,

       

      I have Flex 3 Front End Application .

       

      Currently , at the start of the Application , its showing a blank white page .
      I want to have a Progress Bar for this purpose .

       

      I have seen this thing

       

      <mx:ProgressBar id="progressBar" minimum="100" maximum="100" mode="manual"
             label="5%" labelPlacement="bottom" x="207" y="299">
         </mx:ProgressBar>

       

      I have  seen an example for using ProgressBar with Image , by providing image's source to ProgressBar ??

       

      Could any body please let me know as how to provide my <mx:Application> as a source to this
      ProgresBar .

       

      please help .

       

      Thanks .

        • 1. Re: Flex 3 : Showing a Progress Bar during Application loading time
          Ijimero

          I'm not sure of what you really want, but if you want to change that preloader bar of your application, this video tutorial might help you...

           

          http://www.youtube.com/watch?v=Zaz7Vl3pYu4

           

          if that's not what you want, my apoligies.

          • 2. Re: Flex 3 : Showing a Progress Bar during Application loading time
            Gregory Lafrance Level 6

            Here's a branded preloader component I created that allows you to have text and an image in the proloader:

             

            ----------- com/stardustsystems/preloader/BrandedPreloader.as ------------

            package com.stardustsystems.preloader
            {
              import flash.display.DisplayObject;
              import flash.geom.Rectangle;
              import flash.text.TextField;  
              import mx.graphics.RoundedRectangle;
              import mx.preloaders.DownloadProgressBar;
              
              public class BrandedPreloader extends DownloadProgressBar{
                private var _title:String = "DEFAULT APPLICATION TITLE";
                private var _titleObj:TextField;
                private var _titleX:Number = 80;
                private var _titleY:Number = 15;
                private var _titleWidth:Number = 165;
                private var _titleHeight:Number = 32;
                private var _titleTextColor:Number = 0xFFFFFF;    
                private var _marquee:String = "DEFAULT MARQUEE";
                private var _marqueeObj:TextField;
                private var _marqueeX:Number = 80;
                private var _marqueeY:Number = 80;
                private var _marqueeWidth:Number = 165;
                private var _marqueeHeight:Number = 32;
                private var _marqueeTextColor:Number = 0xFFFFFF;
                private var _logoX:Number = 15;
                private var _logoY:Number = 15;
                private var _borderRectX:Number = 0;
                private var _borderRectY:Number = 0;
                private var _borderRectWidth:Number = 260;
                private var _borderRectHeight:Number = 120;
                private var _borderRectCornerRadius:Number = 4;
                private var _labelRectX:Number = 80;
                private var _labelRectY:Number = 55;
                private var _labelRectWidth:Number = 165;
                private var _labelRectHeight:Number = 16;
                private var _barRectX:Number = 80;
                private var _barRectY:Number = 72;
                private var _barRectWidth:Number = 165;
                private var _barRectHeight:Number = 6;
                private var _barRectCornerRadius:Number = 0;
                private var _barFrameRectX:Number = 80;
                private var _barFrameRectY:Number = 73;
                private var _barFrameRectWidth:Number = 165;
                private var _barFrameRectHeight:Number = 4;
                
                // The logo file should be in the same directory as this file.
                // Embed the logo file because using Loader is not efficient,
                //   because a Loader would load with the application, and we
                //   need it to load before the application, because it is
                //   displayed in the preloader.
                [Embed("SDSLogo1.png")]
                [Bindable] public var logoCls:Class; 
                private var logoDO:DisplayObject;
                // Config file allowing configuration of various areas of the preloader.
                [Embed("config.txt", mimeType="application/octet-stream")]
                [Bindable] public var configCls:Class; 
                private var configObj:Object;
                private var configProps:Object;
                
                public function BrandedPreloader(){
                  super();
                  // Load the config file. 
                  configObj = new configCls();
                  // Parse the config property key/value pairs.
                  configProps = getConfigProps(configObj.toString());     
                  // Apply the config properties.
                  applyConfiguration(); 
                }
                
                private function applyConfiguration():void{
                  if(configProps.title){
                    _title = configProps.title;        
                  }
                  if(configProps.marquee){
                    _marquee = configProps.marquee;        
                  }
                  if(configProps.titleX){
                    _titleX = configProps.titleX;        
                  }
                  if(configProps.titleY){
                    _titleY = configProps.titleY;        
                  }
                  if(configProps.titleWidth){
                    _titleWidth = configProps.titleWidth;        
                  }
                  if(configProps.titleHeight){
                    _titleHeight = configProps.titleHeight;        
                  }
                  if(configProps.titleTextColor){
                    _titleTextColor = configProps.titleTextColor;        
                  }
                  if(configProps.marqueeX){
                    _marqueeX = configProps.marqueeX;        
                  }
                  if(configProps.marqueeY){
                    _marqueeY = configProps.marqueeY;        
                  }
                  if(configProps.marqueeWidth){
                    _marqueeWidth = configProps.marqueeWidth;        
                  }
                  if(configProps.marqueeHeight){
                    _marqueeHeight = configProps.marqueeHeight;        
                  }
                  if(configProps.marqueeTextColor){
                    _marqueeTextColor = configProps.marqueeTextColor;        
                  }
                  if(configProps.logoX){
                    _logoX = configProps.logoX;        
                  }
                  if(configProps.logoY){
                    _logoY = configProps.logoY;        
                  }
                  if(configProps.borderRectX){
                    _borderRectX = configProps.borderRectX;        
                  }
                  if(configProps.borderRectY){
                    _borderRectY = configProps.borderRectY;        
                  }
                  if(configProps.borderRectWidth){
                    _borderRectWidth = configProps.borderRectWidth;        
                  }
                  if(configProps.borderRectHeight){
                    _borderRectHeight = configProps.borderRectHeight;        
                  }
                  if(configProps.borderRectCornerRadius){
                    _borderRectCornerRadius = configProps.borderRectCornerRadius;        
                  }
                  if(configProps.labelRectX){
                    _labelRectX = configProps.labelRectX;        
                  }
                  if(configProps.labelRectY){
                    _labelRectY = configProps.labelRectY;        
                  }
                  if(configProps.labelRectWidth){
                    _labelRectWidth = configProps.labelRectWidth;        
                  }
                  if(configProps.labelRectHeight){
                    _labelRectHeight = configProps.labelRectHeight;        
                  }
                  if(configProps.barRectX){
                    _barRectX = configProps.barRectX;        
                  }
                  if(configProps.barRectY){
                    _barRectY = configProps.barRectY;        
                  }
                  if(configProps.barRectWidth){
                    _barRectWidth = configProps.barRectWidth;        
                  }
                  if(configProps.barRectHeight){
                    _barRectHeight = configProps.barRectHeight;        
                  }
                  if(configProps.barRectCornerRadius){
                    _barRectCornerRadius = configProps.barRectCornerRadius;        
                  }
                  if(configProps.barFrameRectX){
                    _barFrameRectX = configProps.barFrameRectX;        
                  }
                  if(configProps.barFrameRectY){
                    _barFrameRectY = configProps.barFrameRectY;        
                  }
                  if(configProps.barFrameRectWidth){
                    _barFrameRectWidth = configProps.barFrameRectWidth;        
                  }
                  if(configProps.barFrameRectHeight){
                    _barFrameRectHeight = configProps.barFrameRectHeight;        
                  }
                }
                
                private function getConfigProps(configStr:String):Object{
                  var retVal:Object = new Object();      
                  var linesArray:Array = configStr.match(/".*"/g);
                  for each(var line:String in linesArray){
                    line = line.substring(1,line.length-1);
                    if(line != "0"){
                      var parts:Array = line.split("$$$");
                      if(parts.length==2){
                        retVal[parts[0]] = parts[1];
                      }
                    }
                  }  
                  // trace for debugging
                  for(var key:String in retVal){
                    //trace("key: " + key);
                    //trace("value: " + retVal[key]);
                  }
                  return retVal;
                }
                
                override protected function createChildren():void{
                  super.createChildren();
                  // Attach the logo image. 
                  logoDO = new logoCls();
                  logoDO.x = (stageWidth/2)-(borderRect.width/2)+_logoX;
                  logoDO.y = (stageHeight/2)-(borderRect.height/2)+_logoY;
                  addChild(logoDO);
                  
                // Attach the title TextField.
                _titleObj = new TextField();
                _titleObj.x = (stageWidth/2)-(borderRect.width/2)+_titleX;
                _titleObj.y = (stageHeight/2)-(borderRect.height/2)+_titleY;
                _titleObj.width = _titleWidth;
                _titleObj.height = _titleHeight;   
                _titleObj.selectable = false;
                _titleObj.defaultTextFormat = super.labelFormat;
                _titleObj.htmlText = _title;
                _titleObj.multiline = true;
                _titleObj.wordWrap = true;
                _titleObj.textColor = _titleTextColor;  
                this.addChild(_titleObj);
              // Attach the marquee TextField.
                _marqueeObj = new TextField();
                _marqueeObj.x = (stageWidth/2)-(borderRect.width/2)+_marqueeX;
                _marqueeObj.y = (stageHeight/2)-(borderRect.height/2)+_marqueeY;
                _marqueeObj.width = _marqueeWidth;
                _marqueeObj.height = _marqueeHeight;   
                _marqueeObj.selectable = false;
                _marqueeObj.defaultTextFormat = super.labelFormat;
                _marqueeObj.htmlText = _marquee;
                _marqueeObj.multiline = true;
                _marqueeObj.wordWrap = true;
                _marqueeObj.textColor = _marqueeTextColor;  
                this.addChild(_marqueeObj);
                }
                // Determines the dimensions of the large rectangle for the preloader.
                override protected function get borderRect():RoundedRectangle{
                  return new RoundedRectangle(_borderRectX, _borderRectY, _borderRectWidth, _borderRectHeight, _borderRectCornerRadius);
                }
                // Determines the dimensions of the rectangle for the "loading..." and "initializing..." string.
                override protected function get labelRect():Rectangle{
                  return new Rectangle(_labelRectX, _labelRectY, _labelRectWidth, _labelRectHeight);
                }
                // Determines the dimensions of the rectangle for the preloader bar.
                override protected function get barRect():RoundedRectangle{
                  return new RoundedRectangle(_barRectX, _barRectY, _barRectWidth, _barRectHeight, _barRectCornerRadius);
                }    
                // Determines the dimensions of the frame rectangle for the preloader bar.
                override protected function get barFrameRect():RoundedRectangle{
                  return new RoundedRectangle(_barFrameRectX, _barFrameRectY, _barFrameRectWidth, _barFrameRectHeight);
                }    
              }
            }
            
            


            -------------------- com/stardustsystems/preloader/config.txt -------------

            # Comments in this file should start with #
            # Entries in this file should be formatted as follows:
            #    - enclose entries in standard double-quotes (not locale specific double-quotes)
            #    - do not use double quotes within the entries (use single quotes)
            #    - entries are key/value pairs, with key and value separated by $$$
            #    - keys and values can only contain characters in ISO-8859-1 (English and latin characters)
            # The file should be saved in Windows ansi encoding. To support characters in other
            #   character sets, further enhancement is necessary.
            # config properties for the application title string
            "title$$$<font size='12'><b>Image Browser</b></font>"
            "titleX$$$80"
            "titleY$$$15"
            "titleWidth$$$165"
            "titleHeight$$$32"
            "titleTextColor$$$0xFFFFFF"
            # config properties for the application marquee string
            "marquee$$$<i>Stardust Systems Application</i>"
            "marqueeX$$$80"
            "marqueeY$$$80"
            "marqueeWidth$$$165"
            "marqueeHeight$$$32"
            "marqueeTextColor$$$0xFFFFFF"
            # config properties for the logo x and y
            "logoX$$$15"
            "logoY$$$15"
            # config properties for the border rectangle
            "borderRectX$$$0"
            "borderRectY$$$0"
            "borderRectWidth$$$260"
            "borderRectHeight$$$120"
            "borderRectCornerRadius$$$4"
            # config properties for the label rectangle
            "labelRectX$$$80"
            "labelRectY$$$55"
            "labelRectWidth$$$165"
            "labelRectHeight$$$16"
            # config properties for the preloader bar rectangle
            "barRectX$$$80"
            "barRectY$$$72"
            "barRectWidth$$$165"
            "barRectHeight$$$6"
            "barRectCornerRadius$$$0"
            # config properties for the preloader bar frame rectangle
            "barFrameRectX$$$80"
            "barFrameRectY$$$73"
            "barFrameRectWidth$$$165"
            "barFrameRectHeight$$$4"
            
            
            


            ------------ BrandedPreloader.mxml ------------

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              preloader="com.stardustsystems.preloader.BrandedPreloader"
              cachePolicy="off" viewSourceURL="srcview/index.html">
              <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:Application>
            
            


            ----------------- states.xml -----------------

            <?xml version="1.0" encoding="utf-8"?>
            <states>
                <state name="Alabama" statehood="1819" capital="Montgomery"/>
                <state name="Alaska" statehood="1959" capital="Juneau"/>
                <state name="Arizona" statehood="1912" capital="Phoenix"/>
                <state name="Arkansas" statehood="1836" capital="Little Rock"/>
                <state name="California" statehood="1850" capital="Sacramento"/>
                <state name="Colorado" statehood="1876" capital="Denver"/>
                <state name="Connecticut" statehood="1788" capital="Hartford"/>
                <state name="Delaware" statehood="1787" capital="Dover"/>
                <state name="Florida" statehood="1845" capital="Tallahassee"/>
                <state name="Georgia" statehood="1788" capital="Atlanta"/>
                <state name="Hawaii" statehood="1959" capital="Honolulu"/>
                <state name="Idaho" statehood="1890" capital="Boise"/>
                <state name="Illinois" statehood="1818" capital="Springfield"/>
                <state name="Indiana" statehood="1816" capital="Indianapolis"/>
                <state name="Iowa" statehood="1846" capital="Des Moines"/>
                <state name="Kansas" statehood="1861" capital="Topeka"/>
                <state name="Kentucky" statehood="1792" capital="Frankfort"/>
                <state name="Louisiana" statehood="1812" capital="Baton Rouge"/>
                <state name="Maine" statehood="1820" capital="Augusta"/>
                <state name="Maryland" statehood="1788" capital="Annapolis"/>
                <state name="Massachusetts" statehood="1788" capital="Boston"/>
                <state name="Michigan" statehood="1837" capital="Lansing"/>
                <state name="Minnesota" statehood="1858" capital="Saint Paul"/>
                <state name="Mississippi" statehood="1817" capital="Jackson"/>
                <state name="Missouri" statehood="1821" capital="Jefferson City"/>
                <state name="Montana" statehood="1889" capital="Helena"/>
                <state name="Nebraska" statehood="1867" capital="Lincoln"/>
                <state name="Nevada" statehood="1864" capital="Carson City"/>
                <state name="New Hampshire" statehood="1788" capital="Concord"/>
                <state name="New Jersey" statehood="1787" capital="Trenton"/>
                <state name="New Mexico" statehood="1912" capital="Santa Fe"/>
                <state name="New York" statehood="1788" capital="Albany"/>
                <state name="North Carolina" statehood="1789" capital="Raleigh"/>
                <state name="North Dakota" statehood="1889" capital="Bismarck"/>
                <state name="Ohio" statehood="1803" capital="Columbus"/>
                <state name="Oklahoma" statehood="1907" capital="Oklahoma City"/>
                <state name="Oregon" statehood="1859" capital="Salem"/>
                <state name="Pennsylvania" statehood="1787" capital="Harrisburg"/>
                <state name="Rhode Island" statehood="1790" capital="Providence"/>
                <state name="South Carolina" statehood="1788" capital="Columbia"/>
                <state name="South Dakota" statehood="1889" capital="Pierre"/>
                <state name="Tennessee" statehood="1796" capital="Nashville"/>
                <state name="Texas" statehood="1845" capital="Austin"/>
                <state name="Utah" statehood="1896" capital="Salt Lake City"/>
                <state name="Vermont" statehood="1791" capital="Montpelier"/>
                <state name="Virginia" statehood="1788" capital="Richmond"/>
                <state name="Washington" statehood="1889" capital="Olympia"/>
                <state name="West Virginia" statehood="1863" capital="Charleston"/>
                <state name="Wisconsin" statehood="1848" capital="Madison"/>
                <state name="Wyoming" statehood="1890" capital="Cheyenne"/>
            </states>   
            


            If this post answers your question or helps, please mark it as such. Thanks!

            http://www.stardustsystems.com
            Adobe Flex Development and Support Services

            • 3. Re: Flex 3 : Showing a Progress Bar during Application loading time
              injpix Level 3

              There is, at least, in Flex the following progress indicators:

               

              As you mentioned, the ProgressBar.  "The ProgressBar control provides a visual representation of the progress of a task over   time."

               

              The DownloadProgressBar.  "...provide[s] user feedback   while the application is downloading and loading."

               

              And there is also the Preloader class, which "instantiates a download progress bar[eg: DownloadProgressBar]"

               

              I believe you are asking about the DownloadProgressBar.  This is on the first frame of a Flex application.

              • 4. Re: Flex 3 : Showing a Progress Bar during Application loading time
                injpix Level 3

                And if you want to roll your own DownloadProgressBar as Gregory has posted, you would assign the fully qualified class name in the Application's MXML preloader property.  This custom progressbar would need to implement IPreloaderDisplay.

                1 person found this helpful