Este es mi primer tutorial, con el auge de las redes sociales cree mi propia barra social, en este sencillo tutorial la aprenderemos a hacer con Adobe Flash CS3 Profesional.
Índice:
1) Que necesitamos
2) Abrimos Flash y creamos el documento
3) Importamos las imágenes de los iconos
4) Pasarlas de imágenes a Botones
5) Animamos los botones
6) Los enlaces de los botones
7) Publicamos los botones
1) Que necesitamos:
Si no tienes Flash en nuestra PC, bájatelo de estos blogs, post y páginas:
Si no tienes Flash en nuestra PC, bájatelo de estos blogs, post y páginas:
También las imágenes de los iconos sociales, estas las baje hace algún tiempo de varios post y Blogs, perdí el rastro de los enlaces y la autoría de estas imágenes de todas formas respeto y no me atribuyo nada por ellos:
-------------------------------------------------------------------------------------------------
2)Abrimos Flash y creamos el documento
Ya con el Adobe Flash CS3 funcionado, lo abrimos ya sea en el icono del escritorio o en inicio--> todos los programas-->Adobe Flash CS3 profesional:
Ya con el Adobe Flash CS3 funcionado, lo abrimos ya sea en el icono del escritorio o en inicio--> todos los programas-->Adobe Flash CS3 profesional:
Escogemos las dimensiones de nuestra animación, en la barra propiedades damos clic en tamaño (recuadro en rojo):
-------------------------------------------------------------------------------------------------
3) importamos las imágenes de los iconos
Ya con nuestra área de trabajo definida, exportaremos las imágenes a biblioteca, Archivo-->Importar--> Importar a Biblioteca:
Buscamos las imágenes de los iconos sociales que previamente hemos guardado en la PC y las importamos, teniendo las así:
Arrastramos solamente al campo de trabajo las imágenes que son de tipo mapa de bits (ya que tiene la calidad original), ya teniéndolas así:
Para acomodar los iconos en línea, los puedes arrastrar y el asistente de flash te mostrara unas líneas para alinearlo respecto al primer icono. Si confias más en los números puedes señalar cada icono y en propiedades te aparecerá algo como esto:
Todos los iconos tendrán 30 en el eje Y, cambiara siempre X; siendo el primero 0.0, el segundo 32, el tercero 64, el cuarto 96, etc. Siempre aumentándose en 32 ya que es el ancho de cada icono.
4)Pasarlas de imágenes a Botones
Ya las tenemos perfectamente alienadas en nuestro espacio de trabajo, empezamos a convertir cada imagen a botón. Seleccionamos el primero y nos vamos al menú Modificar--> Convertir en Símbolo (o presionamos F8) seleccionamos a Botón, no cambiamos el nombre que esta por defecto y damos clic en Aceptar:
-------------------------------------------------------------------------------------------------
4)Pasarlas de imágenes a Botones
Ya las tenemos perfectamente alienadas en nuestro espacio de trabajo, empezamos a convertir cada imagen a botón. Seleccionamos el primero y nos vamos al menú Modificar--> Convertir en Símbolo (o presionamos F8) seleccionamos a Botón, no cambiamos el nombre que esta por defecto y damos clic en Aceptar:
Realizamos la misma acción para todos los iconos, cuando tenemos ya todos como Botones empezamos a agregarles un pequeño efecto de movimiento en la línea de tiempo, ¿como hacemos esto?
Le damos doble clic al primero y nos abriera la línea de tiempo interna del botón, ósea sus estados (reposo, sobre, presionado, zona activa) :
Le damos doble clic al primero y nos abriera la línea de tiempo interna del botón, ósea sus estados (reposo, sobre, presionado, zona activa) :
Entonces ya identificando esta línea de tiempo interna, le daremos clic derecho en “sobre” y seleccionamos Insertar fotograma clave:
5) Animamos los botones:
Estando en el fotograma clave creado pasamos al icono que tenemos seleccionado (el único que no esta opaco) y lo movemos hacia arriba, o también podemos ir a propiedades y en el eje Y ponemos -20, para que la línea sea recta y hacemos esto con todos los demás botones así tendremos un efecto uniforme y mejor visualmente:
-------------------------------------------------------------------------------------------------
6) los enlaces de los botones
Ya los tienes animados a todos, prueba por un momento la animación en el menú Control --> Probar Película; ahora vamos a ingresar los vínculos de las redes sociales, seleccionamos uno de los botones en mi caso seleccionare el icono de Twitter , e iré al menú Ventana y selecciono Acciones (o F9):
Te aparecerá el asisten de Scripts y hay pegaremos el siguiente código:
on(release){
getURL("Aqui va el enlace tu perfil en Twiter, Facebook, lastfm, Blogger, etc.");
}
Dentro de las comillas tendrás que poner la dirección de tu perfil en una de estas redes sociales:
on(release){
getURL("Aqui va el enlace tu perfil en Twiter, Facebook, lastfm, Blogger, etc.");
}
Dentro de las comillas tendrás que poner la dirección de tu perfil en una de estas redes sociales:
De esta forma tendremos enlazado el botón con nuestra red social, obviamente no tendrías un perfil en cada una. Puedes usar solamente los iconos que quieras y modificas el tamaño de lienzo para que no te quedes lugares en blanco o faltando espacio.
7) publicamos los botones
Ya tendiendo terminado de enlazar todos los botones exportamos nuestra animación Archivo-->Exportar película--> y la Guardas en tu PC. Te queda como un archivo SWF.
Para subirla a tu web si usas Dreamwear solo tienes que dar insertar-->Media-->Flash y la animación la debes tener en la carpeta del sitio.
Y posteriormente la subes a tu hosting y ya tienes tu propia barra Social.
Este Fue un Sencillo aporte, mi primer tutorial espero que les sea útil para toda la comunidad y pues espero aportes, comentarios y sugerencias para mejorar!
Muchas gracias!
-------------------------------------------------------------------------------------------------
7) publicamos los botones
Ya tendiendo terminado de enlazar todos los botones exportamos nuestra animación Archivo-->Exportar película--> y la Guardas en tu PC. Te queda como un archivo SWF.
Para subirla a tu web si usas Dreamwear solo tienes que dar insertar-->Media-->Flash y la animación la debes tener en la carpeta del sitio.
Y posteriormente la subes a tu hosting y ya tienes tu propia barra Social.
-------------------------------------------------------------------------------------------------
Mira aquí la barra de navegación ya terminada
La quieres descargar para agregar tus enlaces y modificarla, da clic acá
La quieres descargar para agregar tus enlaces y modificarla, da clic acá
Este Fue un Sencillo aporte, mi primer tutorial espero que les sea útil para toda la comunidad y pues espero aportes, comentarios y sugerencias para mejorar!
Muchas gracias!
Dreamwear ??? no hay otra manera de subirlo a la web? o toca descargar este programa.
ResponderEliminarahhh no ya lo vi :P es Dreamweaver muy bueno este tutorial ;)
ResponderEliminarcomo lo subo no seee :/
ResponderEliminar