Innterpolacion de movimiento, formay guias en flash

AREA DE TRABAJO

Bien esta es el area con la que trabajaremos durante este tutorial y muchos mas que ire posteando, solo cliquen y amplearan la imagen, veran las diferentes areas principales que usa flash.

ALGUNOS BOTONES MAS USADOS

• Este boton se encuentra en la linea de tiempo y sirve para crear nuevas capas dentro de nuestra animacion.
• Agrupa capas dentro de una carpeta.
• Este boton se encuentra en el area de propiedades y sirve para cambiar las dimensiones de nuestra pelicula.
• Se encuentra en propiedades y con este boton cambias el fondo de la pelicula.
• Se encuentra en propiedades y es la velecidad con que se reproduce la pelicula. (20 fotogramas por segundo).
• Ctrl+Enter: Funciona para probar la pelicula y crear un archivo swf.
• F5:Inserta un fotograma.
• F6:Inserta un fotograma clave.
• F7: Inserta un fotograma clave en blanco.

INTERPOLACION DE MOVIMIENTO

Paso 1Vamos a la línea de tiempo y nos posicionamos en el fotograma uno, presionamos F6 para crear un fotograma clave, ya creado nuestro fotograma clave tomamos el pincel y a dibujar, nuestro fotograma clave debe de tener un punto negro.

Paso 2 Nuestro dibujo debe de estar agrupado para esto da clic en el fotograma clave (para seleccionar todo lo que dibujaste) y ve al menu modificar>agrupar o modify>group , tienes que hacer esto siempre que vayas a hacer una interpolación de movimiento, si no agrupas no funcionara.

Paso 3 Ya agrupado nuestro objeto, nos posicionamos en el fotograma 30 > clic derecho > insertar fotograma clave o Insert Keyframe.

Paso 4Ya insertado nuestro fotograma clave, solo movemos nuestro obejto hacia abajo, esto se hace para que el objeto recorra la trayectoria de arriba-abajo, tambien puedes agrandar el objeto en el segundo fotograma clave o grirarlo, solo da clic derecho en el objeto>free transform o transformación libre.

Paso 5Seleccionamos en nuestra línea de tiempo nuestros fotogramas y nos vamos a la seccion de propiedades ahora solo seleccionamos Motion o movimiento que se encuentra en tween, si has echo todo bien nuestros fotogramas se veran asi: y si te quedo asi seguramente no agrupaste uno o dos de los objetos, o estas intentando hacer la interpolación con dos objetos diferentes.

Listo!! da ctrl+ENTER, esto es una interpolacion de movimiento y sirve para poder crear movimientos de lado a lado de arriba-abajo de chico-grande, de horizontal-vertical; si quieres explotar al maximo estas funciones, utiliza free transform solo da clic derecho en el area de trabajo y busca free transform o transformacion libre, para poder girar el objeto agrupado o bien para hacerlo mas chico o grande), vale ahora haremos la interpolación de forma :

INTERPOLACION DE FORMA

Paso 1De nuevo vamos a la línea de tiempo y nos posicionamos en el fotograma uno, presionamos F6 para crear un fotograma clave, ya creado nuestro fotograma clave tomamos el pincel y a dibujar, al terminar el dibujo nuestro fotograma clave debe de tener un punto negro, el dibujo que hicimos no se va a agrupar.

Paso 2 Nos posicionamos en el fotograma 30 damos clic derechos e insertamos un fotograma clave en blanco.

Paso 3 Ya tenemos nuestro fotograma clave en blanco ahora dibujaremos en el, este nuevo dibujo no se agrupara, en la interpolacion de forma nuestros dibujos no deben de estar agrupados solo verifica que tengn ountos cuando esten seleccionados.

Paso 4Seleccionamos en nuestra línea de tiempo nuestros fotogramas y nos vamos a la seccion de propiedades ahora solo seleccionamos Interpolacion>Forma ó Tween>Shape , si has echo todo bien nuestros fotogramas se veran asi: y si te quedo asi seguramente agrupaste uno o dos de los objetos.

Nota: Si tienes una imagen jpg, png, o gif y quieres hacer este efecto tienes que dar clic derecho a la imagen>apartar o break apart, has esto hasta que la imagen este punteada. Listo!! da ctrl+ENTER, esto es una interpolacion de forma sirve para pasar de un estado a otro.

Descarga todos los archivos utilizados

