
En sus inicios de revolución grafica la web usaba botones llamativos, que se movían, saltaban, y hasta con sonidos, obviamente toda esa cantidad de efectos y luces asían a las paginas muy pesadas y difícil de cargar; se ha cambiado esa tendencia a menús mas sobrios y calmados… MAS FACILES DE USAR.
Índice:
1) Que necesitamos
2) Cambiar los colores de los Iconos
3) Hagamos el Botón
4) El efecto de Gris a Verde
5) Guardamos y Publicamos
6) Vinculo del Botón
7) Barra de navegación terminada
--------------------------------------------------------------------------------------------------------
1) Que necesitamos:
Esta vez necesitaremos 2 herramientas de Adobe: Para animar, edición y publicación de los botones usaremos Adobe Flash CS3 profesional
Para modificar las imágenes que tendrán los botones utilizaremos Adobe fireworks CS3:
Necesitamos un pack de iconos para web, yo escogí unos que hace cierto tiempo tenia en mi PC descargados de internet (no me atribuyo nada por ellos) la web de la autoría no la encontré:
--------------------------------------------------------------------------------------------------------
2) Cambiar los colores de los Iconos:
Empecemos por Fireworks. Tenemos unas imágenes en Grises, vamos a pasarla a otro color para más adelante en Flash integrarlas con los efectos de la línea de tiempo de los botones, abrimos Fireworks, y abrimos una de las imágenes del pack de iconos que acabas de descargar. En este caso abriré article.png:

Ya con nuestra Imagen en el Lienzo, aplicamos Zoom de 800%:

Con nuestra imagen ya ampliada con el Zoom procedemos a cambiarle el color:


Utilizare un color verde degrado su código es #4E7C41, cuando selecciones la herramienta de cubo de pintura ve abajo a propiedades y en el selector de color pega el código en el campo de texto:


Exportamos la imagen ya modificada:


--------------------------------------------------------------------------------------------------------
3) Hagamos el Botón:
Si ya tienes todos los requerimientos procedemos a realizar la interfaz grafica del botón, para ello abrimos Flash:








Utilizamos la herramienta de Texto, para nombrar el Botón:


Recuerda que la Fuente se modifica seleccionado el Texto y yendo a la barra de propiedades que esta abajo.
Debemos seleccionar el texto después de haberle aplicado la fuente e ir a propiedades para convertirlo a un texto estático:


Y nos vamos al menú Modificar-> Convertir en Símbolo (comando rápido F8) y seleccionamos Botón y damos clic en Aceptar:

--------------------------------------------------------------------------------------------------------
4) El efecto de Gris a Verde:
Ahora vamos a importar las imágenes de los botones pero verdes, que previamente descargaste o modificaste manualmente, realizamos el mismo proceso de importar a la biblioteca
Ya convertido en botón pasamos a crear un efecto que de la impresión de que cambia de color cuando el mouse pasa sobre el, para esto damos doble clic sobre el botón:

En la línea de tiempo del botón nos ponemos sobre la acción sobre y damos clic derecho e insertamos un fotograma clave:



Ahora cambiaremos el color de las letras, damos doble clic sobre el texto lo seleccionamos y le ponemos el mismo color verde (código de color: #4E7C41). Todo esto lo tuvimos que haber realizado en la acción sobre de la línea del tiempo del botón.
Ahora damos doble clic fuera del lienzo de trabajo (la zona Gris) y tendremos ya nuestro primer botón, puedes probarlo yendo al menú control-> probar película.
--------------------------------------------------------------------------------------------------------
5) Guardamos y Publicamos:Guardamos el documento de flash, para después modificarlo y usarlo como plantilla para los demás botones:

Exportamos el archivo ejecutable SWF para la web:

--------------------------------------------------------------------------------------------------------
6) Vinculo del Botón:
Para agregarle el vínculo al botón debemos seleccionarlo e ir al menú ventana y abrir acciones, y pegar en el asisten este código:
on(release){ getURL("Aquí va el enlace de la pagina"); }
Y estará vinculado.
--------------------------------------------------------------------------------------------------------
7) Barra de navegación terminada:
Repetimos este mismo proceso o usamos el boton que creamos como plantilla para hacer rápidamente los demás . Ya terminados los colocamos en nuestra web y le damos un aspecto mas organizado y moderno.
Compartelo, a alguien le puede servir!
ResponderEliminar