4D v14.3

Botones imagen

Inicio

 
4D v14.3
Botones imagen

Botones imagen  


 

Uso  

Un botón imagen puede tener diferentes estados, por comparación, un botón estándar acepta tres estados: activo, desactivado y presionado. Como su nombre lo indica, un botón imagen representa cada estado con una imagen diferente.

Los botones imagen pueden utilizarse de dos maneras:

  • como botones de comando en un formulario. en este caso, el botón imagen incluye generalmente cuatro estados diferentes: activo, desactivado, presionado y al pasar el cursor por encima. Este modo de funcionamiento es utilizado por el asistente de creación de formularios para la mayoría de plantillas de formularios. 
  • como botón imagen permite al usuario elegir entre varias opciones. En este caso, un botón imagen puede utilizarse en lugar de un menú imagen desplegable. Con Menús pop-up imagen, todas las opciones se presentan simultáneamente (como los elementos en el menú desplegable), mientras que el botón imagen muestra las opciones consecutivamente (a medida que el usuario hace clic en el botón).
    Este es un ejemplo de un botón imagen. Suponga que quiere dar a los usuarios de una aplicación personalizada la oportunidad de elegir el lenguaje de la interfaz para la aplicación. Puede implementar la opción como un botón imagen en una caja de diálogo personalizada de propiedades, como se muestra a continuación:
    Al hacer clic en el objeto cambia la imagen
    El botón imagen se implementa de la siguiente manera. Primero, se prepara un gráfico en el cual la serie de imágenes esté organizada en filas, columnas, o en tabla. Puede añadir esta gráfica a la Librería de imágenes, a una variable imagen o a un archivo imagen.

    Puede organizar las imágenes en columnas, filas o en tablas (como se muestra en la imagen anterior). Cuando organice imágenes en una tabla, las imágenes se numeran de izquierda a derecha, fila por fila, comenzando con 0. Por ejemplo, la segunda imagen de la segunda fila de una tabla de cuatro filas y tres columnas, es la número 4.
    Nota: la Librería de imágenes incluye características que le permiten organizar una imagen como una tabla de miniaturas.
    Cuando una imagen ha sido definida como una tabla de miniaturas, puede crear un botón imagen arrastrando el nombre de la imagen de la Librería.

Los botones imagen tienen las siguientes propiedades específicas:

  • En el tema “Imagen”, defina la fuente de la imagen utilizando la lista desplegable “Fuente”. Puede elegir entre Variable, Librería de imágenes, Archivo de recursos y Archivo. Una vez definida la fuente de la  imagen, introduzca el nombre (si la imagen es una variable) o el número (si la imagen proviene de la librería de imágenes o de un archivo de recursos) o la ruta de acceso (si la imagen viene de un archivo imagen) relativa a la carpeta Resources de la base” (ver el párrafo Referenciación automática de los archivos imágenes).
  • En el tema “Recorte”, defina el número de filas y columnas que componen la tabla de miniaturas. En nuestro ejemplo, utilizamos una imagen que consta de tres columnas y dos filas.
  • En el tema “Animación”, puede definir el modo de visualización del botón imagen y su funcionamiento. Puede combinar varias opciones. Este punto se describe con más detalle en la siguiente sección.
    Nota: la variable asociada a un botón imagen devuelve el número de índice, en la tabla de miniaturas, de la imagen mostrada actualmente. La numeración de imágenes de la tabla comienza por 0.

He aquí las diferentes opciones de visualización y funcionamiento de botones imagen. Naturalmente, estas opciones pueden combinarse:

  • <Ninguna opción marcada>
    Muestra la imagen siguiente de la serie cuando el usuario hace clic en el botón; Muestra la imagen anterior de la serie cuando el usuario presiona la tecla Mayús y hace clic. Cuando el usuario alcanza la última imagen de la serie, la imagen no cambia cuando el usuario hace clic nuevamente. Es decir, el botón no regresa a la primera imagen de la serie.
  • Cambiar continuamente al hacer clic
    Es similar al anterior excepto que el usuario puede mantener presionado el botón del ratón para mostrar la imagen continuamente (es decir, como una animación). Cuando el usuario alcanza la última imagen, el objeto no regresa a la primera imagen.   
  • Volver al inicio
    Es similar al anterior excepto que las imágenes se muestran en un ciclo continuo. Cuando el usuario alcanza la última imagen y hace clic nuevamente, la primera imagen aparece y así sucesivamente.
  • Cambiar al pasar el cursor encima
    El contenido del botón imagen se modifica cuando el cursor pasa encima. La imagen inicial se restablece cuando el cursor deja el área del botón. Este modo se utiliza con frecuencia en aplicaciones multimedia o en documentos HTML. La imagen mostrada es la última de la tabla de miniaturas, a menos que esté seleccionada la opción Última imagen si desactivado. Si esta opción está seleccionada, la imagen que se despliega es la miniatura siguiente a la última.
  • Volver al soltar el clic
    Este modo funciona con dos imágenes. Muestra la primera imagen todo el tiempo excepto cuando el usuario hace clic en el botón. En este caso, la segunda imagen se muestra hasta que el usuario suelta el botón del ratón, con lo cual regresa la primera imagen. Este modo le permite crear un botón de acción con una imagen diferente para cada estado (normal y presionado). Puede utilizar este modo para crear un efecto 3D o mostrar toda imagen que represente la acción del botón.
  • Última imagen si desactivado
    Este modo le permite definir la última miniatura como la miniatura a mostrar cuando el botón esté inactivo. Cuando este modo está seleccionado, 4D muestra la última miniatura cuando el botón está inactivo. La miniatura utilizada cuando el botón está inactivo es tratada aparte por 4D: cuando combina esta opción con las opciones “Cambiar continuamente al hacer clic” y “Volver al inicio”, la última imagen se excluye de la secuencia asociada con el botón y sólo aparece cuando el botón está inactivo.
  • Cambiar cada x tics
    Este modo permite hacer un ciclo a través del contenido del botón imagen a una velocidad especificada (en tics). Por ejemplo, si pone 10, las miniaturas cambiarán cada 10 tics. En este modo, todas las otras opciones se ignoran.

Nota: observe que la opción Transparente (tema “Apariencia”) también puede utilizarse para definir la representación del botón imagen (vuelve transparente el fondo de la imagen).

Por ejemplo, usted quiere definir un botón que acepte los siguientes modos: Volver al soltar el clic, Cambiar al pasar el cursor encima y Última imagen si desactivado.
En el caso de una tabla de miniaturas que tiene una fila y cuatro columnas, cada miniatura corresponde a los siguientes estados: por defecto, presionado, cursor sobre y desactivado.
En la Lista de propiedades puede definir las siguientes propiedades: 1 fila, 4 columnas como también las opciones Volver al soltar el clic, Cambiar al pasar el cursor por encima y Última imagen si desactivado.

 
PROPIEDADES 

Producto: 4D
Tema: Trabajar con objetos activos

 
VER TAMBIÉN 

Arrastrar y soltar desde la librería

 
ARTICLE USAGE

Manual de Diseño ( 4D v14 R2)
Manual de Diseño ( 4D v14 R3)
Manual de Diseño ( 4D v14.3)
Manual de Diseño ( 4D v14 R4)

Inherited from : Botones imagen ( 4D v12.4)