[CS3] How to get a grandchild play nicely with a child? Plus, other questions

programming flash
1

Ok so my lame attempt at humor may not make any sense… so here’s the deal C:-)

I’m making a thumbnail grid (based on a tutorial) that feeds from an XML file and hence the grid is dynamically created. Each thumbnail has an event listener attached at runtime according to the XML data in order to add a child for the FULL image to display on top. But what I wanna add to this is to add a Movieclip child with a rollover animation to each thumbnail image on top. Here’s a small illustration of what i’m trying to do (for those who didnt understand):

Here’s the XML code:

<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="2" XPOSITION="30" YPOSITION="30" WIDTH="200" HEIGHT="94">
<IMAGE FULL="fullimages/1.png" THUMB="thumbs/1.png" CLIENT="SINCO" DATE="01.02.2008" TYPE="IDENTITY"  />
<IMAGE FULL="fullimages/2.png" THUMB="thumbs/2.png" CLIENT="ARCH" DATE="01.02.2008" TYPE="POSTER/IDENTITY"  />
<IMAGE FULL="fullimages/3.png" THUMB="thumbs/3.png" CLIENT="DSAF" DATE="01.02.2008" TYPE="IDENTITY"  />
<IMAGE FULL="fullimages/4.png" THUMB="thumbs/4.png" CLIENT="KANCHO" DATE="01.02.2008" TYPE="POSTER"  />
</GALLERY>

And here’s the AS code

var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;

var container_mc:MovieClip;
var anim_mc:boxAnim = new boxAnim();

var x_counter:Number = 0;
var y_counter:Number = 0;

// ------ Stage Properties ------ \\

stage.align = StageAlign.TOP_LEFT; 
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, stageResize);

// ------ URL Loader ------ \\
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

// ------ Process XML Data ------ \\
function processXML(e:Event):void{
    var myXML:XML = new XML(e.target.data);
    
    columns = myXML.@COLUMNS;
    my_x = myXML.@XPOSITION;
    my_y = myXML.@YPOSITION;
    my_thumb_width = myXML.@WIDTH;
    my_thumb_height = myXML.@HEIGHT;
    my_images = myXML.IMAGE;
    my_total = my_images.length();

    createContainer();
    callThumbs();
}

// ------ Create Container MC ------ \\
function createContainer():void{
    container_mc = new MovieClip();
    container_mc.x = my_x;
    container_mc.y = my_y
    addChild(container_mc);
    addChild(anim_mc);
    
    container_mc.addEventListener(MouseEvent.CLICK, callFull);
}

// ------ Call the thumbnails ------ \\
function callThumbs():void{
    for (var i:Number = 0; i < my_total; i++){
        var thumb_url = my_images*.@THUMB;
        var thumb_loader = new Loader();
        thumb_loader.load(new URLRequest(thumb_url));
        thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
        
        thumb_loader.name = i;
        
        thumb_loader.x = (my_thumb_width + 10) * x_counter;
        thumb_loader.y = (my_thumb_height + 10) * y_counter;
        
        if (x_counter+1 < columns){
            x_counter++;
        } else {
            x_counter = 0;
            y_counter ++;
        }
    }
}

// ------ Call the full image ------ \\
function callFull(e:MouseEvent):void{
    var full_loader:Loader = new Loader();
    var full_url = my_images[e.target.name].@FULL;
    full_loader.load(new URLRequest(full_url));
    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
    
    container_mc.removeEventListener(MouseEvent.CLICK, callFull);
}

// ------ Place the thumbnails ------ \\
function thumbLoaded(e:Event):void{
    var my_thumb:Loader = Loader(e.target.loader);
    container_mc.addChild(my_thumb);
}

// ------ Place the full image ------ \\
function fullLoaded(e:Event):void{
    var my_loader:Loader = Loader(e.target.loader);
    addChild(my_loader);
    my_loader.x = (stage.stageWidth - my_loader.width) / 2;
    my_loader.y = (stage.stageHeight - my_loader.height) / 2;
    my_loader.addEventListener(MouseEvent.CLICK, removeFull);
}

// ------ Remove the full image ------ \\
function removeFull(e:MouseEvent):void{
    var my_loader:Loader = Loader(e.currentTarget);
    my_loader.unload();
    removeChild(my_loader);
    
     container_mc.addEventListener(MouseEvent.CLICK, callFull);
}

// ------ Stage resize ------ \\
function stageResize(e:Event):void{
        trace("Resize");
}

I’m also interested in making this thumbnail gallery fully resizable (hence, you’ll see at the very bottom a function for the stageResize…) to make something like this:

But i have no idea how to get the grid dynamically adjusted when the Event.RESIZE event is called on the stage… hence, you’ll notice the lame stageResize function i made only traces out a string of characters :smiley:

If someone can give me a few tips on this i’d really appreciate it.