A Flash Developer Resource Site

Page 2 of 2 FirstFirst 12
Results 21 to 31 of 31

Thread: Parsing with a 2nd Array

  1. #21
    Senior Member
    Join Date
    May 2001
    Location
    Holland
    Posts
    286
    Ouch, my mistake, sorry...

    Here's the right xml-sample:

    Code:
    <?xml version="1.0"?>
    <articles>
    <category name="Category 1Category 1 Category 1Category 1">
    	<article>
    		<name>articlename 1 of category 1</name>
    		<text>articletext 1 van category 1</text>
    		<link>mailform.php?artikelID=1</link>
    	</article>
    	<article>
    		<name>articlename 2 of category 1</name>
    		<text>articletext 2 van category 1</text>
    		<link>mailform.php?artikelID=2</link>
    	</article>
    	<article>
    		<name>articlename 3 of category 1</name>
    		<text>articletext 3 van category 1</text>
    		<link>mailform.php?artikelID=3</link>
    	</article>
    </category>
    <category name="Category 2">
    	<article>
    		<name>articlename 1 of category 2 articlename 1 of category 2 articlename 1 of category 2articlename 1 of category 2 articlename 1 of category 2</name>
    		<text>articletext 1 van category 2</text>
    		<link>mailform.php?artikelID=4</link>
    	</article>
    	<article>
    		<name>articlename 2 of category 2</name>
    		<text>articletext 2 van category 2</text>
    		<link>mailform.php?artikelID=5</link>
    	</article>
    	<article>
    		<name>articlename 3 of category 2</name>
    		<text>articletext 3 van category 2</text>
    		<link>mailform.php?artikelID=6</link>
    	</article>
    </category>
    <category name="Category 3">
    	<article>
    		<name>articlename 1 of category 3</name>
    		<text>articletext 1 van category 3</text>
    		<link>mailform.php?artikelID=7</link>
    	</article>
    	<article>
    		<name>articlename 2 of category 3</name>
    		<text>articletext 2 van category 3</text>
    		<link>mailform.php?artikelID=8</link>
    	</article>
    	<article>
    		<name>articlename 3 of category 3</name>
    		<text>articletext 3 van category 3</text>
    		<link>mailform.php?artikelID=9</link>
    	</article>
    	<article>
    		<name>articlename 4 of category 3</name>
    		<text>articletext 4 van category 3</text>
    		<link>mailform.php?artikelID=10</link>
    	</article>
    </category>
    <category name="Category 4">
    	<article>
    		<name>articlename 1 of category 4</name>
    		<text>articletext 1 van category 4</text>
    		<link>mailform.php?artikelID=11</link>
    	</article>
    	<article>
    		<name>articlename 2 of category 4</name>
    		<text>articletext 2 van category 4</text>
    		<link>mailform.php?artikelID=12</link>
    	</article>
    	<article>
    		<name>articlename 3 of category 4</name>
    		<text>articletext 3 van category 4</text>
    		<link>mailform.php?artikelID=13</link>
    	</article>
    	<article>
    		<name>articlename 4 of category 4</name>
    		<text>articletext 4 van category 4</text>
    		<link>mailform.php?artikelID=14</link>
    	</article>
    	<article>
    		<name>articlename 5 of category 4</name>
    		<text>articletext 5 van category 4</text>
    		<link>mailform.php?artikelID=15</link>
    	</article>
    </category>
    </articles>

  2. #22
    Senior Member
    Join Date
    Oct 2005
    Posts
    148
    Thanks. I'm heading out right now, but I'll take a look at it later today.

  3. #23
    Senior Member
    Join Date
    Oct 2005
    Posts
    148
    Ok I now see what you mean. My calculation for the positioning of the article name clips (mcArticles) rows was based on a fixed and constant value to space them apart.

    Since your new xml document has differing lengths for the article names, instead of a constant amount of characters, the height of the articleclips are different, so you're getting that overlap.

    Ok this is easy to change. We'll make the calculations more dynamic, allowing for any variation in the article clips height that is changed by the text length of the nested textfield.

    Inside your article loop, anyplace after you've set the text/htmlText value of the textfields, use these two lines to calculate the rows (_y position) of the mcArticle clips.

    Code:
    //...inside article loop, anywere after textfield.text/htmlText property has 
    // been set..(ie articleTF.text = articleName);
    mcArticle._y = mcArticleYOffset + 3;
    mcArticleYOffset += mcArticle._height;
    Notice that I'm adding a new height value to my mcArticleYOffset value after I set the position. Everytime you make a new clip, I incrementally increase the mcArticleYOffset value.

    Now the most important part. We need to reset this offset value everytime there is a new category loop, so each new set of article clips will start their column from the top (_y = 0);

    Put this above your article loop, so that its outside the article loop but still inside the category loop.

    Code:
    //... category loop code
    var mcArticleYOffset = 0;
    // article loop
    	//for (j=0; j<levelTwo.length; j++) {
    There you go. Actually I'm glad you asked for that. This is better way to determine the _y positioning for the article rows, since it can handle differing heights (and text lengths).

    Ok, just to keep consistency incase someone else in the future wants to refer to this thread, here's my script updated with the new article row positioning calculations.

    Additions in bold. Just 3 new lines of code. Scroll to the bottom to see.
    Code:
    var categories = new Array();
    
    my_xml = new XML();
    my_xml.ignoreWhite = true;
    my_xml.load("data.xml");
    my_xml.onLoad = parseXMLData;
    function parseXMLData(success) {
    	if (success) {
    		var theRoot:XMLNode = this.firstChild;
    		createMenu(theRoot); 
    	} else {
    		trace("There was an error parsing the XML data");
    	}
    }
    
    function createMenu(theRoot) {
    	var levelOne = theRoot.childNodes;
    	//
    	// category loop
    	for (i=0; i<levelOne.length; i++) {
    		
    		var levelTwo = levelOne[i].childNodes;
    		//
    		// // creating movieclips out of the xml
    		// make variable to use as label for textfield
    		var categoryName = levelOne[i].attributes.name;
    
    		// create mcs
    		var cat = this.createEmptyMovieClip("cat"+i, this.getNextHighestDepth());
    		cat._y += i * 22;
    
    		// texfield
    		var tf:TextField = cat.createTextField("tf", 0, 0, 0, 0, 20);
    		tf.autoSize = "left";
    		tf.border = true;
    		tf.text = categoryName;
    
    		// clip to hold article movieClips, so I can target them as a group
    		var articleHolder = this.createEmptyMovieClip("articleHolder"+i, this.getNextHighestDepth());
    		articleHolder._x = (i * 145) + 75; // 75 is an indent so no overlap over cat buttons
    		//
    		// hide articleHolder
    		articleHolder._visible = false;
    		//
    		cat.id = i;
    		/*cat.onRelease = function() {
    
    			// toggle articleHolder mc visibility
    			_root["articleHolder"+this.id]._visible = !_root["articleHolder"+this.id]._visible;
    		}*/
    		//
    		// add category mc clips to categories array
    		categories.push(cat);
    		//
    		// add rollOver event handler to category mc clips
    		cat.onRollOver = function() {
    			//
    			// show articleHolder associated with this category
    			_root["articleHolder"+this.id]._visible = true;
    			//*
    			// hide all other category button except for current selected
    			// loop through categories array
    			for (items in categories) {
    				//
    				// make sure id does not match current id
    				if (categories[items].id != this.id) {
    					trace("categories id besides current: "+categories[items].id);
    					//
    					// hide all other article container clips
    					_root["articleHolder"+ categories[items].id]._visible = false;
    				}
    			}
    			//*/
    			/*
    			for (var n=0; n < categories.length; n++) {
    				//trace("categories[n].id: "+categories[n].id);
    				if (categories[n].id != this.id) {
    					//
    					trace("other id's: "+categories[n].id);
    					_root["articleHolder"+ categories[n].id]._visible = false;
    				}
    			}*/
    		}
    		// on every new category loop, reset the starting _y position of mcArticle clips 
    		var mcArticleYOffset = 0;
    
    		// article loop
    		for (j=0; j<levelTwo.length; j++) {
    			
    			var articleName = levelTwo[j].childNodes[0].childNodes[0].nodeValue;
    			// mc creation
    			var mcArticle = articleHolder.createEmptyMovieClip("mcArticle"+j, articleHolder.getNextHighestDepth());
    			//mcArticle._y += j * 20;
    			var articleTF:TextField = mcArticle.createTextField("articleTF", 0, 0, 0, 0, 20);
    			articleTF.autoSize = "left";
    			articleTF.border = true;
    			articleTF.text = articleName;
    			//
    			// position mcArticle clips
    			mcArticle._y = mcArticleYOffset + 3;
    			// add the current mcArticle clip's height to the offset variable
    			mcArticleYOffset += mcArticle._height;
    		}
    	}
    }

  4. #24
    Senior Member
    Join Date
    May 2001
    Location
    Holland
    Posts
    286
    Hi Pigpen,

    Thank you for all, I've never could have done it without your help. First I thought I had to learn one step, namely learning to extract xml-data that has categories. But then quite some other aspects emerged, I'm fortunate that you replied on my post. Big thanx!

    Maybe to make it even more perfect: I couldn't find a way to let the orange color of the button-over effect stay orange on rollOut. If it stays orange until another button has a rollOver, then user would see consistency between the active category and the related articles.

    I thought that it had to be programmed somewhere at the part of the "switch", because I now set different colours at rollOver and rollOut. Hou would you program a color-switch?
    I couls always use a workaround by showing the category name in a textfield on top of the articles.

    Best regards,
    Michiel

    I'm eager to learn that one!

  5. #25
    Senior Member
    Join Date
    Oct 2005
    Posts
    148
    Yeah, I follow you. Change the color of the currently rolled over button to orange, and show article clips, then only change colors when a new category button is rolled over.

    Thats the same logic as the visibility change we did earlier on the category button. So you have the framework already there, so its just a matter of adding some lines to change the clips colors.

    In your category onRollOver function, just add a line that changes the color, after each of the lines that changes the visibility.

    So the first line in the rollOver function, sets the current category clip's visiblity to true, so after that just add a similiar line that changes the mc's color to orange.

    Inside the loop that goes through all the other category clips, after the "if check which compares id's, you have a line that changes all the clips visible property to false so they are hidden. Just add another line that set's the clip color back to its default color.

    Make sense?

  6. #26
    Senior Member
    Join Date
    May 2001
    Location
    Holland
    Posts
    286
    Yes, it makes sense but it doesnt work. I tried:

    Code:
    cat.onRollOver = function() {
    			// show articleHolder associated with this category
    			holdd.hold1["articleHolder"+this.id]._visible = true;
    			myTextFormat = new TextFormat();
    			myTextFormat.color = 0xcc9900;
    			this.tf.setTextFormat(myTextFormat);
    			//
    			// hide all other category button except for current selected
    			// loop through categories array
    			for (items in categories) {
    				//
    				// make sure id does not match current id
    				if (categories[items].id != this.id) {
    					//trace("categories id besides current: "+categories[items].id);
    					holdd.hold1.categories[items].id._visible = true;
    					// hide other article container clips
    					holdd.hold1["articleHolder"+categories[items].id]._visible = false;
    					myTextFormat = new TextFormat();
    					myTextFormat.color = 0xffffff;
    					this.tf.setTextFormat(myTextFormat);
    				}
    			}
    		};

  7. #27
    Senior Member
    Join Date
    May 2001
    Location
    Holland
    Posts
    286
    Hi Pigpen,

    I just thought that this could be a good basis to create a webshop. If true, there should only be a shopping cart that should be programmed, right? I'm not asking you to di this by the way, but could you give me a hint on how to start with that? Should I use a array.push method to add variables to a movieclip?

  8. #28
    Senior Member
    Join Date
    Oct 2005
    Posts
    148
    You're almost there, but you just have to change one line, the last line of your 2nd text formatting code.

    Code:
    this.tf.setTextFormat(myTextFormat);
    should be:

    Code:
    categories[items].tf.setTextFormat(myTextFormat);
    This is because you are setting textfields of the other clips, not the currently rolled over clip.

    Your 1st text formatting code is correct, as you do want to set the currently rolled over clip.

    Code:
    this.tf.setTextFormat(myTextFormat);
    your revised script:
    Code:
    cat.onRollOver = function() {
    			// show articleHolder associated with this category
    			holdd.hold1["articleHolder"+this.id]._visible = true;
    			myTextFormat = new TextFormat();
    			myTextFormat.color = 0xcc9900;
    			this.tf.setTextFormat(myTextFormat);
    			//
    			// hide all other category button except for current selected
    			// loop through categories array
    			for (items in categories) {
    				//
    				// make sure id does not match current id
    				if (categories[items].id != this.id) {
    					//trace("categories id besides current: "+categories[items].id);
    					holdd.hold1.categories[items].id._visible = true;
    					// hide other article container clips
    					holdd.hold1["articleHolder"+categories[items].id]._visible = false;
    					myTextFormat = new TextFormat();
    					myTextFormat.color = 0xffffff;
    					categories[items].tf.setTextFormat(myTextFormat);
    				}
    			}
    		};
    Here's my revised script - added a bunch of textfield/textFormat changes so my category clips have an orange background with white text when rolled Over. Also the mcArticle clips have the same orange color and white text.

    Also instead of using the textFormat name, "myTextFormat", for all my textfield formatting, I used catTextFormat for my category clips and articleTextFormat for my article clips. See below. It doesn't matter what you call them ofcourse, but I'm just picky about names, and like to differentiate between the two textFormat objects.
    Code:
    var categories = new Array();
    
    my_xml = new XML();
    my_xml.ignoreWhite = true;
    //my_xml.load("data.xml");
    my_xml.load("dreFixXMLDoc2WithCat.xml");
    my_xml.onLoad = parseXMLData;
    function parseXMLData(success) {
    	if (success) {
    		var theRoot:XMLNode = this.firstChild;
    		createMenu(theRoot); 
    	} else {
    		trace("There was an error parsing the XML data");
    	}
    }
    
    function createMenu(theRoot) {
    	var levelOne = theRoot.childNodes;
    	//
    	// category loop
    	for (i=0; i<levelOne.length; i++) {
    		
    		var levelTwo = levelOne[i].childNodes;
    		//
    		// // creating movieclips out of the xml
    		// make variable to use as label for textfield
    		var categoryName = levelOne[i].attributes.name;
    
    		// create mcs
    		var cat = this.createEmptyMovieClip("cat"+i, this.getNextHighestDepth());
    		cat._y += i * 22;
    
    		// textfield
    		var tf:TextField = cat.createTextField("tf", 0, 0, 0, 0, 20);
    		tf.autoSize = "left";
    		tf.border = true;
    		tf.text = categoryName;
    		// add color to textfield background
    		tf.background = true;
    		tf.backgroundColor = 0xFFFFFF;
    
    		// clip to hold article movieClips, so I can target them as a group
    		var articleHolder = this.createEmptyMovieClip("articleHolder"+i, this.getNextHighestDepth());
    		articleHolder._x = (i * 145) + 75; // 75 is an indent so no overlap over cat buttons
    		//
    		// hide articleHolder
    		articleHolder._visible = false;
    		//
    		cat.id = i;
    		/*cat.onRelease = function() {
    
    			// toggle articleHolder mc visibility
    			_root["articleHolder"+this.id]._visible = !_root["articleHolder"+this.id]._visible;
    		}*/
    		//
    		// add category mc clips to categories array
    		categories.push(cat);
    		//
    		// add rollOver event handler to category mc clips
    		cat.onRollOver = function() {
    			//
    			// show articleHolder associated with this category
    			_root["articleHolder"+this.id]._visible = true;
    			//
    			// change color of textfield properties
    			this.tf.backgroundColor = 0xFF6600;
    			var catTextFormat = new TextFormat();
    			catTextFormat.color = 0xffffff;
    			this.tf.setTextFormat(catTextFormat);
    			//
    			// hide all other category button except for current selected
    			// loop through categories array
    			for (items in categories) {
    				//
    				// make sure id does not match current id
    				if (categories[items].id != this.id) {
    					trace("categories id besides current: "+categories[items].id);
    					//
    					// hide all other article container clips
    					_root["articleHolder"+ categories[items].id]._visible = false;
    					//
    					// reset the text styles of all other category clips
    					categories[items].tf.backgroundColor = 0xFFFFFF;
    					var catTextFormat = new TextFormat();
    					catTextFormat.color = 0x000000;
    					categories[items].tf.setTextFormat(catTextFormat);
    				}
    			}
    			//*/
    			/*
    			for (var n=0; n < categories.length; n++) {
    				//trace("categories[n].id: "+categories[n].id);
    				if (categories[n].id != this.id) {
    					//
    					trace("other id's: "+categories[n].id);
    					_root["articleHolder"+ categories[n].id]._visible = false;
    				}
    			}*/
    		}
    		// on every new category loop, reset the starting _y position of mcArticle clips 
    		var mcArticleYOffset = 0;
    
    		// article loop
    		for (j=0; j<levelTwo.length; j++) {
    			
    			var articleName = levelTwo[j].childNodes[0].childNodes[0].nodeValue;
    			// mc creation
    			var mcArticle = articleHolder.createEmptyMovieClip("mcArticle"+j, articleHolder.getNextHighestDepth());
    			//
    			// textField 
    			var articleTF:TextField = mcArticle.createTextField("articleTF", 0, 0, 0, 0, 20);
    			articleTF.autoSize = "left";
    			articleTF.border = true;
    			articleTF.text = articleName;
    			//
    			// textField formatting
    			// change color of textfield properties
    			articleTF.background = true;
    			articleTF.backgroundColor = 0xFF6600;
    			//
    			var articleTextFormat = new TextFormat();
    			articleTextFormat.color = 0xffffff;
    			articleTF.setTextFormat(articleTextFormat);
    			//
    			// position mcArticle clips
    			// // mcArticle._y += j * 20;
    			mcArticle._y = mcArticleYOffset + 3;
    			// add the current mcArticle clip's height to the offset variable
    			mcArticleYOffset += mcArticle._height;
    		}
    	}
    }

  9. #29
    Senior Member
    Join Date
    Oct 2005
    Posts
    148
    Quote Originally Posted by Schenkius
    Hi Pigpen,

    I just thought that this could be a good basis to create a webshop. If true, there should only be a shopping cart that should be programmed, right? I'm not asking you to di this by the way, but could you give me a hint on how to start with that? Should I use a array.push method to add variables to a movieclip?
    Shopping carts can be quite involved and can be complex as you are dealing with many things -- manipulating user input, calculating prices, keeping track of what they selected, having code to delete their selections, possibly making flash or javascript cookies to store persistant data, code to check item availability, etc. And then there's the checkout process which can include interfacing with your backend to actually handle the transaction, etc. Also there's the whole process of error handling, automated email responses for successful transactions, etc Manipulating arrays would only be one step in many.

  10. #30
    Senior Member
    Join Date
    May 2001
    Location
    Holland
    Posts
    286
    Hi Pigpen,

    Yes, but many things of what you mention is what I already learnt. I was basically wondering on how to pass values to an mc (the cart).
    I thought to create an mc that is always on stage (visible or not) that holds an array of selected (.pushed?) variables? Is that the basic approach on populating an mc with items from another array?

    Thank you for the idea of changing the background of the category buttons on mouse over, instead of the text color. It's more intuitive!

  11. #31
    Senior Member
    Join Date
    Oct 2005
    Posts
    148
    Yeah, you could Array.push the item into an empty shopping cart array. You would have to another array, your products array, that holds all the products. And then use the id, that the user selected, to select the right index from the product array and push that index into your cart array.

    You'd would use Array.pop to delete it from your shopping cart array.

    Then you'd have some sort of logic (code) that would read the shopping cart array, to visually update it on the screen, like populate your shopping cart mc with the right product mcs, and with the necessary product data.

    I would read up on the array class and its methods to fully understand it. Try googling for flash shopping carts etc.

    Myself, I would go with an entirely OOP approach with custom classes and methods to handle the database interfacing and to parse them into discreet objects, very different what we've done here in this xml. So my personal approach would be very abstract, like creating custom cart objects with its own methods, etc.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center