How to Use a Button in a Movie Clip in AS3

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."

Things You'll Need

  • Adobe Flash Professional (CS3, CS4 and CS5 Versions)
Show More

Instructions

    • 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

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

      myButton.graphics.lineStyle(4);

      myButton.graphics.beginFill(0xFF0000);

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

      myButton.graphics.endFill();

      addChild(myButton);

    • 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 myButton:

      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 myButton so that when myButton is clicked, the Flash program executes the instructions in the function called startMovie_fn.

    • 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(event1: 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 mouse click is received from the myButton mouse click addEventListener.

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

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

      : void { instruction1; instruction2;}

      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

      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.

Learnify Hub © www.0685.com All Rights Reserved