7 Replies Latest reply: Dec 6, 2012 9:04 PM by kglad RSS

    How do I script SWF files instead of JPG files in XML loader?

    nikolaig Community Member

      I have a SWF loader (greensock.com platform) and a thumbnail image scroll underneath it made of small image buttons. Each image button has a link which loads a new SWF file into the SWF loader above. Here is the code for each button which loads the bigger SWF file into the loader above:

       

      Button3.addEventListener(MouseEvent.CLICK, Button3_PlayPopUp);
      
      function Button3_PlayPopUp(event:MouseEvent): void { 
          //setting the sourceVar
          sourceVar="3.swf";
          //making the SWFLoader load
          //as setting the soureVar after the SWFLoader is created won't do anything unlesss 
          //I also re-create the SWFLoader with the new sourceVar when the button is clicked
          loader_howToLoader2.url = sourceVar;
          loader_howToLoader2.load(true);
          
      }
      

       

      Then I decided to load all button via XML loader. I followed the tutorial on XML loaders which deals with loading jpg images and assigning URL links to them in the following manner first in XML file:

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

      and then in AS3 like this:

       

      var xmlLoader:URLLoader = new URLLoader();
      
      thisOne.link = imageList[item].attribute("url");
      
      
      
      function clickScrollerItem(e:MouseEvent):void {
       //trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
       var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
       try {
       navigateToURL(urlRequest);
       }
       catch (e:Error) {
       // handle error here
       trace(e);
       }
      }
      

       

      My question is: How do I apply the code to each individual small thumbnail button to load a bigger image into the SWF loader above? Do I have to add something to XML file or this way it will never work with jpg images? Can url in XML file set the source var (//setting the sourceVar), since they are all individual and then somehow apply the making SWL loader to load part (//making the SWFLoader load) as a standard somewhere in the AS3 code?

        • 1. Re: How do I script SWF files instead of JPG files in XML loader?
          kglad CommunityMVP

          first, load your xml and use an complete listener function to loop through your images, load the thumbs, add each to a parent movieclip, arrange their positions and assign the parent a mouse listener and a url string property to match the corresponding url attribute.

          • 2. Re: How do I script SWF files instead of JPG files in XML loader?
            nikolaig Community Member

            O.K. Here is my COMPLETE function.

             

             

            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 from xml

            function buildScroller(imageList:XMLList):void{

                trace("build Scroller");

               

                //var scroller_x:int=0;

               

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

                    var thisOne:MovieClip = new MovieClip();

                   

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

                   

                    //outline

                    var blackBox:Sprite = new Sprite();

                    blackBox.graphics.beginFill(0xFFFFFF);

                    blackBox.graphics.drawRect(-1, -1, 86, 128);//-1,-1 places rectangle 1px left and up.86, 128 draws rectangle 1px wider on all sides of placed image dimenstions of 84x126

                    thisOne.addChild(blackBox);

                   

                    //scroller_x += thisOne.img_width + 20;

                   

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

             

                    thisOne.x = (84 + padding) *item;//84 is the width of the loaded images and 15 (which was before paddign var) is the padding

                    //thisOne.x = scroller_x;//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.alpha = 0;//makes all thumb images at alpha=0 before they are fully loaded

                    //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(thisOne.src);

                    trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);//url

                    ldr.load(urlReq);

                    //assign event listeners for Loader

                    ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);//tells us when the loading is complete

                    ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);//tells us if there are any typo errors when the loading is complete

                    thisThumb.addChild(ldr);

                    thisOne.addChild(thisThumb);

                   

                    //create listeners for this thumb

                    thisOne.buttonMode = true;//makes boxes act as buttons

                    thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);//makes boxes act as buttons

                    thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);//traces the title when the mouse is over the bounding box in the Output Panel

                    thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);//traces the title when the mouse is out the bounding box in the Output Panel

             

                   

                    //add item

                    scroller.addChild(thisOne);

                }

             

             

             

            But I am not sure if I expressed myself clearly. All what you have indicated happens. Images are being loaded and url strings are working. I can not figure out how to tweek the code so instead of url specified in xml file I can load swf image into the SWF loader on the same screen?

            • 3. Re: How do I script SWF files instead of JPG files in XML loader?
              kglad CommunityMVP

              i don't see where you assigned url string properties (eg, urlString) to the parent movieclips.  once you do that, you use that string to load the large image in clickScrolleritem:

               

              function clickScrolleritem(e:MouseEvent):void{

                loader_howToLoader2.url = MovieClip(e.currentTarget).urlString;
                  loader_howToLoader2.load(true);

              }

              • 4. Re: How do I script SWF files instead of JPG files in XML loader?
                nikolaig Community Member

                Thanks for a straight forward answer.

                I thought I am assigning the url string properties in the xml file as this:

                 

                <image src="myImage.jpg" title="myImageTitle" url="http://www.888acolyte.com"/>
                

                is it where I specify the individual links? Or I forget about the url from xml file all together? Do I still need to pass a sourceVar for the SWF loader?

                 

                Here is the constractor code from the SWF loader:

                 

                loader_howToLoader2 = new SWFLoader(sourceVar,
                
                • 5. Re: How do I script SWF files instead of JPG files in XML loader?
                  kglad CommunityMVP

                  yes, you did.  i missed that. 

                   

                  so you used link instead of urlString:

                   

                  function clickScrolleritem(e:MouseEvent):void{

                    loader_howToLoader2.url = MovieClip(e.currentTarget).link;
                      loader_howToLoader2.load(true);

                  }

                  • 6. Re: How do I script SWF files instead of JPG files in XML loader?
                    nikolaig Community Member

                    wow, great - it works! I was searching for it for a long time.

                    For other newbies i wanted to add that you have to replace url in the xml file (url="http://www.888acolyte.com"/ in my example with the link to the swf file you want to load. For example like this :
                    url="appThumbs_loadSWFs/upanddownglowingvase_tl.swf"

                    Thanks for your help.

                     

                    btw. why I do not need to add this line

                    loader_howToLoader2.url = sourceVar;

                     

                    to this code:

                    loader_howToLoader2.url = MovieClip(e.currentTarget).link;
                        loader_howToLoader2.load(true);

                    • 7. Re: How do I script SWF files instead of JPG files in XML loader?
                      kglad CommunityMVP

                      loader_howToLoader2.url is  the url string you want to load.

                       

                      it can be a variable like sourceVar or the link property of a movieclip.  as long as the variable/property point to a valid url string, the loader will work.