利用Flash在WEB页面创作统计图（下）

VI．装载和分析XML文档数据。Flash MX给我们提供了XML对象处理XML文档，如前面表中描述，我们的装载和分析数据是在LoadXML、LoadingXML和ParseXML这三帧中进行，下面就将分别介绍在这三帧中如何写控制脚本。

a．首先，在LoadXML帧中写装载XML文档数据脚本，选择Labels图层中的LoadXML帧，按F9在脚本编辑框中输入以下图九所示脚本：

图九

如果你是第一次接触ActionScripts，建议你参考一下它的语法和样式，这里提供两个介绍这方面知识的站点：ActionScripts.org和FlashKit.com's ActionScripting tutorials。

b．在装载XML数据的过程中，我们不能让用户什么都看不到，并且留着Falsh那么大的空地不用对自己也是浪费，所以在这个过程中你可以设计一些样式添加到LoadingXML帧中，方法是选择Labels图层的LoadingXML帧，然后在Chart场景中添加一些提示信息或你自己实际需要的一些广告信息，比如你的Banner等等。本文中，作为示例，我输入了一些文字信息，比如“正在载入数据，请稍候…”等等。最后还要在LoadingXML帧脚本中写上play（），写这句的目的是前台要显示，后台也还是得要转才行啊，等到后台数据载入完成，它就该休息了，同时如果载入有误，它还要把控制权交给XMLError帧；

c．数据装载完成后，就应该是ParseXML帧开始分析XML文档数据工作的时候，因此你应该在ParseXML帧的脚本编辑框输入以下图十所示的代码：

图十

d．ParseXML功能的实现，在Flash中我们使用的XML对象类似于ASP.NET中的XMLDocument（）类或者ASP中的MSXML分析器。具体代码如下所示：

