创建具有 Button 组件的应用程序

以下过程解释了如何在创作时将 Button 组件添加到应用程序。在本示例中,单击按钮时会显示一条消息。

创建具有 Button 组件的应用程序:

  1. 选择"文件">"新建"并选择"Flash 文件(ActionScript 2.0)"。
  2. 将 Button 组件从"组件"面板拖到舞台上。
  3. 在属性检查器中,执行以下操作:
    • 输入实例名称 my_button
    • 为 label 参数输入 Click me
    • 为 icon 参数输入 BtnIcon

    要使用图标,必须将库中一个带有链接标识符的影片剪辑或图形元件用作图标参数。在本示例中,链接标识符是 BtnIcon。

    • toggle 属性设置为 true
  4. 在时间轴中选择第一帧,打开"动作"面板,然后输入以下代码:
    function clicked(){
        trace("You clicked the button!");
    }
    my_button.addEventListener("click", clicked);
    

    最后一行代码调用"click"事件的 clicked 事件处理函数。此操作会一起使用"EventDispatcher.addEventListener()"方法和自定义的函数来处理该事件。

  5. 选择"控制">"测试影片"。
  6. 单击该按钮时,Flash 会显示消息"You clicked the button!"(您单击了该按钮!)。

要使用 ActionScript 创建 Button,请执行下列操作:

  1. 选择"文件">"新建"并选择"Flash 文件(ActionScript 2.0)"。
  2. 将 Button 组件从"组件"面板拖到当前文档的库中。

    此操作将组件添加到库中,但不会在应用程序中显示。

  3. 在主时间轴的第 1 帧中,向"动作"面板中添加以下 ActionScript 代码以创建一个 Button 实例:
    this.createClassObject(mx.controls.Button, "my_button", 10, {label:"Click me"});
    my_button.move(20, 20);
    

    使用 UIObject.createClassObject() 方法创建名为 my_button 的 Button 实例,并指定一个标签属性。然后,代码使用 UIObject.move() 方法来定位该按钮。

  4. 现在,添加以下 ActionScript 来创建一个事件侦听器和一个事件处理函数:
    function clicked() {
        trace("You clicked the button!");
    }
    my_button.addEventListener("click", clicked);
    

    此操作会一起使用"EventDispatcher.addEventListener()"方法和自定义的函数来处理该事件。

  5. 选择"控制">"测试影片"。
  6. 单击该按钮时,Flash 会显示消息"You clicked the button!"(您单击了该按钮!)。

在与其它组件一起使用 Button 组件时,可以创建更为复杂的事件处理函数。在本示例中,"click"事件导致 Accordion 组件更改面板的显示。

与另一个组件一起使用 Button 事件:

  1. 选择"文件">"新建"并选择"Flash 文件(ActionScript 2.0)"。
  2. 将 Button 组件从"组件"面板拖到当前文档的库中。

    此操作将组件添加到库中,但不会在应用程序中显示。

  3. 将 Accordion 组件从"组件"面板拖到当前文档的库中。
  4. 在主时间轴的第 1 帧中,向"动作"面板中添加以下 ActionScript 代码以创建一个 Button 实例:
    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);
    

    此过程使用 UIObject.createClassObject() 方法来创建 Button 和 Accordion 实例。然后,代码使用 UIObject.move() 方法来定位这些实例。

  5. 现在,添加以下 ActionScript 来创建事件侦听器和事件处理函数:
    // 创建按钮事件的处理函数。
    function changePanel(evt_obj:Object):Void {
     // 根据所选按钮更改 Accordion 视图。
     switch (evt_obj.target._name) {
     case "panelOne_button" :
      my_acc.selectedIndex = 0;
      break;
     case "panelTwo_button" :
      my_acc.selectedIndex = 1;
      break;
     }
    }
    
    // 为按钮添加侦听器。
    panelOne_button.addEventListener("click", changePanel);
    panelTwo_button.addEventListener("click", changePanel);
    

    此过程将 EventDispatcher.addEventListener() 方法和一个自定义函数一起使用来处理该事件。

  6. 选择"控制">"测试影片"。
  7. 单击按钮时,Accordion 会更改当前面板。