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

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

Posted 八月 9th, 2009 by 郭少瑞

• 地图

这篇文章，我们将了解到如何使用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，示例代码：

  
    

   
     
 
      
 
       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 — 竹箫

要份源码

我怎么无法下载源码啊，有的朋友，麻烦给发份好吗？

小弟感激不尽！

[email protected]

• 回复

周五, 08/21/2009 - 19:42 — migsr

下载源码的方法

1.首先安装SVN的客户端，下载地址：http://www.97sky.cn/soft/2559.html
2.装好后，重启电脑，启动成功后，点击右键，如果有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

能给我份源代码么[email protected]。谢谢！我去楼主给的网站下载的时候少了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网友

我知道是怎么回事，

我知道是怎么回事，楼主可以鼠标上下移动的快一些就看到。

这个应该跟算法有关系，鼠标移出后的自动隐藏方法最好加个延迟，鼠标移入的方法里加入清除自动隐藏延迟，应该可以解决这个问题。

这种问题一般都出现在极端的情况下，很容易忽略掉。