5.Animación con Flash (5) Guías de movimiento

Ya hemos visto como las interpolaciones de movimiento desplazaban objetos en línea recta. Puesto que esto supone una cierta limitación, Flash 8 incluye la Guía de movimiento.

Una guía de movimiento es una capa especial que marca una trayectoria para los objetos de la capa a la que afecta, para que dichos objetos la sigan, durante el movimiento. Esta capa es invisible durante la reproducción, y en ella podemos dibujar con el lápiz la trayectoria que queramos que siga nuestro objeto.

Crear un movimiento mediante esta técnica es bastante sencillo, basta con crear una interpolación de movimiento en una capa, seleccionarla (debemos asegurarnos de esto para evitar que la guía se asocie a otra capa), y colocar el símbolo del último fotograma al final del trazado que realizaremos previamente en la capa de la guía. No es necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente.

Vemos como la capa a la que se asocia la guía aparece debajo y alineada a la derecha.

Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que deberás hacer es crear una animación de movimiento, para ello:

Crea un fotograma clave pulsando F6 e inserta en él el símbolo que quieres que realice el movimiento.

Crea un nuevo fotograma clave para marcar la duración de la animación, por ejemplo, si creaste el primer fotograma en la posición 5, crea el nuevo en la posición 25, así tendrás una animación que durará 20 fotogramas.

Selecciona todos los fotogramas que intervengan en la animación y haz clic derecho sobre uno de ellos en la Línea de tiempos. Selecciona la opción Crear interpolación de movimiento.

Una vez creada la interpolación y con la capa seleccionada pulsa el botón Añadir guía de movimiento. Se creará una nueva capa asociada a aquella donde tienes creada la animación.

Ahora el procedimiento es fácil, selecciona la herramienta Lápiz y dibuja en la capa guía el recorrido que debe seguir el símbolo.

Cuando lo hayas creado selecciona el último fotograma de la animación y coloca el símbolo en su punto final. Recuerda que el símbolo debe estar siempre en contacto con la línea de guía tanto en el primer como último fotogramas.

Aquí se puede ver cómo realizarlo.

Efectos sobre la Interpolación de Movimiento: Orientar según trazado

Para describir todos los efectos que podemos aplicar sobre una interpolación de movimiento previamente creada, sin necesidad de tocar ningún símbolo, nos centraremos en el Panel Propiedades, cuando seleccionemos un Fotograma que presente animaciones de Movimiento, los atributos de la animación a modificar aparecerán en este Panel. 

Orientar según trazado: Si activamos esta casilla, cuando la interpolación sobre la que actuamos es una interpolación por guía de movimiento, Flash hará que el símbolo tome la dirección de la guía, rotando para orientarse en la misma posición que adopta la línea.

EJERCICIOS con Guías de Movimiento

1. AVIÓN en vista lateral haciendo un loop (girando sobre sí mismo)

2. AVIÓN O COCHE en vista cenital (desde arriba) que recorre circuito o elipse

Si eliges un coche, dibuja el circuito en otra capa, pues la guía es invisible

3. COCHE en vista lateral subiendo y bajando una colina

deberás dibujar otra capa con la colina, y la guía debe coincidir con la silueta de la colina

En los tres casos habrá que marcar la casilla "Orientar según trazado"

BUSQUEDA DE IMÁGENES:

Queremos imágenes sin fondo, que no tengan un recuadro, sea un paisaje o un color. Para eso buscamos imágenes prediseñadas (una opción de Google Imágenes), o poniendo en la búsqueda gif o png, que son formatos de imagen que admiten transparencia, y a veces se usa para guardar imágenes sin fondo.

Si no hemos encontrado lo que queríamos sin fondo, la guardamos con fondo y se lo quitamos en Flash

COMO QUITAR EL FONDO A UNA IMAGEN

Preferentemente que sea un fondo de un solo color

- la importamos a la biblioteca

- la añadimos al escenario

