INFOKedadas - FOROS MANUALES Y TUTORIALES: Tutorial Flash: Interpolacion de formas.: Forums

:.:INFOKEDADAS:.: :: Ver tema - Crear una esfera con una trayectoria elíptica
 FAQFAQ   BuscarBuscar   Grupos de UsuariosGrupos de Usuarios   PerfilPerfil   Entre para ver sus mensajes privadosEntre para ver sus mensajes privados   LoginLogin 
     

Crear una esfera con una trayectoria elíptica

 
Publicar nuevo tema   Responder al tema    Foros de discusión -> MANUALES Y TUTORIALES
Ver tema anterior :: Ver tema siguiente  
Autor Mensaje
Lorien
Moderador
Moderador


Registrado: Jul 18, 2004
Mensajes: 2442
Ubicación: Coslada

MensajePublicado: Lun Dic 13, 2004 11:53 pm    Asunto: Crear una esfera con una trayectoria el?ptica Responder citando

ESFERA CON TRAYECTORIA ELIPTICA



ver animacion aki


Para empezar, comenzaremos por generar un documento en blanco por medio de:

Archivo > Nuevo


La animaci?n que pretendemos crear consiste en un movimiento de traslaci?n de una esfera con una trayectoria el?ptica. As? pues, lo primero que debemos hacer es dibujar la esfera. Sin embargo, para empezar con las buenas costumbres, no dibujaremos la esfera directamente sobre nuestro fotograma vac?o, sino que crearemos un s?mbolo en nuestra biblioteca.

Para crear nuestro s?mbolo en la biblioteca:

Ventana > Biblioteca (o bien pulsando la tecla F11)

Llegados a este punto veremos aparecer en la pantalla una ventana como la que veis en la ilustraci?n.





Para insertar el s?mbolo lo podemos hacer a partir del bot?n con una cruz situado en la parte inferior izquierda de la ventana de la biblioteca, o bien ir a la barra de men?s y hacer:

Insertar > Nuevo S?mbolo (o bien pulsando alt+F8)

Una nueva ventana de dialogo aparece ante nuestros ojos (ver figura abajo). En ella podremos definir el nombre (para este caso la llamaremos esfera) y el comportamiento (elegiremos gr?fico). y pulsamos aceptar.





Para dibujar la esfera vamos a servirnos de las herramientas de dibujo. Comenzamos por elegir la herramienta ?valo, representada por un c?rculo. Una vez elegida nos colocamos en el escenario y, apretando la tecla may?sculas y pulsando el bot?n izquierdo del rat?n, desplazamos el rat?n hacia cualquier direcci?n. Veremos aparecer un c?rculo con los colores definidos en el apartado colores de la barra de herramientas.

Ahora, para darle la sensaci?n de perspectiva a la esfera, vamos a colorearla en su interior usando un degradado radial. Para ello, visualizamos el panel mezclador de colores:

Ventana > Mezclador de color (o bien pulsando mayus+F9)

Ahora, veremos una ventana como la de la figura:




En este panel, seleccionaremos en el men? desplegable la opci?n Radial. Veremos como la ventana cambia de aspecto pareci?ndose a la imagen siguiente:





Lo que haremos es seleccionar dos colores (los que os gusten) para cada una de las casitas que se encuentran en la parte inferior de la barra de degradado. Para ello, clicaremos sobre cada una de las casitas y a continuaci?n, elegiremos un color en la paleta desplegable situada en la parte superior izquierda del panel. Repetiremos el proceso para la otra casita.

Una vez definido el degradado, podemos seleccionar la herramienta cubo de pintura y clicaremos con el bot?n izquierdo sobre la parte rellena del c?rculo. Si todo funciona correctamente, deberemos obtener una esfera similar a la de la figura mostrada:






Sugerimos repetir este proceso de relleno del c?rculo con un degradado jugando con las opciones que nos ofrece el panel mezclador de colores. Podemos ver que es posible a?adir m?s casitas para conseguir un efecto de coronas o bien cambiar el tipo de degradado a lineal y m?s cosas...

Despues alineamos la esfera con la cruz que define el punto de alineamiento del s?mbolo. Para ello, elegiremos la herramienta flecha y seleccionaremos la esfera desplazando el rat?n al mismo tiempo que mantenemos pulsado el bot?n izquierdo. Para mover la esfera lo haremos del mismo modo, desplazando el rat?n hasta el lugar apropiado manteniendo pulsado el bot?n izquierdo. Podemos precisar el desplazamiento usando las flechas del cursor que nos permitir?n desplazarnos p?xel por p?xel.



