Notes for learning Flex 4.  The goal is to use Away3D as the container for Flex 4 components, so that the 3D elements can affect Flex 4 components (e.g., rotating a cube with Flex 4 version of VideoPlayer on each side).


Phase 1


Getting started.
This post shows how to get Away3D working in Flex 3. 
Notes from this site (my emphasis, though):

  • The reason we extend UIComponent is because the View3D class in Away3D is based on a Sprite and the only Flex component that can add a Sprite as a child is UIComponent.
  • How to add a self-made component, using the ‘local’ namespace defined in the mx:Application tag as local:”*”:

The Flex 4 version requires some fiddling, and using a more recent version of Away3D requires some more.  Here is the revised code – note that you will still use the image from the other site (but that can be replaced with your own):

Code: Away3DCube.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:local="*"
  layout="absolute"
  width="500" height="400"
>
    <mx:Panel
        width="100%" height="100%"
        backgroundColor="#D1F0FF"
    >
        <local:FlexView3D
            id="object3DScene"
            width="100%" height="100%"
        />
    </mx:Panel>
</mx:Application>

FlexView3D.as:

package
{
    import away3d.containers.View3D;
    import away3d.core.math.Number3D;
    import away3d.lights.AmbientLight3D;
    import away3d.materials.BitmapFileMaterial;
    import away3d.primitives.Cube;

    import flash.events.Event;

    import mx.core.Application;
    import mx.core.UIComponent;

    import org.osmf.utils.URL;

    public class FlexView3D extends UIComponent
    {
        private var view:View3D;
        private var sceneLight:AmbientLight3D;

        //Test
        private var testCube:Cube;

        public function FlexView3D()
        {
            super();
            this.addEventListener(Event.ENTER_FRAME, onFrameEnter);
        }

        override protected function createChildren():void
        {
            super.createChildren();

            if(!this.view)
            {
                this.view = new View3D();

                this.view.camera.moveTo(0, 0, -1500);
                this.view.camera.lookAt(new Number3D(0, 0, 0));

            }
            try
            {
                this.getChildIndex(this.view);
            }
            catch (e:Error)
            {
                this.addChild(this.view);
            }

            if(!this.testCube)
            {
                this.testCube = new Cube({name: "cube", size: 250, material: new BitmapFileMaterial("sotc.jpg")});

            }
            try
            {
                if(this.view.scene.getChildByName(this.testCube.name) == null)
                    this.view.scene.addChild(this.testCube);
            }
            catch (e:Error)
            {
                this.view.scene.addChild(this.testCube);
            }
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if(this.width / 2 != this.view.x)
                this.view.x = this.width / 2;
            if(this.height / 2 != this.view.y)
                this.view.y = this.height / 2;
        }

        private function onFrameEnter(event:Event):void
        {
            if(this.view && this.view.stage)
            {
                this.testCube.rotationX += .7;
                this.testCube.rotationY += .5;
                this.testCube.rotationZ += .4;

                this.view.render();
            }
        }
    }
}

Please continue to Away3D in Flex 4 – Phase 2.

– 30 –

Advertisements