ScrollPane V2 image scroller - dynamic loading from XML

[jmpreston]

I struggled for days on this problem and searched the newsgroups and forums with no luck but got the ScrollPane component V2 to work fine with dynamic loading of thumb images. It took a bit of a hack to force it to obey me. I've included enough info for the archives so that this is a bit of a tutorial. I've also included my XML parser so that a newbie can take this code and more or less plug it in and have a thumb scroller in no time.

The hack is commented below. Hope this helps others who have struggled with this issue. You may have to copy and paste it into a text editor or Flash AS panel if the wrap makes it hard to read.

- jim



The listener doesn't work unless you load the contentPath with AS instead of linking the empty mc in the Library.
The redraw does nothing anyway, but without linkage at least it is called.




// Make a listener object for loading the images in the scrollPane
var scrollPaneReset:Object = new Object();
scrollPaneReset.complete = function(eventObj:Object) {
trace("scrollPane redraw");
scrollPane_sp.vScrollPolicy = "auto";
scrollPane_sp.hScrollPolicy = "auto";
//scrollPane_sp.invalidate(); Not useful.
scrollPane_sp.redraw(true);
//scrollPane_sp.refreshPane(); Bad idea.
}
// Register the listener with the instance.
scrollPane_sp.addEventListener("complete", scrollPaneReset);

/* ---CREATE AND ARRANGE THUMB MC'S AND LOAD JPEGS---

Load required empty mc into the scrollPane component.
For listener to work don't use linkage in the MC in the Library,
however, nothing loads so this isn't a useful proceedure.
This needs to be done here and in the linkage for the code below to work.
It does nothing but is needed to activate the scrollPane.
However, scrolling will work if a long graphic is included in spEmpty_mc.
*/
scrollPane_sp.contentPath = "spEmpty_mc";
// Data is parsed from XML for the location of the thumb images.
// The following functions are called at the end of the xml parse function.
// Somehow I got the images to scroll above the SP mask but putting the SP
// in a masked layer looked tacky. It did scroll dynamically loaded images though.

createClips = function () {

/* Create an mc to display the images inside a scrollable mc.
Works the same with or without this extra mc, no scrolling.
With this mc the content loads under the mask in the SP but won't scroll.
Use of .content or .spContentHolder gives the same results.
This was an experiment but nothing changed.
*/
//scrollPane_sp.content.createEmptyMovieClip("thumbsDisplay_mc", 10);

// The code below forced the scroller to work well.
// The graphic in the spEmpty_mc must be in it's own mc (spEmptyGraphic_mc)
// and the graphic must start off being longer than the length of the SP.
// Then the cleaver AS coder gets control of this component! Hacked!
// Hopefully someone knows a more elegant solution.
var allThumbsHeight = numThumbs * thumbHeight;
scrollPane_sp.spContentHolder.spEmptyGraphic_mc._w idth = 1
scrollPane_sp.spContentHolder.spEmptyGraphic_mc._h eight = allThumbsHeight
scrollPane_sp.redraw(true);

for (i=0; i < numThumbs; i++) {
var iThumb = thumbName+i; // create instance name for each MC
// creates as many MC's as thumbs var. These will be buttons soon.
scrollPane_sp.spContentHolder.createEmptyMovieClip (iThumb, i+20);
// creates mc's to load thumb images into, otherwise onRelease won't work.
scrollPane_sp.spContentHolder[iThumb].createEmptyMovieClip("thumbHolder_mc", i + 100);
// creates the buttons for loading images in the main display - works fine.
scrollPane_sp.spContentHolder[iThumb].onRelease = function() {
iThumb = this._name; // Resets var for each event.
toggleViz(iThumb); // The button's functionality.
}
}
}
loadThumbs = function () {
for (i=0; i < numThumbs; i++) {
// Reconstruct the var name for each URL to the thumb locations.
var iThumb = thumbName+i; // root name for each location var.
fileLoc = _global.locationArray[i] // Assign the location to a var array.
scrollPane_sp.spContentHolder[iThumb].thumbHolder_mc.loadMovie(fileLoc);
}
}
arrangeClips = function() {
var yPosition = 0
for (i=0; i < numThumbs; i++) {
var iThumb = thumbName+i; // address instance name for each MC
scrollPane_sp.spContentHolder[iThumb]._x = 2
// set the y position of each thumb in a line
scrollPane_sp.spContentHolder[iThumb]._y = yPosition;
yPosition = yPosition + thumbHeight; // increment y to the next thumb position
}
}
// NEED TO CREATE AN OBJECT FOR THE PARSED XML WITH NEW() CLEAN THIS UP