- la seleccionamos y ... Modificar/Trazar mapa de bits/Aceptar

- se habrán creado diferentes zonas con cada color: hacemos clic en ellas se pueden borrar las que no interesen

- una vez que hemos eliminado el fondo seleccionamos todo y clic derecho/Convertir en símbolo

Ya podemos usar nuestro objeto sin fondo.

4.Animación con Flash (4) Música y sonidos

Podemos usar audio de dos formas:

1. MÚSICA: Como música de fondo de animaciones o juegos, pueden ser canciones o temas enteros, aunque es usual editarlos, para que duren lo mismo que la animación, o, en el caso de juegos o animaciones en bucle (sin fin), seleccionar un fragmento de una música para que se repita indefinidamente.

2. SONIDOS: Para asociar a Acciones (por ejemplo el sonido del clic,al pinchar un botón) o para sonorizar las animaciones con efectos de sonido realistas (por ejemplo, sonidos de pasos cuando un personaje anda, golpes cuando algo cae, etc.)

CÓMO AÑADIR MÚSICA Y SONIDOS EN FLASH

A) ¿DÓNDE ENCUENTRO MÚSICA Y SONIDOS?

Primero hay que encontrar la música o el sonido que queremos usar, quizá editándolo previamente (en Vegas, por ejemplo) para que empiece y termine exactamente donde nos interese).

La música ya sabéis:

- la traes tú en tu pendrive o mp3

- en Mis sitios de red/Música.mp3 en Profesor

- en Internet: sitios como goear o dilandau, bajándolo con Download Helper (pregúntame si no sabes usarlo).

SONIDOS:

- en el Banco de Imágenes y Sonidos del Ministerio de Educación hay muchos sonidos para escuchar y descargar (elige el formato MP3).

Hay un buscador (restríngelo a sonidos, pues sino te saldrán también imágenes o vídeos).

si buscas: ciudad, tendrás sonidos urbanos, con tráfico y gente, por si tu animación tiene escenario urbano.

si buscas: campo, tendrás ambientes campestres, con pájaros, grillos, viento en las hojas, campanas de un pueblo a lo lejos,...

si buscas: botón, tendrás varios sonidos típicos para asociar a los botones de las animaciones.

- freesound, un sitio al que la gente sube sonidos y grabaciones de campo (ambientes, ciudad, ruidos, etc).

La mayoría de las etiquetas de búsqueda están en inglés, por lo que buscar mouse en vez de ratón, water en vez de agua, etc, da mas resultados.

Los resultados de la busqueda dan en forma de lista la opción de escuchar en baja calidad cada sonido, pinchando en su nombre se abre una ventana con la opción "download", pero hay que hacerse una cuenta para poder bajarlos.

EDICION DE SONIDOS

Algunos sonidos necesitarán ser editados, para quedarnos solo con la parte que nos interesa, si son largos. Eso lo haces en Vegas:

1.Descarga el sonido en tu carpeta personal

2.Abre Vegas y añádelo a la línea de tiempo

3.Elimina las partes que no quieras

4.Haz doble clic sobre el sonido tal como lo quieres, para que quede seleccionado

5.File/Render as, y en tipo elige .mp3

B) ¿COMO LOS INSERTO EN LA ANIMACIÓN?

PONEMOS SONIDO A UN BOTÓN:

1. Busca y guarda el sonido,en el Banco de Imágenes y Sonidos, o en freesound.

2. Impórtalo: Archivo/Importar/Importar a la biblioteca.

3. Entra en el modo de edición del botón (clic derecho sobre el botón / Edición).

4. Selecciona el fotograma PRESIONADO y arrastra el sonido al escenario.

5. Listo, vuelve a la escena y pruébalo.

Puedes poner también si quieres sonido al estado SOBRE, para que suene al pasar el ratón por encima del botón

PONEMOS SONIDO EN LA ESCENA:

1 y 2 como antes.

3. Crea una capa nueva y llámala sonidos.

