Real-time Animated Graphing using Flash MX, Part 2By Pallav Nadhani
In Part 1 we saw examined the basic architecture for FunkyCharts. In this part we'll look specifically at the XML structure used to communicate plotting data from the Web server to the FunkyCharts Flash movie, which runs on the client's computer.
The XML Structure
Recall that the FunkyChart flash file, which executes on the client's machine, communicates with the Web server to obtain the data it needs to plot. This data is exchanged in an predefined XML format. An example of this format is given below:
As you can see, the root element,
<graph>, has a number of attributes worth discussing:
bgcolor- specifies the background color of the graph. The
bgcolorvalue is the hexidecimal value of a color without the
caption- specifies the caption (heading) of the graph, which is displayed on the top of the graph canvas.
xaxisname- specifies the x-axis caption of the graph
yaxisname- specifies the y-axis caption of the graph
yaxisminvalue- determines the y-axis lower limit value - i.e., the origin value for y-axis. This is an optional value as we'll see later. If this value isn't provided to the graph, the graph will automatically select the lowest value provided in the data to be the y-axis lower limit.
yaxismaxvalue- determines the y-axis upper limit value - i.e., the maximum value for the y-axis. This is an optional value, in the same manner as the
<graph> node's attributes merely specify aesthetic settings.
The actual plotted data for the graph is contained within individual
which is a childnode of the root
<graph> element. The attributes used to define
the data are:
name- The value displayed on the x-axis for the particular data point
value- The value displayed on the y-axis for the particular data point
color- The color in which this set of data will be displayed.
Now that we've looked at the format of the data exchanged between the Web server and the Flash movie, let's look at the code needed in the Flash movie to actually render the graph from the XML data.
Creating the Flash Movie
Before we examine the actual creation of the graph, let's take a second to look at the various visual elements of the graph, so that we know what we're working toward. The screenshot to the right shows the output of a FunkyChart line graph with various pieces of the graph labeled by their attribute name. That is, the caption up at the top, "Hits for the first half (in thousands)," has a red box around it and a label "Graph Caption." Normally this red box and label wouldn't be present in the output - it is included to indicate how the value of the
caption attribute of the
<graph> node is rendered.
Now that we know what we are aiming for, start by creating a new Flash movie with the dimensions of
350 px (width) x 300 px (height). Set the fps (Frames per second) to 120. (We increase the fps to
increase the speed of animation.) Next, rename the default scene to "Graph". To rename a scene, go
Modify > Scene, click the scene name twice and then rename it.
In the graph create a background that is a movie clip with a rectangle of size 350 x 300 px. Place an instance of this movie in the main timeline and use ActionScript to change the color of this movie clip by utilizing the color object in Flash. These things can be accomplished by performing the following detailed steps:
- To create the movie clip, go to
Insert > New Symbolmenu.
- In the pop-up dialog, enter the Name as
MCBgand select the Behaviour as Movie Clip.
- You'll be provided with a blank screen. In the default layer and frame provided, draw a rectangle of size 350 x 300 px (using the rectangle drawing tool from the toolbox). Give the rectangle any color which you wish to be initially set as the background, until the XML document has been loaded - after the XML document has been loaded, we will change the color of this movie clip to the one provided in the XML document.
- Now, get back to the main timeline i.e., the timeline of Scene Graph.
- Rename the default layer to Background
- On the frames of this layer, place the newly created movie clip to cover up the entire stage and
name its instance as
Window > Libraryor Ctrl + L) onto the stage (stage in Flash means the working area) with the default keyframe selected. And to change the instance name, select the movie clip placed on the stage, bring up the Properties window (
Window > Propertiesor Ctrl + F3) and enter
MCIBgin the Instance Name field.
At this point we have the background setup that can be later altered via ActionScript. Next, we need to look at the code needed for parsing the XML document that contains the data to plot.
Loading and Parsing the XML document
Macromedia Flash MX provides an excellent native XML Object to deal with XML data. Using this object, one can load, send, and parse etc XML documents inside Flash. For our application, we just need to load the XML data from the URL provided to the graph (using the
OBJECT/EMBED method which
we had earlier seen), parse it and then use the parsed information to build the graph.
Specifically, to load XML data, perform the following steps:
- Create a new layer named
Labels. This layer is intended to contain keyframes with labels.
- Create three keyframes in this layer and name them as
- Create another layer Actions and create another three keyframes in this layer also. This layer is meant to contain all ActionScripts of the movie.
- Now, we need to show the user some splash/loading screen while the data is being fetched from the server. So, to achieve this, create a new layer called "Loading Contents" and on the frames of this layer, place anything which you want your users to see while the data is being loaded. The picture until now should look something like:
Now, let's move on to render the ActionScript required for loading the XML data. First, we'll see the
ActionScript required to load the XML document. The ActionScript required to load the XML data is
contained in the frame
LoadXML, so pop up the Actions Panel for this frame (right click
on it and select Actions) and enter in the following script:
The above ActionScript first initializes an instance of the XML document, storing it in the local variable
XMLDoc. We then instruct Flash that as soon as the XML document has been completely
downloaded in the movie, the function
fnloaded should be invoked. Next, we get the path
of the XML document that has to be loaded. The path is passed to the movie by the page in which
this movie is embedded as we had earlier seen using the
OBJECT/EMBED method. The
dataurl passed to the Flash movie from the ASP page in the format
FunkyCharts.swf?dataurl=Data.asp is now accessible in Flash via
if statement, which is optional, specifies that a default XML file should
be loaded in the event that no
dataurl path has been provided.
We invoke the
load method of the XML object to load the document. We append the
time at the end of the file name so that it is not cached.
fnloaded, which is invoked when the XML file is loaded,
simply sends the control to the
ParseXML keyframe wherein the XML document will be parsed
to retrieve the information. Finally, the
play() command keeps the movie playing,
which moves the Flash movie on to the next keyframe.
Recall that our next keyframe is
LoadingXML - the frame that is displayed until the XML document has been completely
downloaded by Flash. So, in the Actions Panel of this frame, we just ask Flash to keep on playing, by adding the
following one-line of ActionScript:
play() function is called in the
LoadingXML keyframe the control
is transferred to the keyframe
this frame, we first check if the XML document has been successfully downloaded or not. If it hasn't
been downloaded, we send the control back to
LoadingXML to display the loading Frames.
If it has been downloaded and it doesn't contain any errors, we continue with the parsing process by
invoking the custom function
parseXML(); however, if there is an error in parsing the
XML file we transfer the control to a keyframe
XMLError, which displays an
error message to the user stating that the XML received was malformed. The following ActionScript, which
should be placed in the
ParseXML keyframe, accomplishes these tasks:
The following function,
parseXML helps in parsing the XML and retrieving the data from
the XML document. Parsing the XML document using the XML object in Flash is similar to the
XMLDocument() class in ASP.NET or the MSXML Parser in ASP. We have to traverse down the
tree using the methods and properties exposed by the XML object.
parseXML() function starts by creating an array to hold the childnodes of the XML
XMLDoc.childNodes returns a pointer to the root element of the XML document.
Next, we declare a variable
num to store the count of the datasets passed to the movie
(via the XML document). We then iterate through the first level children of the XML Doc to search for
If the element is
<graph> element, then we access the graph attributes. To access
the attributes we use the
attributes collection in Flash.
First, we get the background color of the graph and store it in the variable
and then the
caption and so on.
Next, we iterate through the data set. A check is made if the node name is
set i.e., a
graph data set. If the element is
<set> then we retrieve and collect the values.
Now, we need to make another frame in both the Actions and Labels layer. Name this frame as
setDefaults. This frame will calculate the default values for the variables whose values
were not supplied in the XML document. (For example, the
bgcolor attribute in the
<graph> element is optional; the
setDefault frame will provide a default
value for this attribute should it not be supplied.) Once you've created the
frame, bring up the Actions panel for this frame and enter the following ActionScript:
Now, that we have the defaults for the graph calculated and stored in variables, it's time to apply them. First, we'll see how to create the graph canvas. We'll examine how to do this in Part 3.