This tutorial demonstrates how to create instances of the basic 3D objects in the API.

Although it may seem like a very straight forward thing to do, I thought I’d put together a little tutorial/demo to demonstrate the creation of the basic objects from Away3D (build V1.9.4). I have created a simple interface that renders 3 instances of each object depending on the type selected from the drop-down list. As usual, with all my Flash efforts so far, this is built in pure ActionScript 3.0 code using FlashDevelop 3.0. I am currently useing the beta 5 version. I have also made use of the 3rd party AsWing library to provide the UI controls as it is open source and came up in a Google search.

This tutorial assumes you have FlashDevelop setup correctly and have a classpath pointing to the Away3D classes. The build I have used is 1.9.4 so future releases may have a different implementation. Links at the bottom of the page should take allow you to download the appropriate supporting classes.

Anyway, the demo is a single main class that has an embedded image (the Away3D logo) that will be used to add a bit of texture to the objects. The constructor calls several initialization classes to setup the stage, the 3D world, the objects in that world and the user interface to manage the objects.

init()

The stage initialization ‘init()’ function sets the typical stage properties and also defines a few variables up front for later usage. ‘SLIDE’ is an array that is predefined to give a nice ease in/out (depending on which way you iterate through the array) scale for sliding the objects on and off the screen when one is selected.

private function init():void {
    stage.scaleMode = StageScaleMode.SHOW_ALL;
    stage.align = StageAlign.TOP;
    var deg2rad90:Number = 1.57079632;
    for (var s:int = 0; s < STEPS; s++) {
        SLIDE.push(Math.cos(deg2rad90 / STEPS * s));
    }
}

init3D()

Onto the 3D world setup function. This is my typical kind of setup for initialising the Away3D environment. Create a new View3D object and set the coordinates of it's centre point on the stage. For general illumination of objects with shading, a light source is createed and added to the view, to make things look a little nicer. To set the viewing angle, the camera is moved backwards along the Z axis and told to look at the 0, 0, 0 position of the world which is where the objects will be localized. Finally, the Enter_Frame event is added to the stage so that the 3D view can be rendered frame by frame and of course, the whole view is added to the main stage.

private function init3D():void {
    view = new View3D();
    view.x = 400;
    view.y = 200;
    light = new Light3D({color:0x888888});
    light.x = 300;
    light.y = 100;
    light.z = 200;
    light.visible = true;
    view.scene.addChild(light);
    view.camera.moveTo(new Number3D(0, 0, -1500));
    view.camera.lookAt(new Number3D(0, 0, 0));
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
    addChild(view);
}

initObjects()

Objects, objects, objects. As this demo displays objects, we need to construct a few. Basically, three instances of each object type are created and held within a container object for that type. The container object is called '<type>' while each of the objects is called '<type>1', '<type>2' and '<type>3'. This way, I only need to know the name of the object type being displayed to be able to manipulate the container and each of the objects within it. This is driven of the text value from the drop-down list. Easy-peasy. Each of the three objects use different parameters in the constructors 'init' property to demonstrate what some of them do. Full details of the init properties are available on the Away3D Livedocs pages.

By holding the three object instances in an ObjectContainer3D, it is possible to set the objects coordinates and rotations locally to the container and then set the container in the scene with it's own coordinates and rotation. The sliding in/out effect when a new object is selected simply moved the container object.

Although the container objects position is not set initially, it is handled by the sliding in/out effect. The 'visible' property of the other object containers is set to false.

  // Cone
var cone1:Cone = new Cone({name:"Cone1",
                           x:-250,
                           segmentsH:5,
                           segmentsW:20,
                           height:250,
                           material:new WireframeMaterial(0xff000000)});
var cone2:Cone = new Cone({name:"Cone2",
                           x:0,
                            radius:50,
                           material:new ShadingColorMaterial({color:0xaa0000})});
var cone3:Cone = new Cone({name:"Cone3",
                           x:250,
                           segmentsH:10,
                           segmentsW:20,
                           material:new BitmapMaterial(textureImage, {precision:1})});
var coneContainer:ObjectContainer3D = new ObjectContainer3D(
                                          {name:"Cone",visible:true},
                                          cone1,
                                          cone2,
                                          cone3);
view.scene.addChild(coneContainer);

initUI()

