How to Use a Button in a Movie Clip in AS3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Use a Button in a Movie Clip in AS3
Use Buttons with Event Listeners in AS3 to Allow User Interactivity. (Burke/Triolo Productions/Brand X Pictures/Getty Images)

ActionScript 3 (AS3,) the Flash programming language, buttons are used to start playing a movie clip, stop a movie clip and to select different movie clips. Making an interactive button in a movie clip requires that you add an event listener to the button. An event listener will detect when a button is clicked with a mouse and then instruct the Flash program to execute a set of instructions that are within a block of code called a "function."

Skill level:
Moderate

Other People Are Reading

Things you need

  • Adobe Flash Professional (CS3, CS4 and 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 the AS3 Flash multiple drop target project.

  2. 2

    Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button, and type in the code below to create a red rectangle (positioned at Flash stage coordinates (350,200) with a width of 50 pixels and a height of 20 pixels).

    var my Button:MovieClip = new MovieClip();

    myButton.graphics.lineStyle(4);

    myButton.graphics.beginFill(0xFF0000);

    myButton.graphics.drawRect(350, 200, 50, 20);

    myButton.graphics.endFill();

    add Child(myButton);

  3. 3

    On the next line of the ActionScript 3 editor, type in the code to attach a mouse click event listener to the button (myButton) that will call a function called startMovie_fn when the user clicks my Button:

    myButton.addEventListener(MouseEvent.CLICK, startMovie_fn)

    The AS3 addEventListener syntax used to to assign the mouse click event to a button has the general syntax form:

    <button name>.addEventListener(MouseEvent.CLICK, <function name>

    where button name is the name given to the button and function name is the name given to the function that contains the code that will be executed when the button is clicked. The code "myButton.addEventListener(MouseEvent.MOUSE_CLICK, startMovie_fn,)" adds a mouse click event listener to the button named my Button so that when my Button is clicked, the Flash program executes the instructions in the function called startMovie_fn.

  4. 4

    On the next line of the ActionScript 3 editor, type in the code for the function that the addEventListener statement calls (startMovie_fn). Code the function's instructions so that Flash will start playing the movie clip at the first frame of the movie clip (frame 0).

    function startMovie_fn(event 1: MouseEvent)

    :void { gotoAndPlay(0);}

    This code instructs Flash to begin playing the current flash movie at frame 0, the beginning of the movie clip, when a mouse click is received from the my Button mouse click addEventListener.

    The function statement and instructions that are contained in it has the general syntax:

    function <function name> (<event name>, MouseEvent)

    : void { instruction 1; instruction 2;}

    Where function name is the name of the function that the addEventListener method calls and event name is an arbitrary name assigned to the specific mouse event that occurs. The function name must match the name in the addEventlistener method argument. The event name can be any arbitrary valid AS3 name.

    Note that a colon must follow the function statement, a left curly brace must precede the instructions in the function and a right curly brace must follow the last instruction. The void statement must be used to indicate that the function doesn't return a result.

  5. 5

    Click the "TestMovie" option in the Control menu on the main Flash menu bar to play the movie. Click the red rectangle movie to start playing the movie clip.

Tips and warnings

  • The completed code for the entire program is listed below. Copy and paste this code into the ActionScript 3 Editor if you want to ensure that there are no typing errors in your button movie and it runs correctly the first time.
  • var my Button:MovieClip = new MovieClip();
  • myButton.graphics.lineStyle(4);
  • myButton.graphics.beginFill(0xFF0000);
  • myButton.graphics.drawRect(350, 200, 50, 20);
  • myButton.graphics.endFill();
  • add Child(myButton);
  • myButton.addEventListener(MouseEvent.CLICK, startMovie_fn)
  • function startMovie_fn(event 1: MouseEvent)
  • :void { gotoAndPlay(0);}
  • You will need to add content on the other Flash frames (1, 2, 3 etc.) to play an actual movie. The code assumes that movie content, such as graphic animations, has been added to the other frames.

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.