Animar personaje de la web en Flash

7
Lic. Victor Hugo Valenzuela Valencia Animación Educativa Octubre 2012 www.guaymax.com Animar personaje de la web DISTRIBUIR EN CAPAS 1. Crear personaje en las páginas PAGINAS PARA CREAR PERSONAJES http://www.juliusdesign.net/mii.swf http://marvel.com/games/play/31/create_your_own_superhero http://www.xiibi.com/quiero-xiibi http://www.heromachine.com/heromachine-2-5-character-portrait-creator/ http://www.sonicgratis.com/pagina/912 (niños) http://www.heromachine.com/heromachine-2-5-character-portrait-creator/ http://www.sonicgratis.com/pagina/907 (niñas) http://unique.rasterboy.com/ 2. Guardar el personaje o capturar con tecla IMPR PANT PET SIS del teclado 3. Pegar en flash

description

Tutorial para crear animación por partes

Transcript of Animar personaje de la web en Flash

Page 1: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

Animar personaje de la web

DISTRIBUIR EN CAPAS

1. Crear personaje en las páginas PAGINAS PARA CREAR PERSONAJES

http://www.juliusdesign.net/mii.swf

http://marvel.com/games/play/31/create_your_own_superhero

http://www.xiibi.com/quiero-xiibi

http://www.heromachine.com/heromachine-2-5-character-portrait-creator/

http://www.sonicgratis.com/pagina/912 (niños)

http://www.heromachine.com/heromachine-2-5-character-portrait-creator/

http://www.sonicgratis.com/pagina/907 (niñas)

http://unique.rasterboy.com/

2. Guardar el personaje o capturar con tecla IMPR PANT PET SIS del teclado

3. Pegar en flash

Page 2: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

4. Separar (clic derecho break apart)

5. Borrar todo excepto el personaje, es importante cambiar el color de fondo para no perder

detalles

Page 3: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

6. Dividir el cuerpo en Cabeza, torso, brazos y piernas, utiliza lazo o líneas para separar, el

resultado variará de acuerdo al personaje:

7. Editar las partes que no parecen completas, en este caso el torso y los brazos ya que de

esa manera afectaría a mi animación.

Page 4: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

8. Cada parte será un símbolo

9. Distribuir en capas: significa que cada símbolo estará en una capa diferente

a. Selecciona todo

b. Clic derecho distribute to layers

Page 5: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

10. Cada capa tendrá el nombre del símbolo, si encuentras capas de más habrá que

eliminarlas y quedarse con las útiles.

ANIMAR AL PERSONAJE

1. Volver a armar el personaje

2. Ordenar capas

Ordeno las capas de la siguiente

manera, con el fin de que la cabeza sea

la cima y enseguida el torso, los brazos

y piernas estarán detrás.

Page 6: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

3. Animación del brazo

a) Definir tiempo f6 en el fotograma 6 de la capa brazo y f5 en las demás

b) Utilizando la herramienta de Free transform tool, coloca el punto blanco en la parte

superior del brazo y gíralo (por fuera) que quede en esta posición

c) Inserta otro fotograma clave ahora en el 12, en la capa brazo y en las demás f5. Regresa el

brazo a su lugar. NOTA: el punto blanco debe estar en el hombro en todos los

fotogramas.

d) Crea interpolación de movimiento en el 1 y 6, verifica el resultado

Page 7: Animar personaje de la web en Flash

Lic. Victor Hugo Valenzuela Valencia Animación Educativa

Octubre 2012

www.guaymax.com

4. Animación de cabeza

a) Insertar fotogramas clave f6 en el 6 y 12 de la capa cabeza

b) En el fotograma 6 bajar la cabeza un poco, puedes hacerlo presionando SHIFT y la tecla de

dirección hacia abajo.

c) Crea TWEEN MOTION al 1 y al 6

5. Animar piernas/pies

a) Inserta fotogramas clave en el 6 y 12 en las capas de las dos piernas

b) En el fotograma 1 la pierna izquierda estará arriba y la derecha abajo, en el 6 al revés y en

el 12 igual que en el 1.

1 6 12

c) Crea TWEEN MOTION y el resultado da el efecto de caminar.

Los movimientos anteriores son una referencia para comenzar a animar tus propios personajes,

variará de acuerdo a los tiempos y escenarios.