Tutoriales en la Web

Animación de shape de auto utilizando Swishmax

Posteado el 24. Feb, 2010 por Webi in Swishmax

Hoy en este tutorial en la web veremos como darle movimiento a un shape de auto utilizando Swishmax y como importar nuestro dibujo desde Illustrator. Al final podrás descargar el archivo editable y podrás hacer algo como lo que ves aquí. Oprime las flechas para ver la animación.

PASO 1

Crear un nuevo Documento en Blanco de Swishmax

PASO 2

Ir a la ventana Properties y hacer click en el botón Movie Properties y colocarle las medidas de 500 x 500 píxeles a nuestro documento y un frame rate de 25 frames/sec.

PASO 3

Ahora abrimos nuestro documento de Illustrator que contiene nuestro dibujo de nuestro carro y ahora vamos al menú File – Export y escogemos la opción Enhanced Metafile (*.EMF). y le damos en el boton exportar.

Aquí puedes descargar el archivo de Illustrador

En este link puedes descargar el archivo convertido en .EMF

PASO 4

Ahora buscamos donde exportamos nuestro emf y lo arrascamos hacia nuestro documento de Swishmax y nos aparecerá la ventana Import EMF/WMF y escojemos la segunda opción (Import text objects as Shapes).

PASO 5

Ya tenemos nuestro carro exportado en un grupo como se muestra en la figura.

PASO 6

Ahora con nuestra herramienta Subselection (puntero blanco) y con la tecla Shift presionada vamos a seleccionar todos los elementos de una rueda.

PASO 7

Con el comando Ctrl + G vamos a agrupar la rueda y vamos a hacer lo mismo con la otra rueda.

PASO 8

Vamos a seleccionar los dos grupo haciendo click sobre ello y con la tecla ctrl. Presionada vamos darle click derecho Grouping – Group as Movie Clip.

PASO 9

Desplegamos nuestro movie clip y vamos a ir a nuestra Timeline y vamos a agregarle a la primer rueda un tiempo de 20 frames haciendo doble click justamente debajo del numero 20.

PASO 10

Ahora con nuestra herramienta Tranform Tool vamos a girar nuestra rueda en contra de las agujas del reloj 180 grados.

PASO 11

Vamos a agregarle otros 20 frames y vamos a girarla los 180 grados restantes.

PASO 12

Ahora vamos a realizar el mismo movimiento solo que esta vez en sentido contrario y vamos a repetir los pasos anteriores en la otra rueda.

PASO 13

Vamos a nuestro Timeline en el frame 1 y vamos a darle Click derecho sobre nuestro movie clip y vamos a Movie Control – Stop().

PASO 14

Ahora vamos al Frame 41y vamos a darle Click derecho sobre nuestro movie clip y vamos a Movie Control – Stop().

PASO 15

Ahora cerramos nuestro Movie Clip y ahora con la herramienta Pen Tool vamos ad dibujarle una luces a nuestro automóvil siempre observar que nuestro dibujo quede dentro de nuestro grupo Carro.

PASO 16

Darle click derecho Grouping – Group as Movie Clip sobre nuestro shape de la luz para convertirlo en Movie Clip.

PASO 17

Ahora vamos a desplegar nuestro Movie Clip de las luz y seleccionamos el shape y con el comando Ctrl + C y Ctrl + Shift + V vamos a pegar en el mismo lugar nuestra figura, ahora vamos a colocarle un color de relleno amarillo, luego con la herramienta Subselection Tool (puntero blanco) vamos a distoricionar nuestra forma como la que vemos en la figura.

PASO 18

Vamos a aplicarle un gradiente lineal y un color amarillo en ambos lados con la diferencia que en uno de los lados la opacidad será de 0% y en el otro de 100 %.

PASO 19

Ahora vamos a nuestra timeline y vamos a darle click derecho en el primer frame del primer shape y vamos a seleccionar la opción Place.

PASO 20

Darle click derecho en el frame 2 del segundo shape vamos a seleccionar la opción Place.

PASO 21

En el Frame 1 pero en nuestro Movie Clip vamos a darle click derecho y vamos a Movie Control – stop() y lo mismo en el frame 2.

PASO 22

Cerramos nuestro grupo y vamos a agregar nuestro botones, con la herramienta Auto Shape vamos a seleccionar la forma de Flecha y vamos dibujarla en nuestra película, dibujamos dos flechas una señalando hacia la derecha y otra hacia la izquierda.

PASO 23

Seleccionamos el grupo del Carro y vamos a darle click derecho Grouping – Group as Movie Clip.

PASO 24

Desplegamos nuestro movie clip y en nuestra Timeline vamos a agregarle un tiempo de 40 frames y vamos a moverlo hacia la izquierda.

PASO 25

Agregamos un tiempo mas de 40 frames y lo movesmo hacia la derecha al mismo lugar de inicio.

PASO 26

Vamos al Frame 1 y en el Movie Clip vamos a darle click derecho y vamos a escoger la opción Movie Control – Stop(), hacemos los mismo en el frame 40.

PASO 27

Ahora vamos a nuestras flecha vamos a agregar en la flecha de la derecha el siguiente código.

on (press) {
carro.carro.ruedas.gotoAndPlay(2);
carro.carro.luces.gotoAndPlay(2);
carro.gotoAndPlay(2);
}

Y en la flecha de la izquierda este codigo.

on (press) {
carro.carro.ruedas.gotoAndPlay(41);
carro.carro.luces.gotoAndPlay(41);
carro.gotoAndPlay(41);
}

PASO 28

Listo ya tenemos nuestra animación ahora con el comando Ctrl + T para darle una vista previa

Descarga el .swi de Animación de shape de auto utilizando Swishmax

Articulos relacionados:

Tags: Animaciones, Swishmax