Web三维技术：Flash Builder+away3d平台搭建（含演示视频）

Web三维技术：Flash Builder+away3d平台搭建

作者：一点一滴的Beer http://beer.cnblogs.com/

前言：作为页面中实验设备的显示层，需要一个swf作为显示的UI。虽然可以用FlashMX进行简单的flash设计，但是FlashMX一般是偏向于动画设计，而不是程序设计，所以在进行相关的开发时，支持性不是太好，于是笔者就想到了转用Flex Builder来进行开发。

一、开发语言和开发环境

　　ActionScript是 Macromedia（现已被Adobe收购）为其Flash产品开发的 ，最初是一种简单的脚本语言，现在最新版本3.0，是一种完全的面向对象的编程语言，功能强大，类库丰富，语法类似JavaScript，多用于Flash互动性、娱乐性、实用性开发，网页制作和RIA应用程序开发。

　　ActionScript 是一种基于ECMAScript的脚本语言，可用于编写Adobe Flash动画和应用程序。 由于ActionScript和JavaScript都是基于ECMAScript语法的，理论上它们互相可以很流畅地从一种语言翻译到另一种。不过JavaScript的文档对象模型（DOM）是以浏览器窗口，文档和表单为主的，ActionScript的文档对象模型（DOM）则以SWF格式动画为主，可包括动画，音频，文字和事件处理。

     由于软件和库文件存在版本多样的问题，所以在进行介绍之前进行说明。本文中所演示例子使用的软件版本如下：

　　　　Flash Builder：4.5

　　　　Flex SDK：4.5.1

　　　　Away3D：3.5.0

　　　　Flash Player：10 debug版本或者更高

1.1 Flash Builder集成开发环境

　　Adobe® Flash® Builder™ 4.5 软件（曾为 Adobe Flex® Builder™）是基于 Eclipse™ 的开发工具，使用 ActionScript® 和开源 Flex 框架快速构建具有表现力的移动、Web 和桌面应用程序。软件可以在Adobe主页上去下载。

　　安装了Flash Builder4.5之后，Flex SDK4.5也自动被集成到了开发环境中了。然后就可以利用此IDE进行一般的Flex开发了，但是如果要进行3d开发，则还需要引入3d的引擎库。

　　Flash Builder 4.5下载页面：https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=zh_cn

1.2 Away3D引擎库

　　提供了一个3d引擎库。在Flash Builder中建立项目，然后引入此库，可以迅速进行3d的Flash开发。

　　Away3D引擎属于一个免费开源的项目，而且持续开发和更新中，所有存在版本众多的问题。目前我们主要使用的是稳定版本的3.5版。在Away3d的主页中可以下载到如下资源：Away3d库、Away3d Examples例程、Away3d Documents参考文档。

　　Away3d 3.5下载页面：http://away3d.com/download/away3d_3.5.0

1.3 Flash Player播放器

　　编程的语言ActionScript目前主要分为2.0和3.0两个版本，Flash播放器相当于ActionScript的编译环境，对于不同版本的ActionScript需要不同的播放器支持，如果使用了低版本的Flash Player则会出现编译无法通过。对于Away3d_3.5库，需要至少Flash Player10的支持。如果希望能够在Flash Builder中对源代码进行调试，则需要到Adobe主页上下载一个debug版本的Flash Player10。

　　在Adobe主页上下载Flash Player的时候，除了有发布版和调试版之分，也有IE和非IE之分。如果你使用的是IE或者基于IE内核的浏览器，则下载基于IE的debug版Flash Player10，如果是使用Chrome或者Firefox这些非IE内核的浏览器，则下载相应的播放器。

　　Flash Player 10下载页面：http://www.adobe.com/support/flashplayer/downloads.html

　　先到网上下载到上述的软件后，就可以遵循下述步骤进行环境搭建：

1.卸载本机上的旧版本的Flash Player，安装Flash Player10。 2.安装Flash Builder4.5到指定目录，例如： "D:\Program Files\Adobe\Adobe Flash Builder 4.5" 如果成功安装，则Flex Sdk4.5也会被成功安装上，在目录： "D:\Program Files\Adobe\Adobe Flash Builder 4.5\sdks" 里面包含了不同版本的Flex SDK，今后如果Adobe发布新的SDK，则只需要下载新的SDK然后解压到此目录中即可。 3.解压Away3d的库文件到指定目录。例如： "D:\FlashBuilder_Libs\Away3d_lib" 在后面进行Away3d开发时，需要引用此路径中的库文件。

　　完成上述工作后，就可以进行Away3d的Flex开发了。

二、建立ActionScript项目

　　关于如何建立一般的Flex项目，在此不再赘述，有兴趣的可以到网上找到很多相关例子。本文重点在让Away3d 3.5提供的Examples成功跑起来。

2.1项目建立与设计

　　打开Flash Builder，然后新建项目，选择"ActionScript Project"，然后输入项目名称点击Finish。在Package Explorer中右击项目选择"Properties"进行相关设置。设置内容包括：

1.设置Flex SDK版本。

　　一般情况下，在建立项目的时候就已经对SDK进行了指定，但是如果在项目建立完毕后需要修改SDK，可以在此界面下进行修改:ActionScript Build PathàLibrary path

2.设置Away3d库的引用路径。

　　在ActionScript Build PathàSource path中，可以添加Away3d的引擎库，也就是我们下载下来解压下来的文件夹，添加解压目录src中的内容。

3.设计编译器版本

　　ActionScript的编译环境就是Flash Player，Away3d 3.5需要10以下的版本的播放器的支持。在Flash Builder4.5中没有必要对此进行设置，因为默认的就是10.2的版本，但是如果今后3d库升级需要更高版本的播放器支持，则需要在此进行相应的设置。

2.2Away3d Examples项目移植

　　将从Away3d主页上下载的3.5版本对应的"examples_3_5_0.zip"解压，然后将根目录下的文件复制到新建的ActionScript项目的根目录下进行覆盖。在Flash Builder中对项目的目录进行刷新。然后就可以了。

　　如果想要运行某文件，例如："Basic_LoadModel.as"则只需要右击此文件，然后选择"Set as Default Application"，再右击选择Run asà Web Application，然后就可以在浏览器中看到运行的效果图了。

　　在项目的bin-debug目录下面，会生成对应的swf文件，这个可以独立运行的。

　　Away3d Examples的演示效果见如下视频：

http://v.youku.com/v_show/id_XMjgzMzI2MDgw.html

2011-7-8

于武汉大学

------------------------------------------------------------------

Author:一点一滴的Beer

Email /Gtalk:[email protected]

From:http://www.cnblogs.com/beer

Notes:欢迎转贴，但请在页面中加个链接注明出处

original:http://www.cnblogs.com/beer/archive/2011/05/05/2037449.html