This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Away3D Basics 5 - Primitives (Part 1)

Away3D Basics 5 - Primitives (Part 1)

Primitives are the building block of most 3D software. Away3D comes with 17 primitives as well as some helpers. This first tutorial on the primitives will explain how to work with primitives to achieve some great looking effects such as building a sound visualizer, a CMYK color separation viewer and more. This tutorial will also introduce you to the two coding styles that Away3D supports.

First of all - don't dismiss the primitives. They may be simple, but they're extremely useful! For instance - a simple Sphere is all you need to build a panorama viewer. Want to make a cubic panorama instead? Use the Skybox primitive for this.

In the first two tutorials on the Away3D Primitives, we'll look at the primitives that you will find the most useful. In the third part we'll finish off with the more exotic ones like the Sea Turtle. A Turtle you say? Yeah. A certain other 3D engine has a thing for cows. Away3D has a Sea Turtle primitive!

Prerequisites

This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. If you are uncertain about how to use the sample Class files provided, check out this tutorial.

Some of the examples in this tutorial use textures. We'll look closer at Textures and materials in a separate tutorial, but if you want to make the source files work with Flash CS3/CS3, read this tutorial first.

The Triangle

The basic building block of all 3D models is the triangle. While not all that useful in itself, combining many triangles create great results. Luckily, Away3D allows you to import complex models from commercial 3D software, so you probably won't need to build models from triangles too often. The triangle has some purpose by itself though. Since triangles are the smallest possible 3D element, it's often used for resource intensive things such as particle effects.

To create a single triangle you set the a, b and c properties to points in the 3D space. Each of the three points are defined by a vertex that has an x, y and z position like this:

var tri:Triangle = new Triangle();
tri.a = new Vertex(0,200,0);
tri.b = new Vertex(100,0,0);
tri.c = new Vertex(-100,0,0);
tri.bothsides = true;
view.scene.addChild(tri);

Below you can see a full example:

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExTriangle.as

Notice that we set the "bothsides" property to true. If we did not do that, our triangle would only be visible from one side.

The Plane

The plane is just a flat rectangle that has no depth. By default, a Plane is composed of only two triangles but you can increase this count if required. This makes it the second most lightweight of all the Away3D primitives so it's a great candidate for many tasks. Want to create a video wall? Use a series of Planes and set a MovieMaterial on them. The Plane is also very useful for illustrating the ground in a 3D scene. Check this demo for an example.

As mentioned initially, Away3D supports two basic coding styles. You can either pass along properties in the constructor when you create an object, or you can set the properties after creating the object. Let's look at the two possibilities.

The first method uses the "automagical" init-object where you can pass in all the parameters of an object. Here we'll create a plane with a white wireframe material that has black wires:

var myPlane:Plane = new Plane({material:"white#black",rotationX:-90});
View.scene.addChild(myPlane);

This is a very compact way of creating new objects. Using this method, you can easily specify the wireframe colors and Away3D will create and apply the appropriate WireColorMaterial for you. You can also declare each of these properties, one line at a time:

var mat:WireColorMaterial = new WireColorMaterial();
mat.color = 0xff0000;
mat.wirecolor = 0x000000;
var myPlane:Plane = new Plane();
myPlane.material = mat;
myPlane.rotationX = -90;
View.scene.addChild(myPlane);

This way of creating objects is much more verbose, but many prefer it as it makes the code more readable. Which of the two methods you prefer is entirely up to you. A lot of developers have strong opinions on this subject and by supporting both coding styles, everyone should be happy with Away3D.

As you may have noticed, in the example above, we rotated the plane negative 90 degrees along the X-axis. Since the plane has no depth, we need to rotate it towards us to see it.

You can also adjust the complexity of a plane by setting the segment parameters:

myPlane.segmentsW = 4;
myPlane.segmentsH = 6;

This will increase the density of triangles on the plane and it's useful for compensating for distortion of textures that may appear if there is too few triangles to display the texture correctly. You can see the problem illustrated here. Click the buttons to experiment.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

Textures.as

Note that this problem only exists in the Flash Player 9 version of Away3D. In the Flash Player 10 version, this is handled using a new API that solves the problem.

Now let's see some real code using Planes. Here you can see the entire set of CS3 icons, as published by Adobe's John Nack. Click and drag to see the color separations. Align the outer squares to focus the image again.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExPlane.as

