Bill's Design Tips - Flash, Graphics, and much more

As you've maybe seen from my research, I have a great interest in reconfigurability and reuse in software components. The future of this, for the WWW, is in XML, which will provide the platform for the creation of generic components which can be configured using XML. For example the following is an example of a WWW component that I've designed to read the SWF files that I have created over the years.

You can see that you can easily move through the SWF files. I have set these up in an XML file, which has the format:

<?xml version="1.0"?>
<flash>
<files>top_cnds.swf</files>
<files>top_nos.swf</files>
<files>agent01.swf</files>
<files>agent02.swf</files>
<files>agents01.swf</files>
<files>agents02.swf</files>
<files>agents_movie.swf</files>
<files>agents_moview.swf</files>
<files>agent_movie.swf</files>

::: etc :::
</flash>

If you have Internet Explorer 5, you can view the XML file here. This can be read in using the ActionScript:

var str = new Array();
var movie_number=0, max_movie_number=0;

urlXML = new XML();
urlXML.onLoad = convertXML;
urlXML.load("flash.xml");

function convertXML () {
mainTag = new XML();
elementTag = new XML();
mainTag = this.firstChild.nextSibling;
if (mainTag.nodeName.toLowerCase() == "flash") {

flist = mainTag.childNodes;

  // get tags
  for (i=0; i<=flist.length; i++) {
   if (flist[i].nodeName.toLowerCase() == "files") {
   // we get the child node array beneath the questions
    elementList = flist[i].childNodes;
    str[max_movie_number]=elementList;

    max_movie_number++;
   }
  }
}
}

The convertXML function reads in the XML and inserts the file names into the str[] array. The buttons can then contain the following code (for the forward button):

on (press) {
loadMovie (str[movie_number], "bg");
fname=str[movie_number];

movie_number = movie_number+1;
if (movie_number>max_movie_number) movie_number=1;
gotoAndPlay (2);
}

and (for the back button):

on (press) {
loadMovie (str[movie_number], "bg");
fname=str[movie_number];

movie_number = movie_number-1;
if (movie_number<0) movie_number=0;
gotoAndPlay (2);
}

The SWF file is loaded in the movie clip, which is named "bg". Thus we can spend more time on creating a solid, and reconfigurable component, and less time on creating new content for each design.

Finally the questions we must ask the questions:

Is it reusable?

The short answer is yes, but it would have to be considerably enhaced to make it truely reuseable. Many other options would have to be added to make it reusable in other application. A good example would be to define the graphic content at the top of the movie within the XML file, such as:

<?xml version="1.0"?>
<flash>
<banner>
<graphic>
<file>top.swf</file>
<x_pos>34</x_pos>
<y_pos>40</y_pos>
</file>
</graphic>
</banner>
<files>top_cnds.swf</files>
<files>top_nos.swf</files>
<files>agent01.swf</files>
<files>agent02.swf</files>
<files>agents01.swf</files>
<files>agents02.swf</files>
<files>agents_movie.swf</files>
<files>agents_moview.swf</files>
<files>agent_movie.swf</files>

::: etc :::
</flash>

Is it reconfigurable?

Well. It provides a foundation for further reconfigurability. For it to be more reconfigurable we would have to add lots of other options that allowed the graphics to be manipulated, such as scaling, movement, alpha processing, and so on.

So let's try and reuse it. For this I've used the pictures that I took on my way up to Skye on 18 April 2002.

In this case I've changed the XML file to contain the names of the pictures, and also a description of the picture. The file used is:

<?xml version="1.0"?>
<flash>
<files>skye_pics\0001.swf</files>
<description>This is a picture taken from my car, in the Higlands.</description>
<files>skye_pics\0002.swf</files>
<description>Another picture of the Highlands, showing the beautiful mirror image on the loch.</description>
<files>skye_pics\0003.swf</files>
<description>I took this from the side of the road on the way up to Skye. It shows how still the loch was.</description>
<files>skye_pics\0004.swf</files>
<description>A picture of the Ragamuffin shop, on Skye. I had an excellent coffee in the little cafe beside this.</description>
<files>skye_pics\0005.swf</files>
<description>A picture of the ferry which travels to the South of the island.</description>
<files>skye_pics\0006.swf</files>
<description>Another picture of the bay.</description>
<files>skye_pics\0007.swf</files>
<description>A picture of the Scottish mainland taken from Skye. It was warm and the sky was a beautiful blue colour.</description>
<files>skye_pics\0008.swf</files>
<description>And again...</description>
</flash>

For this I changed the actionscript for the button to:

on (press) {
loadMovie (str[movie_number], "bg");
bg._xscale=90; // 90% scaling of the picture
bg._yscale=90; // 90% scaling of the picture
fname=str[movie_number];
descript=description[movie_number];
movie_number = movie_number+1;
if (movie_number>max_movie_number-1) movie_number=0;
gotoAndPlay (2);
}

The reading of the XML file has also been changed so that the description is added:

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

flist = mainTag.childNodes;

  trace("Number of elements: " + questionList.length);
  // get tags
   for (i=0; i<=flist.length; i++) {
  if (flist[i].nodeName.toLowerCase() == "files") {
  // we get the child node array beneath the questions
   elementList = flist[i].childNodes;
    trace("Element list: " + elementList);
    str[max_movie_number]=elementList;

max_movie_number++;
}

if (flist[i].nodeName.toLowerCase() == "description") {
elementList = flist[i].childNodes;
description[max_movie_number-1]=elementList;

}
}
}
}

So there it is. A nice reusable component, which can be extended with additional facilities.

39. Hail XML! The Future King of the WWW