Away3D Basics 1 - A simple Away3D class explained

This tutorial is the first in a series about Away3D, a powerful real-time 3D engine for Flash or Flex. This tutorial explains a very simple Away3D class line by line so that those that still use Actionscript 2 or have a designer background 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, View, Camera, 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 is processor intensive, so all the examples use a file called Cover.as that you must also download to your project directory to be able to run the examples.

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.

package
{
    import away3d.containers.View3D;
    import away3d.primitives.Sphere;
    import flash.display.Sprite;
    
    public class Basic01 extends Sprite
    {
        public function Basic01()
        {
            // create a viewport
            var view:View3D = new View3D({x:200,y:200});
            addChild(view);
            
            // create a sphere and put it on the 3D stage
            var sphere:Sphere = new Sphere();
            view.scene.addChild(sphere);
            
            // render the view
            view.render();
        }
    }
}

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

Line 3-5: 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 7-8: 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 9-10: A function that has the same name as the class in called the "constructor" function. Every time a new instance of this class is created, the contents of this function (Basic01) will be executed.

Line 11-13: Here we create a new View(3D). This is our viewport into the virtual 3D world. The x and y parameters tell Away3D where to set the centre of our 3D world. We then add this view to our class, so it will appear on the Flash stage.

Line 15-17: Here we create something to look at - a simple sphere. Next, we add this sphere to the default 3D Scene in our View (Just as other DisplayObjects in Flash, only what is added to the Scene is visible). Since we don't pass in any parameters for the X, Y and Z position, the sphere will be created in the center of our view (X=0, Y=0, Z=0).

Line 19-21: Away3D allows you to decide when to render the View. Rendering is the process of converting the virtual 3D content into a 2D viewable image. Rendering is a CPU intensive process and being able to decide when to update is extremely useful. A great use is to only render the View when the user has the mouse over the Flash movie.

The result is something like this:

movie: Basic01.as

This was the simplest possible 3D scene I have been able to create in Away3D. You could of course compress this a little more by removing the comments, placing curly brackets on the same line and removing whitespace lines, but I find code easier to read this way.

If you are new to AS3, you may wonder where Away3D appears on stage and how you can manipulate it? Since this class extends the default Sprite class, it will behave almost like a MovieClip. Sprites are essentially MovieClips without a timeline. Since the Class is based on Sprites, it can easily be moved around the stage using the X and Y coordinates, rotated using the rotation property and so on.

If you use Flash and set this example file as your "Document Class" (or "Default Application" in Flex), a copy of this "extended Sprite" will be added to the Stage. If you add other Sprites, Movieclips or components using the "addChild" method inside this class, they will be added to this Sprite and not the Stage itself. If you want something to show above your 3D world, you just add it to the DisplayList after you add the View. You can also toggle the display order using the setChildIndex or swapChildren methods, just as for any other DisplayObject.

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

 

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click the link at the top of this page to register.