Dependiendo del tiempo disponible, la trama de la película y tus propias habilidades artísticas, puedes elegir una de dos formas de “revivir” a los personajes de tu película:

• animación cuadro por cuadro, cuando crea cada cuadro siguiente con sus propias manos (o lo importa desde una fuente externa);
• Animación automática (animación interpolada), cuando se crean solo fotogramas clave y todos los fotogramas intermedios. Destello se forma de forma independiente.

Cabe señalar que ambos mecanismos se pueden utilizar juntos, no sólo dentro de una misma película, sino también en relación con un mismo objeto. Por ejemplo, los fragmentos que son más complejos en términos de trama se pueden basar en la animación cuadro por cuadro, mientras que los fragmentos con un desarrollo de la trama "predecible" se pueden obtener mediante animación automática.

Esta combinación es posible gracias al uso de un único eje de tiempo para cada objeto, representado en la ventana del editor mediante un diagrama de tiempo: Línea de tiempo. Combinando las "líneas de vida" de varios objetos en un diagrama de tiempo, se puede obtener una escena en la que participan varios "personajes".

La peculiaridad de utilizar la animación automática es que se puede utilizar para animar solo un objeto en una capa determinada. Para crear una escena en la que se supone que hay varios objetos animados, debe colocar cada uno de ellos en una capa separada (para obtener más información sobre el uso de capas, consulte el siguiente capítulo: "Capas").

Independientemente del mecanismo que se utilice para crear fotogramas individuales, la esencia de la animación es reflejar el cambio de un objeto a lo largo del tiempo.

Puedes crear una película en la que la misma bola permanezca inmóvil sobre una mesa durante una hora. En este caso, todos los fotogramas de la película serán más parecidos entre sí que gemelos idénticos, y el espectador no podrá distinguir su "caricatura" de una imagen estática. Por otro lado, puedes tomar varias tomas maravillosas y... reproducirlas en el mismo momento. El resultado será el mismo: el espectador no podrá ver lo que sucede en el escenario. Por tanto, el principio básico de la animación es que cada momento tiene su propio marco.

En consecuencia, el procedimiento para crear una película animada simple en Destello es preparar imágenes de un objeto que reflejen su cambio y organizarlas a lo largo del eje del tiempo.

A cualquiera Destello-Se puede agregar texto de película. Similar a trabajar en horario regular editores de texto, el texto se puede configurar en tamaño, fuente, estilo, espaciado, color y alineación. Puede transformar una fuente como otros objetos: rotarla, escalarla, inclinarla. Al mismo tiempo, sigue siendo posible editar sus símbolos.

Se puede crear un hipervínculo basado en un fragmento de texto.

Destello-la película puede contener campos de texto dinámicos, así como campos editables por el usuario. Los campos editables en una película Flash tienen el mismo propósito que los campos de texto colocados en un formulario en una página web: con su ayuda, se puede obtener cierta información del usuario para procesarla en el servidor o mediante un script del cliente. Finalmente, en Flash MX puedes crear áreas de texto desplazables de varias líneas.

Si es necesario, el texto se puede convertir en un objeto gráfico y luego se pueden trabajar con sus símbolos como formas gráficas separadas.

Animación stop motion

Por lo tanto, para crear una animación stop-motion, es necesario preparar previamente (o al menos pensar detenidamente) cada fotograma de la película. En este caso, es necesario tener en cuenta la siguiente circunstancia. La suavidad de la transición de un cuadro a otro y, en consecuencia, la suavidad y naturalidad de los movimientos de los personajes dependen de qué tan diferente sea el siguiente cuadro del anterior (y no de la velocidad de los cambios de cuadro, como a veces se cree). . En otras palabras, cuantos más fotogramas contiene una caricatura, más se acercan los movimientos de los personajes a los naturales. Por lo tanto, crear una animación cuadro por cuadro es una tarea muy laboriosa. Es recomendable utilizarlo en los casos en que los objetos cambian o interactúan entre sí de alguna forma compleja.

Además, la animación stop-motion se utiliza en Destello al describir el comportamiento de elementos de películas interactivas, como botones. Cada estado de botón corresponde a un fotograma clave específico en el diagrama de tiempo. La principal diferencia entre describir el comportamiento de un botón y una animación "normal" es que el estado del botón no depende del tiempo, sino de las acciones del usuario. Las cuestiones relacionadas con la inclusión de controles en una película se analizan con más detalle en el capítulo "Creación de películas interactivas".

Crear una secuencia de fotogramas clave

La principal herramienta para crear. animación stop motion es el panel del gráfico de tiempos. Con su ayuda, puede crear, eliminar y mover fotogramas de animación, cambiar los modos de visualización de fotogramas individuales y de toda la escena y realizar otras operaciones.

Los elementos de la interfaz del diagrama de tiempos se discutieron en la sección “Organización de la interfaz de usuario” del tercer capítulo (ver Figura 3.7). Ahora toca hablar de qué papel juega cada uno de estos elementos a la hora de crear una “caricatura”.

Comentario

En este capítulo, toda nuestra atención se centrará únicamente en el lado derecho del diagrama de tiempos, ya que se dedica un capítulo aparte al uso de capas. En consecuencia, en todos los ejemplos considerados aquí, solo se utiliza una capa, cuyos parámetros están configurados de forma predeterminada y no los modificamos nosotros.

Entonces, recordando el diagrama de tiempo, podemos decir que una caricatura creada mediante animación cuadro por cuadro es una secuencia de cuadros clave, cada uno de los cuales está asociado con una imagen (imagen) en la mesa.

Al reproducir una caricatura, el efecto de animación se logra debido al hecho de que las imágenes en la mesa se reemplazan entre sí. Cada caricatura fotograma a fotograma se caracteriza por dos parámetros principales:

