Real-time Animated Graphing using Flash MX, Part 3By Pallav Nadhani
In Part 2 we looked at the XML data structure and examined the first few stages in preparing our Flash movie. In this part we'll look at the code needed for actually rendering the graph through Flash.
Setting the Canvas and other Graph Elements
Create a new layer named Canvas and on the frames of this layer draw a graph canvas as you would like it to be. As for me, I have drawn a 3d canvas of size 250x200 px. It's always a better idea to draw this canvas inside a separate movie clip and then place an instance of that movie clip on the stage - as it gives added flexibility.
Now, we need to set up the textboxes which would contain the graph caption, x-axis and y-axis names
and the y-axis upper and lower limits. For all these textboxes, create a new layer named
Textboxes and place five dynamic textboxes (with HTML support on) on the stage (as shown below)
with their variable names as:
Also, add another keyframe to the Actions and Labels layer with its name as
Now, bring up the actions Panel for the
SetProperties frame and enter the following
As you can see from the ActionScript above, the
SetProperties frame specifies the HTML for
the various textboxes.
At this point we've examined how to read the contents of the XML data file into an array, how to add the textboxes, and how to specify aesthetic properties. At this point let's turn our attention to the final piece of the puzzle - actually rendering the graph!
Rendering the Graph
Since, we are going to create an animated graph, our whole graph ActionScript and objects will be spanned across three keyframes. The first frame will be responsible for calculating and initializing the graph properties. The second will be responsible for drawing the lines in an animated way. And, the third will be responsible for setting the name and value textboxes and checking whether all of the lines have been drawn.
So, create three new frames on the layers Actions and Labels and name them as Graph, MakeLines and Finalize.
The Initialization Process
Open up the Actions panel for the Graph keyframe and enter the following ActionScript:
The ActionScript for the Graph frame starts by first determining constant values for the height and bottom x and y positions of the canvas, since all the points calculations have to be done with the canvas (plot) area in mind. In addition to these constants we also specify a constant animation speed and line thickness.
Next we determine the per-unit-pixel factor, that is, what unit does one pixel represent. For example, if the max value is 100 and min value is 0, each pixel represents 0.5 units (since our canvas height is 200 pixels). Based on this per-unit-pixel factor, we calculate the x and y co-ordinates of each data set. In addition, we calculate the spacing that's going be in between two data points (x,y) and (x1,y1).
Two new arrays are created to store values multiplied by a factor. The first array stores the actual
y points represented on the canvas by the data values. The second array stores the x position of
each point. We then set the initialization values.
curr is the variable that
indicates the index of the dataset that is currently being plotted. The first dataset is indexed as 1
and therefore we start the rendering process with the first dataset.
createEmptyMovieClip function call creates a placeholder for the line chart.
We then move our drawing pointer to the initialization point i.e.,
Finally, we shift the control to the frame MakeLines to draw the lines.
Making the Lines
The ActionScript contained in the frame MakeLines is responsible for increasing the size of the line by the number of pixels specified by
animspeed (to give the animation effect).
This ActionScript code first sets the line style using the
lineStyle method of the Flash
drawing API. This method takes in three parameters, namely line thickness, line color and the line
alpha. We now draw a line to the position
We keep on playing, which moves the pointer to Finalize Frame.
The Finalize Frame
The following ActionScript contained in the Finalize frame helps us to recurse between the MakeLines frame and Finalize frame to create the animated lines for all the datasets. Essentially we keep toggling back between these two frames until the lines are completely drawn. The ActionScript to accomplish this is given below:
We first check if lines have been drawn for all the data sets. To do this, we match the value of
curr with that of
_root.num. If all the datasets haven't been drawn, we
check if the complete line for the current dataset has been drawn.
If the line for the current dataset is still incomplete, we keep on increasing the
curry position by
animspeed pixels (to render an animating effect) and
send the control back to MakeLines. (Some simple two-dimensional geometry equations are used to calculate
the next point on the graph based upon the previous position and the slope.)
If the line for the current dataset is complete, we set its name and value textbox to display the
required figures. To set the value, we invoke the function
setValue (which we'll look at
shortly) and we pass the current dataset index, the x position and the y position, to this function as
its parameters. Similarly, we display the name by calling the
setName function in the same
If all the lines have been successfully drawn, we come to a halt by calling
Let's now shift our focus to the two functions
setName is invoked to set the name textbox for a particular dataset. In this
function, we simply duplicate a movie clip
MCITb (this is a movie clip placed in the
layer textboxes, which contains a textbox with its variable name as text and registration point
in the center). Thereafter, we set it's x and y co-ordinates and finally set it's text (which is
curr is the current dataset index). The code
for this function is as follows:
The same is done within the function
And, with this, the graph component is virtually ready for use. All that's left is the
XMLError keyframe, which contains an error message to be displayed to the user when the XML document
received by the Flash movie is malformed. To do this, simply create another frame on Actions and
Labels layer and name it as XMLError. Specify the
stop(); action in this keyframe and
render the message that you want your users to see in case of XML error.
Exporting the Movie
To export the movie, go to
File > Export Movie. Select the target file name and click
Save. You'll next be presented with a Export Flash Player configuration dialog box. Here, place a check
next to Omit Trace Actions and Compress Movie - enter JPEG quality as 100 and finally click on Ok.
You are now ready to use
FunkyCharts.swf in your Web site!
In Part 4 we'll look at a couple examples of using FunkyCharts.