To be able to swap the objects in and out of the display we need a mechanism to do it. I chose AsWing for no other reason that it was open source, came up in a Goolge search and seemed to be able to do the job that I wanted. It did take a bit of fiddling an digging around to really acheive what I was after but it's there now. I create a JWindow object that has now visible characteristics so not icons, borders, etc, and I have simply added and array of strings describing the object types - which, by magic, match the object conatiner names .... spooky. This array is passed into a new JComboBox object and that's it really. The other bits simply define the layout and positioning of the drop-down on the stage. An ActionListener is added to the combo box which gets fired when the items are selected, triggering the sliding effect.

  private function initUI():void {
    var frame:JWindow = new JWindow(this, false);
    frame.setSize(new IntDimension(200, 200));
    frame.setLocationXY(10, 10);

    var items:Array = ["Cone",
                       "Cube",
                       "Cylinder",
                       "GeodesicSphere",
                       "GridPlane",
                       "LineSegment",
                       "LogoCube",
                       "Plane",
                       "RegularPolygon",
                       "SeaTurtle",
                       "Sphere",
                       "Torus",
                       "Triangle",
                       "WireCircle",
                       "WireCone",
                       "WireCube",
                       "WireCylinder",
                       "WirePlane",
                       "WireSphere",
                       "WireTorus"];
    combo = new JComboBox(items);
    combo.setSelectedIndex(0);
    combo.setPreferredSize(new IntDimension(150, 20));
    combo.addActionListener(onObjectSelection);

    frame.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT));
    frame.getContentPane().append(combo);

    frame.show();
  }

onEnterFrame()

For each frame, we need to render the 3D scene other we won't see it. The onEnterFrame event handler calls the scene's 'getChildByName' method to get hold of the container for the current object type, initially set to "Cone". If an object is returned, then the child objects of that container are rotated around various axis to liven things up a bit. Any sliding action (ooo-err mrs) is managed by the UpdateObjectSliding method. Lastly, draw the pretty pictures.

private function onEnterFrame( event: Event ):void  {
    var container:ObjectContainer3D =
                  view.scene.getChildByName(currentObject) as ObjectContainer3D;
    if (container!=null) {
        container.children[0].rotationX += 0.1;
        container.children[0].rotationY += 1;
        container.children[1].rotationX += 0.3;
        container.children[1].rotationZ += 0.7;
        container.children[2].rotationX += 0.6;
        container.children[2].rotationY += 1;
        container.children[2].rotationZ += 0.2;
    }
    UpdateObjectSliding();
    view.render();
}

ShowNextObject()

'ShowNextObject' is called by the JComboBox event handler and passed the text of the selected option. Asssuming the selected object is different than the current obejct being displayed, the containers for each are found, the position and visiblity properties are set accordingly and the animation is starter byt setting the isSliding boolean to true.

private function ShowNextObject(nextObject:String):void {
    if (currentObject != nextObject) {
        oldObj = view.scene.getChildByName(currentObject) as ObjectContainer3D;
        newObj = view.scene.getChildByName(nextObject) as ObjectContainer3D;
        newObj.x = SLIDEIN;
        newObj.y = 0;
        newObj.visible = true;
        currentStep = 0;
        isSliding = true;
    }
}

UpdateObjectSliding()

Finally, the animation for moving the object containers in and out of view is handled by this little method. It does nothing more that change the x and y properties of the current and next object containers based on the pre-calculated SLIDE array. When the step count has incremented enough, the animation is ended and the view shows the new obejct selected.

  private function UpdateObjectSliding():void {
    if (isSliding) {
        newObj.x = SLIDEIN - SLIDE[STEPS - currentStep - 1] * SLIDEIN;
        oldObj.y = SLIDEOUT - (SLIDE[currentStep] * SLIDEOUT);
        currentStep++;

        if (currentStep >= STEPS) {
            oldObj.visible = false;
            currentObject = newObj.name;
            isSliding = false;
        }
    }
}

That's about it. Here is the full source to the demo should you wish to have a play.

Compilation

The files to download are in a zip compression format so you can use 7-Zip (freely downloadable) to decompress the files or use any other zip compatible utilities. They contain an ActionScript 3 FlashDevelop 3 project but DO NOT contain the Away3D classes. To compile the project, you need to have the Away3D 1.9.4 classes and the AsWing A3 1.2 classes pathed in.

That's about it!!!

I hope someone finds this little tutorial of some use in developing Flash using the Away3D API. If you find any bugs or have any comments on the code (please be nice) then drop me a comment below or let me know via the contact page.

Thanks and happy coding.

Greg Caldwell (Greg209) - For more Away3D demos and examples check out www.geepers.co.uk

Popularity: 16% [?]