13 Replies Latest reply on May 24, 2011 9:59 AM by kglad

    Adding a progress loader to a dynamic text field / scrollPane

    snowgage

      I have a dynamic text field which is loading images from an external html.  This text is named scrollPaneImage and is a child of a movieClip called scrollPaneContent.  I then load scrollPaneContent into a scroll pane named scrollPane

       

      When the user interacts with my swf different images are loaded into scrollPaneImage.  Since some of the images take a few seconds to load, I'd like there to be a progress loader displayed in the scrollpane.

       

      I have tried adding the progress event listner to the dynamic text, the movie clip and the scrollpane and cannot get it to respond or track the loading.

       

      scrollPaneContent.addEventListener(ProgressEvent.PROGRESS,reportProgress);
      
      function reportProgress(e:ProgressEvent):void {
          trace(e.bytesLoaded + " loaded out of " + e.bytesTotal);
           trace("LOADED");
      }
      

       

      Can anyone suggest what I might be doing wrong or of another approach?

       

      thanks in advance,

       

      Josh

        • 1. Re: Adding a progress loader to a dynamic text field / scrollPane
          snowgage Level 1

          Just giving this a bump and seeing if anyone knew whether or not this is possible.  Thanks..

           

          -josh

          • 2. Re: Adding a progress loader to a dynamic text field / scrollPane
            relaxatraja Level 5

            I think the listener should be for scrollPane

            • 3. Re: Adding a progress loader to a dynamic text field / scrollPane
              snowgage Level 1

              Interesting..  No trace shows up when I add the listener to the scrollpane.  Anyone have any other ideas?

               

              scrollPane.addEventListener(ProgressEvent.PROGRESS,reportProgress);

               

              function reportProgress(e:ProgressEvent):void {
                   trace(e.bytesLoaded + " loaded out of " + e.bytesTotal);
                    trace("LOADED");
              }

              • 4. Re: Adding a progress loader to a dynamic text field / scrollPane
                kglad Adobe Community Professional & MVP

                is your scrollPane.source assigned after the listeners?

                • 5. Re: Adding a progress loader to a dynamic text field / scrollPane
                  snowgage Level 1

                  Yes. The scrollPane.source is assigned after the listeners.

                   

                  I think the difficulty is that the contnent I am loading into my MC comes from a dynamic text field populated with images via htmlText ('img src').

                  • 6. Re: Adding a progress loader to a dynamic text field / scrollPane
                    kglad Adobe Community Professional & MVP

                    that wouldn't make any difference (if you're code is correct).

                     

                    show your scrollpane related code.

                    • 7. Re: Adding a progress loader to a dynamic text field / scrollPane
                      eckba1

                      I might be completely off here but I cannot see all the code:

                       

                      Shouldn't the event listener be attached to the loader variable that is bringing in the content (regardless of where you display the progress info)?

                      • 8. Re: Adding a progress loader to a dynamic text field / scrollPane
                        snowgage Level 1

                        Here goes...

                         

                        The scrollPane is populated with a movieclip called scrollPaneContent.  This MC has two dynamic text field within called scrollPaneImage and scrollPaneText.  You can see the functioning map and scrollpanes at the link below.  I'd like the loader to be specific to the image that is loading

                         

                        http://joshgage.partnerscreative.com/index_northwest.html

                         

                        //Create the markers and add them to the map
                        function createmarkers(event:Event):void
                        {
                             for (var i:Number = 0; i < pntxml.row.length(); i++) {
                             var markerOptions:MarkerOptions = new MarkerOptions();      
                             markerOptions.icon = new photoIcon();
                             markerOptions.hasShadow=false;      
                             pointsArray[i] = new Marker(new LatLng(pntxml.row[i].LAT,pntxml.row[i].LONG),markerOptions);
                             markerA.push(pointsArray[i]);
                             map.addOverlay(pointsArray[i]);
                             pointsArray[i].addEventListener(MapMouseEvent.CLICK,indexCalledMarkerRecord);
                             pointsArray[i].addEventListener(MapMouseEvent.CLICK,scrollPanePopulate);
                        }
                        
                        //This function creates a temp index based on which marker the user clicks on the map
                        function indexCalledMarkerRecord(e:MapMouseEvent):void{
                             pointindex=genIndexPos(markerA,Marker(e.currentTarget));
                             }
                        
                        
                        //Define Source for scrollPane
                        scrollPane.source = scrollPaneContent;
                        
                        //Function to populate scrollpane
                        function scrollPanePopulate(event:Event){
                        
                                //These variables are temporary and come from an array of all image widths/heights
                                var imgWidth=JPGIndexArray[pointindex].width;
                                var imgHeight=JPGIndexArray[pointindex].height;
                        
                                //if image is wide or tall, scale accordingly and create a string that will be used
                             if(imgWidth>=imgHeight){          
                                  var imgSource:String = "<img src="+"'"+calledMarkerContent+"'"+"width='"+250+"'"+"height='"+150+"'"+"/>";          
                                  var calledImgHgh=160;          
                             }
                             else 
                             {          
                                  var imgSource:String = "<img src="+"'"+calledMarkerContent+"'"+"width='"+110+"'"+"height='"+167+"'"+"/>";                    
                                  var calledImgHgh=177;          
                             } 
                        
                                //populate dynamic text field which will hold the image
                             scrollPaneContent.scrollPaneImage.htmlText=imgSource;
                        
                                //Temp variable for text
                                var calledMarkerDescription=pntxml.row[pointindex].DESC;
                        
                                //Populate Text Field
                                scrollPaneContent.scrollPaneText.htmlText="<font size='12' color='#000000'>"+calledMarkerDescription;  
                        }
                        
                        
                        
                        

                         

                        Is this enough code to get an idea of how I am filing in the scrollPane?
                        • 9. Re: Adding a progress loader to a dynamic text field / scrollPane
                          kglad Adobe Community Professional & MVP

                          i don't see any progressevent listener.  actually, i don't see anything executing in that code except assigning your scrollpane's source.

                          • 10. Re: Adding a progress loader to a dynamic text field / scrollPane
                            snowgage Level 1

                            This is the listener and corresponding report progress function.  I forgot to include this in the post above.

                             

                            // Add listener
                            scrollPaneContent.addEventListener(ProgressEvent.PROGRESS,reportProgress);
                            function reportProgress(e:ProgressEvent):void {
                                trace(e.bytesLoaded + " loaded out of " + e.bytesTotal);
                                trace("LOADED");
                            }
                            
                            • 11. Re: Adding a progress loader to a dynamic text field / scrollPane
                              kglad Adobe Community Professional & MVP

                              it's not, at all, clear what you're doing with that code.  for example, it's not clear that your code is executing in the correct order and, in fact, it's not clear that most of the code you've shown is even executing.

                               

                              if your code is organized (or disorganized) in such a way that you can't copy and paste the handful of relevant lines code, use the trace() function to ensure your listener is defined before the source is assigned an make sure your listener is applied to the correct object.

                              • 12. Re: Adding a progress loader to a dynamic text field / scrollPane
                                snowgage Level 1

                                Hi KGLAD.  Thanks for the response.  Yes my code is a little messy.  Here I have included everything and tried to do a little cleaning.  Is there enough code here for you to get an idea of how/when things are firing?

                                 

                                import com.google.maps.LatLng;
                                import com.google.maps.Map;
                                import com.google.maps.MapEvent;
                                import com.google.maps.MapType;
                                import com.distriqt.gmaps.kml.utils.*;
                                import com.greensock.*; 
                                import com.greensock.easing.*;
                                import com.greensock.TweenLite; 
                                import flash.geom.Point;
                                import com.greensock.plugins.*;
                                TweenPlugin.activate([AutoAlphaPlugin]);
                                import com.google.maps.controls.NavigationControl;
                                import com.google.maps.controls.MapTypeControl;
                                import com.google.maps.controls.OverviewMapControl;
                                import com.google.maps.overlays.GroundOverlay;
                                import com.google.maps.overlays.GroundOverlayOptions;
                                import com.google.maps.LatLng;
                                import com.google.maps.LatLngBounds;
                                import com.google.maps.MapMouseEvent;
                                import com.google.maps.controls.*;
                                import com.google.maps.overlays.Marker;
                                import com.google.maps.InfoWindowOptions;
                                import com.google.maps.overlays.MarkerOptions;
                                import com.anttikupila.utils.JPGSizeExtractor;
                                import flash.display.StageAlign;
                                import flash.display.StageScaleMode;
                                import flash.events.Event;
                                import flash.net.URLLoader; 
                                import fl.controls.UIScrollBar; 
                                import flash.events.Event; 
                                import fl.events.ScrollEvent; 
                                import flash.sampler.NewObjectSample;
                                
                                [Embed(source="ICONS/PHOTO_BLACK.png")]var photoIcon:Class;
                                [Embed(source="ICONS/BLOG_BLACK.png")]var blogIcon:Class;
                                
                                scrollPane
                                
                                //************************************************//
                                // GMAP PARAMETERS
                                //************************************************//
                                var map:Map = new Map();
                                map.key = "map key";
                                //map.key = "api key";
                                //define the size of the map extent....
                                map.sensor = "false";
                                map.setSize(new Point(stage.stageWidth, stage.stageHeight));
                                map.addEventListener(MapEvent.MAP_READY, onMapReady);
                                map.addEventListener(MapEvent.MAP_READY, createmarkers);
                                map.addEventListener(MapEvent.MAP_READY, createMarkerArrays);
                                map.addEventListener(MapEvent.MAP_READY, createPhotoPingers);
                                
                                
                                this.addChild(map); 
                                map.setSize(new Point(stage.stageWidth, stage.stageHeight));
                                
                                //on map ready params
                                function onMapReady(event:Event):void 
                                {
                                map.setCenter(new LatLng(48,-113.5), 8, MapType.PHYSICAL_MAP_TYPE);
                                map.enableScrollWheelZoom();
                                map.disableContinuousZoom();
                                }
                                
                                //Marker options for a photo piece
                                var photoMarkerOptions:MarkerOptions = new MarkerOptions();
                                photoMarkerOptions.icon = new photoIcon();
                                photoMarkerOptions.hasShadow=false;
                                
                                //Marker options for a blog piece
                                var blogMarkerOptions:MarkerOptions = new MarkerOptions();
                                blogMarkerOptions.icon = new photoIcon();
                                blogMarkerOptions.hasShadow=false;
                                
                                //load xml tester
                                var pntloader:URLLoader = new URLLoader();
                                var pntxml:XML = new XML();
                                pntloader.addEventListener(Event.COMPLETE, loadpntXML);
                                pntloader.load(new URLRequest("map_feed.xml"));
                                
                                
                                // create an array of jpgs to index
                                var JPGIndexArray:Array = new Array();
                                
                                //Create array that will be populated with points
                                var pointsArray:Array = new Array();
                                
                                //Load the XML
                                function loadpntXML(e:Event):void {
                                    pntxml=new XML(e.target.data);
                                    pntxml.ignoreWhite = true;
                                     for (var i:int = 0; i< pntxml.row.length(); i++){
                                     pointsArray[i]="mrk"+i;
                                     JPGIndexArray[i]="JPG"+i;
                                     }
                                     //trace(pntxml);
                                }
                                
                                
                                //Create the markers and add them to the map
                                function createmarkers(event:Event):void
                                {
                                     for (var i:Number = 0; i < pntxml.row.length(); i++) {
                                     var markerOptions:MarkerOptions = new MarkerOptions();
                                      if (pntxml.row[i].TYPE=="PHOTO")
                                      {
                                           markerOptions.icon = new photoIcon();
                                           markerOptions.tooltip = "Photo";
                                           markerOptions.hasShadow=false;
                                      }
                                      else if(pntxml.row[i].TYPE=="BLOG")
                                      {
                                           markerOptions.icon = new blogIcon();
                                           markerOptions.tooltip = "Blog Entry";
                                           markerOptions.hasShadow=false;
                                      }
                                      else
                                      {
                                           null      
                                      }
                                      pointsArray[i] = new Marker(new LatLng(pntxml.row[i].LAT,pntxml.row[i].LONG),markerOptions);
                                     markerA.push(pointsArray[i]);
                                      map.addOverlay(pointsArray[i]);
                                      pointsArray[i].addEventListener(MapMouseEvent.CLICK,indexCalledMarkerRecord);
                                      pointsArray[i].addEventListener(MapMouseEvent.CLICK,scrollPanePopulate);
                                }
                                }
                                
                                
                                //--------------------------------------//
                                // PING PHOTO DIMENSIONS BEFORE LOADING //
                                //--------------------------------------//
                                
                                
                                var je : JPGSizeExtractor = new JPGSizeExtractor( );
                                
                                je.addEventListener( JPGSizeExtractor.PARSE_COMPLETE, jeLoadHandler );
                                je.addEventListener( JPGSizeExtractor.PARSE_FAILED, jeParseFailed );
                                
                                function createPhotoPingers(event:Event):void{
                                     for (var k:Number=0; k <pntxml.row.length(); k++){
                                     JPGIndexArray[k]=new JPGSizeExtractor(); 
                                     JPGIndexArray[k].debug = false;
                                     JPGIndexArray[k].addEventListener(JPGSizeExtractor.PARSE_COMPLETE, jeLoadHandler );
                                     trace("madeit");
                                     
                                     }
                                     pingPhotoUrls();
                                }
                                
                                     
                                
                                
                                function pingPhotoUrls():void
                                {
                                     for (var i:Number = 0; i < pntxml.row.length(); i++) {      
                                      var calledMarkerUrl=pntxml.row[i].URL_OF_CONTENT;
                                      JPGIndexArray[i].extractSize(calledMarkerUrl);      
                                      }
                                }
                                
                                var JPG1=null;
                                
                                
                                function jeLoadHandler(e:Event) : void {
                                     trace(e.currentTarget.width + "x" + e.currentTarget.height );
                                     imageWidths.push(e.currentTarget.width);
                                     }
                                
                                function jeParseFailed( event : Event ) : void {
                                     trace( "Parse failed" );
                                }
                                
                                var imageWidths = new Array;
                                
                                
                                
                                //--------------------------------------//
                                // FUNCTIONS FOR INDEXING CALLED MARKERS//
                                //--------------------------------------//
                                
                                //Create blank array for use in indexing
                                var markerA:Array=[];
                                
                                //VAR FOR USE IN INDEXING CALLED MARKER 
                                var pointindex=null;
                                
                                //INDEX CALLED MARKER POINT XML RECORD
                                function indexCalledMarkerRecord(e:MapMouseEvent):void{
                                     pointindex=genIndexPos(markerA,Marker(e.currentTarget));
                                     //trace(pntxml.row[pointindex].DESC);
                                     }
                                 //FUNCTION FOR INDEXING CALLED MARKER
                                function genIndexPos(a:Array,e:Marker):uint{
                                     for(var i:uint=0;i<a.length;i++){
                                          if(a[i]==e){
                                               return i;               
                                               }
                                               }
                                               return null;
                                               }
                                
                                
                                //---------------------------------------------//
                                //           SCROLLPANE FUNCTIONS              //
                                //---------------------------------------------//
                                this.addChild(scrollPane);
                                scrollPane.setSize(255,300); 
                                scrollPane.x=-200;
                                scrollPane.y=-200;
                                scrollPane.alpha=0;
                                scrollPaneContent.mouseEnabled=false;
                                
                                
                                spHeader.closeBox.addEventListener(MouseEvent.CLICK, function(eMouseEvent):void
                                                                                       {
                                                                                            TweenLite.to(scrollPane, .5,{autoAlpha:0,overwrite:true});                                                            
                                                                                       });
                                
                                
                                spHeader.forDrag.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
                                     {
                                          scrollPane.startDrag();          
                                     });
                                     
                                spHeader.forDrag.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
                                     {
                                          scrollPane.stopDrag();
                                     });
                                spHeader.forDrag.buttonMode=true;
                                spHeader.forDrag.useHandCursor=true;
                                spHeader.width=300;
                                
                                
                                
                                
                                
                                scrollPane.source = scrollPaneContent;
                                
                                scrollPaneContent.scrollPaneText.autoSize='left';
                                scrollPaneContent.scrollPaneImage.autoSize='center';
                                scrollPaneContent.scrollPaneImage.autoSize=TextFieldAutoSize.CENTER;
                                
                                
                                scrollPaneContent.mouseEnabled=false;
                                scrollPaneContent.scrollPaneText.condenseWhite = true;
                                
                                // Add listener. 
                                scrollPane.addEventListener(Event.COMPLETE, completeListener); 
                                scrollPaneContent.addEventListener(ProgressEvent.PROGRESS,reportProgress);
                                
                                function completeListener(event:Event):void { 
                                trace('Scrollpane content loaded');
                                }; 
                                
                                function reportProgress(e:ProgressEvent):void {
                                    trace(e.bytesLoaded + " loaded out of " + e.bytesTotal);
                                    trace("LOADED");
                                }
                                
                                
                                
                                
                                
                                
                                function scrollPanePopulate(event:Event){     
                                     //show scroll pane
                                     scrollPane.x=33;
                                     scrollPane.y=33;
                                     TweenLite.to(scrollPane, .5,{autoAlpha:1,overwrite:true});
                                     TweenLite.to(spHeader, .5,{autoAlpha:1,overwrite:true});
                                     
                                
                                     //create the temp variables
                                     var calledMarkerIndex=pntxml.row[pointindex].ID;
                                     var calledMarkerDate=pntxml.row[pointindex].DATE;
                                     var calledMarkerDescription=pntxml.row[pointindex].DESC;
                                     var calledMarkerContent=pntxml.row[pointindex].URL_OF_CONTENT;     
                                     var imgWidth=JPGIndexArray[pointindex].width;
                                     var imgHeight=JPGIndexArray[pointindex].height;
                                     
                                     scrollPaneContent.scrollPaneText.htmlText="<font size='12' color='#000000'>"+calledMarkerDescription;
                                          
                                     
                                     var imgBoxHeight=scrollPaneContent.scrollPaneImage.height;
                                    var txtHeight=scrollPaneContent.scrollPaneText.height;
                                    var contentHeight=(imgBoxHeight+txtHeight);
                                    scrollPane.setSize(300,(contentHeight+15));     
                                     
                                     //size the text box
                                     scrollPaneContent.scrollPaneText.width=270;
                                     
                                     //if image is wide or tall, scale accordingly and create a string that will be used
                                     if(imgWidth>=imgHeight){          
                                          var imgSource:String = "<img src="+"'"+calledMarkerContent+"'"+"width='"+250+"'"+"height='"+150+"'"+"/>";                    
                                          var calledImgHgh=160;          
                                     }
                                     else 
                                     {          
                                          var imgSource:String = "<img src="+"'"+calledMarkerContent+"'"+"width='"+110+"'"+"height='"+167+"'"+"/>";          
                                          var calledImgHgh=177;          
                                     }     
                                          
                                     //fill in the text
                                     scrollPaneContent.scrollPaneImage.htmlText=imgSource;
                                     //scrollPaneContent.scrollPaneText.htmlText="<font size='12' color='#000000'>"+calledMarkerDescription;     
                                     
                                     //pan the map to the called position
                                     map.panTo(pointsArray[calledMarkerIndex-1].getLatLng()) 
                                          
                                     //add the header to the SP and scale accordingly 
                                     scrollPane.addChild(spHeader);
                                     spHeader.x=-1;
                                     spHeader.y=1;
                                     spHeader.width=299;
                                          
                                     if (txtHeight>=250){          
                                          scrollPane.setSize(300,275);          
                                          scrollPaneContent.scrollPaneText.htmlText="<font size='12' color='#000000'>"+calledMarkerDescription+"<br><br>";
                                                         }
                                     if (txtHeight<=5){
                                          scrollPane.setSize(300,200);
                                          scrollPaneContent.scrollPaneText.htmlText="<font size='12' color='#000000'>"+calledMarkerDescription;
                                                         }     
                                     if (txtHeight>=5){
                                          scrollPane.setSize(300,275);
                                          scrollPaneContent.scrollPaneText.htmlText="<font size='12' color='#000000'>"+calledMarkerDescription+"<br><br>";
                                                         }          
                                     
                                     // CREATE TEMP VARIABLES FOR POSITIONING AND PLACE DYNAMIC TEXT
                                     var scTextY=scrollPaneContent.scrollPaneText.y;
                                     var scImageY=scrollPaneContent.scrollPaneImage.y;
                                     var scTextHeight=scrollPaneContent.scrollPaneText.height;
                                     scrollPaneContent.scrollPaneText.y=scImageY+calledImgHgh;
                                     
                                     
                                     //update the scrollpane and reset the scrollbar
                                     scrollPane.update();
                                     scrollPane.verticalScrollPosition=(0);
                                     
                                     scrollPane.verticalScrollBar.height=270;
                                     scrollPane.verticalScrollBar.x=281;
                                     scrollPane.verticalScrollBar.y=3;
                                     }
                                
                                spHeader.alpha=0;
                                this.addChild(spHeader);
                                
                                
                                var photoMarkersArray=new Array();
                                var photoMarkersIndexArray=new Array();
                                
                                
                                //CREATE ARRAY OF PHOTO MARKERS
                                function createMarkerArrays(e:Event):void{
                                for (var j:int=0; j<pntxml.row.(TYPE=="PHOTO").ID.length(); j++){
                                          var tempMarkerIndex=pntxml.row.(TYPE=="PHOTO").ID[j];
                                          var tempMarkerRef="mrk"+tempMarkerIndex;
                                          photoMarkersArray.push(tempMarkerRef);
                                          photoMarkersIndexArray.push(tempMarkerIndex);
                                     }
                                }
                                
                                
                                • 13. Re: Adding a progress loader to a dynamic text field / scrollPane
                                  kglad Adobe Community Professional & MVP

                                  there's plenty of code there but i don't have the time to go through all of it.  that's why i stated:

                                   

                                  if your code is organized (or disorganized) in such a way that you can't  copy and paste the handful of relevant lines code, use the trace()  function to ensure your listener is defined before the source is  assigned an make sure your listener is applied to the correct object.