function parseXML() {

//此函数用于分析XML文档数据

//cldNodes 数组存储XML文档中的子节点

cldnodes = new Array();

cldnodes = XMLDoc.childNodes;

//Num 存储子节点数，初始化为0

num = 0;

//Dataset 数组存储节点数据

dataset = new Array();

//DataName 数组存储横向坐标相应的值

dataname = new Array();

//DataValue 数组存储纵向坐标相应的值

datavalue = new Array();

//dataLink 数组存储相应的连接

dataLink = new Array();

//循环取值

for (j=0; j<=cldnodes.length; j++) {

//判断是否是Graph元素

if (cldnodes[j].nodeName.toUpperCase() == "GRAPH") {

//得到图形格式

chartType = cldnodes[j].attributes.chartType;

//得到图表的主题

caption = cldnodes[j].attributes.caption;

//得到横向坐标的主题

xaxisname = cldnodes[j].attributes.xaxisname;

//得到纵向坐标的主题

yaxisname = cldnodes[j].attributes.yaxisname;

//取图像数据

dataset = cldnodes[j].childNodes;

//循环取标签或数据

for (k=0; k<=dataset.length; k++) {

if (dataset[k].nodeName == "set") {

//取标签

dataname[num] = dataset[k].attributes.name;

//取数据

datavalue[num] = dataset[k].attributes.value;

//取连接

dataLink[num] = dataset[k].attributes.link;

//子节点数加1

num = num+1;

}

play();

}

e．从上面的代码中我们得到图形显示格式，接下来，就应该编写对图形格式所要采取的不同的方法，所以，下面的setChart方法帮我们实现这一点：

function setChart(chartInstance) {

//此方法用于实现具体图形格式实例

//---------输入参数------------

// chartInstance: 图形格式实例

//-------------------------------------

//创建一个图形格式实例

movChart = eval(chartInstance);

//清空图形格式实例数据

movChart.removeAll();

//设置主题

movChart.setChartTitle(caption);

//设置横向、纵向坐标主题

movChart.setXAxisTitle(xAxisName);

movChart.setYAxisTitle(yAxisName);

//设置数据

for (i=0; i < num; i++) {

//创建一个临时对象

chartItem = new Object();

//设置对象标签

chartItem.label = dataName[i];

//设置对象对应标签的数据值

chartItem.value = dataValue[i];

//把临时对象赋给图形格式实例

movChart.addItem(chartItem);

}

f．创建当用户点击统计图时触发的数据连接事件，这可以从Graph元素中的数据内容看出我们应该写这样的处理函数，从上面代码得到连接值，下面的代码实现具体的操作：

function gotoUrl(objectRef, recordIndex) {

//触发当用户点击图表时的动作

//输入参数 -------

//objectRef - 调用此函数的对象

//recordIndex- 决定哪项数据被触发

//-----------------

//指向URL连接地址

if (dataLink(recordIndex) != "" || dataLink(recordIndex) != null ||

dataLink(recordIndex) != undefined) {

getURL(dataLink[recordIndex]);

}

g．好了，上面步骤帮我们取得了产生统计图的原始数据，接下来，我们就应该把这些数据用统计图格式呈现出来。创建一个图层，命名为Chart，然后如图十一所示创建三个关键帧，分别取名为MovBarChart、MovLineChart和MovPieChart：

图十一

然后分别为这三个帧创建自己的统计图形，以下分步介绍：

第一步：创建MovBarChart统计图形，选择Chart图层的MovBarChart帧，然后从Flash Charting Components组件框拖一个BarChart组件到Chart场景，把它命名为MovBarChart，并设置宽度和高度为395和295像素，删除它所有的标签和数据值，然后重新设置它的参数，方法是CTRL+F3调出属性窗口，然后在属性列表框中点击每项一一设置相应的参数，设置好以后如下图十二所示：

图十二

然后给帧MovBarChart添加脚本，如下：

setChart("MovBarChart");

stop();

第二步：同样地创建MovLineChart统计图形，选择MovLineChart帧，从组件中拖一个LineChart到场景中并命名为MovLineChart，删除它所有数据和标签，重新设置参数，设置完参数结果如下图十三所示：

图十三

其它两张图如图十二一样，给MovLineChart添加控制脚本，如下：

setChart("MovLineChart");

stop();

第三步：创建MovPieChart统计图形，选择MovPieChart帧，从组件中拖一个PieChart到场景中，并命名为MovPieChart，删除它所有数据和标签，并重新设置参数，设置好以后如下图十四所示：

图十四

添加控制脚本，如下：

setChart("MovPieChart");

stop();

h．创建选择统计图形格式按钮，这样可以让用户在各种统计图形中选择自己的喜好，方法是选择Buttons图层，然后用“插入—〉新建元件…—〉按钮”方法为每个统计图形创建一个图形按钮，如下图十五所示：

图十五

接下来为每个图形按钮绑定相应的事件，打开脚本编辑框，写如下代码：

on (release) {

_root.gotoAndStop("BarChart");

} //—当用户点击MovBarChart图形按钮时触发此事件；

on (release) {

_root.gotoAndStop("LineChart");

} //—当用户点击MovLineChart图形按钮时触发此事件；

on (release) {

_root.gotoAndStop("PieChart");

} //—当用户点击MovPieChart图形按钮时触发此事件。

i．调用XMLError帧对错误进行处理。分别在Actions、Labels和XMLError图层中插入XMLError关键帧，同时在场景中添加相应错误消息说明，比如“数据处理有误，请重试”等等，然后在这三个图层的XMLError帧添加stop（）脚本处理函数，以显示错误消息。

④导出影片，前面我们已经完成动态统计图形的设计，选择“文件—导出—导出影片”，然后在弹出的设置中切换到“Flash”页面，选择“Flash Player 6”版本，选中“省略跟踪动作”，选中“压缩影片”，选中“针对Flash Player 6 r65优化”，最后把JPEG品质设为100%，点击“发布”就OK。

1．在HTML页面中发布Flash统计图表。

实现方法

第一：使用静态XML文档数据

写Data.XML文件如下：

<graph chartType="BAR" xaxisname="Name" yaxisname="Votes obtained"

caption="Next Formula 1 Champ?" >

</graph>

然后在HTML文件中写如下代码调用Flash文件生成统计图表：

<HTML>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

CODEBASE="URL to CAB file to download Macromedia Flash Plug-in"

WIDTH="400" HEIGHT="340" id="FlashCharts" ALIGN="">

<EMBED src="FlashCharts.swf?dataUrl=data.xml" quality=high

bgcolor=#FFFFFF WIDTH="400" HEIGHT="340" NAME="FlashCharts" ALIGN=""

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

</EMBED>

</OBJECT>

</BODY>

</HTML>

如果机器没有安装Flash插件，将会提示你是否下载安装，并在CODEBASE中指定下载安装Flash插件的地址，插件地址按如下示例所写：http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0。

第二：使用动态XML文档数据

用ASP或者ASP.NET生成XML文档数据，如下所示代码：

Response.Write("<graph chartType="PIE"..."" ...>")

For Each row in the Database Results

Response.Write("<set name=""VauleOfDateRecordedField"" " & _

"value=""ValueOfProfitsField"" />")

Response.Write("</graph>")

然后在HTML文件中参考如下代码：

<EMBED src="FlashCharts.swf?dataURL=Shares.aspx" quality=high

bgcolor=#FFFFFF WIDTH="400" HEIGHT="300" NAME="FlashCharts"

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

</EMBED>

</OBJECT>

总结：

利用Flash，我们还可以创作更多优秀的作品，比如3D图形，大家如果感兴趣的话，不妨去http://www.macromedia.com/了解更多有关这方面的信息。

（完）