<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    creationComplete="init()" 
    resize="resizeViewPort()" 
    backgroundGradientAlphas="[1.0, 1.0]" 
    backgroundGradientColors="[#A1A1A1, #E8E8E8]" 
    viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            
            // a named cube that will be added to the view that we 
            // can later access
            private var firstCube:CustomCube = new CustomCube();
            
            // the view
            private var view:CustomView;            
            
            // Initialize View and add 21 Cubes to display
            private function init():void
            {
                view = new CustomView();
                view.addCube(firstCube);
                for(var i:Number = 0; i < 20; i++)
                {
                    view.addCube(new CustomCube());
                }
                viewPortCanvas.rawChildren.addChild(view);    
            }
            
            // Catch the Resize event and modify the viewport accordingly
            private function resizeViewPort():void
            {
                if(view == null){ return; }
                view.viewportHeight = viewPortCanvas.height;
                view.viewportWidth = viewPortCanvas.width;
            }
        ]]>
    </mx:Script>    
    
    <!-- View Port Container -->
    <mx:Canvas top="40" left="10" right="10" bottom="42" id="viewPortCanvas">
    </mx:Canvas>
    
    <!-- Camera Buttons -->
    <mx:Button label="Move To 1st Cube" click="view.moveTo(firstCube);" top="10" left="127"/>
    <mx:Button label="Move To Origin" click="view.moveToOrigin();"  top="10" left="10"/>
    <mx:Button label="Move to Random Cube" click="view.moveToRandom();" top="10" left="266"/>
    <mx:Button label="Move to Origin then a Random Cube" click="view.moveToOriginRandom();" top="10" left="430"/>
    
    <!-- Object Buttons -->
    <mx:Button label="Distribute Cubes to Single Row" click="view.distributeSingleRow();" bottom="12" left="10"/>
    <mx:Button label="Distribute Cubes Randomly" bottom="12" left="227" click="view.distributeRandom();"/>
</mx:Application>