Displaying CDATA in XML file

programming flash
1

I’m working with Scotty’s image gallery code and I would like to use CDATA instead of a node attribute to supply captions for the images. The reason being that it should be easy to apply HTML formatting to the CDATA, including bolding and line breaks.

At this stage I have two issues:

  1. The only way to get the HTML to display is to apply a stylesheet. For some reason the stylesheet isn’t working here (even though the exact same code works for me in a different file).

  2. I don’t know how to iterate through the nodes to pull the appropriate CDATA when a thumbnail button is clicked. I do know how to target the very first CDATA node value so that’s what you see displayed. But I’m not figuring out how to loop through them properly.

My test files are below:
http://www.tornedgedesign.com/_test/image_gallery/xml_CDATA.zip

The XML looks like this:


<?xml version="1.0" encoding="UTF-8"?>
<menu>
     <gallery name="Holiday">
          <image source="images/pic1.jpg" thumb="images/th1.jpg" comment="First image comments go here.">
            <content>
                <![CDATA[<b>Two Can Play</b><br>1983<br>Galvanized steel with rivets.<br>Height 72in.<br>Saatchi Collection, London]]>
            </content>
          </image>
          <image source="images/pic2.jpg" thumb="images/th2.jpg" comment="Party pic comment go here.">
            <content>
                <![CDATA[<b>Family Group</b><br>1948-9<br>Bronze<br>Height 59in.<br>Henry Moore Foundation]]>
            </content>
          </image>
          <image source="images/pic3.jpg" thumb="images/th3.jpg" comment="Bench">
            <content>
                <![CDATA[<b>Bird Swallowing Fish</b><br>c1913-14<br>Bronze<br>Height 12 1/2in.<br>Private Collection]]>
            </content>
          </image>
          <image source="images/pic4.jpg" thumb="images/th4.jpg" comment="Lights">
            <content>
                <![CDATA[<b>Two Can Play</b><br>1983<br>Galvanized steel with rivets.<br>Height 72in.<br>Saatchi Collection, London]]>
            </content>
          </image>
          <image source="images/pic5.jpg" thumb="images/th5.jpg" comment="Agreement">
            <content>
                <![CDATA[<b>Family Group</b><br>1948-9<br>Bronze<br>Height 59in.<br>Henry Moore Foundation]]>
            </content>
          </image>
          <image source="images/pic6.jpg" thumb="images/th6.jpg" comment="Landscape">
            <content>
                <![CDATA[<b>Bird Swallowing Fish</b><br>c1913-14<br>Bronze<br>Height 12 1/2in.<br>Private Collection]]>
            </content>
          </image>
          <image source="images/pic7.jpg" thumb="images/th7.jpg" comment="Face">
            <content>
                <![CDATA[<b>Two Can Play</b><br>1983<br>Galvanized steel with rivets.<br>Height 72in.<br>Saatchi Collection, London]]>
            </content>
          </image>
          <image source="images/pic8.jpg" thumb="images/th8.jpg" comment="Sunset">
            <content>
                <![CDATA[<b>Family Group</b><br>1948-9<br>Bronze<br>Height 59in.<br>Henry Moore Foundation]]>
            </content>
          </image>
          <image source="images/pic9.jpg" thumb="images/th9.jpg" comment="My Girlfriend">
            <content>
                <![CDATA[<b>Bird Swallowing Fish</b><br>c1913-14<br>Bronze<br>Height 12 1/2in.<br>Private Collection]]>
            </content>
          </image>
     </gallery>
     <gallery name="Birthday">
          <image source="images/pic5.jpg" thumb="images/th5.jpg" comment="Agreement"/>
          <image source="images/pic6.jpg" thumb="images/th6.jpg" comment="Landscape"/>
          <image source="images/pic7.jpg" thumb="images/th7.jpg" comment="Face"/>
          <image source="images/pic8.jpg" thumb="images/th8.jpg" comment="Sunset"/>
          <image source="images/pic9.jpg" thumb="images/th9.jpg" comment="My Girlfriend"/>
     </gallery>
     <gallery name="Christmas">
          <image source="images/pic4.jpg" thumb="images/th4.jpg" comment="Lights"/>
          <image source="images/pic5.jpg" thumb="images/th5.jpg" comment="Agreement"/>
          <image source="images/pic6.jpg" thumb="images/th6.jpg" comment="Landscape"/>
     </gallery>
     <gallery name="New Year">
          <image source="images/pic6.jpg" thumb="images/th6.jpg" comment="Landscape"/>
          <image source="images/pic7.jpg" thumb="images/th7.jpg" comment="Face"/>
          <image source="images/pic8.jpg" thumb="images/th8.jpg" comment="Sunset"/>
          <image source="images/pic1.jpg" thumb="images/th1.jpg" comment="Earth"/>
          <image source="images/pic2.jpg" thumb="images/th2.jpg" comment="Party"/>
          <image source="images/pic3.jpg" thumb="images/th3.jpg" comment="Bench"/>
     </gallery>