The parser below is going to be changed to better OOP but this works fine.

// ------------------- CONVERT APP THUMB NAMES TO FILE NAMES FROM XML DATA ---------------------

// STEP 1: Load the XML data object.
function getNameConvertXML(locImageXML) { // The parameter needs to be the location and name of the xml file.
nameConvertXML = new XML();
nameConvertXML.ignoreWhite = true;
nameConvertXML._tl = this; // change the scope of the XML object to the timeline
nameConvertXML.load(locImageXML);
nameConvertXML.onLoad = parseNameConvertXML; // Calls the parsing function below
}


// Creating a pile of global vars is primitive.
function parseNameConvertXML() {
rootNode = nameConvertXML.firstChild; // contains the whole doc less the XML header line

// Start iterating through the nodes and parse to objects
folderArray = rootNode.childNodes; // folders and children array, only for counting.
folderLevel = rootNode.firstChild; // contains the folders and all children in XML. Increments.

for (var z = 0; z<folderArray.length; z++) {
numThumbs = z + 1 // Sets total number of items in the first level of the XML file
secondArray = folderLevel.childNodes; // 2nd level and children in XML.
secondLevel = folderLevel.firstChild; // Picks 1st child to start the parse.
_global.folderLabel = folderLevel.attributes["label"];
this[folderLabel] = secondLevel; // Creates new level label var with each iteration.
//_global[folderLabel + "_label"] = folderLevel.attributes["label"];
_global.locationArray.push(folderLevel.attributes["thumbLoc"]);
//_global[folderLabel + "_modelName"] = folderLevel.attributes["modelName"];

/*
for (var y = 0; y<secondArray.length; y++) {
//thirdArray = secondLevel.childNodes;
thirdLevel = secondLevel.firstChild;
secondLabel = secondLevel.attributes["label"]; // Assign the XML label to the incrementing var
this[secondLabel] = thirdLevel; // Creates new level label var with each iteration.
_global[secondLabel + "_desc"] = secondLevel.attributes["description"];
_global[secondLabel + "_color"] = secondLevel.attributes["color"];
_global[secondLabel + "_loc"] = secondLevel.attributes["loc"];
secondLevel = secondLevel.nextSibling;
} */
folderLevel = folderLevel.nextSibling; // Increment to next child node.
}
// Build the scroller and load the images.
createClips();
arrangeClips();
loadThumbs();
}


In the Output Panel with Debug/List Variables:

// Interesting that the loaded mc is a var and not an mc we can load content into.
// However, a graphic in the empty mc will show under the thumbs.
Variable _level0.scrollPane_sp.__scrollContent = "spEmpty_mc"


Movie Clip: Target="_level0.scrollPane_sp.spContentHolder.prodThumb0"
Variable _level0.scrollPane_sp.spContentHolder.prodThumb0.o nRelease = [function 'onRelease']
Movie Clip: Target="_level0.scrollPane_sp.spContentHolder.prodThumb0.t humbHolder_mc"
Movie Clip: Target="_level0.scrollPane_sp.spContentHolder.prodThumb1"
Variable _level0.scrollPane_sp.spContentHolder.prodThumb1.o nRelease = [function 'onRelease']
Movie Clip: Target="_level0.scrollPane_sp.spContentHolder.prodThumb1.t humbHolder_mc"
Movie Clip: Target="_level0.scrollPane_sp.spContentHolder.prodThumb2"
Variable _level0.scrollPane_sp.spContentHolder.prodThumb2.o nRelease = [function 'onRelease']

[RSoul]

You're not really from silicon valley, are you? Oh God...

[mrthasewer]

I am trying to this exact same thing you described here. I am very new to Action Script and I am having a hard time following along. Do you have a sample movie available to look at so I can understand better where the code goes?

Thank you very much