4. Selecciona en esa capa nueva el fotograma en el que quieras insertar el sonido, por ejemplo para que suene el rebote de una bola.

5. Crea un fotograma clave en ese fotograma: como siempre, con F6 (o clic derecho: insertar fotograma clave).

6. Arrastra el sonido desde la biblioteca hasta el escenario, teniendo seleccionado el fotograma que acabas de crear.

7. Con el fotograma con sonido seleccionado, en Propiedades / Sinc (abajo, si no lo ves: Ventana / Conjuntos de paneles / Predeterminado) selecciona FLUJO, para que el sonido pare cuando lo haga la animación, o cuando lo pares con el botón STOP.

3.Animación con Flash (3) Botones y Acciones

BOTONES

Un botón es algo (formas, dibujos, letras) que interactúa con el ratón, podemos hacer clic en el y empieza un juego, o se abre una ventana, o ocurre cualquier otra cosa.

1. Pinta, dibuja o escribe (o cualquier combinación: un rectángulo con texto dentro)

2. Selecciónalo todo y botón derecho / Convertir en símbolo: ponle nombre y en tipo: botón.

3. Haz doble clic y verás: REPOSO – SOBRE – PRESIONADO – ZONA ACTIVA. Tu botón está en el fotograma REPOSO, es el estado del botón cuando el puntero no está encima.

4. Inserta un fotograma clave (F6) en SOBRE, modifica tu botón (cambia el color, la forma, el texto,…) y será lo que veremos cuando el puntero esté encima del botón, pero sin hacer clic.

5. Inserta otro fotograma clave (con F6) en PRESIONADO. Cambia tu botón al estado en que quieras verlo cuando hagas clic en el botón.

6. Pruébalo desde Flash con la opción habilitar botones simples, del menú Control, o en una ventana externa, pulsando Control+Intro.

ACCIONES: PLAY, STOP

Usaremos los botones para arrancar (play) y parar (stop) una animación.

1. Abre una animación que hayas hecho, o una transformación (Morph) y añade una capa con dos botones, PLAY y STOP.

2. Crea los botones con el diseño que quieras, incluyendo el texto (play/stop, empezar/parar, venga/basta,…).

3. Conviértelos a símbolo como aprendiste (selecciona y botón derecho / convertir a símbolo).

4. Ahora asociamos los botones a su acción correspondiente. Botón derecho sobre el botón PLAY y Acciones / Funciones globales / Control de la línea de tiempo / Play. Con el botón STOP lo mismo, pero con la acción del mismo nombre.

ACCIÓN: GOTO

Ahora haremos una escena de introducción con el menú Insertar / Escena (será la Escena 2, pues la 1 es vuestra animación anterior, no importa el cambio de orden), con un botón PLAY (o jugar, o pulsa para ver,…llámalo como quieras)

Puedes cambiar de escena pulsando el botón claqueta, o con el menu Ver / Ir a / Escena 1

Cuando tengas diseñado el botón: clic derecho y Acciones…pero ahora activa el asistente de Script. Vas a Funciones globales / Control de la línea de tiempo / GOTO (ir a) y en las opciones elige Ir a Escena 1.

2.Animación con Flash (2) Interpolación

Ahora vais a aprender a animar texto, para poder haceros un logotipo o simplemente vuestro nombre o alias para usar de cabecera animada de vuestros vídeos. Pero lo más importante de hoy será la INTERPOLACIÓN DE MOVIMIENTO, que no es otra cosa que el paso gradual de una posición a otra, sin tener que dibujar todas las posiciones intermedias.

_______________________________

EJERCICIOS

Para empezar, algo fácil: animar un círculo, como ya sabes hacer, pero más fácil: con interpolación de movimiento. Sólo tenemos que crear unos pocos fotogramas, separados entre sí (no seguidos, como ocurre al pulsar F6), y dejamos que Flash “rellene” el hueco con las posiciones intermedias . ¿Cómo es esto? Para aprenderlo fíjate en los siguientes ejemplos:

