Comunidad de diseño web y desarrollo en internet online

Tutorial de movimiento de objetos en Flash (motion tweening)

Para empezar vamos a ver lo que todos deseamos cuando iniciamos nuestra aventura en Flash, “el movimiento de un objeto” (esto puede ser cualquier cosa que tengamos sobre el escenario), una bola, un mono, un auto, una imagen lo que sea. Verán una diagonal cada vez que ponga una palabra en ingles/español.

Tenemos dos clases de movimiento las cuales llamaremos cuadro a cuadro / frame to frame, e interpolación de movimiento / motion tween.

Empecemos por la animación cuadro a cuadro:
Este tipo de animación todos la conocemos, es mas o menos como se realizan las caricaturas o dibujos animados, ya ven que para esto realizan un dibujo, y después realizan el mismo dibujo pero un poco diferente, y así sucesivamente, después los hacen pasar todos muy rápido, y esto nos da una sensación de movimiento, bueno pues esto es lo que se hace en flash para hacer una animación cuadro a cuadro, solo que aquí no tenemos que volver a dibujar la misma imagen varias veces, si no, que podemos trabajar con la misma, solo que la iremos modificando poco a poco.

Veamos un ejemplo:
Abran un archivo nuevo en flash, ahora dibujemos un circulo, como se muestra en la imagen, utilizando la herramienta de ovalo (muestro las herramientas en el tutorial de Flash por partes),

A continuación nos dirigimos a la línea de tiempo, e insertamos otro fotograma clave / key frame aparte del que ya esta (ya saben, puede ser con F6, o clic derecho, new key frame), entonces tenemos dos key frames en la línea de tiempo, el primero es donde tenemos la bola como aparecerá inicialmente, ahora damos clic en el segundo frame de modo que quede seleccionado, nos dirigimos a la bola, y la movemos un poco a la derecha, vamos a la línea de tiempo e insertamos otro fotograma clave, y movemos otro poco la bola a la derecha, así repetimos esta acción como unas diez veces, hasta que nuestra bola quede del otro del escenario.
Ahora si, tenemos nuestro primer movimiento cuadro a cuadro, a continuación lo que tienes que hacer es presionar y mantener presionada la tecla Control y presionar enseguida Enter (sin soltar control hasta que ayas presionado enter) para ver tu película en acción, la película va a realizar un ciclo, esto es que tu animación se va a estar repitiendo y repitiendo sin fin, después de ver tu animación, puedes presionar control + W para terminarla, o dar clic en la cruz superior de la derecha (hay dos cruces, es la de abajo).
Espero que te aya funcionado, si tienes alguna duda, no dudes en hacérmela llegar, yo te responderé lo mas rápido que pueda.

Bueno, ahora veamos lo que es La Interpolación de Movimiento:
Si recuerdan el pasado movimiento de la bola, me gustaría, hacer el mismo pero ahora con interpelación de movimiento o motion tween.

Para comenzar vamos a ver primero lo que es un símbolo / symbol , para poder trabajar con interpolación de movimiento en flash tenemos que utilizar símbolos, los cuales podemos crearlos convirtiendo objetos que tengamos en nuestro escenario (de objeto a símbolo), o crearlos vacíos y posteriormente insertarles algo(esto es un poco mas difícil, así es que lo veremos mas adelante), pero vamos a ver los que creamos convirtiendo un objeto en símbolo.

Volvamos dibujar la misma pelota (circulo) pero en una nueva película, al igual que en el ejemplo anterior.

Nota: Cuando nosotros le ponemos Crear interpolación de movimiento / create motion tween, automáticamente Flash nos convierte nuestro objeto (que en este caso es la bola) en un símbolo, pero esto no es conveniente manejarlo así, así es que mejor nosotros crearemos nuestro propio símbolo para poder definirle un nombre y tipo de símbolo que queremos que sea.

Muy bien, ahora que ya tenemos nuestra pelota, utilizaremos la herramienta flecha / arrow tool, y seleccionaremos la pelota dando clic en un lado de ella y arrastrándolo hasta cubrirla de esta manera:

