Patrik Vormittag

I am an interactive digital artist at Crispin Porter + Bugosky. Currently creating RIA's and pushing the powers of flash/flex. To view my work or to contact me, please visit my portfolio - http://www.previsualsdesign.com.

View all articles by Patrik Vormittag
Now that we have a good understanding of the display list and the DisplayObject, lets put it altogether. Here is an example that creates a tiled effect of boxes on the stage. When the user clicks one of the boxes, the boxes child index is set to the last index postion of the parents child list (done through the numChildren property of the DisplayObjectContainer ) and in turn, is visually sent to the front of all the boxes. The user can also press and hold to drag the box around the stage.

import flash.display.Sprite;
import flash.events.*;
import flash.display.MovieClip;
import flash.filters.DropShadowFilter;
import flash.text.TextFormatAlign;
import flash.text.TextField;
import flash.text.TextFormat;

stage.align = "TL";
stage.scaleMode = "noScale";

var boxContainer:Sprite = new Sprite();

var columns:int = 5;
var rows:int = 5;

var boxSpacing:int = 2;

var boxWidth:uint = stage.stageWidth / rows;
var boxHeight:uint = stage.stageHeight / columns;
var startX:Number = boxSpacing;
var startY:Number = boxSpacing;
var boxIndex:int = 0;

var dropShadow:DropShadowFilter = new DropShadowFilter();
dropShadow.distance = 3;
dropShadow.angle = 45;
dropShadow.alpha = 20;
dropShadow.blurX = dropShadow.blurY = 6;

for(var j:int = 0; j < columns; ++j){
    startX = boxSpacing;
    for(var i:int = 0; i < rows; ++i){
        var box:Sprite = new Sprite();

        box.name = "box"+ ++boxIndex;
        
        box.x = startX;
        box.y = startY;
        box.buttonMode = true;
        box.graphics.lineStyle(1, 0x999999, 1, true);
        box.graphics.beginFill(0x333333, 1);
        box.graphics.drawRect(0, 0, boxWidth - boxSpacing, boxHeight - boxSpacing);
        box.filters = [dropShadow];
        
        box.addEventListener(MouseEvent.MOUSE_OVER, boxOnMouseOver);
        box.addEventListener(MouseEvent.MOUSE_OUT, boxOnMouseOut);
        box.addEventListener(MouseEvent.MOUSE_DOWN, boxOnPress);
        box.addEventListener(MouseEvent.MOUSE_UP, boxOnRelease);
        
        startX += box.width + boxSpacing;
        
        var boxName:TextField = new TextField();
        boxName.text = box.name;
        boxName.width = boxWidth;
        boxName.height = 25;
        boxName.y = (box.height / 2) - (boxName.height / 2);
        boxName.mouseEnabled = false;
        boxName.wordWrap = true;

        var boxNameFormat:TextFormat = new TextFormat("verdana", 10, 0x666666, null, null, null, null, null, TextFormatAlign.CENTER);
        boxName.setTextFormat(boxNameFormat);
        
        box.addChild(boxName);
        boxContainer.addChild(box);
    }
    startY += box.height + boxSpacing;
}
addChild(boxContainer);

function boxOnMouseOut(evt:MouseEvent){
    if(evt.eventPhase == EventPhase.AT_TARGET){
        evt.target.graphics.clear();
        evt.target.graphics.lineStyle(1, 0x999999, 1, true);
        evt.target.graphics.beginFill(0x333333, 1);
        evt.target.graphics.drawRect(0, 0, boxWidth - boxSpacing, boxHeight - boxSpacing);
    }
}

function boxOnMouseOver(evt:MouseEvent){
    if(evt.eventPhase == EventPhase.AT_TARGET){
        evt.target.graphics.clear();
        evt.target.graphics.lineStyle(1, 0x333333, 1, true);
        evt.target.graphics.beginFill(0x999999, 1);
        evt.target.graphics.drawRect(0, 0, boxWidth - boxSpacing, boxHeight - boxSpacing);
    }
}

function boxOnPress(evt:MouseEvent){
    if(evt.eventPhase == EventPhase.AT_TARGET){
        evt.target.parent.setChildIndex(evt.target, (evt.target.parent.numChildren - 1));
        evt.target.startDrag();
    }
}

function boxOnRelease(evt:MouseEvent){
    if(evt.eventPhase == EventPhase.AT_TARGET){
        evt.target.stopDrag();
    }
}

Which outputs:


This example uses a lot more then just manipulation of DisplayObjects, such as EventHandlers and working with the Flash Drawing API (The handling of events is another main difference in AS 3.0, but that will need to wait for another tutorial). I hope this helped! Enjoy!