Flash CS3 Documentation

ActionScript 2.0 Components Language Reference > Button component > Using the Button component > Creating an application with the Button component

Creating an application with the Button component

The following procedure explains how to add a Button component to an application while authoring. In this example, the button displays a message when you click it.

To create an application with the Button component:

1. Select File > New and choose Flash File (ActionScript 2.0).
2. Drag a Button component from the Components panel to the Stage.
3. In the Property inspector, do the following:
   • Enter the instance name my_button.
   • Enter Click me for the label parameter.
   • Enter BtnIcon for the icon parameter.

     To use an icon, there must be a movie clip or graphic symbol in the library with a linkage identifier to use as the icon parameter. In this example, the linkage identifier is BtnIcon.

   • Set the toggle property to true.
4. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code:

   function clicked(){
       trace("You clicked the button!");
   }
   my_button.addEventListener("click", clicked);
   

   The last line of code calls a clicked event handler function for the "click" event. This uses the method EventDispatcher.addEventListener() with a custom function to handle the event.

5. Select Control > Test Movie.
6. When you click the button, Flash displays the message "You clicked the button!".

To create a Button using ActionScript:

1. Select File > New and choose Flash File (ActionScript 2.0).
2. Drag the Button component from the Components panel to the current document's library.

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

3. In the first frame of the main timeline, add the following ActionScript to the Actions panel to create a Button instance:

   this.createClassObject(mx.controls.Button, "my_button", 10, {label:"Click me"});
   my_button.move(20, 20);
   

   The method UIObject.createClassObject() is used to create the Button instance named my_button and specify a label property. Then, the code uses the method UIObject.move() to position the button.

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

   function clicked() {
       trace("You clicked the button!");
   }
   my_button.addEventListener("click", clicked);
   

   This uses the method EventDispatcher.addEventListener() with a custom function to handle the event.

5. Select Control > Test Movie.
6. When you click the button, Flash displays the message "You clicked the button!".

As you use the Button component with other components, you can create more sophisticated event handler functions. In this example, the "click" event causes the Accordion component to change the display of the panels.

To use a Button event with another component:

1. Select File > New and choose Flash File (ActionScript 2.0).
2. Drag the Button component from the Components panel to the current document's library.

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

3. Drag the Accordion component from the Components panel to the current document's library.
4. In the first frame of the main timeline, add the following ActionScript to the Actions panel to create a Button instance:

   this.createClassObject(mx.containers.Accordion, "my_acc", 0);
   my_acc.move(10, 40);
   my_acc.createChild(mx.core.View, "panelOne", {label: "Panel One"});
   my_acc.createChild(mx.core.View, "panelTwo", {label: "Panel Two"});
   
   this.createClassObject(mx.controls.Button, "panelOne_button", 10, {label:"Panel One"});
   panelOne_button.move(10, 10);
   this.createClassObject(mx.controls.Button, "panelTwo_button", 20, {label:"Panel Two"});
   panelTwo_button.move(120, 10);
   

   This process uses the method UIObject.createClassObject() to create the Button and Accordion instances. Then, the code uses the method UIObject.move() to position the instances.

5. Now, add the following ActionScript to create event listeners and event handler functions:

   // Create Handler for the button event.
   function changePanel(evt_obj:Object):Void {
    // Change Accordion view depending on button selected.
    switch (evt_obj.target._name) {
    case "panelOne_button" :
     my_acc.selectedIndex = 0;
     break;
    case "panelTwo_button" :
     my_acc.selectedIndex = 1;
     break;
    }
   }
   
   // Add Listeners for the buttons.
   panelOne_button.addEventListener("click", changePanel);
   panelTwo_button.addEventListener("click", changePanel);
   

   This process uses the method EventDispatcher.addEventListener() with a custom function to handle the events.

6. Select Control > Test Movie.
7. When you click a button, the Accordion changes the current panel.

Flash CS3

Comments

Add Comment

badgirl_1 said on Oct 4, 2007 at 9:01 PM :

I just want to add a SIMPLE 2 minute button to my flash page. You click the button to go to another url. HOW HOW HOW can I do this. Please tell me. It seems impossible here.

adbe_paul said on Oct 8, 2007 at 1:21 PM :

If you want to do this in ActionScript 2.0 using the Button component, you can use the code under step 4. Instead of the line with the trace() function call, put in a line like this:

getURL("http://www.example.com/");

If you want to do this in ActionScript 3.0, this page (from the book "Programming ActionScript 3.0") describes how to do it:
http://livedocs.adobe.com/flash/9.0/main/00000026.html

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00002581.html

Add Comment