Crea tu propia Barra Social

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:

Enlace 1 - Enlace 2 - Enlace 3

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:

En el menú de crear Nuevo Documento seleccionamos Archivo de Flash ActionScript 2.0 :

Escogemos las dimensiones de nuestra animación, en la barra propiedades damos clic en tamaño (recuadro en rojo):

Luego nos aparece este recuadro y ponemos en la anchura 322 y la altura 62:

-------------------------------------------------------------------------------------------------

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:

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) :

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:

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.

-------------------------------------------------------------------------------------------------

Mira aquí la barra de navegación ya terminada

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!