Web 3D technology: Flash builder + away3d platform construction (including Demo Video)

Web 3D technology: Flash builder + away3d Platform Construction

Author: 1.1 dropsBeer http://beer.cnblogs.com/

Preface:As the display layer of the lab device on the page, a SwF is required as the display UI. Although Flash MX can be used for simple flash design, Flash MX is generally biased towards animation design ratherProgramDesign, so in related development, the support is not very good, so I thought of using Flex builder for development.

I. development language and development environment

ActionScript was developed for its flash product by Macromedia (which has been acquired by Adobe). It was initially a simple scripting language. The latest version 3.0 is a completely object-orientedProgramming LanguageIt has powerful functions, rich class libraries, and similar syntax to Javascript. It is mostly used for flash interactive, entertaining, and practical development, web page creation and RIA application development.

ActionScript is an ecmascript-based scripting language that can be used to compile Adobe Flash animations and applications. Since both ActionScript and JavaScript are based on the ecmascript syntax, theoretically they can be smoothly translated from one language to another. However, JavaScript's Document Object Model (DOM) is based on browser windows, documents and forms, while the Document Object Model (DOM) of ActionScript is based on SWF animation, which can include animation, audio, text and event processing.

Because there are various versions of software and library files, we should explain them before introduction. The software version used in this example is as follows:

Flash builder: 4.5

Flex SDK: 4.5.1

Away3d: 3.5.0

Flash Player: 10 debug version or later

1.1 integrated flash Builder development environment

Adobe Flash builder 4.5 (formerly Adobe Flex builder) is an eclipse-based development tool that quickly constructs expressive mobile, web, and desktop applications using the ActionScript and open-source flex framework. You can download the software on the Adobe homepage.

After flash builder4.5 is installed, flex sdk4.5 is automatically integrated into the development environment. Then we can use this IDE for general flex development, but if we want to do 3D development, we also need to introduce a 3D engine library.

Flash builder 4.5 download page: https://www.adobe.com/cfusion/tdrc/index.cfm? Product = flash_builder & loc = zh_cn

1.2 away3d engine Library

Provides a 3D engine library. Create a project in Flash builder and introduce this library to quickly develop 3D flash.

The away3d engine is a free and open-source project and is continuously developing and updating. There are many version problems. At present, we mainly use stable version 3.5. On the home page of away3d, you can download the following resources: away3d library, away3d examples routine, and away3d documents reference.

Away3d 3.5 download page: http://away3d.com/download/away3d_3.5.0

Flash Player 1.3

Currently, the programming languages of ActionScript are mainly divided into 2.0 and 3.0. Flash Player is equivalent to the compilation environment of ActionScript, and different player support is required for different versions of ActionScript, if an earlier version of Flash Player is used, compilation fails. For the away3d_3.5 library, at least flash player10 is required. If you wantSource codeFor debugging, You need to download a debug version of Flash player10 on the Adobe homepage.

When downloading flash player on the Adobe homepage, there are both release and DEBUG Versions, and IE and non-ie versions. If you are using IE or IE-based browsers, download the IE-based debug flash player10. If you are using chrome or Firefox, download the corresponding player.

Flash Player 10 download page: http://www.adobe.com/support/flashplayer/downloads.html

After downloading the software from the Internet, follow these steps to build the environment:

1. Uninstall the old version of flash player on the local machine and install flash player10. 2. Install flash builder4.5 to the specified directory, for example: "D: \ Program Files \ Adobe Flash builder 4.5" If the installation is successful, flex sdk4.5 will also be successfully installed in the directory: "D: \ Program Files \ Adobe Flash builder 4.5 \ sdks" Different versions of the Flex SDK are included. If Adobe releases a new SDK in the future, you only need to download the new SDK and decompress it to this directory. 3. decompress the away3d library file to the specified directory. For example: "D: \ flashbuilder_libs \ away3d_lib" When developing away3d, you must reference the library files in this path.

After completing the above work, you can perform flex development in away3d.

2. Create an ActionScript Project

I will not go into details about how to create a general flex project here. If you are interested, you can find many related examples on the Internet. This article focuses on enabling examples provided by away3d 3.5 to run successfully.

2.1 project establishment and Design

Open flash builder, create a project, select "ActionScript Project", and enter the project name and click Finish. In package explorer, right-click the project and select "properties" for relevant settings. The settings include:

1. Set the flex SDK version.

Generally, the SDK has been specified when the project is created. However, if you need to modify the SDK after the project is created, you can modify it on this interface: ActionScript build pathÀLIBRARY PATH

2. Set the Reference Path of the away3d library.

Build path in ActionScriptÀIn Source Path, you can add the away3d engine library, that is, the folder we downloaded and decompressed, and add the content in the extracted directory SRC.

3. Design the compiler version

The compilation environment of ActionScript is Flash Player. away3d 3.5 requires support from players of versions earlier than 10. There is no need to set this in Flash builder4.5, because the default version is 10.2. However, if you want to upgrade the 3D library to a later version of the player, you need to set it here.

2.2away3d examples project porting

Decompress "examples_3_5_0.zip" corresponding to version 3.5 downloaded from the away3d homepage, and copy the files in the root directory to the root directory of the newly created ActionScript project for overwriting. Refresh the project directory in Flash builder. Then you can.

To run a file, for example, "basic_loadmodel.as", right-click the file, select "set as default application", and right-click the file and select RunÀWeb application, and then you can see the running in the browser.

Under the bin-DEBUG directory of the project, the corresponding SWF file is generated, which can be run independently.

For the demonstration effect of away3d examples, see the following video:

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

2011-7-8

At Wuhan University

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

Author:1.1 dropsBeer

Email/Gtalk: dreamzsm@gmail.com

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

Notes:You are welcome to paste it, but please add a link on the page to indicate the source

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