Start the Flash program. Click "Flash File (ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation project.
Select "Actions" from the Window menu on the main Flash menu bar to open the Actions editor. Position your mouse cursor on the first line of the Actions editor. Click your mouse button and type in the code below to create and place a red rectangular movie clip graphic on the stage that is positioned at Flash stage coordinates (100,50), has a width of 50 pixels, a height of 20 pixels and a black border with a width of 4 pixels.
var redButton:MovieClip = new MovieClip();
redButton.graphics.lineStyle(4);
redButton.graphics.beginFill(0xFF0000);
redButton.graphics.drawRect(100, 50, 50, 20);
redButton.graphics.endFill();
addChild(redButton);
Type the code below starting at the next line in the Actions editor to create and place a green rectangular movie clip graphic on the stage that is positioned at Flash stage coordinates (125,50), has a width of 50 pixels, a height of 20 pixels and a black border with a width of 4 pixels.
var greenButton:MovieClip = new MovieClip();
greenButton.graphics.lineStyle(4);
greenButton.graphics.beginFill(0x00FF00);
greenButton.graphics.drawRect(125, 50, 50, 20);
greenButton.graphics.endFill();
addChild(greenButton);
Type the code below starting at the next line in the Actions editor to add an event listener to the redButton movie clip so that when the redButton is clicked the Flash program will execute the code in the function named callFunction_fn.
redButton.addEventListener(MouseEvent.CLICK, callFunction_fn);
Type the code below starting at the next line in the Actions editor to code the instructions in the callFunction_fn function such that Flash will move the greenButton in front or back of the redButton when the redButton is clicked, depending on the greenButton's location.
function callFunction_fn(e:MouseEvent): void {
if (getChildIndex(redButton) == 0) {setChildIndex(redButton, 1) } else {setChildIndex(redButton,0)} ;
};
Copy and paste the code below into the Actions editor to ensure that there are no syntax errors and the "bring to front" animation program runs correctly.
var redButton:MovieClip = new MovieClip();
redButton.graphics.lineStyle(4);
redButton.graphics.beginFill(0xFF0000);
redButton.graphics.drawRect(100, 50, 50, 20);
redButton.graphics.endFill();
addChild(redButton);
var greenButton:MovieClip = new MovieClip();
greenButton.graphics.lineStyle(4);
greenButton.graphics.beginFill(0x00FF00);
greenButton.graphics.drawRect(125, 50, 50, 20);
greenButton.graphics.endFill();
addChild(greenButton);
redButton.addEventListener(MouseEvent.CLICK, callFunction_fn);
function callFunction_fn(e:MouseEvent): void {
if (getChildIndex(redButton) == 0) {setChildIndex(redButton, 1) } else {setChildIndex(redButton,0)} ;
};
Click the "TestMovie" option in the Control menu on the main Flash menu bar to play the project. Click the red button and observe that the red button moves in front of the green button. Click the red button again and observe that the green button moves in front of the red button.