By creating four separate and partially transparent PNG files, we're here simulating the effect used in color printing where the Cyan, Magenta, Yellow and Black colors (CMYK) are combined on paper to produce a full color image. The file is built with a HoverCam3D that orbits five Planes, one for each of the CMYK colors and one white Plane that acts as the paper. By applying BlendMode.MULTIPLY, the color values of the layers are combined, producing a result similar to that of newspapers.

The Cube

A cube has a depth, height and width. You can also set the materials for each of the sides.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

Basic08_cube.as

As with all other objects in Away3D, you can create a cube in two ways:

cube = new Cube({width:200,height:100,depth:300});

You can also create the cube line by line for better readability:

var cube:Cube = new Cube();
cube.width = 200;
cube.height = 100;
cube.depth = 300;

What method you choose is entirely up to what coding style you prefer. To set the materials of the Cube, we use the cubeMaterials property. This allows us to set the top, bottom, left, right, front and back materials like this:

cube.cubeMaterials.left = new ColorMaterial(0xffffff,{alpha:.3});

Every 3D object can then be manipulated along the Z, Y and Z axis for position and rotation using code like this:

cube.x = 200;
cube.rotationY = 45;

For more details on moving and manipulating objects, see this tutorial. Now let's take a look at some cubes used in a project. Below you can find a sound visualizer that analyzes the music playing and adjusts the height, color and filters based on the sounds waveform.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

ExCubeMusic.as Cover.as

The blue cubes represent the right channel and the red cubes represent the left channel. The sound spectrum for each channel is divided into eight equal bits and each box represents a piece of the spectrum. The maximum level for each piece is stored in an array and is set to fade over time. Every time a new maximum level is detected for a piece, we apply a blur filter and increase the size/color of the cube. A set of mirrored cubes with a faded color is also used to give the impression of a reflection. Click the link to the source code to see the details of how this is achieved.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by chaiyuttochai on 06/13 at 04:13 AM

i try to following this tutorial.
but i face the problem of FLEX SDK REQUEST
how i can solve this i haven’t use flex before
i just using flash cs4 only

please any one could tell me?
or mail me at .(JavaScript must be enabled to view this email address)


Posted by Jens C Brynildsen on 06/15 at 01:48 PM

@chaiyuttochai That was odd, but I’ll investigate it if you can tell me a little more?

J


Posted by chaiyuttochai on 06/16 at 04:37 AM

i have try to following the example on
Basic08_cube_music.as

it’s always request the hover class not found.
Could u tell me please, how i solve this problem.

i already download hover.as and put into the package. but it’s still not found!

it’s would be great if u can see the fla file
(i’m really new for AS3)


Posted by xanxac on 08/22 at 03:01 AM

Hello Jens,
I am more or less getting started on Away3d.
Your tutorials are very helpfull.
I was wondering if, while setting “cubeMaterials”,it is possible to choose a MovieClip, and have it play on one of the cube´s sides.
I am trying to create a moving, 3d menu.
I Haven´t gone through all your tutorials yet, I apologize right away in case this was already explained elsewhere.
Thanks
alex


Posted by Jens C Brynildsen on 08/23 at 09:42 PM

@xanxac You’ll get to that later, but check out the MovieMaterial :)

J


Posted by Tosumeua on 01/20 at 04:51 PM

thanks for the tutorial but its not nice that you have flex classes imported. all of us use as3 but only some use flex. its not a big deal but not nice if you get big error blocks in the beginning.

if you face this problem just comment the lines that throw errors.


Posted by Jens C Brynildsen on 01/29 at 12:12 AM

@Tosumeua Where did you find Flex classes? I’ve browsed through all the examples in this tutorial without finding any?

J


Posted by lvthn on 06/17 at 12:31 PM

I got stuck at some tutorial because the debug said not found constant such as “IMaterial” “Panel” “com.bit101.components.*” what should I do?


Posted by Jens C Brynildsen on 06/22 at 01:02 PM

@lvthn For the 3.5 version of Away3D, many things were changed/renamed and this caused errors in many of my example files. I am working all day today to fix this, so check back tomorrow?

While updating, I’m also removing the cover.as file from the examples. Many have complained about this and removing it will make it much easier to use the example files.


Posted by simonlucas on 06/25 at 12:18 PM

More elegent and clear tutorials. thank-you.

I’m having a problem with the Basic08_cube.as tutorial.

Setting the transparent face to the cube does not work. I have tried solid white without alpha and that does not change the colour of the face either.

I am using FP10 version of Away3D lib and cs5.5 targeted at player 10.1

I have deleted the reference to ‘Cover’ – as that is no longer needed right?

Submit a comment

Only registered members can comment. Click here to login or here to register