Thursday, September 08, 2005

XML in FLASH

DOWNLOAD HELP FILE

XML and Flash combination had been around for a long time now.From its crude availability from the time of Flash 5 to the exhuberent features in mx 2004,XML and Flash has come a long way.But still novice Flashers,with a designer background,find it a bit hard to get the concept.Since i have nothing else to do today than just wait for Desperate Housewives to be aired,im writing this beginner tutorial crap.So go ahead and enjoy this sucker tutorial on XML and Flash.

Before starting,let me tell you what XML is.Its nothing other than a sloth brain!!It doesnt even deserved to be called a "tec
honology".XML is just a storehouse/representation of information,infact "tagged" information.TAGGED? You've seen it in HTML.But in HTML, tags are like commands for the browser.HTML Tags tell the browser "how to display the information between the tags".In XML this is not the case.XML tags are made according to your wish for your sake.Wait a minute.What am i doing here?! Comparing HTML and XML ?That sucks.They are not even comparable!!!HTML and XML are entirely different things except for the tag thing.XML is more related to databases than to HTML(because XML is a way of storing/representing data).It cant do anything on its own.

Unzip the downloaded file.Inside you will find q.xml.Open it.

Well,as you can see
its some info related to Cricket(i hate cricket). We will be using it throughout this tutorial. Now to see the stuff inside the xml file in a better HUMAN-PERCIVABLE form,please open it in Firefox.If you have tried ESPN or any other sports channel,you must have noticed the "score-tickers" they showcase.These score-tickers actually work on an XML file just like this.Once you have learned this tutorial ,you too can do this!

The rest of the tutorial shows you how to mix Flash and XML.I assume you have basic concepts of Flash movie timeline,Variables,Dynamic text fields etc.
We have very simple objectives:
Show the content of the XML ,ie. runs from teamA and teamB and batsmen names, in our flash movie.But this involves the follo
wing actions:
  • Getting the XML data into our Flash movie
  • Waiting for the whole of XML to get loaded
  • Mining out useful information(ie.,names and score values etc.)
  • Displaying the values in our Flah movie
  • Having a cup of tea.

So lets go ahead. First things first.Lets make the basic flash movie.Open Flash IDE and add layers and frames as shown below(if u cant do it,u r a real sucker, kid! Time to learn real good basic stuff.You will get it at actionscript.org).
The first layer named "stop actions" is where you will put the stop(); code.Select frame 1 of bottom layer and add the following code to it.

stop();


This code prevents the movie head from advancing to the subsequent frames until furthur notice!!Do the same to the second frame.
The second layer contains the code that gets the XML and stuff like that into our flash movie.This is the heart and soul of our movie.Done!Now save the movie into the folder where you saved q.xml .

Getting the XML data into our Flash movie & Waiting.
Usually,you load the XML from an outside file into an XML object in Flash.XML Object? Its just a fancy name for a container that will hold the XML inside our flash movie.You can create one for this movie by adding the following code into the first frame of layer2
scorer=new XML();
Thats it! You just created an XML object with a name "scorer"! Fine!But space charachters,retun charachters which are not visible to the naked eye are visible to our new object!.Such charachters are collectively known as whitespaces in the flash realm.Right now,this is bad for us.So we should tell our new XML object not to take care of stuff like that.So add the following code next as the second line:
scorer.ignoreWhite=true;
But we havent told the XML object which file to load the XML from.This is done as follows:
scorer.load("q.xml");
When flash encounters this line,it willl search for the file q.xml in the present directory.Then it loads the file into the XML object named "scorer".

