教你用Flash制作曲线报表图

一、先看图：

这是一个用Flash做的动态曲线图，请将鼠标移动那些绿色的小点上看看。
这个示例可以结合asp、asp.net、php、jsp等后台语言，显示你想要的数据曲线。其实是与后台语言无关的，只要按一定的格式传递数据给它就可以。另外，这仅仅是个示例程序，您在使用时，有可能得按照自己的需求重新修改，但本例基本上已涉及了Flash绘制曲线图的各个技术方面。

二、在制作此例前，我假设您已了解以下Flash知识点：
1.使用this.createEmptyMovieClip动态创建MovieClip；
2.使用AS绘制线条或矩形；
3.对Flash中“深度”的理解；
4.使用this.createTextField动态创建文本框；

三、正式开始
1)创建一个空白文档，有三个层：

看上图，三个层：
script：放置一些脚本；
鼠标跟随：当鼠标放置在曲线的点上时，会有一个提示，这个提示其实是一个MovieClip，这个层就放它；
坐标曲线：放置一个MovieClip，即生成的曲线；

2).按Ctrl+F8新建一个影片剪辑(MovieClip)，里面放置一个动态文本框，实例名称为：tips，如下图：

3).返回场景，将刚才制作的mc坐库中托至场景(放在可视区域外)，并且命名为：mouse_mc，如图：

4).按Ctrl+F8新建一个影片剪辑(MovieClip)：坐标曲线，有三个层:，如下图：

script：放置一些脚本；
文字：放置x,y轴的说明文字；
xy轴：放置x,y坐标轴；

5).在影片剪辑“坐标曲线”的“xy轴”层上画x,y坐标线：

这步就是注意坐标轴的中心点，画在影片剪辑的注册点上，即_x=0,_y=0处；

6).在坐标轴附近，创建二个动态文本框，分别指定变量名为：txt_x，txt_y，如下图：

这二个文本框用来显示坐标轴的说明文字；

6).接着在的“script”层的第一帧，加入如下代码：

影片剪辑"坐标曲线"的"script"层的代码

7)返回场景，在场景的第一帧加入如下代码：

场景的script代码

8).将库中的“坐标曲线”影片剪辑托至场景中，命名为：mc，如下图：

9).参数说明：

在代码中，使用到了以下变量：

//x轴刻度总长
    _root.xtotal = 60;
    //y轴刻度总长
    _root.ytotal = 100;
    //x轴说明文本
    _root.xtxt = "月份";
    //y轴说明文本
    _root.ytxt = "成绩";
    //依次的坐标点
    _root.piont = "1,80|2,70|3,90|4,88|5,100|6,90|7,90|8,35|9,99|30,60|50,80";

“1,80”代表x坐标为1，y坐标为80的一个点，多个点依次以“|”分隔，选传到Flash后，使用AS的String.split("|")再拆分出来。

另外，这些变量从那儿来呢？就是从外部动态传入的参数了。传入方法很简单，在嵌入Flash的Html页中，注意下面代码：

嵌入swf的Html代码

注意加粗的那部分，跟在swf文件名后边，以?开头，后边参数类似我们“WebForm1.aspx?QueryString1=1&QueryString2=aaaa”的形式，各值/对参数以“&”符分隔，这样在Flash中可以直接使用此变量，如果含有汉字，请以urlEncode编码，Flash会自动解析出来，否则汉字可能乱码。

还有特别注意第7)步中，说到场景中的代码，有如下二句：

//网页传入的值为String类型的,如_root.xtotal = "60",在此转换为Number类型,否则会有点问题.
//x轴刻度总长
_root.xtotal = parseInt(_root.xtotal);
//y轴刻度总长
_root.ytotal = parseInt(_root.ytotal);

因为外部传入的值默认将是String类型，所以这里做了类型转换，以免后边运算时出错。

四、完整源码下载

点此下载(11K)>>

说明：具体代码，里面基本上都加了注释，我在文章里没有再作太多说明，有不明白地方的请回复。

posted on 2007-05-12 01:28 三千阅读(9327) 评论(19) 编辑收藏举报