Personalización del componente Button

Los estilos de un componente Button normalmente especifican valores para sus aspectos, iconos, formato de texto y relleno cuando se dibuja el componente en sus diversos estados.

En el siguiente procedimiento se colocan dos instancias de Button en el escenario y se establece la propiedad emphasized en true en ambos componentes cuando el usuario hace clic en uno de ellos. También se establece el estilo emphasizedSkin del segundo componente Button en el estilo selectedOverSkin cuando el usuario hace clic en él, de modo que los dos componentes Button muestran distintos aspectos para un mismo estado.

1. Cree un archivo de Flash (ActionScript 3.0).

2. Arrastre dos instancias de Button al escenario de forma consecutiva y asígneles los nombres de instancia aBtn y bBtn . En la ficha Parámetros del inspector de propiedades, asígneles las etiquetas Button A y Button B.

3. Añada el siguiente código al panel Acciones, en el fotograma 1 de la línea de tiempo:

   bBtn.emphasized = true; 
   aBtn.emphasized = true; 
   bBtn.addEventListener(MouseEvent.CLICK, Btn_handler); 
   function Btn_handler(evt:MouseEvent):void { 
       bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin"); 
   }

4. Seleccione Control > Probar película.

5. Haga clic en uno de los botones para ver el efecto del estilo emphasizedSkin en cada uno de los botones.

El componente Button utiliza los siguientes aspectos, que se corresponden con sus diversos estados. Para editar uno o varios aspectos con el fin de cambiar la apariencia de Button, haga doble clic en la instancia de Button en el escenario para abrir su paleta de aspectos, como se muestra en la siguiente ilustración:

Si un botón está activado, muestra el estado correspondiente al desplazamiento del puntero sobre él. Cuando se presiona el botón, recibe la selección de entrada y muestra el estado presionado. Cuando se suelta el botón del ratón, el botón recupera el estado correspondiente al desplazamiento del puntero sobre él. Si el puntero se desplaza fuera del botón estando el ratón presionado, el botón recupera su estado original. Si el parámetro toggle está establecido en true , se muestra el estado presionado con el aspecto selectedDownSkin, el estado sin presionar con el aspecto selectedUpSkin y el estado cuando se desplaza el puntero sobre él con el aspecto selectedOverSkin.

Si el componente Button está desactivado, muestra el estado desactivado sea cual sea la acción del usuario.

Para editar uno de los aspectos, haga doble clic en él para abrirlo en el modo de edición de símbolos, como se muestra en la siguiente ilustración:

En este punto, puede utilizar las herramientas de edición de Flash para editar el aspecto según sus preferencias.

El siguiente procedimiento cambia el color del aspecto selected_over de Button.

1. Cree un archivo de Flash (ActionScript 3.0).

2. Arrastre un componente Button del panel Componentes al escenario. En la ficha Parámetros, establezca el parámetro toggle en true .

3. Haga doble clic en el componente Button para abrir su paleta de aspectos.

4. Haga doble clic en el aspecto selected_over para abrirlo en el modo de edición de símbolos.

5. Establezca el control de zoom en 400% para ampliar el icono y poder editarlo.

6. Haga doble clic en el fondo hasta que aparezca su color en el selector de color de relleno en el inspector de propiedades.

7. En el selector de color de relleno, seleccione el color #CC0099 para aplicarlo al fondo del aspecto selected_over.

8. Haga clic en el botón Atrás en la parte izquierda de la barra de edición situada encima del escenario para volver al modo de edición de documentos.

9. Seleccione Control > Probar película.

10. Haga clic en el botón para que pase al modo seleccionado.

    Cuando mueva el puntero del ratón sobre el componente Button, el estado selected_over debería aparecer del modo que se muestra en la siguiente ilustración.

    

    Button con el aspecto selected_over con el color modificado