Tutoriales en la Web

Movimiento de nubes utilizando Swishmax

Posteado el 24. Feb, 2010 por Webi in Swishmax

Hoy veremos como hacer mover unas nubes que previamente hemos realizado en Photoshop. Aquí te dejamos el swf de lo que podrás hacer al final de este tutoriales en la web. Podrás descargar al final el editable de lo que hagamos aquí, en este caso el .swi Empecemos

PASO 1

Crear un nuevo documento de Swishmax en blanco.

Movimiento de nubes utilizando Swishmax

PASO 2

Ir a la ventana Properties y en el botón Movie Properties Colocarte el tamaño de 500 x 500 píxeles y 25 frames/sec.

Movimiento de nubes utilizando Swishmax

PASO 3

Abrir un nuevo documento de PhotoShop y con la herramienta Brush Tool pintamos de color blanco una nube como se ve en la figura.

Movimiento de nubes utilizando Swishmax

PASO 4

Exportamos como png la nube si fondo como se ve en la figura.

Puedes descargar el .PSD aqui

Descarga aqui también el brush que usamos para el .PSD

Movimiento de nubes utilizando Swishmax

PASO 5

Ahora vamos a arrastrar nuestra nube hacia nuestro documento de Swishmax. En este punto casi no se vera la nube por que como tenemos un fondo blanco pero luego solucionaremos eso.

Movimiento de nubes utilizando Swishmax

PASO 6

Vamos a la ventana Outline y le damos click derecho sobre la nube y vamos a Grouping – Group as Movie Clip.

Movimiento de nubes utilizando Swishmax

PASO7

Desplegamos nuestro movie Clip y vamos a mover nuestra nube fuera de nuestro documento.

Movimiento de nubes utilizando Swishmax

PASO 8

Ahora vamos a nuestra Timeline y vamos a agregarle un tiempo de 300 frames y movemos la nube hacia el lado opuesto de la película.

Movimiento de nubes utilizando Swishmax

PASO 9

Dibujamos fuera de nuestro movie clip un cuadrado con la herramienta Rectangle Tool.

Movimiento de nubes utilizando Swishmax

PASO 10

Vamos a agregarle un gradiente Lineal de color #0099FF celeste y # 99CCFF celeste claro.

Movimiento de nubes utilizando Swishmax

PASO 11

Con la herramienta Fill Transform vamos a girar nuestro gradiente para que nos quede la parte fuerte arriba y la clara abajo.

Movimiento de nubes utilizando Swishmax

PASO 12

Movemos el cuadrado por debajo de todos nuestro elemento, arrastrándolo hacia abajo en la venta Outline.

Movimiento de nubes utilizando Swishmax

PASO 13

Ya tenemos nuestra animación ahora le damos Ctrl + T para ver la vista previa. Podemos agregar más nubes de diferentes formas y tamaños para darle un mejor acabado a nuestra animación.

Descarga el .swi de Movimiento de nubes utilizando Swishmax

Articulos relacionados:

Tags: Animaciones, Swishmax