教你用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,0x000000,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,0x000000,30);
scalX_mc.moveTo(xspace*i,0);
scalX_mc.lineTo(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,0x000000,50);
scalY_mc.moveTo(0,0-(yspace*i));
scalY_mc.lineTo(7,0-(yspace*i));
} else if (i%10==0) {
scalY_mc.lineStyle(1,0x000000,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,0x000000,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,0x000000,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, r+y, -Math.sin(Math.PI/4)*r+x, Math.sin(Math.PI/4)*r+y);
mc.curveTo(-r+x, Math.tan(Math.PI/8)*r+y,-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, x,-r+y);
mc.curveTo(Math.tan(Math.PI/8)*r+x,-r+y, Math.sin(Math.PI/4)*r+x,-Math.sin(Math.PI/4)*r+y);
mc.curveTo(r+x,-Math.tan(Math.PI/8)*r+y, 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,0,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|2,70|3,90|4,88|5,100|6,90|7,90|8,35|9,99|30,60|50,80"/><paramname="quality" value="high"/><paramname="bgcolor" value="#ffffff"/><embedsrc="Flash_curve.swf?xtotal=60&ytotal=100&xtxt=month&ytxt=score&piont=1,80|2,70|3,90|4,88|5,100|6,90|7,90|8,35|9,99|30,60|50,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類型的,如_root.xtotal = "60",在此轉換爲Number類型,否則會有點問題.
//x軸刻度總長
_root.xtotal = parseInt(_root.xtotal);
//y軸刻度總長
_root.ytotal = parseInt(_root.ytotal);

因爲外部傳入的值默認將是String類型，所以這裏做了類型轉換，以免後邊運算時出錯。