Dynamic xml based grid gallery - Interesting captions problem

phatmambo · May 11, 2010, 1:13pm

I have a store style website that uses a grid format gallery to display a grid of thumbnail products which can then be clicked.

http://www.ruxx.co.uk/test

I have created xml captions that sit ontop of each thumbnail in the grid. They display fine when static but I wanted them to only display when you mouse over the corresponding thumbnail.

I have code that tweens all of the captions (thumb_caption) to 0% alpha and the tweens to 100% alpha upon MouseOver and then back to 0% alpha on MouseOut.

**At the moment there is one problem - When you hover over ANY thumbnail the caption for the LAST thumbnail fades in not the corresponding one for THAT thumbnail.

Example - if I have 10 thumbnails and I hover over thumbnail 1 the caption for thumbnail 10 appears ontop of thumbnail 10. (not caption 1 over thumbnail 1 like it should!)

I need to target caption 1 for thumbnail 1…caption 2 for thumbnail 2…and so on**…

Here is my code[COLOR=Red] (applicable sections in red)[/COLOR]

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
import com.greensock.*;
import com.greensock.easing.*;



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 myFont:Font = new helvetica();
var container_mc:MovieClip;
var full_mc:MovieClip;
var full_caption:TextField = new TextField();
var full_description:TextField = new TextField();
var full_price:TextField = new TextField();
var medium_price:TextField = new TextField();
var thumb_caption:TextField = new TextField();
var colour_opt1:TextField = new TextField();
var colour_opt2:TextField = new TextField();
var colour_opt1sprite:Sprite = new Sprite();
var colour_opt2sprite:Sprite = new Sprite();
var mySpinBtn:spinbtn_mc = new spinbtn_mc();
var myCloseBtn:closebtn_mc = new closebtn_mc();
var myBuyBtn:buybtn_mc = new buybtn_mc();
var sizes:sizes_available_mc = new sizes_available_mc();
var spin_url:String;
var shop_url:String;
var fullImage:Loader;

var x_counter:Number=0;
var y_counter:Number=0;
var my_tweens:Array=[];
var container_mc_tween:Tween;
var full_tween:Tween;
var tweento360:Tween;
var contact_tween:Tween;
var thumb_caption_tween:Tween;


store_btn.tabEnabled = false;
contact_btn.tabEnabled = false;
terms_btn.tabEnabled = false;
about_btn.tabEnabled = false;


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



store_btn.addEventListener(MouseEvent.CLICK, gotostore);

function gotostore(e:MouseEvent):void {
navigateToURL(new URLRequest("http://s328432197.e-shop.info"));
}



contact_btn.addEventListener(MouseEvent.CLICK, gotocontact);

function gotocontact(event:MouseEvent):void {
    contact_mc.gotoAndPlay(2);
    contact_mc.alpha=.9;
    if (container_mc) {
        setChildIndex(container_mc, 0);
    }
    if (full_mc) {
        setChildIndex(full_mc, 0.1);
        setChildIndex(container_mc, 0);
        TweenLite.to(full_description, 0.2, {alpha:0});
        TweenLite.to(full_caption, 0.2, {alpha:0});
        TweenLite.to(full_price, 0.2, {alpha:0});
        TweenLite.to(medium_price, 0.2, {alpha:0});
        TweenLite.to(colour_opt1sprite, 0.2, {alpha:0});
        TweenLite.to(colour_opt2sprite, 0.2, {alpha:0});
        TweenLite.to(myCloseBtn, 0.2, {alpha:0});
        TweenLite.to(mySpinBtn, 0.2, {alpha:0});
        TweenLite.to(myBuyBtn, 0.2, {alpha:0});
        TweenLite.to(sizes, 0.2, {alpha:0});
        removeChild(myBuyBtn);
        removeChild(myCloseBtn);
        removeChild(mySpinBtn);
        removeChild(sizes);

    }

    contact_mc.contact1.closecontact_btn.addEventListener(MouseEvent.CLICK, closecontact);
    contact_mc.contact1.closecontact_btn.buttonMode=true;

    contact_btn.removeEventListener(MouseEvent.CLICK, gotocontact);
    terms_btn.removeEventListener(MouseEvent.CLICK, gototerms);
    about_btn.removeEventListener(MouseEvent.CLICK, gotoabout);
}