Ahora vamos a empezar a trabajar con la animaci?n. Lo primero que debemos de hacer es salir del espacio de creaci?n del s?mbolo y colocarnos en el escenario de la animaci?n. Para ello, pincharemos en la palabra Escena 1 que aparece en la parte superior izquierda del escenario.
Ya dentro del escenario, vamos a incluir en el primer fotograma el s?mbolo que acabamos de crear. Antes de nada, iremos a la biblioteca (F11) y seleccionaremos el s?mbolo esfera. A continuaci?n, pincharemos y arrastraremos el s?mbolo hasta el escenario.

Deber?a quedar algo asi:




Pasemos ahora a estudiar el tipo de animaci?n que vamos a hacer. Como hemos dicho, pretendemos simular un movimiento de traslaci?n de la esfera con una trayectoria el?ptica, dando la impresi?n de un c?rculo en perspectiva. Esta animaci?n podr?a ser definida por tres im?genes clave:
La esfera situada en primer plano al principio de su movimiento.
La esfera situada en segundo plano a mitad de su ciclo de traslaci?n.
La esfera llegada al final del ciclo, aproximadamente en la misma posici?n que la primera esfera.
Podemos ver cuales serian estas tres im?genes clave en el siguiente esquema:







De modo que ya disponemos de la primera imagen clave. Ahora, introduciremos la segunda en el lugar aproximado que le corresponder?a. Para ello llevamos a cabo las siguientes operaciones:

Insertamos una imagen clave en la capa 1, m?s o menos sobre el fotograma 15.
Para ello nos situamos en la capa 1, en el fotograma 15. Pulsamos el bot?n derecho del rat?n y seleccionamos Insertar fotograma clave. Podemos observar como, una vez realizada la operaci?n, un nuevo c?rculo aparece en ese fotograma, indicando la presencia de otra imagen clave que ser? id?ntica a la imagen de nuestro primer fotograma..


Modificamos este nuevo fotograma clave.
Nos situamos en este fotograma, seleccionamos el objeto y modificamos su posici?n y tama?o. La posici?n la modificamos empuj?ndolo hacia arriba con la tecla del cursor o bien pinchando y arrastrando, como ya hemos visto antes. Para modificar el tama?o, seleccionaremos la herramienta transformaci?n libre.
Una vez hecho esto, seleccionaremos la opci?n escalar, que nos permitir? bloquear las proporciones del objeto y reduciremos el tama?o de la esfera pinchando y arrastrando en uno de los puntos de las esquinas de la marca que rodea la esfera.
La figura siguiente os ilustra la tarea de redimensionamiento y os da una idea del aspecto que debe tener el fotograma una vez modificado:





A continuaci?n vamos a crear el tercer y ultimo fotograma clave, correspondiente al momento en que la esfera esta a punto de completar el ciclo. Este fotograma deber?a en principio parecerse al primero con la diferencia de que la esfera no ha llegado a completar el ciclo, sino que esta de cera de conseguirlo. Realizaremos los siguientes pasos:
Insertamos un fotograma clave vac?o en el fotograma 29 (Insertar>Fotograma clave vac?o)
Volvemos al fotograma 1 y lo copiamos (Edici?n>copiar)
Volvemos al fotograma 29 y lo pegamos (Edici?n>pegar)


De modo que ya disponemos de las im?genes claves que definen la animaci?n. Lo que necesitamos ahora es definir una trayectoria el?ptica que las una. Esta trayectoria ha de ser definida en una capa especial llamada gu?a de movimiento.
La gu?a de movimiento no es m?s que una capa que contiene una l?nea sobre la cual podemos colocar nuestros objetos de manera a que dicho objeto se mueva de una posici?n a otra respectando la trayectoria definida por esta l?nea.

En nuestro caso, dado que lo que buscamos es una trayectoria c?clica, para no confundir al objeto definiremos dos l?neas distintas, correspondientes a cada media vuelta.
Si no tom?semos esta precauci?n, el objeto tendr?a dos posibles sentidos para llegar a una misma posici?n.

Pasemos ahora a definir estas l?neas:

Creamos la gu?a de movimiento. Para ello, seleccionamos la capa 1 (o donde hayamos creado nuestras im?genes clave) y hacemos Insertar>gu?a de movimiento.
Constatamos la aparici?n de una nueva capa llamada Gu?a: Capa 1.




Seleccionamos el primer fotograma de esta nueva capa y dibujamos una elipse sin relleno. Podemos servirnos de la herramienta ?valo utilizada para la creaci?n de la esfera, pero esta vez no elegimos ning?n color en la paleta de relleno (la ausencia de color viene simbolizada por un cuadro blanco cruzado en diagonal por una banda roja).
El resultado es una figura semejante a esta:





Con la herramienta lazo, seleccionamos la mitad (izquierda o derecha, como prefieras) y la cortamos con (Edici?n>cortar). El resultado es la obtenci?n de una semielipse.

