AS3.0 xml photo gallery

Question

hi I have problem about xml dynamic photo gallery.Gallery have 2 part.First of scrolling panel(with mouse control) and second one is movie panel that big picture show in it when click thumbnails from scrolling panel.When try to test movie can't see anything in player.There is no compiler errors or anything else. If anyone can check codes I'll be very happy:)thx for help any sorry for wasting your time.

import caurina.transitions.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

var full_tween:Tween;
var full_mc:MovieClip;
var my_images:XMLList;
var my_total:Number;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML(); 
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
    trace("xml loading complete");
    xmlData = new XML(e.target.data);
    //trace(xmlData.image);
    my_images = xmlData.IMAGE;
    my_total = my_images.length();

}

var konum:Object = new Object();
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 10;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;
konum.dikey = 450 ;
scroller.y = konum.dikey;

//build scroller from xml
function buildScroller():void{
    trace("build Scroller");
    for (var item:uint = 0; item < my_total; item++ )  {
        var thumb_url = my_images[item].@THUMB;
        var thisOne:MovieClip = new MovieClip();

        //outline
        var blackBox:Sprite = new Sprite();
        blackBox.graphics.beginFill(0xFFFFFF);
        blackBox.graphics.drawRect( -1, -1, 142, 107);
        blackBox.alpha = thumbFadeOut;
        thisOne.addChild(blackBox);
        thisOne.blackBox = blackBox;

        thisOne.x = thisOne.myx = (140 + padding) * item;
        thisOne.itemNum = item;

        //image container
        var thisThumb:Sprite = new Sprite();
        //add image
        var ldr:Loader = new Loader();
        ldr.load(new URLRequest(thumb_url));

        //assign event listeners for Loader
        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
        ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        thisThumb.addChild(ldr);
        thisOne.addChild(thisThumb);

        //create listeners for this thumb
        thisOne.buttonMode = true;
        thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
        thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
        thisOne.addEventListener(MouseEvent.CLICK, callFull);

        //add item
        scroller.addChild(thisOne);
    }

    scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
    trace("termination of build scroller");
}

function overScrollerItem(e:MouseEvent):void {
    //trace("over" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
}
function outScrollerItem(e:MouseEvent):void {
    //trace("out" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
}
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);


}

function fullLoaded(e:Event):void {
    full_mc = new MovieClip();
    addChild(full_mc);
    var my_loader:Loader = Loader(e.target.loader);
    full_mc.addChild(my_loader);


    my_loader.x = (stage.stageWidth - my_loader.width)/2;
    my_loader.y = (stage.stageHeight - my_loader.height)/2;

    my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded);
}



function completeHandler(e:Event):void {
    //trace("thumbnail complete "+e.target.loader.parent.parent.name);
    //size image into scroller
    resizeMe(e.target.loader.parent, 140, 105, true, true, false);
    Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
    trace("thumbnail error="+e);
}


//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
    if (centerHor) {
        mc.x = (maxW - mc.width) / 2;
    }
    if (centerVert){
        mc.y = (maxH - mc.height) / 2;
    }
}

function moveScrollerThumbs(e:Event):void {
    if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
        if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
        }
        else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
        }
        else {
            speed = 0;
        }
        scroller.x += speed;

        //scroller limits
        if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
            scroller.x = -scroller.width + stage.stageWidth - padding;
        }
        else if (scroller.x > padding) { //if scrolled to far right
            scroller.x = padding;
        }
    }
}

you can check from file

welcome to stackoverflow! your code is helpful, but can you also describe a little bit about what you've looked at already? — Corley Brigman, Feb 07 '14 at 17:18

Marcela · Accepted Answer · 2014-02-10T19:45:45.343

I downloaded your .rar (which differs slightly from the code example you posted above) and did the very bare minimum to get it working, I've added my own comments marked with NOTE: in the new code:

import caurina.transitions.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.display.Sprite;
import flash.utils.Dictionary;
import flash.display.MovieClip;
import flash.display.Loader;

var full_tween:Tween;
var full_mc:MovieClip = new MovieClip();
var my_images:XMLList;
var my_total:Number;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML(); 
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
    trace("xml loading complete");
    xmlData = new XML(e.target.data);
    //trace(xmlData.image);
    my_images = xmlData.image; // NOTE: e4x (the query language for XML) is case-sensitive. In your XML file, your elements are not capitalized, so I changed this to lowercase
    my_total = my_images.length();

    // NOTE: You were never calling buildScroller, so I added that once the XML has been loaded
    buildScroller();
}

var konum:Object = new Object();
var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 10;
var thumbFadeOut:Number = .2;
var thumbFadeIn:Number = 1;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
var fullSizedImages:Dictionary = new Dictionary(); // NOTE: create a Dictionary to store the full-sized images
this.addChild(full_mc); // NOTE: placing the imageHolder behind the scroller
this.addChild(scroller);
scroller.y = scroller.x = padding;
konum.dikey = 450 ;
scroller.y = konum.dikey;

