Loading images and text from xml in same mc

1

Hi all,
Im somewhat new to xml and flash, but im understanding it more and more as i mess with it. Im designing a portfolio site and my goal is to display a thumbnail of the art with a description to the right of it loaded from my .xml file.

here’s an example:
http://flashden.net/files/26420/index.html
*if you click on portfolio at the top and click on any of the links that come up you will see what im talking about. *

I feel like this is something fairly easy to do, but im having trouble figuring out the actionscript to link these 2 elements. I’ve had luck loading images in empty movie clips linked from my .xml , but how can i get the images and text to show up with each other.

im assuming the description is in the same path as the image in the .xml file.

here’s an example of my .xml

<gallery>
<image thumb_url="thumb1.jpg" full_url="image1.jpg" title="this is my first description"/>
<image thumb_url="thumb2.jpg" full_url="image2.jpg" title="this is my second description/>
<image thumb_url="thumb3.jpg" full_url="image3.jpg" title="this is my third description" />
</gallery>

thanks for any help.

2

here’s some basic code that should work in your situation and you can adapt to your display mechanism:

spacing=50;  //space between clips horizontally

myXML=new XML();
myXML.ignoreWhite=true;
myXML.onLoad=function(success){
if(success){
nodes=this.firstChild.childNodes;
for(i=0; i<node.length; i++){
//i'm using attachMovie here (attaching to an empty clip on stage called 'holderClip', you can do however you want
item=holderClip.attachMovie("dClip", "dClip"+i, i);  //dClip is a clip (in the library with export linkage) containing an empty mc and a text box
item.imageHolder.loadMovie(nodes*.attributes.thumb_url);
item.dText.text=nodes*.attributes.title;  //put a dynamic text box inside the item clip, next to the photo with instance name 'dText'
item._x=spacing * i;  //you can play around here and assign spacing however you want.  the way i have here is just spacing them out according to a width specified in the 'spacing' variable
item.link=nodes*.attributes.full_url;   //you may want to check if you can have an underscore in an XML attribute name...  if it works, then no problem.
item.hitButton.onRelease=function(){   //put an invisible button on top of pic/description
getURL(this._parent.link, "_self");
}
item.hitButton.onRollOver=function(){
//you can do whatever here, i just assume you are animating inside the clip itself
this._parent.gotoAndPlay("over");
}

item.hitButton.onRollOut=function(){
//you can do whatever here, i just assume you are animating inside the clip itself
this._parent.gotoAndPlay("out");
}

}
 
}else{
trace("xml error");
//put code to handle xml load problem here
}
}

see, relatively easy once you get the hang of it. you simply loop through the nodes and assign values to each clip as far as image to load, what to do on rollOvers, etc. The loop is key and you could also use it to store info in an array for later use or in other ways…

hope this helps!

3

thanks for the quick reply! Seems like it will be very beneficial to me. Unfortunately im a little confused. Do you mind breaking the code down a little more.

Heres an idea of the code im currently working with (mostly found and constructed from various tutorials) in case this helps:


import mx.transitions.Tween;
import mx.transitions.easing.*;

var myGalleryXML = new XML();
myGalleryXML.ignoreWhite = true;
myGalleryXML.load("gallery.xml");
//controls spacing
var thumb_spacing = 70;

myGalleryXML.onLoad = function() {
    _root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
    _root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
    _root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
    _root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;



    _root.myImages = myGalleryXML.firstChild.childNodes;
    _root.myImagesTotal = myImages.length;

    _root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
    _root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

    _root.full_x = myGalleryXML.firstChild.attributes.full_x;
    _root.full_y = myGalleryXML.firstChild.attributes.full_y;
   
    callThumbs();
    createMask();
    scrolling();
 

};

function callThumbs() {
    _root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
    container_mc._x = _root.gallery_x;
    //controls the spacing..
    container_mc._y = i*thumb_spacing;


    var clipLoader = new MovieClipLoader();
    var preloader = new Object();
    clipLoader.addListener(preloader);

    for (i=0; i<myImagesTotal; i++) {
        thumbURL = myImages*.attributes.thumb_url;
        myThumb_mc = container_mc.createEmptyMovieClip(i, container_mc.getNextHighestDepth());
        //controls the spacing
        myThumb_mc._y = _root.thumb_spacing*i++;
        clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);

        preloader.onLoadStart = function(target) {
            target.createTextField("my_txt",target.getNextHighestDepth,0,0,100,20);
            target.my_txt.selectable = false;
        };

        preloader.onLoadStart = function(description) {
            target.createTextField("my_description",target.getNextHighestDepth,2,2,200,30);
        
        };

        preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
            target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
        };

        preloader.onLoadComplete = function(target) {
            new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
            target.my_txt.removeTextField();
            target.onRelease = function() {
                callFullImage(this._name);
            };

            target.onRollOver = function() {
                this._alpha = 50;
            };

            target.onRollOut = function() {
                this._alpha = 100;
            };


        };
    }
}



function callFullImage(myNumber) {

    myURL = myImages[myNumber].attributes.full_url;
    myTitle = myImages[myNumber].attributes.title;
    _root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
    fullImage_mc._x = _root.full_x;
    fullImage_mc._y = _root.full_y;

    var fullClipLoader = new MovieClipLoader();
    var fullPreloader = new Object();
    fullClipLoader.addListener(fullPreloader);

    fullPreloader.onLoadStart = function(target) {
        target.createTextField("my_txt",fullImage_mc.getNextHighestDepth,10,10,200,20);
        target.my_txt.selectable = false;
    };

    fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
        target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
    };

    fullPreloader.onLoadComplete = function(target) {
        new Tween(target, "_alpha", Strong.easeOut, 0, 100, 1, true);
        target.my_txt.text = myTitle;
    };

    fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);
    



}

function createMask() {

    _root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());

    mask_mc._x = _root.gallery_x;
    mask_mc._y = _root.gallery_y;

    mask_mc.beginFill(0x000000,100);
    mask_mc.lineTo(_root.gallery_width,0);
    mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
    mask_mc.lineTo(0,_root.gallery_height);
    mask_mc.lineTo(0,0);

    container_mc.setMask(mask_mc);

}




function scrolling() {
    _root.onEnterFrame = function() {

        container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*15;

        if (container_mc._y>mask_mc._y) {
            container_mc._y = mask_mc._y;
        }

        if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc._height))) {
            container_mc._y = mask_mc._y-(container_mc._height-mask_mc._height);
        }

    };
}

.xml


<gallery thumb_width="120" thumb_height="120" gallery_width="120" gallery_height="400" gallery_x="50" gallery_y="50" full_x="220" full_y="50">

<image thumb_url="thumb1.jpg" full_url="image1.jpg" title="title 1"/>
<image thumb_url="thumb2.jpg" full_url="image2.jpg" title="title 2"/>
<image thumb_url="thumb3.jpg" full_url="image3.jpg" title="title 3" />
<image thumb_url="thumb4.jpg" full_url="image4.jpg" title="title 4" />
<image thumb_url="thumb5.jpg" full_url="image5.jpg" title="title 5" />
</gallery>

or maybe you have an idea what to edit in my current code.
my ideal goal is to add a description for each thumb into my .xml which can be edited easily and loaded next to each thumb into empty text fields similar to how the images load into empty movie clips.

again im a little green when it comes to coding, but i really want to get more into it.
i appreciate all the help!

4

oh! i got it. it makes perfect sense now. you definately pointed me in the right direction
thanks for your time and help!