• número de fotogramas clave (Keyframe);
• velocidad de fotogramas (en Destello se mide como el número de fotogramas mostrados en un segundo (fotogramas por segundo, fps).

En general, ambos parámetros afectan el efecto visual creado (la suavidad o, por el contrario, la discreción de los movimientos, las “transformaciones”, etc.). Pero aún así, el papel principal aquí pertenece al primer parámetro, así como a cuánto difiere el fotograma clave posterior del anterior.

En el diagrama de tiempo, los fotogramas clave se muestran como rectángulos grises con un punto negro en su interior. Cuando se reproduce una película, el cabezal de lectura se mueve de un fotograma al siguiente, marcando el fotograma actual. Para ver la imagen asociada a un fotograma específico, debe hacer clic en el icono de ese fotograma en la línea de tiempo. En la Fig. La Figura 6.1 muestra como ejemplo dos fotogramas clave (el primero y el último) de una pequeña caricatura “sobre un reloj”, en la que un fotograma se diferencia del otro por la posición del minutero. En total, la caricatura contiene 6 fotogramas, la velocidad de fotogramas es 2.

Arroz. 6.1. Dos fotogramas de la caricatura "sobre relojes"

Volveremos al ejemplo del reloj más adelante, pero para describir el procedimiento para crear una animación cuadro por cuadro usaremos otro ejemplo. Supongamos que el "héroe" de la película es una bola que cae y se rompe en tres pedazos. Supondremos que cinco fotogramas son suficientes para revelar una trama tan compleja:

1. La pelota está en su posición original.
2. La pelota cayó, pero sigue intacta.
3. El primer trozo se desprendió del balón.
4. El segundo trozo se desprendió del balón.
5. Sobre la mesa hay algo que en una vida anterior fue una pelota.

Teniendo en cuenta la trama descrita, la secuencia de trabajo debe ser la siguiente:

1. Cree cuatro imágenes en la tabla correspondientes a los cuadros anteriores, como se muestra en la Fig. 6.2 (para el primer y segundo fotograma se utiliza la misma pelota entera).

Arroz. 6.2. Imágenes correspondientes a fotogramas de la futura película.

1. Cree un nuevo archivo de película con una tabla "limpia" haciendo clic en el botón Nuevo en la barra de herramientas principal Destello.
2. En la línea de tiempo, en la celda del primer fotograma, haga clic derecho y seleccione Insertar fotograma clave en el menú contextual.
3. Desde la ventana donde se crearon las imágenes de la pelota, copie la primera imagen y colóquela en algún lugar en la parte superior de la mesa; en este caso, el primer fotograma del diagrama de tiempos se marcará como fotograma clave (punto negro), Fig. 6.3.

Arroz. 6.3. Vista de la ventana Flash después de crear el primer fotograma

1. Haga clic derecho en la celda del segundo fotograma y seleccione Insertar fotograma clave en el menú contextual; en este caso, el fotograma se marcará inmediatamente como fotograma clave, ya que se hereda la imagen del fotograma anterior; Úselo: mueva la imagen de la pelota al final de la mesa.
2. Haga clic derecho en la celda del tercer fotograma y en el menú contextual seleccione nuevamente el comando Insertar fotograma clave; el nuevo fotograma también se marcará como fotograma clave y la imagen anterior se guardará para él; puedes editarlo o simplemente reemplazarlo con lo que necesites.
3. Cree los fotogramas cuarto y quinto seleccionando el comando Insertar fotograma clave del menú contextual y colocando la imagen correspondiente en la mesa.

Después de completar el paso final, la ventana Destello debería verse algo parecido al que se muestra en la Fig. 6.4.

Arroz. 6.4. La ventana Flash después de crear el fotograma final de la animación.

En realidad, aquí es donde se completa la creación de la primera “caricatura”. No olvides guardarlo en el disco: lo necesitaremos más adelante cuando estudiemos otros tipos de animación.

Después de completar el trabajo, es útil comprobar si todo salió como deseaba.

Para reproducir una película, simplemente presione una tecla (una alternativa es seleccionar el comando Reproducir en el menú Control). En este caso, el cabezal de lectura del panel de sincronización se mueve automáticamente desde el fotograma clave actual al último. Puede forzar la selección de cualquier cuadro para verlo haciendo clic izquierdo en la celda correspondiente del diagrama de tiempo.

En el ejemplo que hemos visto, las imágenes que componían el contenido de los fotogramas fueron creadas de antemano, sobre la mesa de otra película. Sin embargo, para la mayoría de las películas simples es más conveniente crear una imagen de fotograma directamente sobre la mesa de la película actual. Para hacer esto necesitas:

1. Crea un nuevo fotograma clave en el diagrama de tiempo.
2. Cambiar las propiedades de los objetos ubicados en la mesa (forma, posición, etc.).

Edición de animación

Como resultado de las pruebas, puede resultar que la "caricatura" creada no se corresponda completamente con la intención del autor y sea necesario corregirla.

Al igual que al crear una "caricatura", al editarla, lo más conveniente es trabajar con el panel de diagrama de tiempo, o mejor dicho, con menús contextuales este panel.

Recuerde que el menú contextual está asociado con un objeto específico y contiene comandos que se pueden aplicar a este objeto en la situación actual (en un contexto determinado).

Cada tipo de cuadro de diagrama de tiempos tiene su propio menú contextual. Por ejemplo, hay un menú contextual para un fotograma clave, un menú contextual para un fotograma "normal" y un menú contextual para fotogramas de animación interpolados. si está encendido fases iniciales Una vez que lo domine, tendrá dificultades para determinar el tipo de marco, luego podrá utilizar la información sobre herramientas. Aparece en la pantalla cuando pasa el mouse sobre el ícono del marco (Fig. 6.5).

Sin embargo, hay que tener en cuenta que todos los fotogramas que no están relacionados con la animación interpolada se designan en este caso como Estáticos, como se muestra en la Fig. 6,5 a la derecha.

Arroz. 6.5. Información sobre herramientas que indica el tipo de marco

Flash proporciona las siguientes opciones para editar una secuencia animada:

• corrección del contenido de cualquier fotograma clave;
• agregar fotogramas clave; un nuevo bloque siempre se inserta sólo después del último bloque de la secuencia; Puede agregar dos tipos de fotogramas clave:
  • con una imagen heredada, usando el comando Insertar fotograma clave;
  • marco vacío (sin contenido): utilizando el comando Insertar fotograma clave en blanco;
• agregar marcos simples (sin clave); se puede insertar un nuevo fotograma después de cualquier fotograma clave; en el caso más simple, insertar un fotograma simple le permite "extender la vida" del fotograma clave anterior; por ejemplo, si en una "caricatura" con una pelota agrega algunos cuadros simples después del segundo cuadro clave, entonces la bola caída permanecerá por un tiempo y solo entonces se desmoronará; para agregar un marco simple, haga clic derecho en el fotograma clave después del cual desea colocar un nuevo marco y seleccione Insertar marco en el menú contextual; un cuadro simple se muestra en el diagrama de tiempo como un rectángulo claro;
• convertir un fotograma clave en uno simple; realizado utilizando el comando Borrar fotograma clave incluido en el menú contextual; el contenido del fotograma clave "borrado" y todos los fotogramas simples antes del fotograma clave posterior se reemplazan con el contenido del fotograma que precede al fotograma clave "borrado";
• copiar uno o más fotogramas; realizado utilizando los comandos del menú contextual Copiar fotogramas y Pegar fotogramas; la inserción se puede realizar después de cualquier fotograma clave;
• mover uno o más cuadros; realizado utilizando los comandos del menú contextual Cortar fotogramas y Pegar fotogramas; la inserción se puede realizar después de cualquier fotograma clave;
• eliminar uno o más cuadros; Para eliminar un marco, haga clic derecho sobre él y seleccione Eliminar marcos en el menú contextual;
• cambiar el orden de los fotogramas al revés (inverso); Para realizar esta operación, seleccione una secuencia de fotogramas (debe comenzar y terminar con un fotograma clave) y seleccione el comando Invertir fotogramas en el menú contextual. Intente, por ejemplo, utilizar esta operación para "restaurar" la bola rota del ejemplo comentado anteriormente.

También puede cambiar las propiedades de un marco individual usando el panel inspector de Propiedades del marco. Para cualquier fotograma "estático" (es decir, un fotograma que no forma parte de la animación interpolada), este panel contiene el mismo conjunto de elementos (Fig. 6.6):

• campo de texto (Etiqueta de fotograma), para introducir el nombre (o etiqueta) del fotograma; el mecanismo de etiquetas introducido permite implementar la navegación entre fotogramas de la película, gracias a la cual un visitante del sitio puede volver a uno u otro fotograma; el mecanismo de transición en sí se implementa como un script en ActionScript; la tecnología para crear un script en ActionScript se analiza en el capítulo undécimo;
• la lista desplegable Interpolación, que contiene una lista de posibles formas de utilizar la animación interpolada; Hay tres formas de este tipo:
  • Ninguno: no se utiliza animación interpolada;
  • Movimiento: animación de movimiento interpolada;
  • Forma: animación interpolada de transformación de objetos;
• la lista desplegable Sonido, que le permite seleccionar y asociar un símbolo de sonido con un marco; si no hay ningún sonido asociado con ningún cuadro de la película, entonces la lista contiene un solo elemento: Ninguno; el uso del sonido en la película se analiza en el capítulo undécimo; todos los demás elementos relacionados con la configuración de los parámetros de sonido están disponibles solo después de asignar un símbolo de sonido al cuadro;
• un botón sin nombre, pero con una explicación larga: Editar el script de acción para este objeto (Editar el script para este objeto), al hacer clic en él, aparece el panel del editor de ActionScript.

Arroz. 6.6. Inspector de propiedades de marco estático

Administrar los modos de visualización de fotogramas

En muchos casos, es conveniente ver el contenido de todos los fotogramas clave de la animación en la mesa al mismo tiempo. Destello proporciona varias opciones para tal combinación. La elección de la opción se realiza mediante los botones ubicados en el borde inferior del panel del diagrama de tiempo (Fig. 6.7):

• Piel de cebolla (papel de calco): habilita el modo de visualización simultánea de varios fotogramas; en este caso, el marco activo (en el que está instalado el cabezal de lectura) se muestra a todo color y el resto, más descolorido (Fig. 6.8 a); por defecto se muestran tres cuadros simultáneamente: el activo y dos adyacentes; el rango mostrado está marcado en la escala del diagrama de tiempo con marcadores especiales (ver Fig. 8.7); los marcadores son interactivos: moviéndolos con el mouse, puede cambiar los límites del rango; en este modo, sólo el fotograma activo está disponible para editar;

Arroz. 6.7. Botones para controlar la visualización de fotogramas de animación.

• Contornos de piel de cebolla (Contornos en papel de calco): habilita un modo en el que los marcos adyacentes al activo están representados únicamente por contornos (Fig. 6.8 b); en este modo, sólo el fotograma activo también está disponible para editar;
• Editar varios fotogramas: habilite un modo en el que todos los fotogramas visibles estén disponibles para editar; todos los marcos se muestran a todo color (Fig. 6.8 c);
• Modificar marcadores de cebolla: al hacer clic en el botón se abre un menú con el que se pueden cambiar los parámetros de los marcadores de límites (Fig. 6.9):
  • Mostrar siempre marcadores: los marcadores siempre están presentes en la línea de tiempo, independientemente de si los botones de control de vista están habilitados;
  • Marcas de cebolla ancla: los marcadores de borde están bloqueados en su posición actual; seleccionar esta opción evita que los marcadores se muevan cuando cambia el marco activo;
  • Cebolla 2 (2 son visibles): en la mesa se muestran dos cuadros adyacentes al activo (a la derecha y a la izquierda);
  • Cebolla 5 (5 visibles): se muestran cinco cuadros en la mesa a la derecha e izquierda del cuadro activo;
  • Cebolla Todo: todos los fotogramas de animación se muestran en la mesa.

Arroz. 6.8. El efecto de utilizar diferentes modos de visualización de fotogramas.

Arroz. 6.9. Menú con comandos para cambiar los parámetros del marcador de límites

Comentario

Tenga en cuenta que cuando hace clic en el icono de fotograma clave en el panel de tiempo (y, por lo tanto, lo selecciona), aparece una imagen correspondiente al fotograma seleccionado en la tabla. En este caso, todos los objetos gráficos que forman el marco también se muestran como seleccionados.

Animación automática del movimiento de objetos.

Flash puede crear dos tipos de animación interpolada:

• animación de movimiento (interpolación de movimiento);
• Animación de transformación de objetos (interpolación de formas).

Crear animación de movimiento interpolada

La animación de movimiento se puede generar automáticamente para una instancia de símbolo, grupo o campo de texto.

Al crear una animación en movimiento, debe establecer atributos del objeto como la posición en la mesa, el tamaño, la rotación o el ángulo de inclinación para un cuadro determinado y luego cambiar los valores de estos atributos en otro cuadro. Destello interpola valores de atributos variables para fotogramas intermedios, creando el efecto de un movimiento o transformación secuencial.

Puede crear interpolaciones de movimiento utilizando uno de dos métodos:

• usando el panel inspector de propiedades del marco;
• utilizando el comando Crear interpolación de movimiento.

Para describir ambas opciones, usaremos el ejemplo más simple: supongamos que necesitas “hacer rodar” una bola sobre la mesa de izquierda a derecha.

Entonces, para animar el movimiento de la pelota usando el Inspector de propiedades del marco, debes realizar los siguientes pasos.

1. Asegúrese de que el panel Inspector de propiedades esté presente en la pantalla (su formato no importa en este paso). Si está cerrado, seleccione Propiedades en el menú Ventana de la ventana principal.
2. Active la herramienta Óvalo y dibuje una bola en el lado izquierdo de la mesa; Tenga en cuenta que el primer fotograma del diagrama de tiempos ahora está marcado como fotograma clave.
3. Active la herramienta Flecha, seleccione la bola y agrupe (combine en uno) el contorno y el relleno de la bola usando el comando Agrupar, que se incluye en el menú Modificar de la ventana principal. Destello; Como resultado, la bola quedará encerrada en un marco resaltado en azul.
4. Haga clic derecho en la celda del fotograma en la línea de tiempo en el que desea convertir el último fotograma de la animación (por ejemplo, el décimo) y seleccione Insertar fotograma clave en el menú contextual; Como resultado, el espacio entre el primer y el último fotograma clave se rellenará con celdas de un solo color (gris claro) de fotogramas simples, como se muestra en la Fig. 6.10.
5. Arrastra la pelota a una nueva posición en el lado derecho de la mesa.
6. Haga clic izquierdo en la primera celda del fotograma clave; esto dará lugar a que se realicen dos acciones simultáneamente: la imagen de la bola se moverá a su posición original y el formato del panel Inspector de propiedades cambiará: mostrará los parámetros del (primer) fotograma seleccionado.
7. En el panel Inspector de propiedades, seleccione Movimiento en la lista desplegable Interpolación; al mismo tiempo, el formato del panel cambiará y aparecerán elementos de la interfaz que le permitirán configurar los parámetros de animación; Si bien no nos interesan, mucho más importantes son los cambios que se han producido en el diagrama de tiempo: el primer y el último fotograma clave ahora están conectados por una flecha sobre un fondo lila (Fig. 6.11). Esto indica que la animación se ha completado con éxito.

Arroz. 6.10. Vista del panel del diagrama de tiempos después de completar el cuarto paso

Arroz. 6.11. Vista del panel de la línea de tiempo una vez completada la animación

Si aparece una línea de puntos en el panel del gráfico de tiempos en lugar de una flecha, entonces has hecho algo mal. Eche un vistazo al panel Inspector de propiedades del marco: si aparece un botón con una señal de advertencia (Figura 6.12), entonces Flash está intentando informarle al respecto. Haga clic en este botón para abrir una ventana que explica la situación.

Arroz. 6.12. Vista panel inspector de propiedades del marco cuando hay un error

Hay dos posibles razones principales para el error: o está intentando animar objetos desagrupados (en este ejemplo, un contorno y un relleno), o la capa contiene más de un objeto o símbolo agrupado.

En muchos casos, basta con retirar el objeto sobrante para Destello realizó la animación. Si esto no sucede, después de corregir el error, repita nuevamente el procedimiento para crear una animación interpolada.

Para reproducir una caricatura, se utilizan las mismas herramientas que para la animación cuadro por cuadro: simplemente presione una tecla (Es mejor deseleccionar la bola primero, aunque esto no es necesario).

Para animar el movimiento de la pelota usando el comando Crear interpolación de movimiento, debe realizar los siguientes pasos (asumimos que la pelota ya está presente en el primer cuadro).

1. Haga clic derecho en la celda del primer fotograma y seleccione Crear interpolación de movimiento en el menú contextual; en este caso, la imagen de la pelota se convertirá automáticamente en un símbolo gráfico con el nombre tweenl (un signo visual de la transformación es la aparición de un punto de anclaje en el centro de la pelota y un marco resaltado).
2. Haga clic derecho en la celda del fotograma que desea que sea el último en la secuencia de animación (por ejemplo, el décimo) y seleccione Insertar fotograma en el menú contextual; Como resultado, aparecerá una línea de puntos entre el primer y el último fotograma, como se muestra en la Fig. 6.14.
3. Mover la pelota a una nueva posición (al lado derecho de la mesa); en este caso, el último fotograma de la animación se convertirá automáticamente en un fotograma clave (aparecerá un punto negro en la celda) y la línea de puntos será reemplazada por una línea con una flecha (Fig. 6.15).

Arroz. 6.14. Vista del panel del diagrama de tiempos después de ejecutar los comandos Insertar fotograma

Arroz. 6.15. Vista de ventana flash una vez completada la animación

La creación de la animación ya está completa. Si ahora observa el panel Inspector de propiedades del marco, verá que Movimiento está seleccionado en la lista Interpolación.

Comentario

Tenga en cuenta que, como resultado de la creación de una animación de movimiento interpolada mediante el comando Crear interpolación de movimiento, todos los fotogramas del diagrama de tiempo se designan como animados interpolados, mientras que cuando se utiliza el Inspector de propiedades, el último fotograma sigue siendo "solo una clave" (consulte la Fig. .6.11). Tener un fotograma clave de este tipo proporciona una mayor flexibilidad a la hora de editar la película más adelante.

Cambiar la configuración de animación de movimiento interpolada

Después de crear una animación interpolada usando Flash, puede ajustar algunos de sus parámetros. La forma más sencilla de editar los parámetros de animación es utilizar el panel Inspector de propiedades del marco. En este caso, se debe tener en cuenta la siguiente circunstancia. Aunque todos los fotogramas de la animación interpolada aparecen como una unidad en el gráfico de tiempos, puede seleccionar cualquiera de ellos individualmente haciendo clic en la posición adecuada en el gráfico de tiempos. Como resultado, aparecerá una imagen relacionada con este marco en la tabla y los parámetros de este marco aparecerán en el panel Inspector de propiedades.

Antes de pasar a la descripción de las posibles formas de editar una caricatura, es necesario hacer una nota importante. Todas las operaciones estándar de transformación de objetos que se realizan utilizando las herramientas del panel Herramientas (por ejemplo, inclinar, cambiar el tamaño, convertir un círculo en un óvalo, etc.) no se tienen en cuenta al crear una animación automática. Destello

Entonces, para un cuadro incluido en una animación de movimiento interpolada, se pueden configurar los siguientes parámetros en el panel Inspector de propiedades (Fig. 6.16):

• la capacidad de escalar (reducir o ampliar) un objeto; para habilitar esta opción de animación automática, marque la casilla de verificación Escala;

Arroz. 6.16. Formato del panel Inspector de propiedades para un fotograma de interpolación de movimiento interpolado

• tasa de cambio; De forma predeterminada, los cambios ocurren a una velocidad constante, pero puedes controlar esto cambiando los valores del parámetro Easing: los valores negativos de este parámetro (de -1 a -100) significan que los cambios se acelerarán gradualmente. , y los valores positivos (de 1 a 100), por el contrario, significan una desaceleración paulatina de los cambios;
• la capacidad de animar la rotación de un objeto; la selección, dirección y duración de la rotación se realiza utilizando la lista desplegable Girar y el campo de texto de tiempos ubicado al lado; La lista Rotar tiene las siguientes opciones:
  • Ninguno (sin rotación): no se utiliza la animación de rotación (la opción está configurada de forma predeterminada);
  • Automático: el objeto gira en la dirección que requiere la menor cantidad de movimiento;
  • CW (en el sentido de las agujas del reloj): el objeto gira en el sentido de las agujas del reloj; el número de revoluciones se especifica en el campo de tiempos;
  • CCW (en sentido antihorario): el objeto gira en sentido antihorario; el número de revoluciones se especifica en el campo de tiempos;
• la capacidad de especificar una trayectoria no lineal (arbitraria) del movimiento de un objeto; proporcionado marcando la casilla Orientar a la ruta; los parámetros de trayectoria adicionales se ajustan usando las banderas Sync (Sincronización) y Snap; El procedimiento para describir la ruta de movimiento de un objeto se analizará con más detalle en el próximo capítulo.

Echemos un vistazo más de cerca al procedimiento para animar el cambio de tamaño de objetos. Para ello, volvamos al ejemplo de la pelota. Supongamos que cuando llegue al borde derecho de la mesa, debería disminuir. La solución al problema es realizar las siguientes acciones:

1. Haga clic derecho en la celda del último (décimo) fotograma de la sección de animación anterior y seleccione el comando Crear interpolación de movimiento en el menú contextual.
2. Haga clic derecho en la celda del fotograma que desea que sea el último en la nueva secuencia de animación (por ejemplo, el número 20) y seleccione Insertar Keyrame en el menú contextual; como resultado, aparecerá una línea con una flecha entre los cuadros 10 y 20 (como se muestra en la Fig. 6.17) y la bola permanecerá encerrada en un cuadro resaltado.
3. Active la herramienta Free .Transform en el panel Herramientas y reduzca el tamaño de la bola (también puede "aplanarla" un poco;).

Todo. El proceso está completo. Ya sólo queda comprobar el resultado pulsando la tecla .

Arroz. 6.17. Vista del diagrama de tiempos después de crear el segundo segmento de la secuencia animada.

Combinando animación cuadro por cuadro y automática

La animación stop-motion y automática se puede utilizar en la misma película e incluso en el mismo objeto. Además Destello No importa en absoluto el orden en que se alternarán.

Expliquemos la técnica de combinar animación cuadro por cuadro y automática al describir el comportamiento de un objeto usando el ejemplo de la misma bola. La trama de la película es bastante simple: una bola rueda sobre una mesa, luego cae y se rompe. La primera parte de esta entretenida historia estará basada en animación interpolada, la segunda --basado cuadro por cuadro. De hecho, ambos fragmentos ya fueron creados por nosotros anteriormente, y ahora solo queda combinarlos en una sola película.

Entonces, para conseguir una película que combine ambos tipos de animación, es necesario:

1. Describe el movimiento de la pelota a través de la mesa usando una animación interpolada (después de realizar este procedimiento, la ventana del diagrama de tiempo debería verse como se muestra en la Fig. 6.11).
2. Haga clic derecho en la celda del fotograma que sigue al último fotograma de la animación interpolada (para este ejemplo, en la celda del fotograma 11) y seleccione el comando Insertar fotograma clave en el menú contextual; en este caso, la opción Ninguno (no usar animación interpolada) se seleccionará automáticamente en la lista Interpolación del inspector de propiedades.
3. Mueve la imagen de la pelota al final de la mesa.
4. Cree los fotogramas clave de animación fotograma a fotograma restantes como se describe en la sección "Animación de fotograma detenido"; Después de crear el fotograma final, la ventana del editor debería verse similar a la que se muestra en la Fig. 6.18.

Arroz. 6.18. Diagrama de tiempo de una película que combina stop-motion y animación interpolada.

Comentario

Si se crea una película basada en películas creadas anteriormente, simplemente puede copiar los fotogramas necesarios en una nueva película usando los comandos Soru y Pegar. Al mismo tiempo, el contenido del metraje se transferirá a la nueva película. Si los fotogramas copiados usan símbolos, se agregarán a la biblioteca de la nueva película.

En conclusión, daremos otro pequeño ejemplo que ilustra las características del uso de animación de movimiento interpolada para bloques de texto. En este ejemplo no hay movimiento como tal; simplemente se utiliza como fotograma final de la animación una imagen reflejada del texto obtenido con la herramienta Transformación libre. Y así es como se ven los marcos intermedios creados. Destello(Figura 6.19).

Arroz. 6.19. Ejemplo de animación de movimiento interpolada para bloques de texto

Animación automática de transformación de objetos.

Usando la animación de transformación, puedes crear el efecto de un objeto que "fluye" suavemente de una forma a otra. Además, la forma resultante puede no tener absolutamente nada en común con la original. Por ejemplo, en el sistema de ayuda electrónica. Destello Se da un ejemplo de “transformación” (figura 6.20).

Arroz. 6.20. Ejemplo de transformación de objetos

Repitamos una vez más que animar operaciones estándar de modificación de objetos que se realizan utilizando las herramientas del panel Herramientas (inclinación, cambio de tamaño, etc.) no se considera en Destello como operaciones de transformación y se pueden agregar como cambios "acompañantes" al crear una animación del movimiento de un objeto.

Consejo

Generalmente el mejor efecto visual. Destello proporciona si no se transforma más de un objeto al mismo tiempo. Si necesita transformar varios objetos simultáneamente, todos deben ubicarse en una capa.

Flash no puede animar automáticamente la transformación de caracteres, objetos agrupados, campos de texto y mapas de bits. Para que los objetos de estos tipos estén disponibles para la transformación automática, debe aplicarles un procedimiento de separación.

Crear una animación de transformación interpolada

Si decide incluir animación de transformación interpolada en su película, tenga en cuenta lo siguiente. Por defecto Destello intenta hacer la transición de una forma a otra “por el camino más corto”. Por lo tanto, los fotogramas intermedios pueden resultarle bastante inesperados. Como ilustración de lo dicho a continuación, hay un dibujo (Fig. 6.21), que muestra un cuadro intermedio de la transformación del "reloj" que ya le resulta familiar. Aquí, con la ayuda de una animación interpolada, el minutero intenta "arrastrarse" del 12 al 6 mediante el "atajo".

A diferencia de las interpolaciones de movimiento, las interpolaciones de transformación interpoladas solo se pueden crear de una manera: utilizando el panel Inspector de propiedades del marco.

Para explicar la tecnología para crear dicha animación, volvamos al ejemplo del "reloj": supongamos que desea mover el minutero de "12" a "6".

Para resolver este problema, debe realizar los siguientes pasos.

1. Asegúrese de que el panel Inspector de propiedades esté presente en la pantalla. Si está cerrado, seleccione Propiedades en el menú Ventana de la ventana principal.

Arroz. 6.21. Un ejemplo de un fotograma intermedio para una animación de transformación interpolada

1. Active la herramienta Óvalo y úsela para dibujar todos los elementos del "reloj" que se muestra en la Fig. 6.21, izquierda.
2. Active la herramienta Flecha y seleccione la imagen que desea transformar.
3. Haga clic derecho en la celda del fotograma que desea que sea el último en la animación (por ejemplo, el décimo) y seleccione el comando Insertar fotograma clave en el menú contextual; Como resultado, entre el primer y el último fotograma aparecerá una secuencia de fotogramas grises simples en el diagrama de tiempo, como se muestra en la Fig. 6.22, arriba.
4. Reemplace la imagen original en la mesa por aquella en la que debería transformarse; En el ejemplo que estamos considerando, todo lo que necesita hacer es usar la herramienta Transformación libre para rotar el minutero y moverlo a una nueva posición.
5. Haga clic derecho en la celda del primer cuadro de la animación; Esto tendrá dos efectos: la imagen original aparecerá en la tabla y el formato del panel Inspector de propiedades cambiará.
6. En la lista desplegable Interpolación, seleccione la opción Forma; como resultado, el primer y último cuadro de la animación en el diagrama de tiempo estarán conectados por una flecha sobre un fondo verde claro (Fig. 6.22, a continuación); esto indica que la animación se ha completado con éxito.

Arroz. 6.22. Vista del diagrama de tiempo al animar la transformación de un objeto

Al seleccionar Forma en la lista Interpolación se cambia el formato del panel Inspector de propiedades. Con su ayuda, se pueden configurar los siguientes parámetros adicionales para la animación de transformación de objetos (Fig. 6.23):

• tasa de cambio; De forma predeterminada, los cambios ocurren a una velocidad constante, pero puedes controlar esto cambiando los valores del parámetro Facilidad: los valores negativos de este parámetro (de -1 a -100) significan que los cambios se acelerarán gradualmente. arriba, y valores positivos (de 1 a 100), por el contrario, significan una desaceleración gradual de los cambios;
• método de transformación; está determinado por el valor seleccionado en la lista Mezcla:
  • Distributivo - Destello crea animaciones en las que las formas intermedias son más suaves;
  • angulares-- Destello crea una animación que conserva ángulos obvios y líneas rectas en formas intermedias.

Arroz. 6.23. Opciones de animación de transformación de objetos

Comentario

Tenga en cuenta que no se requiere una transformación de objeto para crear una animación (además, esta prohibido) agrupa el contorno y el relleno, así como otros elementos de la imagen a transformar. Todo lo que necesitas hacer es simplemente seleccionar todos estos elementos usando la herramienta Flecha.

Aplicar puntos de anclaje de forma

Para controlar cambios de forma más complejos, se utilizan las llamadas sugerencias de forma, que determinan cómo se transferirán los fragmentos de la forma original a la nueva forma. En otras palabras, los puntos de anclaje se utilizan para identificar aquellos puntos de la forma original cuyas posiciones relativas deben conservarse. El ejemplo más típico de uso de puntos de anclaje es la animación de expresiones faciales, en las que algunas partes (ojos, en particular) no deben participar en la transformación. En la Fig. La Figura 8.24 muestra dos opciones de transformación: sin disposición y con disposición de puntos nodales. En la segunda opción, los ojos no sufren transformación.

Arroz. 6.24. Un ejemplo de transformación sin colocación y con colocación de puntos de anclaje.

Los puntos nodales se indican en la imagen mediante pequeños círculos con letras. Las letras (de la a a la z) se utilizan como nombres (identificadores) de los puntos de anclaje. Cada punto de nodo en la imagen original debe tener un punto correspondiente con el mismo nombre en la imagen resultante. En total, no se pueden utilizar más de 26 puntos de anclaje para una figura (según el número de letras del alfabeto). Los puntos nodales de la imagen original están coloreados. amarillo, el resultante es verde.

Para colocar puntos de anclaje es necesario hacer lo siguiente:

1. Haga clic izquierdo en la celda del marco correspondiente a la imagen original.
2. En el menú Modificar, seleccione el menú en cascada Forma y, en él, el comando Agregar sugerencia de forma; Como resultado, aparecerá en la imagen un "espacio en blanco" del primer punto nodal: un círculo rojo con la letra a.
3. Muévelo con el mouse al punto de la imagen que deseas marcar como nodo.
4. Haga clic izquierdo en la celda del marco correspondiente a la imagen resultante; Habrá un círculo rojo sobre la mesa con la misma letra que en el marco original.
5. Mueva el círculo a un punto de la imagen que debe corresponder al marcado en el marco original; Después de mover el círculo cambiará de color a verde.
6. Vuelva al primer fotograma de la secuencia animada y asegúrese de que el color del punto de anclaje haya cambiado a amarillo.
7. Si necesita continuar colocando puntos de anclaje, repita el procedimiento descrito para cada uno de ellos.

Notas

1. Sólo es posible organizar los puntos de anclaje después de crear una animación de transformación interpolada.
2. La colocación de los puntos de anclaje debe realizarse utilizando la herramienta Flecha con el modificador Ajustar a objetos habilitado.

Consejo

Si utiliza varios puntos de anclaje durante la transformación, colóquelos en el sentido de las agujas del reloj, comenzando desde la esquina superior izquierda de la imagen. Esto se debe a que Flash procesa los puntos de anclaje en orden alfabético.

Después de disponer los puntos nodales, es aconsejable realizar una prueba de la película y, si es necesario, ajustar la ubicación de los puntos. Para cambiar la posición de un punto de anclaje, simplemente arrástrelo a una nueva ubicación (esto se puede hacer en el primer o último fotograma de la secuencia). Además, siempre podrás eliminar puntos innecesarios o añadir otros nuevos. Una vez que esté satisfecho con el resultado, puede ocultar (ocultar) los puntos de anclaje. Las operaciones enumeradas se realizan más cómodamente utilizando el menú contextual. Para abrirlo, haga clic derecho en uno de los puntos de anclaje. El menú contiene cuatro comandos (Fig. 6.25), de los cuales los tres primeros están disponibles sólo para los puntos de anclaje de la imagen de origen:

• Agregar sugerencia: cuando se ejecuta el comando, aparece un espacio en blanco de un nuevo punto de anclaje en la tabla;
• Eliminar sugerencia: se eliminará el punto de anclaje en el que hizo clic derecho para abrir el menú;
• Eliminar todas las sugerencias: elimina todos los puntos de anclaje;
• Mostrar sugerencias: este modo se utiliza de forma predeterminada (hay un marcador al lado del nombre del comando); seleccionarlo nuevamente hará que los puntos de anclaje se vuelvan invisibles; Esta opción debe usarse solo después de lograr el resultado deseado, ya que para volver al modo de mostrar puntos de anclaje deberá seleccionar el comando Agregar sugerencia de forma del menú Modificar. cantidad requerida.

Arroz. 6.25. Menú contextual del punto de anclaje

Hola queridos lectores. en su articulo Hablé sobre el uso de líneas de velocidad, con las que puedes crear la ilusión de un objeto que se mueve con aceleración. También en el artículo Se demostró una técnica utilizando animación de movimiento estándar y un relleno degradado durante la aparición del objeto. Si no recuerdas o no has leído estos artículos, te aconsejo que los leas. Hoy quiero continuar con el tema de la animación en movimiento en Adobe Flash y mostrar no el movimiento lineal de los objetos, como antes, sino el movimiento a lo largo de una trayectoria.

Primero, demostraré cómo funciona esta técnica mediante un ejemplo sencillo.

Crear nuevo documento tamaño 600 por 200 píxeles. Nombralo Primero_animado. Color de fondo azul o cualquier otro. Para aquellos que no lo recuerdan, primero deben crear un nuevo documento Action Script 3.0. (Archivo - Nuevo Ctrl + N). Y luego en el panel de propiedades. (Ctrl+F3) establezca el tamaño de la ventana de trabajo y el color de fondo.

Cambie el nombre de la primera capa a " Un objeto". Crea un óvalo en él ( oh). Sin deseleccionar el objeto. presione la tecla F8 y asignarlo como símbolo. Nombre objeto1.

Crea una segunda capa encima de " Un objeto", nombralo " Trayectoria". Sobre esta capa, dibuja la trayectoria de la pelota con un lápiz.

Haga clic derecho en la capa " Trayectoria" y seleccione " Guía". Aparecerá un icono de martillo a la izquierda. Ahora tira la capa "Un objeto" debajo de la capa " Trayectoria“, de esta manera los conectarás entre sí.

Ahora volvamos al área de trabajo. Coloca nuestro objeto al comienzo del camino. Crear fotogramas clave para la capa. "Un objeto" y capa "Trayectoria" en el cuadro 30. Coloca la pelota al final del camino. (EN Versión de demostración Vista de capa de estructura alámbrica habilitada "Un objeto").

Ahora haga clic derecho en el primer fotograma de la capa " Un objeto" y seleccione " Crear una interpolación de movimiento clásica". Después de esto podemos probar nuestra animación ( Ctrl + Entrar).

Ahora, veamos qué podemos hacer con este conocimiento. Déjame darte otro ejemplo sencillo. Asumamos. que necesitamos dibujar una cometa. que vuela por el cielo.

Creemos un nuevo documento de tamaño. 600 por 200 píxeles. Rellénelo con un degradado de azul a amarillo. Para hacer esto, creemos una capa al principio, a la que llamaremos " Fondo“, dibuja un rectángulo del tamaño completo del área de trabajo (es decir, 600 por 200 píxeles) y rellénalo con un degradado. Ya escribí en el artículo cómo trabajar con degradados.

Haga clic en "Insertar - Crear símbolo (ctrl + F8)". Establecer un nombre cometa. Dibuja una cometa. Esto no es difícil de hacer, parece un rombo.

Para que nuestra cometa parezca realista. Definamos su movimiento en el propio símbolo. cometa. Esta será la cometa balanceándose hacia arriba y hacia abajo y las cintas desarrollándose. Haremos el balanceo a expensas de , desarrollaremos cintas a expensas de . Primero nos ocuparemos de las cintas. Su animación será similar a la animación del contorno del formulario (las cintas, por cierto, se dibujan con la herramienta Cepillar y son adecuados para esta manipulación), sobre lo que escribí en el artículo

Tomaremos a este gato como personaje. Estará atento a que el ratón aparezca en el encuadre y meneará la cola.

El personaje consta de los siguientes objetos ubicados en diferentes capas:

La animación del ojo ya está lista en un símbolo separado. Ahora nos interesa la animación de la cola. Por lo tanto, podemos extender de forma segura la animación en ellos al número requerido de fotogramas, por ejemplo, 20 ( utilizar f5) y bloquear las capas que no necesitamos para que no estorben.

Ahora la cola. En el primer cuadro tenemos la primera posición de la cola, en el 10 haremos la segunda posición. Simplemente reflejé la cola de izquierda a derecha. Modificar – Transformar – Voltear de izquierda a derecha.

En la capa "Cola" del fotograma 5, cree un fotograma clave vacío. Para hacer esto, haga clic en él con el botón izquierdo del mouse y presione F6. A continuación, haga clic en Eliminar para eliminar todo el contenido. Aquí tendremos líneas de velocidad. Para mayor comodidad, active el botón " Estructura multicapa"o como también se le llama "cáscara de cebolla", ajusta su rango entre los dos estados de nuestra cola.

En el quinto cuadro, usa un pincel para dibujar líneas de velocidad, teniendo en cuenta que serán más realistas en el color del objeto en sí, bueno, el nuestro es negro, puedes agregar un poco de gris para variar. Haz las líneas para que no vayan más allá de los límites del objeto.

Ahora necesitamos hacerlo más realista. Para hacer esto, primero configuraremos una pequeña animación de la forma de la cola. Tome el cuadro 3 como cuadro clave, cambie la forma de la cola del gato e inclínela ligeramente hacia la derecha. Luego haga clic derecho en el primer cuadro y agregue animación de formularios.

Ahora hagamos lo mismo con el segundo estado de la cola. En el fotograma 13, cree un fotograma clave (F6). Ve al cuadro 10, cambia un poco la cola e inclínala hacia la izquierda. Luego, para el cuadro 10, cree animación de formularios.

Ahora editemos un poco los marcos. Eliminemos los innecesarios. Para hacer el movimiento más natural. Y repitamos los fotogramas en orden inverso.

Lección 4. Creando Animación

Macromedia Flash MX 2004 proporciona varias formas de crear secuencias de animación:

Efectos de animación: el programa mismo crea una secuencia de cuadros que simula un efecto particular en relación con un objeto determinado;

Animación cuadro por cuadro: el usuario crea cada cuadro de la animación futura;

Animación interpolada automática, o animación de transformación: el usuario especifica los fotogramas inicial y final, y el programa mismo crea fotogramas intermedios basándose en la interpolación del software.

Efectos de animación

Flash MX 2004 incluye efectos de animación prediseñados (efectos de línea de tiempo) que le permiten crear animaciones complejas utilizando cantidad minima comportamiento. Puedes usar la función Efectos de línea de tiempo a los siguientes objetos:

Objetos gráficos, incluidas formas, objetos agrupados y símbolos gráficos;

Imágenes rasterizadas;

Cuando agrega efectos de animación a un objeto, Flash crea automáticamente una capa adecuada y todas las transformaciones de movimiento y forma necesarias para ese efecto se implementan en esa capa. La nueva capa recibe automáticamente el mismo nombre que el efecto.

Como ejemplo, creemos un efecto de "explosión" en el texto. Para hacer esto, escriba alguna frase o palabra (Fig. 1), selecciónela usando la herramienta Flecha y ejecute el comando Insertar => Efectos de línea de tiempo => Efectos => Explosionar.

Arroz. 1. Objeto de texto seleccionado

Como resultado, aparecerá un panel con el mismo nombre (Fig. 2), que brinda la posibilidad de configurar una serie de parámetros de efectos.

Arroz. 2. Panel de explosión

La presencia de una ventana de vista previa le permite analizar diferentes variaciones de efectos sin salir del panel. Explotar. Una vez que haya seleccionado las opciones requeridas, haga clic en el botón DE ACUERDO y obtendrás algo como esta animación.

Se pueden aplicar efectos similares a una imagen rasterizada. Consideremos un ejemplo con la desaparición suave de una imagen rasterizada. Importar un mapa de bits a la escena usando un comando Archivo => Importar => Importar al escenario(Fig. 3) y aplique el efecto Desenfoque al comando Insertar => Efectos de línea de tiempo => Efectos => Desenfocar clip de vídeo .

Arroz. 3. Mapa de bits importado a la escena.

Para editar un efecto de animación, seleccione el objeto asociado con el efecto en el escenario y en la ventana que aparece Propiedades clic en el botón Editar(Fig.4) - como resultado, aparecerá un panel Difuminar.

Arroz. 4. Botón Editar ubicado en la parte inferior del panel Propiedades

en el panel Difuminar puede cambiar los parámetros del efecto nuevamente y guardar la nueva configuración (Fig. 5).

Arroz. 5. Panel Difuminar le permite cambiar la configuración del efecto

Animación stop motion

Consideremos el ejemplo más simple: una hoja de papel se mueve de un punto a otro de la pantalla girando alrededor de su eje.

Arroz. 6. Primer fotograma clave de la animación.

Dibujemos, por ejemplo, una hoja de arce, como se muestra en la Fig. 6, - marco correspondiente en el panel Línea de tiempo se volverá gris y aparecerá un punto dentro de él, lo que indica que se trata de un fotograma clave. Un fotograma clave es un fotograma en el que se coloca o cambia el contenido.

Arroz. 7. Crea el segundo cuadro arrastrando y transformando el primero.

Luego haga clic derecho en el cuadro adyacente e inserte otro cuadro clave usando el comando Insertar fotograma clave. Como resultado, aparecerá una copia de la hoja en este cuadro; muévalo hacia abajo (usando la herramienta Flecha) y gírelo usando el comando Modificar => Transformar => Transformación libre(Figura 7).

Repetimos el procedimiento para que en el 6º fotograma la hoja ocupe su posición final (Fig. 8).

Arroz. 8. Último cuadro de animación.

Presta atención al panel. Propiedades(Fig. 8) - el tipo de objeto se indica en el lado izquierdo. En cada cuadro, la hoja es un objeto de tipo Forma(forma), otros tipos de objetos se discutirán un poco más adelante.

Para exportar una película como un archivo SEF (el formato nativo de Macromedia para películas Flash), ejecute el comando Archivo => Exportar => Exportar película. Como resultado, obtenemos la siguiente película Leave1.fla). Puede ver la película resultante sin salir del programa Flash mediante comando Control => Probar película. Además, para ver cuánto espacio ocupan los fotogramas individuales de la película, debes ejecutar el comando. Como resultado, veremos que cada uno de los seis fotogramas ocupa unos 600 KB (Fig. 9). Por tanto, el tamaño de toda la película es de 3686 bytes.

