
Login | Register
Away3D 4 Basics - A simple class explained

Away3D 4 Basics - A simple class explained

This tutorial is the first in a series covering Away3D version 4, a powerful real-time 3D engine for Flash or Flex. This tutorial explains a very simple Away3D class line by line so that even novices to Actionscript programming will be able to understand what is going on in the rest of the tutorials.

No matter what you want to do in Away3D, there's some things that you'll always need to set up. The "Basic" tutorials will explain the Scene, ViewCamera, Primitives, Textures and explore some of the possibilities. Each example in the series will be organized as Actionscript Classes so they can be used in both Flash and Flex.

If you are new to 3D on computers, you might want to read our introduction that explains the core 3D concepts. This tutorial also contains the source for 6 other Away3D projects that may be worth checking out. To run the example files, you will first need to set up Away3D on your computer. When you have the Away3D source files and your software is set up, you can open, explore and export the examples in this tutorial by just placing them in your project directory.

3D on computers use cliches that we are used to from the movies. The four things we will always need is a Stage, a Camera, a View and something to look at. Thanks to a lot of "default" properties, you only need to set up a View to get get started with Away3D.

A minimal Away3D class

The following is a minimal class that makes use of the default camera and stage in Away3D. If you understand what happens in the file listing below, just skip ahead to the next tutorial about the View. For those that are not too familiar with reading Actionscript 3 (AS3) code, read on and we'll explain this line by line.

    import away3d.containers.View3D;
    import away3d.entities.Mesh;
    import away3d.materials.ColorMaterial;
    import away3d.primitives.SphereGeometry;
    import flash.display.Sprite;
    [SWF(backgroundColor="#000000", frameRate="60", width="1024", height="768")]
    public class basic_v4 extends Sprite
        private var view:View3D;
        public function basic_v4()
            view = new View3D();
            var sphereGeometry:SphereGeometry = new SphereGeometry(350);
            var sphereMaterial:ColorMaterial = new ColorMaterial( 0xff0000 );
            var mesh:Mesh = new Mesh(sphereGeometry, sphereMaterial);
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        private function onEnterFrame(event:Event):void
            removeEventListener(Event.ENTER_FRAME, onEnterFrame);


Line 1: AS3 requires that all classes must be in a package. For simplicity, we are using an unnamed package (also called the default package).

Line 2-8: To be able to use Away3D, we need to import the classes containing the functionality we are going to use, as well as the standard Sprite class.

Line 9: This sets the size, background color and playback speed of the Flash movie we are exporting

Line 10: This is the name of our example class. This class "extends" the Sprite class, meaning that our class can do everything a Sprite can.

Line 12: By convention, any objects we want to use throughout our class are decleared at the top. Since we will be referencing the "view" in both the methods

Line 13: A function that has the same name as the class is called the "constructor" function. Every time a new instance of this class is created, the contents of this function (basic_v4) will be executed. In our case, only one instance is created since this is the only class we are using.

Line 15-16: Here we create a new View(3D). This is our viewport into the virtual 3D world. We then add this view to our class, so it will appear on the Flash stage.

Line 17-19: Here we create something to look at - a simple sphere. We first create the geometry (model) and then a material. These two are then combined into the Mesh-object named sphereMesh. This is a crucial difference from older versions of Away3D.

 Line 20: Next, we add this sphere to the default 3D Scene in our View. Since we didn't set any X, Y and Z position, the sphere will be created in the center of our view (X=0, Y=0, Z=0).

Line 21: Rendering is the process of converting the virtual 3D content into a 2D viewable image. Away3D allows you to decide when to render the view, but new from version 4 and up is that we cannot render the view just as the scene is created. We will have to wait a frame for this so we listen to the ENTER_FRAME event.

Line 25: This is where we render the 3D scene.

Line 26: Unless we remove the event-listener for ENTER_FRAME, the Flash Player will keep rendering the 3D scene every frame. If you are animating your 3D model, this is exactly what you'll want.

The result is something like this:

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


As you can see, it's not very interesting to look at but we'll get to that part soon. This is the simplest possible 3D scene I have been able to create in Away3D version 4. You could of course compress this a little more by placing curly brackets on the same line, but I find code easier to read this way.

Where in the Flash?

If you are new to AS3, you may wonder where Away3D appears on stage and how you can manipulate it? In former versions of Away3D, the "view" was just another display object. Away3D v4 (and newer) are not based on Sprites but rather the new Stage3D object in Flash Player 11. Objects rendered with Stage3D will appear in front of StageVideo, but behind all the ordinary Display objects in Flash such as Sprite, MovieClip, Bitmap and so on.

If you use Flash and set this example file as your "Document Class" (or "Default Application" in Flex) you will see the result above. If you add other Sprites, Movieclips or components using the "addChild" method inside this class, they will be added to the Sprite that our basic_v4 class inherits from and layered on top of the Stage3D object so if you want something to show above your 3D world, you just add it to the DisplayList using the standard addChild-method.

One more thing...

There's one major difference between the old software based 3D and the new  (GPU) hardware based 3D in Flash: you need to embed your content differently. Unless you set the parameter wmode="direct", you will not see your 3D creation when viewing it in a browser. It will work in your authoring environment, but once you put it online, be sure to check that it plays back properly!

Next, let's expand a bit on what we've learned this far by looking closer at this basic class. From here on, we'll assume that you know a bit of AS3 or have a way to look up things you wonder about Actionscript 3 programming.

NOTE: If you have never used the Doument class in Flash, make sure you also read this tutorial and scroll down to the CS3 heading. This will explain how you use the actionscript class files in these tutorials together with Flash CS3, CS4 & CS5.


About Jens C Brynildsen


Get new stories first

Click to follow us on Twitter!



No comments for this page.

Submit a comment
