How to Bring a Movie Clip to the Front in AS3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Bring a Movie Clip to the Front in AS3
Arrange movie clips in front or back of other movie clips with AS3 code. (flashfilm/Lifesize/Getty Images)

Movie clips in the Flash programming language, ActionScript 3 (AS3), are an object class that is used to animate objects that you create or import into Flash. A Flash animation may have several movie clip objects on the stage at one time. Placing movie clip objects in front or behind of other objects is done with AS3 code through the display list. The last object placed on the display list will always be displayed in front of all other objects on the stage.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Adobe Flash Professional: CS3, CS4 or CS5 Versions

Show MoreHide

Instructions

  1. 1

    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.

  2. 2

    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 red Button:MovieClip = new MovieClip();

    redButton.graphics.lineStyle(4);

    redButton.graphics.beginFill(0xFF0000);

    redButton.graphics.drawRect(100, 50, 50, 20);

    redButton.graphics.endFill();

    add Child(redButton);

  3. 3

    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 green Button:MovieClip = new MovieClip();

    greenButton.graphics.lineStyle(4);

    greenButton.graphics.beginFill(0x00FF00);

    greenButton.graphics.drawRect(125, 50, 50, 20);

    greenButton.graphics.endFill();

    add Child(greenButton);

  4. 4

    Type the code below starting at the next line in the Actions editor to add an event listener to the red Button movie clip so that when the red Button is clicked the Flash program will execute the code in the function named callFunction_fn.

    redButton.addEventListener(MouseEvent.CLICK, callFunction_fn);

  5. 5

    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 green Button in front or back of the red Button when the red Button is clicked, depending on the green Button's location.

    function callFunction_fn(e:MouseEvent): void {

    if (getChildIndex(redButton) == 0) {setChildIndex(red Button, 1) } else {setChildIndex(red Button,0)} ;

    };

  6. 6

    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 red Button:MovieClip = new MovieClip();

    redButton.graphics.lineStyle(4);

    redButton.graphics.beginFill(0xFF0000);

    redButton.graphics.drawRect(100, 50, 50, 20);

    redButton.graphics.endFill();

    add Child(redButton);

    var green Button:MovieClip = new MovieClip();

    greenButton.graphics.lineStyle(4);

    greenButton.graphics.beginFill(0x00FF00);

    greenButton.graphics.drawRect(125, 50, 50, 20);

    greenButton.graphics.endFill();

    add Child(greenButton);

    redButton.addEventListener(MouseEvent.CLICK, callFunction_fn);

    function callFunction_fn(e:MouseEvent): void {

    if (getChildIndex(redButton) == 0) {setChildIndex(red Button, 1) } else {setChildIndex(red Button,0)} ;

    };

  7. 7

    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.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.