12 Replies Latest reply: May 2, 2012 8:31 AM by nikolaig RSS

    How do I code thumb scroller to have images set to its individual widths?

    nikolaig Community Member

      I am following a tutorial on active.tutsplus.com (http://active.tutsplus.com/tutorials/effects/create-a-responsive-xml-image-scroller-in-act ionscript-3-0/comment-page-2/#comment-53078)

      Tutorial is done with an assumption that all of the images in the thumb scroller are identical in height and widths. Particularly set to 140 +20 pixels.

      In my case each image has a different width. How would I code this set up so the images would fit nicely with various width and have identical distances between them.

      Here is the code snippet from the tutorial:

       

      function buildScroller(imageList:XMLList):void{

                trace("build Scroller");

       

                for (var item:uint = 0; item<imageList.length();item++) {

                          var thisOne:MovieClip = new MovieClip();

       

                          //outline

                          var blackBox:Sprite = new Sprite();

                          blackBox.graphics.beginFill(0xFFFFFF);

                          blackBox.graphics.drawRect(-1, -1, 124, 107);

                          thisOne.addChild(blackBox);

       

                          thisOne.x = (140 +20) *item;

                          thisOne.itemNum = item;

                          thisOne.title = imageList[item].attribute("title");

                          thisOne.link = imageList[item].attribute("url");

                          thisOne.src = imageList[item].attribute("src");

       

                          //trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);

       

       

                          //add item

                          scroller.addChild(thisOne);

                }

       

                trace("termination of build scroller");

       

      }

        • 1. Re: How do I code thumb scroller to have images set to its individual widths?
          kglad CommunityMVP

          where are the images?  are they loaded?  are they on-stage?  are they in the library with classes assigned?

          • 2. Re: How do I code thumb scroller to have images set to its individual widths?
            Ned Murphy CommunityMVP

            It looks like what you will need to do is manage the x placement differently than how it is currently done.  ...

             

            thisOne.x = (140 +20) *item;

             

            You will need to know the width of each image as you place them in order to be able to manage spacing them out evenly.  So you need to mainatin an x-placement variable that you use to plant each one.  You increase that value based on the image width and desired spacing value for the next image that will be planted... something like...

             

            thisOne.x = currentX;

             

            currentX += currentImageWidth+spaceBetween

            • 3. Re: How do I code thumb scroller to have images set to its individual widths?
              nikolaig Community Member

              they are in the xml file.

              Here is the full code for the scroller up to this point:

              //load xml

              var xmlLoader:URLLoader = new URLLoader();

              /////Parse XML

              var xmlData:XML = new XML();

              var xmlPath:String = "app_thmbs_imgs.xml";

              xmlLoader.load(new URLRequest(xmlPath));

              trace("loading xml from: " + xmlPath);

              xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

               

               

              function LoadXML(e:Event):void {

                        trace("xml load complete");

                        xmlData = new XML(e.target.data);

                        //trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList

                        buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

              }

               

               

               

               

              /////Build Scroller MovieClip to Contain Each Image

              var scroller:MovieClip = new MovieClip();

              this.addChild(scroller);

               

               

              scroller.y = 30;

              /////

               

               

              /////Parse XML

              //build scroller from xml

              function buildScroller(imageList:XMLList):void{

                        trace("build Scroller");

               

                        for (var item:uint = 0; item<imageList.length();item++) {

                                  var thisOne:MovieClip = new MovieClip();

               

                                  //outline

                                  var blackBox:Sprite = new Sprite();

                                  blackBox.graphics.beginFill(0xFFFFFF);

                                  blackBox.graphics.drawRect(-1, -1, 124, 107);

                                  thisOne.addChild(blackBox);

               

                                  thisOne.x = (140 +20) *item;

                                  thisOne.itemNum = item;

                                  thisOne.title = imageList[item].attribute("title");

                                  thisOne.link = imageList[item].attribute("url");

                                  thisOne.src = imageList[item].attribute("src");

               

                                  //trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);

               

                                  //create listeners for this thumb

                                  thisOne.buttonMode = true;

                                  thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

                                  thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);

                                  thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);

               

                                  //add item

                                  scroller.addChild(thisOne);

                        }

               

                        trace("termination of build scroller");

               

              }

               

               

              function clickScrollerItem(e:MouseEvent):void{

                        trace("clicked item " +e.currentTarget.itemNum + " - visit url: " +e.currentTarget.link);

              }

               

               

              function overScrollerItem(e:MouseEvent):void{

                        trace("over"+e.currentTarget.title);

              }

              function outScrollerItem(e:MouseEvent):void{

                        trace("out"+e.currentTarget.title);

              }

               

              Here is teh code from xml file:

              <?xml version="1.0" encoding="UTF-8"?>

               

               

              <images>

               

               

              <image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-1-bgpA_xsm.jpg" title="CoolingReflections" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-2-zenC_xsm.jpg" title="OrchidsUnderGlass" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-3-luminariesB_xsm.jpg" title="IllumiNight" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-4-eriserC_xsm.jpg" title="InnerElegance" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-5-greenglobeA_xsm.jpg" title="GazingGlow" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-6-bluezen_xsm.jpg" title="LightUpTheNight" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-7-wine_xsm.jpg" title="NightsWineRoses" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-8-pinkorange_xsm.jpg" title="TowerSpec" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-9-snowscapeA_xsm.jpg" title="IcySoph" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-10-vineA_xsm.jpg" title="TheGoldStandard" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-11-lamp_xsm.jpg" title="LampLighter" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-12-stockB_xsm.jpg" title="IllumGarden" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-13-tableB_xsm.jpg" title="TableTopAmore" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-14-URN_xsm.jpg" title="InteriorGlow" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-15-wash_xsm.jpg" title="EWallWash" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ATI-15-washamber_xsm.jpg" title="EWallWashAmber" url="http://www.888acolyte.com"/>

               

               

              <image src="appThmb_imgs/BubbleOasis_RGB_xsm.jpg" title="BubbleOasis" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/ButterflyGlow_RGB_xsm.jpg" title="ButterflyGlow" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/CosmicSushi_RGB_xsm.jpg" title="CosmicSushi" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/CountryTower_RGB_xsm.jpg" title="CountryTower" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/CrystalSparkle_RGB_xsm.jpg" title="CrystalSparkle" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/FlamelessTabletopAccents_RGB_xsm.jpg" title="FlamelessTabletopAccents" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/OrchidLamp_RGB_xsm.jpg" title="OrchidLamp" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/PinkPassion_RGB_xsm.jpg" title="PinkPassion" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/RosesGallasGalore_RGB_xsm.jpg" title="RosesGallasGalore" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/SangriaBling_RGB_xsm.jpg" title="SangriaBling" url="http://www.888acolyte.com"/>

              <image src="appThmb_imgs/SilverBloom_RGB_xsm.jpg" title="SilverBloom" url="http://www.888acolyte.com"/>

              </images>

              • 4. Re: How do I code thumb scroller to have images set to its individual widths?
                nikolaig Community Member

                As I understan there is a typo in Ned Murphy's answer.

                currentX += currentImageWidth+spaceBetween has to be changed to currentX = currentImageWidth+spaceBetween, i.e. += would be changed to =

                It also seems that it is implied that currentX = currentImageWidth+spaceBetween has to be specified as var

                 

                Her is how I altered my code:

                 

                  var currentX = currentImageWidth+spaceBetween;

                 

                                    //thisOne.x = (140 +20) *item;

                                    thisOne.x = currentX;//modified line to adjust variable thumb widths

                 

                How would I define properties of currentImageWidth and spaceBetween?

                • 5. Re: How do I code thumb scroller to have images set to its individual widths?
                  Ned Murphy CommunityMVP

                  No, that is not a typo, there is nothing wrong with what I showed.  You are continually increasing the currentX value.  += is a shorthand code for saying

                   

                  currentX = currentX + whatever

                   

                  You do not want to specify the var where you did, it would need to be done earlier and would possibly be just...

                   

                  var currentX = 0;  // or whatever the first value of x will be.

                   

                  So what you changed it to will not work.

                   

                  The names I gave to the variables you are asking about are descriptive, so you should be able to determine where you get them from.

                   

                  currentImageWidth is obtained from whatever image you just planted

                   

                  spaceBetween is whatever amount of space you want between your images.

                  • 6. Re: How do I code thumb scroller to have images set to its individual widths?
                    nikolaig Community Member

                    I can not figure out how to proceed further. I tried to implement the changes outlined by you, but missing something which should have been understood by me.

                    Here is my new version of the code and images look all jambled up together:

                     

                      var currentX=390;

                     

                                        //thisOne.x = (140 +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                                        thisOne.x = currentX;//modified line to adjust variable thumb widths

                                        thisOne.itemNum = item;

                                        thisOne.title = imageList[item].attribute("title");

                                        thisOne.link = imageList[item].attribute("url");

                                        thisOne.src = imageList[item].attribute("src");

                     

                                        //var set up for images appeance

                     

                                        var spaceBetween=20;

                                        var currentImageWidth=thisOne.src

                     

                     

                                        currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

                    • 7. Re: How do I code thumb scroller to have images set to its individual widths?
                      Ned Murphy CommunityMVP

                      You seem to be close to what you might need, except you are not doing anything to acquire the width based on what you showed for the xml data. 

                       

                      var currentImageWidth=thisOne.src

                       

                      The src data from the xml is the path/name of the image file, not the width of it.  If you can include the width as a parameter in your xml then you could use that.  If you cannot do that, then you need to load the image and acquire its width after it has finished loading... THis would mean you have to change the way you are loading to be sequencial... meaning you load each image and process it thoroughly one at a time.  You don't trigger loading another until you are done with the current one.

                      • 8. Re: How do I code thumb scroller to have images set to its individual widths?
                        nikolaig Community Member

                        Yes, it seems to me that I am very close to that too.

                        Unfortunately your latest suggestion leaves to much up to my limited knowledge.

                        Altering xml file seemed at first as an easier solution so I added an attribute of width into an xml line of code:

                        <image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com" width="123"/ >

                        However looks lie I can not just start adding attributes unless they are standardised attributes?

                         

                        Then in Flash AS3 version I tried the following:

                         

                        var currentX=390;

                         

                         

                                            //thisOne.x = (140 +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                                            thisOne.x = currentX;//modified line to adjust variable thumb widths

                                            thisOne.itemNum = item;

                                            thisOne.title = imageList[item].attribute("title");

                                            thisOne.link = imageList[item].attribute("url");

                                            thisOne.src = imageList[item].attribute("src");

                                            thisOne.currentImageWidth = imageList[item].attribute("width");

                         

                                            //var set up for images appeance

                         

                                            var spaceBetween=20;

                                            var currentImageWidth=thisOne.currentImageWidth

                         

                         

                                            currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

                         

                        Nothing worked.

                        If AS3 solution with changing the loading to be sequencial is easier could you specify the code for it?

                        I tried a goodle search for a tutorial on sequencial loading but came out empty handed.

                        • 9. Re: How do I code thumb scroller to have images set to its individual widths?
                          Ned Murphy CommunityMVP

                          No, there are no standardized attributes, you can add anything you want as data in your xml.  In your case it will be easier to deal with getting the data thru the xml file.

                           

                          You should learn to use the trace() function to see if the data you are expecting is what you are getting... such as in

                           

                          thisOne.currentImageWidth = imageList[item].attribute("width");

                          trace(thisOne.currentImageWidth);

                           

                          One other thing you need to account for... when you read in xml data you are reading String values.  Your width needs to be a Number, so you need to convert it.

                          • 10. Re: How do I code thumb scroller to have images set to its individual widths?
                            nikolaig Community Member

                            I updated my xml fine with width settings unique for each image.

                            so now it looks like this:

                            <images>

                            <image src="appThmb_imgs/A-illuminatorUpLit_xsm.jpg" title="UpDownGlowingVase" url="http://www.888acolyte.com" width="123"/ >

                            <image src="appThmb_imgs/ATI-1-bgpA_xsm.jpg" title="CoolingReflections" url="http://www.888acolyte.com" width="113"/>

                            <image src="appThmb_imgs/ATI-2-zenC_xsm.jpg" title="OrchidsUnderGlass" url="http://www.888acolyte.com" width="193"/>

                            <image src="appThmb_imgs/ATI-3-luminariesB_xsm.jpg" title="IllumiNight" url="http://www.888acolyte.com" width="123"/>

                            </images>

                             

                            I get this error:

                            loading xml from: app_thmbs_imgsModfd.xml

                            xml load complete

                            TypeError: Error #1090: XML parser failure: element is malformed.

                                      at app_thmbs_imgsVarWdth_fla::MainTimeline/LoadXML()

                                      at flash.events::EventDispatcher/dispatchEventFunction()

                                      at flash.events::EventDispatcher/dispatchEvent()

                                      at flash.net::URLLoader/onComplete()

                             

                            I am not sure how do I specify a number if each image has a different number value. Would it be better to have it as string, so this string picks up whatever the current number would be?

                             

                            Here is the entire AS3 code:

                            //load xml

                            var xmlLoader:URLLoader = new URLLoader();

                            /////Parse XML

                            var xmlData:XML = new XML();

                            var xmlPath:String = "app_thmbs_imgsModfd.xml";

                            xmlLoader.load(new URLRequest(xmlPath));

                            trace("loading xml from: " + xmlPath);

                            xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

                             

                             

                            function LoadXML(e:Event):void {

                                      trace("xml load complete");

                                      xmlData = new XML(e.target.data);

                                      //trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList

                                      buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

                            }

                             

                             

                             

                             

                            /////Build Scroller MovieClip to Contain Each Image

                            var scroller:MovieClip = new MovieClip();

                            this.addChild(scroller);

                             

                             

                            scroller.y = 30;

                            /////

                             

                             

                            /////Parse XML

                            //build scroller from xml

                            function buildScroller(imageList:XMLList):void{

                                      trace("build Scroller");

                             

                                      for (var item:uint = 0; item<imageList.length();item++) {

                                                var thisOne:MovieClip = new MovieClip();

                             

                                                /*//outline

                                                var blackBox:Sprite = new Sprite();

                                                blackBox.graphics.beginFill(0xFFFFFF);

                                                blackBox.graphics.drawRect(-1, -1, 124, 107);

                                                thisOne.addChild(blackBox);*/

                             

                                                var currentX=290;

                             

                             

                                                //thisOne.x = (140 +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                                                thisOne.x = currentX;//modified line to adjust variable thumb widths

                                                thisOne.itemNum = item;

                                                thisOne.title = imageList[item].attribute("title");

                                                thisOne.link = imageList[item].attribute("url");

                                                thisOne.src = imageList[item].attribute("src");

                                                thisOne.currentImageWidth = imageList[item].attribute("width");

                                                trace(thisOne.currentImageWidth);

                                                //var set up for images appeance

                             

                                                var spaceBetween=20;

                                                var currentImageWidth=thisOne.currentImageWidth

                             

                             

                                                currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths

                             

                                                //trace(thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src);

                             

                                                //Loading and Adding the Images

                                                //image container

                                                var thisThumb:MovieClip = new MovieClip();

                                                //add image

                                                var ldr:Loader = new Loader();

                                                var url:String = imageList[item].attribute("src");

                                                var urlReq:URLRequest = new URLRequest(url);

                                                trace("loading thumbnail "+item+" into Scroller: " + url);

                                                //assign event listeners for Loader

                                                ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

                                                ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                                                ldr.load(urlReq);

                                                thisThumb.addChild(ldr);

                                                thisOne.addChild(thisThumb);

                             

                                                //create listeners for this thumb

                                                thisOne.buttonMode = true;

                                                thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

                                                thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);

                                                thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);

                             

                                                //add item

                                                scroller.addChild(thisOne);

                                      }

                             

                                      trace("termination of build scroller");

                             

                            }

                             

                             

                            function clickScrollerItem(e:MouseEvent):void{

                                      trace("clicked item " +e.currentTarget.itemNum + " - visit url: " +e.currentTarget.link);

                            }

                             

                             

                            function overScrollerItem(e:MouseEvent):void{

                                      trace("over"+e.currentTarget.title);

                            }

                            function outScrollerItem(e:MouseEvent):void{

                                      trace("out"+e.currentTarget.title);

                            }

                             

                             

                            function completeHandler(e:Event):void{

                                      trace("thumbnail complete "+e.target.loader.parent.parent.title);

                            }

                            function errorHandler(e:IOErrorEvent):void{

                                      trace("thumbnail error="+e);

                            }

                            • 11. Re: How do I code thumb scroller to have images set to its individual widths?
                              Ned Murphy CommunityMVP

                              To convert the width String to a Number just change that one line to...

                               

                              thisOne.currentImageWidth = Number(imageList[item].attribute("width"));

                               

                              As far as the xml error goes, the problem will be something in your xml file.  The only thing that I can see that might cause it is you have a blank space in your first tag closer....

                               

                              ...://www.888acolyte.com" width="123"/ >

                               

                              should be

                               

                              ://www.888acolyte.com" width="123"/>

                              • 12. Re: How do I code thumb scroller to have images set to its individual widths?
                                nikolaig Community Member

                                Wow, the scary joy of coding. It was the blank space in the first line of xml code before the closing > which caused the problem.

                                Aside of not knowing, I would have never guessed it.

                                This part of an extra empty space which sends everything awry always scares me of the coding process. Are there any methods, check engines, proof reading buttons to turn on in DreamWeaver which would point out to those simple but hard to notice mistakes?

                                So there is no mistakes now in xml file.

                                 

                                However I can not make the flash file to produce desirable results. I still see the images all jammed up together and not spread apart with equal distances.

                                Here is the part of the code from AS3 setting:

                                //load xml

                                var xmlLoader:URLLoader = new URLLoader();

                                /////Parse XML

                                var xmlData:XML = new XML();

                                var xmlPath:String = "app_thmbs_imgsModfd.xml";

                                xmlLoader.load(new URLRequest(xmlPath));

                                trace("loading xml from: " + xmlPath);

                                xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

                                 

                                 

                                function LoadXML(e:Event):void {

                                          trace("xml load complete");

                                          xmlData = new XML(e.target.data);

                                          //trace(xmlData.image); //we'll see each image xml element listed in the output panel with this xmlList

                                          buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function

                                }

                                 

                                 

                                 

                                 

                                /////Build Scroller MovieClip to Contain Each Image

                                var scroller:MovieClip = new MovieClip();

                                this.addChild(scroller);

                                 

                                 

                                scroller.y = 30;

                                /////

                                 

                                 

                                /////Parse XML

                                //build scroller from xml

                                function buildScroller(imageList:XMLList):void{

                                          trace("build Scroller");

                                 

                                          for (var item:uint = 0; item<imageList.length();item++) {

                                                    var thisOne:MovieClip = new MovieClip();

                                 

                                                    /*//outline

                                                    var blackBox:Sprite = new Sprite();

                                                    blackBox.graphics.beginFill(0xFFFFFF);

                                                    blackBox.graphics.drawRect(-1, -1, 124, 107);

                                                    thisOne.addChild(blackBox);*/

                                 

                                                    var currentX=290;

                                 

                                 

                                                    thisOne.x = (currentImageWidth +20) *item;//old line where images are uniformed at 140pxls widths with 20pxls padding

                                                    thisOne.x = currentX;//modified line to adjust variable thumb widths

                                                    thisOne.itemNum = item;

                                                    thisOne.title = imageList[item].attribute("title");

                                                    thisOne.link = imageList[item].attribute("url");

                                                    thisOne.src = imageList[item].attribute("src");

                                 

                                 

                                                    thisOne.currentImageWidth = Number(imageList[item].attribute("width"));

                                 

                                                    trace(thisOne.currentImageWidth);

                                                    //var set up for images appeance

                                 

                                                    var spaceBetween=20;

                                                    var currentImageWidth=thisOne.currentImageWidth

                                 

                                                    currentX += currentImageWidth+spaceBetween;//modified line to adjust variable thumb widths