[Flash CS5] Dynamic Button Creation by Using ActionScript 3.0

Using past sample "Advanced Photo Album" , I'll add dynamic created button on it. If you would press button,

then the transition effect has changed.

1. Let's change the layout of 'stage' , just down the focus of layout for adding buttons.

2. Click Menu item , "Window" - > "Component" and Drag "Button" from "User Interface" to "Library" 

 and Change contents of ActionScript

3. On the "Actions" Layer of First Frame, click right mouse button and select "Actions" menu item. (If

you use 'windows'  press 'F9' key , if you use 'OSX' , press 'option-F9')

4. Setting transition type 'Blinds' when start first.

var transitionType:String = "Blinds"

5. Save Words that used by transition effects to Array, for button label

var labels:Array = new Array( "Blinds", "Fade", "Fly", "Iris", "Photo", "PixelDissolve", "Rotate",

"Squeeze", "Wipe", "Zoom", "Random");

6. for Rembering last selection button 

var oldSelectButton:Button ;

7. Creating Dynamic Buttons 

for(var i=0; i < labels.length ; i++){

    var myButton:Button = new Button();

    myButton.label = labels[i] ; // 

    myButton.width = 80;

    var posY = 10;

    var posX = i;

    

    if (i > 5)

{

        posX = i - 6;

        posY = 40;

}

    myButton.move(20 + posX * (myButton.width + 10), posY);

    myButton.addEventListener(MouseEvent.CLICK , onMyButtonClick);

    addChild(myButton);

if (i == 0) {

myButton.emphasized = true;

oldSelectButton = myButton;

}

 }

Let's verify some details.

myButton.width = 80;

set button width '80' pixels.

   if (i > 5)

   {

      posX = i - 6;

      posY = 40;

   }

if button's count is bigger than '6' , then next button's place is under one row. 

myButton.move(20 + posX * (myButton.width + 10), posY);

setting button's position 

myButton.addEventListener(MouseEvent.CLICK , onMyButtonClick);

register button 'click' event handler.

addChild(myButton);

Actually draw button on the stage.

if (i == 0) {

   myButton.emphasized = true;

   oldSelectButton = myButton;

}

Emphasize the First Button (labeled by 'Blinds') and save it to last selection.

8. Implements Button Click Event Handler.

function onMyButtonClick(evt:MouseEvent):void

{

    oldSelectButton.emphasized = false;

    var selButton:Button = Button(evt.target) ;

    transitionType = selButton.label ;

    selButton.emphasized = true;

    oldSelectButton = selButton;

}

Let's see the output.

I transformed the source for 'Flash CS4'  

PhotoAlbum_dynamic_cs4.fla.zip