基于Actionscript3的热点图的设计与实现
摘要：本文介绍了actionscript3技术在热点图实现中的应用，很好的解决了热点图数据发布的直观性问题，同时将该技术的可维护及扩展性进行了说明。最后通过不同的数据采样实验，将基于actionscript3技术的热点图与基于html5的热点图在内存，cpu消耗，fps等图像渲染性能方面进行了对比，得出结论为基于actionscript3技术的热点图的整体性能优于基于html5的整体性能。
关键词：actionscript3；热点图；数据可视化
中图分类号：tp311.52 文献标识码：a 文章编号：1007-9599 （2012） 23-0000-02
1 actionscript3技术背景
actionscript3技术结合了c/s架构和b/s架构的优点，能够提供更丰富，更互动和更快响应的用户体验。本文探讨了actionscript3技术在热点图实现中的应用，并说明了该技术的可扩展性和可维护性。
2 现有的解决技术
2.1 html5
（1）html5的概念[2]。html5是包括html，css和javascript在内的一套技术组合.html5具有简单的语义特性，本地存储特性，设备兼容特性，支持css3的特性.
（2）html5在热点图的运用。heatmapjs是一个基于js+html5的热图开源项目。它的主要原理是利用脚本语言javascript数据可视化大屏设计操控canvas，根据用户行为产生的数据在canvas上绘制出来。
2.2 actionscript3技术
as3遵从ecmascript语言规范，而ecmascript是所有编程语言的国际规范化的语言，这就意味着所有能用到ecmascript语言的地方都可以将as3进行平滑移植。
as3由嵌入在flashplayer的actionscript虚拟机（avm2）中执行，从flashplayer10.0开始as3内置了支持解析json数据的类，而as3原生支持解析xml[4]，这就说明as3支持所有主流的网络数据类型，具有良好的可维护性和可扩展性。
3 热点图总体设计
3.1 热点图概述
热点图是一种将一些原本不易理解或表达的数据，比如密度，频率，温度等，用区域和颜这种更容易被人理解的方式来呈现的一种数据可视化方式。热点图在互联网用户行为分析上扮演着重要的角，常见的热点图应用有，鼠标点击热点图；屏幕滚动热图；眼动热图；用户地区热图。
3.2 实现热点图的技术架构
基于as3的热点图采用mvc的设计模式[5]实现，分离了表现层，逻辑层，数据和业务层
技术架构如下：表现层：as3实现，负责展示热点图数据和用户交互→逻辑层：as3实现，负责渲染热点图数据到表现层→数据层：as3+python，负责处理python推送到as3的热点图数据→业务层：python
热点图表现层作为用户界面，负责用户和数据的交互，采用as3技术实现数据渲染.利用as3读取和解析xml和json数据来实现渲染逻辑。一个好的用户体验是无缝的，不需要用户过多的思考如何查看。使用as3技术满足上述要求，可以带来丰富和良好的用户体验.逻辑层主要负
责数据渲染逻辑，通过as3实现。将数据点转成不同颜的小球，采用融合模式渲染到屏幕上。渲染颜的深浅与屏幕坐标附近点的个数相关，点越多渲染的颜就越深。网页热点图和服务器端的交互通过服务器端程序python推送json和xml数据来完成。python是一种服务器端的编程语言，在本文项目中，它主要负责生成用户点击点的屏幕坐标数据。
3.3 可维护及扩展性解决方案
可维护性是指在应用交付使用之后直至应用被淘汰的整个时期内为了改正错误或满足新的需求而修改应用程序的活动[8]。
可扩展性是指应用程序能扩展处理更大规模的业务，应对未来可能需要进行的修改.它以添加新功能或修改完善现有功能来考虑应用程序的未来成长。可扩展性是软件拓展系统的能力[8].
基于as3的热点图实现，只需要遵守数据传输协议，就可以实现处理更大规模的业务，比如海量用户点击数据。因为采用mvc的设计模式实现，使得逻辑层和表现层分离，可以方便的添加新功能或者修改完善现有功能，所以采用as3实现热点图具有良好的可维护及扩展性。
4 实验与对比
4.1 实验说明
分别采用as3技术和html5技术实现如下场景：
生成一个广告页面，页面读取采样好的用户点击行为数据，将其转换成热点图。页面布置在相同的服务器上，页面读取服务器端程序推送出的模拟137个虚拟实时用户点击行为的数据，页面运行时间为一小时。服务器配置是带有6g内存的处理器intel? pentium? cpu b940 @ 2.00ghz 2.00 ghz，运行的是64位win7操作系统。页面浏览器采用相同的浏览器chrome 19。
4.2 性能对比
表1是as3和html5对应的热点图所需的服务器资源。fps是frame per second的简称，即每秒渲染帧数，fps数值越高代表程序运行越流畅，cpu占用率越低.
下面是测试as3和html5对应热点图的渲染性能的结果，测试指标为将137个用户数据点渲染成对应的热点所需时间：
由表2可见，html5的平均渲染时间和as3的平均渲染时间持平，也就说明html5在绘制canvas上所耗费的时间和as3对bitmapdata操作所用时间相同
5 结束语
热点图在很大程度上帮助网站主，广告主了解用户浏览行为。本文阐述了热点图的整体架构设计，采用as3技术实现网页热点图的表现层和逻辑层，讨论了as3热点图的渲染技术。并对as3热点图的可维护性及可扩展性进行了说明，本文还对比了基于html5的热点图实现和基于as3的热点图实现，得出基于as3的热点图实现的整体性能优于基于html5的热点图的整体性能的结论。
参考文献：
[1]julie steele & noah lliinsky.beautiful visualization.apress，2011.
[2]steve fulton & jeff fulton.html5 canvas.apress，2011.
[3]darren richardson with paul milbourne.foundation actionscript 3.0 for flash and flex.apress，2009.
[4]sas jacobs.foundation xml and e4x for flash and flex.apress，2009.
[5]joey lott and danny patterson.actionscript3.0 with design patterns.peachpit press，2007.
[6]joey lott and danny patterson.advanced actionscript 3.0：design patterns.peachpit press，2007.
[7]todd yard.foundation actionscript 3.0 image effects.apress，2009.
[8]萨默维尔.软件工程（原书第9版）[m].程成.北京：机械工业出版社，2011.