Tutorial ilustrado de animación para Internet. Curso de escuela electronica macromedia flash mx ii: los fundamentos de la creacion de animacion en macromedia flash mx modulo iii: animacion del tipo de forma, animacion de sonido Formas animadas

El método de cálculo de marcos intermedios (formas interpoladas) le permite convertir una forma en otra, mientras cambia su tamaño, posición y color. Al crear animaciones de formas, tenga en cuenta que Flash no puede realizar estas animaciones para grupos, símbolos, cuadros de texto y mapas de bits.

La animación de forma de forma le permite crear un efecto de metamorfosis, cuando una forma se convierte en otra. Para controlar estos cambios, se utilizan identificadores de forma especiales (sugerencias de forma), que le permiten crear cambios complejos y convertir partes individuales de la forma original en otras nuevas. Los identificadores de forma marcan puntos individuales de una forma antes y después de que se haya cambiado su forma.

Cada uno de ellos está designado por una letra del alfabeto latino, lo que permite configurar hasta 26 identificadores. Por lo tanto, es posible crear un cambio en la expresión de las caras dibujadas, la transformación de algunos animales en otros, etc. Para formas complejas, es deseable establecer estados intermedios en forma de fotogramas clave adicionales, que le permitirán controlar las fases de transformación. Es mejor colocar todas las formas animadas en capas separadas, aunque puede realizar animaciones simultáneas para una capa que contenga varias formas a la vez.

Arroz. 4.15. Conversión de formas: automática y mediante identificadores

Para aplicar animación de formas (formas interpoladas) a grupos, caracteres, bloques de texto y mapas de bits, primero se deben convertir con el comando Modificar > Separar(Edición > Separar). Este comando rompe el vínculo entre la instancia y el símbolo, convirtiendo la instancia en una colección de líneas y formas desconectadas, lo que permite modificarla sin afectar a otras instancias. Los cambios posteriores al símbolo tampoco afectarán a esta instancia.

Considere la secuencia de acciones al crear una animación de formulario:

  1. Seleccione la capa y un fotograma clave vacío en ella, desde donde comenzará la animación.
  2. Vamos a crear un objeto para el primer cuadro de la secuencia usando cualquier herramienta de dibujo.
  3. Seleccione el cuadro final requerido de la secuencia y conviértalo en uno clave.
  4. Nosotros creamos nuevo objeto en este marco al que se debe convertir el objeto original.
  5. Ejecutar el comando Ventana > Paneles > Marco(Ventana > Paneles > Marco) para abrir el panel marco(Marco).
  6. De la lista desplegable interpolación(Cálculo) seleccionar valor forma(Formulario).
  7. Pongamos el valor facilitando(Suavidad) oscila entre -100 y 100, lo que especifica la tasa de cambio a lo largo del tiempo. Los valores negativos corresponden a cambios lentos al principio y cambios rápidos al final. Positivo: rápido al principio y lento hacia el final de la animación. Por defecto, la velocidad es constante. El ajuste se realiza mediante un control deslizante que se abre al hacer clic en la flecha.
  8. Soltar mezcla(Transición) seleccionar valor distribución(Distribuido) - para formas intermedias suaves o valor Angular(Sharp) - Para mantener ángulos agudos y líneas rectas en formas intermedias. El último valor se aplica solo a las formas que tienen esquinas afiladas y líneas rectas; de lo contrario, se establecerá automáticamente en distribución(Repartido).

Arroz. 4.16. Establecer opciones de animación de forma

Para controlar transformaciones de formas complejas, se utilizan sugerencias de forma. Definen puntos que en las formas inicial y final deben corresponder entre sí.