En los dos tutoriales anteriores hemos aprendido hacer interpolaciones de movimiento clásicas e interpolaciones de forma, con ello ya podemos hacer que se mueva y se modifique cualquier objeto de nuestro escenario, teniendo en cuenta los requisitos de cada una de las interpolaciones. Ahora bien, en las interpolaciones de movimiento clásicas vimos como dado un punto inicial y un punto final podíamos hacer que un objeto se desplazara del punto inicial hasta el final, siempre en línea recta, pero ¿y si queremos que el objeto en cuestión realice una trayectoria estblecida por nosotros?. Ahí es donde entran en juego las guías, así que hoy vamos hacer que dado un movieclip, se desplace por donde nosotros digamos. Empezamos

Abrimos el Adobe Flash CS5 y creamos un nuevo documento de ActionScript 3.0. Ahora en el escritorio, necesitamos crear el objeto que vamos a desplazar, en nuestro caso vamos a crear un avión muy simple con las herramientas de dibujo que Adobe Flash CS5 nos proporciona, al tiempo que es una buena forma de familiarizarse con dichas herramientas para aquellas personas que estéis empezando con el programa.

Como véis, hemos creado nuestro avión en una capa vacía, ahora lo que hacemos es convertir el avión en un movieclip tal y como hicimos en el primer tutorial, para ello, hemos de seleccionar todo el avión y bien pulsar la tecla F8, ponerle un nombre, (en nuestro caso avion) y seleccionar Clip de Película en el desplegable de tipo o bien por el menú Modificar -> Convertir en símbolo.

Una vez tenemos el avion convertido en un movieclip, vamos a crear la guía por la que se desplazará el avión. Para ello creamos una nueva capa pulsando el botón de nueva capa

Una vez creada la nueva capa, la seleccionamos como activa (haciendo clic sobre ella) para que todo lo que creemos en el escritorio a partir de ahora se haga sobr esa capa y de esta forma mantener separado lo que es el avion de la guía. Familiarizrse con las capas es muy importante ya que permite tener todo el contenido de nuestro documento bien ordenador y así que unas cosas no interfieran con otras. A las capas se les puede cambiar el nombre, haciendo doble clic sobre su nombre actual (Capa1, Capa2, etc) podremos editar dicho nombre. En nuestro caso, le vamos a poner a la Capa1 (la que contiene el avión) Avión y a la Capa2, la que contendrá la guía, le vamos a poner Guía Avión.

Vamos a dibujar el camino que queremos que recorra el avión, para ello utilizamos la herramienta lápiz de las herramientas de Adobe Flash CS5. Utilizamos esta herramienta por que nos permite realizar trazos libremente, pero podríamos utilizar cualquier otra herramienta que genere una linea como el pincel. Un aspecto importante a tener en cuenta es que el dibujo del camino lo tenemos que hacer sin soltar el ratón ya que sino, estaríamos creando dos caminos aunque los uniéramos después.

Una vez dibujado el camino, tenemos que modificar el tipo de la capa en la que hemos dibujado el camino, y definirla como capa guía. Para ello, hacemos clic con el botón derecho del ratón sobre la guía en cuestión y las opciones que nos aparecen, seleccionamos guía. Una vez hecho esto, veremos que el icono que hay al lado del nombre de la guía ha cambiado , esto significa que dicha capa ahora es una capa guía y por lo tanto cuando publiquemos la película, no aparecerá, es una de las ventajas de las capas guías, ya que nos permiten tener objetos en el escenario que únicamente sirven de referencia ya que al final no serán visibles.

Ahora bien, para que nuestro avión pueda utilizar la guía hemos de arrastrar la capa del avión hacia la capa guía y soltar, quedando nuestras capas de la siguiente forma:

Una vez tengamos incoporada la capa del avión a la capa guía, ya solo nos queda crear una interpolación de movimiento clásica como la que hicimos en el primer tutorial, por la tanto lo voy a explicar de forma rápida. Hacemos clic con el botón derecho en el fotograma 48 (para que duré dos segundos) y seleccionamos la opción “Insertar Fotograma Clave”. Antes de crear la interpolación hemos de definir el punto inicial y final de la interpolación a través de la guía, entonces lo primero que debemos hacer es en el fotograma 48 de la Capa Guía Avión, hacemos clic con el botón derecho del ratón y seleccionamos “Insertar Fotograma” de esta forma, la guía estará accesible en el fotograma 48 también.

Ahora para crear el punto inicial, volvemos al fotograma 1 y desplazamos el avión hasta el principio del camino que hemos creado y para crear el punto final, vamos al fotograma 48 y desplazamos el avión hasta el final del camino.

Ya solo resta hacer clic con el botón derecho del ratón sobre cualquier frame anterior al 48 en la capa del avión y selección “Crear interpolación de movimiento clásica” y comprobar el resultado probando la pelicula, que os recuerdo que lo podéis hacer o bien pulsado la tecla Control (los de Mac Opción) y al mismo tiempo la tecla Intro o bien a través del menú Control -> Probar Película -> Probar.