</menu>

The Actionscript looks like this:


//container is inside thumbnail MC
var tnNr;
spacing = 10;
container._alpha = 0;
var curLength;
//
//For HTML formatting in CDATA to work use Flash Player 7 and StyleSheet code
var contentCSS = new TextField.StyleSheet();
//contentCSS.setStyle(".caption", {fontFamily:"Verdana", fontSize:"11px", color:"#000000"});
//contentCSS.setStyle("a", {color:'#939672', textDecoration:'none'});
contentCSS.setStyle("a:link", {color:'#939672', textDecoration:'underline'});
contentCSS.setStyle("a:hover", {color:"#c6c3ab", textDecoration:'underline'});
contentCSS.setStyle("a:visited", {color:"#63481d", textDecoration:'underline'});
//
var default_color:Number = 0x939672;
var rollover_color:Number = 0xc6c3ab;
var selected_color:Number = 0x63481d;
//
var activebtn:MovieClip;
//
mainNavText = new TextFormat();
mainNavText.font = "Futura Book embed";
mainNavText.size = 12;
mainNavText.color = "0x939672";
//
MovieClip.prototype.loadPic = function(pic, id) {
    //caption_txt.styleSheet = contentCSS;
    caption_txt.text = "";
    this._alpha = 0;
    this.loadMovie(pic);
    temp = this._parent.createEmptyMovieClip("temp2", 998);
    temp.onEnterFrame = function() {
        var t = container.getBytesTotal(), l = container.getBytesLoaded();
        if (Math.round(l/t) == 1 && container._width != 0 && container._height != 0) {
            var w = container._width+spacing, h = container._height+spacing;
            border.resizeMe(w, h, id);
            delete this.onEnterFrame;
        }
    };
};
MovieClip.prototype.resizeMe = function(w, h, id) {
    var speed = 3;
    container._alpha = 0;
    this.onEnterFrame = function() {
        this._width += (w-this._width)/speed;
        this._height += (h-this._height)/speed;
        if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
            this._width = w;
            this._height = h;
            container._x = this._x-this._width/2+spacing/2;
            container._y = this._y-this._height/2+spacing/2;
            caption_txt._y = Math.round(container._y);
            //caption_txt._y = Math.round(this._y+this._height/2+spacing/2);
            container._alpha += 5;
            if (container._alpha>90) {
                //caption_txt.text = id;
                //trace(id);
                caption_txt.styleSheet = contentCSS;
                caption_txt.text = contentNode;
                //caption_txt.text = galleryXML.firstChild.firstChild.firstChild.childNodes[0];
                //trace(galleryXML.firstChild.firstChild.firstChild.childNodes[0]);
                container._alpha = 100;
                delete this.onEnterFrame;
            }
        }
    };
};
var galLength;
galleryXML = new XML();
my_obj = new Object();
galleryXML.ignoreWhite = true;
galleryXML.onLoad = function(loaded) {
    if (loaded) {
        var galleries = this.firstChild.childNodes;
        contentNode = this.firstChild.firstChild.firstChild.childNodes[0];
        //trace(this.firstChild.firstChild.firstChild.childNodes[0]);
        galLength = galleries.length;
        for (var i = 0; i<galLength; i++) {
            my_obj* = new Object();
            my_obj*.nodes = galleries*.childNodes;
            var gal_btn = nav_gal.attachMovie("gal_btn", "gal_btn"+i, i);
            gal_btn._y = i*20;
            gal_btn.label.text = galleries*.attributes.name;
            //Set default text color
            gal_btn.label.setTextFormat(mainNavText);
            gal_btn.label.autoSize = true;
            gal_btn.bg._width = gal_btn.label._width;
            gal_btn.id = i;
            gal_btn.onRelease = function() {
                galleryChoice(this.id);
                disButtons(this.id);
                activebtn.label.textColor = default_color;
                // Change selected MC text to selected color
                this.label.textColor = selected_color;
                activebtn = this;
            };
            gal_btn.onRollOver = function() {
                if (this != activebtn) {
                    this.label.textColor = rollover_color;
                }
            };
            gal_btn.onRollOut = function() {
                if (this != activebtn) {
                    this.label.textColor = default_color;
                }
            };
        }
    }
    galleryChoice(0);
    disButtons(0);
};
galleryXML.load("xml/kk_gallery.xml");
function galleryChoice(q) {
    tArray = [];
    pArray = [];
    iArray = [];
    for (var j = 0; j<curLength; j++) {
        this.th_nav["thmb"+j].removeMovieClip();
    }
    gallery = my_obj[q].nodes;
    curLength = gallery.length;
    for (var i = 0; i<gallery.length; i++) {
        pArray.push(gallery*.attributes.source);
        tArray.push(gallery*.attributes.thumb);
        iArray.push(gallery*.attributes.comment);
    }
    delay = setInterval(makeButtons, 50);
}
function makeButtons() {
    tnNr = 0;
    clearInterval(delay);
    for (var i = 0; i<tArray.length; i++) {
        var thb = th_nav.thmb.duplicateMovieClip("thmb"+i, 1000+i);
        thb.id = i;
        thb._x = i%3*50;
        thb._y = Math.floor(i/3)*50;
    }
    loadButtons();
}
function loadButtons() {
    var tbox = th_nav["thmb"+tnNr].box;
    tbox.loadMovie(tArray[tnNr]);
    temp = this.createEmptyMovieClip("tmp"+tnNr, 999);
    temp.onEnterFrame = function() {
        bt = tbox.getBytesTotal();
        bl = tbox.getBytesLoaded();
        if (bt == bl && bt>4) {
            nextButton();
            delete this.onEnterFrame;
        }
    };
}
function nextButton() {
    if (tnNr<tArray.length-1) {
        tnNr++;
        loadButtons();
    } else {
        activateButtons();
    }
}
function activateButtons() {
    mainButtons();
    for (var i = 0; i<pArray.length; i++) {
        var but = th_nav["thmb"+i];
        but.id = i;
        but.onRelease = function() {
            container.loadPic(pArray[this.id], iArray[this.id]);
            disButtons2(this.id);
            curThumbID = this.id;
        };
    }
    container.loadPic(pArray[0], iArray[0]);
    disButtons2(0);
    //Variable below used in Next/Previous buttons and Slideshow
    curThumbID = 0;
}
function disButtons2(d) {
    for (var i = 0; i<tArray.length; i++) {
        if (i != d) {
            this.th_nav["thmb"+i].enabled = 1;
            this.th_nav["thmb"+i].box._alpha = 100;
        } else {
            this.th_nav["thmb"+i].enabled = 0;
            this.th_nav["thmb"+i].box._alpha = 50;
        }
    }
}
function disButtons(d) {
    for (var i = 0; i<galLength; i++) {
        var but = nav_gal["gal_btn"+i];
        if (i != d) {
            but.enabled = 1;
            but.label.textColor = default_color;
        } else {
            but.enabled = 0;
            but.label.textColor = selected_color;
            activebtn = but;
        }
    }
}
//
/*
for (var i in this) {
    if (typeof (this*) == "movieclip") {
        //trace("movie clip '"+this*._name+"' is at depth "+this*.getDepth()+"' and this _y: '"+this*._y);
        trace("movie clip '"+this*._name+"' is at depth "+this*.getDepth());
    }
}
*/