Las sugerencias de forma, marcadas con una letra latina, se representan en amarillo al principio y en verde al final de los fotogramas clave. El color rojo del identificador significa que no está ubicado en la curva y no puede participar en la transformación. Hay algunas reglas a seguir al usar identificadores de formulario:

  • Los identificadores se colocan en la figura en una secuencia determinada, por ejemplo, en el sentido contrario a las agujas del reloj, comenzando desde la esquina superior izquierda del objeto.
  • El orden de los identificadores debe conservarse tanto en la posición inicial de la figura como en la posición final para que no se viole su secuencia lógica (por ejemplo, si el primer cuadro clave es abc, el siguiente no debe ser abc).
  • Para figuras de forma compleja, se crean fotogramas clave adicionales que determinan las etapas del estado de la figura, con el cálculo de fotogramas intermedios entre ellos.

Arroz. 4.17. Cambiar el color de los identificadores cuando se colocan correctamente

Para usar identificadores de formulario, haga lo siguiente:

  1. Seleccione el primer fotograma clave de la secuencia y ejecute el comando Modificar > Transformar > Agregar sugerencia de forma(Edición > Transformar > Agregar ID). El primer identificador rojo con una letra dentro aparecerá en el objeto.
  2. El identificador se desplaza a un punto del contorno de la figura que se quiere marcar.
  3. Se selecciona el fotograma clave final de la secuencia, sobre el que se fija el identificador rojo en un punto del contorno de la figura, al que debe ir el inicial, mientras que el identificador cambia de color a verde.
  4. Se realiza una revisión de la película para garantizar que la forma cambie según lo deseado. De lo contrario, mueva la ID para ajustar el cambio de forma.
  5. Repita el proceso agregando nuevos identificadores ( antes de Cristo etc).

Si los identificadores de formulario no se muestran en la pantalla, ejecute el comando Ver > Mostrar sugerencias de forma(Ver > Mostrar ID de formas), que está disponible si la capa y el fotograma clave seleccionados contienen ID de formas.

El uso de identificadores de formulario no solo le permite animar el formulario, sino también crear efectos adicionales, como la rotación.

Un identificador de formulario adicional colocado en una forma se puede eliminar haciendo clic derecho sobre él y seleccionando el comando del menú contextual Quitar pista(Quitar DNI). Esto debe hacerse en el primer fotograma clave de la secuencia. Para eliminar todos los ID de formulario, simplemente ejecute el comando Modificar > Transformar > Eliminar todas las sugerencias(Edición > Transformar > Eliminar todos los identificadores).

Como ya se señaló, Flash, al crear una animación de forma, no puede calcularla para grupos, símbolos, cuadros de texto y mapas de bits. En estos casos, debe utilizar la animación paso a paso (cuadro por cuadro), lo que aumenta significativamente el tamaño del archivo final, pero deja espacio para la imaginación y le permite realizar cualquier transformación utilizando una secuencia de imágenes.

Arroz. 4.18. Un ejemplo de animación cuadro por cuadro usando dibujos

Trabajo practico №1

Trabajo práctico número 2:

Cree una animación de forma para el número "1" que se transforme suavemente en el número "2". Para hacer esto, cree una animación de forma para el objeto en el primer y último fotograma. Usa números como objetos, personalízalos apariencia(tamaño, color, posición, usando el conjunto de propiedades en el panel correspondiente).

Para crear una animación de la forma de un objeto de texto en el primer y último fotograma clave, los números deben estar "divididos", es decir, convertidos de texto a gráficos. Esto se hace de la siguiente manera: el comando dividir se aplica al objeto seleccionado (modo de menú "Modificación" - "Dividir").

Trabajo práctico nº 3:

La animación resultante en la tarea anterior puede no ser adecuada para nosotros debido al "flujo" "feo" de los puntos del objeto en el primer cuadro hacia algunos puntos del objeto en el último cuadro. Para mejorar el realismo de la transformación de un objeto en otro, es necesario indicar a qué punto del objeto en el último cuadro "fluirá" el punto seleccionado del objeto en el primer cuadro.

Para ello, realiza los siguientes pasos (utilizando la animación del trabajo anterior):

En la carpeta Animación - Animación de formulario se proporcionan ejemplos de creación de animaciones de formulario.

