Tutoriales en la Web

Animacion Twitter con Swishmax

Posteado el 08. Jul, 2010 por Webi in Swishmax

Esto es lo que aprenderemos a realizar el dia de hoy

PASO 1
Creamos un nuevo documento de Swishmax en blanco (Blank Movie)

Animacion Twitter

PASO 2
Vamos a la ventana Properties – Botón Movie porperties y en la ventana colocamos los valores que se ven en la imagen.

Animacion Twitter

PASO 3
Con la herramienta Rectangle Tool vamos a dibujar un rectángulo que cubra toda nuestra película.

Animacion Twitter

PASO 4
Ahora vamos a la ventana Properties y a nuestro rectángulo le aplicamos un gradiente radial con los siguientes colores, celestre oscuro (#25AECE), celeste claro (#9FD9DB).

Animacion Twitter

PASO 5
Con la herramienta Pen Tool vamos a dibujar varias líneas con la forma que se ve en la imagen, en la parte inferior dibuje un círculo para darle un mejor efecto.

Animacion Twitter

PASO 6
En la vantana Outline seleccionemos todas las shapes de nuestras líneas y damos click derecho sobre ellas y vamos a la opción Grouping – Group as Shape.

Animacion Twitter

PASO 7
Inmediatamente nos aparecerá la siguiente ventana y le damos click en el botón No.

Animacion Twitter

PASO 8
Ahora en la ventana propeties vamos a colocarle a las líneas un gradiente lineal de blanco con diferentes opacidades.

Animacion Twitter

PASO 9
Ahora arrastramos la imagen del logo de Twitter que trabaje anteriormente en Adobe Photoshop.

Animacion Twitter

PASO 10
Con la herramienta Pen tool vamos a dibujar la forma del Pajaro de Twitter como se ve en la imagen

Animacion Twitter

PASO 11
Duplicamos el ala que se ve en le frente la colocamos de modo que apunte hacia abajo.

Animacion Twitter

PASO 12
En la ventana Outline seleccionamos todos los elementos que forman nuestro pájaro y los agrupamos en un Movie clip.

Animacion Twitter

PASO 13
Desplegamos nuestro movie clip y vamos a la Timeline y a la primera ala le agregamos un movimiento de 6 frames.

Animacion Twitter

PASO 14
En el frame 7 le agregamos un Remove como se ve en la imagen.

Animacion Twitter

PASO 15
Ahora al ala número 2 le agregamos un movimiento de 6 frames a partir del frame 6.

Animacion Twitter

PASO 16
Al ala de atrás le vamos a agregar un movimiento de 6 frames y un remove como se ve en la imagen; en este punto ya hicimos que nuestro pájaro moviera las alas.

Animacion Twitter

PASO 17
Contraemos nuestro Movie clip y ahora seleccionamos las líneas y en la Timeline en el frame 1 le agregamos un Fade in como se ve en la imagen.

Animacion Twitter

PASO 18
Una vez tengamos el Fade in desde el punto rojo lo arrastramos hasta hacerlo llegar al frame 30 es decir nuestro Fade In durara 30 frames.

Animacion Twitter

PASO 19
Ahora seleccionamos la capa del logo y en el frame 31 hacemos click derecho y vamos a la opción Zoom – Zoom In

Animacion Twitter

PASO 20
En la imagen del logo vamos a mover el punto céntrico a la parte inferior de nuestra película como indica la imagen.

Animacion Twitter

PASO 21
Movemos el movie clip del pájaro fuera de nuestra película y en nuestra Timeline nos posicionamos en el frame 10.

Animacion Twitter

PASO 22
Ahora con la ayuda de la herramienta Motion Path Tool vamos a crearle varios movimientos al pájaro como se ve en la imagen.

Animacion Twitter

PASO 23
Duplicamos los pajaritos y alternamos los movimientos para obtener un bonito efecto.

Animacion Twitter

PASO 24
Ahora con la herramienta Text Tool vamos a escribir el texto Sigueme @twitter.

Animacion Twitter

PASO 25
Agregamos a nuestro texto un efecto predeterminado como lo habíamos explicado en tutoriales anteriores.

Animacion Twitter

PASO 26
Ahora solo agregamos el botón de repetir y listo, ya tenemos nuestro efecto terminado.

Animacion Twitter

Descarga el editable

Articulos relacionados:

Tags: Tutoriales Swishmax, Twitter