A Simple XML-Based Searchable Database

(part 1): The Basics

Introduction
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 XL or
!avascript. o why should we use flash to parse XML scripts" There are two ma!or reasons# $.
Flash is platform%browser independent. &ow there is another reason. upposed you have te't you
want to show in combination with pictures, animations or movies. Flash is the most suitable
program, which allows you to do that. (ith Flash MX capabilities to incorporate )uic*time
movies, flash becomes even more powerful. +ou will get a taste of that when you go through this
tutorial.
&ow what are you going to learn in this tutorial" +ou will learn
,- how to create an XML file suitable for flash.
/- how to access the XML tree using actionscript to create a database.
0- 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 endless1" /ut now have a loo* 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. ,lso you can eliminate things or add things. That2s what I did to
learn about XML and Flash.
The XML ile
3ere one of the XML files used in this tutorial is shown starting with the XML declaration and
followed by the XML tree. The 'ml synta' is very strict and unli*e html is case sensitive. ,n
opening tag 4for e'ample 5models6- must be followed by a closing tag 45%models6 -.
<?xml version="1.0"?>
<models>
<monica name="Monica" photo="pic_1.swf">
age: 1
e!e color: dar" #l$e
hair color: #lond
height: 1%& cm
weight: 1'( po$nds
<)monica>
<heather name="*eather" photo="pic_.swf">
age: +0
e!e color: #lac"
hair color: dar" #rown
height: 1%0 cm
weight: 1,( po$nds
<)heather>
<"im name="-im" photo="pic_+.swf">
age: (
e!e color: green
hair color: #lac"
height: 1.+ cm
weight: 1( po$nds
<)"im>
<models>
+ou should always test if your file has the correct synta' by opening it in your browser window.
, correct file will show up li*e this.
&ote# 7n some servers, especially free servers, XML files may be altered.
,n 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 mista*e 4fmodels8false.'ml-.
The XML tree
,n 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 5models6. ,ctionscript is based on microsoft2s
9ocument 7b!ect Model 497M-. 0hec* other tutorials in the (eb 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. /ut now let2s focus on the actual flash
file. (e 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 !la ile: Sta"e
(e will first plan and build a stage. :ust open the fla file and loo* at the stage. There are several
dynamic te'tfields, an input field for the search engine and two empty movieclips, which we
need for preloading and loading the swf files. +ou can also load !pg files in Flash MX but I have
used swf files because the power of flash using XML is to have animations played, which ma*es
flash different from other XML parsers. ,ll te'tfields have var names e'cept for the big central
te'tfield, which has the te'tfield name 2Instance&ame8;2. This is important, because we are
attaching a scrollbar to this field in case the te't is larger than the field. I have to than* the Flash
MX discussion board where I learnt how to do it correctly. The input field also gets a var name
4var bo' in the property inspector-. Further we put buttons on the stage but this is of course
completely up to you.
The !la ile: Actionscript or buttons# uploadin" the XML ile
&ow open the actions panel and have a loo* at the scripts. ,t the top of the page is the preload
script. 0hec* the script attached to model3older8$ to learn more about tracing the loading event.
,ny way, we first create a general function with two arguments, which will be for the individual
name buttons. (e call the function 2showModel4model&ame,file&ame-2. The var model&ame is
the actual name of the model such as <im for e'ample. The var file&ame is any XML file we
want to upload.
))optional/ f$nction to preload pics
f$nction load0ll1first2ic3last2ic3pic4ame56
for 17=first2ic87<=last2ic87995 6
d$plicateMovie:lip 1_root.model*older_13"pic_"973 758
set2ropert! 1"pic_"973 _alpha3 10558
loadMovie1pic4ame979".swf"3"pic_"9758
loadMovie1pic4ame979".swf"3"model*older_1"58
set2ropert!1"model*older_1"3_alpha3 10558
;
;
load0ll113.3"pic_"58
loadMovie1"agenc!.swf"3"model*older"58
))general f$nction to $pload and get access to the xml files
))for the #$ttons
f$nction showModel1model4ame3file4ame5 6
))this is to empt! the preloader textfield
co$nter=""8
))varia#les for the name of the model and for the xml file
var model4ame8
var file4ame8
))$ploading the xml3 model is 7$st an instance we $se here
model = new <M=158
model.on=oad = newModel8
))this facilitates accessing the xml tree3 since white
))space is also considered childnode
))the $se of ignore>hite3 however3 sho$ld #e avoided if possi#le
model.ignore>hite = tr$e8
model.load1file4ame58
The !la ile: Actionscript or buttons# accessin" the XML ile
(e now have to get access to the XML file. (e do that by creating a function containing a loop.
In this function we search for the root node "models".
))f$nction to get to the root node and the childnodes
f$nction newModel15 6
))loop going thro$gh the xml file where#! child4odes.length is the n$m#er of
child nodes
for 1var co$nt01=08 co$nt01<=model.child4odes.length8 co$nt01995 6
))the root node name "models"
if [email protected]=ower:ase15 == "models"5 6
))this var holds the complete xml file
modelsAescr!ption = this.child4odes?co$nt01@8
;
;
))f$nction to get access to individ$al childnodes
))modelsAescr!ption will carr! over the extracted contents from the
previo$s
))f$nction to the next f$nction
findModels1modelsAescr!ption58
;
The !la ile: Actionscript or buttons# accessin" indi$idual child nodes
In the ne't function we will get access to child nodes by using another loop. 0ompare by using
trace the contents of the var models9yscryption of the previous function with this function and
see the difference.
))here we $se a new arg$ment for the f$nction
f$nction findModels1m!Model5 6
var m!Model8
var model4ame8
for 1var co$nt0=08 co$nt0<=m!Model.child4odes.length8 co$nt0995 6
if [email protected]=ower:ase15 == model4ame5 6
))we now have access to one childnode
))now the var modelsAescr!ption holds onl! the contents of the first :hild
of
))the childnode "model4ame". model4ame can #e an! of
))the child nodes of o$r <M= doc$ment
modelsAescr!ption = [email protected]:hild8
))this will show the first:hild content in the scroll#ar textfield
Bnstance4ame_0.text = modelsAescr!ption8
))here we are accessing the attri#$te "name"
headline = [email protected]#$tes.name8
))here we are accessing the attri#$te "photo"
pic = [email protected]#$tes.photo8
))we load the swf into an empt! M:
loadMovie1pic3"model*older"58
;
;
;
;
The !la ile: Actionscript or search en"ine
The first part of the search engine script is similar to the above script e'cept that we don2t need
any arguments. (e do not only search in one XML file but in two. The search is performed by
first uploading the XML file and then loo*ing for string matches.
))this is the f$nction for the search engine
f$nction searchModel15 6
var model4ame8
model = new <M=158
model.on=oad = newModel8
model.ignore>hite = tr$e8
model.load1"fmodels.xml"58
f$nction newModel15 6
for 1var co$nt01=08 co$nt01<=model.child4odes.length8 co$nt01995 6
if [email protected]=ower:ase15 == "models"5 6
modelsAescr!ption = this.child4odes?co$nt01@8
;
;
findMCModels1modelsAescr!ption58
;
Actionscript or search en"ine continuation%%%
&e't we fill the te'tfield 2headline2 with the corresponding content and address the attributes
my=rl containing the url and the attribute name having the same content as the corresponding
childnodes. This is very important for the search capability. (hen the if statement here is
positive the search string will be assigned to this&ame and will hold only the search string.
(e can now use this&ame in the else if statement. (e cannot use url&ame, because this variable
holds more than one name. >ven one of the names matches the others won2t and the else if
statement will always be e'ecuted as well. o to have the search engine wor* the childnode
names have to fit to an attribute with the same string though not necessary the same case.
))here is a specific f$nction for the search engine with the var m!Model
f$nction findMCModels1m!Model5 6
var m!Model8
var model4ame8
for 1var co$nt0=08 co$nt0<=m!Model.child4odes.length8 co$nt0995 6
))we are defining the var model4ame here
model4ame = [email protected]=ower:ase158
))here the string from the inp$t textfield is compared
))with the name of the childnodes
if 1search>indow.to=ower:ase15 == model4ame5 6
))if there is a match we do all this
modelsAescr!ption = [email protected]:hild8
Bnstance4ame_0.text = modelsAescr!ption8
headline = [email protected]#$tes.name8
pic = [email protected]#$tes.photo8
loadMovie1pic3"model*older"58
))if there is no match...
))see #elow for special comment
;else if 1search>indow.to=ower:ase15 /== headline.to=ower:ase1556
))we contin$e searching in another xml file3 this can #e done for man!
))xml files in a row
searchMModel158
;
;
;
;
Actionscript or search en"ine continuation%%%
This function is for the second XML file which will be searched as well.
))f$nction for the second and last xml file in the search attempt
f$nction searchMModel15 6
var model4ame8
model = new <M=158
model.on=oad = newModel8
model.ignore>hite = tr$e8
model.load1"mmodels.xml"58
f$nction newModel15 6
for 1var co$nt01=08 co$nt01<=model.child4odes.length8 co$nt01995 6
if [email protected]=ower:ase15 == "models"5 6
modelsAescr!ption = this.child4odes?co$nt01@8
;
;
findMaleModels1modelsAescr!ption58
;
f$nction findMaleModels1m!Model5 6
var m!Model8
var model4ame8
for 1var co$nt0=08 co$nt0<=m!Model.child4odes.length8 co$nt0995 6
model4ame = [email protected]=ower:ase158
))if there is a match we do all this
if 1search>indow.to=ower:ase15 == model4ame5 6
modelsAescr!ption = [email protected]:hild8
Bnstance4ame_0.text = modelsAescr!ption8
headline = [email protected]#$tes.name8
pic = [email protected]#$tes.photo8
loadMovie1pic3"model*older"58
))if here is also no match...
;else if 1search>indow.to=ower:ase15 /== headline.to=ower:ase1556
))we give $p and tell there was no match
headline = ""8
Bnstance4ame_0.text = "Dorr!3 this model is not in o$r data#ase."8
loadMovie1"agenc!.swf"3"model*older"58
;
;
;
;
The Button Scripts: The &ame Buttons
The script is simple. (e e'ecute the function showModels and specify the arguments as shown
here for one button.
on 1release5 6
showModel1"monica"3"fmodels.xml"58
;
The Submit Search Button
(e e'ecute the search function.
on 1release5 6
searchModel158
;
'onclusion
I hope you en!oyed this tutorial and get interested in Flash ? XML applications. I myself am at a
beginner2s stage and I want to learn more. If you have any clues to cut down the script or to
e'tend to new areas such as incorporating lin*s and so on let me *now. I hope there will be more
tutorials in the future. 7ne of the reasons why I made this tutorial is because there is very limited
literature about Flash and XML. 3appy flashml1