DynamicDistribution example

In response to StackOverflow question: “How to make an swf compatible with all screen resolution?”
http://stackoverflow.com/questions/3134447//3134486#3134486

by poke 27 Oct 2010

Tags

StackOverflow distribution example flow layout
Embed

/**
 * Copyright poke ( http://wonderfl.net/user/poke )
 * GNU General Public License, v3 ( http://www.gnu.org/licenses/quick-guide-gplv3.html )
 * Downloaded from: http://wonderfl.net/c/cM9C
 */

/*
 * In response to StackOverflow question:
 * “How to make an swf compatible with all screen resolution?”
 * http://stackoverflow.com/questions/3134447//3134486#3134486
 */
package
{
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import gs.TweenLite;
    
    public class DynamicDistribution extends Sprite
    {
        private static const SIZE:uint = 30;
        
        private var numRow:uint;
        private var container:Sprite;
        
        public function DynamicDistribution()
        {
            // no resizing & top/left align
            stage.scaleMode = StageScaleMode.NO_SCALE;            
            stage.align     = StageAlign.TOP_LEFT;
            
            // calculate number of boxes per row
            numRow = Math.floor( ( stage.stageWidth - 30 ) / SIZE );
            
            // create a container that will hold all boxes
            container   = new Sprite();
            container.x = Math.round( ( stage.stageWidth - numRow * SIZE ) / 2 ); // centered
            container.y = 15;
            
            // create all boxes
            var box:Sprite;
            for ( var i:uint = 0; i < 100; i++ )
            {
                // very simple box
                box = new Sprite();
                box.graphics.beginFill( Math.round( Math.random() * 0xFFFFFF ) );
                box.graphics.drawRect( 0, 0, 30, 30 );
                
                // position the box
                box.x = ( i % numRow ) * SIZE; // (i%numRow)-th box in the row
                box.y = Math.floor( i / numRow ) * SIZE; // (i/numRow)-th row
                
                // add to the container
                container.addChild( box );
            }
            
            // add container
            this.addChild( container );
            
            // listen to Event.RESIZE
            this.stage.addEventListener( Event.RESIZE, stageResize );
        }
        
        private function stageResize ( event:Event ):void
        {
            // recalculate, based on the new sizes
            numRow = Math.floor( ( stage.stageWidth - 30 ) / SIZE );
            
            // center the container again
            container.x = Math.round( ( stage.stageWidth - numRow * SIZE ) / 2 );
            
            // reposition all the boxes
            var box:DisplayObject;
            for ( var i:uint = 0; i < container.numChildren; i++ )
            {
                box = container.getChildAt( i );
                TweenLite.to( box, 2, {
                        x : ( i % numRow ) * SIZE,
                        y : Math.floor( i / numRow ) * SIZE } );
                
                // alternative version without tweening
                //box.x = ( i % numRow ) * SIZE;
                //box.y = Math.floor( i / numRow ) * SIZE;
            }
        }
    }
}