Por Patricio Figueroa
13 Febrero de 2003
Otra de las opciones
que nos permite Fireworks MX es realizar nuestros propios botones,
aprovechando una sencilla herramienta para crear “roll over”,
el efecto que “activa” elementos de una página
web cuando desplazamos el cursos sobre ellos.
Botones
activos
Lo
primero que debes hacer es abrir un documento en blanco con un tamaño
superior en algunos píxeles a las dimensiones finales del
botón, en el cual dibujaremos un rectángulo o un circulo
de acuerdo a la forma que queremos dar a este elemento.
En
nuestra entrega anterior vimos las opciones de texturas y efectos
que ofrecía Fireworks MX, estas mismas pueden ser aplicadas
a la hora de diseñar los botones. También, si lo deseamos,
podemos colocar un texto sobre la figura para indicar hacia donde
dirige el botón en caso de ser presionado.
Una
vez definidas sus propiedades procederemos a configurar el “comportamiento”
del botón, para que este cambie de color al colocar el mouse
sobre el, en lo que se conoce como “roll over”.
Para
realizar esta acción lo primero que debemos hacer es convertir
nuestro vector en “símbolo” (Convert to symbol).
Para ello podemos ubicar el cursor sobre el objeto y desplegar el
menú contextual en donde nos aparecerá la opción
“Convert to symbol” o seleccionar la figura y presionar
la tecla “F8” del teclado.
Al
escoger cualquiera de las dos posibilidades, nos aparecerá
en pantalla un cuadro en donde debemos ingresar un nombre para el
símbolo (se recomienda un nombre genérico como “botón
1”) y luego elegir el tipo de gráfico que deseamos
hacer, en este caso un botón (button).
Al
convertir nuestro objeto en un símbolo, aparecerá
sobre él una capa verde que indica la transformación
y el tipo de gráfico que es, con lo que estaríamos
listos para echar a volar nuestra imaginación.
Para
configurar el “roll over” debemos hacer doble clic en
la zona verde que cubre el botón con lo cual nos aparecerá
el siguiente cuadro:
1.
Up: El estado normal del botón.
2. Over: Este estado se muestra al colocar el puntero
del mouse sobre el botón.
3. Down: Esto se muestra al hacer clic sobre el
botón.
4. Over while down: Lo que se verá al mantener
presionado el botón
5. Active Area: Esta opción se activa automáticamente
y determina la zona interactiva.
En
este punto es necesario seleccionar la opción “Copy
Down Graphic”, la cual copia automáticamente el botón
en los distintos estados, para ser modificados posteriormente.
OJO!:
Para que resulte el “roll over” debemos asegurarnos
de realizar cambios en los distintos estados. Tampoco es obligación
modificar todos los estados, sólo los que estimemos convenientes.
Una
vez terminadas las modificaciones, simplemente apretamos “Done”.
Para ver en funcionamiento nuestro botón podemos escoger
la lengüeta “preview”, que se encuentra en la parte
superior de la ventana de trabajo, o simplemente presionar la tecla
“F12”, con la cual se abrirá una ventana del
navegador que mostrará el botón en acción.
Menús
desplegables
Para
agregarle la opción de menú desplegable a nuestro
botón debemos seleccionarlo y dirigirnos al menú “Modify”
opción “Pop-up Menu” >> Add Pop-up Menu.
En ese punto aparecerá un cuadro que nos permitirá
configurar el menú desplegable. Las opciones modificables
son:
1.
Content: Acá configuramos el texto que se desplegará,
el vínculo que tendrá y el destino del vínculo.
OJO!: Debemos tener claro el vínculo de
cada opción que se desplegara debido a que no se pueden modificar
con facilidad una vez exportados.
2. Appearance: Acá podemos escoger la apariencia
que tendrán los submenús, modificando los colores,
tipos de fuentes, etc.
3. Advanced: Esta opción nos permite entregarle
propiedades a las celdas de los submenús, como tamaños,
color de bordes, etc.
4. Position: Acá podemos configurar la posición
del menú desplegable, lo que también se puede hacer
en forma manual.
Una
vez configuradas todas las opciones seleccionamos “Done”.
Para ver una previsualización del trabajo realizado presionamos
la tecla “F12” del teclado.
Nuevamente
ponemos a tu disposición un archivo de
muestra en formato PNG, para que puedas descargarlo y abrirlo
con Fireworks MX en tu computador y así puedas despejar todas
tus dudas.
En
la próxima entrega del taller aprenderemos a exportar este
tipo de archivos a un editor de HTML.
|
En esta nueva entrega te enseñaremos a diseñar tus
propios botones, con el popular efecto “roll over”,
y revisaremos como crear y personalizar los llamativos menús
desplegables.