Arroz. 9. Ver una película en Perfilador de ancho de banda

Para evaluar si esto es mucho o poco, considere cómo se puede hacer una película similar usando animación automática o animación de transformación de movimiento.

Animación automática

Arroz. 10. El objeto se convierte automáticamente en un símbolo gráfico.

Veamos cómo puedes hacer la misma animación y obtener un archivo resultante más compacto. Seleccione la hoja dibujada en la pantalla con la herramienta Flecha y ejecute el comando Insertar => Línea de tiempo => Crear interpolación de movimiento, como resultado, el folleto se colocará en el marco y en el panel. Propiedades Aparecerá un mensaje de que el objeto seleccionado tiene propiedades. Gráfico(Figura 10). Esto significa que el objeto animado se convierte automáticamente en un símbolo gráfico. Ahora ya no es posible editarlo arbitrariamente con la herramienta Flecha como un objeto del tipo Forma. El uso de símbolos es concepto importante en Flash. Una vez creado un símbolo, se puede utilizar varias veces en una película sin aumentar el tamaño del archivo resultante. Los símbolos se dividen en símbolos gráficos, símbolos de botones y símbolos de clips de película. En esta lección veremos un símbolo gráfico y volveremos a otros tipos de símbolos más adelante. Cada nuevo símbolo pasa inmediatamente a formar parte de la biblioteca del documento actual (Fig. 11).