Right now,in our movie,because of the stop command in the first frame of layer one,our playhead would not goto frame two,where we plan to exhibit our variables from the XML object.This can be accomplished by using the world-famous gotoAndPlay command.But if we do that,there is a trap waiting for us.As movie starts playing,when it encounter the load command,it starts to load the specified XML file.As it starts to load,our movie wont wait.It is eager to carry out all commands.It encounter the gotoAndPlay command and will go to the second frame!! There it encouter the task to display the variables from XML object.In case our movie encountered this task before loading whole of the XML file,the variables wont be displayed,instead it will show something like "null" or "undefined"!!To prevent such a disaster,we will check if the whole of XML is loaded.This can be done using the following code:
scorer.onLoad = function() {
gotoAndPlay(2);
};
This code tells the playhead to go and play frame2 once the XML is loaded fully into the XML object scorer.
So now we have our XML data inside our flash movie,in a container called scorer.How can we make use of it? Lets go to the next step.

Mining out useful information.
Its nothing more than getting the values from XML object.For this you need to have a basic understanding of how XML is addressed in flash. Take a look at our XML file.The whole of the stuff is tagged between a "cricket" tab.Since our XML data is inside an XML object called scorer,the cricket tab will be addressed as:
scorer.childNodes[0]
Lets go back to our XML file.Inside cricket tab,we have two tabs,"scorecard" and "batting" respectively."scorecard" will be addressed as :
scorer.childNodes[0].childNodes[0]
and , "batting" will be addressed as:
scorer.childNodes[0].childNodes[1]
Get the point? Isnt it simple?
Back in XML file, inside scorecard you see two tabs,"teamA" and "teamB".Each of these tabs have something called "runs" and "overs".These are called attributes.

Now lets start "mining" data(essentially i mean the addressing method).

The address of the value New Zealand will be:
scorer.childNodes[0].childNodes[0].childNodes[0].firstChild
When flash sees this,it will look for scorer object.Inside it ,it looks for the first tab(now it has reached cricket tab),inside of which it looks for cricket's childNode[0],ie.scorecard,then its childNode[0],teamA;and finally its "firstChild",which is the value "New Zealand".
The same way,for the value " Peninsula",the address would be:
scorer.childNodes[0].childNodes[0].childNodes[1].firstChild
But how to get the address of an attribute?This is done as follows.
If you want to get the runs value of teamA ,just use the following address:
scorer.childNodes[0].childNodes[0].childNodes[0].attributes.runs
The same way for the overs value,use the following address:
scorer.childNodes[0].childNodes[0].childNodes[0].attributes.runs
For the overs value of teamB,use the following address:
scorer.childNodes[0].childNodes[0].childNodes[1].attributes.overs
Just use the same convention for everything!!Its as simple as that.

Now lets display the values we "mined out" in flash.We will be diplaying the values "Peninsula" ,batsman1's name (ie. foobarking) and overs of New Zealand.For this purpose,we use some variables.Take frame two of layer two("info").Open the actions panel and write down the following:
country=scorer.childNodes[0].childNodes[0].childNodes[1].firstChild;
batsman1=scorer.childNodes[0].childNodes[1].childNodes[0].firstChild;
overs=scorer.childNodes[0].childNodes[0].childNodes[0].attributes.overs;

country,batsman1,overs are simple variables to which the values will be assigned.From now on,the variable values can be used anywhere in the flash movie.Create three dynamic text blocks on stage with variable names as country,batsman1,overs itself.Now test the movie.Satisfied?

SCOPE:
What you just learned is the same thing used by stock tickers,news tickers etc.availble on many sites.So go ahead and try more.Have a nice day! Dont forget to have a tea! :-p

9 comments:

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

nice tutorial.i wasted a lot of time on Macromedia documentation.But one thing I found missing is that ,XML Connector component is not mentioned here!

Anonymous said...

i need help with using XML Connector component in flash.Can u post a link?Why not wite one yourself?

Anonymous said...

Dude that was helpful.But ,I think it requires a bit of revision.Great work

Anonymous said...

cool blog

Efendi said...

Nice and brief tutorial ;)

Anonymous said...

nice, thx for that.
i have a book but its xml description is really bad. i looked in the internet for more information about flash and xml..nothing helpfully found.
i startet to hate xml&flash even that i knew it is very simple.
this tutorial is very understandable because you adress the attributes and values exact with just one long command. i didnt realized before that childNodes can be used as arrays, too. damn on me.

greetings from germany