Breve resumen de la conferencia:

Además de la animación con propiedades cambiantes del objeto (posición, tamaño, rotación, transparencia, etc.), puede crear animaciones en las que cambia la forma de un objeto.

Para animar la forma de un objeto de texto en el primer y último fotograma clave, el texto debe "dividirse" convirtiéndolo en gráficos.

Para mejorar el realismo de la transformación de un objeto en otro, es necesario indicar a qué punto del objeto en el último cuadro "fluirá" el punto seleccionado del objeto en el primer cuadro. Para ello, se utilizan puntos de anclaje (sugerencias de curva).

Si aplica animación de forma a formas con diferentes colores, el color cambiará durante la transformación.

Términos clave

  • Animación de forma
  • división de texto
  • Sugerencia de curva

Equipo de práctica:

  • ¿Para qué objetos es posible crear una animación de forma clásica?
  • ¿Es posible cambiar el color de un objeto animado al crear una animación de forma?
  • ¿Asignar puntos de anclaje (sugerencias de curva) al crear una animación de forma?
  • ¿Qué se entiende por representación gráfica de un objeto de texto?
  • ¿Se puede aplicar la animación de forma a un objeto de texto? ¿Qué transformaciones necesitas hacer con el bloque de texto para esto?

Ejercicios

  • Crea una animación de humo.
  • Anima el movimiento y la forma de una nube en el cielo.
  • Crea una animación para cambiar la forma de la lengua de fuego.
  • Cree una animación del lienzo de la pancarta ondeando al viento.

En este tutorial, quiero decirles a los principiantes que aprenden Flash cómo hacer una hermosa animación de la forma usando el ejemplo de los números. Lección realizada en Macromedia Flash 8.
Comencemos con lo más importante: la animación de formas solo funcionará si opera con objetos gráficos.

Aquellos. habiendo creado los objetos necesarios, en nuestro caso texto, en los fotogramas clave necesarios, deben convertirse en objetos gráficos. Vamos a empezar.

Cree un nuevo documento, especifique los parámetros necesarios (tamaño, color de fondo, velocidad de fotogramas). En mi ejemplo, el tamaño es 200x200, el color de fondo es blanco, la velocidad de fotogramas es 12.

Inmediatamente indicamos que la animación de la forma ocurrirá en el primer cuadro: en la pestaña Propiedades, en la lista desplegable Interpolación, seleccione la animación de la forma - Forma. En el primer cuadro, con la Herramienta de texto, botón T, escribimos el número 1. Para empezar, para que sea más fácil, seleccione una fuente sans-serif, Arial, Tahoma, Verdana. A continuación, vaya al cuadro 30, presione F6, es decir, cree un fotograma clave y edite nuestro número 1, cámbielo al número 2.

También hay un punto sutil aquí, si simplemente borra el número 1 y escribe el número 2, entonces debe configurar las coordenadas del número 2 para que sean las mismas que las del número 1, para que la animación cree el efecto de girar el números uno en otro. Si continúa creando el número 3, 4, 5 y más allá, entonces, en consecuencia, las coordenadas de todos los números deberían ser las mismas. Hemos terminado de escribir los números, ahora necesitan convertirse en objetos gráficos.

Seleccionamos cada dígito a su vez y al llamar al menú contextual con el botón derecho del mouse, seleccione el elemento Separar, también puede presionar la combinación de teclas ctrl + B o seleccionar el elemento Separar del menú Modificar, lo que sea más conveniente para Uds. Hemos convertido números en objetos gráficos.

Ahora puede reproducir la animación resultante usando la combinación de teclas ctrl+Enter o simplemente arrastrando el control deslizante a lo largo de la línea de tiempo. Pero nuestra animación no es muy bonita, la transformación de números de uno a otro es algo "torpe". Mejoremos la situación. Para hacer esto, Flash tiene una sugerencia de forma: estos son los puntos clave del objeto utilizado en la animación.

Se pueden insertar llamando al menú Modificar - Forma - Agregar sugerencia de forma o usando la combinación de teclas ctrl+shift+H. Los puntos se insertan como pequeños círculos rojos con letras en el centro. Se nombran alfabéticamente: a, b, c, d, etc. Se insertan por defecto en el centro del objeto. Cuantos más puntos establezca, más suave será su animación. Al hacer clic en el punto con el botón derecho del mouse, puede agregar un nuevo punto: Agregar sugerencia, eliminar un punto adicional: Eliminar sugerencia y eliminar todos los puntos: Eliminar toda sugerencia.

Si ahora pasa al segundo fotograma clave con el número 2, verá exactamente los mismos puntos rojos con las mismas letras en el centro.
Ahora tenemos que instalarlos. Ofrezco mi propia versión, pero puedes hacerlo de otra manera, porque. No hay recomendaciones finales, las pones tú de acuerdo a tu propia percepción y gusto.

El significado de los puntos es este: estableces el punto a en algún lugar del primer objeto, vas al segundo objeto y también estableces el punto a en el lugar correcto. Durante la animación, estos puntos "fluirán" entre sí. Si todo se hace correctamente, el punto en el primer objeto se volverá amarillo y en el segundo verde. La captura de pantalla muestra la ubicación en mi entendimiento. Realizamos la misma operación para el segundo, tercer objeto, etc. Habrá un montón de puntos, cuidado, no te confundas.

En realidad, si todo se hace correctamente, reproducimos la animación resultante usando las teclas ctrl + Enter o simplemente estirando el control deslizante a lo largo de la línea de tiempo y disfrutamos del resultado. Puede aplicarlo en cualquier lugar y de cualquier manera, solo recuerde: solo funciona con objetos gráficos. Se adjuntan el archivo swf de origen y resultante.

Método de cálculo para marcos intermedios ( formas interpoladas) le permite transformar una forma en otra, mientras cambia su tamaño, posición y color. Al crear animaciones de formas, tenga en cuenta que Flash no puede realizar estas animaciones para grupos, símbolos, cuadros de texto y mapas de bits.

La animación de forma de forma le permite crear un efecto de metamorfosis, cuando una forma se convierte en otra. Estos cambios están controlados por identificadores de formulario especiales ( consejos de forma), que le permiten crear cambios complejos y transformar partes individuales de la figura original en otras nuevas. Los identificadores de forma marcan puntos individuales de una forma antes y después de que se haya cambiado su forma. Cada uno de ellos está designado por una letra del alfabeto latino, lo que permite configurar hasta 26 identificadores. Por lo tanto, es posible crear un cambio en la expresión de las caras dibujadas, la transformación de algunos animales en otros, etc. Para formas complejas, es deseable establecer estados intermedios en forma de fotogramas clave adicionales, que le permitirán controlar las fases de transformación. Es mejor colocar todas las formas animadas en capas separadas, aunque puede animar una capa que contenga varias formas al mismo tiempo.

Arroz. 4.15. Conversión de formas: automática y mediante identificadores

Para aplicar animación de forma ( formas interpoladas) a grupos, símbolos, bloques de texto y mapas de bits, primero deben convertirse con el comando Modificar › Separar(Editar › Separar). Este comando rompe el vínculo entre la instancia y el símbolo, convirtiendo la instancia en una colección de líneas y formas desconectadas, lo que permite modificarla sin afectar a otras instancias. Los cambios posteriores al símbolo tampoco afectarán a esta instancia.

Considere la secuencia de acciones al crear una animación de formulario:

  1. Seleccione la capa y un fotograma clave vacío en ella, desde donde comenzará la animación.
  2. Vamos a crear un objeto para el primer cuadro de la secuencia usando cualquier herramienta de dibujo.
  3. Seleccione el cuadro final requerido de la secuencia y conviértalo en uno clave.
  4. Creamos un nuevo objeto en este marco, al que se debe convertir el objeto original.
  5. Ejecutar el comando Ventana › Paneles › Marco(Ventana › Paneles › Marco) para abrir el panel marco(Marco).
  6. De la lista desplegable interpolación(cálculo) seleccionar valor forma(Formulario).
  7. Pongamos el valor facilitando(Suavidad) que van desde -100 a 100, especificando la tasa de cambio en el tiempo. Los valores negativos corresponden a cambios lentos al principio y cambios rápidos al final. Positivo: rápido al principio y lento hacia el final de la animación. Por defecto, la velocidad es constante. El ajuste se realiza mediante un control deslizante que se abre al hacer clic en la flecha.
  8. Soltar mezcla(Transición) seleccionar valor distribución(Distribuido) - para formas intermedias suaves o valor Angular(Sharp) - Para mantener ángulos agudos y líneas rectas en formas intermedias. El último valor se aplica solo a las formas que tienen esquinas afiladas y líneas rectas; de lo contrario, se establecerá automáticamente en distribución(Repartido).


Arroz. 4.16. Establecer opciones de animación de forma

Para controlar transformaciones complejas de formularios, use identificadores de formulario ( consejos de forma). Definen puntos que en las formas inicial y final deben corresponder entre sí.

Identificadores de formulario ( consejos de forma), marcados con una letra latina, se representan en amarillo al principio y en verde al final de los fotogramas clave. El color rojo del identificador significa que no está ubicado en la curva y no puede participar en la transformación. Hay algunas reglas a seguir al usar identificadores de formulario:

  • Los identificadores se colocan en la figura en una secuencia determinada, por ejemplo, en el sentido contrario a las agujas del reloj, comenzando desde la esquina superior izquierda del objeto.
  • El orden de los identificadores debe conservarse tanto en la posición inicial de la figura como en la posición final para que no se viole su secuencia lógica (por ejemplo, si el primer cuadro clave es abc, el siguiente no debe ser acb).
  • Para figuras de forma compleja, se crean fotogramas clave adicionales que determinan las etapas del estado de la figura, con el cálculo de fotogramas intermedios entre ellos.

Los gráficos de formas han estado de moda en los últimos años. Sin embargo, detrás de la gran popularidad se encuentra el minucioso trabajo de animar cada elemento en el espacio de trabajo.

Si nunca antes has hecho animación de formas, ¡ahora es el momento!

Elegimos 30 que lo ayudarán a dominar el principio de la animación de formas, así como también le enseñarán cómo crear y exportar ilustraciones vectoriales adecuadas para animaciones posteriores.

Animación Feliz de Shapes con Textos

Animación de secuencia – Tutorial de Adobe After Effects

Repetidor de capa de forma (radial): tutorial de Adobe After Effects

Tutorial – Consejos rápidos 03 – Círculos 2D y Trazo discontinuo

Animación de escena infográfica Episodio 1 After Effects

Tutorial de la Hora del Planeta After Effects

Creación de patrones animados con el repetidor de capas de forma en After Effects

Summit 1.2 - Introducción a los gráficos animados - After Effects

Cómo importar y animar un archivo vectorial en After Effects

Introducción a Punto de Ancor. Animación de palma

¿Cómo crear engranajes?

Toallita radial de transición de forma

Cuenta regresiva y cuenta regresiva en Adobe After Effects

Trabajar con el guión de Lines Creator

¡Los círculos lo son todo! Lección 1. Crear una introducción

¡Los círculos lo son todo! Lección 2

¡Los círculos lo son todo! Lección 3: Igualación de colores en Adobe Kuler

¡Los círculos lo son todo! Lección 4

Efecto de círculos esparcidos

Animación de forma

Creando un video de forma simple

Creación de un icono animado con forma

Creación de una introducción de forma simple

Espectacular animación con forma de teléfono inteligente

Impresionante animación de forma

Creando un morph de forma simple

¡Formas! Creación de patrones animados con el repetidor de capas de forma

Animación de forma elegante

Cómo hacer un banner animado