BOLAS

Intenta imitar el documento BOLA1 (en Mis sitios de red / FLASH en Profesor). Observa que sólo he creado 4 fotogramas, llamados fotogramas clave, y las flechas representan el paso o interpolación de una posición a otra. Hazlo con clic derecho sobre la línea de tiempo, tanto para insertar fotogramas clave, como para crear después interpolación de movimiento. Los documentos creados con Flash se pueden insertar en páginas web, y suelen reproducirse indefinidamente, en bucle. Para verlo así: Archivo / Vista previa de publicación / FLASH

LETRAS

1. Intenta imitar el documento JOSE1, pero con tu nombre o alias.

- Escribe tu nombre con la herramienta texto (cógela de la paleta o pulsa T) Elige el tipo de letra, tamaño y color que quieras, en el panel Propiedades (bajo el escenario).

- Vamos a hacer una capa con cada letra, para poder animarlas independientemente.

Selecciona todo el texto con la herramienta Selección (V) y…clic derecho / Separar. Ahora tienes cada letra en un recuadro independiente, para colocarlas como quieras.

De nuevo clic derecho / Distribuir en capas. Ahora tendrás una capa con cada letra, para poder animarlas de forma independiente.

- Piensa ahora en el orden de aparición de las letras, y crea para cada una dos fotogramas clave, con la posición inicial y la final, creando después la interpolación de movimiento como ya sabes.

- Inserta un fotograma con clic derecho en cada capa bastante adelante (yo lo hago en el fotograma 40) para que las letras se mantengan en escena hasta que la última de ellas ocupe su lugar.

- veamos ahora la película: Archivo / vista previa de publicación / FLASH (o pulsa Control+Intro). ¿Algo va mal?. Desde luego: no queremos que se repita, como la bola rebotando, queremos que una vez formado el nombre se pare. Pues vamos a ello: insertamos una ACCIÓN en cualquiera de las capas (clic derecho / acciones /control de la línea de tiempo / funciones globales / Stop).

2. ANIMAR FORMA

