Help beginner loading text in xml-gallery

[zebratan]

cs3/as3

First of all I am not very skilled in as3 programming, but I'm nevertheless trying to create my own homepage to hold my portfolio against all odds. I'm a graphic designer and not a programmer so please keep that in mind when answering. That said I'll of course appreciate any help I may get.

My problem is this:

I've found this tutorial http://www.flashmagazine.com/Tutoria...photo_gallery/ and would like to use it on my site. It's all well and and good except I need to expand on it, cause I need the ability to load some text with the big images (not the thumbnails). How would I go about loading such a text from the xml file?

I need help adding this functionality to the coding of the tutorial.

The code for the tutorial:

import fl.containers.UILoader;
import caurina.transitions.*;

//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
//-------- the photoLoader container-------
var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,550,330);
loaderHolder.graphics.endFill();
loaderHolder.x = 1000;
loaderHolder.y = 10;
sprite.addChild(loaderHolder);
//-------- loads the big photo-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 540;
photoLoader.height = 320;
photoLoader.y = 5;
photoLoader.x = 5;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);

/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
    myXML = XML(event.target.data);
    xmlList = myXML.children();
    for (var i:int=0; i<xmlList.length(); i++) {
        var picURL:String = xmlList[i].url;
        var picName:String = xmlList[i].big_url;
        arrayURL.push(picURL);
        arrayName.push(picName);
        holderArray[i] = new Thumbnail(arrayURL[i],i,arrayName[i]);
        holderArray[i].addEventListener(MouseEvent.CLICK,onClick);
        holderArray[i].name = arrayName[i];
        holderArray[i].buttonMode = true;
        if (i<nrColumns) {
            holderArray[i].y = 65;
            holderArray[i].x = i*110+65;
        } else {
            holderArray[i].y = holderArray[i-nrColumns].y+110;
            holderArray[i].x = holderArray[i-nrColumns].x;
        }
        thumbsHolder.addChild(holderArray[i]);
    }
}
//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
    photoLoader.source = event.currentTarget.name;
    Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInElastic"});
    Tweener.addTween(loaderHolder, {x:10, time:1, transition:"easeInElastic"});
    Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
    Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
    Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInElastic"});
    Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeInElastic"});
    Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
    Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
} 

The structure of the xml file:

<?xml version="1.0" encoding="utf-8"?>
<images>
    <image>
        <url>pics/img_1.png</url>
        <big_url>big_pics/img_1.png</big_url>
    </image>
    <image>
        <url>pics/img_2.png</url>
        <big_url>big_pics/img_2.png</big_url>
    </image>
</images>

A guy named Kragekjaer suggested this on a Danish forum, but it didn't work. I'm not sure why:

Put a note for every big picture in your xml-file like this: <picTxt>the text here</picTxt>

create an array to hold these, like: var picTxtArray:Array = new Array();

add this to the fileLoaded set:

var picText:String = xmlList.picTxt;
picTxtArray.push(picText);

Please help me. I would be grateful beyond words. I'm really stuck here.
If you need anything else from me just say so...

[cancerinform]

Kragekjaer gave you the answer. Just do what he said and then tell us what precisely did not work.

[zebratan]

I'm sure he has given me the answer and I'm sure I'm making some stupid obvious mistake, but I have no idea what it is.

All I can say is that when I add the suggested lines of code and alter the xml-file I get no errors publishing and everything seems to work, except nothing happens in the text import department...

I've attached one of my attempts to get it to work with the added lines if anyone wants to take a look. (split in two)

[cancerinform]