function closecontact(event:MouseEvent):void {
    contact_mc.gotoAndStop(1);
    if (full_mc) {
        setChildIndex(full_mc, 1);
        TweenLite.to(full_description, 0.5, {alpha:1});
        TweenLite.to(full_caption, 0.5, {alpha:1});
        TweenLite.to(full_price, 0.5, {alpha:1});
        TweenLite.to(medium_price, 0.5, {alpha:1});
        TweenLite.to(colour_opt1sprite, 0.5, {alpha:1});
        TweenLite.to(colour_opt2sprite, 0.5, {alpha:1});
        TweenLite.to(myCloseBtn, 0.5, {alpha:1});
        TweenLite.to(mySpinBtn, 0.5, {alpha:1});
        TweenLite.to(myBuyBtn, 0.5, {alpha:1});
        TweenLite.to(sizes, 0.5, {alpha:1});
        addChild(myBuyBtn);
        addChild(myCloseBtn);
        addChild(mySpinBtn);
        addChild(sizes);
        
        
    } else {
        setChildIndex(container_mc, 1);
    }


    contact_btn.addEventListener(MouseEvent.CLICK, gotocontact);
    terms_btn.addEventListener(MouseEvent.CLICK, gototerms);
    about_btn.addEventListener(MouseEvent.CLICK, gotoabout);
}




terms_btn.addEventListener(MouseEvent.CLICK, gototerms);

function gototerms(event:MouseEvent):void {
    terms_mc.gotoAndPlay(2);

    if (container_mc) {
        setChildIndex(container_mc, 0);
    }
    if (full_mc) {
        setChildIndex(full_mc, 0.1);
        setChildIndex(container_mc, 0);
        TweenLite.to(full_description, 0.2, {alpha:0});
        TweenLite.to(full_caption, 0.2, {alpha:0});
        TweenLite.to(full_price, 0.2, {alpha:0});
        TweenLite.to(medium_price, 0.2, {alpha:0});
        TweenLite.to(colour_opt1sprite, 0.2, {alpha:0});
        TweenLite.to(colour_opt2sprite, 0.2, {alpha:0});
        TweenLite.to(myCloseBtn, 0.2, {alpha:0});
        TweenLite.to(mySpinBtn, 0.2, {alpha:0});
        TweenLite.to(myBuyBtn, 0.2, {alpha:0});
        TweenLite.to(sizes, 0.2, {alpha:0});
        removeChild(myBuyBtn);
        removeChild(myCloseBtn);
        removeChild(mySpinBtn);
        removeChild(sizes);

    }

    terms_mc.alpha=.9;
    terms_mc.terms1.closeterms_btn.addEventListener(MouseEvent.CLICK, closeterms);
    terms_mc.terms1.closeterms_btn.buttonMode=true;

    contact_btn.removeEventListener(MouseEvent.CLICK, gotocontact);
    terms_btn.removeEventListener(MouseEvent.CLICK, gototerms);
    about_btn.removeEventListener(MouseEvent.CLICK, gotoabout);
}

function closeterms(event:MouseEvent):void {
    terms_mc.gotoAndStop(1);
    if (full_mc) {
        setChildIndex(full_mc, 1);
        TweenLite.to(full_description, 0.5, {alpha:1});
        TweenLite.to(full_caption, 0.5, {alpha:1});
        TweenLite.to(full_price, 0.5, {alpha:1});
        TweenLite.to(medium_price, 0.5, {alpha:1});
        TweenLite.to(colour_opt1sprite, 0.5, {alpha:1});
        TweenLite.to(colour_opt2sprite, 0.5, {alpha:1});
        TweenLite.to(myCloseBtn, 0.5, {alpha:1});
        TweenLite.to(mySpinBtn, 0.5, {alpha:1});
        TweenLite.to(myBuyBtn, 0.5, {alpha:1});
        TweenLite.to(sizes, 0.5, {alpha:1});
        addChild(myBuyBtn);
        addChild(myCloseBtn);
        addChild(mySpinBtn);
        addChild(sizes);
    

    } else {
        setChildIndex(container_mc, 1);
    }

    contact_btn.addEventListener(MouseEvent.CLICK, gotocontact);
    terms_btn.addEventListener(MouseEvent.CLICK, gototerms);
    about_btn.addEventListener(MouseEvent.CLICK, gotoabout);
}


about_btn.addEventListener(MouseEvent.CLICK, gotoabout);

