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 2


First working test of Away3D within Flex 4 container class, interacting with other containers. The main significant change is simple – convert from Panel to Canvas container. Canvas allows Flex components to overlap each other.

Code:
The new Away3DCube.mxml file. Once it’s running, pass your mouse over each of the Text components, and watch the cube jump to the middle of each line:

<?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:Script>
        <![CDATA[
            protected function move3DHnd(event:MouseEvent):void
            {
                var obj:* = event.target.parent;
                var opt:Point = new Point(obj.x + (obj.width * .5), obj.y + (obj.height * .5));

                trace(event.target.parent.name + ": " + opt);

                object3DScene.x = opt.x - (object3DScene.width * .5);
                object3DScene.y = opt.y - (object3DScene.height * .5);
            }
        ]]>
    </mx:Script>

    <mx:Canvas
        width="100%" height="100%"
        backgroundColor="#D1F0FF"
    >
        <mx:Text
            id="textTest1"
            text="This is a sample component underlay."
            x="175" y="175"
            mouseOver="move3DHnd(event)"
            />

        <!local:FlexView3D
            id="object3DScene"
            width="50%" height="50%"
            x="100" y="100"

        />

        <mx:Text
            id="textTest2"
            text="This is a sample component overlay."
            x="200" y="200"
            mouseOver="move3DHnd(event)"
        />
    </mx:Canvas>
</mx:Application>

Please continue to Away3D in Flex 4 – Phase 3.

– 30 –

Advertisements