本文来自:RIAMeeting

这篇文章,我们将了解到如何使用Flash技术创建一个中国地图的应用。相信在很多地方都会有这样的需求:比如一个全国性论坛的入口,需要显示一种导航给访客,让访客可以选择自己的省份,这种情况下最方便的方式就是提供一个具备交互特性的地图给用户,同样也可以很方便的用这个地图展示一些数据(比如每个区域的注册人数等等),那么选用何种技术来制作这个应用呢?当然是Flash,基于Flash Player平台我们可以创建非常酷的具备很强交互性的应用(这里所说的Flash是指Flash Platform,即Flash平台,而非指单独的某个软件)。

问题概述:

我想使用Flash制作一个中国地图的应用,这个应用应该按照省份划分出若干区域,并可以响应单独的鼠标事件,并且可以实时的显示一些信息等等,功能可以归结如下:

  1. 按照省份划分行政区域,显示每个省份的详细信息(内容通过XML自定义)
  2. 支持HTML显示
  3. 支持点击省份,打开网页链接
  4. 支持事件监听(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,示例代码:

  1. var mapLoading:MapLoading = new MapLoading();
  2. addChild(mapLoading);
  3. var xmlLoader:URLLoader = new URLLoader();
  4. var xmlAdress:String = (loaderInfo.parameters.xmlurl != null)?loaderInfo.parameters.xmlurl:"data/d.xml";
  5. xmlLoader.addEventListener(Event.COMPLETE,function(e:Event):void{
  6. mapXML = new XML(e.target.data).area;
  7. removeChild(mapLoading);
  8. drawUI();
  9. });
  10. xmlLoader.load(new URLRequest(xmlAdress));

再载入XMl完成之后,我们就可以绘制UI了,使用New语法将SWC中的内容添加到当前文件的显示列表中,示例代码:

  1. private function drawUI():void {
  2. mapBackGroud = new MapBackgound();
  3. mapBackGroud.title = (mapConfig.title == null)?"you need set title":mapConfig.title;
  4. addChild(mapBackGroud);
  5. mapArea = new MapArea();
  6. mapArea.x = mapArea.y = 20;
  7. addChild(mapArea);
  8. stopAll(mapArea.map);
  9. registAction(mapArea.map);
  10. tipShandow = new Sprite();
  11. addChild(tipShandow);
  12. mapTip = new MapTip();
  13. addChild(mapTip);
  14. mapTip.visible = false;
  15. }

然后要做的工作,就是为地图中的每个省添加事件侦听,并绑定到相应的XML的数据节点上,已判断当用户点击一个省份的时候,从哪个XML节点中获取数据并显示:

  1. (me as MovieClip).title = node.@title;
  2. (me as MovieClip).value = node.@value;
  3. (me as MovieClip).navUrl = node.@url;
  4. (me as MovieClip).navTarget = node.@target;
  5. (me as MovieClip).buttonMode = true;
  6. (me as MovieClip).addEventListener(MouseEvent.MOUSE_OVER,mapOverHandler);
  7. (me as MovieClip).addEventListener(MouseEvent.MOUSE_OUT,mapOutHandler);
  8. (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,示例代码:

  1. <script type=“text/javascript”>
  2. function eventHandler(e) {
  3. alert(e.value);
  4. }
  5. var s1 = new SWFObject(“ChinaMap.swf”,“ply”,“600″,“500″,“10″,“#FFFFFF”);
  6. s1.addParam(“allowscriptaccess”,“always”);
  7. s1.addVariable(“title”,“中国地图”);
  8. s1.addVariable(“xmlurl”,“d.xml”);
  9. s1.addVariable(“jsHandler”,“eventHandler”);
  10. s1.write(“container”);
  11. </script>

下载

你可以从这里下载到项目源码以及Flash素材文件:

http://code.google.com/p/chinamapforflash/source/browse/trunk/

结合Flex Builder和Flash CS4制作一个中国地图的应用相关推荐

  1. 结合Flex Builder和Flash CS4制作一个中国地图的应用(转)

    结合Flex Builder和Flash CS4制作一个中国地图的应用 Posted 八月 9th, 2009 by 郭少瑞 地图 这篇文章,我们将了解到如何使用Flash技术创建一个中国地图的应用. ...

  2. python是中国的吗-使用Python实现画一个中国地图

    为什么是Python 先来聊聊为什么做数据分析一定要用Python或R语言.编程语言这么多种,Java, PHP都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用Python语言? 数据分析只 ...

  3. 知道经纬度用python画路线图_神级程序员教你用Python如何画一个中国地图!(好好玩)...

    为什么是Python 先来聊聊为什么做数据分析一定要用 Python 或 R 语言.编程语言这么多种, Java , PHP 都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用 Python ...

  4. 如何用Python画一个中国地图?

    为什么是Python? 先来聊聊为什么做数据分析一定要用Python或R语言.编程语言这么多种,Java, PHP都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用Python语言? 数据分析 ...

  5. 代码写好了怎么在php里裕兴_8 行代码用Python画一个中国地图

    源 / SegmentFault Jupyter 首先,第一神器是Jupyter.如果你是第一次使用,可能搞不清楚它的开发者做这么个鬼东西出来干什么,说它是博客系统也不像,说它是web服务器也不像,但 ...

  6. python中国地图程序设计_神级程序员教你用Python如何画一个中国地图!(好好玩)...

    为什么是Python 先来聊聊为什么做数据分析一定要用 Python 或 R 语言.编程语言这么多种, Java , PHP 都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用 Python ...

  7. 8 行代码用Python画一个中国地图 !

    Jupyter 首先,第一神器是Jupyter.如果你是第一次使用,可能搞不清楚它的开发者做这么个鬼东西出来干什么,说它是博客系统也不像,说它是web服务器也不像,但它就是有用. 因为我们传统的web ...

  8. 用Python画一个中国地图

    为什么是Python 先来聊聊为什么做数据分析一定要用 Python 或 R 语言.编程语言这么多种, Java , PHP 都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用 Python ...

  9. excel做地图热力图_如何简单快速的做出一个中国地图热力图 (数据随机虚构)

    如何简单快速的做出一个中国地图热力图: 用 Echarts 即可以简单快速的写出: 除导入 echarts.js 外,还需要导入 中国的 JSON 或是 js(现在官方不提供下载,需要自行下载,也可以 ...

最新文章

  1. Centos DNS服务器搭建
  2. CUBA 7的新功能
  3. 线程之间通信 等待(wait)和通知(notify)
  4. 趣味娱乐小程序源码多流量主 趣味制作/藏头诗/隐藏图
  5. bootstrap-表单
  6. Redis命令参考【EXPIRE】
  7. 《推荐系统笔记(七)》因子分解机(FM)和它的推广(FFM、DeepFM)
  8. php7从基础到商业实战,TP5从基础到项目实战全套
  9. 如何将项目发布到阿里云_尚硅谷基于阿里云搭建数据仓库(实时)项目视频发布...
  10. 安卓初学者笔记(四):用白话讲明白Activity是什么
  11. linux子系统下载错误,Win10系统开启linux子系统报错“0x80070057”怎么办?
  12. 微信公众号平台登陆-你已授权登陆过XXXX
  13. Jetson tx2 使用 jetpack 4.3刷机全过程
  14. [图形学] 经典算法 - Kajiya三维纹理渲染毛发
  15. 测地距geodesic
  16. .NET经典图书推荐(上)
  17. Java中Lambda表达式使用及详解
  18. IP定位FAQ(“准不准?”)
  19. 喜讯:卓豪(日志分析)获批公安部颁发的销售许可证!
  20. LayUI列表渲染实现及问题

热门文章

  1. EXCEL 兼容性的问题
  2. Ubuntu 系列学习(一)Ubuntu常用命令
  3. JVM(Java SE 11版本)加载类和接口
  4. 抖音快手如何轻松接入虚拟人直播
  5. 获取京东商品信息报错error pdos_captcha
  6. Java游戏服务器代码热更新
  7. .net软件工程面试题
  8. 科普| USB接口,你真的懂吗?
  9. 基于MQTT的数据采集系统
  10. 多媒体计算机软件需求,多媒体技术在计算机教学中的问题与对策研究