function gotoabout(event:MouseEvent):void {
    about_mc.gotoAndPlay(2);
    about_mc.about1.my_sp.scrollDrag=true;
    about_mc.alpha=.9;
    if (container_mc) {
        setChildIndex(container_mc, 0);
    }
    if (full_mc) {
        setChildIndex(full_mc, 0.1);
        setChildIndex(container_mc, 0);
        TweenLite.to(full_description, 0.2, {alpha:0});
        TweenLite.to(full_caption, 0.2, {alpha:0});
        TweenLite.to(full_price, 0.2, {alpha:0});
        TweenLite.to(medium_price, 0.2, {alpha:0});
        TweenLite.to(colour_opt1sprite, 0.2, {alpha:0});
        TweenLite.to(colour_opt2sprite, 0.2, {alpha:0});
        TweenLite.to(myCloseBtn, 0.2, {alpha:0});
        TweenLite.to(mySpinBtn, 0.2, {alpha:0});
        TweenLite.to(myBuyBtn, 0.2, {alpha:0});
        TweenLite.to(sizes, 0.2, {alpha:0});
        removeChild(myBuyBtn);
        removeChild(myCloseBtn);
        removeChild(mySpinBtn);
        removeChild(full_description);
        removeChild(full_caption);
        removeChild(full_price);
        removeChild(medium_price);
        removeChild(sizes);
        removeChild(colour_opt1sprite);
        removeChild(colour_opt2sprite);
        
    }

    about_mc.about1.closeabout_btn.addEventListener(MouseEvent.CLICK, closeabout);
    about_mc.about1.closeabout_btn.buttonMode=true;

    contact_btn.removeEventListener(MouseEvent.CLICK, gotocontact);
    terms_btn.removeEventListener(MouseEvent.CLICK, gototerms);
    about_btn.removeEventListener(MouseEvent.CLICK, gotoabout);
}

function closeabout(event:MouseEvent):void {
    about_mc.about1.my_sp.scrollDrag=false;
    about_mc.gotoAndStop(1);
    if (full_mc) {
        setChildIndex(full_mc, 1);
        TweenLite.to(full_description, 0.5, {alpha:1});
        TweenLite.to(full_caption, 0.5, {alpha:1});
        TweenLite.to(full_price, 0.5, {alpha:1});
        TweenLite.to(medium_price, 0.5, {alpha:1});
        TweenLite.to(colour_opt1sprite, 0.5, {alpha:1});
        TweenLite.to(colour_opt2sprite, 0.5, {alpha:1});
        TweenLite.to(myCloseBtn, 0.5, {alpha:1});
        TweenLite.to(mySpinBtn, 0.5, {alpha:1});
        TweenLite.to(myBuyBtn, 0.5, {alpha:1});
        TweenLite.to(sizes, 0.5, {alpha:1});
        addChild(myBuyBtn);
        addChild(myCloseBtn);
        addChild(mySpinBtn);
        addChild(full_description);
        addChild(full_price);
        addChild(medium_price);
        addChild(full_caption);
        addChild(sizes);
        addChild(colour_opt1sprite);
        addChild(colour_opt2sprite);
    } 
    
    else {
        setChildIndex(container_mc, 1);
        }

    contact_btn.addEventListener(MouseEvent.CLICK, gotocontact);
    terms_btn.addEventListener(MouseEvent.CLICK, gototerms);
    about_btn.addEventListener(MouseEvent.CLICK, gotoabout);
}



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();
    myXMLLoader.removeEventListener(Event.COMPLETE,processXML);
    myXMLLoader=null;
}


function createContainer():void {
    container_mc = new MovieClip();
    container_mc.x=my_x;
    container_mc.y=my_y;
    addChild(container_mc);
    setChildIndex(container_mc, 1);
    container_mc.addEventListener(MouseEvent.CLICK,callFull);
    container_mc.buttonMode=true;
}