Observa ahora las variantes JOSE2color, JOSE2forma (en mis sitios de Red / FLASH en Profesor. Las letras cambian de color, e incluso de forma. ¿Como es esto?

Cuando dibujas una forma geométrica, o pintas con el pincel, Flash genera FORMAS, que pueden moverse como ya sabes, pero también con ANIMAR FORMA. En el panel inferior PROPIEDADES hay dos opciones de ANIMAR: Movimiento (la interpolación de movimiento que ya conoces) y FORMA, que permite, además de mover la figura que sea, cambiarle su forma y su color.

Prueba a hacerlo con un óvalo, un rectángulo, un polígono o una estrella.

1. Haz una figura geométrica con las características que quieras.

2. Crea con F6 un fotograma clave, que es una copia, mas adelante en la línea de tiempo, en el fotograma 15 o 20 o mas adelante.

3. En el fotograma que acabas de crear, acércate con la herramienta selección (V) al borde de tu figura y TIRA o EMPUJA para deformarla a tu gusto.

4. Selecciona ahora el fotograma inicial (el 1) y elige en Propiedades ANIMAR FORMA.

Para hacerlo con letras debes hacer algo antes: SEPARAR CADA LETRA CON CLIC DERECHO (a parte de que hagas antes separar para llevar cada letra a una capa), para que se convierta en una forma.

También se puede CAMBIAR DE COLOR, y en ese caso al animar la forma se obtiene un paso gradual de un color a otro.

3. Exporta tus animaciones como películas. Puedes hacerlo en formato GIF animado, la más sencilla de publicar, pues es un formato de imagen fija, y se inserta en tu blog como si fuera un dibujo o una fotografía. 

¿TE SOBRA TIEMPO?

Prueba a aplicar lo que has aprendido a dibujos libres, con pincel o con formas geométricas.

Puedes hacer una historieta si quieres.

1.Animación con Flash (1) Lo básico

En la animación vamos a ver combinadas las posibilidades de los programas de dibujo tipo Paint Shop Pro, con las de los editores de vídeo, como Vegas. Flash es uno de los mas conocidos y usados de los programas de este tipo. Aunque a simple vista no lo parece, es bastante complicado dominarlo bien, pero es relativamente fácil empezar, que es lo que haremos ahora.

- en la LÍNEA DE TIEMPO (arriba), similar a la que ya conocemos de Vegas, aunque aquí los números no representan tiempo sino fotogramas (es decir, cada una de las imágenes fijas que en sucesión rápida forman una imagen en movimiento).

- una BARRA DE HERRAMIENTAS de dibujo y diseño (a la izquierda), para pintar, dibujar, escribir, hacer figuras geométricas, y algunas cosas mas.

- un ESCENARIO (en el centro) en el que pintamos, escribimos,…y vemos el resultado de nuestras animaciones.

- unos PANELES, configurables, con muchas otras opciones como un selector de COLORES, una BIBLIOTECA de los objetos que usamos o importamos, etc.

- una ventana de PROPIEDADES (abajo), para ver y cambiar las características de cualquier cosa que hayamos puesto en el escenario, o de cualquier herramienta seleccionada.

Pero, ¿qué podemos hacer con un programa de este tipo? Pues muchas cosas: desde simples presentaciones de fotografías o dibujos (aunque esto es mas fácil con programas como Vegas), hasta juegos y dibujos animados (¡de verdad!...aunque se pueden tardar años en aprender a hacerlo bien y es una tarea difícil y laboriosa). Nosotros empezaremos por algo fácil, pero que nos dará una idea del modo de trabajo con un programa de este tipo.

Actividad 1: BOLA VA

1. Con la herramienta Óvalo (pulsa O) dibuja una bola, del color que quieras (observa que tiene relleno y borde).

2. Con la herramienta Selección (pulsa V) selecciónala (botón derecho / seleccionar todo) y verás que la puedes mover por el escenario.

3. LA TECLA MÁGICA: F6. Ahora vamos a crear la animación: observa la línea de tiempo, tienes una capa y un fotograma (ese punto negro, bajo el 1). Pulsa F6 y tendrás copiado el fotograma 1 en el 2, ahora mueve la bola un poquito, F6 de nuevo y otro pequeño movimiento. Haz esto unas cuantas veces (F6 y movimiento). Estás haciendo una animación, que podrás ver pulsando Intro (o fotograma a fotograma con las teclas . y , )

ENHORABUENA, HAS HECHO TU PRIMERA ANIMACIÓN

Claro, es algo rudimentaria todavía, pero estas empezando, es normal,…

Actividad 2: BOLA QUE NO SABE SI IR…

En el ejercicio anterior la bola iba un poco nerviosilla de aquí para alla, pero no paraba hasta el final. Vamos a hacer que haga pausas entre movimientos. Para ello usarás F5 que crea fotogramas vacíos.

1. Crea la bola como antes

2. Empieza con algunos movimientos y F6 como sabes hacer

3. Donde quieras hacer una parada pulsas F5 varias veces (si lo haces 12 veces tendrás exactamente un segundo de pausa, pues vamos a 12 fotogramas por segundo, o fps, aunque esto se puede cambiar). También lo puedes hacer en la línea de tiempo, haciendo clic unos fotogramas mas adelante y pulsando F5.

4. Para continuar moviendo nuestro objeto hacemos clic en el fotograma siguiente al último de la pausa, en la línea de tiempo.

Actividad 3: DANZA DE ÓVALO Y RECTÁNGULO

Ya sabes mover una figura en el escenario, que vaya donde quieras y a la velocidad que quieras, y que se pare. Pues ahora a dos voces, perdón, a dos CAPAS (Insertar / Línea de tiempo / Capa), en cada una pones una figura diferente y con movimientos independientes. Invéntate una coreografía para dos figuras.