Tabla de contenido:
Video: Fireworks CS5 Tutorial - Rollover Button/Image 2025
Puede crear botones interactivos en Adobe Fireworks Creative Suite 5 para crear un botón de rollover, un botón que cambia cuando el puntero del mouse pasa sobre él.
Crea el arte básico
Primero, necesitas crear el arte básico para el botón. (Para este ejemplo, el botón es un rectángulo redondeado, pero puedes sustituirlo por otra forma). Sigue estos pasos:
-
Haga clic y mantenga presionada la herramienta Rectángulo en la sección Vector del panel Herramientas y luego seleccione Rectángulo redondeado en la lista de herramientas ocultas.
-
Haga clic y arrastre en el área de trabajo para crear una forma.
Cualquier tamaño está bien para este ejemplo.
-
Elija Ventana → Estilos para abrir el panel Estilos.
-
Elija un estilo de la lista desplegable.
Por ejemplo, seleccione Plástico Estilos.
Este botón básico es lo que el espectador ve inicialmente en su página web.
Añadir comportamiento de rollover
Para agregar un comportamiento de rollover al botón yc reate la versión de la ilustración del botón que los espectadores verán cuando los punteros del mouse lo pasen, siga estos pasos:
-
Seleccione la forma del rectángulo redondeado que creó en la sección anterior y luego haga clic con el botón derecho para seleccionar Insertar división rectangular.
La forma está resaltada, lo que indica que se ha creado un punto de acceso público.
-
Haga clic con el botón derecho (Windows) o presione la tecla Control y haga clic (Mac) en el centro del sector y elija Agregar comportamiento de rollover simple en el menú contextual.
-
Elija Ventana → Estados para abrir el panel Estados.
-
En el menú del panel Estados, elija Duplicar estado.
Aparece el cuadro de diálogo Estado duplicado. Mantenga la configuración en el estado predeterminado 1 que se inserta después del estado actual.