Nos colocamos en el fotograma 15 de esta misma capa y lo convertimos en un fotograma clave vac?o (Insertar>fotograma clave vac?o)

Pegamos la otra media elipse, que se quedar? descolocada con respecto a la otra.
Para ajustar las semielipses podemos por supuesto hacerlo a ojo pivotando entre el fotograma 14 y el 15 hasta que las dos se solapen correctamente.
Sin embargo, una opci?n m?s interesante es la de usar le edici?n simultanea de varios fotogramas. Esta opci?n, disponible en la l?nea de tiempo, nos permite la visualizaci?n y edici?n simultanea de varios fotogramas.
De este modo, podemos seleccionar una de las semielipses y moverla por medio de los cursores hasta hacerla coincidir con la otra media. Deseleccionaremos este modo una vez finalizada la operaci?n.




Ahora podemos comenzar a definir la primera media vuelta de la esfera. Para generar el movimiento existente entre los fotogramas clave, hemos de crear lo que se denomina una interpolaci?n de movimiento.
Esto es algo que Flash calcula autom?ticamente, evit?ndonos la modificaci?n sistem?tica de cada uno de lo fotogramas intermedios que forman parte de la secuencia. Para crear la interpolaci?n de movimiento, seleccionaremos los fotogramas de la capa 1y haremos:

Insertar>Crear interpolaci?n de movimiento.

Hecho esto, podremos constatar la aparici?n en la capa 1 de una flecha entre el fotograma 1 y 15 y otra entre el 15 y el 29. Si ahora nos colocamos en alguno de los fotogramas intermedios, veremos que la imagen que contiene no es la misma que la de los fotogramas clave 1 o 15, sino un intermedio de posici?n y tama?o entre ellas.
Como puede verse, el objeto se desplazar?a desde 1 hasta 15 y seguidamente de 15 a 29 siguiendo una l?nea recta. Para obligarlo a adoptar una trayectoria el?ptica como la definida en la gu?a de movimiento, tendremos que localizarnos en cada una de las im?genes clave (1, 15 y 29) y , usando la herramienta flecha, colocaremos el centro del objeto sobre la l?nea de la elipse en cada una de las extremidades correspondientes.

Podemos comprobar que el objeto esta bien colocado en la trayectoria si al intentar moverlo fuera de la l?nea, vuelve a colocarse autom?ticamente sobre ella.

Ya solo nos queda ocultar la capa de la trayectoria. Esto puede hacerse seleccion?ndola y pinchando sobre el punto que se encuentra bajo el ojo. El punto se convierte en una cruz, que significa que la capa no es visible, aunque por supuesto sigue existiendo.

Ya tenemos construida la animaci?n. Para probarla r?pidamente podemos hacer:

Control>Probar escena (o con el teclado control+intro)


y ya teneis vuestra animacion...

Aki pongo un archivo fla para que veais como quedaria echo.. Descargar

parece una tonteria pero es una cosa que luego usareis pra otras muchas animaciones icon_razz.gif

besitos icon_wink.gif
_________________

Pincha si kieres k te Muerda!!
Volver arriba
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
Seal_Bcn
Administrador
Administrador


Registrado: Nov 25, 2003
Mensajes: 3192
Ubicación: Barcelona

MensajePublicado: Mar Dic 14, 2004 12:32 am    Asunto: Responder citando

NO veas!!!! icon_biggrin.gif

Muy bien explicado campeonaaaaaaaaaaaaaaaaaaaaaa icon_biggrin.gif!!!! Asias por el manual icon_wink.gif Fijo que a mas de un adicto al flash le servira... lo cual me recuerda... coof coof coof

TENEMOS QUE HABLAR de un par de trabajillos que necesitamos en el portal xD juasjuasjuasjuas icon_wink.gif

Saludos
Volver arriba
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor MSN Messenger
Lorien
Moderador
Moderador


Registrado: Jul 18, 2004
Mensajes: 2442
Ubicación: Coslada

MensajePublicado: Mar Dic 14, 2004 5:35 pm    Asunto: Responder citando

tenia pensado poner ejercicios asi sencillitos en plan manual pero a la vez paso a paso explicado para k prueben a hacerlos y nose... lo mismo asi se pican no?

pero si ya me han contado un poco lo k tienes en mente icon_razz.gif y yo creo que pueden salir cosas muy wapas... a ver si consigo hablar con los demas y nos ponemos a ver que sale icon_biggrin.gif

besitos icon_wink.gif
_________________

Pincha si kieres k te Muerda!!
Volver arriba
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
Mostrar mensajes de anteriores:   
Publicar nuevo tema   Responder al tema    Foros de discusión -> MANUALES Y TUTORIALES Todas las horas son GMT + 1 Hora
Página 1 de 1

 
Cambiar a:  
Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro