Flash CS3 Documentation

Using ActionScript 3.0 Components > Using the UI Components > Using the Button > Creating an application with the Button

Creating an application with the Button

The following procedure explains how to add a Button component to an application while authoring. In this example, the Button changes the state of a ColorPicker component when you click it.

To create an application with the Button component:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag a Button component from the Components panel to the Stage and enter the following values for it in the Property inspector:
   • Enter the instance name aButton.
   • Enter Show for the label parameter.
3. Add a ColorPicker to the Stage and give it an instance name of aCp.
4. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

   aCp.visible = false;
   
   aButton.addEventListener(MouseEvent.CLICK, clickHandler);
   
   function clickHandler(event:MouseEvent):void {
       
       switch(event.currentTarget.label) {
           case "Show":
               aCp.visible = true;
               aButton.label = "Disable";
               break;
           case "Disable":
               aCp.enabled = false;
               aButton.label = "Enable";
               break;
           case "Enable":
               aCp.enabled = true;
               aButton.label = "Hide";
               break;
           case "Hide":
               aCp.visible = false;
               aButton.label = "Show";
               break;
       }  
   }
   

   The second line of code registers the function clickHandler() as the event handler function for the MouseEvent.CLICK event. The event occurs when a user clicks the Button, causing the clickHandler() function to take one of the following actions depending on the Button's value:

5. Show makes the ColorPicker visible and changes the Button's label to Disable.
6. Disable disables the ColorPicker and changes the Button's label to Enable.
7. Enable enables the ColorPicker and changes the Button's label to Hide.
8. Hide makes the ColorPicker invisible and changes the Button's label to Show.
9. Select Control > Test Movie to run the application.

The following procedure creates a toggle Button using ActionScript and displays the event type in the Output panel when you click the Button. The example creates the Button instance by invoking the class's constructor and it adds it to the Stage by calling the addChild() method.

To create a Button using ActionScript:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag the Button component from the Components panel to the current document's Library panel.

   This adds the component to the library, but doesn't make it visible in the application.

3. Open the Actions panel, select Frame 1 in the main Timeline and enter the following code to create a Button instance:

   import fl.controls.Button;
   
   var aButton:Button = new Button();
   addChild(aButton);
   aButton.label = "Click me";
   aButton.toggle =  true; 
   aButton.move(50, 50);
   

   The move() method positions the button at location 50 (x coordinate), 50 (y coordinate) on the Stage.

4. Now, add the following ActionScript to create an event listener and an event handler function:

   aButton.addEventListener(MouseEvent.CLICK, clickHandler);
   
   function clickHandler(event:MouseEvent):void {
       trace("Event type: " + event.type);  
   }
   

5. Select Control > Test Movie.

When you click the button, Flash displays the message, "Event type: click" in the Output panel.

Flash CS3