xml gallery

[z1784]

I'm relatively new to this and having a difficult time. I'm trying to build an image gallery with xml that has 2 columns of thumbnails to pick from. Once I have that though, the remove child function is causing havoc by deleting the bottom thumbnails and still allowing the images from the other column to remain on the stage-stacking up.

If anyone could help me build the thumbnails this way from one xml doc or tell me how to better remove the image from the stage while loading the next one clicked, I would be very appreciative.

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("images.xml"))

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void

{
    xml = XML(event.target.data);
    xmlList = xml.children();
    
    for(var i:int = 0; i < xmlList.length(); i++)
    {
        imageLoader = new Loader();
        imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
        imageLoader.x = 5;
        imageLoader.y = i * 70 + 5;
        imageLoader.name = xmlList[i].attribute("source")
        addChild(imageLoader);
        imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
    }
}

function showPicture(event:MouseEvent):void
{
    removeChild(imageLoader);
    imageLoader = new Loader();
    imageLoader.load(new URLRequest(event.target.name));
    imageLoader.x = 200;
    addChild(imageLoader);

    
}

var imageLoader2:Loader;
var xml2:XML;
var xmlList2:XMLList;
var xmlLoader2:URLLoader = new URLLoader();
xmlLoader2.load(new URLRequest("images2.xml"))

xmlLoader2.addEventListener(Event.COMPLETE, xmlLoaded2);

function xmlLoaded2(event:Event):void

{
    xml2 = XML(event.target.data);
    xmlList2 = xml2.children();
    
    for(var j:int = 0; j < xmlList2.length(); j++)
    {
        imageLoader2 = new Loader();
        imageLoader2.load(new URLRequest(xmlList2[j].attribute("thumb")));
        imageLoader2.x = 70;
        imageLoader2.y = j * 70 + 5;
        imageLoader2.name = xmlList2[j].attribute("source")
        addChild(imageLoader2);
        imageLoader2.addEventListener(MouseEvent.CLICK, showPicture2);
    }
}

function showPicture2(event:MouseEvent):void
{
    removeChild(imageLoader2);
    imageLoader2 = new Loader();
    imageLoader2.load(new URLRequest(event.target.name));
    imageLoader2.x = 200;
    addChild(imageLoader2);

    
}

[Flep]

Hi and welcome

Before you remove a Loader, check if it is null:

if(imageLoader2!=null)
     removeChild(imageLoader2)

;

[z1784]

Thanks. I tried what you added, but I'm still having some problems. The bottom thumbnails are still disappearing and the each column properly removes an image when another image in the column is clicked, but crossing to the other column causes the images to stack up on the stage. I really appreciate your looking at this.


Here's what I tried:

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("images.xml"))

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void

{
    xml = XML(event.target.data);
    xmlList = xml.children();
    
    for(var i:int = 0; i < xmlList.length(); i++)
    {
        imageLoader = new Loader();
        imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
        imageLoader.x = 5;
        imageLoader.y = i * 70 + 5;
        imageLoader.name = xmlList[i].attribute("source")
        addChild(imageLoader);
        imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
    }
}

function showPicture(event:MouseEvent):void
{
   if(imageLoader2!=null)
     removeChild(imageLoader2)
    if(imageLoader!=null)
     removeChild(imageLoader)
    imageLoader = new Loader();
    imageLoader.load(new URLRequest(event.target.name));
    imageLoader.x = 200;
    addChild(imageLoader);
    addChild(imageLoader2);

    
}

var imageLoader2:Loader;
var xml2:XML;
var xmlList2:XMLList;
var xmlLoader2:URLLoader = new URLLoader();
xmlLoader2.load(new URLRequest("images2.xml"))

xmlLoader2.addEventListener(Event.COMPLETE, xmlLoaded2);

function xmlLoaded2(event:Event):void

{
    xml2 = XML(event.target.data);
    xmlList2 = xml2.children();
    
    for(var j:int = 0; j < xmlList2.length(); j++)
    {
        imageLoader2 = new Loader();
        imageLoader2.load(new URLRequest(xmlList2[j].attribute("thumb")));
        imageLoader2.x = 70;
        imageLoader2.y = j * 70 + 5;
        imageLoader2.name = xmlList2[j].attribute("source")
        addChild(imageLoader2);
        imageLoader2.addEventListener(MouseEvent.CLICK, showPicture2);
    }
}

function showPicture2(event:MouseEvent):void
{
   if(imageLoader!=null)
     removeChild(imageLoader)
    if(imageLoader2!=null)
     removeChild(imageLoader2) 
    imageLoader2 = new Loader();
    imageLoader2.load(new URLRequest(event.target.name));
    imageLoader2.x = 200;
    addChild(imageLoader2);
    addChild(imageLoader);

    
}

If I didn't add the second addChild to each function, it returned an error for it being undefined.

[z1784]

I spent much of the evening trying to figure this out, and I'm wondering if I'm asking the wrong question. Is there a way to have flash pull my ten thumbnails from the xml and arrange them into two columns? Right now, I'm using two xml documents and using different x values for each to simulate this. When I just use one, I can easily load and unload the images, so it feels like my problem comes from using two xml docs.

Thanks for your help.

[Flep]

Have a look to this sample and try to change the var columns value:

[z1784]

It worked great. Thanks so much.

Here's the code I used:

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();


var numClips:int=10;
var columns:int=2;




xmlLoader.load(new URLRequest("images.xml"))
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
    xml = XML(event.target.data);
    xmlList = xml.children();
    
 for(var i:int = 0; i < xmlList.length(); i++)
    {
        imageLoader = new Loader();
        imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
        imageLoader.x = 10+( i % columns )*65;
        imageLoader.y = 10+(Math.floor(i/columns)*65);;
        imageLoader.name = xmlList[i].attribute("source")
        addChild(imageLoader);
        imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
  
   
        
    
}}

function showPicture(event:MouseEvent):void
{
   if(imageLoader)
     {removeChild(imageLoader)}
    imageLoader = new Loader();
    imageLoader.load(new URLRequest(event.target.name));
    imageLoader.x = 200;
    addChild(imageLoader);
    
    
    
}

[Caesar1982]

Pardon me if my english is not so good, I'm a poor French guy, and I just started learning AS(3) as well...so don't get to rough on me ok.. but I really need your help. Anyone.

I have a main flash movie that consists of basically two main layers with one mc on each, one for a background(photoShow_mc), and the second one on top(mainMenus_mc) in which I run most of dynamic areas and scripting related to my menus movieclip buttons...so far nothing too hard there.

Now, by CLICKING one of the menu(IN the first frames of the timeline of mainMenus_mc), it will GOTOANDPLAY the sequence of frame(in mainMenus_mc) requested by frame labels and to stop to frame the next stop (let say in the mid-part of the timeline of mainMenus_mc), where I want it to load a external .swf, that should be removed as the section is closed by calling another sequence of frames again(what about referring to the end of the timeline in mainMenus_mc again), from where the guest is returned to the main frame label where you choose the menus again(beginning of mainMenus_mc).

Now, I've figured out for now that the easiestis by creating an opening sequence for each menu section(which is easiest and better for my purposes too) which bring all to a(many) stop frame where I request a loaderX++ to load the .swf URLattached to the menu section called. So far, I got it all. Now, all the menus get to close with the same closing section sequence. At first try, it was easy because I had only one loader request which I removed by using stage.removeChild(loaderX) on the first frame of the closing sequence. But now with more than 20 sections(which means 20 different .swf to load independently and on different time on the timeline, I just do know where to go from here.

anyway, anyone can help me get over this issue Please. It means a lot to me.
Thx