function callThumbs():void {
    for (var i:Number = 0; i < my_total; i++) {
        var thumb_url=my_images*.@THUMB;
        var thumb_loader = new Loader();
        var format:TextFormat = new TextFormat();

        thumb_loader.load(new URLRequest(thumb_url));
        thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,thumbLoaded);

        thumb_loader.name=i;

        thumb_loader.x = (my_thumb_width)*x_counter;
        thumb_loader.y = (my_thumb_height)*y_counter;

       [COLOR=Red] thumb_caption=new TextField();
        thumb_caption.autoSize="left";
        thumb_caption.text=my_images*.@NAME;
        thumb_caption.name=String(i);
        thumb_caption.selectable=false;
        thumb_caption.embedFonts=true;[/COLOR]

        [COLOR=Red]format.font=myFont.fontName;
        format.color=0xFFFFFF;
        format.size=9;
        format.align="right";
        thumb_caption.setTextFormat(format);

        thumb_caption.x = (thumb_loader.x+my_thumb_width*.5)-(78);
        thumb_caption.y=thumb_loader.y+72;

        container_mc.addChild(thumb_caption);

        if (x_counter+1<columns) {
            x_counter++;
        } else {
            x_counter=0;
            y_counter++;
        }

        [/COLOR][COLOR=Red]TweenLite.to(thumb_caption, 0, {alpha:0});


      [/COLOR][COLOR=Red]  thumb_loader.addEventListener(MouseEvent.MOUSE_OVER, showthumbcaption);
        function showthumbcaption(event:MouseEvent):void {
            TweenLite.to(thumb_caption, 0.5, {alpha:1});
        }

        thumb_loader.addEventListener(MouseEvent.MOUSE_OUT, hidethumbcaption);
        function hidethumbcaption(event:MouseEvent):void {
            TweenLite.to(thumb_caption, 0.5, {alpha:0});[/COLOR]
        }
    }
}


function thumbLoaded(e:Event):void {
    var my_thumb:Loader=Loader(e.target.loader);

    container_mc.addChildAt(my_thumb, 0);
    my_tweens[Number(my_thumb.name)]=new Tween(my_thumb,"alpha",Strong.easeIn,0,1,0.5,true);
    my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded);

    if (x_counter+1<columns) {
        x_counter++;
    } else {
        x_counter=0;
        y_counter++;
    }
}



function callFull(e:MouseEvent):void {

    var full_loader:Loader = new Loader();
    fullImage=full_loader;
    var full_url=my_images[e.target.name].@FULL;
    spin_url=my_images[e.target.name].@LINK;
    shop_url=my_images[e.target.name].@SHOP;


    full_loader.load(new URLRequest(full_url));
    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
    full_caption.text=my_images[e.target.name].@NAME;
    full_description.text=my_images[e.target.name].@DESCRIPTION;
    full_price.text=my_images[e.target.name].@LARGEPRICE;
    medium_price.text=my_images[e.target.name].@MEDIUMPRICE;
    colour_opt1.text=my_images[e.target.name].@COLOPT1;
    colour_opt2.text=my_images[e.target.name].@COLOPT2;


    container_mc.removeEventListener(MouseEvent.CLICK,callFull);
    container_mc.buttonMode=false;
}



