一、先看图:



这是一个用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 三千 阅读(1701) 评论(12)  编辑 收藏 所属分类: [I ]. Flash技术[A]. ActionScript

评论:
#1楼  2007-05-13 00:50 | 李强 [未注册用户]
时下最火的网游,不能不提[url=http://www.08sun.com">http://www.08sun.com]奇迹世界[/url],公测四天线人数就突破40万,虽然爆出[url=http://www.08sun.com">http://www.08sun.com]奇迹世界漏洞[/url]能刷经验.但影响不大,另外盛大的三国大作[url=http://www.175ct.com">http://www.175ct.com]苍天[/url]也是非常值得期待,虽然[url=http://www.175ct.com">http://www.175ct.com]苍天内测时间[/url]一直未确定!
  回复  引用    
#2楼  2007-09-19 11:13 | 浮子 [未注册用户]
首先感谢博主提供这个源码,但源文件我用FLASH2004打不开,提示说格式意外错误,是怎么回事啊
  回复  引用    
#3楼 [楼主] 2007-09-19 14:50 | 三千.℡      
@浮子
这个示例是用Flash8制作的,所以要用Flash8以上版本才能打开.

  回复  引用  查看    
#4楼  2008-07-03 11:23 | 隨風.NET      
@三千
是的 请问该如何实现? 因为不熟悉flash 还请多多赐教
  回复  引用  查看    
#5楼 [楼主] 2008-07-03 15:13 | 三千      
@隨風.NET

都可以实现的.


  回复  引用  查看    
#6楼  2008-07-03 15:56 | 隨風.NET      
@三千
那请问该如何实现用图标替代绿点并实现曲线动画?
还望不吝赐教
  回复  引用  查看    
#7楼 [楼主] 2008-07-03 16:27 | 三千      
@隨風.NET
画绿点是这样的:
给一个坐标点,然后在那个点所在位置动态画了一个小圆形,颜色为绿色。这样就是上边图中的效果,看起来象个点,本质是个小圆形。

如果你要换为图标,也是比较好办:

把你图标放在库中,并转换为元件,设置链接id,然后需要修改function DrawLine中调用DrawCircle的那部分。
即动态将这个图标生成在指定的坐标位置即可。现在问题就转换成,加载一个库中的图片(MovieClip)到_x=10,_y=15处,如何做呢?其实就是attachMovie的用法了,可以查询一下帮助。



  回复  引用  查看    
#8楼 [楼主] 2008-07-03 16:32 | 三千      
@隨風.NET

对于曲线的动画,我不知道你要怎么样的一个动画效果。

请详细说一下。


  回复  引用  查看    
#9楼  2008-07-03 20:16 | 隨風.NET      
@三千
曲线的动画 就是曲线是一个点一个的画出来 用户能看见曲线走的轨迹
  回复  引用  查看    
#10楼 [楼主] 2008-07-03 22:09 | 三千      
@隨風.NET

如果是这样的话,我们先把问题转化一下:

给定二个点A,B,在这二点之间绘制一条线,而且让线从A点到B点时,是运动着过去,而不是一下绘制而成的。这个怎么做呢?

根据数学我们知道,知道二点,可以算出二点确定的线段的斜率,所以我们先算出斜率。

斜率知道了,我们使用循环+延时的方式,每隔若干ms,就绘制一点点线段,比如x方向每次绘制5个象素,然后根据斜率,算出y方向应该绘制多少个象素。这样就保证了线段一直朝着B点的方向在进行绘制。
同时每绘制一次,就检查是否已超过B点,如果没有,继续下次循环绘制,否则结束,并同时在B点绘制一个图标。由于有延时的,一点点的绘制出来,所以就有了动画了。

循环可以使用MovieClip的onEnterFrame或setInterval。



  回复  引用  查看    
#11楼  2008-07-22 14:45 | seno'blog      
我也没打开……
  回复  引用  查看