Arroz. 11. Cada nuevo símbolo pasa a formar parte de la biblioteca.

Si ejecuta el comando Ventana => Biblioteca, entonces puede asegurarse de que haya aparecido un símbolo en la biblioteca y que de forma predeterminada tenga asignado el nombre Tween 1. Para asignar un nombre diferente a un símbolo, simplemente haga doble clic en el nombre y reemplácelo con el deseado. Después de haber formado el símbolo gráfico, vayamos al fotograma final de nuestra animación (sea el fotograma 15) e insertemos un fotograma clave (usando el comando Insertar Fotograma clave). En este marco aparecerá una copia del símbolo, que moveremos y rotaremos alrededor de su eje (usando el comando Modificar transformación => Transformación libre), como en el ejemplo anterior. Como se puede ver en la Fig. 12, todos los fotogramas entre dos fotogramas clave son de color azul y una flecha se extiende desde el primer fotograma clave hasta el último, lo que indica la creación de la animación. Interpolación de movimiento.

Arroz. 12. Una flecha sobre fondo azul indica la creación de animación. Interpolación de movimiento

Al ejecutar el comando Control => Probar película, obtenemos la información presentada en la Fig. 13.

Arroz. 13. Ver una película en el modo Bandwidth Profiler

A pesar de que en este ejemplo tenemos 15 fotogramas en lugar de seis como en el anterior, y la animación es más fluida, el tamaño del archivo resultante es menor: sólo 900 bytes. Como puede verse en el diagrama (Fig. 13), la información sobre el objeto se almacena solo en el primer cuadro, y en cada nuevo cuadro es necesario recordar solo las nuevas posiciones de la hoja. Esto ocupa en promedio sólo 20 bytes.

