Example: basic dynamically loaded XML structured portfolio

programming flash
1

I made this for a friend though thought some other people out there could benefit from it as well.

basic example using XML to determine the content of a mock portfolio dynamically loading in the image and text.

explanation is contained within comments in the actionscript of the FLA
http://www.umbc.edu/interactive/fla/portfolio_example.zip

2

Nice man, but I don’t think there was enough comment in the code :sure:

3

I’ll work on that :wink:
I only have 10 fingers you know!

4

Hehe, you taught me all this long ago Sen. The full flash site I am working on now for myself uses a lot of XML backend that I learned and practiced from your tutorials. I use something simlar to this in there :slight_smile:

5

My efforts have paid off :beam:
I can’t wait to see your site!

6

Hehe, me either! I haven’t worked on it for a while due to my coding funk. But I got to praticing in DHTML and Javascript again these past few days to get my mind off AS and I think it worked. I think I can start coding again. Which means I may work on the site tonight!

I just checked out the actual .fla in that .zip file. WOAH thats a lot of commenting man…lol. You should of just wrote an instruction manual in HTML or something and included the pages in there :wink:

7

My words exactly…

8

Anyone know how to forgo using the txt files & instead putting their contents into the XML nodes???

9

I’ve tried breaking the for loop into three to place 3 thumbnails (out of the 9 I wanna use) onto three lines - but the thumbnaisl end up staggered on each line - any ideas how to get them to display as a perfect 3x3 grid???

here’s the for loops I redid:

lineOne = 3;

for (child = 0; child < lineOne; child++){
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc1.createEmptyMovieClip(“thumbnail”+child,child);
currentThumb._x = child * 38;
// create image clip in currentThumb:
image = currentThumb.createEmptyMovieClip(“thumbnail_image”,0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver = function(){
showName_txt.text = this.NAME;
}

currentThumb.onRollOut = currentThumb.onDragOut = function(){
// set the text to an empty string (clearing it)
showName_txt.text = “”;
}

currentThumb.onPress = currentThumb.onDragOver = function(){

image_mc.loadMovie(this.IMAGE);

info_txt.text = “Loading…”;
timeline.loadVariables(this.TEXT);
}
}

lineTwo = 6;

for (child = 3; child < lineTwo; child++){
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc2.createEmptyMovieClip(“thumbnail”+child,child);
currentThumb._x = child * 38;
// create image clip in currentThumb:
image = currentThumb.createEmptyMovieClip(“thumbnail_image”,0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver = function(){
showName_txt.text = this.NAME;
}

currentThumb.onRollOut = currentThumb.onDragOut = function(){
// set the text to an empty string (clearing it)
showName_txt.text = “”;
}

currentThumb.onPress = currentThumb.onDragOver = function(){

image_mc.loadMovie(this.IMAGE);

info_txt.text = “Loading…”;
timeline.loadVariables(this.TEXT);
}
}

lineThree = 9;

for (child = 6; child < lineThree; child++){
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc3.createEmptyMovieClip(“thumbnail”+child,child);
currentThumb._x = child * 38;
// create image clip in currentThumb:
image = currentThumb.createEmptyMovieClip(“thumbnail_image”,0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver = function(){
showName_txt.text = this.NAME;
}

currentThumb.onRollOut = currentThumb.onDragOut = function(){
// set the text to an empty string (clearing it)
showName_txt.text = “”;
}

currentThumb.onPress = currentThumb.onDragOver = function(){

image_mc.loadMovie(this.IMAGE);

info_txt.text = “Loading…”;
timeline.loadVariables(this.TEXT);
}
}

ANYONE have ANY ideas???

also - if ANYONE has ANY ideas about how to take the displayText variable OUT of the txt files & instead use it within the XML sheet instead I’d be REALLY REALLY greatful!!!

Thanks

– StreetRacerX –

10

ok - managed to cop on WHAT I was doing wrong here in relation to the arrangement of the images within the menu_mcx containers on the seond & third thumbnail presentation lines - forgot to add in a reset valuable for the x position on each line - which I resolved like so, using the 3rd line’s code as an example - the bolded items are the nw additions to correct the positioning problem:

lineThree = 9;
thumb_xpos_init = 0;

for (child = 6; child < lineThree; child++){
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc3.createEmptyMovieClip(“thumbnail”+child,child);
currentThumb._x = thumb_xpos_init * 38;
thumb_xpos_init++;
// create image clip in currentThumb:
image = currentThumb.createEmptyMovieClip(“thumbnail_image”,0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver = function(){
showName_txt.text = this.NAME;
}

currentThumb.onRollOut = currentThumb.onDragOut = function(){
// set the text to an empty string (clearing it)
showName_txt.text = “”;
}

works like a DREAM now in terms of displaying the thumbnails…only problem I have left is the one relating to moving the contents of the displayText variable within the .txt files into the XML sheet - senocular - anyone??? even a hint in the right direction would do at this stage

11

Ok,

i’m doing something very similar to what you guys are doing here. However, is there any way of controlling how the thumbnails are placed into the movie clip?

For instance, is there a way to make sure the thumbnails stay inside of the movie clip? whenever i add a bunch of images the thumbnails extend straight out of the right side of the thumnail container.

is there anyway to get them to wrap?

ie. this website has a dropdown menu that seems to dynamically load thumbnails and they wrap after 5 have appeared on a line.

http://www.k23creative.com/home.html

does anyone have a clue how this works?

12

bump :slight_smile:

13

ooo I forgot I did this :!:

vanillaCoke:

what you would do is first have a value to represent the starting vertical position like

thumbsVPos = 100

next have another to represent how far away each line is

thumbsLineSpacing = 50

then, as read through your thumbs, once 5 has passed, increase thumbsVPos by thumbsLineSpacing and count off another 5, each time positioning by thumbsVPos.

for thumbs… yada yada yada
thisThumb._y = thumbsVPos;
if (5 have passed or on a 5th) thumbsVPos += thumbsLineSpacing

etc.

StreetracerX :

would a simple text node not work? Theres also stick it in a CDATA

14

i looked up yada yada yada in my actionscript dictionary, but i couldnt find it…

:slight_smile: lol

thanks for your help senocular!!! :slight_smile:

*Originally posted by senocular *
**ooo I forgot I did this :!:

for thumbs… yada yada yada
thisThumb._y = thumbsVPos;
if (5 have passed or on a 5th) thumbsVPos += thumbsLineSpacing
**