El tipo de botón “imagen” disponible en el editor de formularios está concebido, entre otros usos, para realizar botones de 4 estados:

• Estado 1: estado normal del botón sin ninguna acción en el mismo
• Estado 2: el botón recibe un clic
• Estado 3: el ratón pasa encima del botón sin hacer clic (rollover)
• Estado 4: el botón está desactivado

La mayoría de los botones proporcionados en las plantillas del asistente de formularios 4D siguen este modelo y utilizan imágenes específicas que se pueden visualizar en la librería de imágenes. Cada imagen es una concatenación vertical de los 4 elementos correspondientes a cada estado.

El propósito de este artículo es proponer una metodología sencilla para crear una imagen adecuada para un botón personalizado.

Elegir un icono

Existen en Internet muchas librerías de iconos, algunas gratuitas, otras que permiten descargar un paquete de iconos en varios formatos por un precio asequible. Para crear un botón de tamaño estándar es recomendable elegir un icono de tamaño igual o superior a 48 x 48 pixels.

Hemos optado por el siguiente icono, disponible en 128 x 128, para realizar un botón de Preferencias en nuestro formulario.

Elegir un editor de imágenes

Para manipular las imágenes hay que utilizar un editor adaptado. Por supuesto, un programa como Adobe Photoshop es útil para hacerlo, pero existen alternativas más baratas, como [1] Graphic Converter, que cuesta bastante menos dinero y tiene todo lo necesario.

Preparar el archivo

Creamos con Graphic Converter un archivo nuevo con tamaño 48 x 192, es decir, para 4 filas de 48 x 48. Lo podemos grabar bajo varios tipos, teniendo en cuenta que se requerirá instalar [2] QuickTime bajo Windows para desplegarlos. Nosotros utilizaremos [3] PNG, que es un formato de bitmap bastante cómodo y sin depredación de compresión.

Ajustar el tamaño de la imagen fuente

Por otra parte, abrimos nuestro icono original que tenemos que reducir. Como la imagen ocupa casi todo el espacio disponible (127 pixels de ancho y de alto), hay que vigilar la tasa de reducción que pondremos. Como en la imagen final, también necesitaremos un borde blanco de 1 pixel alrededor del icono, es conveniente reducirlo a un tamaño inferior a 48 x 48. Puede ser que las medidas 46 x 46, 47 x 47 u otras no proporcionales, dependiendo de la imagen inicial, nos sean útiles.

Desde el menú Imagen > Tamaño > Escalar… cambiamos el tamaño de la imagen original a 47 x 47, probando el mejor algoritmo de compresión. En este caso, QuickDraw es suficiente para conservar un buen nivel de calidad. Con otra imagen podría ser necesario ajustarlo a Bicubico.

Aplanar el canal alfa

Seguramente el icono original tendrá un canal alfa para efectos de transparencia, lo que impide completamente copiarlo vía el portapapeles. La capa alfa no se copiaría, y dejaría ver un fondo negro. Para poder conservar el fondo blanco al copiar pegar la imagen, aplanaremos el canal alfa con el comando de menú Efectos > Aplanar canal apha. Esta operación no tendrá consecuencias sobre la imagen final, puesto que con 4D, desde las propiedades del botón de formulario podremos marcar la casilla Transparente para recuperar un efecto de transparencia.

Crear el estado 1 (normal)

Copiamos toda la imagen anterior en el archivo vacío y la colocamos encima de la zona de trabajo dejando un pixel blanco encima y en la izquierda.

Crear el estado 2 (clic)

Con la herramienta de selección rectangular seleccionamos el bloque superior de 48 x 48 pixels de la imagen y lo duplicamos justo debajo. La ventana Mostrar Posición nos ayuda a visualizar el tamaño de la selección. Para duplicar el tamaño hay que copiar la selección, deseleccionar y pegar con la opción Pegar en Selección, con los valores X=0 e Y=48. En seguida debemos desplazar la selección con las flechas del teclado, de un pixel hacia la derecha y hacia abajo. De esta forma se posicionará la imagen para crear el pequeño movimiento que corresponde al clic. Es importante verificar que ningún elemento del dibujo (sombra, etc…) sobrepasa el límite inferior teórico de 96 pixels.

Crear el estado 3 (rollover)

Copiar de nuevo el bloque de 48 x 48 superior y pegarlo en posición X=0 Y=96.

Cambiar el contraste de los estados 2 y 3

Para añadir un pequeño cambio de tonalidad durante el clic y el rollover, debemos seleccionar las imágenes 2 y 3 que acabamos de crear y aplicarles una corrección de gama (menú Efecto) para darles un mayor contraste. Según el icono será necesaria una corrección diferente. Hay que probar y ensayar.

Crear el estado 4 (desactivado)

Para crear el último estado, se debe volver a la imagen original (que habíamos reducida a 47×47) y quitarle los colores, gracias al comando Imagen > Colores > Escala de grises > 256 Grays. Luego lo seleccionamos todo y copiamos en el bloque inferior de la imagen de destino para que coincida con la posición relativa de la primera imagen.

¡Ya hemos terminado! Es el momento de grabar definitivamente nuestra imagen.

Añadir la imagen en la librería de imágenes

Importamos la imagen en la librería de imágenes 4D. Conservamos las dimensiones del archivo pero dividimos la imagen y ajustamos el valor de Filas a 4. Apuntamos el número de imagen asignado.

Insertar la imagen en un formulario

Simplemente nos queda crear un botón imagen de tamaño 48 x 48 en nuestro formulario y asignarle las siguientes propiedades:

• Fuente: Librería de imágenes
• Nº : el nº de referencia creado automáticamente en la librería
• Filas : 4
• Columnas : 1
• Marcar las casillas del apartado Animación :
• Cambiar al pasar el cursor por encima
• Volver al soltar el clic
• Última imagen si desactivado
• Fondo transparente
• Borde transparente

El botón está listo para usar. Simplemente falta asociarle una acción automática o un método de objeto, y disfrutar los efectos gráficos que enriquecerán nuestra interfaz.