CSDN博客

img spidertan

利用Flash在WEB页面创作统计图(下)

发表于2003/12/8 21:19:00  2082人阅读

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

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

图九

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

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

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

图十

                            dParseXML功能的实现,在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,然后如图十一所示创建三个关键帧,分别取名为MovBarChartMovLineChartMovPieChart

图十一

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

                            第一步:创建MovBarChart统计图形,选择Chart图层的MovBarChart帧,然后从Flash Charting Components组件框拖一个BarChart组件到Chart场景,把它命名为MovBarChart,并设置宽度和高度为395295像素,删除它所有的标签和数据值,然后重新设置它的参数,方法是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帧对错误进行处理。分别在ActionsLabelsXMLError图层中插入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?" >

<set name="M. Sch" value="4365" />

<set name="R. Sch" value="3344" />

<set name="Coult" value="1342" />

<set name="Barri" value="3764" />

<set name="Monto" value="2198" />

<set name="Irvine" value="3633" />

</graph>

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

        <HTML>

<BODY bgcolor="#FFFFFF">

  <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="">

             <PARAM NAME=movie VALUE="FlashCharts.swf?dataUrl=data.xml">

         <PARAM NAME=quality VALUE=high>

             <PARAM NAME=bgcolor VALUE=#FFFFFF>

             <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"" />")

Next

Response.Write("</graph>")

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

<OBJECT ...>

 <PARAM NAME=movie VALUE="FlashCharts.swf?dataURL=Shares.aspx">

 <PARAM NAME=quality VALUE=high>

 <PARAM NAME=bgcolor VALUE=#FFFFFF>

 <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/了解更多有关这方面的信息。

 

(完)

0 0

相关博文

我的热门文章

img
取 消
img