Las paginas web deben tener funcionalidad, sus contenidos deben ser rápidos de cargar y siempre disponibles; pero la web es grafica y un sitio con mal diseño no será atractivo o cómodo en navegar, algo que ayuda mucho es una barra de navegación o menú de navegación que siempre se repite en toda el sitio y elimina la opción “atrás” de los navegadores. 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:
Utilizamos la herramienta de cubo de pintura:
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:
Con mucho cuidado utilizamos el barril de pintura (recuerden cuando dibujaban con paint) y daremos clic en cada parte Gris del dibujo hasta que nos quede así: 
Exportamos la imagen ya modificada:
Dejas el nombre que tiene la imagen y le agregas – verde, ósea nuestra imagen modificada se llamara article32 – verde:
Realizamos esta misma acción para las demás imágenes que quieras agregar a tu barra de navegación, Guárdalas en una misma carpeta. Se te complica cambiar los colores de las Imagenes, Descárgalos desde Aquí ya terminados--------------------------------------------------------------------------------------------------------
3) Hagamos el Botón:
Si ya tienes todos los requerimientos procedemos a realizar la interfaz grafica del botón, para ello abrimos Flash:
Preparamos nuestra área de trabajo, seleccionamos archivo de Flash action script 2.0: 
Configuramos el tamaño de nuestro espacio de trabajo, 150 X 50 pixeles:
Importamos las imágenes del pack de iconos que previamente has descargado, en este caso importare a la biblioteca algunas con las cuales hare el menú de navegación sobrio: 
Seleccionamos las imágenes y damos clic en Abrir 
Como se realizo en el tutorial crea tu propia barra de social, seleccionaremos solamente las imágenes que son de tipo Grafico, pues tiene mejor calidad: 
Lo arrastramos al área de trabajo (el rectángulo cuadrado blanco) y la posición que tendrá en el eje X será 1.4 y en Eje Y será 8.3: 
Nos quedara algo como esto:
Utilizamos la herramienta de Texto, para nombrar el Botón:
En este caso la imagen (article32.png) corresponde a una hoja con datos, asi que podres llamar a este botón Información:
La fuente del texto la he puesto con Verdana de tipo de letra, tamaño 13, con Negrilla y el color es el mismo que tiene el contorno de la imagen ósea en código es #474747.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:
Ya tenemos la interfaz grafica de nuestro botón, ahora lo convertiremos en Botón para poderlo animar, seleccionamos el texto y la imagen así:
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:
Con el fotograma clave creado lo seleccionamos y procedemos a cambiar la imagen del botón, para esto damos doble clic sobre la imagen así podremos modificarla: 
La parte de texto se desenfoca del área de trabajo, esto sucede por que solo vamos a modificar la imagen .seleccionamos la imagen y la borramos; tomamos la versión de la imagen que esta en verde y la ponemos en el lugar de la que hemos borrado, la posición exacta será 0 en el eje X y 0 en el eje Y ya que ese es el inicio del botón:
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