Para ilustrar la caída de una hoja con rotación alrededor del plano de la hoja, repetimos el ejemplo anterior, solo al modificar el último fotograma clave agregamos el comando Modificar => Transformar => Voltear Horizontal. Como resultado, obtenemos la siguiente película.

Ahora veamos un ejemplo cuando una hoja se acerca al espectador. Para hacer esto, en el cuadro final, en lugar de reflejar ( Flip horizontal) aumentaremos el tamaño de la hoja. Para evitar la sensación de ralentización cuando un objeto se acerca al espectador, se debe aumentar la velocidad de su movimiento. Para lograr este efecto, debe hacer clic en el primer cuadro y consultar la sección Facilidad en el panel Propiedades. Los valores positivos para el parámetro Facilidad hacen que el movimiento se ralentice, mientras que los valores negativos hacen que el movimiento se acelere. Elijamos la aceleración máxima del objeto.

Arroz. 14. Seleccione la aceleración máxima del objeto. Facilidad = –100

Para hacer esto, establezca el valor del parámetro. Facilidad igual a –100 (Fig. 14). El resultado es una película. Tenga en cuenta que el primer cuadro también se puede colocar detrás del escenario, luego obtendremos una película en la que la hoja volará dentro del cuadro y se moverá hacia el espectador. Puede simular la rotación de una hoja alrededor de un centro de simetría desplazado. Espero que el propio lector pueda experimentar, haciendo más difícil modificar el fotograma final y cambiando así la naturaleza del movimiento de la hoja.

