Personalización del componente NumericStepper

El componente NumericStepper puede transformarse horizontal y verticalmente durante la edición y en tiempo de ejecución. Durante la edición, seleccione el componente en el escenario y utilice la herramienta Transformación libre o cualquiera de los comandos Modificar > Transformar. En tiempo de ejecución, utilice el método setSize() o cualquier propiedad o método aplicable de la clase NumericStepper, como width , height , scaleX y scaleY .

Si se cambia el tamaño del componente NumericStepper, no cambia la anchura de los botones de flecha arriba y flecha abajo. Si al componente NumericStepper se le asigna un tamaño superior a la altura predeterminada, el comportamiento predeterminado fija los botones de flecha en la parte superior e inferior del componente. De lo contrario, la escala de 9 divisiones determina cómo se dibujan los botones. Los botones de flecha siempre aparecen a la derecha del cuadro de texto.

Estilos y el componente NumericStepper

Es posible definir propiedades de estilo para cambiar la apariencia del componente NumericStepper. Los estilos especifican los valores de los aspectos, el relleno y el formato de texto del componente cuando éste se dibuja. El estilo textFormat permite cambiar el tamaño y la apariencia del valor de NumericStepper. Los diversos estilos de aspecto permiten especificar distintas clases que se utilizan en el aspecto. Para obtener más información sobre cómo utilizar estilos de aspecto, consulte Aspectos .

Este procedimiento utiliza el estilo textFormat para cambiar la apariencia del valor que muestra NumericStepper.

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

  2. Arrastre un componente NumericStepper del panel Componentes al escenario y asígnele el nombre de instancia myNs .

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

    var tf:TextFormat = new TextFormat(); 
    myNs.setSize(100, 50); 
    tf.color = 0x0000CC; 
    tf.size = 24; 
    tf.font = "Arial"; 
    tf.align = "center"; 
    myNs.setStyle("textFormat", tf);
  4. Seleccione Control > Probar película.

Aspectos y el componente NumericStepper

El componente NumericStepper tiene aspectos que representan los estados presionado, sin presionar, desactivado y seleccionado de sus botones.

Si un componente NumericStepper está activado, los botones de flecha arriba y flecha abajo muestran el estado correspondiente al desplazamiento del puntero sobre ellos. Los botones muestran su estado presionado cuando se presionan. Cuando se suelta el ratón, recuperan el estado correspondiente al desplazamiento del puntero sobre ellos. Si el puntero se desplaza fuera de los botones estando el ratón presionado, los botones recuperan su estado original.

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

Un componente NumericStepper tiene los siguientes aspectos:

Ver gráfico a tamaño completo
Aspectos de NumericStepper
  1. Cree un archivo FLA.

  2. Arrastre el componente NumericStepper al escenario.

  3. Establezca el control de zoom en 400% para ampliar la imagen y poder editarla.

  4. Haga doble clic en el fondo del aspecto TextInput en el panel de aspectos hasta que llegue al nivel Grupo y aparezca el color de fondo en el selector de color de relleno, en el inspector de propiedades.

  5. Utilice el selector de color de relleno en el inspector de propiedades para seleccionar el color #9999FF y aplicarlo al fondo del aspecto TextInput.

  6. 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.

  7. Vuelva a hacer doble clic en NumericStepper para abrir de nuevo el panel de aspectos.

  8. Haga doble clic en el fondo del botón de flecha arriba en el grupo Up hasta que se seleccione el fondo y aparezca su color en el selector de color de relleno, en el inspector de propiedades.

  9. Seleccione el color #9966FF para aplicarlo al fondo del botón de flecha arriba.

  10. Repita los pasos 8 y 9 en la flecha abajo del grupo Up.

  11. Seleccione Control > Probar película.

    La instancia de NumericStepper debe aparecer tal y como se muestra en la siguiente ilustración:

    NumericStepper con fondo y botones personalizados