Flash MX 2004 > Flash/XML Photo Gallery > Categories

Hello everyone,

First of all, thank goodness for this website and all the helpful tutorials. I never expected to get this far!

I’m using a combination of the Photo Gallery using XML and Flash (with [URL=“http://www.kirupa.com/developer/mx2004/thumbnails.htm”]thumbnails and a simple PHP gallery script called [URL=“http://www.solitude.dk/gallerythingie/”]Gallery Thingie. So far, I’ve got the XML file’s image data working with the Flash movie. However, Gallery Thingie also has a feature allowing the creation (and deletion) of image categories. How can I use this feature with the flash gallery?

So far I’ve added some buttons that would switch between categories, but they don’t do much yet since I’m not sure how to say “when this category variable is present, display only thumbnails with that variable.” Download the flash file (and others) from the link below.

ActionScript Code:
[FONT=Courier New][LEFT][COLOR=#808080]*/*Code for loading XML file. */*[/COLOR]

[COLOR=#000000]function[/COLOR] loadXMLCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#808080]/ “xmlNode” is just a faster way of saying “this.firstChild”. /[/COLOR]
[COLOR=#0000FF]xmlNode[/COLOR] = [COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]firstChild[/COLOR];
image = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];
head = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];
description = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];
thumbnails = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];
category = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];
cat = [COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]0[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]firstChild[/COLOR].[COLOR=#0000FF]attributes[/COLOR].[COLOR=#000080]cid[/COLOR]
[COLOR=#808080]/ Finds total number of child nodes (images w/captions to be displayed, in this case). /[/COLOR]
total = [COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR].[COLOR=#0000FF]length[/COLOR];
[COLOR=#808080]/ Extracts data from each child node, stopping when the total (defined above) is reached. /[/COLOR]
[COLOR=#0000FF]for[/COLOR] [COLOR=#000000]([/COLOR]i=[COLOR=#000080]0[/COLOR]; i<total; i++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
image[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR] = [COLOR=#FF0000]“images/”[/COLOR]+[COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]0[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]firstChild[/COLOR].[COLOR=#0000FF]nodeValue[/COLOR];
head[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR] = [COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]firstChild[/COLOR].[COLOR=#0000FF]nodeValue[/COLOR];
description[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR] = [COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]2[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]firstChild[/COLOR].[COLOR=#0000FF]nodeValue[/COLOR];
category[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR] = [COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]3[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]firstChild[/COLOR].[COLOR=#0000FF]nodeValue[/COLOR];
thumbnails[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR] = [COLOR=#FF0000]“images/th_”[/COLOR]+[COLOR=#0000FF]xmlNode[/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]1[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#0000FF]childNodes[/COLOR][COLOR=#000000][[/COLOR][COLOR=#000080]0[/COLOR][COLOR=#000000]][/COLOR].[COLOR=#0000FF]firstChild[/COLOR].[COLOR=#0000FF]nodeValue[/COLOR];
thumbnails_fnCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR]
firstImageCOLOR=#000000[/COLOR];
cat = [COLOR=#000080]0[/COLOR];
[COLOR=#000000]}[/COLOR] [COLOR=#0000FF]else[/COLOR] [COLOR=#000000]{[/COLOR]
content = [COLOR=#FF0000]“file not loaded!”[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
xmlData = [COLOR=#000000]new[/COLOR] [COLOR=#0000FF]XML[/COLOR]COLOR=#000000[/COLOR];
xmlData.[COLOR=#0000FF]ignoreWhite[/COLOR] = [COLOR=#000000]true[/COLOR];
xmlData.[COLOR=#0000FF]onLoad[/COLOR] = loadXML;
xmlData.[COLOR=#0000FF]load[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#808080]/////////////////////////////////////[/COLOR]
[COLOR=#808080]/ Lets the user scroll through with left and right arrow keys. /[/COLOR]
listen = [COLOR=#000000]new[/COLOR] [COLOR=#0000FF]Object[/COLOR]COLOR=#000000[/COLOR];
listen.[COLOR=#0000FF]onKeyDown[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#0000FF]Key[/COLOR].[COLOR=#0000FF]getCode[/COLOR]COLOR=#000000[/COLOR] == [COLOR=#0000FF]Key[/COLOR].[COLOR=#0000FF]LEFT[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
prevImageCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR] [COLOR=#0000FF]else[/COLOR] [COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#0000FF]Key[/COLOR].[COLOR=#0000FF]getCode[/COLOR]COLOR=#000000[/COLOR] == [COLOR=#0000FF]Key[/COLOR].[COLOR=#0000FF]RIGHT[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
nextImageCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR];
[COLOR=#0000FF]Key[/COLOR].[COLOR=#0000FF]addListener[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#808080]/ Note the references to button instances previous_btn and next_btn here./[/COLOR]
previous_btn.[COLOR=#0000FF]onRelease[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
prevImageCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR];
next_btn.[COLOR=#0000FF]onRelease[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
nextImageCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR];
[COLOR=#808080]/////////////////////////////////////[/COLOR]
[COLOR=#808080]/ The movie begins, naturally, at the beginning–in XML, that’s zero! /[/COLOR]
p = [COLOR=#000080]0[/COLOR];
[COLOR=#808080]/ Preloader for images. /[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]onEnterFrame[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
filesize = picture.[COLOR=#0000FF]getBytesTotal[/COLOR]COLOR=#000000[/COLOR];
[COLOR=#0000FF]loaded[/COLOR] = picture.[COLOR=#0000FF]getBytesLoaded[/COLOR]COLOR=#000000[/COLOR];
preloader.[COLOR=#0000FF]_visible[/COLOR] = [COLOR=#000000]true[/COLOR];
[COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#0000FF]loaded[/COLOR] != filesize[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
preloader.[COLOR=#0000FF]_visible[/COLOR] = [COLOR=#000000]true[/COLOR];
[COLOR=#000000]}[/COLOR] [COLOR=#0000FF]else[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#808080]/ Makes preloader invisible once the image starts to fade in. /[/COLOR]
preloader.[COLOR=#0000FF]_visible[/COLOR] = [COLOR=#000000]false[/COLOR];
[COLOR=#808080]/ Fade in the image. (If the alpha is under 100, add 10.) /[/COLOR]
[COLOR=#0000FF]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
picture.[COLOR=#0000FF]_alpha[/COLOR] += [COLOR=#000080]10[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR];
[COLOR=#808080]/ Load & display the next image. It cleverly calculates whether you are at the end of the
images or not. If you are, the script doesn’t run./[/COLOR]
[COLOR=#000000]function[/COLOR] nextImageCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#808080]/ If it’s less than the total (the last image), let’s go ahead and load the next image. /[/COLOR]
[COLOR=#0000FF]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
p++;
[COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#0000FF]loaded[/COLOR] == filesize[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#808080]/ If it is loaded, set alpha to zero, so that the preloader can fade it in! /[/COLOR]
picture.[COLOR=#0000FF]_alpha[/COLOR] = [COLOR=#000080]0[/COLOR];
[COLOR=#808080]/ Put the image where it is supposed to go. /[/COLOR]
picture.[COLOR=#0000FF]loadMovie[/COLOR][COLOR=#000000]([/COLOR]image[COLOR=#000000][[/COLOR]p[COLOR=#000000]][/COLOR], [COLOR=#000080]1[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#808080]/ Load description into text box “desc_txt” /[/COLOR]
desc_txt.[COLOR=#0000FF]text[/COLOR] = description[COLOR=#000000][[/COLOR]p[COLOR=#000000]][/COLOR];
head_txt.[COLOR=#0000FF]text[/COLOR] = head[COLOR=#000000][[/COLOR]p[COLOR=#000000]][/COLOR];
[COLOR=#808080]/ Activates the function down below, telling you what number picture you’re viewing. /[/COLOR]
picture_numCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#808080]/ Basically the same as nextImage(), but backwards. Fading and image/text insertion is the same. /[/COLOR]
[COLOR=#000000]function[/COLOR] prevImageCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]if[/COLOR] COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
p–;
picture.[COLOR=#0000FF]_alpha[/COLOR] = [COLOR=#000080]0[/COLOR];
picture.[COLOR=#0000FF]loadMovie[/COLOR][COLOR=#000000]([/COLOR]image[COLOR=#000000][[/COLOR]p[COLOR=#000000]][/COLOR], [COLOR=#000080]1[/COLOR][COLOR=#000000])[/COLOR];
desc_txt.[COLOR=#0000FF]text[/COLOR] = description[COLOR=#000000][[/COLOR]p[COLOR=#000000]][/COLOR];
head_txt.[COLOR=#0000FF]text[/COLOR] = head[COLOR=#000000][[/COLOR]p[COLOR=#000000]][/COLOR];
picture_numCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#808080]/ Automatically show the first image when the movie is loaded, fade-in and all. /[/COLOR]
[COLOR=#000000]function[/COLOR] firstImageCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR][COLOR=#0000FF]loaded[/COLOR] == filesize[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
picture.[COLOR=#0000FF]_alpha[/COLOR] = [COLOR=#000080]0[/COLOR];
[COLOR=#808080]/ Use image[0] instead of image[p] since this only applies to the first image. /[/COLOR]
picture.[COLOR=#0000FF]loadMovie[/COLOR][COLOR=#000000]([/COLOR]image[COLOR=#000000][[/COLOR][COLOR=#000080]0[/COLOR][COLOR=#000000]][/COLOR], [COLOR=#000080]1[/COLOR][COLOR=#000000])[/COLOR];
desc_txt.[COLOR=#0000FF]text[/COLOR] = description[COLOR=#000000][[/COLOR][COLOR=#000080]0[/COLOR][COLOR=#000000]][/COLOR];
head_txt.[COLOR=#0000FF]text[/COLOR] = head[COLOR=#000000][[/COLOR][COLOR=#000080]0[/COLOR][COLOR=#000000]][/COLOR];
picture_numCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR]
[COLOR=#808080]/ Thumbnail list. /[/COLOR]
[COLOR=#000000]function[/COLOR] thumbnails_fnCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
thumbnail_mc.[COLOR=#0000FF]createEmptyMovieClip[/COLOR][COLOR=#000000]([/COLOR][COLOR=#FF0000]“t”[/COLOR]+k, thumbnail_mc.[COLOR=#0000FF]getNextHighestDepth[/COLOR]COLOR=#000000[/COLOR][COLOR=#000000])[/COLOR];
tlistener = [COLOR=#000000]new[/COLOR] [COLOR=#0000FF]Object[/COLOR]COLOR=#000000[/COLOR];
tlistener.[COLOR=#0000FF]onLoadInit[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
target_mc.[COLOR=#0000FF]_x[/COLOR] = hit_left.[COLOR=#0000FF]_x[/COLOR]+COLOR=#000000[/COLOR]k;
target_mc.[COLOR=#000080]pictureValue[/COLOR] = k;
target_mc.[COLOR=#0000FF]onRelease[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
p = [COLOR=#0000FF]this[/COLOR].[COLOR=#000080]pictureValue[/COLOR]-[COLOR=#000080]1[/COLOR];
nextImageCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR];
target_mc.[COLOR=#0000FF]_alpha[/COLOR] = [COLOR=#000080]50[/COLOR];
target_mc.[COLOR=#0000FF]onRollOver[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]_alpha[/COLOR] = [COLOR=#000080]100[/COLOR];
thumbNailScrollerCOLOR=#000000[/COLOR];
[COLOR=#000000]}[/COLOR];
target_mc.[COLOR=#0000FF]onRollOut[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]_alpha[/COLOR] = [COLOR=#000080]50[/COLOR];
[COLOR=#000000]}[/COLOR];
[COLOR=#000000]}[/COLOR];
image_mcl = [COLOR=#000000]new[/COLOR] [COLOR=#0000FF]MovieClipLoader[/COLOR]COLOR=#000000[/COLOR];
image_mcl.[COLOR=#0000FF]addListener[/COLOR]COLOR=#000000[/COLOR];
image_mcl.[COLOR=#0000FF]loadClip[/COLOR][COLOR=#000000]([/COLOR]thumbnails[COLOR=#000000][[/COLOR]k[COLOR=#000000]][/COLOR], [COLOR=#FF0000]“thumbnail_mc.t”[/COLOR]+k[COLOR=#000000])[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]function[/COLOR] thumbNailScrollerCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#808080]
// thumbnail code![/COLOR]
[COLOR=#0000FF]this[/COLOR].[COLOR=#0000FF]createEmptyMovieClip[/COLOR][COLOR=#000000]([/COLOR][COLOR=#FF0000]“tscroller”[/COLOR], [COLOR=#000080]1000[/COLOR][COLOR=#000000])[/COLOR];
scroll_speed = [COLOR=#000080]10[/COLOR];
tscroller.[COLOR=#0000FF]onEnterFrame[/COLOR] = [COLOR=#000000]function[/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR]COLOR=#000000[/COLOR] && COLOR=#000000[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR]COLOR=#000000[/COLOR] && COLOR=#000000[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
thumbnail_mc.[COLOR=#0000FF]_x[/COLOR] -= scroll_speed;
[COLOR=#000000]}[/COLOR] [COLOR=#0000FF]else[/COLOR] [COLOR=#0000FF]if[/COLOR] [COLOR=#000000]([/COLOR]COLOR=#000000[/COLOR] && COLOR=#000000[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]
thumbnail_mc.[COLOR=#0000FF]_x[/COLOR] += scroll_speed;
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR] [COLOR=#0000FF]else[/COLOR] [COLOR=#000000]{[/COLOR]
[COLOR=#0000FF]delete[/COLOR] tscroller.[COLOR=#0000FF]onEnterFrame[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#000000]}[/COLOR];
[COLOR=#000000]}[/COLOR]
[COLOR=#808080]
/* Displays current position and total number of pictures. /[/COLOR]
[COLOR=#000000]function[/COLOR] picture_numCOLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]
current_pos = p+[COLOR=#000080]1[/COLOR];
pos_txt.[COLOR=#0000FF]text[/COLOR] = current_pos+[COLOR=#FF0000]" / "[/COLOR]+total;
[COLOR=#000000]}[/COLOR]
[/LEFT]
[/FONT]

Code for XML:


<?xml  version="1.0" encoding="ISO-8859-1"?>

<gallery>
    <categories>
        <category cid="0">Monkeys</category>
        <category cid="1">Sample</category>
    </categories>
    <images>
        <image id="0">
            <file>image1.jpg</file>
            <title>Pig Tailed Something</title>
            <description>This is really easy.</description>
            <imgcategory>0</imgcategory>
        </image>
        <image id="1">
            <file>image2.jpg</file>
            <title>Wooly Monkey</title>
            <description>Here's another!</description>
            <imgcategory>0</imgcategory>
        </image>
        <image id="2">
            <file>image3.jpg</file>
            <title>Photo</title>
            <description>Something by Peter Laytin.</description>
            <imgcategory>1</imgcategory>
        </image>
    </images>
</gallery>

I’d appreciate any help I can get!

bump

Any help would be much appreciated… ;(