De los ejemplos presentados se desprende claramente que la animación automática del movimiento es eficaz cuando la transformación de un objeto durante su movimiento se especifica mediante funciones simples (rotación, escala, etc.). Si es necesario animar movimientos complejos (por ejemplo, el movimiento de la mano de un personaje de dibujos animados), entonces la animación de transformación de movimiento no es aplicable. Cada fotograma debe dibujarse manualmente, es decir, se utiliza una animación fotograma a fotograma, que consta de un conjunto de fotogramas clave. Por lo tanto, la animación cuadro por cuadro es el tipo de animación más versátil, pero al mismo tiempo el que requiere más mano de obra; además, crea los archivos más "pesados". Siempre que sea posible reemplazar la animación cuadro por cuadro con animación automática, es preferible hacerlo. Veamos una serie de ejemplos que le permiten utilizar la animación de movimiento automática al simular un vuelo.

Movimiento a lo largo de una trayectoria determinada.

Flash le permite configurar el movimiento de un objeto a lo largo de una ruta determinada. Para establecer esta trayectoria, ejecute el comando Insertar => Línea de tiempo => Guía de movimiento.

Como resultado, aparecerá una capa especial encima de la capa actual, que de forma predeterminada tendrá el nombre Capa guía 1.

Hagamos clic en la capa de trayectoria y usemos la herramienta lápiz para dibujar una línea a lo largo de la cual planeamos mover la hoja (Fig. 15).

