Alejandra 8 de mayo de 2008 a las 18.09
   Imprimir artículo
elWebmaster.com

Taller de Flash: Guías de Movimiento


Icono de FlashHasta ahora, en una animación de un objeto los movimientos eran siempre lineales y los fotogramas claves correspondían a un cambio en el sentido del movimiento. Con las guías de movimiento podrás lograr nuevos movimientos.

Las gu√≠as act√ļan como un trazado a trav√©s del cual se mueve nuestro objeto. Puede ser un trazado recto, ondulado o combinado. S√≥lo resta ubicar el elemento dentro del trazado para comenzar la animaci√≥n. ¬ŅEmpezamos?
Sin las gu√≠as de movimiento, animar un elemento X de manera ondulada era ¬Ņimposible?. Un poco… Requer√≠a al menos un fotograma clave nuevo cada vez que el objeto cambiaba de direcci√≥n.

Con las guías puedes generar movimientos curvos de forma muy sencilla:

Guías de movimiento

Como se ve en la imagen, el movimiento se rige en función de la guía. Los círculos en este caso marcan que el centro del objeto estará siempre en contacto con la guía, será como el punto de apoyo. Esto es muy importante porque si separamos el punto de apoyo, la animación tendrá errores.

Pasos para trabajar con guías de movimientos

  1. Convierte tu símbolo en gráfico (F+8).
  2. Selecciona la capa de tu gr√°fico (en este caso la capa Pulpo).
  3. Centro del símboloHaz clic derecho y selecciona la opción Agregar guías de movimiento (Add motion guide). Se generará una capa nueva sobre la capa Pulpo a la que Flash nombrará como Guía o Guide.
  4. Dentro de esa capa crea la línea (con la pluma o pega un vector traído de Ai) a través de la cual se moverá tu símbolo. Puede ser recta, curva, larga, corta, etc.
  5. Por √ļltimo deber√°s mover el objeto de forma que el centro coincida con el inicio del trazado. Te dar√°s cuenta que al mover el s√≠mbolo el centro tender√° a posicionarse sobre el trazado como si fuera un im√°n. En la imagen, el centro dela imagen est√° seleccionado con un c√≠rculo rojo.

Generando la animación

Ahora s√≥lo falta crear la animaci√≥n tal como lo har√≠amos en cualquier otro caso… La √ļnica diferencia esta vez es que el s√≠mbolo deber√° estar ubicado de forma que su centro coincida con la gu√≠a.

  1. En la línea de tiempo, en la capa de tu gráfico (Pulpo) agrega un nuevo fotograma clave, por ejemplo en el fotograma 20.
  2. Ahora, en el fotograma 20 mueve el símbolo justo al final de la guía.
  3. Genera la interpolación de movimiento.

¬°Ya tienes tu animaci√≥n con gu√≠as de movimiento! Ahora probar arreglando los tiempos e incorporando varios movimientos a un mismo objeto dividido en varios s√≠mbolos…

SWF pulpo

Haz clic para ver el SWF (31,1 Kb)

Zip de tutorial

Haz clic para descargar el archivo FLA original comprimido (398 MB)

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (13)

  1. Matias Fontan dice:

    HOLA,

    naa recien me engancho al cursoo! voi en la clase 5 por ahi =(
    espero poder igularlos eh ir a la par de todos!

    mira q te deje preguntas hai dudas xD

    Salu2

    (se me agregas al msn d mas :D)

  2. Danniels Castillo dice:

    Hola,
    Espero estes muy bien
    Felicitaciones por esta clase 15 esta buenisima y te agradesco mucho porque estoy aprendiendo
    INFINITAS GRACIAS….

  3. Sakura dice:

    muchas gracias por el curso ^^ me costó usar las guias de movimiento pero al fin lo logré.

  4. Daniel dice:

    Que quieres que te diga exelente tu curso, muy completo y detallado.
    Gracias por todo y sigue asi que le facilitas la vida a muchos..

  5. Fernanda dice:

    Gracias por este tuto, empiezo hoy a leer todas las clases!!!

    Despues les cuento…. Saludos!!!

  6. tiziana llanos tuesta dice:

    grasias por darmeeeeeeeeeeeeeeeee una buena respuesta y esta muy clara tus respuestasssssssssssssssssssssss

  7. tiziana llanos tuesta dice:

    grasias y saludos para toda la gente de pucallpa y especialmente para mi madre y para el colegipo alfredo vargas querrq que entra a esta pagina por que esta buena

  8. sugeey dice:

    ola… ps yo recien me integro
    pero la primera clase me gusto muxo!!!
    y se q stas clases me ayuden ps
    para seguir aprendiendo cosas como
    stas q son buenisimas aprnder aparte
    q ps me encanta este curso

  9. vanesa dice:

    Muchas gracias ! me sirvi√≥ mucho porque pase a a ver muchos tutoriales pero este me ayudo me resulto s√ļper √ļtil y me pareci√≥ breve y sencillo f√°cil de aplicar

  10. jhoselin dice:

    estubo linda la pagina

  11. silvio dice:

    gracias por la guia me sirvio de mucho y esfacil de poner en practica.

  12. PauloSilva dice:

    Que tal estaba haciendo este tutorial pero necesito que sea una especie de menu circular pero cuando uno se pare sobre el icono haga un stop de todo

  13. Andres Iba√Īez dice:

    gracias me sirvio muchisimo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder