Share
Para los diseñadores, una gran parte del atractivo de Flash reside en su capacidad para permitir a los usuarios agregar movimiento e interactividad a casi cualquier cosa. Para la mayoría de los nuevos usuarios, el verdadero Wow! El factor viene cuando descubren por primera vez cómo dar vida a las cosas utilizando la línea de tiempo de Flash y ActionScript..
Hoy veremos cómo podemos aprovechar al máximo las herramientas que Flash nos ofrece para agregar animación a nuestros símbolos. Este puede ser un tema bastante denso para cubrir dado lo mucho que ha crecido la aplicación como potencia multimedia desde sus inicios, pero trataré de mantener las cosas concisas y accesibles. Para una cobertura más profunda, siéntase libre de ver otros tutoriales en Activetuts + y estoy seguro de que encontrará lo que está buscando.
Aunque esta publicación fue escrita para Flash Professional CS5, la mayoría de los consejos deberían funcionar bien en versiones anteriores. Intentaré y haré un punto para resaltar donde algo es muy específico a la última versión de Flash.
Antes de entrar en detalles, tomemos unos minutos para repasar algunos de los términos a los que nos referiremos aquí. Dado que la mayoría de los novatos de Flash vienen con muy poca o ninguna exposición al concepto de imágenes en movimiento, algunos de estos conceptos pueden ser un poco desalentadores. Es mejor que los cubramos por adelantado antes de profundizar en los aspectos prácticos de la animación y la interactividad en Flash..
FPS (o velocidad de fotogramas), muy simplemente, se refiere al número de fotogramas renderizados cada segundo. Cualquier imagen en movimiento, animación o video, es una serie de imágenes fijas, proyectadas una tras otra a una velocidad muy alta, causando la ilusión de movimiento. Si ha visto un rollo de película desde el momento en que realmente usó la película para grabar videos, verá que es simplemente una tira con muchas imágenes fijas. La rapidez con la que el proyector de película pasa a través de ellos es lo que se llama FPS.
El FPS predeterminado en las versiones anteriores de Flash era 12, que ahora se ha incrementado hasta 24 en las últimas dos versiones. Esto podría deberse a que Flash ha pasado de ser una herramienta de animación vectorial pura al modo preferido de reproducir videos en la web. Dado que los videos deben reproducirse a un mínimo de 24 fps para que se ejecuten sin problemas, el contenedor Flash también necesita ponerse al día. Además, Flash Player ha mejorado drásticamente ahora y puede generar volúmenes de datos mucho más altos necesarios para jugar a fps más altos sin tener un impacto de rendimiento.
Tomado directamente de los libros de animación de cel, la interpolación (abreviatura de la interpolación) es el método utilizado para crear cuadros interinos entre dos cuadros clave. Por ejemplo, si tuviera que animar la mano de un personaje al pasar de su posición normal a señalar algo, dibujaría la primera y la última posición, y luego dibujaría los fotogramas intermedios para simular el movimiento. La cantidad de fotogramas que van entre los dos fotogramas clave se define por la velocidad de fotogramas de la animación y el tiempo en el que necesita completar el movimiento. Los movimientos más lentos significan más cuadros de interpolación y viceversa..
Flash nos lo pone fácil dibujando los cuadros de interpolación, a diferencia de lo que haría en una animación tradicional dibujada a mano. Desde CS4, hay tres formas distintas de interpolar: forma, clásica y interpolación de movimiento. Vamos a entender cada uno un poco:
Interpolación de la forma: El tipo más básico de interpolación, aunque probablemente no lo utilice demasiado. Comienzas con una forma y la transformas con el tiempo. A menos que ambas formas no sean complejas y sean muy similares entre sí, probablemente necesitarás mucha práctica para que esto funcione. Puede agregar sugerencias de forma para forzar que ciertos puntos de una forma se comporten durante la transformación.
Interpolación clásica: Hasta la versión CS3, este era el principal método de interpolación en Flash, uno que era tan querido por todos como odiado. Básicamente, toma un símbolo y modifica sus propiedades entre los fotogramas clave, como el tamaño, la posición, el efecto de color, etc. Dado que el método depende de dos estados distintos, uno en cada fotograma clave, la edición de un símbolo animado puede ser una tarea bastante tediosa. Algo tan simple como mover el símbolo alrededor necesita que usted seleccione el símbolo en cada fotograma clave y lo mueva exactamente la misma cantidad.
Interpolación de movimiento Con mucho, la actualización más grande a las capacidades de animación de Flash, la interpolación de movimiento trae el muy querido editor de movimiento de After Effects a Flash. El mayor cambio entre el método antiguo y el nuevo es que la interpolación de movimiento ahora se basa en objetos en lugar de en la línea de tiempo como en el método anterior. Aplique interpolaciones a los símbolos, con un control preciso sobre casi cualquier aspecto físico del objeto a través del panel de edición de movimiento. Claro, aún aplica movimiento en la línea de tiempo, pero ahora es posible seleccionar un símbolo, moverlo y llevar su animación con él..
Sabemos que cuando una bola cae en el mundo real, su velocidad no es siempre la misma. Aumenta la velocidad a medida que se acerca al suelo, luego rebota aproximadamente a la misma velocidad y disminuye la velocidad al llegar a la cima, donde se dirige hacia el suelo. Cuando animas objetos en Flash, se transformarán a un ritmo uniforme de forma predeterminada. Si te has estado preguntando por qué tu texto animado entrando y saliendo del escenario se siente plano, esta es la razón. Básicamente, puedes decirle a Flash que acelere o desacelere el movimiento sin tener que modificar la posición manualmente en cada fotograma.
Uno de los mayores problemas con la interpolación de movimiento en Flash (algo que no me había dado cuenta hasta que vi el nuevo) era que la animación estaba basada principalmente en la línea de tiempo. Usted creó un fotograma clave en una capa, colocó un símbolo en ella, agregó otro fotograma clave a unos pocos fotogramas y modificó el símbolo. En esencia, se trataba de dos instancias distintas de un símbolo. Mover uno no es realmente diferente a la instancia en el siguiente fotograma clave. Claro, todos pasamos por el infierno intentando reposicionar los elementos después de animarlos, pero así es como Flash jugó sus cartas.
Luego, con CS4 vino el editor de movimiento, y las cosas cambiaron para siempre. Desafortunadamente, el editor de movimiento no es exactamente la parte mejor entendida de Flash, incluso después de incrementos de una versión y media. Permítame tomarme unos momentos y discutir algunos datos interesantes sobre cómo funciona esto y cómo puede hacerlo funcionar para usted..
Ahora puede editar sus símbolos de dos maneras distintas para iniciar una animación: desde dentro del editor de movimiento, o directamente en el escenario como en los viejos tiempos. Cada parámetro físico del símbolo seleccionado, como las coordenadas x e y, la escala, los efectos de color, los filtros, etc., ahora aparece como una fila en el editor de movimiento. Simplemente vaya a un punto en la línea de tiempo y cambie el parámetro, y se generará un fotograma clave para ese parámetro. Si te gusta la forma tradicional y visual de animar cosas, simplemente ve a un marco y edita el símbolo en el escenario..
Lo que es importante comprender es que ahora se agregan fotogramas clave por parámetro, por lo que si solo movió la instancia en el escenario, solo habrá un fotograma clave para las coordenadas X y / o Y en el editor de movimiento. Esto proporciona un amplio rango de control sobre la animación, algo que era imposible de lograr en las versiones anteriores de Flash..
Nota: Ya no necesitas crear explícitamente un fotograma clave. Simplemente muévase a un marco, cambie algo acerca de la instancia y se generará automáticamente un fotograma clave solo para ese parámetro. Para mucha gente, esto es un poco de un cambio cultural; algo que les resulta muy difícil acostumbrarse. Aunque todavía puede crear manualmente un fotograma clave, he encontrado que no es necesario en su mayor parte.
En lugar del único campo de entrada y un botón 'Editar', ahora obtiene una fila completa dedicada a facilitar el nuevo editor de movimiento. Una línea de puntos que abarca todos los cuadros de una interpolación hace que sea muy fácil ver cómo está funcionando la relajación. Los ajustes preestablecidos incluidos son una buena manera de comenzar. Una línea curva significa que la velocidad de la animación está aumentando o disminuyendo gradualmente. Una línea recta significa un ritmo constante y uniforme. Puede crear tantas facilidades como desee y asignar diferentes a cada parámetro. Recuerde que la relajación debe asignarse explícitamente a cada conjunto de parámetros. A menos que hagas eso, tu animación continuará siendo el mismo movimiento plano..
Una vez que comprenda cómo funciona la relajación con los ajustes preestablecidos, es hora de aventurarse y probar la opción 'Personalizar'. Lo que obtienes aquí es una línea roja continua en lugar de la punteada, lo que indica que puedes editarla. Vaya a un marco y cree un fotograma clave en la fila de simplificación 'Personalizada' para agregar un nodo más en la línea de tiempo. A continuación, puede utilizar los controladores de nodo para editar el curvador como desee..
Consejo rapido: Si no está muy seguro de cómo funciona la aceleración, pero le gustaría mejorar sus animaciones al instante, use esta regla que normalmente utilizo para mí: los elementos que aparecen (cualquier cosa que ingrese al marco o en el escenario) funcionan mejor con una actitud positiva. Sencillo (medio) 'se atenúa en' 50 ', mientras que los elementos que desaparecen funcionan mejor con la misma atenuación en' -50 '. Esto hace que la animación general se sienta mucho más suave y consistente. Como regla general, uso la relajación en prácticamente todo lo que se mueve en mis animaciones.
Cuando mueve un objeto a lo largo del tiempo utilizando la interpolación de movimiento, aparece una línea desde el punto de registro del símbolo que muestra el punto de inicio y finalización del movimiento, así como cada uno de los cuadros. Una característica aparentemente oculta aquí es el hecho de que esta ruta es como cualquier otra línea en Flash. Puede utilizar las herramientas de selección y lápiz para modificarlo como lo haría con cualquier otra ruta. Haga clic y arrastre en cualquier lugar que no sea el final de la ruta (aunque no esté seleccionado) para convertirlo en una curva. A continuación, puede utilizar la herramienta de selección secundaria para editar los controles de bezier en los nodos para un control más preciso. Cada vez que agrega un fotograma clave en la ruta de movimiento, se agrega una nueva curva de bezier a la ruta, que luego puede editar a medida que la necesite..
Si lo que siempre has estado buscando es 3D en Flash, pero no has tenido el corazón para jugar con los marcos 3D como papervision, aquí hay una manera rápida y sucia de simular el movimiento 3D en Flash. Puede utilizar la nueva herramienta de rotación 3D junto con el editor de movimiento para hacer que los objetos giren en 3 dimensiones para el jazz agregado..
La rotación 3D no aparece en el editor de movimiento a menos que realmente lo use en un objeto. Para hacerlo, seleccione la Herramienta de rotación 3D, seleccione su objeto y haga clic y arrastre una de las tres líneas de colores que aparecen. Cada una de las tres líneas representa un eje: el verde es Y, el rojo es X y el azul es Z. Por lo general, X e Y son las que harán que su objeto se vea como si estuviera girando en el espacio 3D. Colóquelo en la posición que desee, vaya al final de la interpolación de movimiento y muévalo y gírelo nuevamente. Agrega una facilidad 'Bounce' para un poco de especia extra.
Mi flujo de trabajo de animación típico es crear un compuesto de los fotogramas clave en una animación y luego agregar movimiento a cada objeto según sea necesario. Para cualquier cosa que necesite deslizarse desde fuera del escenario a la izquierda, esto significa que necesito mover el objeto hacia afuera en el primer cuadro, reducir el alfa, ir al último cuadro, moverlo de nuevo a donde quería y aumentar el alfa al 100%. Así es como siempre ha sido, así que nunca me molesté tanto hasta una buena mañana cuando descubrí los "fotogramas clave inversos". La idea es estúpida y simple en realidad, pero vale la pena durante incontables horas si animas cosas dentro y fuera del escenario todos los días..
Así es como funciona. Una vez que tenga su compuesto en su lugar, simplemente anime lo contrario del efecto que necesita. Comience desde la posición final del objeto y anímelo saliendo hacia la izquierda. Incluya todo lo que necesita para que la animación sea perfecta: alfa, desenfoque, etc. Luego, simplemente haga clic derecho en la interpolación y haga clic en 'revertir fotogramas clave', ¡y listo! Usted tiene su diapositiva en la animación de la izquierda justo como lo necesita para ser.
Quizás el mayor ahorro de tiempo para mí desde que empecé a usar el editor de movimiento en Flash, ha sido la capacidad de aplicar movimiento a un objeto, copiarlo y pegarlo para todos los demás similares. Esto tiene más sentido cuando tienes un montón de objetos que se mueven hacia adentro o hacia afuera de manera similar, por ejemplo, una lista de viñetas. Una vez que haya aplicado una interpolación a uno de los elementos de la lista (asumiendo que cada uno es un único movieclip en su propia capa, por supuesto), haga clic derecho en la interpolación y seleccione "Copiar movimiento". Luego, simplemente seleccione los primeros fotogramas clave de todos los demás elementos de la lista, haga clic con el botón derecho y seleccione 'Pegar movimiento'. A continuación, puede modificar cada uno individualmente si es necesario.
Estos son algunos consejos rápidos para ahorrar tiempo, energía y algunos cuadros al tratar con animaciones en Flash:
Esto nos lleva al final de otro capítulo en los consejos y mejores prácticas de Flash para diseñadores. Si usó Flash hace algunos años y ha regresado recientemente a él, sin duda apreciará el gran salto que ha dado a lo largo de los años como una herramienta de animación de nivel profesional. Espero que estos consejos te ayuden a lidiar con algunas de las herramientas y características más recientes, sorprendentemente raramente documentadas. ¿Tienes más consejos y trucos para compartir? Escuchemos sobre ellos en los comentarios..
Accentsconagua