利用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"层的代码
//
txt_x = _root.xtxt;
txt_y = _root.ytxt;
//x轴单位刻度的像素数
var xspace = Math.floor(400/_root.xtotal);
//trace("xspace:"+xspace);
//y轴单位刻度的像素数
var yspace = Math.floor(400/_root.ytotal);
//trace("yspace:"+yspace);
//
//画X轴刻度
DrawScalX(_root.xtotal);
//画Y轴刻度
DrawScalY(_root.ytotal);
//画曲线
DrawLine(_root.piont);
//
//画X轴刻度
function DrawScalX(total:Number) {
createEmptyMovieClip("scalX_mc",1);
scalX_mc.lineStyle(1,0x000000,80);
var i:Number;
for (i=1; i<total+1; i++) {
if (i%5==0) {
scalX_mc.lineStyle(1,70);
scalX_mc.moveTo(xspace*i,0);
scalX_mc.lineTo(xspace*i,-6);
CreateText(i/5,xspace*i-14-5*xspace,5);
//CreateText(i/5,xspace*i-14,5);
} else {
scalX_mc.lineStyle(1,30);
scalX_mc.moveTo(xspace*i,-4);
}
}
}
//画Y轴刻度
function DrawScalY(total:Number) {
createEmptyMovieClip("scalY_mc",2);
var i:Number;
for (i=1; i<total+1; i++) {
if (i%10==5) {
scalY_mc.lineStyle(1,50);
scalY_mc.moveTo(0,0-(yspace*i));
scalY_mc.lineTo(7,0-(yspace*i));
} else if (i%10==0) {
scalY_mc.lineStyle(1,80);
scalY_mc.moveTo(0,0-(yspace*i));
scalY_mc.lineTo(8,0-(yspace*i));
CreateText(i,-30,0-(yspace*i)-9);
} else {
scalY_mc.lineStyle(1,30);
scalY_mc.moveTo(0,0-(yspace*i));
scalY_mc.lineTo(4,0-(yspace*i));
}
}
}
//建立x,y轴的坐标文本
function CreateText(txt:Number,X:Number,Y:Number) {
var my_txt = createTextField("my_txt"+txt,Math.floor(Math.random()*100000),X,Y,30,30);
//trace(my_txt);
my_txt.multiline =false;
my_txt.wordWrap =true;
my_txt.selectable =false;
var my_fmt:TextFormat=new TextFormat();
my_fmt.color =0x999999;
my_fmt.align ="center";
my_txt.text = txt;
my_txt.setTextFormat(my_fmt);
}
//
//画坐标曲线
function DrawLine(point:String) {
createEmptyMovieClip("curve_mc",3);
//曲线填充色
curve_mc.beginFill(0xFFFFCC,50);
//曲线颜色
curve_mc.lineStyle(1,0xFF6600,100);
curve_mc.moveTo(0,0);
//
var point_arr:Array= point.split("|");
for (var i=0; i<point_arr.length; i++) {
curve_mc.lineTo(point_arr[i].split(",")[0]*xspace,0-point_arr[i].split(",")[1]*yspace);
DrawCircle((point_arr[i].split(",")[0]),0-(point_arr[i].split(",")[1]));
}
curve_mc.lineTo((point_arr[point_arr.length-1].split(",")[0]*xspace),0);
curve_mc.lineStyle(1,0);
curve_mc.lineTo(0,0);
curve_mc.endFill();
}
//画坐标点
function DrawCircle(X:Number,Y:Number) {
var tempInt:Number=100000+Math.floor(Math.random()*100000);
var circle_mc=this.createEmptyMovieClip("circle_mc"+tempInt,tempInt);
circle_mc.onRollOver =function() {
_root.mouse_mc._x = _root._xmouse;
_root.mouse_mc._y = _root._ymouse;
if (Math.abs(X)%5==0) {
_root.mouse_mc.tips.text =""+_root.xtxt+":"+((Math.abs(X)/5))+"-5,"+_root.ytxt+":"+Math.abs(Y)+"";
} else {
_root.mouse_mc.tips.text =""+_root.xtxt+":"+(Math.floor(Math.abs(X)/5)+1)+"-"+Math.abs(X)%5+","+_root.ytxt+":"+Math.abs(Y)+"";
}
//刷新舞台以使光标的移动看起来顺畅
updateAfterEvent();
};
circle_mc.onRollOut =function() {
_root.mouse_mc._x =-500;
_root.mouse_mc._y =-500;
};
//圆点的填充色
circle_mc.beginFill(0x00FF00,100);
//圆点的线条色
circle_mc.lineStyle(0,0x00FF00);
//画圆线
Circle(circle_mc,X*xspace,Y*yspace,2);
circle_mc.endFill();
}
//==============画圆形线==============
//x,y为圆心坐标
//r为圆半径
function Circle(mc:MovieClip,x:Number,y:Number,r:Number):Void {
mc.moveTo(x+r,y);
mc.curveTo(r+x,Math.tan(Math.PI/8)*r+y,Math.sin(Math.PI/4)*r+x,Math.sin(Math.PI/4)*r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x,r+y,x,r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x, -Math.sin(Math.PI/4)*r+x,Math.sin(Math.PI/4)*r+y);
mc.curveTo(-r+x,-r+x,y);
mc.curveTo(-r+x,-Math.tan(Math.PI/8)*r+y,-Math.sin(Math.PI/4)*r+x,-Math.sin(Math.PI/4)*r+y);
mc.curveTo(-Math.tan(Math.PI/8)*r+x,-r+y,-r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x,-Math.sin(Math.PI/4)*r+y);
mc.curveTo(r+x,r+x,y);
}

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

场景的script代码
//让鼠标提示内容的宽度根据内容的多少自动调整
mouse_mc.tips.autoSize =true;
//System.useCodepage = true;
//
//网页传入的值为String类型的,如_root.xtotal = "60",在此转换为Number类型,否则会有点问题.
//x轴刻度总长
_root.xtotal = parseInt(_root.xtotal);
//y轴刻度总长
_root.ytotal = parseInt(_root.ytotal);

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代码
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0" width="550" height="470" id="Flash_curve" align="middle">
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="Flash_curve.swf?xtotal=60&ytotal=100&xtxt=month&ytxt=score&piont=1,80"/><paramname="quality" value="high"/><paramname="bgcolor" value="#ffffff"/><embedsrc="Flash_curve.swf?xtotal=60&ytotal=100&xtxt=month&ytxt=score&piont=1,80" quality="high" bgcolor="#ffffff" width="550" height="470" name="Flash_curve" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>

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

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

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

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