Las animaciones son el corazón del trabajo en Flash y para realizarlas se necesita el conocimiento de un pequeño número de técnicas aunque la experiencia y la creatividad son los únicos límites para alcanzar resultados sorprendentes.
Una animación se puede realizar fotograma a fotograma como hemos vislumbrado cuando generamos símbolos del tipo clip de película. El problema es que es una forma tediosa de trabajo y genera archivos pesados. Algunas formas de generar espectaculares y sencillos efectos de animación son descritos a continuación.
Interpolaciones de movimiento.
Las Interpolaciones de movimiento básicamente permiten realizar desplazamientos de símbolos desde un lugar a otro del escenario solo con dos fotogramas claves.
Traiga una instancia de cuadrado al escenario, en el fotograma 1. Este era un símbolo de tipo gráfico, consistente en un cuadrado de relleno azul y sin borde, almacenado en la biblioteca en el capítulo anterior. A continuación, inserte un fotograma en el rectángulo 40 de la capa 1.
Ahora haga un clic izquierdo sobre el fotograma 1 y escoja la opción “Insertar-línea de tiempo crear interpolación de movimiento” del menú insertar de la barra superior o del menú que aparece haciendo un clic derecho. Aparece una línea punteada entre los fotogramas 1 y 40.
Inserte un fotograma clave en el fotograma 40. La línea punteada se convierte en una flecha continua.
Con el fotograma 40 seleccionado, arrastre el cuadrado hacia la derecha.
Seleccione la opción “Probar película” del menú de la barra superior (o simplemente ctrl+enter).
Aparece un cuadro emergente mostrando el cuadrado moviéndose de izquierda a derecha rectilíneamente. La escena se repite una y otra vez sin control. Interrumpa la ejecución simplemente cerrando el cuadro emergente. Seleccione uno a uno los fotogramas intermedios (eso puede hacerse fácilmente con las teclas punto y coma) para ver que Flash a generado automáticamente cuadrados desplazados ligeramente respecto de la posición que tenían en el fotograma anterior. Inserte un fotograma clave en el fotograma 20. La flecha se divide en dos.
Con el fotograma 20 seleccionado, desplace el cuadrado hacia abajo. Ejecute Probar película. El cuadrado se mueve ahora siguiendo dos líneas rectas.
El movimiento del símbolo se realiza con velocidad constante. Es posible generar un efecto interesante con la opción borrar del panel de propiedades de los fotogramas clave de la interpolación. Seleccione el fotograma 20 y borre el fotograma clave (clic derecho sobre el fotograma en la línea de tiempo y elegir “borrar fotograma clave”). Agregue 20 fotogramas (clic derecho sobre 20 fotogramas intermedios seleccionados previamente elegir ”insertar fotograma”).
Ahora seleccione el fotograma 1 y en el panel de propiedades inferior ponga la opción
“Aceleración” en 100.
Seleccione el fotograma 60 y ponga la opción “Aceleración” en -100. Ejecute Probar película.
Como puede ver, el cuadrado aumenta su rapidez al principio y disminuye su rapidez al llegar al final. Ensaye varias combinaciones hasta familiarizarse con el efecto. Como ejercicio se sugiere animar el bote de una pelota bajo el efecto del campo gravitacional.
Otros efectos interesantes se logran con las opciones brillo, tinta y alfa, encontradas en el menú color del panel de propiedades del símbolo.
Borre lo anterior. Dibuje un rectángulo azul sin borde en el fotograma 1. Seleccione el fotograma 1,
haga un clic derecho y seleccione la opción crear interpolación de movimiento. Seleccione el fotograma 20, haga un clic derecho e inserte un fotograma clave. Mueva el rectángulo hacia la derecha. Con el fotograma 20 seleccionado, haga un clic en el rectángulo en el escenario. En el panel de propiedades del símbolo del borde inferior, seleccione color-alfa y seleccione 0%. Ejecute Probar película.
Ensaye otras modificaciones de las opciones de la propiedad color.
También pueden conseguirse animaciones interesantes con las opciones del menú trasformar del símbolo, como se observa en el ejercicio siguiente, donde además observaremos otras características interesantes de Flash
Ejercicio.
1.- En un archivo nuevo seleccione la opción mostrar cuadrícula del cuadro de diálogo de la opción ver de la barra superior. Edítela para dejarla de 9x9 pixeles.
2.- Dibuje un rectángulo de ancho 5 y alto 3 cuadrados de la cuadrícula (sin borde) en el fotograma 1 de la capa 1, a la que denomine “carreta” (asegúrese que no esté seleccionada la opción dibujo de objeto del panel de opciones de la herramienta rectángulo). Haga un clic fuera del rectángulo para deseleccionarlo. Acerque el cursor al vértice superior izquierdo y arrastre la esquina horizontalmente un cuadrado hacia la izquierda. Repita lo mismo con la esquina derecha, arrastrando el vértice hacia la derecha, para obtener lo siguiente:
2.- Seleccione el fotograma 1, haga un clic derecho y seleccione crear interpolación de movimiento. Note que Flash inmediatamente convirtió el dibujo en un símbolo gráfico (apareció un contorno azul). Vaya a la biblioteca y denomínelo “carreta”. Inserte un fotograma clave en el fotograma 40 y arrastre el símbolo hacia la derecha.
3.- Inserte una nueva capa y denomínela rueda. En el fotograma 1 dibuje un círculo de diámetro 3 cuadraditos y quítele el relleno para generar un aro. Dibuje líneas horizontales, verticales y diagonales, de grosor 3 unidades (acuérdese que eso se logra seleccionando el dibujo completo y seleccionando 3 en altura del trazo en el menú propiedades) como se observa en la figura siguiente.
4.- Seleccione el dibujo recién creado y conviértalo en símbolo gráfico de nombre “rueda”. Luego arrástrelo de modo que se vea como una rueda de la carreta, teniendo seleccionado el fotograma 1. No importa que sea un dibujo poco sofisticado. Mas adelante tendrá oportunidad de mostrar sus dotes creativas.
5.- Inserte una interpolación de movimiento en el fotograma 1 de la capa rueda y luego un fotograma clave en el fotograma 40. Arrastre el símbolo rueda de modo que quede en la misma posición relativa a la carreta que en el fotograma 1.
6.- Recuerde que el orden de las capas no da lo mismo. En este caso la capa rueda está encima de la capa carreta y eso se refleja en la presentación. Arrastre la capa rueda bajo la capa carreta para recordar este efecto.
Pruebe la película en ambos casos.
Interpolaciones de movimiento con capa guía.
Capa guía es simplemente una capa en la que se dibuja un patrón de movimiento de forma definida por el usuario. Elimine todo lo que existe en el escenario y traiga una instancia de “círculo” hasta el extremo superior izquierdo del escenario. Denomine su capa como “círculo” y agregue 60 fotogramas. Haga clic derecho en el nombre de la capa y seleccione la opción “añadir guía de movimiento”. Aparece una capa nueva cuyo nombre es “Guía:círculo”, que indica que es guía de la capa que está inmediatamente abajo, cuyo nombre es “círculo”.
Note que en la capa guía automáticamente se genera un número de fotogramas equivalente al de la capa círculo y que el nombre de ésta aumenta su margen.
Seleccione el fotograma 1 de la capa guía y dibuje una línea sinuosa como la que se muestra en la figura siguiente:
Seleccione el fotograma 1 de la capa círculo y escoja la opción “crear interpolación de
movimiento” que aparece luego de hacer un clic derecho sobre él (también aparece en el menú insertar de la barra superior). Aparece una línea punteada en la línea de tiempo. Arrastre el símbolo “círculo” hasta que el punto blanco (con una cruz) de su centro quede unido a la línea de la capa guía. Note que si usted lo suelta cerca de ella, automáticamente se mueve hacia el punto de la línea más cercano a él.
Haga un clic en el fotograma 60 de la capa círculo, inserte allí un fotograma clave y mueva el símbolo círculo hasta que quede unido al punto final de la curva sinuosa. La línea punteada se transforma a continua indicando que la interpolación fue exitosa.
Ejecute Probar película. El símbolo círculo se moverá ahora siguiendo la línea sinuosa.
Vamos a realizar un ejercicio para observar algunos trucos sencillos. El objetivo es dibujar un círculo que se mueva con rapidez constante alrededor de una circunferencia que no sea visible.
1.- Traiga una instancia del símbolo “círculo” al escenario, agregue 59 fotogramas y denomine la capa como “círculo”.
2.- Inserte una capa guía de movimiento a la capa círculo.
3.- Dibuje una circunferencia en la capa guía.
4.- Inserte una nueva capa, llámela “referencia” y dibuje en ella un cuadrado que contenga al círculo y otras líneas que servirán de referencia. A continuación elija opción no mostrar cuadrícula.
5.- Seleccione el fotograma 1 de la capa círculo, haga clic derecho y escoja crear interpolación de movimiento, seleccione el fotograma 60 e inserte un fotograma clave. Si prueba la película ahora verá que el círculo no se mueve.
6.- Inserte un fotograma clave en el fotograma 15 de la capa círculo y mueva el círculo hasta el punto medio de la línea horizontal inferior del cuadrado de referencia. Pruebe la película.
7.- Inserte un fotograma clave en el fotograma 30 de la capa círculo y mueva el círculo hasta el punto medio de la línea vertical derecha de la circunferencia como se ve en la figura. Pruebe la película.
8.- Inserte un fotograma clave en el fotograma 45 de la capa círculo y mueva el círculo hasta el punto medio de la línea horizontal superior de la circunferencia como se ve en la figura.
Pruebe la película.
Como ve, el símbolo se mueve circunferencialmente. Sin embargo, cuando llega al punto de partida se nota un “bache” en el movimiento. Para evitar esto seleccione el fotograma 1 de la capa círculo y adelante el símbolo unos 8 pasos (8 clic con la flecha hacia abajo del teclado) siguiendo la circunferencia.
Elimine la capa referencia y pruebe la película. Observará el círculo moviéndose con rapidez constante circunferencialmente sin detenerse y con fluidez.
Si quiere que el camino se vea, copie la circunferencia de la capa guía cámbiela a verde para no confundirla y péguela en la capa referencia (después de borrar lo que allí había). Ubíquela de manera que quede exactamente sobre la circunferencia de la capa guía. Para que no se vea el círculo sobre la circunferencia arrastre la capa referencia debajo de la capa círculo.
En el escenario se ve la guía de movimiento, pero cuando pruebe la película verá que el camino que sigue el círculo es verde.
Como ejercicio, haga que el símbolo “circulo” viaje por una parábola invertida, disminuyendo su rapidez hasta llegar a la cima y luego aumentando su rapidez hasta llegar a la misma altura desde la que se lanzó.
Si no sabes; estudia, y si sabes, enseña… Aprenderás más de lo que ya sabes. Rajoo
