VI. Load and analyze XML document data. Flash MX provides us with XML objects to process XML documents, as described in the table, our loading and analysis data is performed in the three frames of loadingXML, LoadingXML, and Parsexml, which will be described in this three frames to write control script.
a. First, write an XML document data script in the loadXML frame, select the loadXML frame in the Labels layer, press F9 to enter the following figure in the script editing box:
Figure 9
If you are in contact with ActionScripts, I suggest you refer to its grammar and style, here there are two sites that introduce this knowledge: ActionScripts.org and Flashkit.com's ActionScripting Tutorials.
b. In the process of loading XML data, we can't let users see anything, and if you stay falsh, you don't have to waste yourself, so in this process, you can design some styles to add to the loadingXML frame, method is Select the LoadingXML frame of the Labels layer, then add some prompt information in the Chart scene or some of your own advertising information, such as your Banner, etc. In this article, as an example, I have entered some text information, such as "I am loaded into data, please wait ..." and so on. Finally, I will write Play () in the loadingXML frame script, the purpose of writing this sentence is to be displayed at the front desk, and the background is still going to turn. Wait until the background data is loaded, it should be rest, and if it is loaded I have lost, it also gives control to XMLError frame;
C. After the data is loaded, it should be that the Parsexml frame begins to analyze the XML document data work, so you should enter the following Figure 10 code in the script edit box of the Parsexml frame:
Figure 10
d. Parsexml function implementation, in the XML object we used in Flash, similar to the XMLDocument () class or an MSXML analyzer in the ASP in the ASP.NET. The specific code is as follows:
Function Parsexml () {
// This function is used to analyze XML document data
// CLDNODES array stores child nodes in the XML document
Cldnodes = new array ();
CldNodes = Xmldoc.childNodes;
// NUM storage sub-node, initialized to 0
Num = 0;
// DataSet array storage node data
DataSet = new array ();
// DataName array stores the corresponding value of the horizontal coordinates
Dataname = new array ();
// DataValue array stores the corresponding value of the vertical coordinates
DataValue = new array ();
// Datalink array stores the corresponding connection
Datalink = new array ();
// cycle value
For (j = 0; j <= CldNodes.Length; J ) {
/ / Judgment is a graph element
IF (CldNodes [J] .NodeName.touppercase () == "graph") {
// Get a graphic format
ChartType = CldNodes [J] .attributes.ChartType;
/ / Get the subject of the chart
CAPTION = CldNodes [J] .attributes.caption;
// Get the subject of the horizontal coordinate
XAXISNAME = CldNodes [J] .attributes.xAxisName; // Get the topic of portrait coordinates
YAXISNAME = CldNodes [J] .attributes.yaxisname;
// Take image data
DataSet = CldNodes [J] .childNodes;
// Circular tab or data
For (k = 0; k <= dataset.length; k ) {
IF (DataSet [K] .NodeName == "SET") {
// Take the label
DataName [Num] = Dataset [k] .attributes.name;
// Take data
DataValue [Num] = Dataset [k] .attributes.value;
// Take a connection
Datalink [Num] = Dataset [k] .attributes.link;
// child node plus 1
Num = NUM 1;
}
}
}
}
Play ();
}
e. From the above code we get a graphic display format, next, you should write different methods to take on the graphic format, so the following setchart method helps us achieve this:
Function setchart (chartinstance) {
/ / This method is used to implement specific graphical format instances
//---------Input parameters------------
// ChartInstance: Graphics format instance
// -------------------------------------
// Create a graphics format instance
Movchart = evAl (ChartInstance);
/ / Clear Graphic Format Example Data
Movchart.removeall ();
// Set the subject
Movchart.setCharttitle (CAPTION);
// Set landscape, portrait coordinate theme
Movchart.setXAxiStitle (XAXISNAME);
Movchart.SetyAxistry (YAXISNAME);
// Setting data
For (i = 0; i // Create a temporary object ChartItem = new object (); // Set the object tag Chartitem.Label = Dataname [i]; / / Set the data value of the object corresponding to the label ChartItem.Value = DataValue [i]; / / Assign a temporary object to a graphical format instance Movchart.additem (chartitem); } } f. Create a data connection event triggered while clicking on a chart, which can see the data content in the graph element that we should write such a process function, get a connection value from above, the following code implements a specific operation: Function Gotourl (ObjectRef, RecordIndex) { / / Trigger the action when the user clicks on the chart //Input parameters ------- // ObjectRef - Object to call this function // RecordIndex - Decide which data is triggered // ----------------- / / Point to the URL connection address IF (Datalink (RecordIndex)! = "" || Datalink (RecordIndex)! = NULL || Datalink (RecordIndex)! = undefined) { GetURL (Datalink [RecordIndex]); } } g. Ok, the above steps help us have achieved the original data of the chart. Next, we should presented these data with the statistical format. Create a layer, named Chart, then create three keyframes as shown in Figure 11, named Movbarchart, MovlineChart and MovieChart: Figure 11 Then create their own statistical graphics for these three frames, and the following steps: Step 1: Create a MovBarchart statistic graphic, select the MovBarchart frame of the chart layer, then drag a Barchart component to the Chart scene from the Flash Charting Components Component box, name it Movbarchart, and set the width and height of 395 and 295 pixels, delete It's all the tags and data values, then reset it, the method is Ctrl F3 calls up the properties window, and then click each item to set the corresponding parameters in the Properties list box, and then set it as shown in Figure 12 after setting : Figure 12 Then add the script to the frame MovBarchart as follows: Setchart ("Movbarchart"); stop (); Step 2: Create a MOVLINECHART statistics graphics, select the MOVLINECHART frame, drag a linechart from the component to the scene and name MovlineChart, delete all the data and labels, reset the parameters, set the parameters result as shown below : Figure 13 Other two pictures are as shown in Figure 12, add control scripts to MovlineChart, as follows: Setchart ("MovlineChart"); stop (); Step 3: Create a MovpieChart statistic graphics, select the MovpieChart frame, drag a PIECHART from the component to the scene, and name MovieChart, delete all the data and tags, and reset the parameters, set the following Figure 14: Figure 14 Add control scripts as follows: Setchart ("movpiechart"); stop (); h. Create a selection statistics graphic format button, which allows users to select their own preferences in various statistical graphics, and the method is to select the Buttons layer, then use the "Insert -> New Components ... -> Buttons" method to create one for each statistical graphics. The graphic button, as shown in Figure 15: Figure 15 Next, the corresponding event is bound to each graphic button, open the script edit box, write the following code: On (Release) { _Root.gotoAndStop ("BARCHART");} // triggered this event when the user clicks on the MovBarchart graphic button; On (Release) {_root.gotoAndStop ("Linechart");} // Triggered this event when the user clicks on the MOVLINECHART graphic button; On (Release) {_root.gotoAndStop ("PieChart");} // triggered this event when the user clicks on the MovpieChart graphic button. i. Call the XMLError frame to process the error. Insert an XMLError keyframe in the Actions, Labels, and Xmlerror layers, and add a corresponding error message in the scene, such as "data processing incorrectly, please try again", then add this three layers XMLERR frame to add STOP () script handle function to display an error message. 4 Export the movie, before we have completed the design of dynamic statistics graphics, select "File-Export-Exported Video", then switch to the Flash page in the pop-up setting, select "Flash Player 6" version, select "omissions tracking action ", Select" Compressed Video ", select" Optimization of Flash Player 6 R65 ", and finally set the JPEG quality to 100%, click" Publish "to OK. 1. Publish a Flash chart in the HTML page. Implementation First: use static XML document data Write the Data.xml file as follows: CAPTION = "NEXT FORMULA 1 Champ?"> Then write the following code in the HTML file to call the Flash file generation chart:
