This tutorial is about creating a simple database with XML and integrating it into Flash. "XML is the phuture of the web", somebody once wrote to me and that is what I am learning wherever something is written about XML. There are a number of ways to parse XML such as XSL or javascript. So why should we use flash to parse XML scripts? There are two major reasons: 1. Flash is platform/browser independent. Now there is another reason. Supposed you have text you want to show in combination with pictures, animations or movies. Flash is the most suitable program, which allows you to do that. With Flash MX capabilities to incorporate quicktime movies, flash becomes even more powerful. You will get a taste of that when you go through this tutorial.
Now what are you going to learn in this tutorial? You will learn A) how to create an XML file suitable for flash; B) how to access the XML tree using actionscript to create a database; C) how to create a simple search engine. This is actually a very simple approach to incorporate XML into flash, which means to me the possibilities are endless!? But now have a look at the final product of this tutorial and play around a bit. I strongly recommend you to put trace actions into the script to find out precisely what the variables stand for. Also you can eliminate things or add things. That's what I did to learn about XML and Flash.
Here one of the XML files used in this tutorial is shown starting with the XML declaration and followed by the XML tree. The xml syntax is very strict and unlike html is case sensitive. An opening tag (for example <models>) must be followed by a closing tag (</models> ).
<?xml version="1.0"?>
<models>
<monica name="Monica" photo="pic_1.swf">
age: 21
eye color: dark blue
hair color: blond
height: 179 cm
weight: 185 pounds
</monica>
<heather name="Heather" photo="pic_2.swf">
age: 30
eye color: black
hair color: dark brown
height: 170 cm
weight: 145 pounds
</heather>
<kim name="Kim" photo="pic_3.swf">
age: 25
eye color: green
hair color: black
height: 163 cm
weight: 125 pounds
</kim>
<models>
You should always test if your file has the correct syntax by opening it in your browser window. A correct file will show up like this.
Note: On some servers, especially free servers, XML files may be altered.
An incorrect file will be detected by the browser and give you a false statement. I put a file in the file collection, which has one mistake (fmodels_false.xml).
The XML tree
An XML file has the structure of a tree as shown in the figure below.
In order to get access to individual parts of the tree using actionscript we have to start at the root of the tree, which in this case is the root node <models>. Actionscript is based on microsoft´s Document Object Model (DOM). Check other tutorials in the Web for that. The principal to get access to the XML tree is basically very similar to the way to get access to the inside of a movieclip. There is a root or parent and there are children. But now let´s focus on the actual flash file. We will mainly focus on the functions related to the XML files. There is also a preloader for pics, which however will not be discussed further in detail here.
The Fla file: Stage
We will first plan and build a stage. Just open the fla file and look at the stage. There are several dynamic textfields, an input field for the search engine and two empty movieclips, which we need for preloading and loading the swf files. You can also load jpg files in Flash MX but I have used swf files because the power of flash using XML is to have animations played, which makes flash different from other XML parsers. All textfields have var names except for the big central textfield, which has the textfield name ´InstanceName_0´. This is important, because we are attaching a scrollbar to this field in case the text is larger than the field. I have to thank the Flash MX discussion board where I learnt how to do it correctly. The input field also gets a var name (var box in the property inspector). Further we put buttons on the stage but this is of course completely up to you.
The Fla file: Actionscript for buttons, uploading the XML file
Now open the actions panel and have a look at the scripts. At the top of the page is the preload script. Check the script attached to modelHolder_1 to learn more about tracing the loading event.
Any way, we first create a general function with two arguments, which will be for the individual name buttons. We call the function ´showModel(modelName,fileName)´. The var modelName is the actual name of the model such as Kim for example. The var fileName is any XML file we want to upload.
//optional! function to preload pics
function loadAll(firstPic,lastPic,picName){
for (j=firstPic;j<=lastPic;j++) {
duplicateMovieClip (_root.modelHolder_1,"pic_"+j, j);
setProperty ("pic_"+j, _alpha, (0));
loadMovie(picName+j+".swf","pic_"+j);
loadMovie(picName+j+".swf","modelHolder_1");
setProperty("modelHolder_1",_alpha, (0));
}
}
loadAll(1,6,"pic_");
loadMovie("agency.swf","modelHolder");
//general function to upload and get access to the xml files//for the buttons
function showModel(modelName,fileName) {
//this is to empty the preloader textfield
counter="";
//variables for the name of the model and for the xml file
var modelName;
var fileName;
//uploading the xml, model is just an instance we use here
model = new XML();
model.onLoad = newModel;
//this facilitates accessing the xml tree, since white//space is also considered childnode//the use of ignoreWhite, however, should be avoided if possible
model.ignoreWhite = true;
model.load(fileName);
The Fla file: Actionscript for buttons, accessing the XML file
We now have to get access to the XML file. We do that by creating a function containing a loop. In this function we search for the root node "models".
//function to get to the root node and the childnodes
function newModel() {
//loop going through the xml file whereby childNodes.length is the number of child nodes
for (var count01=0; count01<=model.childNodes.length; count01++) {
//the root node name "models"
if (this.childNodes[count01].nodeName.toLowerCase() == "models") {
//this var holds the complete xml file
modelsDescryption = this.childNodes[count01];
}
}
//function to get access to individual childnodes//modelsDescryption will carry over the extracted contents from the previous//function to the next function
findModels(modelsDescryption);
}
The Fla file: Actionscript for buttons, accessing individual child nodes
In the next function we will get access to child nodes by using another loop. Compare by using trace the contents of the var modelsDyscryption of the previous function with this function and see the difference.
//here we use a new argument for the function
function findModels(myModel) {
var myModel;
var modelName;
for (var count02=0; count02<=myModel.childNodes.length; count02++) {
if (myModel.childNodes[count02].nodeName.toLowerCase() == modelName) {
//we now have access to one childnode//now the var modelsDescryption holds only the contents of the first Child of//the childnode "modelName". modelName can be any of//the child nodes of our XML document
modelsDescryption = myModel.childNodes[count02].firstChild;
//this will show the firstChild content in the scrollbar textfield
InstanceName_0.text = modelsDescryption;
//here we are accessing the attribute "name"
headline = myModel.childNodes[count02].attributes.name;
//here we are accessing the attribute "photo"
pic = myModel.childNodes[count02].attributes.photo;
//we load the swf into an empty MC
loadMovie(pic,"modelHolder");
}
}
}
}
The Fla file: Actionscript for search engine
The first part of the search engine script is similar to the above script except that we don't need any arguments. We do not only search in one XML file but in two. The search is performed by first uploading the XML file and then looking for string matches.
//this is the function for the search engine
function searchModel() {
var modelName;
model = new XML();
model.onLoad = newModel;
model.ignoreWhite = true;
model.load("fmodels.xml");
function newModel() {
for (var count01=0; count01<=model.childNodes.length; count01++) {
if (this.childNodes[count01].nodeName.toLowerCase() == "models") {
modelsDescryption = this.childNodes[count01];
}
}
findMFModels(modelsDescryption);
}
Actionscript for search engine continuation...
Next we fill the textfield ´headline´ with the corresponding content and address the attributes myUrl containing the url and the attribute name having the same content as the corresponding childnodes. This is very important for the search capability. When the if statement here is positive the search string will be assigned to thisName and will hold only the search string.
We can now use thisName in the else if statement. We cannot use urlName, because this variable holds more
than one name. Even one of the names matches the others won't and the else if statement will always be executed
as well. So to have the search engine work the childnode names have to fit to an attribute with the same string
though not necessary the same case.
//here is a specific function for the search engine with the var myModel
function findMFModels(myModel) {
var myModel;
var modelName;
for (var count02=0; count02<=myModel.childNodes.length; count02++) {
//we are defining the var modelName here
modelName = myModel.childNodes[count02].nodeName.toLowerCase();
//here the string from the input textfield is compared//with the name of the childnodes
if (searchWindow.toLowerCase() == modelName) {
//if there is a match we do all this
modelsDescryption = myModel.childNodes[count02].firstChild;
InstanceName_0.text = modelsDescryption;
headline = myModel.childNodes[count02].attributes.name;
pic = myModel.childNodes[count02].attributes.photo;
loadMovie(pic,"modelHolder");
//if there is no match...//see below for special comment
}else if (searchWindow.toLowerCase() !== headline.toLowerCase()){
//we continue searching in another xml file, this can be done for many//xml files in a row
searchMModel();
}
}
}
}
Actionscript for search engine continuation...
This function is for the second XML file which will be searched as well.
//function for the second and last xml file in the search attempt
function searchMModel() {
var modelName;
model = new XML();
model.onLoad = newModel;
model.ignoreWhite = true;
model.load("mmodels.xml");
function newModel() {
for (var count01=0; count01<=model.childNodes.length; count01++) {
if (this.childNodes[count01].nodeName.toLowerCase() == "models") {
modelsDescryption = this.childNodes[count01];
}
}
findMaleModels(modelsDescryption);
}
function findMaleModels(myModel) {
var myModel;
var modelName;
for (var count02=0; count02<=myModel.childNodes.length; count02++) {
modelName = myModel.childNodes[count02].nodeName.toLowerCase();
//if there is a match we do all this
if (searchWindow.toLowerCase() == modelName) {
modelsDescryption = myModel.childNodes[count02].firstChild;
InstanceName_0.text = modelsDescryption;
headline = myModel.childNodes[count02].attributes.name;
pic = myModel.childNodes[count02].attributes.photo;
loadMovie(pic,"modelHolder");
//if here is also no match...
}else if (searchWindow.toLowerCase() !== headline.toLowerCase()){
//we give up and tell there was no match
headline = "";
InstanceName_0.text = "Sorry, this model is not in our database.";
loadMovie("agency.swf","modelHolder");
}
}
}
}
The Button Scripts
The Name Buttons
The script is simple. We execute the function showModels and specify the arguments as shown here for one button.
on (release) {
showModel("monica","fmodels.xml");
}
The Submit Search Button
We execute the search function.
on (release) {
searchModel();
}
Conclusion
I hope you enjoyed this tutorial and get interested in Flash - XML applications. I myself am at a beginner´s stage and I want to learn more. If you have any clues to cut down the script or to extend to new areas such as incorporating links and so on let me know. I hope there will be more tutorials in the future. One of the reasons why I made this tutorial is because there is very limited literature about Flash and XML. Happy flashml!