Arroz. 15. Ejemplo de especificación de una trayectoria de movimiento.

Ahora vayamos al primer cuadro (haga clic en él con el mouse) y al panel que aparece Propiedades revisa la caja Quebrar(establece el modo de vinculación a la trayectoria del movimiento) - fig. dieciséis.

Arroz. 16. Parámetro Quebrar establece el modo de ajuste a la trayectoria del movimiento

Después de marcar la casilla Quebrar, el centro de la hoja se alineará con la trayectoria del movimiento. Usando la herramienta Flecha, puede mover la hoja a lo largo de la ruta de movimiento, pero si intenta arrancar la hoja del camino y colocarla junto a ella, se retirará y se “pegará” a la ruta de movimiento nuevamente (Fig. 17).

Arroz. 17. El objeto parece adherirse a la trayectoria del movimiento con su centro.

Vaya al último cuadro y ate la hoja de manera similar al punto final de la ruta de movimiento. Para darle volumen a la película, agregue transformación. Flip horizontal, - como resultado obtenemos la película.

Cuando una hoja se mueve a lo largo de una trayectoria, no nos importa cómo girará en la dirección del movimiento. Pero si establecemos de manera similar la trayectoria de vuelo de un pájaro, entonces en algunas partes de la curva resulta que el pájaro vuela primero con la cola.

Evidentemente, si queremos animar el vuelo de un avión o de un pájaro, entonces necesitamos que éste mueva el morro hacia adelante en todo momento. En Flash, este tipo de movimiento es muy fácil de configurar (Fig. 18).

Arroz. 18. Si marcas la casilla Orientar al camino, el pájaro volará de cabeza

Casilla de verificación requerida Orientar al camino, y el movimiento del pájaro cambiará a uno completamente familiar (la fuente de este video es el vuelo de un pájaro.fla).

Arroz. 19. Agregar un fondo de un solo color

Si desea agregar un fondo de un solo color, haga clic en el fondo y en el panel que aparece Propiedades(Fig.19) en el campo Fondo seleccione el color de fondo deseado.

Si queremos agregar una imagen de fondo, necesitaremos una capa separada para ello. En principio, Flash ofrece la posibilidad de crear un sistema de capas similar a los utilizados en la animación clásica, en el que el fondo y varios objetos en movimiento se dibujan cada uno en su propia capa de transparencia.

Al colocar la imagen de fondo y cada objeto animado en su propia capa, es mucho más fácil controlarlos. Entonces, para agregar una imagen de fondo, creemos una nueva capa para ella. Para hacer esto, haga clic derecho en la capa que se muestra en la Fig. 19 se designa como capa 1, y en el menú desplegable seleccione la línea Insertar capa. En la capa agregada dibuja el sol. Para no confundirnos con los números de las capas, le daremos a la capa el nombre "fondo". Para hacer esto, haga clic en el nombre actual e ingrese el nombre requerido (Fig. 20).

Arroz. 20. En una nueva capa, crea un objeto de fondo estacionario.

Como se puede ver en la Fig. 20, el pájaro está detrás del sol, lo que va en contra del sentido común. Para intercambiar capas, simplemente use el modo de arrastrar y soltar para arrastrar la capa llamada "fondo" hacia abajo.

Editemos los objetos de la película (para que el pájaro dé vueltas contra el fondo del sol, cambiemos la trayectoria de su vuelo y cambiemos la proporción de los tamaños del sol y el pájaro) y obtengamos el siguiente video.

Arroz. 21. Para animar la nube, crea una capa separada.

