结合Flex Builder和Flash CS4制作一个中国地图的应用(转)
2010-09-02 11:42
351 查看
结合Flex Builder和Flash CS4制作一个中国地图的应用
Posted 八月 9th, 2009 by 郭少瑞 地图这篇文章,我们将了解到如何使用Flash技术创建一个中国地图的应用。相信在很多地方都会有这样的需求:比如一个全国性论坛的入口,需要 显示一种导航给访客,让访客可以选择自己的省份,这种情况下最方便的方式就是提供一个具备交互特性的地图给用户,同样也可以很方便的用这个地图展示一些数 据(比如每个区域的注册人数等等),那么选用何种技术来制作这个应用呢?当然是Flash,基于Flash Player平台我们可以创建非常酷的具备很强交互性的应用(这里所说的Flash是指Flash Platform,即Flash平台,而非指单独的某个软件)。
问题概述:
我想使用Flash制作一个中国地图的应用,这个应用应该按照省份划分出若干区域,并可以响应单独的鼠标事件,并且可以实时的显示一些信息等等,功 能可以归结如下:按照省份划分行政区域,显示每个省份的详细信息(内容通过XML自定义)
支持HTML显示
支持点击省份,打开网页链接
支持事件监听(ActionScript和JavaScript)
最终完成的运行效果如下:
http://www.richbox.net/Files/demo.html
解决方案:
我们可以先使用Flash CS4完成地图的基本绘制,然后使用Flex Builder来完成逻辑的编写工作,这是一个很典型的结合Flash创作工具和Flex编码工具的一个应用场景,众所周知的是FlashCS在动画和矢 量图形的绘制上非常强悍,但它并不是一个完善的开发工具,虽然你也可以使用Flash CS完成全部代码的编写工作(这是完全可以的,如果你有足够的耐心忍受Flash CS在编码支持上的缺陷的话),但如果有更为强大的Flex Builder(最新版已经改名为Flash Builder了,因为最新版是测试版,所以我们这里仍然以Flex Builder3为例来完成这个应用)来帮你更高效的工作,我们为什么不选择Flex Builder呢?这里我们将把Flash CS4和Flex Builder3结合起来完成这个工作。注意在这里我们只是使用了Flex Builder3这个IDE,而并没有使用Flex技术(即Flex的框架),所以我在标题刻意表明了Flex Builder,而非Flex,以防误解。
使用软件:
Flex Builder3,Flash CS4详细步骤:
1.准备工作首先你需要寻找关于中国地图的素材,最好是矢量的,以便可以很方便的在Flash中使用,你也可以从文章最后的源码部分,下载到项目中的地图素材文 件
2.使用Flash CS4完成地图的绘制
使用FlashCS4完成整个地图的绘制工作,这个部分的工作比较枯燥,但如果你的项目对UI细节的把控很严格,这个地方的工作也是要细心完成的, 需要特别注意的是,要将省份分割成为若干独立的电影剪辑,以便分散侦听它们的鼠标事件,具体的源文件的结构可以参考源码中的assets目录中的 map.fla文件,注意有3个电影剪辑是需要设置导出为类的(在电影剪辑的属性面板中,点开“高级选项”即可看到),如下图所示:
这一步很关键,因为在Flex Builder中编程的时候,我们需要把这些素材作为类来使用。绘制工作完成之后,我们需要打开Flash属性面板上的“发布设置”面板,选中“导出 SWC文件”,这个操作的含义就是我们将把资源导出到一个SWC资源包,以便我们之后使用。完成这部操作之后,我们就可以按下F12键,发布一个SWC文 件出来(有过Flex编程经验的朋友肯定对这个格式不陌生了),至此Flash CS部分的工作结束,下面我们转入Flex Builder继续后续的编程工作。
3.建立Action Script项目并导入SWC文件
我们打开Flex Builder,建立一个Action Script项目(因为我们并不需要Flex的框架,所以没必要引入MXML),然后在项目的Library部分,导入我们刚才导出的SWC文件(这个时 候,你可以在项目中使用New语句测试一下,就会发现语法提示中已经出现了刚才我们导出到SWC中的地图类)。
4.建立数据XML文件
刚才已经提到,我们这个地图将使用XML作为数据来源,我们可以按照如下的结构建立一个XML,示例地址:
http://code.google.com/p/chinamapforflash/source/browse/trunk/src/data/d.xml
5.完成功能编写
我们会发现,Flex Builder已经为我们建立了一个主程序的类文件,也就是默认的编译文件,我们可以直接在它的基础上编写代码。首先使用元数据(Metadata)设置 一下编译的参数:
[SWF(width="600",height="500",frameRate="25",backgroundColor="#FFFFFF")]
然后在构造方法中载入刚才建立的数据XML,示例代码:
var mapLoading:MapLoading = new MapLoading(); addChild(mapLoading); var xmlLoader:URLLoader = new URLLoader(); var xmlAdress:String = (loaderInfo.parameters.xmlurl != null)?loaderInfo.parameters.xmlurl:"data/d.xml"; xmlLoader.addEventListener(Event.COMPLETE,function(e:Event):void{ mapXML = new XML(e.target.data).area; removeChild(mapLoading); drawUI(); }); xmlLoader.load(new URLRequest(xmlAdress));再载入XMl完成之后,我们就可以绘制UI了,使用New语法将SWC中的内容添加到当前文件的显示列表中,示例代码:
private function drawUI():void { mapBackGroud = new MapBackgound(); mapBackGroud.title = (mapConfig.title == null)?"you need set title":mapConfig.title; addChild(mapBackGroud); mapArea = new MapArea(); mapArea.x = mapArea.y = 20; addChild(mapArea); stopAll(mapArea.map); registAction(mapArea.map); tipShandow = new Sprite(); addChild(tipShandow); mapTip = new MapTip(); addChild(mapTip); mapTip.visible = false; }然后要做的工作,就是为地图中的每个省添加事件侦听,并绑定到相应的XML的数据节点上,已判断当用户点击一个省份的时候,从哪个XML节点中获取 数据并显示:
(me as MovieClip).title = node.@title; (me as MovieClip).value = node.@value; (me as MovieClip).navUrl = node.@url; (me as MovieClip).navTarget = node.@target; (me as MovieClip).buttonMode = true; (me as MovieClip).addEventListener(MouseEvent.MOUSE_OVER,mapOverHandler); (me as MovieClip).addEventListener(MouseEvent.MOUSE_OUT,mapOutHandler); (me as MovieClip).addEventListener(MouseEvent.CLICK,mapClipHandler);完整的代码参见:
http://code.google.com/p/chinamapforflash/source/browse/trunk/src/ChinaMap.as
6.如何使用
将这个Flash插入到网页中并配置相应的参数即可(需要设置地图的标题,和数据源的XML地址,如果你希望Flash回调你的 JavaScript方法,请参见第三个参数的配置),推荐使用SWFObject,示例代码:
<script type=“text/javascript”> function eventHandler(e) { alert(e.value); } var s1 = new SWFObject(“ChinaMap.swf”,“ply”,“600″,“500″,“10″,“#FFFFFF”); s1.addParam(“allowscriptaccess”,“always”); s1.addVariable(“title”,“中国地图”); s1.addVariable(“xmlurl”,“d.xml”); s1.addVariable(“jsHandler”,“eventHandler”); s1.write(“container”); </script>
下载
你可以从这里下载到项目源码以及Flash素材文件:http://code.google.com/p/chinamapforflash/source/browse/trunk/
=================================
能解 释一下吗?
stopAll(mapArea.map);里的mapArea.map怎么来的,map是mapArea的属性?回复
周二, 02/02/2010 - 16:26 — migsr
map是mapArea中的一个电
map是mapArea中的一个电影剪辑回复
周二, 02/02/2010 - 22:35 — RIAMeeting网友
请指教
可是我在map.fla里没找到呀,请指教回复
周三, 10/28/2009 - 08:48 — RIAMeeting网友
非常感谢!!!
非常感谢!!!回复
周五, 08/21/2009 - 15:58 — 竹箫
要份源码
我怎么无法下载源码啊,有的朋友,麻烦给发份好吗?小弟感激不尽!
haoyunweb@126.com
回复
周五, 08/21/2009 - 19:42 — migsr
下载源码的方法
1.首先安装SVN的客户端,下载地址:http://www.97sky.cn/soft/2559.html2.装好后,重启电脑,启动成功后,点击右键,如果有SVN相关的操作选项,就说明SVN装好了
3.建立一个文件夹,在文件夹上点右键,选择SVN的版本库浏览器,输入http://chinamapforflash.googlecode.com /svn/trunk/
4.将项目检出到你的文件夹中即可,应该不需要用户名和密码,如果不成功,请访问,按照说明下载
http://code.google.com/p/chinamapforflash/source/checkout
回复
周四, 08/20/2009 - 18:27 — RIAMeeting网友
不错
很不错的应用,强烈希望楼主:1.地理单位可以细致到市,县级别,如果能细化到街道更好
2.应该可以扩展到世界地图
回复
周一, 08/17/2009 - 14:03 — wensan
能给我份源代码么wensa
能给我份源代码么wensan006@126.com。谢谢!我去楼主给的网站下载的时候少了FLA文件!回复
周一, 08/17/2009 - 15:34 — migsr
所有的源码都在Google Code上
其中FLA的源文件在:http://code.google.com/p/chinamapforflash/source/browse/trunk/#trunk/assets
Bug
当你鼠标在吉林的时候,在垂直向下移动鼠标,总是显示吉林。回复
周二, 08/11/2009 - 23:07 — migsr
似乎没有这个Bug吧,
似乎没有这个Bug吧,当鼠标离开吉林的时候,Tip就消失了回复
周六, 08/15/2009 - 21:36 — RIAMeeting网友
我知道是怎么回事,
我知道是怎么回事,楼主可以鼠标上下移动的快一些就看到。这个应该跟算法有关系,鼠标移出后的自动隐藏方法最好加个延迟,鼠标移入的方法里加入清除自动隐藏延迟,应该可以解决这个问题。
这种问题一般都出现在极端的情况下,很容易忽略掉。
相关文章推荐
- 结合Flex Builder和Flash CS4制作一个中国地图的应用
- 使用echarts简单制作中国地图,echarts中国地图
- 谈中国房地产行业电子地图gis开发应用
- 我也来推荐一个强大的flash应用
- 为iOS应用制作一个二维码
- iOS的Core Text教程:制作一个杂志应用
- 用echarts.js制作中国地图,点击对应的省市链接到指定页面
- 没明白!为什么使用Tiled制作的地图?一个图层只能放一个图块
- ComponentOne C1Ribbon 制作简单的地图应用
- 1.使用UISearchController制作一个简单的本地搜索应用
- Dreamweaver CS4实例教程—新特性应用之菜单制作
- 利用Flash制作一个可以自由拨动的时钟模具
- QuickPart应用(1)-----利用QuickPart制作一个简单的webpart
- 一个有趣的关于flash和多种设备交互等技术应用的演示网站
- Dhtml制作一个应用渐变颜色效果不错的进度条
- 地图开发应用可以与哪些移动应用结合?——地图应用产品定制
- Flash cs6 学习(二) 制作一个flash进度条
- unity3d学习笔记(十一)--NGUI结合Shader制作小地图
- unity3d学习笔记(十一)--NGUI结合Shader制作小地图
- 探索Emberjs制作一个简单的Todo应用