function fullLoaded(e:Event):void {


    var container_mc:MovieClip;
    full_mc = new MovieClip();

    addChild(full_mc);
    var my_loader:Loader=Loader(e.target.loader);
    TweenLite.to(my_loader, 0, {alpha:0});
    full_mc.addChild(my_loader);
    TweenLite.to(my_loader, 1, {alpha:1});
    my_loader.x=0;
    my_loader.y=60;


    addChild(myBuyBtn);
    myBuyBtn.x=745;
    myBuyBtn.y=140;
    myBuyBtn.buttonMode=true;
    myBuyBtn.addEventListener(MouseEvent.CLICK,gotoShop);
    TweenLite.from(myBuyBtn, 2.3, {alpha:0});

    addChild(myCloseBtn);
    myCloseBtn.x=745;
    myCloseBtn.y=170;
    myCloseBtn.buttonMode=true;
    myCloseBtn.addEventListener(MouseEvent.CLICK,removeFull);
    TweenLite.from(myCloseBtn, 2.3, {alpha:0});

    addChild(mySpinBtn);
    mySpinBtn.x=745;
    mySpinBtn.y=155;
    mySpinBtn.buttonMode=true;
    mySpinBtn.addEventListener(MouseEvent.CLICK,play360);
    TweenLite.from(mySpinBtn, 2.3, {alpha:0});
    
    


    function play360(event:MouseEvent):void {
        navigateToURL(new URLRequest(spin_url));
    }
    
    function gotoShop(event:MouseEvent):void {
        navigateToURL(new URLRequest(shop_url));
    }


    var format:TextFormat = new TextFormat();
    format.font=myFont.fontName;
    format.size=13;
    format.color=0xA3A2A0;
    format.align="left";

    full_caption.x=55;
    full_caption.y=130;
    full_caption.selectable=false;
    full_caption.embedFonts=true;
    full_caption.setTextFormat(format);
    addChild(full_caption);
    TweenLite.from(full_caption, 2, {alpha:0});


    var format2:TextFormat = new TextFormat();
    format2.font=myFont.fontName;
    format2.size=10;
    format2.color=0xA3A2A0;
    format2.align="left";

    full_description.x=55;
    full_description.y=150;
    full_description.width=150;
    full_description.height=200;
    full_description.border=false;
    full_description.multiline=true;
    full_description.wordWrap=true;
    full_description.selectable=false;
    full_description.embedFonts=true;
    full_description.setTextFormat(format2);
    addChild(full_description);
    TweenLite.from(full_description, 2.3, {alpha:0});


    full_price.x=55;
    full_price.y=250;
    full_price.selectable=false;
    full_price.embedFonts=true;
    full_price.setTextFormat(format2);
    addChild(full_price);
    TweenLite.from(full_price, 2.6, {alpha:0});
    
    
    medium_price.x=55;
    medium_price.y=265;
    medium_price.selectable=false;
    medium_price.embedFonts=true;
    medium_price.setTextFormat(format2);
    addChild(medium_price);
    TweenLite.from(medium_price, 2.6, {alpha:0});
    
    addChild(sizes);
    sizes.x=54;
    sizes.y=335;
    sizes.buttonMode=false;
    TweenLite.from(sizes, 2.6, {alpha:0});
    
    
    colour_opt1.selectable=false;
    colour_opt1.embedFonts=true;
    colour_opt1.setTextFormat(format2);
    colour_opt1.mouseEnabled = false;
    //Sprite
    colour_opt1sprite.buttonMode=true;
    colour_opt1sprite.x=55;
    colour_opt1sprite.y=350;
    colour_opt1.width=50;
    colour_opt1.height=15;
    colour_opt1sprite.addChild(colour_opt1);
    addChild(colour_opt1sprite);
    
    
    
    colour_opt2.selectable=false;
    colour_opt2.embedFonts=true;
    colour_opt2.setTextFormat(format2);
    colour_opt2.mouseEnabled = false;
    //Sprite
    colour_opt2sprite.buttonMode=true;
    colour_opt2sprite.x=55;
    colour_opt2sprite.y=362;
    colour_opt2.width=50;
    colour_opt2.height=15;
    colour_opt2sprite.addChild(colour_opt2);
    addChild(colour_opt2sprite);
    
    

    TweenLite.from(colour_opt1sprite, 2.6, {alpha:0});
    TweenLite.from(colour_opt2sprite, 2.6, {alpha:0});


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



function removeFull(e:MouseEvent):void {
    var my_loader:Loader=fullImage;
    full_tween=new Tween(my_loader,"alpha",Strong.easeOut,1,0,1,true);
    full_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
    removeChild(full_description);
    removeChild(full_caption);
    removeChild(full_price);
    removeChild(medium_price);
    removeChild(colour_opt1sprite);
    removeChild(colour_opt2sprite);
    removeChild(sizes);
    removeChild(myCloseBtn);
    removeChild(mySpinBtn);
    removeChild(myBuyBtn);
}


function tweenFinished(e:TweenEvent):void {
    var my_loader:Loader=Loader(e.target.obj);
    my_loader.unload();
    full_mc.removeChild(my_loader);
    removeChild(full_mc);


    full_mc=null;
    container_mc.addEventListener(MouseEvent.CLICK, callFull);
    container_mc.buttonMode=true;
    var my_tween:Tween=Tween(e.target);
    my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
    setChildIndex(container_mc, 1);
}


function untweenFinished(e:TweenEvent):void {
    removeChild(full_mc);
    var tweento360:Tween=Tween(e.target);
    tweento360.removeEventListener(TweenEvent.MOTION_FINISH, untweenFinished);
}

I just need to get this to work! I hope Ive described this in a way that you guys can understand. It must only be a little addition to the code??

Is there anyone that could help?

Topic		Replies	Views
XML Driven Gallery - adding caption to each photo? flash	1	72	July 11, 2008
Grid XML gallery flash	0	61	February 3, 2010
XML Caption onRollOver flash	0	41	August 21, 2005
Got greeding and got myself lost...please help flash	0	80	December 4, 2004
Caption photogallery	0	43	May 1, 2009

Dynamic xml based grid gallery - Interesting captions problem

Follow:

Popular

Loose Ends

Dynamic xml based grid gallery - Interesting captions problem

Related topics

Follow:

Popular

Loose Ends