Colin Wren's Blog

I’ve just put up another test, this time I’m letting you edit the xml file, so you can see how it works. To use it just enter a numeric value (preferably under 153 if you want it to stop, or above if you want the whole thing to play). It’ll screw up if you enter text! When you reload the page you will see the tree grow again, but it will stop when it hits the value you entered. I’m hoping to let you change other things as well such as colour of the tree in future tests. Though that might take a while, due to the fact I’ll have to draw it all. Anyways you can access it at http://www.growyourownhuman.com/tests/test4

Following the last post, I noticed that it didn’t work too well when I increased the number soooooo a new test has been conducted and I know this one for sure works.

This test is using the xml data to make the ‘box’ wider so it looks like like a bar filling the screen. I’m going to be using this to run my plant animation. I also noticed in the last post that Wordpress is retarded and screwed up the PHP code I put it. Not of to a good start.

Anyways this test uses a localised xml file but you could just link it to the one you put up in the last example. So there’s no hit-counter script but at least this example works

You can download the files from http://www.growyourownhuman.com/tests/test3/source.zip

The XML file is the same as the last examples, this is the action on the first script

//XMLLLLLLLLLLLLL
// create an xml object
var hits_xml:XML = new XML();
// remove all spaces etc
hits_xml.ignoreWhite = true;
// is the xml file loaded?
hits_xml.onLoad = function(loaded) {
//well if it we want to do stuff dont we
if (loaded) {
//so lets make a new variable called hit, and we want it be a number, but use the value from a node as the number
var hit:Number = Number(hits_xml.childNodes[0].firstChild.firstChild.nodeValue);
//and then display that number in a dynamic text box
_root.number_hits = hit;
}
}
//this loads it
hits_xml.load("hits.xml");
And on the box movieclip (called boxxy) I added these actions

onClipEvent(enterFrame){
if(_root.boxxy._xscale < _root.number_hits){
_root.boxxy._xscale = _root.boxxy._xscale + 10;
}
}
So that's it lol

Ok my first (proper) test is up, When I did my original test (Test 1) but due to me using a text file used as a hit counter for a website I made for a client. I couldn’t get the number from it, thanks to artifacts making it impossible. BUT!

If You have been visiting the main site, you may see that the file extension has changed from .html to .php . This is because I have attached a hit counter to the front page, every time you visit it the number in the hit-counter’s xml file is increased by 1. The test that I just made uses the xml file to grab the amount of hits the front page has received. This then changes the length of the tree in the test, for some reason the number of hits isn’t displayed on the test I’ve put on the internet though it works on my mac… weird.

Anyways Now for the COOOOOODDDEEEEEEE

Creating the hit-counter
There are 2 parts to this, you need to create a .php file and a .xml file, I’ll go over the .php file now
So create a new .php file (I called mine hitcounter.php) and copy this into it

/*so lets load the xml file */
$doc = new DOMDocument();
$doc->load( 'hits.xml' );
/*lets find the node in the xml file and get the existing value from it */
$hits = $doc->getElementsByTagName( "hits" );
$count = $hits->item(0)->nodeValue;
/* add 1 to the value and then change the value to the new one */
$counter = $count + 1;
$hits->item(0)->nodeValue = "$counter";
/*now save the file and tada it's updated */
echo $doc->saveXML();
$doc->save("hits.xml") ;
?>

The xml file consists of 2 nodes, the root node and the hits node, so create a new xml file and copy this into it.



13

So this has sorted out the hard part of it. Next is adding it to the front page (though you can add it to any page)

Adding the hit-counter to your front page
Create a bog standard html page, make it look pretty and then change the extension to .php .
Now go into your html file and somewhere in the body, add a new div.

If you don’t want anyone to see it, just go into your CSS file and add a new identifier called #counter and set the display to Hidden.

Now for the flashy-ness
I downloaded this awesome tree growing animation from SWF Spot and added some sneaky little code in there which, grabs the number from the xml file and then stunts the tree’s growth based on that number. If you want to change it, just change the number in the xml file.
This is what I added

//XMLLLLLLLLLLLLL
var hits_xml:XML = new XML();
hits_xml.ignoreWhite = true;
hits_xml.onLoad = function(loaded) {
if (loaded) {
var hit:XMLNode = hits_xml.childNodes[0].firstChild.firstChild.nodeValue;
//trace(hits_xml.childNodes[0].firstChild.firstChild.nodeValue);
_root.number_hits = hit;
}
};
hits_xml.load("http://www.yourdomain.com/hits.xml");
The above part can be added anywhere as long as it’s not in a function

onEnterFrame = function () {
//Grow the tree while it is under 1000 branches
if (tree.length //clear the drawn tree in the previous frame
clear();
//Begin the recursive function drawSegment.
//Process the root branch, and start it at the 0,0 position
drawSegment(0,0,0);
}
};
In the above code, I changed the if (tree.length<1000) in the original to my hit variable so it goes on the value in the hit counter.

You can check out my test at http://www.growyourownhuman.com/tests/test2/ and you can download the source files at http://www.growyourownhuman.com/tests/test2/source.zip. The source code was made in CS3
Enjoy!