Ahora agreguemos objetos en movimiento a nuestra animación, por ejemplo una nube. Para la nube, cree una nueva capa y configure la animación de transformación de movimiento en ella. Para que la nube entre en escena, la colocaremos como se muestra en la Fig. 21. Como resultado, obtenemos la siguiente película (la fuente de esta película se encuentra en el archivo adjunto

Al crear una animación de movimiento, puede determinar el movimiento de un objeto a lo largo de una trayectoria determinada: a lo largo de una línea recta, a lo largo de una curva discontinua que consta de segmentos de línea recta y a lo largo de una línea curva suave.

Animación de movimiento en línea recta.

Ejemplo 1:
Ver ejemplo 2

Creemos un avión que se mueve en línea recta.

En el cuadro de edición, inserte una imagen de un avión en el lado izquierdo de la escena. Se puede crear una imagen vectorial de un avión en Adobe Flash (ver Dibujo) o importar una imagen creada en el lateral (en formato .png con fondo transparente).

Resalte el avión en la escena. En el menú contextual de la aeronave, seleccione Convertir a símbolo(Convertir a Sumbol). Seleccione el tipo gráfico del símbolo.

En el menú contextual de la imagen, seleccione Crear una animación en movimiento.(Crear interpolación de movimiento). El programa crea automáticamente 24 cuadros para cambios fluidos.
Mueva la imagen al lado derecho de la escena.
Puede ajustar la duración de la animación y más; consulte. trabajar con personal .

Se ha creado una animación del avión moviéndose en línea recta y se puede ver haciendo clic en la tecla Enter.

De este ejemplo podemos sacar las siguientes conclusiones:

La duración de cualquier nuevo intervalo de interpolación que el programa crea automáticamente tiene como valor predeterminado la velocidad de animación establecida. Si la velocidad de animación se selecciona en 24 fotogramas por segundo, de forma predeterminada se creará un área de cambio de 24 fotogramas (1 segundo de animación). Si la velocidad es de 30 fps. - el área de cambio predeterminada será de 30 fotogramas.

Para que el programa cree un desvanecimiento, el objeto insertado en la escena debe convertirse en un símbolo. En este caso, el objeto puede ser cualquier cosa: un dibujo vectorial creado en Adobe Flash, texto, una imagen rasterizada importada, etc. Si está intentando crear un cambio suave en un objeto que no es un símbolo, el programa le pedirá que convierta el objeto. elemento a un símbolo ().

Sólo se puede interpolar un personaje a la vez. Si intenta aplicar un cambio a una capa con múltiples objetos, el programa le pedirá que convierta los símbolos gráficos en un solo símbolo.

Fundido se puede utilizar para cambiar el tamaño/hacer zoom, cambiar colores y aplicar filtros.

Nota: El desvanecimiento para efectos de filtro solo se aplica a símbolos de clip y botón, no a símbolos gráficos.

Notas:
1. Al crear una animación en movimiento clásica, el procedimiento es diferente; consulte. Crear interpolaciones de movimiento clásicas .
2. Crear el movimiento de objetos durante la animación cuadro por cuadro; consulte Animación a intervalos
3. En nuestro ejemplo, el avión se movía dentro de la escena. Pero la posición inicial del avión (u otro objeto) puede estar fuera de escena, mientras que el avión puede aparecer "detrás de escena" (derecha, izquierda, arriba, abajo). Del mismo modo, puede desaparecer del escenario “backstage”. En principio, tanto la posición inicial como la final de un objeto pueden estar fuera de escena, es decir el objeto salta “detrás de escena”, realiza sus trucos en el escenario y desaparece nuevamente “entre bastidores”.

Animaciones de movimiento de curvas.

Hay varias formas de crear movimiento de un objeto a lo largo de una curva:

Método 2
Inserta un cuadrado rojo en la escena.
Cree una interpolación de movimiento del cuadrado (consulte Crear una interpolación de movimiento)
Como resultado, nuestro cuadrado y su camino de movimiento aparecerán en el escenario (en forma de una línea con marcadores).

Puede ajustar la trayectoria del movimiento, influyendo no en la trayectoria en sí, sino en el objeto (como se muestra en la siguiente animación):



Usar este método es simple: haga clic en un fotograma seleccionado en la línea de tiempo (para nosotros son los fotogramas 10, 20 y 30) y mueva el objeto por la escena en consecuencia (sin afectar la curva de la ruta). El programa crea automáticamente fotogramas clave en los fotogramas seleccionados.

Creando tu propia ruta de conducción

1. Inserta un dibujo de un avión en la escena.

2. Convierte el dibujo del avión en un símbolo gráfico.
3. Crea una nueva capa llamada “Ruta”, sobre la cual con un lápiz () dibujamos la trayectoria del avión. La línea del camino no debe cerrarse.

4. Si es necesario, alise la línea del trazado utilizando la herramienta "Suavizar" () en la parte inferior. Barras de herramientas .

5. Seleccione la ruta creada y cópiela al portapapeles. Después de esto, la ruta en sí se puede eliminar.

6. Regrese a la capa plana. Seleccione el avión en el escenario y seleccione " Crear una animación en movimiento."(Crear interpolación de movimiento).

7. Seleccione el plano en la escena, en el menú Editar seleccione "Pegar" o "Pegar en el lugar".
A la imagen del avión se le añade una imagen de la trayectoria de vuelo.

8. Para ver, coloque el control deslizante rojo en el primer cuadro, haga clic en la tecla Enter.

Editar una ruta de movimiento

Puedes transformar la ruta de movimiento de la misma manera que lo harías con cualquier otro objeto gráfico.

Seleccionar herramienta de transformación gratuita(Transformación libre) en la barra de herramientas y haga clic en la ruta de movimiento.
Los marcadores de transformación aparecen alrededor de la ruta de movimiento.

Puede escalar o rotar la ruta de movimiento. Puede crear una curvatura de ruta usando las herramientas de selección y el Convertir punto de anclaje(Convertir punto de ancla): esta herramienta está oculta debajo de la herramienta Pluma.

Haga clic en el punto inicial y mueva el controlador de inicio de selección, que controla la curvatura del trazado.

3 Para corregir la ruta, seleccione la herramienta Subselección en la barra de herramientas.
4 Haga clic y arrastre el controlador para editar la curva de ruta.
Nota: La ruta de movimiento también se puede controlar directamente con la herramienta Selección ().
Seleccione la herramienta de selección () y muévala cerca de la ruta de movimiento. Aparece un icono de curva junto al cursor, lo que indica que puede editar la ruta. Haga clic y arrastre la ruta de movimiento para cambiar la curvatura.

Puede seleccionar un objeto, hacer clic derecho sobre él y seleccionarlo en el menú. Crear una animación en movimiento.. Después de esto, mueva el control deslizante a lo largo de la línea de tiempo y mueva sincrónicamente el objeto a lo largo de la curva creada.

Nota:
Si usted, con su mano temblorosa, dibujó un camino demasiado torpe y al mismo tiempo asignó muy pocos cuadros para moverse a lo largo de este camino, entonces el programa no podrá completar la tarea y repetir todas las curvas del camino.
En este caso, aparecerá un anuncio:
"La curva debe simplificarse para ajustarse al número de fotogramas disponibles en la interpolación de movimiento actual. Elija uno de los siguientes métodos"
O: "La curva debe simplificarse para que coincida con el número de fotogramas disponibles en la animación de movimiento actual. Seleccione uno de los siguientes métodos..." y se presentan dos opciones, la primera de las cuales es simplificar la ruta.

Ver además:
Creando tu propia ruta de animación


Invertir la dirección de viaje

Para hacer que un objeto se mueva desde el punto final al punto inicial, en el menú contextual del objeto, seleccione Trayectoria ( Ruta de movimiento ) - Trayectoria inversa(Camino inverso).

Ver también:

Orientación del objeto al moverse

A veces, la orientación de un objeto que se mueve a lo largo de una trayectoria es importante.
En nuestro ejemplo, el avión debe moverse no solo a lo largo de su trayectoria, sino también girar simultáneamente para que su morro esté en la dirección del movimiento.

1 Haga clic en la capa de interpolación de movimiento en la línea de tiempo. En nuestro ejemplo, esta es la capa "avión".

2. Seleccione la ruta de movimiento usando la herramienta de selección ()

3. Coloque correctamente el objeto en relación con la trayectoria de movimiento en 1ª y últimos fotogramas animación.

4.B inspector de propiedades seleccionar Orientación del camino(Orientarse a la ruta) en la opción de ruta.

El editor inserta los marcos exteriores para rotar a lo largo del suave cambio de movimiento, de modo que el morro del avión esté orientado a lo largo de la trayectoria del movimiento.

El programa agrega automáticamente fotogramas clave, girando el avión a lo largo de su trayectoria.

La línea de tiempo se verá así:

Nota: Para que la opción de orientación funcione correctamente, la aeronave en la posición inicial debe estar correctamente configurada, es decir su nariz debe apuntar a lo largo del camino del movimiento.
Para hacer este uso herramienta de transformación gratuita, gire el avión para posicionarlo correctamente.