Animacion swishmax Yahoo

Posteado el 20. Dec, 2010 por tuto in Desarrollo Web

Yahoo está celebrando la navidad con un pinguino patinador aquí les dejamos como hacerlo en Swishmax

PASO 1
Esta animación requiere de mucha paciencia pero el resultado final vale la pena.
Creamos un nuevo documento de Swishmax en blanco (Blank Movie).

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

PASO 3
Con la herramienta Pen tool vamos a crear la forma que tendrá nuestro hielo.

PASO 4
Sobre la forma dibujamos un rectángulo con un gradiente de celeste (#A9DA) al 100% y celeste (#A9DA) al 50%.

PASO 5
Dibujamos algunos rectángulos con un gradiente lineal de blanco al 0% a blanco 100% a blanco 0%.

PASO 6
En la ventana Outline seleccionamos todas las formas y las agrupamos en un Movie Clip.

PASO 7
Vamos a la ventana Properties y al Movie Clip lo renombramos hielo y marcamos la opción Use bottom object as mask.

PASO 8
Ahora dibujamos el logo de Yahoo! fuera del Movie Clip y le agregamos algunos detalles como nieve y algunas esferas navideñas.

PASO 9
Vamos a dibujar a un pingüino con un gorrito, bufanda y patines de hilo como se ve en la imagen.

PASO 10
Dibujamos al mismo pingüino en la secuencia siguiente con los brazos extendidos la cabeza hacia el frente una pierna hacia atrás.

PASO 11
Ahora dibujamos a otro pingüino como viendo hacia atrás, como se ve en la imagen.

PASO 12
Ahora duplicamos el pingüino que dibujamos en la paso 10 y le damos un flip horizontal para que vea hacia la izquierda.

PASO 13
Dibujamos todos los pingüinos que necesitamos para realizar nuestro movimiento.

PASO 14
Ahora en la Timeline dibujo del segundo pingüino le agregamos un movimiento de 25 frames para que se traslade hacia el lado derecho y parezca que se desliza sobre el hielo.

PASO 15
Para darle un mejor efecto duplicamos el logo de Yahoo! y lo colocamos sobre los pingüinos y coordinamos el movimiento para que aparezca justo cuando el pingüino regresa y parecerá que el pingüino pasa por detrás de nuestro logo.

PASO 16
Dibujamos todos los pingüinos que necesitemos para lograr nuestros movimientos y una animación más exacta.

PASO 17
Listo al finalizar nuestra animación deberíamos obtener un efecto como el que se ve en la imagen.

Descarga el editable de animación Yahoo