Previous Tip  |  Next Tip  |  Design Tips   | [Bill's Home]

I've shown a few examples of XML, but one of the best is to use it to create a diary, which contains its content in XML. For this I've designed a template which integrates pages, such as CV pages and contact details, into a single integrated package [Zoom].

We can then add the rings that hold the pages:

and we can add lines to differentiate the days:

and with the date added:

In Flash each of the text boxes are defined as Dynamic Text, and each is given a name (such as date_monday, date_tuesday, and so on). This will be used later, where we can read an XML file for the date, and add this date to the text boxes.

After this we can add some more text boxes which will contain the diary entries. The text boxes are named Monday, Tuesday, Wednesday, Thursday and Friday.

At this time it does not really matter about the layout, as we can finalise that at the end. The main things are to make sure that all the elements are lined-up properly.

We can try to program the fields with some ActionScript:

monday="";
tuesday="";
wednesday="";
thursday="9:30 Research Meeting\n2:00 Cisco Meeting";
friday="<B>All Day: Skye</B>";
date_monday="Mon 29 Apr 2002";
date_tuesday="Mon 30 Apr 2002";
date_wednesday="Mon 31 Apr 2002";
date_thursday="Thur 1 May 2002";
date_friday="Fri 2 May 2002";

Next we can add the XML file, and a pics page:

The code for this is:

function convertXML ()
{
trace("Loading XML file" + infile);
mainTag = new XML();
elementTag = new XML();
mainTag = this.firstChild.nextSibling;
trace("Tag " + mainTag);
if (mainTag.nodeName.toLowerCase() == "diary")
{

flist = mainTag.childNodes;

trace("Number of elements: " + questionList.length);
// get tags
for (i=0; i<=flist.length; i++) {
trace("Tag : " + flist[i].nodeName.toLowerCase());

if (flist[i].nodeName.toLowerCase() == "monday")
{
date_monday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "tuesday")
{
date_tuesday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "wednesday")
{
date_wednesday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "thursday")
{
date_thursday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "friday")
{
date_friday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "mon")
{
monday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "tue")
{
tuesday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "wed")
{
wednesday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "thu")
{
thursday = flist[i].childNodes;

}
if (flist[i].nodeName.toLowerCase() == "fri")
{
friday = flist[i].childNodes;

}
}

}
}

An example of the XML file is:

<?xml version="1.0"?>
<diary>
<monday>Mon, 18 June 2002</monday>
<tuesday>Tues, 19 June 2002</tuesday>
<wednesday>Wed, 20 June 2002</wednesday>
<thursday>Thur, 21 June 2002</thursday>
<friday>Fri, 22 June 2002</friday>
<mon>9am: Marks<BR>4pm: MSc Viva</mon>
</diary>

Next we can add a favouriate song part:

You can see a weakness in this is in the tabs at the side, so let's redraw them as a single graphic, and integrate them. The following shows some new tabs:

I've also added a CV and a contact page: