Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. 3D

Creating and Texturing a Cube in Away3D


We're going to create a cube in the Adobe Flash (or Flex) environment using the Away3D engine. We'll choose the necessary texture and superimpose it onto the cube's faces. We'll also make the cube rotate and rule the scene via a camera.

Let's get stuck in..


During this tutorial we'll use Adobe Flash and the Away3D 2.3.3 engine for Flash Player 9. For inserting the final swf we'll use Adobe Dreamweaver (you can use any html-editor), SWFObject and SWFObject Generator (air-version or html-version). I'll also explain how to create and texture a cube in the Flex environment.

Step 1: Create New .fla File

Create new ActionScript3 file.

away3d texture

Step 2: Edit Profile

In the Properties panel press the Edit button.

away3d texture

Step 3: Choose Flash Player Version

Choose Flash Player 9 profile and click OK.

away3d texture

Step 4: Get the Away3D Engine!

Save your file as "away3d_cube.fla" in the away3d_cube_tutorial folder.

Download the Away3D engine from Away3D Downloads. We'll use version 2.3.3 for Flash Player 9.

Unpack an archive and copy all folders into the away3d_cube_tutorial folder.

away3d texture

Step 5: Create New Actionscript File

Create a new ActionScript file in Adobe Flash. Save your file as "CreateCube01.as" in the away3d_cube_tutorial folder.

away3d texture

Step 6: Enter a Class to Publish

In the Publish panel's Class field enter "CreateCube01".

away3d texture

Step 7: Start Programming!

Open CreateCube01.as and start by importing all the necessary classes.

Step 8: Public Class

Define a class, that extends Sprite Class. Pay attention to the Class name, it must be the same as the Class we entered in the Class field in the Publish panel.

Step 9: Declare Variables

Declare private variables for viewport container (View3D) and cube primitive (Cube).

Step 10: Add Function for Creating Cube

Add a public function after the lines where we declared our private variables.

Step 11: Create a Cube 1

In a public function create a cube with main settings and add it to the scene.

Step 12: Create a cube 2

Add an address to rendering function.

Create a private function for rendering the cube and its rotation around the X,Y,Z-axis. The private function must come after our public function.

Step 13: Preview

To see what we have so far, go to away3d_cube.fla and choose Control > Test Movie, or use hotkeys Cmd + Enter (Mac OS) or Ctrl + Enter (Windows). We have a rotating cube!

Be aware that the Away3D engine gives a random colour to your cube. In the following steps we'll add our own texture.

away3d texture

Step 14: Get the Texture

We need a texture bitmap. For the sake of this tutorial I've provided a bitmap, which I downloaded from cgtextures.com.

Rename the file to "metal.jpg" and copy it into root of the away3d_cube_tutorial folder.

away3d texture

Step 15: Import New Classes

In CreateCube01.as add some new classes.

Step 16: Add Variables for Texture

Add variables for the bitmap and texture and import the metal.jpg file.

Step 17: Add Material to the Cube

In the public function CreateCube01 we'll add a variable for material and the material for our cube.

Step 18: Preview Textured Cube

Check the result! Go to away3d_cube.fla from menu or use hotkeys Cmd + Enter (Mac OS) or Ctrl + Enter (Windows). We now have a textured rotating cube!

In the following steps we'll add a camera which we'll be able to rule with our mouse.

away3d texture

Step 19: Add Camera

Add a camera to the scene by importing a class and modifying the private function "renderThis".

Step 20: Add Control with Mouse on Camera

Further modify the private function renderThis to gain control via the mouse.

Step 21: Get Final Preview

Well done! We've created the cube, textured it, added the camera and camera control via the mouse. In the following steps we'll insert our swf into an html-page.

away3d texture

Step 22: Insert swf in Web Page

Create a new .html file. I highly recommend you create it in Adobe Dreamveawer (Mac, Windows) or Coda (Mac), Notepad++(Windows).

away3d texture

Step 23: Style Your HTML

We'll add style for the body of our page and change the title in head section. After that, save your file as "index.html" in the away3d_cube_html folder.

Step 24: SWFObject First

For valid publishing of our swf file we need the swfobject script.

Go to code.google.com/p/swfobject/ and download swfobject_2_1.zip and swfobject_generator_1_2_air.zip. Note: if you don't have Adobe Air download swfobject_generator_1_2_html.zip, but I like the Air application better.

away3d texture

Step 25: Importing Javascript

Unpack swfobject_2_1.zip and copy the swfobject.js file into the away_3d_cube_html folder.

In your index.html add a line to the head section after </style>, which imports javascript.

Step 26: Export Your SWF

Go to Adobe Flash and open away3d_cube.fla.

Choose File > Export > Export Movie from menu. In the dialog window choose your away3d_cube_html folder as the destination for your file. Save it as "cube.swf".

away3d texture

Step 27: SWFObject Generator

Unpack swfobject_generator_1_2_air.zip and run the swfobject_generator.air application.

Choose Dynamic publishing from Publishing method. Type "flash_content" into the HTML container id field.

Then type "cube.swf" into the Flash (.swf) field. Set 550 pixels and 400 pixels in the Dimensions fields for width and height respectively.

Lastly, click the Generate button.

away3d texture

Step 28: Move SWF into HTML

From the generated output copy:

and paste into the <head> section of index.html after <script type="text/javascript" src="http://flashtuts.s3.amazonaws.com/049_3DCubeAway3D/tutorial/swfobject.js"></script>. Then copy:

and paste it into the body section.

away3d texture

Step 29: Preview HTML

Preview your index.html in any browser manually, or choose File > Preview in browser > Safari (for example) in Adobe Dreamweaver’s menu.

Our html page works perfectly!

away3d texture
away3d texture

Step 30: Flex it!

Run Flex Builder 3. Go to File > New > ActionScript Project. In the dialog window enter "away3d_cube_tutorial" in the Project name field and click Finish.

away3d texture

Step 31: Away3D and Flex

Repeat Step 4, where we downloaded the archive with Away3D engine and unpacked it. Copy all folders from the unpacked archive and paste them into the away3d_cube_tutorial/src/ folder.

By default, this folder is located in Documents > Flex Builder 3 (Mac OS), C:\Program Files\Adobe\Flex Builder 3 (Windows).

Go to the Flex Builder 3 environment. Flex Navigator should appear as on the image below:

away3d texture

Step 32: Compile Your Code

First of all, copy metal.jpg into away3d_cube_tutorial/src/.

Then open CreateCube01.as and copy the following lines of code, where we import classes after "import flash.display.Sprite;" into the Flex enviroinment.

Then copy the private variables and paste them before defining the public function "away3d_cube_tutorial".

Here's the final code:

Step 33: Run Your Application!

Mark out away3d_cube_tutorial.as in Flex Navigator. Click the right button of your mouse and choose "Set as Default Application".

Click the right button of your mouse once more and choose "Run Application".

away3d texture
away3d texture

Step 34: Final Flex

Well done! The application you've created will open in a browser window.

away3d texture


In this tutorial we've taken our first steps in using the Away3D engine: creating a primitive object, texturing with a single material, adding camera control via the mouse. We have also learned how to insert our .swf into an .html-page, how to connect Away3D engine with Flex and compile actionscript code in Flex enviroinment. I hope you enjoyed following along, feel free to leave your comments and questions!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.