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..

Introduction

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.

Step 2: Edit Profile

In the Properties panel press the Edit button.

Step 3: Choose Flash Player Version

Choose Flash Player 9 profile and click OK.

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.

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.

Step 6: Enter a Class to Publish

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

Step 7: Start Programming!

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

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	import away3d.containers.View3D;
	import away3d.primitives.Cube;

}

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.

public class CreateCube01 extends Sprite {

}

Step 9: Declare Variables

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

public class CreateCube01 extends Sprite {
	private var viewport:View3D;
	private var cube:Cube;
}

Step 10: Add Function for Creating Cube

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

public function CreateCube01() {

	viewport = new View3D({x:200, y:200});
	addChild(viewport);

}

Step 11: Create a Cube 1

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

cube = new Cube({width:150, height:150, depth:150});
viewport.scene.addChild(cube);

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.

this.addEventListener(Event.ENTER_FRAME, renderThis);

private function renderThis(e:Event):void {
	cube.rotationX +=1;
	cube.rotationY +=1;
	cube.rotationZ +=1;
	viewport.render();					
}

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.

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.

Step 15: Import New Classes

In CreateCube01.as add some new classes.

import flash.display.Bitmap;

import away3d.materials.BitmapMaterial;

import away3d.core.utils.Cast;

Step 16: Add Variables for Texture

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

[Embed (source="metal.jpg")] private var myTexture:Class;
private var myBitmap:Bitmap = new myTexture();

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.

var myMaterial:BitmapMaterial = new BitmapMaterial(Cast.bitmap(myBitmap));
cube = new Cube({width:150, height:150, depth:150, material:myMaterial});

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.

Step 19: Add Camera

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

import away3d.cameras.*;

private function renderThis(e:Event):void {
	cube.rotationX +=1;
	cube.rotationY +=1;
	cube.rotationZ +=1;
	viewport.camera.moveTo(cube.x,cube.y,cube.z);
	viewport.camera.moveBackward(500);
	viewport.render();					
}

Step 20: Add Control with Mouse on Camera

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

private function renderThis(e:Event):void {
	viewport.camera.rotationY=mouseX/2;
	viewport.camera.rotationX=mouseY/2;
	cube.rotationX +=1;
	cube.rotationY +=1;
	cube.rotationZ +=1;
	viewport.camera.moveTo(cube.x,cube.y,cube.z);
	viewport.camera.moveBackward(500);
	viewport.render();					
}

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.

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).

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.

<title>Texture Cube (Away3D)</title>
<style type="text/css">
body {background-color:#fff; padding:20px; margin:0px; }
</style>

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.

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.

<script type="text/javascript" src="http://flashtuts.s3.amazonaws.com/049_3DCubeAway3D/tutorial/swfobject.js"></script>

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".

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.

Step 28: Move SWF into HTML

From the generated output copy:

<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {};
	swfobject.embedSWF("cube.swf", "flash_content", "550", "400", "9.0.0", false, flashvars, params, attributes);
</script>

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:

<div id="flash_content">
	<a href="http://www.adobe.com/go/getflashplayer">
		<img src="http://flashtuts.s3.amazonaws.com/049_3DCubeAway3D/tutorial/http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
	</a>
</div>

and paste it into the body section.

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!

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.

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:

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:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.Bitmap;

	import away3d.cameras.*;

	import away3d.containers.View3D;
	import away3d.primitives.Cube;
	import away3d.materials.BitmapMaterial;

	import away3d.core.utils.Cast;

	public class away3d_cube_tutorial extends Sprite
	{
		private var viewport:View3D;
		private var cube:Cube;
		
		[Embed (source="metal.jpg")] private var myTexture:Class;
		private var myBitmap:Bitmap = new myTexture();
		
		public function away3d_cube_tutorial()
		{
			viewport = new View3D({x:200, y:200});
			addChild(viewport);
			
			var myMaterial:BitmapMaterial = new BitmapMaterial(Cast.bitmap(myBitmap));
			cube = new Cube({width:150, height:150, depth:150, material:myMaterial});

			viewport.scene.addChild(cube);
			
			this.addEventListener(Event.ENTER_FRAME, renderThis);
		}
		private function renderThis(e:Event):void {
			viewport.camera.rotationY=mouseX/2;
			viewport.camera.rotationX=mouseY/2;
			cube.rotationX +=1;
			cube.rotationY +=1;
			cube.rotationZ +=1;
			viewport.camera.moveTo(cube.x,cube.y,cube.z);
			viewport.camera.moveBackward(800);
			viewport.render();					
		}
	}
}

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".

Step 34: Final Flex

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

Conclusion

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!