//build scroller from xml
function buildScroller():void{
    trace("build Scroller");
    for (var item:uint = 0; item < my_total; item++ )  {
        var thumb_url = my_images[item].@src;  // NOTE: your XML didn't actually have a property called thumb, I changed it to src here
        var thisOne:MovieClip = new MovieClip();

        //outline
        var blackBox:Sprite = new Sprite();
        blackBox.graphics.beginFill(0xFFFFFF);
        blackBox.graphics.drawRect( -1, -1, 142, 107);
        blackBox.alpha = thumbFadeOut;
        thisOne.addChild(blackBox);
        thisOne.blackBox = blackBox;

        thisOne.x = thisOne.myx = (140 + padding) * item;
        thisOne.itemNum = item;

        //image container
        var thisThumb:Sprite = new Sprite();
        //add image
        var ldr:Loader = new Loader();
        ldr.load(new URLRequest(thumb_url));

        //assign event listeners for Loader
        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
        ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        thisThumb.addChild(ldr);
        thisOne.addChild(thisThumb);

        //create listeners for this thumb
        thisOne.buttonMode = true;
        thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
        thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
        thisOne.addEventListener(MouseEvent.CLICK, callFull);
        thisOne.name = my_images[item].@title;  // NOTE: later on in, in your click handler, you're attempting to reference the name of the thumbnail, but you'd never set it.

        //add item
        scroller.addChild(thisOne);
    }

    scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
    trace("termination of build scroller");
}

function overScrollerItem(e:MouseEvent):void {
    //trace("over" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
}
function outScrollerItem(e:MouseEvent):void {
    //trace("out" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
}
function callFull(e:MouseEvent):void {
    if(fullSizedImages[e.currentTarget]) // NOTE: check to see if the image has already been loaded
    {
        // NOTE: if the image already exists, just pass it to the function that displays it
        displayFullImage(fullSizedImages[e.currentTarget]);
        return; // NOTE: don't continue with the rest of the function
    }
    var full_loader:Loader = new Loader();
    fullSizedImages[e.currentTarget]  = full_loader;
    var full_url = my_images.(@title == e.currentTarget.name).@url; // NOTE: here, you were trying to access an XML item via the target's name, you were also trying to access a property that didn't exist (FULL). I changed this line to look up the correct XML item via the currentTarget's name and I changed the property to url
    full_loader.load(new URLRequest(full_url));
    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);


}

function fullLoaded(e:Event):void {
    var my_loader:Loader = Loader(e.target.loader);
    my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded);

    // NOTE: refactored this portion into a separate function so it can be called if the loader already exists
    displayFullImage(my_loader);
}

function displayFullImage(loader:Loader):void{
    full_mc.removeChildren(); // NOTE: remove the item that already existed
    full_mc.addChild(loader);

    loader.x = (stage.stageWidth - loader.width)/2;
    loader.y = (stage.stageHeight - loader.height)/2;
}



function completeHandler(e:Event):void {
    //trace("thumbnail complete "+e.target.loader.parent.parent.name);
    //size image into scroller
    resizeMe(e.target.loader.parent, 140, 105, true, true, false);
    Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
    trace("thumbnail error="+e);
}


//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = maxW;
    mc.height = maxH;
    if (constrainProportions) {
        mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    }
    if (centerHor) {
        mc.x = (maxW - mc.width) / 2;
    }
    if (centerVert){
        mc.y = (maxH - mc.height) / 2;
    }
}

function moveScrollerThumbs(e:Event):void {
    if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
        if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
        }
        else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
            speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
        }
        else {
            speed = 0;
        }
        scroller.x += speed;

        //scroller limits
        if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
            scroller.x = -scroller.width + stage.stageWidth - padding;
        }
        else if (scroller.x > padding) { //if scrolled to far right
            scroller.x = padding;
        }
    }
}

Even after these minor fixes, there are still some issues. For example, some of the images are too large, so when they're loaded in the main window, they cover up the thumbnail scroller.

EDIT: I've updated the code above to remove the existing image before showing the new one. Please note that, again, I've done the very bare minimum to accomplish what you wanted. You should definitely look into optimizing this code. For example, you shouldn't be loading the full size image every time the thumbnail is clicked. You should store the images that were already loaded so that you can just add and remove them from the display list.

SECOND EDIT: I've shown you how you can store the images that have already been loaded in a Dictionary.

1 more thing how can I unload big picture when new big picture open? — posetcayiii, Feb 08 '14 at 12:53
I have updated the code, please heed my suggestions about not loading the images over and over. — Marcela, Feb 08 '14 at 18:03
thx again.I'll try to do your suggestion thx again and sorry for wasting time. — posetcayiii, Feb 08 '14 at 18:31
You're not wasting my time. I'm happy to help. If you found the answer helpful, please mark it as correct. — Marcela, Feb 08 '14 at 18:55
I try store images but cant do it can you give advice how can I do? — posetcayiii, Feb 10 '14 at 19:21

AS3.0 xml photo gallery

1 Answers1