Skip to main content
September 10, 2010
Answered

XML and Flash CS4 - loading images

  • September 10, 2010
  • 2 replies
  • 1437 views

Hello,

I'm trying to learn to use XML for loading images and found a tutorial somewhere... so far so good. HOWEVER, now I am stuck on something.

I've loaded a bunch of thumbs and want to load a bigger version of an image when its thumbnail image is clicked.

Got it to work but poorly. The same large image is loaded no matter what thumb is clicked. I would REALLY appreciate any advice.

Thank you!

============================================================================

var xmlRequest:URLRequest = new URLRequest("rockandroll.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var imgData:XML;
var numberOfChildren:int;
var hite:int;
var wid:int;

xmlLoader.load(xmlRequest);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);

var imageLoader1:Loader = new Loader();
var bigLoader:Loader = new Loader();

var rawImage:String;
var rawImage2:String;
var imgNum:int=0;

function xmlLoadedF(event:Event):void{
    imgData = new XML(event.target.data);
    numberOfChildren = imgData.*.length()
    var startX:int=190;
    var startY:int=60;
    var imgNum:int=0;
    var ctr:int=0;
    var cumuX:int=0;

    while(imgNum<36){
    for(var cols:int=0; cols<7; cols++){
        var b:MovieClip = new boxx();
        addChild(b);

        b.x=startX+cols*b.width;
        //
        cumuX+=Number(imgData.pic[imgNum].imgW);
        //
        b.y=startY;
        rawImage=imgData.pic[imgNum].thumb;
        rawImage2=imgData.pic[imgNum].big;
        var imageLoader1:Loader = new Loader();
        var bigLoader:Loader = new Loader();
       
        imageLoader1.load(new URLRequest(rawImage));

        imageLoader1.addEventListener(MouseEvent.CLICK, itsClicked);
        bigLoader.addEventListener(MouseEvent.CLICK, itsGone);   
        b.addChild(imageLoader1);
       
       
        imageLoader1.x=(b.width-imgData.pic[imgNum].imgW)/2;
        imageLoader1.y=(b.height-imgData.pic[imgNum].imgH)/2;
        imgNum++;
    }
    startY+=b.height;
    b.x=startX;
}

function itsClicked(event:Event):void{
       
        rawImage2=imgData.pic[imgNum].big;
        addChild(bigLoader);
        bigLoader.load(new URLRequest(rawImage2));
        bigLoader.addEventListener(MouseEvent.CLICK, itsGone);
}
function itsGone(event:Event):void{
    removeChild(bigLoader);
}
}

===================================

And here's a record in the XML file:

<?xml version="1.0" encoding="utf-8"?>
<photos>
    <pic>
        <thumb>thumbs/1t.jpg</thumb>
        <big>images/1.jpg</big> 
        <imgW>57</imgW>
        <imgH>31</imgH> 
        <BIGimgW>922</BIGimgW>
        <BIGimgH>500</BIGimgH> 
    </pic>

... etc.

=====================================

Thanks again!

This topic has been closed for replies.
Correct answer kglad

use something like:


var xmlRequest:URLRequest = new URLRequest("rockandroll.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var imgData:XML;
var numberOfChildren:int;
var hite:int;
var wid:int;

xmlLoader.load(xmlRequest);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);

var imageLoader1:Loader = new Loader();
var bigLoader:Loader = new Loader();

var rawImage:String;
var rawImage2:String;
var imgNum:int=0;

function xmlLoadedF(event:Event):void{
    imgData = new XML(event.target.data);
    numberOfChildren = imgData.*.length()
    var startX:int=190;
    var startY:int=60;
    var imgNum:int=0;
    var ctr:int=0;
    var cumuX:int=0;

    while(imgNum<36){
    for(var cols:int=0; cols<7; cols++){
        var b:MovieClip = new boxx();
        addChild(b);

        b.x=startX+cols*b.width;
        //
        cumuX+=Number(imgData.pic[imgNum].imgW);
        //
        b.y=startY;
        rawImage=imgData.pic[imgNum].thumb;
        rawImage2=imgData.pic[imgNum].big;
        var imageLoader1:Loader = new Loader();

        b.big=rawImage2;
        imageLoader1.load(new URLRequest(rawImage));

      b.addEventListener(MouseEvent.CLICK, itsClicked);
        b.addChild(imageLoader1);
      
        imageLoader1.x=(b.width-imgData.pic[imgNum].imgW)/2;
        imageLoader1.y=(b.height-imgData.pic[imgNum].imgH)/2;
        imgNum++;
    }
    startY+=b.height;
    b.x=startX;
}

function itsClicked(event:Event):void{
       
      var bigLoader:Loader=new Loader();
        addChild(bigLoader);
        bigLoader.load(new URLRequest(MovieClip(event.currentTarget).big));
        bigLoader.addEventListener(MouseEvent.CLICK, itsGone);
}
function itsGone(event:Event):void{
    removeChild(event.currentTarget);

Loader(event.currentTarget).removeEventListener(MouseEvent.CLICK,itsGone);

event.currentTarget=null;

}
}


2 replies

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
September 10, 2010

use something like:


var xmlRequest:URLRequest = new URLRequest("rockandroll.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var imgData:XML;
var numberOfChildren:int;
var hite:int;
var wid:int;

xmlLoader.load(xmlRequest);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);

var imageLoader1:Loader = new Loader();
var bigLoader:Loader = new Loader();

var rawImage:String;
var rawImage2:String;
var imgNum:int=0;

function xmlLoadedF(event:Event):void{
    imgData = new XML(event.target.data);
    numberOfChildren = imgData.*.length()
    var startX:int=190;
    var startY:int=60;
    var imgNum:int=0;
    var ctr:int=0;
    var cumuX:int=0;

    while(imgNum<36){
    for(var cols:int=0; cols<7; cols++){
        var b:MovieClip = new boxx();
        addChild(b);

        b.x=startX+cols*b.width;
        //
        cumuX+=Number(imgData.pic[imgNum].imgW);
        //
        b.y=startY;
        rawImage=imgData.pic[imgNum].thumb;
        rawImage2=imgData.pic[imgNum].big;
        var imageLoader1:Loader = new Loader();

        b.big=rawImage2;
        imageLoader1.load(new URLRequest(rawImage));

      b.addEventListener(MouseEvent.CLICK, itsClicked);
        b.addChild(imageLoader1);
      
        imageLoader1.x=(b.width-imgData.pic[imgNum].imgW)/2;
        imageLoader1.y=(b.height-imgData.pic[imgNum].imgH)/2;
        imgNum++;
    }
    startY+=b.height;
    b.x=startX;
}

function itsClicked(event:Event):void{
       
      var bigLoader:Loader=new Loader();
        addChild(bigLoader);
        bigLoader.load(new URLRequest(MovieClip(event.currentTarget).big));
        bigLoader.addEventListener(MouseEvent.CLICK, itsGone);
}
function itsGone(event:Event):void{
    removeChild(event.currentTarget);

Loader(event.currentTarget).removeEventListener(MouseEvent.CLICK,itsGone);

event.currentTarget=null;

}
}


September 10, 2010

Works...

     ...perfectly!

Thanks, KGLAD!

Ned Murphy
Legend
September 10, 2010

Try tracing the value of imageNum in your itsClicked function...

trace(imgNum):

kglad
Community Expert
Community Expert
September 10, 2010

(imgNum is unrelated to the clicked thumb.)


Ned Murphy
Legend
September 10, 2010

(I know)