Need some help with some loops I can't get my head around :/
Flash CS3, using AS2
I need some serious help here :/
I'm trying to recreate a UI for an application that my company makes in order to create an in-depth training companion to the application.
One of the features is a weird tree view that works quite different from any tree view component I've ever seen, so I decided to create my own version of it as the Flash AS2 Tree Component doesn't have the functionality, and I haven't found any Tree Component for sale or download that works like that either.
At first glance it seems like a standard Tree, except that it behaves differently if you click on the icon for each node than if you click on the label. Some labels are links, some nodes can have 2 different labels, each with their own link, and most nodes have a second label underneath the label next to the icon (these don't have events assigned to them; they're just a quick way to view information).
So anyway, I set up an XML file with all the information that I need (the easy part), but populating the whole thing, making sure each subnode can properly exist within each parentnode while allowing me to open and close them has been a real challenge. Basically, I decided to use a whole bunch of loops to go through the nodes in the XML, but my lack of experience in using them is kicking my rear end.
Basically, I need some code that can evaluate all the nodes in the XML and sort them within the proper hierarchies and then create all the clips in the stage to add the mouse events for opening, closing, and handling the links (which do not direct to the same event as when the icon next to that link is clicked).
I have been hitting this problem from many angles, but I haven't been able to squash it yet. I'm including my horribly convoluted and not too pretty code to demonstrate my problems.
(I'll post some of my code to demonstrate the mess I have in the next message)
/****************************************************************************************************************
/******************************************************************************************************************
*******************************************VARIABLES AND IMPORTS***************************************************
*****************************************************************************************************************/
import mx.styles.CSSStyleDeclaration;
import mx.controls.Label;
import mx.controls.Loader;
// The following variable exists to keep track of the vertical positioning of the Expandos
var nLevelOneTopY:Number = 10;// Starting position of the first Expando; all other Expandos are placed according to this.
var nShiftAmount:Number = 22;// Variable that tells me how many pixels down an Expando must move when the one atop it is clicked.
var nShiftBelowOne:Number = 14;// Variable keeping track of how much to shift the Expandos down from the first one in pixels
var nGNodeIteration:Number = 0;
var nTest:Number = 0;
var firstLabel:Array = [];
var nTestArray:Array = [];
////////////XML OPERATION AND RELATED LOOPS///////////////
var xmlExpandos:XML = new XML();
xmlExpandos.ignoreWhite = true;
xmlExpandos.load("xml/expandos.xml");
xmlExpandos.onLoad = function():Void {
var mlImageLoader:MovieClipLoader = new MovieClipLoader();
if (xmlExpandos.firstChild.hasChildNodes()) {
// I'm using firstChild to iterate through the childNodes of each Node.
for (var aNode:XMLNode = xmlExpandos.firstChild.firstChild; aNode != null; aNode = aNode.nextSibling) {
if (aNode.nodeType == 1) {
aNodeIndex = aNode.attributes.nodeIndex;
firstLabel.push(aNode.attributes.label);
// To begin with, I'm creating a few empty movieclips which will store the image and the label (or labels) per node
localRoot.createEmptyMovieClip(["mLevelOne" + aNodeIndex],localRoot.getNextHighestDepth());
localRoot["mLevelOne" + aNodeIndex].createEmptyMovieClip("mImage",localRoot["mLevelOne" + aNodeIndex].getNextHighestDepth());
mlImageLoader.loadClip(aNode.attributes.icon,localRoot["mLevelOne" + aNodeIndex].mImage);
localRoot["mLevelOne" + aNodeIndex].createEmptyMovieClip("tField",localRoot["mLevelOne" + aNodeIndex].getNextHighestDepth());
localRoot["mLevelOne" + aNodeIndex].tField.createClassObject(mx.controls.Label,"tLabel",1);// Avoiding a depth conflict
localRoot["mLevelOne" + aNodeIndex].tField.tLabel.setStyle("fontSize","12");
localRoot["mLevelOne" + aNodeIndex].tField.tLabel.setStyle("fontFamily","Arial, Helvetica");
localRoot["mLevelOne" + aNodeIndex].tField.tLabel.text = aNode.attributes.label;
localRoot["mLevelOne" + aNodeIndex].tField.tLabel._x = 22;
localRoot["mLevelOne" + aNodeIndex].tField.tLabel._y = 2;
localRoot["mLevelOne" + aNodeIndex].tField.tLabel._width = localRoot["mLevelOne" + aNodeIndex].tField.tLabel.text.length * 14;
}
// Does the current node represented by the iteration of the loop have any childNodes?
if (aNode.hasChildNodes()) {
for (bNode = aNode.firstChild; bNode != null; bNode = bNode.nextSibling) {
if (bNode.nodeType == 1) {
bNodeIndex = bNode.attributes.nodeIndex; // Workaround variable I created to help me identify the hierarchy of the current node
localRoot["mLevelOne" + aNodeIndex].createEmptyMovieClip(["mLevelTwo" + bNodeIndex],localRoot["mLevelOne" + aNodeIndex].getNextHighestDepth());
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].createEmptyMovieClip("mImage",localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].getNextHighestDepth());
mlImageLoader.loadClip(bNode.attributes.icon,localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].mImage);
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].createEmptyMovieClip("tField",localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].getNextHighestDepth());
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.createClassObject(mx.controls.Label,"tLabel",1);
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel.setStyle("fontSize","12");
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel.setStyle("fontFamily","Arial, Helvetica");
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel.text = bNode.attributes.label;
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel._x = 22;
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel._y = 2;
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex]._x = 8;
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel._width = localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex].tField.tLabel.text.length * 14;
localRoot["mLevelOne" + aNodeIndex]["mLevelTwo" + bNodeIndex]._visible = false;
}
}
}
}
// From what I gather, there are up to SEVEN levels that an Expando can open, thus I will need loops to handle at least 7 levels of Expandos. Oh joy. I'm naming each variable that holds a level levelOne, levelTwo, and so on. This is, keeping in mind that the actual XML file contains seven levels because of the parent node (<Expandos>), which I include in order to have a well-formed XML file. The loops need to evaluate if the current level has entries or not before proceeding. This will be fun.
/************************************************************************************************************
*************************************************************************************************************
This is where the code to control the whole Expandos deal should be. Placement, functions, transformations.
It's kicking my ass...
*************************************************************************************************************/
if (aNodeIndex == 0) {
localRoot["mLevelOne" + aNodeIndex]._y = 0;
} else {
localRoot["mLevelOne" + aNodeIndex]._y = localRoot["mLevelOne" + (aNodeIndex - 1)]._height + nLevelOneShift;
nLevelOneShift += nShiftAmount;
trace(nLevelOneShift);
}
nTestArray.push(nTest);
nTest++;
}
}
// Placement for the Top Expandos
for (var aNode:XMLNode = xmlExpandos.firstChild.firstChild; aNode != null; aNode = aNode.nextSibling) {
trace(nTestArray + " the array nTest");// I got my test array working alright. Too bad I'm not experienced at all with them yet....
trace(localRoot["mLevelOne" + nTest].mImage + " testing if this is even recognized as existing");// returns undefined...
//nTest++;
aNodeIndex = aNode.attributes.nodeIndex;
trace(aNodeIndex + " aNode Index");
localRoot["mLevelOne" + aNodeIndex].onRelease = function():Void {
trace(this);
trace(localRoot["mLevelOne" + aNodeIndex]._height + " height");
trace(localRoot["mLevelOne" + aNodeIndex].mImage);
//trace (aNode[nTestArray[aNodeIndex]].attributes.label);
trace([nTestArray[aNodeIndex]]);// Always return last index in array. Shouldn't this loop through them?
//localRoot["mLevelOne" + aNodeIndex].mImage.hitArea = localRoot["mLevelOne" + aNodeIndex].mImage;
//localRoot["mLevelOne" + aNodeIndex].mImage.onRelease = function():Void {
//trace(this);
//};
};
}
var oMouseListener:Object = new Object();
oMouseListener.onMouseUp = function() {
trace(nShiftBelowOne);
};
Mouse.addListener(oMouseListener);
trace(firstLabel);
};
Well, those are my files since there are no entities in the stage, just those scripts in the main timeline.
But anyway, I see your point, and I'm grateful that you're willing to look at it. Now, I'm not sure if it would be wise to upload them from my company's laptop so I will do so from mine when I'm off for the day.
Reply With Quote
