martes, 6 de julio de 2010

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:



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.

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

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!

3 comentarios:

  1. Dreamwear ??? no hay otra manera de subirlo a la web? o toca descargar este programa.

    ResponderEliminar
  2. ahhh no ya lo vi :P es Dreamweaver muy bueno este tutorial ;)

    ResponderEliminar