Dynamic Content/XML

Dynamic Content/XML

Basic Premise: An image gallery
End Result: Dynamically loaded thumbnails as well as the actual image.
Flash Version: Flash 8

I have a gallery with 12 images. It functions fine but the images are hard coded into the flash. I'd like to add them in dynamically to reduce the loading time of my main movie as well as reduce the file size for the main .swf.

How can I, using an external xml file, load in thumbnails and the actual image.

My movie is set up as such:
panel_MC: panel of 12 horizontally scrolling thumbnails
photo_MC: movie clip which loads the larger version of the thumbs


XML could be set up as such:

Code:

---

<photo small="thumbnail.jpg"  large="picture.jpg" />

---

Have a gander at this basic gallery tutorial.

It explains VERY well how to set up your XML. I am sure you are more than capable of doing the Flash side yourself, but if you need help with that too let me know :D

Thanks Blizzard.

That was very helpful.

I would love some help in manipulating this code though.

I'd like to set the thumbnail panel up to show a 4 pix by 4 pix square. I have no idea where I would event start. This is the first time I'm manipulating XML in Flash. I must admit, I've just used plug-and-play scripts in the past :-P

Here is the code:

Code:

---

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
        //portfolioTag = this.firstChild;
        numimages = this.firstChild.childNodes.length;
        spacing = 84;
        for (i=0; i<numimages; i++) {
                this.picHolder = this.firstChild.childNodes[i];
                this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
                this.thumbHolder._x = i*spacing;
                this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
                this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
                this.thumbHolder.title = this.picHolder.attributes.title;
                this.thumbHolder.main = this.picHolder.attributes.main;
                this.thumbHolder.onRelease = function() {
                        loader.loadMovie(this.main);
                        title_txt.text = this.title;
                };
        }
};
myPhoto.load("photolist.xml");

stop();

---

My thumbnails are 80px by 80px.

LOL, I was confused when I first read this and thought you wants it inside a 4px X 4 px square, and I was wondering how you were going to be able to see 80px thumbs :D

Anyway.. I know what you mean now, I don't deal with XML very often, so let me look it over. Time to take the kiddos to school, then I will post an answer for you :)

We will most likely add a "j" element and make a box layout whereby the flash will fill it with the XML images, kind of like a tile grid...

something like:

Code:

---

for (var j:Number=0; j<4; ++j){
    for (var i:Number=0; i<4; ++i) {
          //rest of code here
    }
}

---

Had a look, I am not expert and I don't have your file to mess around with, but try this:

Code:

---

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
        //portfolioTag = this.firstChild;
        numimages = this.firstChild.childNodes.length;
        spacing = 84;
        for (var j:Number = 0; j<numimages/4; ++j) {
                for (var i:Number = 0; i<numimages/4; ++i) {
                        this.picHolder = this.firstChild.childNodes[i];
                        this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
                        this.thumbHolder._x = i*spacing;
                        this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
                        this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
                        this.thumbHolder.title = this.picHolder.attributes.title;
                        this.thumbHolder.main = this.picHolder.attributes.main;
                        this.thumbHolder.onRelease = function() {
                                loader.loadMovie(this.main);
                                title_txt.text = this.title;
                        };
                }
        }
};
stop();

---

This is assuming you have 16 photos, and we will leave the var naming for numimages :)

Hey Blizzard...

Not to encroach on Medyman's post or anything
but I was trying to achieve a similar effect a while ago but couldn't ever figure it out.

I look at the posted tutorial and it works (though there is some issue w/ the registration points which I cannot figure out so i've had to put the "loader" movieclip and some random place to get it to line up right).

Anyway, I too wanted to create a thumbnail "box"
I tried the code you just posted using the "j" element. For me, it gets rid of the panel altogether :confused:

I'm attaching my .fla w/o the use of the "j" element where it works but is not in the "box" form. If you could please have a look at it, I'd greatly appreciate it.

Thanks

Attached:
Attachment 865

For your registration point issue, click once on the item you want to change the reg point of, then click the free transform tool, the reg point will turn solid white, and you can move it anywhere you like. (this is a great trick for tweens)

Alternately if you are using an empty MC as the loader, the reg point will always be center.

I will take a gander at your file now :)

Quote:

---

Originally Posted by BLiZZaRD

For your registration point issue, click once on the item you want to change the reg point of, then click the free transform tool, the reg point will turn solid white, and you can move it anywhere you like. (this is a great trick for tweens)

Alternately if you are using an empty MC as the loader, the reg point will always be center.

I will take a gander at your file now :)

---

I've tried changing the reg point but I'd have to put it waaaaaaaaay out of the way for it work right.

Even the exmaple in the tutorial as the reg point outside the shape. Why is that? What is causing it to be off that I should have to implement a fix?

It's just the way things line up. All the reg points combined, depths, layers, etc. It's a fine art, and one that isn't really needed as you can just move things around.

You can place items on the stage with AS, and even define the exact location, but if you don't need too....

Any fix for this, anyone?

BliZZard, V1SHAL:

Have a look at this link:
http://www.gotoandlearn.com/forum/viewtopic.php?t=7237

It shows how to achieve the effect which we are all trying to do: a grid patterned picture gallery with XML.

I don't understand the coding and to be honest, I'm intimidated by it :-p.

However, it does work! Have at it. If you get example file you posted before to work with this, I'd love to see it!