Uso del componente Button

El componente Button es un botón rectangular y de tamaño modificable que los usuarios pueden presionar con el ratón o la barra espaciadora para iniciar una acción en la aplicación. También se le puede añadir un icono personalizado y cambiar su comportamiento de botón de comando a conmutador. Un componente Button conmutador permanece presionado cuando se hace clic en él y recupera su estado original al repetirse el clic.

Un componente Button es una parte fundamental de muchos formularios y aplicaciones web. Utilice botones siempre que necesite que el usuario inicie un evento. Por ejemplo, la mayoría de los formularios contienen un botón Enviar. También puede añadir botones Anterior y Siguiente a una presentación.

Interacción del usuario con el componente Button

Es posible activar o desactivar los botones de una aplicación. Si está desactivado, el botón no recibe la entrada del ratón ni del teclado. Si está activado, el botón se selecciona cuando el usuario hace clic en él o usa el tabulador para llegar hasta él. Cuando una instancia de Button está seleccionada, es posible utilizar las siguientes teclas para controlarla:

Tecla

Descripción

Mayús+Tabulador

Desplaza la selección al objeto anterior.

Barra espaciadora

Presiona o suelta el botón y activa el evento click .

Tabulador

Desplaza la selección al objeto siguiente.

Intro/Retorno

Desplaza la selección al objeto siguiente si se define el botón como Button predeterminado de FocusManager.

Para obtener más información sobre el control de la selección, consulte la interfaz IFocusManager y la clase FocusManager en la Referencia de ActionScript 3.0 para Flash Professional y en Trabajo con FocusManager .

La previsualización dinámica de cada instancia de Button refleja los cambios de parámetros realizados durante la edición en el inspector de propiedades o el inspector de componentes.

Nota: si el icono es más grande que el botón, sobresaldrá por los bordes de éste.

Para designar un botón como el botón de comando predeterminado de una aplicación (el botón que recibe el evento click cuando un usuario presiona Intro), debe establecerse FocusManager.defaultButton . Por ejemplo, el código siguiente establece que el botón predeterminado sea una instancia de Button denominada submitButton . 

FocusManager.defaultButton = submitButton;

Si se añade el componente Button a una aplicación, se puede hacer accesible a un lector de pantalla añadiendo las líneas de código ActionScript siguientes: 

import fl.accessibility.ButtonAccImpl; 
 
ButtonAccImpl.enableAccessibility();

La accesibilidad de un componente sólo se activa una vez, sea cual sea su número de instancias.

Parámetros del componente Button

Puede establecer los siguientes parámetros de edición en el inspector de propiedades (Ventana > Propiedades > Propiedades) o en el inspector de componentes (Ventana > Inspector de componentes) para cada instancia de Button: emphasized , label , labelPlacement , selected y toggle . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Al asignar un valor a estos parámetros, se establecerá el estado inicial de la propiedad en la aplicación. Si se establece la propiedad en ActionScript, se sustituye el valor establecido en el parámetro. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase Button en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación con el componente Button

El siguiente procedimiento explica cómo añadir un componente Button a una aplicación durante la edición. En este ejemplo, Button cambia el estado de un componente ColorPicker cuando se hace clic.

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre un componente Button del panel Componentes al escenario e introduzca los valores siguientes en el inspector de propiedades:

    • Introduzca el nombre de instancia aButton .

    • Introduzca Show para el parámetro de etiqueta.

  3. Añada un componente ColorPicker al escenario y asígnele el nombre de instancia aCp .

  4. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente: 

    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; 
    } 
}

    La segunda línea de código registra la función clickHandler() como la función de controlador de eventos para el evento MouseEvent.CLICK . El evento se produce cuando el usuario hace clic en Button; la función clickHandler() adopta una de las acciones siguientes según el valor de Button:

    • Show muestra el componente ColorPicker y cambia la etiqueta de Button a Disable.

    • Disable desactiva el componente ColorPicker y cambia la etiqueta de Button a Enable.

    • Enable activa el componente ColorPicker y cambia la etiqueta de Button a Hide.

    • Hide oculta el componente ColorPicker y cambia la etiqueta de Button a Show.

  5. Seleccione Control > Probar película para ejecutar la aplicación.

Creación de una aplicación con el componente Button

En el procedimiento siguiente se crea un componente Button conmutador mediante ActionScript y se muestra el tipo de evento en el panel Salida al hacer clic en Button. En el ejemplo se crea la instancia de Button invocando el constructor de la clase y se añade dicha instancia al escenario llamando al método addChild() .

  1. Cree un nuevo documento de Flash (ActionScript 3.0).

  2. Arrastre el componente Button del panel Componentes al panel Biblioteca del documento actual.

    De esta manera, se añade el componente a la biblioteca, aunque éste no se vuelve visible en la aplicación.

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente para crear una instancia de Button: 

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

    El método move() coloca el botón en la ubicación 50 (coordenada x), 50 (coordenada y) en el escenario.

  4. Añada el siguiente código ActionScript para crear un detector de eventos y una función de controlador de eventos: 

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

  5. Seleccione Control > Probar película.

    Cuando hace clic en el botón, Flash muestra el mensaje, “Event type: click” en el panel Salida.