You need to make a couple of changes. In the Thumbnail.as change private to public for id. Now you can reference the id in the onClick function:
function onClick (event:MouseEvent):void
{
var myID:int = event.currentTarget.id;
trace(picTxtArray[myID]);

[zebratan]

Thanks a lot for the answer/help cancerinform.

• I've altered the line: private var id:int; to: public var id:int; in the thumbnail.as
• I've put the two lines :var myID:int = event.currentTarget.id; and trace(picTxtArray[myID]); in the function onClick (event:MouseEvent):void

Did I understand that part correctly?

It makes the right output: the text here and shows no errors
but the text doesn't show in the dynamic textfield (on stage). There must be something, probably a simple thing, I'm missing...?

[cancerinform]

You have to load it of course into the textfield in the same way as it is written in the trace.

[zebratan]

YES, IT FINALLY WORKS!!! Thanks a million, cancerinform! I was so close to giving up on the whole thing,. Now I just gotta figure out how to remove the text again, but that's my headache and the worst part seems over. Thanks again for your time!

[zebratan]

Damn. Too good to be true. When I add more pictures and load a big picture it loads/displays the text from all pictures at once (the entire array) plus the the xml coding, like this:

<picTxt>the text here picture 1</picTxt>
<picTxt>the text here picture 2</picTxt> 

How can I make it load only the text that matches the chosen picture?

[cancerinform]

What are the code lines you are using to load the text?

[zebratan]

I put this in the onClick function: textbox.text = (picTxtArray[myID]);

"textbox" is the instancename of the dynamic textfield the picture-text appears in.

[zebratan]

Hey

I'm sorry to double post on this, but I'm still hopelessly stuck. The problem haven't changed in spite of countless fruitless attempts.

I am now able to call in text from the xml-file along with the "big" images, but instead of only loading the text that fits the image I've loaded, it loads the entire array of text.

I'll appreciate any help I can get...

[cancerinform]

You should get only one text, since picTxtArray[myID] would select the position in the array. Have you done some traces to check what myID gives or have you traced the whole array?

[zebratan]

Unfortunately I'm not sure how to do that. The output I get from "trace(picTxtArray[myID]);" with two images in the xml-file as below is <picTxt>the text here</picTxt>
<picTxt>the text here 2</picTxt>

Perhaps this is easier. If it should work as it is, I must be making a simple slip-up somewhere, because it doesn't. I hope it's not too confusing to look at...

This is my code as it looks with the alterations:

import fl.containers.UILoader;
import caurina.transitions.*;

//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//---my added array for picture-text---
var picTxtArray:Array = new Array();
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
//-------- the photoLoader container-------
var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,550,330);
loaderHolder.graphics.endFill();
loaderHolder.x = 1000;
loaderHolder.y = 10;
sprite.addChild(loaderHolder);
//-------- loads the big photo-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 540;
photoLoader.height = 320;
photoLoader.y = 5;
photoLoader.x = 5;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);

/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
    myXML = XML(event.target.data);
    xmlList = myXML.children();
    for (var i:int=0; i<xmlList.length(); i++) {
        var picURL:String = xmlList[i].url;
        var picName:String = xmlList[i].big_url;
        //---added the two lines below---
        var picText:String = xmlList.picTxt;
        picTxtArray.push(picText); 
        arrayURL.push(picURL);
        arrayName.push(picName);
        holderArray[i] = new Thumbnail(arrayURL[i],i,arrayName[i]);
        holderArray[i].addEventListener(MouseEvent.CLICK,onClick);
        holderArray[i].name = arrayName[i];
        holderArray[i].buttonMode = true;
        if (i<nrColumns) {
            holderArray[i].y = 65;
            holderArray[i].x = i*110+65;
        } else {
            holderArray[i].y = holderArray[i-nrColumns].y+110;
            holderArray[i].x = holderArray[i-nrColumns].x;
        }
        thumbsHolder.addChild(holderArray[i]);
    }
}
//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
    //------reference the id-----
    var myID:int = event.currentTarget.id;
    trace(picTxtArray[myID]);
    //-----loadtext----------
    textbox.text = (picTxtArray[myID]);
    photoLoader.source = event.currentTarget.name;
    Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInElastic"});
    Tweener.addTween(loaderHolder, {x:10, time:1, transition:"easeInElastic"});
    Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
    Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
    textbox.text = "";
    Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInElastic"});
    Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeInElastic"});
    Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
    Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
} 

The thumbnail.as:

package {
    import flash.display.Sprite;
    import fl.containers.UILoader;
    import caurina.transitions.*;
    import flash.events.MouseEvent;

    public class Thumbnail extends Sprite {
        private var nume:String;
        private var url:String;
        public var id:int;
        private var loader:UILoader;

        function Thumbnail(source:String,itemNr:int,numeThumb:String):void {
            url = source;
            id = itemNr;
            this.nume = numeThumb;
            drawLoader();
            addEventListener(MouseEvent.MOUSE_OVER,onOver);
            addEventListener(MouseEvent.MOUSE_OUT,onOut);
            scaleThumb();
        }
        
        private function drawLoader():void {
            loader = new UILoader();
            loader.source = url;
            loader.mouseEnabled = false;
            loader.x = -50;
            loader.y = -50;
            addChild(loader);

        }
        private function onOver(event:MouseEvent):void {
            Tweener.addTween(this, {scaleX:1,scaleY:1, time:1, transition:"easeoutelastic"});
            Tweener.addTween(this, {alpha:1, time:1, transition:"easeoutelastic"});
        }
        private function onOut(event:MouseEvent):void {
            Tweener.addTween(this, {scaleX:.9,scaleY:.9, time:1, transition:"easeoutelastic"});
            Tweener.addTween(this, {alpha:.5, time:1, transition:"easeoutelastic"});
        }
        private function scaleThumb():void {
            this.scaleX = .9;
            this.scaleY = .9;
            this.alpha = .5;
        }
    }
} 

The xml-file:

<?xml version="1.0" encoding="utf-8"?>
<images>
    <image>
      <url>pics/img_1.png</url>
      <big_url>big_pics/img_1.jpg</big_url>
      <picTxt>the text here</picTxt>
  </image>
  <image>
      <url>pics/img_2.png</url>
      <big_url>big_pics/img_2.jpg</big_url>
      <picTxt>the text here 2</picTxt>
  </image>
 </images>