y al soltar el clic del ratón se verá así:
Esto es porque la bola lleva relleno y línea en la orilla, y si solo le damos un clic puede ser que solo seleccionemos uno de los dos.
Bueno, ya que tenemos la bola seleccionada, vamos existen dos maneras de convertirla en símbolo, la primera es ir al menú en la parte de arriba, en la sección de Insertar / Insert , escoges la opción de Convertir en símbolo / convert to symbol, y la segunda forma es la mas fácil, solamente después de que tenemos el objeto seleccionado tenemos que presionar F8 y listo, automáticamente después de cualquier de las dos formas pasadas veremos esta ventana:
Aquí es donde le daremos el nombre a nuestro símbolo, en la parte donde dice “Name”, colocaremos el nombre que le deseamos dar a nuestro símbolo, que este caso será “bola”, dejamos el “Behavior” como esta, en Movie Clip (de esto dependen las propiedades que va a tener nuestro símbolo, pero eso lo veremos mas adelante), “Registration” también lo dejamos como esta, ya que este caso no lo vamos a utilizar, el Registration es como si le pusieras un clavo a tu símbolo, y al momento que quieres modificarlo a escala (el tamaño), es hacia donde va a crecer, crecerá al lado contrario de donde le pones el clavo. Muy bien, ahora después de ponerle el nombre demos clic en OK, y nuestra pelota se verá así:
Si tu pelota se ve de esta manera, ¡Felicidades!, ya tienes un símbolo movie clip.

Nota: Al momento que tu has creado tu símbolo o movie clip, pasa algo que te ayuda de mucho, automáticamente este se agrega a tu librería. ¿Y que es la librería?, pues la librería es una parte de flash, en donde se van guardando todos los símbolos que tu utilizas en la película, de modo, que si necesitas otra pelota, no tengas que volver a dibujarla, si no, solamente tienes que insertarla desde la librería, talvez con la pelota no te parece tan maravilloso, pero que tal si tienes un auto con el cual te tardaste 3 horas dibujándolo, y ahora solo es cuestión de insertarlo de nuevo, pero esto no es todo, además, puedes importar librerías que hiciste en otras películas, lo ves, eso es un auxilio muy grande, pero bueno, lo entenderás mejor cuando empieces a trabajarlo. Y por ultimo, para ver la librería, el acceso rápido es presionando (Control + L).

Muy bien, ahora que ya tenemos nuestro símbolo, vamos a ver la interpolación de movimiento / motion tween:

En este momento tenemos nuestra línea de tiempo de esta manera:

A continuación vamos a dar clic derecho en el frame / fotograma numero 40 de nuestra línea de tiempo, y en el menú contextual que sale, vamos a dar clic en la opción de “insert frame / insertar fotograma”, y nuestra línea de tiempo lucirá así:
Dirigimos el puntero del ratón al primer frame / fotograma, y damos un clic derecho sobre el, en el menú contextual que emerge seleccionaremos la opción de “create motion tween / crear interpolación de movimiento” y la línea del tiempo se rellenara con una línea punteada así:
Ahora ya tenemos nuestra interpolación de movimiento, ya solo tenemos que indicar una cosa, “el movimiento”, y esto se hace de la siguiente manera:

Demos un clic en el frame / fotograma numero 40, de modo que quede seleccionado (esto lo sabemos porque queda sombreado, de color negro).
Ahora nos dirigimos al escenario / stage, y tomamos la bola con el puntero del ratón, la arrastramos hasta el otro extremo del escenario / stage, que quede de esta forma:

Como pueden ver en la línea de tiempo se creó una flecha desde el frame / fotograma numero uno, hasta el numero 40, me supongo que ustedes ya lo habían visto verdad??, bueno, pues esta flecha indica interpolación de movimiento, pero en si ¿que es lo que ocurre con esto?, pues solamente hacemos que flash trabaje por nosotros, lo que pasa con la interpolación de movimiento es que nosotros solamente indicamos el principio y el fin de nuestro símbolo, y FLASH CREA TODOS LOS FRAMES / FOTOGRAMAS INTERMEDIOS, muy bien, para entendernos mejor, ¿por que no dejamos de una vez que corra nuestra película?, vamos, presionemos (Control + Enter) para ver que pasa.

¿Lo lograste?, wow, que bien verdad, pues como ves, espero que ahora me entiendas mejor, cuando me refiero a que flash crea automáticamente los frames intermedios. Una ultima cosa, colócate en frame 20 y arrastra la pelota un poco hacia abajo, veras que se crea otro punto negro (key frame / fotograma clave) en la línea de tiempo, y ahora son dos flechas, muy bien, corre la película para que veas que es lo que pasa. Sigue experimentando con estos movimientos todo lo que quieras, verás que solo depende de ti y tus ideas para darles un buen uso.

................QUHO................

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate