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.
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 "simbolo” (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.
Suerte!!
No hay comentarios:
Publicar un comentario