EntradaConceptos básicos de animación. Crear y editar unidades flash
En la primera lección del minicurso básico "Conceptos básicos de animación en Actionscript 3.0", aprenderá sobre:
- Que es la animacion
- Cómo lograr la ilusión de movimiento con monturas.
- Acerca de las posibilidades de la animación a intervalos
- Características y beneficios de la animación por software
Adobe Flash es, de hecho, una especie de máquina de animación. Ya en sus primeras versiones, lo creó utilizando el concepto Tween. Es como sigue:
- se crean dos fotogramas clave con contenido diferente en la línea de tiempo (cambian las posiciones de los objetos, su forma, color, etc.);
- Flash crea todos los fotogramas intermedios (de transición) de forma independiente (Fig. 1).
Así es como se ve en Adobe Flash CS6.
Sin embargo, esta lección y el curso en general no se trata solo de Tween, sino de un potente lenguaje integrado en Flash llamado ActionScript. Al estudiarlo, aprenderá muchas cosas útiles y prácticas, especialmente en secciones como imitación de fenómenos físicos del mundo real y cálculos matemáticos... Obviamente, este tipo de conocimiento le dará un control total al crear aplicaciones interactivas, lo que nunca podría lograr con solo Tween.
Pero antes de entrar en trucos, técnicas y fórmulas específicas para ayudarlo a animar objetos con ActionScript, echemos un vistazo más de cerca a la idea de animación, algunas de sus técnicas básicas y cómo se usan en ella, y cómo hacer es más interesante y, lo que es más importante, dinámico.
¿Qué es la animación?
Entonces, ¿qué es exactamente la animación? La definición de este concepto se puede encontrar en muchos diccionarios. Por ejemplo, aquí hay uno proporcionado por Wikipedia:
Traducido al lenguaje cotidiano animación significa movimiento... Si ampliamos un poco esta definición, podemos decir que la animación es un cambio en el tiempo... Esto es especialmente cierto para los cambios visuales (visibles). El movimiento es un cambio de posición en el tiempo.... En un momento dado, el objeto estaba en un lugar y un minuto después en otro. Teóricamente, también se ubicó en puntos intermedios entre los puntos inicial y final a medida que avanzaba el tiempo.
Pero un objeto no tiene que cambiar su posición para ser considerado animado. Simplemente puede cambiar su forma externa. En los 90 (da miedo decirlo, ¡el siglo pasado!) programas de computador quien se transformó.
Por ejemplo, tienes dos imágenes: una niña y un tigre. El programa crea una transición / animación suave entre ellos (morphing).
Se utilizó el software Sqirlz Morph 2.1 para crear esta película flash.
Al transformarse, un objeto también puede cambiar su tamaño o ubicación. Por ejemplo, de esta manera puede crear la ilusión de un árbol en crecimiento, una bola que gira o un cambio en el color de un objeto.
La animación de tiempo es un concepto importante.
Sin movimiento o cambio visible, no hay animación y, por lo tanto, no hay sentido del tiempo para el espectador.
Probablemente hayas visto muchas veces disparar con una cámara, que carece de movimiento, por ejemplo, una habitación vacía o un paisaje urbano.
En tal situación, es difícil decir lo que está frente a usted: una foto o un videoclip ordinario. Cuando lo ve, de repente nota pequeños cambios en el encuadre: un ligero movimiento, un cambio en el flujo de la luz o el movimiento de una sombra. Incluso cambios tan pequeños le dicen claramente que el tiempo corre y que si continúa observando, tal vez algo más cambie. Si durante el siguiente período de tiempo no hay cambios, volverá a sentir que está mirando una fotografía. Por lo tanto, la ausencia de tiempo en el cuadro significa que la imagen no cambiará.
Todo lo anterior nos lleva a una conclusión muy importante: animación, el movimiento despierta interés visual en nosotros.
Todos recuerdan la pintura de Leonardo da Vinci "Mona Lisa", una obra maestra de la pintura, una de las pinturas más famosas de la historia del arte mundial.
Es posible suponer con un alto grado de probabilidad que una persona común se aburrirá después de unos minutos de inspección y muy pronto comenzará a buscar el próximo objeto para "estudiar". Pero, comience a mostrarle el último éxito de taquilla de Hollywood y no se dará cuenta cuando pasen un par de horas. ¡Ese es el poder de la animación!
Cómo crear la ilusión de movimiento en la animación stop motion
Regresemos por un segundo a la definición de animación que vimos arriba:
La animación es técnica crear la ilusión de imágenes en movimiento (movimiento y / o cambiar la forma de los objetos - morphing) utilizando una secuencia de imágenes fijas (fotogramas) que se reemplazan entre sí con una cierta frecuencia.
Los autores de tales definiciones se ven obligados a introducir en ellos la palabra ilusión. A menudo sucede que solo existe la ilusión de movimiento en esos tipos de arte o medios que encontramos en la vida. Por tanto, es el momento de introducir el concepto de personal.
En teoría, todo tipo de animación visual utiliza fotogramas: una secuencia de imágenes o fotografías que se muestra rápidamente al espectador para simular movimiento o cambio.
Lo que ve en una pantalla de computadora, TV o en un cine se basa en imágenes. Todo empezó con los primeros dibujos animados, donde se dibujaron dibujos individuales sobre transparencias, y las primeras películas, donde se utilizó la misma técnica para mostrar una serie de fotografías.
El concepto es simple: se le muestra una secuencia de imágenes, una tras otra, que son ligeramente diferentes entre sí, y su cerebro las conecta en una sola imagen en movimiento.
Entonces, ¿por qué deberíamos llamarlo ilusión de movimiento?
Si ves a una chica caminando por la calle en la pantalla de tu monitor, ¿no es eso un movimiento? Por supuesto, esto es solo una imagen de una niña, no un objeto real, pero esta no es la razón principal por la que consideramos que tal movimiento es una ilusión.
¿Recuerda que hablé de un objeto que en un momento en el tiempo está en un lugar y un minuto después está en otro? Al mismo tiempo, dije que se mueve en el espacio real. Solo este tipo de movimiento es lo que podemos llamar real. Los objetos se mueven en el espacio con fluidez y no en saltos, como ocurre en todos los tipos de animación stop-motion.... En ellos, el objeto no se mueve de un lugar a otro; desaparece y luego reaparece en otro lugar en el siguiente cuadro. Cuanto más rápido se mueve, más largos son los saltos.
Si te mostrara una foto de una chica que está en un lugar, y unos segundos después otra foto con la misma chica, pero en un lugar diferente, entonces dirías que son dos fotos, no animación.
Si le mostrara algunas de sus fotografías en movimiento, aún diría que esto es solo una serie de fotografías.
Si le mostrara una serie de fotografías con bastante rapidez, no cambiaría el hecho de que siguen siendo fotografías, pero empezaría a percibirlas de manera diferente.
Tu cerebro los vería como una chica en movimiento. De hecho, tal vista no es diferente de las dos primeras fotografías, es decir, no hay movimiento real en ellos, pero en un momento determinado el cerebro se rinde y compra esta ilusión... Naturalmente, este efecto ha sido muy estudiado en la industria de la producción de películas.
Después de la investigación realizada, se encontró que a una velocidad de visualización 24 cuadros por segundo, el espectador los percibe como una sola imagen en movimiento. Si lo muestra más lento, la imagen comienza a “saltar” de manera molesta y la ilusión de movimiento se destruye. Si acelera a 50 cuadros por segundo, esto no agregará realismo a la imagen (aunque en la animación de software, cuando el espectador interactúa con la imagen, la respuesta será más rápida y el movimiento de los objetos a altas velocidades es más suave).
El concepto de marco hace posible tres cosas:
- almacenamiento
- transmisión
- y mostrando
Obviamente, no puede almacenar, transferir y luego mostrar a una chica real caminando por la calle, pero puede almacenar su imagen / foto o una serie de ellas, y luego transferirlas y mostrarlas. Por lo tanto, tiene la capacidad de reproducir la animación casi siempre y en todas partes, con el acceso disponible a las fotos guardadas y la capacidad de mostrarlas.
Ahora es el momento de dar una definición más general del marco. Hasta ahora, hablando de él, teníamos en mente una fotografía, un cuadro o un dibujo. Ahora contamos lo siguiente: un marco es un registro del sistema en un momento específico en el tiempo.
Este sistema puede ser:
- una foto de un paisaje que tomó desde su propia ventana;
- una colección de objetos virtuales (un registro, en cuyo caso, serían sus formas, tamaños, colores, ubicaciones, etc. en un momento determinado. Por lo tanto, su película pasaría de ser una serie de imágenes a una serie de grabaciones de descripciones de imágenes. En lugar de simplemente mostrar una imagen, la computadora toma dicha descripción, crea una imagen a partir de ella y luego la muestra);
- bloques que contienen determinados programas.
Programación de personal
Dado que la computadora puede leer sobre la marcha, puede prescindir de una larga lista de descripciones de marcos. Puede simplificar todo describiendo solo el primer fotograma y estableciendo reglas para crear todos los fotogramas posteriores.... Ahora la computadora no solo crea una imagen a partir de la descripción, sino que:
- primero crea una descripción,
- luego genera una imagen basada en esta descripción
- y muestra esta imagen al final.
¡Imagínese cuánto espacio podría ahorrar con este enfoque! Las imágenes siempre ocupan una cantidad decente de espacio en disco y banda ancha redes. Y 24 imágenes por segundo pueden volverse simplemente "abrumadoras". Si logra reducir todo a una descripción y definición de reglas, tiene la oportunidad de reducir el tamaño del archivo cientos de veces.
En 90 casos de 100, incluso el programa más voluminoso con las reglas de cómo los objetos deben moverse e interactuar ocupa menos espacio que una imagen de tamaño mediano. Por lo tanto, uno de los primeros efectos que se notó al estudiar la animación de software es su económico en términos de tamaño de archivo.
Definitivamente hay una compensación. Si su sistema comienza a crecer y las reglas se vuelven cada vez más complejas, entonces la computadora debe gastar cada vez más recursos para procesar cada escena subsiguiente, y luego también una cantidad significativa de tiempo para mostrarlas en la pantalla.
Si está tratando de mantener una cierta velocidad de fotogramas, a veces deja a su procesador (milisegundos) sin tiempo para "digerir" todo esto. Por lo tanto, si la computadora no puede procesar la escena a tiempo, la calidad de reproducción (velocidad de fotogramas) se verá afectada. Por otro lado, la animación convencional basada en imágenes se preocupa poco por lo que hay en la escena y lo compleja que es la imagen. Ella solo muestra la siguiente imagen en el tiempo y eso es todo.
Beneficios de la animación por software
La siguiente ventaja de la animación de software sobre la animación de lapso de tiempo, que ahora discutiremos, va mucho más allá del tamaño de archivo simple. Ya es un hecho establecido que La animación de software en la mayoría de los casos se utiliza precisamente como dinámica.
Probablemente hayas visto Terminator 2: Judgment Day. Al final de la película, cada vez Terminator desaparece en el crisol con la frase "Volveré". Lo hace en cines, televisión y DVD. Incluso presionando el botón Detener o Pausa, no puede detenerlo. Y eso es porque una película normal no es más que una secuencia de imágenes... Al final de esta película, (imágenes) muestran a Terminator desapareciendo en el infierno y eso es todo lo que pueden hacer.
Ahora pasemos de Terminator a un sitio flash normal. A finales de los 90, cuando Flash estaba ganando popularidad rápidamente, solo los perezosos no querían usar sus capacidades en su sitio web:
- formas en movimiento, que aparecen y desaparecen;
- música de acompañamiento;
- una llamada que aparece repentinamente por algo;
- un punto emergente de luz o sombra.
Entonces esas cosas eran nuevas, así que quería exclamar: "¡Genial!" Para ser justos, debo decir que no todos estos sitios fueron realmente interesantes. Recordando hoy lo que vi entonces, podemos decir que solo dos o tres de ellos realmente quedaron grabados en la memoria.
La duración de la animación sobre ellos no fue más de un minuto. Esto solo fue suficiente para que los revisara tres veces seguidas. ¿Eran malos? No, es solo que después de algunas vistas, la atención se desvanece, porque no había nada más que ver, como en la película sobre Terminator. Y aquí podemos hablar de una cierta paradoja: en películas de este tipo la animación no cambia, cada cuadro, desde el primero hasta el último, está predeterminado.
Volvamos a la animación del software. No tiene por qué ser dinámico. Puedes crear un objeto y, usando código, ubicarlo en el escenario y luego hacer que se mueva a lo largo de él. En tal situación, cada vez que ejecute un clip de este tipo, se ejecutará el mismo código, lo que provocará el mismo movimiento. Y, obviamente, aquí no hay dinámica.
Pero, ¿qué pasa si toma el mismo objeto y usa el código para determinar aleatoriamente la ubicación de este objeto, la dirección de su movimiento y la velocidad? En tal situación, después de iniciar el video cada vez, veremos algo diferente al anterior.
Pero también hay una tercera opción. Después del lanzamiento del video, ¿se determinará la hora del día, el mes y el año y, en base a estos datos, se construirá una escena, por ejemplo, una mañana de invierno, una tarde de verano o una noche de septiembre?
Y aquí está el cuarto. Durante la película, el espectador, utilizando el ratón o el teclado, a voluntad, ¿podría cambiar algunos factores? Esto le permitiría interactuar con los objetos de la escena. Una película así estaría muy lejos de lo que estamos acostumbrados a ver, ¿verdad? ¡Incluso podrías salvar a Terminator!
Una realidad virtual
Es posible que El aspecto más interesante de la animación dinámica es la aplicación de las leyes de las matemáticas y la física del mundo real a los objetos creados en él.... No solo puede hacer que un objeto de este tipo se mueva en una dirección aleatoria, sino que también puede simular el efecto de la gravedad sobre él. Como resultado, comenzará a caer. Cuando termine la caída, golpeará el suelo y rebotará, pero a una altura no igual a aquella desde la que comenzó a caer. Al final, dejará de saltar y se quedará tirado en el "suelo".
Después de eso, puede permitir que el usuario interactúe con él:
- "Tómalo" con el ratón
- o muévete usando el teclado.
Después de que el usuario comience a interactuar con él de esta manera, tendrá la sensación completa de que se trata de un objeto físico real.
Puedes verlo por ti mismo jugando con la bola roja a continuación.
Al crear tales animaciones, hace que el usuario sienta que no solo está mirando cómo se mueven los fotogramas, sino que está en algún espacio creado por ti... ¿Cuánto tiempo estará allí? Sí, siempre que le resulte interesante. Cuanto más le brinde oportunidades de interacción, más tiempo permanecerá allí y luego también regresará muchas veces.
Resultados
En este tutorial introductorio, discutimos:
- los fundamentos de la animación;
- diferencias entre la animación cuadro por cuadro y por software;
- las principales ventajas de la animación dinámica.
Este es un conocimiento básico conceptual, sobre la base del cual se construirá todo el material posterior. minicurso gratuito "Conceptos básicos de animación en Actionscript 3.0».
En los próximos tutoriales, hablaré sobre algunas de las herramientas que puede utilizar en su trabajo. El uso más obvio de toda la información que se discutirá en este curso es la creación de juegos. Está claro que requieren la mayor interacción con el usuario, donde se le exige que resuelva determinados problemas y alcance los objetivos marcados.
Pero la información de este curso se puede utilizar con éxito para su trabajo profesional como diseñador web. Por ejemplo, para crear un menú interesante en el sitio, anuncios publicitarios o aplicaciones (programas) para el sistema educativo.
¿Qué tipo de animación es de mayor interés para ti personalmente? Escríbalo dejando un comentario a continuación. Además, si tienes alguna duda mientras estudias esta lección, pregunta, no lo dudes, estaré encantado de responderte.
¡Nos vemos en la próxima lección!
Habilite JavaScript para ver los comentarios.ANIMACIÓN EN FLASH (Parte 1)
En el capítulo anterior, consideramos Flash solo como un editor de gráficos vectoriales. Sin embargo, el objetivo principal de Flash es crear gráficos animados, es decir, dibujos animados. La animación en Flash puede contener bandas sonoras y elementos interactivos. Por lo tanto, no se trata solo de gráficos, sino de crear productos multimedia. Puede utilizar Flash para crear aplicaciones interesantes, como páginas web.
Los resultados de Flash (archivos, animaciones, páginas web) generalmente se denominan dibujos animados, clips, videoclips, videos y animaciones(el término general es película). Por lo general, los clips se denominan dibujos animados que forman parte de otros dibujos animados. El proceso de creación de una caricatura es el siguiente. Primero, se crea un archivo original o de autor con la extensión fla. Este archivo se puede editar y visualizar en el entorno Flash. Luego se convierte en un archivo SWF, que ya se puede ver en un reproductor Flash y un navegador web. Además, puede exportar los resultados de su trabajo a archivos de otros formatos extendidos: MOV, GIF animado, JPEG y muchos otros.
¡Atención! Al describir las herramientas Flash, a menos que se indique lo contrario, se refiere a la versión 5.0. Las características de Flash MX se analizarán por separado.
En el capítulo anterior, ya hemos señalado las principales diferencias entre Flash 5.0 y Flash MX. Recordemos sólo uno de ellos, que es el más importante. En Flash 5.0, las propiedades de los objetos se distribuyen en varias paletas o en varias pestañas de una sola paleta. Puede abrir o cerrar estas paletas usando el menú Ventana> Paneles. Flash MX ha reducido el número de paletas. El menú Ventana no tiene un submenú Paneles desde el cual puede seleccionar un panel (paleta) para abrirlo o cerrarlo. Las paletas en Flash MX se abren y cierran directamente desde el menú Ventana. Tenga en cuenta que todas las propiedades del elemento actual (es decir, seleccionado) en el escenario en Flash MX se muestran en una paleta Propiedades, que se encuentra en la parte inferior de forma predeterminada. El contenido de esta paleta depende del objeto actual (es decir, seleccionado actualmente). En otras palabras, el contenido de la paleta Propiedades es sensible al contexto.
Animación de prueba
Para echar un primer vistazo a las capacidades de animación de Flash, creemos una caricatura simple: un círculo que se mueve de izquierda a derecha por la pantalla. Primero le mostraremos cómo hacer esto en Flash 5.0 y luego en Flash MX. Antes
todo lo que necesitamos herramientas ("Oval") y ("Selección"). Siga estos pasos en Flash 5.0:
Ahora puede abrir el archivo HTML generado en su navegador. Sin embargo, incluso puede hacer esto desde Flash seleccionando Archivo> Vista previa de publicación> HTML o presionando
Todo lo descrito anteriormente es exactamente compatible con Flash 5.O. Si está utilizando Flash MX, tenga en cuenta que tecla de acceso rápido
Ahora veamos cómo crear animaciones en Flash MX. Dibuja un círculo en el área de trabajo. Selecciónelo y agrupe su contorno y rellénelo en un todo. Esto se puede hacer usando el comando Modificar> Grupo. A continuación, haga clic con el botón derecho en el fotograma final y seleccione Insertar fotograma clave en el menú contextual. Arrastre el círculo a una nueva ubicación. Haga clic izquierdo en el primer fotograma. En este caso, el círculo estará en su posición original. Ahora pasamos a la paleta Propiedades, que actualmente contiene los parámetros del primer fotograma. En la lista desplegable Tween seleccione el valor Motion (Motion). Al mismo tiempo, aparecerá una flecha en la línea de tiempo entre el primer y el último fotograma clave, lo que indica la creación exitosa de la animación. Presione la tecla para reproducir la caricatura.
Arroz. 551. Creando animación en Flash MX
Si aparece una línea discontinua en la línea de tiempo en lugar de una flecha, significa que cometió un error. En este caso, aparece un botón con un triángulo y un signo de exclamación en la paleta Propiedades. Al hacer clic en él, se abrirá un panel con un mensaje de error. El hecho de no crear una animación suele deberse a las dos razones siguientes: o está intentando animar objetos no agrupados (en el caso de un círculo, esto es una ruta y un relleno), o hay varios objetos agrupados en esta capa.
Además del método descrito anteriormente, puede crear animaciones en Flash MX mediante el comando Crear interpolación de movimiento. En este caso, haga clic con el botón derecho en el primer fotograma y seleccione Crear interpolación de movimiento en el menú contextual. Esto convertirá la imagen del círculo en un símbolo gráfico. Haga clic con el botón derecho en el último fotograma y seleccione Insertar fotograma en el menú contextual. Aparece una línea discontinua entre el primer y el último fotograma. Ahora necesitas mover el círculo a una nueva ubicación. Como resultado, el último cuadro se convertirá automáticamente en clave y la línea discontinua será reemplazada por una flecha. La animación está completa.
Como puede ver, las formas de crear animaciones en Flash 5.0 y Flash MX son muy similares y simples. Pruébelos varias veces y se recordarán bien.
Conceptos básicos de animación
El término animación se entiende como una secuencia de imágenes alternas (fotogramas), como resultado de la visualización en la que hay una ilusión de movimiento (cambio suave en la forma y / o posición de la imagen). Macromedia Flash tiene dos métodos de animación:
- Animación fotograma a fotograma. Este método consiste en hojear los marcos prediseñados con la suficiente rapidez. En este caso, la ilusión de movimiento surge debido a la elección de una velocidad de giro adecuada y al grado de similitud de los marcos adyacentes. Este método es similar al método utilizado para crear archivos GIF animados (consulte el Capítulo 3).
- Animación de interpolación... Este método consiste en crear varios fotogramas de anclaje (clave) y, a partir de ellos, "calcular" los fotogramas intermedios (animación de interpolación). Este método es similar a dibujar una línea suave a través de los puntos especificados. Por ejemplo, supongamos que desea mover una forma del lado izquierdo de la pantalla a la derecha con 25 fotogramas. En el caso del primer método de animación fotograma a fotograma, tendremos que dibujar los veinticinco fotogramas y, en cada fotograma subsiguiente, desplazar la figura ligeramente hacia la derecha. ¿Y si necesita hacer que la figura, moviéndose hacia la derecha, desaparezca gradualmente o cambie de forma? Obviamente, hacer cada fotograma a mano sería demasiado tedioso en este caso. Es para tales situaciones que se proporciona el segundo método de animación. En el caso más simple, solo necesita establecer dos fotogramas clave: inicio y final. De forma predeterminada, Flash calcula las interpolaciones de forma lineal, pero también puede especificar la ley exponencial.
Primero, echemos un vistazo a los elementos básicos que se utilizan al trabajar con Flash: la línea de tiempo, los fotogramas, los símbolos y las capas.
Cronología
La línea de tiempo es la herramienta principal para trabajar con animaciones en Flash. Muestra información sobre las capas y qué fotogramas son clave y cuáles son intermedios (generados por Flash). Al usar la línea de tiempo, puede comprender qué marcos contienen acciones o etiquetas. Le permite mover fotogramas clave y partes individuales de la animación. Esta herramienta está bien pensada y es muy fácil de usar, aprenderá rápidamente a trabajar con ella.
Arroz. 552. Línea de tiempo en Flash 5.0
En Flash MX, la línea de tiempo se ha modificado ligeramente. Por ejemplo, fue posible crear carpetas que contengan capas. Ya hemos discutido este medio de organizar la estructura de la caricatura en el capítulo anterior. En la esquina superior derecha de la línea de tiempo, hay un botón para el menú de formato de fotograma. La elección del formato del marco depende de apariencia línea de tiempo. A diferencia de Flash 5.0, los marcos ahora pueden mostrar miniaturas de imágenes.
Arroz. 553. Línea de tiempo en Flash MX
Hagamos una lista de los elementos principales de la línea de tiempo.
- Marcador: un rectángulo resaltado en rojo que indica el marco actual, cuyo contenido se muestra en el área de trabajo. Las celdas de la cuadrícula rectangular (escala de cuadro) corresponden a cuadros. Cuando hace clic en cualquier celda, el marcador se mueve automáticamente a ella y el contenido del marco correspondiente se muestra en el área de trabajo.
- Capas. A la izquierda de la regla de marco hay una lista de capas. Debajo hay botones que le permiten agregar y eliminar capas. Si lo desea, cada capa se puede hacer invisible o deshabilitar la edición.
- La escala de fotogramas es un campo donde puede agregar y eliminar fotogramas simples y clave. Si llama al menú contextual haciendo clic con el botón derecho en cualquier marco, verá una lista de acciones que se pueden realizar. La siguiente información se muestra en la escala del marco:
- los fotogramas clave están marcados con círculos negros;
- los marcos con los que se asocian las acciones están marcados con la letra "a" encima del círculo;
- los marcos marcados se indican con una bandera roja y el nombre de la etiqueta.
- El color también indica el tipo de marcos. Los fotogramas que coinciden exactamente con el fotograma clave aparecen atenuados. Un resaltado lila o verde indica que los fotogramas fueron generados por Flash. El blanco indica marcos vacíos.
- Botones de control de sombras le permiten mostrar los marcos adyacentes como a través de papel de calco, para ver las diferencias entre los marcos adyacentes. En otras palabras, le permiten crear un rastro para una imagen en movimiento. Puede establecer el número de fotogramas adyacentes que se muestran.
Personal
La animación consta de una secuencia de fotogramas. El marco puede ser creado manualmente o generado por Flash. Esto se aplica a los fotogramas de la misma capa. Dado que las escenas Flash (lo que son, se describe más adelante en este capítulo) normalmente constan de varias capas, los fotogramas "en capas" resultantes pueden contener fotogramas tanto generados como "hechos por uno mismo".
En la animación por computadora, existe un concepto de fotogramas clave (fotogramas clave): estos son fotogramas que Flash no cambia durante la creación de la animación, pero que utiliza como fotogramas de referencia al generar fotogramas intermedios.
Hay dos tipos de preadolescentes:
- Marcos basados en la interpolación de formas.
- Fotogramas de interpolación de movimiento. Se utilizan con mayor frecuencia al crear interpolaciones de movimiento en el escenario.
También debemos mencionar los marcos vacíos, que no contienen nada.
En la línea de tiempo, una secuencia de fotogramas que no cambian es gris, una secuencia de fotogramas con interpolación de movimiento es lila, una secuencia de fotogramas con interpolación de formas es verde y los fotogramas vacíos son blancos. Los fotogramas clave se indican con un punto negro.
Operaciones elementales en marcos:
- insertar un fotograma clave en blanco: Comando Insertar> Fotograma clave en blanco (
); - inserte un fotograma clave repitiendo el contenido del anterior: comando Insertar> Fotograma clave (
, Solo Flash 5.0); - borrar fotograma clave: Insertar> Cear fotograma clave (
+ ); - insertar un marco regular: el comando Insertar> Marco (
); - eliminar un marco: comando Insertar> Eliminar marcos (
+ ).
Simbolos
El símbolo es uno de los conceptos clave en Flash. Ya hablamos de ello en el capítulo anterior. Un símbolo puede ser una forma simple, una combinación de varias formas o incluso una animación completa (película). Por ejemplo, puede crear símbolos para "rueda", "carrocería" y "faro", y luego combinarlos todos en el símbolo "coche". A continuación, puede crear una escena en la que este "coche" "conducirá". Puede convertir la rueda en un símbolo animado para que parezca que está girando. La puerta de un automóvil se puede convertir en un símbolo similar a un botón para que se abra al hacer clic en él. En este caso, en cualquier momento puede cambiar el contenido y el tipo de símbolo. En otras palabras, un símbolo es un objeto. Parece que el término "objeto" nos resulta más familiar, pero en Flash es precisamente "símbolo" el que se utiliza (por lo tanto, para evitar confusiones, llamaremos a los símbolos del texto signos).
Los símbolos se pueden anidar entre sí independientemente del tipo, que es su ventaja más importante. Los símbolos se pueden crear desde cero (Insertar> Nuevo comando de símbolo o teclas
Para gestionar los símbolos se utilizan las denominadas Bibliotecas, que comentaremos a continuación. Todo lo que dibuje o importe en el escenario se puede convertir (convertir) en un símbolo. Este símbolo irá inmediatamente a la biblioteca de la caricatura actual (creada o editada). Los símbolos de la biblioteca se pueden transferir al escenario oa otra caricatura. En este caso, lo que transfirió no aparece como un símbolo, sino como una instancia del símbolo. Puede editar un símbolo y luego el resultado de sus modificaciones se propagará a todas sus instancias. Puede editar una instancia de un símbolo sin afectar al símbolo en sí. Una instancia de símbolo modificada se puede convertir en un símbolo independiente. La ventana de la biblioteca se abre con el comando Ventana> Biblioteca o presionando las teclas
Hay tres tipos de símbolos: gráfico, botón y animación (caricatura, clip)(Clip de película). El comando Insertar> Nuevo símbolo abre una ventana en la que debe especificar el tipo de símbolo a crear. Consideremos los tipos de símbolos con más detalle.
Arroz. 555. Cuadro de diálogo que especifica el nombre y tipo de símbolo que se creará.
Gráfico
- Ya hemos mencionado símbolos de este tipo en el capítulo anterior. El comportamiento de los gráficos se describe utilizando la línea de tiempo de la película principal. Los controles interactivos y el audio no se pueden asociar con este tipo de personaje. Casi todo lo que se puede hacer con un símbolo gráfico se puede hacer con un símbolo de Clip de película (ver más abajo).
Recuerde que las imágenes se pueden crear no solo manualmente usando herramientas de dibujo, sino también importadas desde archivos gráficos.Botón
Botón: un tipo de símbolo especialmente adaptado a la función del botón. Este símbolo puede tener cualquier aspecto exterior, no necesariamente un botón rectangular o redondo. Lo importante aquí es que este símbolo tiene la funcionalidad de un botón. Cuando crea un símbolo de botón, aparecen cuatro fotogramas en la línea de tiempo, correspondientes a las siguientes situaciones:
- Arriba: el puntero del mouse no está sobre el botón;
- Encima: el puntero del mouse está encima del botón;
- Abajo: el puntero del mouse está sobre el botón y el botón está presionado
ratones; - Hit: marco para determinar el área activa del botón que responde a un clic; su contenido es invisible y puede ser menor o mayor imagen visible botones. Si no describe este cuadro, se utilizará la imagen del botón del cuadro Arriba.
Tenga en cuenta que en el capítulo anterior, dibujamos una imagen de un botón, pero no creamos un símbolo de botón.
Para crear un botón, ejecute el comando Insertar> Nuevo símbolo o presione las teclas
El primer cuadro es Up. Ahora necesitamos crear una imagen para el botón usando herramientas de dibujo, importando gráficos o pegando una instancia de otro símbolo. En este caso, puede utilizar símbolos como Gráfico (Gráfico) y Clip de película (Animación), pero no Botón (Botón). Utilice Clip de película si desea que el botón esté animado. La imagen creada para el botón se insertará en el cuadro Arriba, que se convertirá automáticamente en la clave.
A continuación, haga clic en la línea de tiempo del marco superior y conviértalo en una clave (Insertar> Fotograma clave o clave
Si desea reproducir sonido según los estados del botón, seleccione el fotograma correspondiente en la línea de tiempo y use el comando Modificar> Fotograma para abrir el panel Fotograma, que tiene una pestaña Sonido. En esta pestaña puede configurar los parámetros necesarios.
Cuando haya terminado de crear el símbolo del botón, vaya al modo de edición de dibujos animados (Editar> Editar película) y arrastre el símbolo del botón desde la ventana de la biblioteca al escenario para crear una instancia de este símbolo en su dibujo animado (escena).
Arroz. 557.
Arroz. 559.
Todo lo que hemos hecho es solo un objeto visual. Sin embargo, se sabe que los botones sirven como controles. Por ejemplo, queremos que suceda algo cuando se hace clic en un botón. En otras palabras, el botón debe ser funcional. Para hacer esto, haga clic con el botón derecho en la imagen del botón y seleccione el comando Acciones en el menú desplegable. Esto abrirá el panel Acciones de objetos que se muestra en la figura. En la pestaña Acciones de objeto de este panel, en la lista de la izquierda, puede seleccionar una acción. El margen derecho contiene instrucciones de secuencia de comandos de ActionScript. Puede seleccionar acciones y sus valores de parámetros (campos de entrada y / o botones de opción) observando lo que Flash escribe en el campo derecho, o puede escribir manualmente un script. La figura muestra un ejemplo en el que se selecciona la función getURL (adpec) como acción, que llama al documento (archivo) ubicado en la dirección especificada. Además, esta acción ocurrirá si se presiona el botón (cuando hace clic con el botón izquierdo en la imagen del botón); la función de encendido (presionar) es responsable de esto
.
Arroz. 560. Panel para crear y editar acciones asociadas a un objeto
Más detalles sobre la barra de acciones y, en particular, la funcionalidad de los botones se discutirán más adelante en este capítulo.
Tenga en cuenta que las acciones deben asignarse a una instancia del símbolo del botón en la caricatura, no a los fotogramas de los botones en la línea de tiempo. En otras palabras, coloca una instancia de un botón en el escenario y luego le asigna acciones.
La biblioteca de símbolos compartida de Flash, que puede abrir con Ventana> Bibliotecas comunes, tiene botones listos para usar. Puede abrir esta biblioteca y arrastrar el símbolo que desee de ella al espacio de trabajo tantas veces como lo necesite en la caricatura. Con esto, el personaje ingresará inmediatamente a la biblioteca privada de su caricatura. Puede modificar tanto el símbolo como sus instancias. Por ejemplo, si necesita crear una serie de botones en el mismo estilo, pero con diferentes etiquetas, entonces debe modificar las instancias, para lo cual seleccione la instancia del botón en el escenario y ejecute el comando Modificar> Instancia.
Flash MX modifica los fotogramas, las instancias de símbolo y los propios símbolos mediante la paleta Propiedades.
Si desea un botón rectangular simple sin ningún refinamiento artístico especial, entonces en Flash MX puede usar el componente PushButton listo para usar de la paleta Componentes. Las instancias de este componente se pueden editar. Hablamos de esto en el capítulo anterior.
Arroz. 561. Dos instancias del botón con diferentes etiquetas. Biblioteca - Moviel - la ventana de la biblioteca de nuestros personajes de dibujos animados (por el momento solo contiene un símbolo de barra de empuje); Biblioteca - Buttons.fla - Ventana Biblioteca de botones de bibliotecas comunes
Animación (clip de película)
La animación es el tipo de personaje más interesante. Este símbolo puede contener cualquier número de fotogramas. El lenguaje ActionScript trata este símbolo como un objeto Clip de película. Cada personaje de este tipo (clip) tiene su propia línea de tiempo, que se reproduce independientemente de la línea de tiempo de la caricatura principal. Alternativamente, un clip puede contener otros clips y controles interactivos.
Ya cubrimos la creación de una caricatura simple anteriormente en este capítulo. En la siguiente sección encontrará una historia más detallada. Tenga en cuenta aquí que la gran generalidad del símbolo de clip de película requiere algo de experiencia para aprovecharlo al máximo. En muchos casos, la animación completa (la caricatura completa) consta de un clip.
Bibliotecas de símbolos
Ya hemos conocido el concepto de biblioteca en el capítulo anterior y en este capítulo. Ahora echemos un vistazo más de cerca. La biblioteca de símbolos permite al desarrollador usar símbolos creados previamente en otros dibujos animados en nuevos dibujos animados. Esto permite acumular el material acumulado y organizar el trabajo en equipo.
Flash proporciona los siguientes tipos de bibliotecas:
- Biblioteca de dibujos animados
- Biblioteca común
- Biblioteca permanente
- Biblioteca compartida
En Flash MX, a diferencia de Flash 5.0, las bibliotecas compartidas vienen en dos versiones:
- Tiempo de ejecución: biblioteca compartida en tiempo de ejecución;
- Author-time es una biblioteca compartida en tiempo de diseño.
En Flash 5.0, el único tipo de biblioteca compartida es la biblioteca en tiempo de ejecución.
Desde el punto de vista interfaz de usuario El trabajo con bibliotecas de varios tipos se organiza de la misma manera, su contenido se puede ver en un cuadro de diálogo especial.
Biblioteca de dibujos animados- una biblioteca de símbolos asociados con una caricatura específica. Se crea automáticamente tan pronto como crea el primer símbolo. Este símbolo irá inmediatamente a la biblioteca. Se puede crear una biblioteca vacía yendo a Ventana> Biblioteca. La biblioteca, una vez creada, existe desde que existe la caricatura. Puede eliminar todo su contenido, pero no puede eliminar la biblioteca en sí. El título de la caricatura (nombre del archivo) se muestra en el título de la ventana de la biblioteca. Los símbolos de la biblioteca se pueden utilizar en cualquier otro dibujo animado. Para hacer esto, solo abre archivo nuevo sin cerrar el archivo cuya biblioteca desea utilizar. En este caso, la ventana de la biblioteca del archivo fuente debe estar abierta.
Biblioteca compartida- biblioteca Flash incorporada. A diferencia de la biblioteca de dibujos animados, su contenido no se puede cambiar. La biblioteca compartida consta de varias bibliotecas, como botones, interacciones de aprendizaje y otras. La biblioteca compartida de Flash MX también incluye una sección de recursos del desarrollador, que contiene los componentes de la interfaz de usuario (consulte (consulte el capítulo 8).
Los elementos de la biblioteca común se pueden utilizar en sus dibujos animados tanto como están, como como espacios en blanco iniciales para modificaciones posteriores.
Biblioteca permanente- una biblioteca creada por el usuario y disponible en cualquier dibujo animado. Para crear una biblioteca persistente, haga lo siguiente:
- Cree un archivo Flash (una caricatura nueva, es decir, un archivo con extensión fla) con una biblioteca que contenga los símbolos que desea incluir en la biblioteca permanente.
- Guarde el archivo Flash generado en la carpeta Bibliotecas, que se encuentra entre las otras carpetas del paquete Flash.
Una vez creada, la nueva biblioteca aparece en el menú Ventana> Bibliotecas comunes.
Biblioteca compartida le permite usar los personajes que contiene en varios dibujos animados sin copiar esos personajes en bibliotecas privadas de dibujos animados. Los elementos de una biblioteca compartida se denominan activos. La biblioteca compartida se utiliza como un archivo externo y no está incluida en la caricatura.
Las bibliotecas compartidas son útiles en las siguientes situaciones:
- al usar símbolos de fuente en diferentes páginas del sitio;
- cuando se usa la misma banda sonora en diferentes páginas del sitio;
- cuando se utilizan diferentes elementos que deben corresponder a algún estilo de diseño uniforme.
Para crear una biblioteca compartida, debe definir sus recursos (los símbolos que contiene), habilitar la exportación de símbolos compartidos, especificar la URL del sitio donde se alojará la biblioteca, exportar el archivo Flash a formato SWF y colocarlo en el Sitio web.
Después de crear una biblioteca compartida, debe especificar cuáles de sus símbolos se pueden exportar a otros dibujos animados. Para hacer esto, seleccione el símbolo deseado en la ventana de la biblioteca y haga clic derecho sobre él. En el menú contextual, seleccione el comando Vinculación. Esto abrirá una ventana llamada Propiedades de enlace de símbolos en Flash 5.0 y simplemente Propiedades de enlace en Flash MX. V diferentes versiones Flash estas ventanas son algo diferentes, pero la esencia es la misma.
En el campo Identificador, ingrese el nombre del símbolo (sin espacios) con el que se exportará a la película del copropietario.
En Flash 5.0, puede elegir exportar un símbolo o importarlo. En el último caso, debe especificar la URL de la caricatura de origen, es decir, el archivo SWF de la biblioteca compartida. Lo mismo se puede hacer en Flash MX, pero también hay funciones adicionales. En particular, para permitir que el símbolo exportado se utilice inmediatamente desde el primer fotograma de la caricatura del copropietario, seleccione la casilla de verificación Exportar en el primer fotograma. Si desea que el símbolo exportado esté disponible en ActionScript, seleccione la casilla de verificación Exportar para ActionScript.
Arroz. 562. Ventana de propiedades de enlace de símbolos en Flash 5.0
Arroz. 563. Ventana Propiedades de enlace en Flash MX
Para usar símbolos de una biblioteca compartida en una caricatura compartida, abra la biblioteca de esa caricatura y seleccione Nuevo símbolo en el menú desplegable de la biblioteca. Esto abrirá la ventana Crear nuevo símbolo. En Flash 5.0, solo el nombre y el tipo de símbolo se pueden configurar en esta ventana. Por lo tanto, después de que aparezca un nuevo símbolo en la biblioteca, debe abrir la ventana Propiedades de enlace de símbolo, que se discutió anteriormente. En Flash MX, la ventana Crear nuevo símbolo contiene todos los parámetros del símbolo a la vez.
Arroz. 564. Ventana Crear nuevo símbolo en Flash MX
Arriba, examinamos el trabajo con bibliotecas compartidas del tipo Run-time. Como recordatorio, este es el único tipo de biblioteca compartida en Flash 5.0. Flash MX también tiene otro tipo de biblioteca compartida llamada Author-time. No lo consideraremos en detalle aquí. Solo notamos que el uso de las bibliotecas en tiempo de autor le permite reemplazar el contenido de los símbolos en el archivo Flash editado.
Creación de animaciones
Consideremos formas y ejemplos de creación de animaciones.
Animación fotograma a fotograma
La animación fotograma a fotograma se compone en su totalidad de fotogramas clave. Aquí, usted mismo determina tanto el contenido de cada cuadro como su exposición (es decir, cuántos cuadros estáticos ocupará la imagen). Este método se utilizó originalmente para crear dibujos animados dibujados a mano ordinarios. En la línea de tiempo, la animación cuadro por cuadro se ve así:
Arroz. 565. La animación fotograma a fotograma consta únicamente de fotogramas clave. La misma imagen puede ocupar varios de estos marcos.
Esta es la única forma de organizar el cambio de imágenes completamente independientes: la llamada presentación de diapositivas. Por regla general, así es como se crea un banner normal.
Arroz. 566. Cuatro fotogramas consecutivos de una caricatura en la que crece una flor.
Sin embargo, las animaciones fotograma a fotograma son difíciles de modificar. Si esta animación está vinculada, casi todos los fotogramas deben modificarse. Además, la animación fotograma a fotograma ocupa un volumen bastante grande, ya que es necesario almacenar información sobre cada fotograma.
Tenga en cuenta que los GIF animados, que se utilizan ampliamente en el diseño web, se crean en Flash utilizando el método de animación fotograma a fotograma. Puede crear varios fotogramas clave (utilice varias capas si es necesario) y luego convertir su obra de arte en un GIF animado mediante una operación de publicación. Esto se analiza con más detalle en la última sección de este capítulo.
Animación de interpolación
Con este método Animaciones flash crea automáticamente fotogramas intermedios que encajan entre los fotogramas clave que especifique. Esto significa que dibuja un objeto en un marco y luego le realiza cambios en otro marco. Los marcos creados son clave. Luego le pide a Flash que calcule los fotogramas para que quepan entre los dos fotogramas clave. Como resultado, obtienes animación.
La velocidad y suavidad de la animación depende de la cantidad de fotogramas que haya reservado para el movimiento, así como de la velocidad de desplazamiento de su película Flash (película). La velocidad de desplazamiento de la caricatura se puede configurar en Flash 5.0 usando el comando Modificar> Película o las teclas
La suavidad y la duración están determinadas por el número de fotogramas asignados para toda la animación (su fragmento). Por ejemplo, si la velocidad de su dibujo animado es de 30 fotogramas / s, y necesita mover un objeto de una esquina de la imagen a otra en 2,5 segundos, deberá tomar 75 fotogramas para el movimiento. Flash tiene dos opciones para renderizar imágenes intermedias:
- Interpolación de formas: creación de animaciones basadas en cambios de forma;
- Interpolación de movimiento: animación de creación basada en personajes cambiantes.
La primera opción se usa en los casos en que es necesario proporcionar solo un cambio suave en la forma del objeto. El segundo se usa con mayor frecuencia debido a su versatilidad.
Interpolación de formas
Digamos que quieres que el cuadrado se convierta suavemente en un círculo, o que la imagen del gato se convierta suavemente en la imagen del perro. En tales casos, se utiliza la interpolación de formas. En este caso, establece dos fotogramas clave a cierta distancia entre sí. Existe una limitación estricta en la versión de animación considerada: la animación debe ocupar una capa separada y ser una sola figura dibujada (no debe haber grupos ni símbolos). Después de haber creado dos fotogramas clave, active el primero (simplemente haga clic en él) y seleccione Marco en la paleta (invocado por el comando de Windows> Paneles> Marco o presionando las teclas
Arroz. 567. Especificación de la opción de animación de interpolación de formas
Los fotogramas de la línea de tiempo deben volverse verdosos y una flecha debe extenderse desde el primer fotograma al segundo. Como resultado, obtendrá una serie de fotogramas intermedios que reflejarán la transición de la primera forma a la segunda. Para mostrar el contenido de los fotogramas adyacentes, debe habilitar la visualización de sombras. La siguiente ilustración muestra una animación en la que un círculo se convierte suavemente en una luna creciente.
Arroz. 568. El círculo se convierte suavemente en una media luna. Aquí, el primer fotograma clave contiene un círculo y el último, el décimo fotograma, contiene una media luna. La figura muestra todos los fotogramas de la caricatura.
Veamos los parámetros de la transformación de interpolación de formas. Cuando se selecciona esta opción, los parámetros Suavizado y Fusión y la etiqueta del marco Etiqueta aparecen en la paleta Marco.
- El parámetro Easing establece la aceleración exponencial inversa. El valor de este parámetro puede variar de -100 a +100. Esto significa que si establece un valor negativo en el campo de aceleración, el movimiento se producirá con una aceleración positiva (la velocidad aumentará). Por el contrario, si el valor de suavizado es positivo, la animación se ralentiza.
Arroz. 569. Animación con aceleración (Easing< 0)
Arroz. 570. Animación de fusión (fusión> 0)
- El parámetro Blend determina el algoritmo de transición: distributivo (borroso) y angular (angular). El primero intenta suavizar lo máximo posible, suavizar la transición de una figura a otra. El segundo intenta mantener las proporciones de las esquinas y los segmentos de línea recta. Se recomienda que experimente con este parámetro para comprender cuándo es mejor utilizar el valor del parámetro.
La última herramienta en la animación de interpolación de formas es puntos de control(sugerencias de forma) que utiliza para ayudar a Flash a realizar la transición correctamente. No puede prescindir de ellos cuando trabaja con formas complejas. Los puntos de control son muy fáciles de usar. En el primer fotograma clave (donde comienza la animación), agrega un punto de interrupción (comando Modificar> Transformar> Agregar sugerencia de forma o llaves
En las siguientes dos imágenes, puede ver la diferencia entre los marcos creados sin usar puntos de control y los marcos creados con tales.
Arroz. 571. Dar forma a la interpolación sin utilizar puntos de control
Arroz. 572. Dar forma a la interpolación mediante puntos de control
Al utilizar la animación de interpolación de formas, se pueden modificar los siguientes parámetros de forma:
- La forma
- Localización
- Tamaño (cualquier relación de aspecto)
- Angulo de rotacion
Si necesita desactivar la interpolación de formas, seleccione Ninguno en la lista Interpolación de la paleta Marco.
Animación basada en personajes cambiantes (interpolación de movimiento)
Como se señaló anteriormente, la animación más utilizada es la interpolación de movimiento. En este caso, la animación se basa en la modificación de símbolos, es decir, el objeto de la animación es un símbolo. Al igual que con la animación de interpolación de formas, cada objeto requiere una capa a la vez. Esta capa debe contener un símbolo, con el que se producirán todos los cambios.
Estos son algunos de los parámetros de símbolo que se pueden modificar mediante la interpolación de movimiento:
- tamaño (tanto proporcional como desproporcionado - por separado alto y ancho)
- inclinación
- localización
- ángulo de rotación
- efectos de color
Hay varias formas de habilitar la interpolación de movimiento y solo una para deshabilitarla. Para habilitar la interpolación de movimiento, debe activar el fotograma inicial de la transición y luego, presionando el botón derecho del mouse, seleccione el comando Crear interpolación de movimiento en el menú contextual, o seleccione el comando Insertar> Crear interpolación de movimiento) . Manera universal habilitar / deshabilitar la interpolación de movimiento: en la paleta Fotograma, seleccione un valor de la lista Interpolación.
Opciones de animación:
- Facilitación: establece la aceleración exponencial inversa; funciona igual que en la interpolación de formas;
- Rotar: le permite controlar la rotación:
- Automático: obliga a Flash a intentar determinar automáticamente el número de bucles;
- CW: establece la rotación en el sentido de las agujas del reloj;
- CCW: establece la rotación en sentido antihorario; en este caso, en el campo ahora disponible a la derecha, puede ingresar el número de revoluciones (puede usar solo valores enteros o deshabilitar la rotación seleccionando el valor Ninguno en la lista Girar).
- Opciones - parámetros adicionales:
- Orientar a la ruta: gira el símbolo de acuerdo con la línea de guía;
- Ajustar: ajusta el símbolo a la línea guía;
- En los casos en que el número de fotogramas de la escena principal no sea un múltiplo del número de fotogramas del símbolo, la casilla de verificación Sincronizar permite sincronizar las dos animaciones.
Capas de guía
El movimiento de un objeto se puede organizar mediante una capa de guía. En la capa de guía, se dibuja una trayectoria a lo largo de la cual el objeto debe moverse, luego el objeto en sí se ancla a él y la capa de guía junto con la trayectoria se hace invisible. O incluso un grupo de objetos diferentes tipos... Consideremos un ejemplo simple en el que una imagen de flecha se mueve a lo largo de una curva arbitraria.
En una capa llamada Flecha, dibuje un objeto con forma de flecha y conviértalo en un símbolo gráfico. En un caso más general, el objeto puede ser un símbolo de Clip de película, es decir, una caricatura o incluso un grupo de objetos de diferentes tipos.
Arroz. 574. Un objeto en forma de flecha que debería moverse
A continuación, haga clic con el botón derecho en el nombre de la capa Flecha y seleccione el comando Agregar guía de movimiento en el menú contextual. Como resultado, en la lista de capas aparecerá nueva capa Guía: una flecha con un icono distintivo a la izquierda de su nombre. Eso es lo que es capa guía(capa guía). Se guía la capa inmediatamente debajo de ella en la lista. En la capa de guía, dibujemos la trayectoria del movimiento. Para hacer esto, puede usar cualquier herramienta de dibujo de líneas como Lápiz. Lo principal es que la trayectoria es una línea (contorno) y no un área de relleno.
Seleccione nuestro objeto en forma de flecha y muévalo al principio de la ruta. Al moverse, aparece un círculo en el centro de la imagen del objeto, que debe caer sobre la línea de trayectoria y, por así decirlo, agarrarse a ella. Así es como unimos el objeto a la trayectoria.
En la línea de tiempo, seleccione el fotograma correspondiente al final del movimiento a lo largo de la trayectoria (en nuestro ejemplo, este es el fotograma 30). Hagámoslo clave. Esto debe hacerse primero en la capa guía y luego en la capa guiada.
Asegúrese de que la capa guiada esté activa (en nuestro ejemplo, esta es la capa Flecha). Arrastre el objeto hasta el final de la ruta y luego vuelva al primer fotograma de la misma capa. Vamos a crear una animación (comando Insertar interpolación de movimiento). En términos generales, la organización del movimiento a lo largo de la trayectoria guía es completa.
Arroz. 575. Dibuja una trayectoria en la capa guía
Arroz. 576. Establecer los parámetros de movimiento a lo largo de la trayectoria.
Arroz. 577. El movimiento de un objeto con su orientación a lo largo de una trayectoria.
Para hacer invisible la trayectoria del movimiento, basta con hacer invisible la capa guía. Si desea que el objeto se oriente a lo largo de la ruta, establezca la propiedad Orientar a la ruta para el primer fotograma de la capa con el objeto. La aceleración o desaceleración del movimiento a lo largo de la ruta está determinada por el parámetro de aceleración.
Si ya existe una capa de guía, entonces cualquier capa puede hacerse guiada. Para hacer esto, solo necesita arrastrar su nombre en la lista de capas directamente debajo del nombre de la capa guía, o crear una nueva capa ubicada debajo de la guía y establecer el tipo de esta capa en Normal.
Máscaras de capa
El contenido de la capa se puede ver a través del agujero, ocultando todo lo demás. Para esto, se utiliza la llamada máscara de capa, un tipo especial de capa que contiene la máscara real. Se puede crear una máscara (agujero o ventana) a partir de varios tipos de objetos: una región de relleno, un cuadro de texto, una instancia de un símbolo gráfico e incluso una caricatura. La máscara puede verse obligada a cambiar de forma o moverse. Sin embargo, no puede aplicar máscaras de capa dentro de los botones.
Una máscara es una capa en la que cualquier área del relleno se interpreta como un agujero a través del cual se ve la capa subyacente. Esto ignora el color de relleno, el degradado y el contorno. De forma predeterminada, una máscara de capa cubre (enmascara) solo la capa inmediatamente debajo de ella.
Veamos cómo crear una máscara simple basada en una región de relleno. Primero creemos una capa enmascarada. Llamémoslo Fondo. Importamos en él un mapa de bits del paquete Photoshop 7.O. A continuación, creemos una máscara de capa. Para hacer esto, simplemente haga clic en el botón con el signo "+" en la parte inferior de la lista de capas. Llamémoslo Máscara. En esta capa dibujaremos alguna forma y la rellenaremos con algo de color, es decir, crearemos un área de relleno. Dibujamos un óvalo y luego lo transformamos con la herramienta Subseleccionar (flecha blanca). Ahora indiquemos que esta capa es una máscara de capa. Para hacer esto, simplemente haga clic derecho en su nombre y seleccione el comando Máscara en el menú contextual. Al mismo tiempo, aparecerán iconos característicos a la izquierda del nombre de la capa de máscara y la capa enmascarada, y ambas capas se bloquearán (aparecerán imágenes de candados a la derecha de sus nombres). El enmascaramiento surtirá efecto y solo verá el área de fondo en el escenario, que está cubierta por la forma de la máscara de capa.
Para ingresar al modo de edición de máscara y ver tanto el fondo como la ventana de la máscara, desbloquee la máscara de capa (haga clic en la imagen de bloqueo correspondiente). En el modo de edición, puede cambiar la forma, la posición e incluso el número de ventanas de la máscara.
En general, puede enmascarar varias capas, no solo la que está directamente debajo de la máscara. Si necesita hacer que cualquier capa se pueda enmascarar, primero debe colocarla debajo de la máscara de capa y luego establecer el interruptor Enmascarado en las propiedades de esta capa. Por el contrario, para desenmascarar la capa, establezca este interruptor en Normal.
Entonces hemos considerado la forma más sencilla creando una máscara. ¿Por qué se necesitan máscaras? La máscara estática es una herramienta para crear collages.
Aquí no nos detendremos en qué casos y por qué puede ser necesario ocultar algo al existente, para que el resto aparezca de una forma interesante o necesaria.
Arroz. 578. La máscara está en modo de edición. Para ver el efecto de la máscara, configure el bloqueo de máscara de capa (bloqueo)
Arroz. 579. Vista de escena cuando el modo de máscara está activado: la máscara de capa está bloqueada (bloqueo). El fondo solo es visible a través de la ventana de la máscara
Los efectos más interesantes y útiles de la aplicación de máscaras se obtienen animándolas: las ventanas gráficas de las máscaras pueden cambiar su forma y moverse sobre el fondo de las capas enmascaradas. Por eso son muy utilizados en los dibujos animados. Menús desplegables, ondas en el agua, metamorfosis de las nubes, movimiento de los labios al hablar: todo esto se puede hacer con la ayuda de máscaras animadas.
Ahora veamos cómo crear máscaras animadas. Básicamente, una máscara de animación es una máscara cuya ventana gráfica cambia de forma o se mueve en el área de trabajo. Puede crear varias ventanas gráficas, pero todas deben agruparse en un solo objeto mediante el comando Modificar> Agrupar.
Para simplificar, creemos una ventana gráfica ovalada y hagamos que se mueva contra el fondo de la capa enmascarada. Mostramos cómo crear una máscara arriba. Repita este procedimiento como ejercicio.
Creemos una interpolación de movimiento para la máscara de capa. Primero, muevamos la ventana gráfica en la máscara de capa. En nuestro ejemplo, el cuadro 20 se selecciona como el último (es el clave). En la máscara de capa, mueva la forma de la ventana gráfica a una nueva ubicación. Vuelva al primer fotograma y ejecute el comando Insertar> Crear interpolación de movimiento. Como resultado, aparecerá una flecha entre el primer y el último fotograma. Para que la animación funcione, le recomendamos que primero seleccione la forma de la ventana gráfica y luego le aplique el comando Modificar> Agrupación de grupos. Ya hemos notado esta circunstancia al considerar las capas de guía. Si algo va mal, aparece una línea discontinua entre el primer y el último fotograma en lugar de una flecha. Luego, en la capa enmascarada, pega el marco en la posición 20. Puede ser un marco normal, no necesariamente clave. Bloquea las capas y presiona la tecla
Arroz. 580.
Arroz. 581. Línea de tiempo al crear una máscara en movimiento y vista del área de trabajo en modo de edición (las capas están desbloqueadas)
En Flash MX, la creación de animaciones es ligeramente diferente de cómo se hace en Flash 5.O. Ya hemos cubierto estas diferencias en la sección Animación de prueba de este capítulo. Su esencia radica en la selección de valores apropiados de las propiedades del marco en la paleta Propiedades (Propiedades).
La ventana de visualización de la máscara puede cambiar de forma. Para hacer esto, en lugar de la interpolación de movimiento, utilice la interpolación de formas. Para hacer esto, en las propiedades del primer fotograma, seleccione el valor Forma de la lista desplegable Interpolación. El valor distributivo del parámetro Blend produce fotogramas intermedios más suaves; el valor Angular del mismo parámetro le permite conservar las esquinas y segmentos de líneas rectas en cuadros intermedios.
La peculiaridad de la animación basada en la remodelación es que la operación de agrupación no debe aplicarse al objeto transformado, como se hace al crear una interpolación de movimiento. La mejor transformación visual se logra cuando solo se transforma un objeto. Si necesita transformar varios objetos, colóquelos en una capa.
En Flash MX, la animación de tipo de transformación se realiza de forma similar. La peculiaridad es que las propiedades del primer fotograma se establecen en la paleta Propiedades.
Se obtienen efectos visuales interesantes cuando hay varias capas de fondo debajo de la máscara. Considere el caso en el que se requiere iluminar alguna imagen oscura con el haz de una linterna. En nuestro ejemplo, esta es una imagen rasterizada, un fragmento del interior de una casa rural. Obviamente, puede usar una ventana circular en la máscara de capa para simular un punto de luz. A continuación, necesitamos dos capas que contengan imágenes idénticas, que se diferencian entre sí solo en que una de ellas es más clara que la otra. Estas imágenes se pueden obtener del mismo archivo ajustando el brillo y el contraste en cualquier editor de gráficos rasterizados, por ejemplo, en Photoshop. Coloque la imagen clara en una capa directamente debajo de la máscara de capa y la imagen oscura en una capa ubicada aún más abajo. Las imágenes de estas dos capas deben disponerse de modo que una cubra completamente a la otra. La capa con la imagen clara estará enmascarada.
Arroz. 582. Las imágenes en diferentes capas deben combinarse para que la más clara cubra la oscura.
La máscara de capa contendrá una ventana flotante circular. En el modo de visualización, este círculo se moverá sobre la imagen oscura, tocando el área sobre la cual se encuentra. Por lo tanto, se crea un efecto visual del movimiento del rayo de la linterna.
Arroz. 583. Usar una máscara para crear el efecto de alejar el rayo de la linterna
Tenga en cuenta que puede utilizar secuencias de comandos ActionScript para controlar el movimiento de la ventana de la máscara. La creación de scripts es esencial al crear, por ejemplo, menús desplegables.
Otra forma de crear animaciones basadas en máscaras es mantener la ventana de la máscara estacionaria y los elementos de la capa enmascarada se mueven. Por lo tanto, puede crear, por ejemplo, el efecto de cambiar el paisaje fuera de la ventana de un tren en movimiento o títulos en ejecución. Si, por ejemplo, crea un grupo de varias ventanas gráficas (varias áreas de relleno agrupadas en un objeto), con la elección adecuada de la imagen enmascarada y el fondo, puede crear la ilusión de moverse y cambiar en forma de nubes u olas del mar. Finalmente, puede mover tanto los objetos de capa enmascarados como las ventanas gráficas al mismo tiempo.
Considere un ejemplo en el que la máscara está estacionaria, pero la imagen de la capa enmascarada se mueve. La imagen original, que es el fondo de toda la composición, muestra una duna y un cielo nublado. Queremos que las nubes se muevan. Con este fin, colocamos la imagen original estirada en ancho en la capa enmascarada e hicimos la ventana de visualización de la máscara para que coincidiera con el cielo en la imagen original. La imagen estirada en la capa de máscara se mueve horizontalmente. En este caso, solo el cielo ingresa a la ventana de la máscara y la duna está enmascarada. El ancho de la imagen estirada debe ser tal que al final del movimiento su borde izquierdo coincida con el borde izquierdo de la imagen de fondo. Por supuesto, solo una franja con nubes podría tomarse como una imagen en movimiento, pero nuestro método resultó ser más rápido en este caso: simplemente copiamos la imagen original en la capa enmascarada y le aplicamos el comando Escalar.
Arroz. 584. Cree un efecto de nube flotante utilizando una ventana gráfica de máscara fija y una capa de máscara móvil
Efectos de color
La interpolación de movimiento le permite aplicar diferentes efectos de color a todo el símbolo. Esta función no está disponible para la interpolación de formas.
En Flash 5.0, para aplicar un efecto a un símbolo, debe seleccionar este símbolo y seleccionar el efecto deseado en la paleta de efectos, que puede abrir usando el comando Ventanas> Paneles> Efectos (ver imágenes).
Arroz. 587. Ajuste de todos los componentes de color (avanzado)
Arroz. 588. Configuración de transparencia (Alfa)
En Flash MX, se seleccionan efectos similares en la lista desplegable Color de la paleta Propiedades.
Arroz. 589. Configuración de efectos en la paleta Propiedades en Flash MX
Ejemplos de animaciones
Ya hemos visto varios ejemplos de creación de animaciones anteriores, por ejemplo, en las secciones "Animación de prueba", "Capas de guía" y "Máscaras de capa". Proporcionaremos ejemplos adicionales aquí.
Acuario
Consideremos cómo sobre la base de un símbolo "Pez" puede hacer un "Acuario" con muchos peces diferentes. Para hacer esto, usaremos la biblioteca de símbolos proporcionada con el paquete Flash 5.0 (comando Ventana> Bibliotecas comunes> Clips de película). Seleccione el símbolo Fish Movie Clip en él. Esto no es solo una imagen, sino una caricatura, es decir, el pez se mueve en un área determinada. Transfieramos una instancia de este símbolo al espacio de trabajo del editor. Ahora vamos a seleccionarlo y editarlo. Por ejemplo, cambie el tamaño y gírelo ligeramente, como se muestra en la siguiente imagen. Puede cambiar el color y realizar otras transformaciones.
Arroz. 590. Se puede modificar una instancia de un símbolo de la biblioteca
Repetiremos esta operación varias veces, es decir, crearemos varias instancias del símbolo “Pez”. Cada instancia debe "flotar" en su propia capa separada. A continuación, cree otra capa, rellénela con azul claro y pinte las algas. El resultado será similar al que se muestra en la siguiente figura.
Arroz. 591. Hay varias instancias del símbolo de Pez en el área de trabajo, que difieren en tamaño, color y posición inicial. "Algas" pintadas a mano en la capa de fondo
Flash te permite hacer dibujos animados bastante naturalistas con animaciones complejas y de alta calidad. Esto usa gráficos rasterizados. Se cortan fragmentos individuales de la imagen gráfica original, que luego se modifican y se convierten en clips. Estos clips se utilizan para crear composiciones más complejas, etc. La siguiente ilustración muestra un fotograma de una caricatura basada en gráficos de mapa de bits.
Arroz. 592. Un fotograma de una caricatura creada mediante la composición de fragmentos de gráficos rasterizados.
Rotación de planetas alrededor del Sol.
Consideremos ahora la rotación de los tres planetas, Mercurio, Venus y la Tierra, alrededor del Sol. Alexander Rybnikov describe este ejemplo muy instructivo y hermoso en el sitio http://zona5.al.ru. En detalle, paso a paso, describiremos el proceso de creación de una caricatura.
Paso 1. Creemos un nuevo archivo. Ejecutemos el comando Modificar> Película y en el cuadro de diálogo abierto indicamos dimensiones físicasáreas en píxeles. No nos limitemos, los dibujos animados en Flash se ven bien en el modo de pantalla completa, así que establezcamos el tamaño del marco en 800x600. De forma predeterminada, la velocidad de fotogramas de la caricatura se establece en 12 fotogramas / s. En este caso, es razonable aumentar este número a 16, ya que de lo contrario la imagen se "agita" notablemente.
Paso 2. Primero dibujemos el Cosmos. Para hacer esto, simplemente delinee el área de trabajo con un rectángulo y rellénelo con negro.
Paso 3. Ahora en el centro de nuestro Universo es necesario colocar el Sol. Trate de retratarlo más o menos creíble, es decir, dibuje no solo un círculo rojo determinado, sino que también aplique un degradado ligeramente asimétrico, lo que debe darle algo de volumen a su trabajo, y luego rodee el Sol con un halo luminoso, que lo hará agregue credibilidad. Todo lo anterior se puede lograr tanto mediante el propio editor de Flash como mediante la importación de una imagen ya preparada desde cualquier ráster. editor grafico... Pero el segundo método en nuestro caso es extremadamente inapropiado, ya que el Sol es un objeto bastante grande, y si se presenta en forma de imagen rasterizada, entonces el volumen del archivo de salida aumentará significativamente. Veamos cómo dibujar el sol usando Flash.
Dibuja un círculo, para el relleno en la lista desplegable con muestras de color, elige cualquier degradado. Usando el comando Ventana> Paneles> Relleno (Ventana> Paletas> Relleno) abra un cuadro de diálogo que le permitirá establecer los valores de los colores degradados. Deje que el sol se inunde de amarillo brillante, convirtiéndose suavemente en rojo brillante. Realizaremos un halo de la misma forma, colocando un círculo más grande, coloreado con un degradado de rojo a negro. Es importante que el Sol esté exactamente en el centro, es decir, las coordenadas del centro deben ser (400,300).
Paso 4. Es hora de dibujar tres planetas. Es importante tener en cuenta que son bastante pequeños, por lo que en este caso puede importar una imagen de mapa de bits en formato GIF transparente (más precisamente, una imagen con fondo transparente). Esta imagen no debería ocupar más de 500 bytes de espacio en disco. La importación se realiza de la siguiente manera.
Primero necesitas crear una nueva capa con el comando Insertar> Capa (Insertar> Capa). Cada uno de los planetas requerirá una capa separada, por lo que tiene sentido nombrar las capas con los nombres de los planetas. A continuación, en esta capa, debe crear un nuevo símbolo (comando Insertar> Símbolo (Insertar> Símbolo)). En el menú Archivo, seleccione el comando Importar e importe la imagen GIF deseada.
Paso 5. Después de eso, el símbolo creado debe colocarse en la capa correspondiente. Para hacer esto, abra la biblioteca de símbolos (comando Ventana> Biblioteca) y arrastre el símbolo del planeta desde allí al espacio de trabajo (escena).
Paso 6. Tenga en cuenta que los planetas deben girar posteriormente alrededor del Sol, el centro de la escena. Por tanto, es necesario volver a editar el símbolo nuevamente (hacer doble clic en el planeta) e indicar en el cuadro de diálogo Información (comando Ventana> Información) su distancia al centro. Se elige la distancia a lo largo del eje horizontal (todos estos valores son negativos, es decir, inicialmente los planetas se ubican a la izquierda del Sol):
- para la Tierra: - 250 píxeles;
- para Venus: - 180 píxeles;
- para Mercurio: - 120 píxeles.
¡La imagen estática está lista! Debería verse lo más similar posible a la siguiente figura:
Arroz. 593. Escena estacionaria: el sol y tres planetas a su izquierda.
Paso 7. Ahora hagamos que nuestros planetas giren en sentido antihorario alrededor del Sol. Se sabe que aquellos planetas que están más cerca del Sol giran más rápido. Intentemos calcular el número de fotogramas de la caricatura de tal manera que la Tierra haga una revolución en un ciclo, Venus, dos, y Mercurio, tres. El número óptimo de fotogramas, un múltiplo de dos, tres y cuatro, es 120. Sería feo si todos los planetas en algún momento se convirtieran en una fila. Por lo tanto, establezcamos el ángulo inicial de los planetas:
- para la Tierra - 150 °;
- para Venus - 120 °;
- para Mercurio - 0 °.
Estos datos se pueden configurar y modificar en el cuadro de diálogo Información.
Paso 8. Ahora creemos el primer fotograma clave para cualquiera de los planetas, por ejemplo, para la Tierra. Para hacer esto, haga clic con el botón derecho en el primer fotograma de la capa correspondiente y seleccione el comando Crear interpolación de movimiento en el menú que se abre. Luego copiaremos este marco al portapapeles (Soru) y lo pegaremos (Pegar) en lugar del marco con el número 60. Luego giraremos la Tierra en un ángulo de 180, es decir, estableceremos el valor del ángulo en la Transformación ventana a -30 (ver figura). El siguiente fotograma clave será el 90 (otra rotación de 90 °) y el último fotograma clave será el 120 (rotación completa de la Tierra alrededor del Sol).
Arroz. 594. Desarrollo de animación en una caricatura con el Sol y los planetas.
Paso 9. De manera similar, podemos establecer el movimiento de Venus y Mercurio. Para establecer el movimiento de Venus, se necesitarán el doble de fotogramas clave, para Mercurio, tres veces. En este caso, puede copiar varios fotogramas a la vez. Por lo tanto, en el cuadro de diálogo, basta con establecer los ángulos para una sola revolución de cada uno de los planetas.
Paso 10. Todo lo que queda es publicar la escena resultante (comando Archivo> Publicar) y disfrutar del efecto.
El archivo SWF tiene menos de 10 KB. Incluso un archivo GIF o JPG no animado ocuparía mucho más espacio en el disco. ¡Y nuestra caricatura de 7.5 segundos tiene un volumen de solo 10 KB!
Sonido en dibujos animados
Puede agregar sonido a la caricatura. Para hacer esto, primero debe importar un archivo de sonido en uno de los siguientes formatos: WAV, AIFF o MP3. La importación se realiza mediante el comando Archivo> Importar.
La banda sonora puede embellecer tu caricatura. Sin embargo, muchos usuarios a menudo optan por silenciar el sonido. Por lo tanto, sería bueno, al desarrollar una caricatura doblada, proporcionar un botón para apagar el sonido. A este botón se le debe asignar la acción Detener todos los sonidos (las acciones similares asignadas a los objetos también se denominan Acción o script). Un archivo de sonido tiene las siguientes opciones que afectan tanto la calidad del sonido como el tamaño del archivo:
- Frecuencia de muestreo. Número de muestras de señal de sonido producido en un segundo. Por lo general, este valor no supera los 22 kHz, que corresponde a una banda de frecuencia de 11 kHz (según el teorema de Kotelnikov, el ancho de banda de las frecuencias reproducidas es igual a la mitad de la frecuencia de muestreo).
- Resolución de bits El número de bits (dígitos binarios) utilizados para muestrear la señal de audio por nivel. Los archivos de 16 bits tienen menos ruido de fondo, pero los dibujos animados de Flash suelen utilizar audio de 8 bits para reducir el tamaño del archivo.
- Canales El sonido puede ser de uno o dos canales (mono y estéreo). Para los dibujos animados en Flash, el sonido mono suele ser suficiente, y requiere aproximadamente la mitad de la memoria que el sonido estéreo.
Al diseñar una caricatura, puede usar archivos de sonido de alta calidad y luego, al publicar en un archivo SWF, establecer las opciones de sonido deseadas.
Para importar un archivo de sonido a una caricatura, elija Archivo> Importar y en el cuadro de diálogo Importar que se abre, seleccione el archivo de formato de sonido que desea importar. Luego haga clic en el botón Abrir. Como resultado, el archivo de sonido seleccionado se incluirá en la biblioteca de dibujos animados.
Después de importar un archivo de sonido a una caricatura, debe colocarlo y configurar los parámetros. Haz lo siguiente:
- Crea una nueva capa para el archivo de sonido.
- Seleccione el fotograma clave deseado en esta capa, abra la biblioteca (Ventana> Biblioteca) y arrastre el archivo de sonido al área de trabajo. Esto propagará el archivo de audio a todos los fotogramas hasta el siguiente fotograma clave, si lo hay.
- En Flash 5.0, vaya a Wmdow> Paneles> Sonido (Ventana> Paletas> Sonido). Se abre la paleta Sonido. En Flash MX, consulte la paleta Propiedades. Seleccione los sonidos que desee de la lista desplegable Sonido. Esta lista contiene todos los archivos de sonido importados. La información del archivo se proporciona debajo de la lista, bajo el nombre del archivo: frecuencia de muestreo en kHz, canales, resolución de bits, duración y tamaño del archivo.
- En la lista desplegable Efecto, seleccione efecto de sonido... El valor predeterminado es Ninguno. Por ejemplo, el efecto de aparición gradual reproduce el sonido a un nivel de aparición gradual.
- En la lista desplegable Sincronizar, seleccione una de las siguientes opciones:
- Evento Inicia la reproducción de audio desde el primer fotograma clave y continúa hasta el final del archivo, incluso si la caricatura ya ha terminado. Este es el predeterminado.
- Comienzo. Comienza la reproducción de audio desde el primer fotograma clave. Sin embargo, si el fotograma clave se vuelve a reproducir mientras continúa el sonido, Flash comienza a reproducir el sonido nuevamente. Este valor se usa generalmente cuando se expresan botones.
- Parada. Detiene la reproducción de audio.
- Arroyo Sincroniza el sonido con la animación. Al hacerlo, Flash acorta o alarga la animación para que coincida con el sonido. La reproducción de audio se detiene cuando se reproduce el último fotograma que contiene audio. Para indicar dónde termina el sonido, puede agregar un fotograma clave final antes de agregar el sonido.
- En el campo Loop, establezca el número de veces que se repetirá el sonido. Si conoce la longitud del archivo de audio, el número de ciclos de animación y la velocidad de fotogramas, puede calcular cuántos ciclos de audio se necesitarán para reproducir su animación. Por ejemplo, si la animación contiene 48 fotogramas y su frecuencia de reproducción es de 12 fotogramas / s, entonces la duración de la caricatura es de 4 segundos; si la duración del archivo de sonido es 2 s, entonces el número de ciclos de reproducción de sonido es 2. En la práctica, para no involucrarse en los cálculos, generalmente se indica un número conscientemente mayor de ciclos.
- Después de agregar un archivo de sonido, para ver los resultados, presione la tecla
o ve a Control> Jugar.
Después de colocar el archivo de sonido en la caricatura, puede editarlo. Por ejemplo, puede eliminar fragmentos de sonido innecesarios, cambiar su volumen. Para hacer esto, en la paleta Sonido, haga clic en el botón Editar. Esto abrirá la ventana Editar envolvente.
Entre los paneles de los canales de sonido izquierdo y derecho hay una regla con controles deslizantes, con la que puede establecer el principio y el final del archivo de sonido. Al mover el control deslizante de la izquierda hacia la derecha, eliminamos el fragmento inicial del archivo. Del mismo modo, al mover el control deslizante derecho, eliminamos el fragmento final del archivo de audio.
Los paneles de canal izquierdo y derecho muestran líneas de envolvente que indican aproximadamente la dirección en la que cambia el volumen del sonido. Cuando esto ocurre, se colocan marcadores de sobre cuadrados. Para aumentar el volumen del sonido, arrastre el marcador hacia arriba, para disminuir el volumen, arrastre hacia abajo. A la línea del sobre se le puede dar una forma caprichosa. Para hacer esto, primero, haciendo clic en el sobre, establezca marcadores adicionales y luego arrástrelos a los lugares deseados.
Cuando haya terminado de editar el archivo de sonido, haga clic en el botón Aceptar para cerrar la ventana Editar envolvente.
Arroz. Ventana editar envolvente
Tenga en cuenta que agregar sonido puede aumentar significativamente el tamaño del archivo de dibujos animados. Por lo tanto, se deben tomar medidas para comprimir la información de audio. Reducir la frecuencia de muestreo puede degradar la calidad del sonido. Puede utilizar audio de un solo canal en lugar de dos canales. Hay dos formas de configurar las propiedades de sonido en Flash:
- Utilice la pestaña Flash del cuadro de diálogo Configuración de publicación, que se abre con Archivo> Publicar, para definir las propiedades de todos los archivos de sonido en una caricatura. Este método es bueno si la caricatura contiene uno o más sonidos similares.
- Utilice el cuadro de diálogo Propiedades de sonido para establecer las propiedades de los archivos de sonido individuales. Para hacer esto, primero abra la biblioteca de dibujos animados (Ventana> Biblioteca) y haga doble clic en el icono del archivo de sonido cuyas propiedades desea cambiar. La información sobre el archivo de audio se muestra en la parte superior del cuadro de diálogo. Se pueden seleccionar nuevos valores de parámetros en las listas desplegables del grupo Configuración de exportación. Al mismo tiempo, el nuevo tamaño de archivo en kilobytes y un porcentaje del tamaño original se muestra en la parte inferior del cuadro de diálogo. Puede utilizar el formato de compresión MP3, que es el mejor disponible en Flash.
Puede asignar sonidos a diferentes estados del símbolo del botón. Los sonidos se almacenan dentro de este símbolo y, por lo tanto, se reproducen en todas sus instancias. Para agregar un sonido a un botón, debe hacer lo siguiente:
- En el diagrama de tiempos del botón, agregue una capa en la que colocará los sonidos.
- En la capa de sonido, cree un fotograma clave correspondiente al estado del botón que desea que suene.
- Seleccione este fotograma clave y configure las opciones de sonido.
Composición de dibujos animados: escenas y clips
Una caricatura puede tener una estructura compleja (composición). Por lo tanto, los elementos individuales de una caricatura pueden ser ellos mismos dibujos animados. En el ejemplo del acuario mencionado anteriormente, los peces eran instancias diferentes del símbolo de Clip de película, es decir, eran dibujos animados. Cada caricatura tiene su propia línea de tiempo que controla su reproducción. Si la caricatura está incluida parte de en otra caricatura, para enfatizar esta circunstancia, se llama clip. A su vez, un clip puede contener otros clips.
Para administrar varios elementos en un clip, generalmente se organizan en capas. Una estructura multicapa se utiliza para crear casi cualquier objeto más o menos complejo, ya sea un dibujo o una animación completa.
Además de descomponer una caricatura (clip) en capas, puede dividirla en segmentos de tiempo, es decir, en escenas. Entonces estas escenas se pueden organizar en cualquier orden. Las razones para dividir una caricatura en escenas pueden ser las siguientes:
- el número de fotogramas de la caricatura es demasiado grande. Por ejemplo, la línea de tiempo no es visible en la pantalla;
- en algún momento, la composición de las imágenes gráficas cambia (cambio de escenario y personajes);
- un fragmento de una caricatura se repite varias veces o se puede utilizar en otras caricaturas.
Cuando crea una nueva caricatura (Archivo> Nuevo), solo se crea una escena llamada Escena 1 de forma predeterminada. En este caso, cualquier animación desarrollada pasa a formar parte de esta escena. Para agregar una escena, vaya a Insertar> Escena. Esto borra el área de trabajo y aparece otro nombre sobre la línea de tiempo a la izquierda: Escena 2.
Arroz. 596.
Si su caricatura contiene varias escenas y clips, utilice los botones de menú correspondientes para mostrar la escena y el clip deseados en el área de trabajo. Se encuentran arriba (en Flash 5.0) o debajo (en Flash MX) de la línea de tiempo a la derecha.
Para configurar los parámetros de la escena, vaya a Ventana> Paneles> Escena (Ventana> Paletas> Escena). En Flash MX, este comando es más corto: Ventana> Escena. La paleta Escena que se abre mostrará una lista de todas las escenas de esta caricatura. El orden de las escenas en la lista es importante porque ese es el orden en el que se reproducirán. Para cambiarlo, simplemente arrastre el nombre de la escena en la lista a una nueva posición. Para cambiar el nombre de una escena, haga doble clic en ella, ingrese un nuevo nombre y presione la tecla
Arroz. 597. Paleta de escenas. En la parte inferior de la paleta hay tres botones para duplicar, agregar y eliminar una escena.
Para ver una escena, puede hacer clic en su nombre en la lista en la paleta Escena, aunque existen otras herramientas para esto, por ejemplo, el botón de menú ubicado encima de la línea de tiempo.
Todo el trabajo de creación de una película se lleva a cabo utilizando el panel Línea de tiempo, cuya imagen se muestra a continuación. El panel Línea de tiempo está dividido en dos partes por una línea vertical que se puede mover con el mouse. El lado derecho del panel es una "regla de marco", una regla en la que se ubican los símbolos de marco, que parecen pequeños rectángulos. El contenido de los marcos son imágenes estáticas que cambian con el tiempo y aparecen en el campo de trabajo. La numeración de los fotogramas se muestra en la parte superior de la regla. La "barra de estado" se encuentra debajo de la regla de marco.
Los fotogramas clave son fotogramas en los que se colocan imágenes estáticas que "cobran vida" durante la animación. Pulsación de tecla
- la herramienta principal cuando se trabaja con animación en Flash. Muestra información sobre las capas, qué fotogramas son clave y qué Flash genera. Con la ayuda de la línea de tiempo, puede comprender qué marcos contienen acciones o etiquetas. Le permite mover fotogramas clave y piezas completas de animación.
Características clave de la línea de tiempo:
- Para activar una capa, debe seleccionarla. Puede dibujar y editar solo en la capa activa. La capa activa se resalta en la línea de tiempo y el icono de lápiz indica que se puede editar (Capa 3).
- El contenido de las capas en la parte superior de la línea de tiempo se muestra encima del contenido de las capas debajo de ellas. Para intercambiar capas, arrastre el nombre de la capa al lugar deseado en la línea de tiempo.
- Para crear una nueva capa, seleccione una posición en la línea de tiempo para la nueva capa y presione el botón "Agregar capa".
- Para eliminar una capa, simplemente arrástrela a la papelera.
- Para cambiar el nombre de una capa, haga doble clic en ella en la línea de tiempo.
- Al crear una imagen en capas, use los controles de capa. Hacer clic en la columna debajo de la imagen de bloqueo bloqueará cualquier edición, y en la columna debajo de la imagen del ojo hará que la capa sea invisible.
A continuación se muestra un ejemplo de una animación, en la que se coloca un fondo diferente (paisaje) con un bloque de texto correspondiente en diferentes capas con un desplazamiento de 25 fotogramas. El paisaje se obtuvo llenando el fondo con un mapa de bits Color Mixer-> Bitmap con posterior procesamiento con la herramienta Fill Transformer.
- Imagen (gráfico), es un personaje de un solo cuadro. De ahí sigue su nombre estático. Si el símbolo es realmente un objeto estático (no animado), es mejor convertirlo en un gráfico.
- Botón (botón). Flash tiene un tipo de símbolo personalizado para la función de un botón. Tiene 4 cuadros: Arriba, Arriba, Abajo, Hit, que contienen los siguientes estados de botón:
- Hit: el estado habitual de un botón que contiene un enlace que el usuario ya ha visitado.
- Animación (clip de película). Este es el tipo de símbolo más "completo". Puede contener cualquier número de fotogramas. Un símbolo de este tipo se puede considerar como un objeto Movie en ActionScript (Flash incrustado).
Hay dos formas fundamentalmente diferentes de animar algo en Macromedia Flash:
- Dibuja cada fotograma tú mismo, usando Flash solo para recorrer los fotogramas.
- Hacer que Flash procese automáticamente los fotogramas intermedios.
Animación paso a paso (fotograma a fotograma)
Esta es una animación compuesta enteramente por fotogramas clave. Aquellos. Usted mismo determina tanto el contenido del fotograma como su "duración" (es decir, cuántos fotogramas estáticos ocupará la imagen). Antes de dibujar el siguiente fotograma, debe insertar un fotograma clave vacío (
Las ventajas de este método incluyen:
- La animación fotograma a fotograma brinda, en cierto sentido, más control sobre la animación, y si eres un animador experimentado, puedes usarla para su beneficio.
- Esta es la única forma de organizar el cambio de imágenes completamente independientes: una presentación de diapositivas (por ejemplo, creando un banner normal con Flash).
- Y todo lo demás que se deriva de la capacidad de dibujar cada cuadro a mano.
Las desventajas incluyen las siguientes:
- La animación cuadro por cuadro es difícil de modificar. Especialmente si no se trata de un conjunto discreto de imágenes, sino de una animación relacionada. Todos los marcos deben modificarse.
- La animación fotograma a fotograma ocupa un volumen bastante grande, ya que debe almacenar información sobre cada fotograma.
Operaciones elementales con personal:
- Insertar fotograma clave en blanco - Insertar -> Fotograma clave en blanco,
. - Fotograma clave que repite el contenido del anterior - Insertar -> Fotograma clave,
. - Borrar fotograma clave - Insertar -> Borrar fotograma clave,
+ . - Insertar marco regular - Insertar marco,
. - Eliminar marco - Insertar -> Eliminar marcos,
+ .
Operaciones elementales con rodillo:
- Viendo el video - Control, película de prueba.
- Cambiar la altura y el ancho de la película: Modificar, Película.
- Convertir película Flash a archivo de documento HTML, configuración de publicación, pestaña HTML.
- Vista previa del documento HTML: archivo, vista previa de publicación.
Creemos una película de varias capas con una animación paso a paso "Flower Life". 1ra capa - marco, 2da capa - maceta, 3ra capa - flor. Puede representar la tercera capa en tres capas: hoja, tallo, inflorescencia.
La maceta y el marco siempre están frente a nuestros ojos, y la flor logra crecer y desvanecerse en 25 fotogramas clave. En la capa "flor", cada fotograma es diferente del anterior, pero puede cambiar el estado de la flor un fotograma a la vez.
El video se publica usando Archivo-> Configuración de publicación. En la pestaña Formatos, se seleccionan las opciones de publicación, puede seleccionar varias, en las pestañas correspondientes configura las opciones para la opción de publicación seleccionada, luego haga clic en el botón Publicar. En este caso, los archivos creados se guardan en la misma carpeta que el archivo original con la extensión .fla. En nuestro ejemplo, la opción de archivo animado GIF está seleccionada para su publicación, como en todos los ejemplos posteriores.
Intente completar la segunda tarea usted mismo utilizando el algoritmo siguiente. Esto creará la animación "Coche en movimiento":
- crear una capa "Paisaje";
- ejecute el comando Archivo / Importar e importe una imagen con una imagen de paisaje o cree un fondo de "asfalto";
- seleccione el marco número 30 en la regla y presione F5. crear una cadena de fotogramas duplicados para el paisaje;
- crea una nueva capa "Auto";
- dibuja un coche sin ruedas en el primer fotograma clave;
- agrupe el automóvil dibujado y presione F8 para crear una muestra de biblioteca: clip de automóvil;
- mueva el automóvil, seleccione el segundo cuadro y presione F6;
- moveremos el automóvil y crearemos nuevos fotogramas clave hasta que el automóvil desaparezca fuera del área de trabajo;
- cree una nueva capa y asígnele el nombre "Wheel1";
- dibuja una rueda en el primer fotograma y crea una rueda de muestra de biblioteca a partir de ella;
- crear un nuevo fotograma clave y mover el volante detrás del automóvil movido, etc. en todos los demás cuadros, girando la rueda en un ángulo pequeño;
- bloquear la capa "Wheel1" y copiar toda la secuencia resultante de fotogramas en el búfer;
- cree una nueva capa y asígnele el nombre "Wheel2";
- seleccione el primer fotograma y copie la secuencia completa de fotogramas del búfer;
- para recorrer la vista, haga clic en
+ .
Como otra tarea independiente, puede ofrecer crear una animación paso a paso "Grabando un partido":
En Flash, hay dos opciones para crear imágenes intermedias: interpolación de movimiento (creación de animación basada en la modificación del personaje), interpolación de forma (creación de animación basada en el cambio de forma). Estos métodos son fundamentalmente diferentes.
Animación de movimiento
Con este método de animación se establecen la posición inicial, el color, el tamaño, la orientación y los parámetros finales, y el propio programa realiza este movimiento. Con este método de animación, Flash crea automáticamente fotogramas intermedios entre los fotogramas clave que especifique. Esto significa que dibuja un objeto, luego realiza los cambios en otro fotograma, de lo que hablaremos a continuación, y le pide a Flash que calcule los fotogramas que se encuentran entre estos dos fotogramas clave. Hace el trabajo y obtienes una animación fluida.
La velocidad y la suavidad de la animación dependen del número de fotogramas que se reservan para el movimiento y la velocidad de la película Flash (película). La velocidad de la película se puede cambiar de la siguiente manera: Modificar-> Película ...,
Considere la animación de movimiento interpolado. Esta es la técnica de animación más utilizada en Flash. En este caso, la animación se basa en la modificación de los símbolos, es decir el objeto de animación es un símbolo. Al igual que con la animación de interpolación de formas, para cada objeto a la vez, necesitamos una capa. Debería haber un símbolo en esta capa, con el cual ocurrirán todos los cambios.
Cuando se utiliza Motion Tweening, se modifican los siguientes parámetros:
- tamaño (tanto proporcional como desproporcionado, por separado la altura y el ancho);
- inclinación;
- localización;
- ángulo de rotación;
- efectos de color;
- puede utilizar capas de guía para definir la ruta de un objeto.
Hay varias formas de habilitar la interpolación de movimiento (y, desafortunadamente, solo hay una forma de deshabilitarla). Para habilitar la interpolación de movimiento, debe activar el fotograma inicial de su transición, luego, presionando el botón derecho del mouse, seleccione Crear interpolación de movimiento en el menú contextual (también puede hacer esto seleccionando Insertar-> Crear interpolación de movimiento ). Una forma universal de habilitar / deshabilitar la interpolación de movimiento es usar el panel Cuadro seleccionando Movimiento en el campo Interpolación. También puede controlar los parámetros de animación allí:
- Facilitación: aceleración exponencial inversa, funciona exactamente igual que en la interpolación de formas.
- Rotar le permite controlar la rotación. Auto: Flash intenta detectar automáticamente el número de bucles. CW (sentido horario) y CCW (sentido antihorario). En este caso, junto al campo de la derecha, es posible ingresar el número de revoluciones. Solo se pueden usar valores enteros. Puede desactivar la rotación eligiendo Ninguno.
- Orientar a la ruta: gira el personaje de acuerdo con la línea guía. Snap ajusta el símbolo a esta guía.
En los casos en que el número de fotogramas de la escena principal no sea un múltiplo del número de fotogramas de un símbolo, la casilla de verificación Sincronizar permite sincronizar las dos animaciones.
Las capas que contienen la curva a lo largo de la cual debe moverse el objeto se denominan capas de guía(capas de guía) (es decir, contienen la ruta del objeto). Para agregar una capa de guía, debe Seleccionar la capa en la que se encuentra su símbolo; luego presione el botón derecho del mouse y seleccione Agregar guía en el menú contextual. Esto hace que la capa original sea una capa guiada. Esta está lejos de ser la única forma de crear una capa guía. Cualquier capa puede convertirse en una guía especificándola en sus propiedades, o guiada arrastrando la capa deseada con el mouse para que quede debajo de la guía.
A continuación, debe dibujar una trayectoria de movimiento. La ruta puede ser cualquier curva que no sea una región de relleno. ¡Todo! La capa de control está lista. Puede prohibir su edición para que sea más conveniente trabajar y, en el futuro, hacerlo completamente invisible.
Ahora, para usar esta capa, debe tomar el símbolo del punto central (este es un círculo tan pequeño) y arrastrarlo al camino. Sentirás cuando el símbolo "engancha" en él, y verás cómo se desliza sobre él.
Luego, todo sigue el escenario familiar: fotogramas clave, habilitar la interpolación de movimiento ... Si desea que el objeto gire de acuerdo con la trayectoria, y no solo se mueva a lo largo de él, en el panel Marco debe habilitar la casilla de verificación Orientar a la ruta.
La interpolación de movimiento le permite aplicar diferentes efectos de color a todo el símbolo. Esta característica falta en la interpolación de formas. Para aplicar un efecto a un símbolo, debe seleccionar este símbolo y, en el panel de efectos (Windows -> Paneles -> Efectos), seleccione el efecto deseado configurando el brillo, la compensación de color y el tono.
Cree usted mismo un ejemplo muy simple de la animación de una bola que se mueve en un círculo, usando el algoritmo a continuación:
- dibuje un círculo en el primer fotograma y rellénelo con un relleno de degradado radial;
- agrupar el dibujo;
- selecciónelo con la herramienta Transformador y mueva el centro de rotación una cierta distancia;
- vaya al cuadro 30, presione
, es decir. hagámoslo una copia del primer fotograma; - vuelva al primer fotograma y abra el panel Propiedades y seleccione Movimiento en la lista Interpolación;
- en la lista adicional Girar, seleccione la rotación forzada en el sentido de las agujas del reloj (CW) o en el sentido contrario a las agujas del reloj (CCW).
El siguiente ejemplo es un poco más complicado: está creando una animación del movimiento de las letras del texto:
- usando la herramienta Texto, cree un bloque de texto;
- seleccione la palabra escrita y divídala en letras separadas (Modifi / Break Apart);
- separar las letras en capas separadas Modificar / distribuir en capas;
- Convierta cada letra de cada capa en un dibujo, repita el comando Modifi / Separar. Seleccione cada letra y agrúpela;
- en la regla del marco, a cierta distancia, cree copias del primer marco, para esta prensa
; - a su vez, seleccionaremos los primeros fotogramas de cada letra, la moveremos fuera del área de trabajo, cambiando las proporciones de la letra, el centro de rotación, etc .;
- en el panel Propiedades, en la lista Interpolación, seleccione Movimiento. En la lista adicional Rotar, seleccione una rotación en el sentido de las agujas del reloj;
- veamos la animación en la ventana gráfica
+ .
La interpolación de formas es un cambio suave de un objeto de animación en el escenario. Por objeto entendemos aquí no un grupo o un bloque de texto, como en la interpolación de movimiento, sino un dibujo multicolor ordinario que puede constar de varios fragmentos. Además, el número de dichos fragmentos al principio y al final de la animación puede ser diferente.
En el proceso de animación de formas, el dibujo puede desintegrarse en varios fragmentos independientes, cada uno de los cuales se transforma gradualmente en algo inesperado. O, por el contrario, varias imágenes independientes ubicadas en el área de trabajo, en proceso de animación, cambiando gradualmente su apariencia (tamaño, color, forma), pasan a formar parte de una sola imagen. Digamos que quieres que el cuadrado se convierta suavemente en un círculo, o que la silueta de un conejo fluya suavemente hacia la silueta de un lobo. En estos casos, se utiliza la interpolación de formas.
Como de costumbre, establece dos fotogramas clave a cierta distancia entre sí. Hay una gran limitación en esta opción de animación: la animación debe ocupar una capa separada y ser una sola forma dibujada (no debe haber grupos ni símbolos). Después de que haya dos fotogramas clave, debe activar el primero de ellos (solo vaya a él) y seleccione en el panel Marco (Windows-> Paneles-> Marco,
Al utilizar la interpolación de formas, debe establecer dos parámetros:
- La aceleración especifica la aceleración exponencial inversa. El valor de este parámetro puede variar de - 100 a + 100. Esto significa que si especifica una aceleración negativa, el movimiento ocurrirá con una aceleración positiva, la velocidad aumentará. Por el contrario, si la relajación es positiva, la animación se ralentizará;
- El parámetro Blend determina el algoritmo de transición:
- Distributivo: suaviza la transición de una forma a otra.
- Angular: intenta mantener la relación de aspecto de las esquinas.
La última herramienta en la animación de interpolación de formas son las sugerencias de forma. Estos son los puntos en los que ayuda a Flash a realizar la transición correctamente. No puede prescindir de ellos en el caso de formas complejas. Son muy fáciles de usar. En el primer fotograma clave (donde comienza la animación) agrega un punto de control (Modificar-> Transformar-> Agregar sugerencia de forma, Puede eliminar todos los puntos con Modificar-> Transformar-> Eliminar todas las pistas. Para eliminar un solo punto, puede hacer clic con el botón derecho en él y seleccionar Eliminar pista en el menú contextual. Dado que los puntos de control están designados por las letras del alfabeto latino, puede haber un máximo de 27 de ellos. Puede haber muchas opciones para la transición de una forma a otra, por lo que la animación puede seguir el camino que más le convenga en menor medida. Incluso la transformación de una figura geométrica tan simple como un rectángulo ubicado verticalmente en el mismo rectángulo, pero ubicado horizontalmente, puede ocurrir de diferentes maneras. Por ejemplo, en el proceso de tal transformación, la figura puede tener la forma de un óvalo o incluso un círculo. Para controlar el proceso de animación, debe intentar simplificar la animación dividiendo los dibujos en varios fragmentos independientes ubicados en diferentes capas, pero participando simultáneamente en la animación. Un truco más coordinado es utilizar las marcas de forma mencionadas anteriormente. Si necesita desactivar la interpolación de formas, en el panel Marco, seleccione Interpolación: Ninguna. A continuación se muestra un ejemplo de este método de animación de "convertir" un elefante en una oveja y viceversa. Intente animar la forma de la "transformación" de una serpiente en un águila y viceversa usted mismo: A menudo, en el proceso de animación, es necesario que el objeto no se mueva en línea recta, sino a lo largo de una trayectoria determinada. En este caso, la animación se crea de la forma habitual y la trayectoria se dibuja en una capa separada. La capa de rutas puede servir para varias animaciones diferentes, cada una de las cuales se encuentra en una capa separada, pero todas estas capas con animación deben ubicarse debajo de la capa de rutas. Puede utilizar varias herramientas para dibujar el trazado: lápiz, pincel, bolígrafo, elipse o rectángulo. Para vincular un objeto en movimiento a esta trayectoria, solo necesita transferir este elemento a la trayectoria en los fotogramas clave inicial y final de la animación. En este caso, en el panel Propiedades, debe ajustar los parámetros de la animación para que la casilla de verificación Ajustar esté habilitada. Para hacer esto, primero debe seleccionar el primer fotograma clave de la animación, también es útil seleccionar el comando Ver / Ajustar a objetos. Por ejemplo, creemos un video "Mariposa volando sobre una flor", de acuerdo con el siguiente algoritmo: Esta capa está diseñada para cubrir y hacer invisible parte de la imagen ubicada directamente debajo de ella. Si la máscara de capa no contiene ninguna imagen, entonces cubre completamente (enmascara) la capa de abajo y su capa asociada, que se llama capa de enmascaramiento... Si se dibuja algo en la máscara de capa, cualquier relleno de este dibujo se convierte en una parte transparente de la capa. Si anima una imagen creada en una máscara de capa, la parte transparente de la máscara se moverá por la pantalla. Una máscara de capa puede enmascarar varias capas. Puede hacer que una capa normal se pueda enmascarar cambiando su posición en la pila de capas. Solo necesita mover la capa habitual debajo de la máscara de capa con el mouse. La animación en este caso puede ser de dos tipos. O animación de objetos ubicados en capas enmascaradas. O animación de la imagen en la capa de máscara. Un ejemplo de cómo crear un efecto de aparición gradual en la pantalla letra por letra. Para hacer esto, animaremos el movimiento de la imagen en la capa de máscara usando el siguiente algoritmo: A continuación se muestra un archivo gif animado en el que se usa la animación de la forma de las letras del texto "Feliz Año Nuevo", y luego se "borra" el texto que aparece, usando una máscara de capa, un rectángulo con un relleno degradado , así se obtiene el efecto de "iridiscencia" de las letras. El fondo es una pieza de gráficos de mapa de bits. El siguiente ejemplo muestra una palabra "crecer" desde un punto, donde un gráfico de mapa de bits importado se utiliza como capa de máscara, y se crea una animación en la máscara de capa en la que una palabra crece fuera del punto y luego se encoge de nuevo. . Este ejemplo también utiliza la interpolación de formas. Un botón es un tipo especial de símbolo diseñado para responder a las acciones del usuario, por ejemplo, presionar el botón en sí, su contraparte del teclado o un área activa en una película. La línea de tiempo del botón contiene los siguientes cuatro fotogramas: Si necesita crear varios botones idénticos, en este caso es suficiente crear solo un botón de muestra. Y luego aplique las inscripciones necesarias, cambie el color o el tamaño. Si el botón debe contener objetos animados, debe crear clips de película de antemano y luego simplemente colocarlos en el marco del botón correspondiente. Como ejemplo, creemos un botón con animación incorporada usando el siguiente algoritmo: Este objeto se publicó en modo HTML con una indicación del archivo swf correspondiente. Creemos botones que controlen cómo funciona la presentación de diapositivas: En lanzamiento) ( GotoAndStop (k); - el número entre paréntesis indica el número del marco correspondiente. Encendido (presionar) ( GotoAndStop ("comenzar)"; Encendido (presionar) ( Root.prevFrame (); Encendido (presionar) ( Root.nextFrame (); Encendido (presionar) ( GotoAndStop ("fin"); A continuación se muestra el resultado de nuestro trabajo: Al crear animaciones con ActionScript, a menudo se utiliza un bucle de tres fotogramas. En el primer cuadro (preparación) se escriben los datos iniciales, en el segundo cuadro se colocan los elementos del cuerpo del bucle y en el tercer cuadro se escribe el comando para volver al segundo cuadro gotoAndPlay (2);. El trabajo del ciclo de tres cuadros consiste en visualizar alternativamente los cuadros que participan en el ciclo hasta que se cumpla la condición para salir del ciclo. Consideremos el uso de un bucle de tres cuadros usando el ejemplo de creación de un movimiento de máscara. Nuestra película tendrá tres capas: <маскируемый клип>.setMask (<клип-маска>) Cada vez que se accede al segundo fotograma, el clip de máscara girará 2 °. Una ventana en forma de clip de máscara gira frente a los ojos del usuario, a través de la cual se ve parte del clip de máscara. Aprendamos a controlar el color de una instancia de clip de biblioteca. Creemos una película en la que las estrellas giran en diferentes direcciones contra el fondo del sol naciente, cambiando su color. Se crea una instancia de un objeto Color mediante un constructor de ActionScript y tiene el siguiente formato: <имя экземпляра объекта Color>= nuevo color (<имя экземпляра клипа>) OnClipEvent (cargar) ( Star1Color = nuevo Color (este); ColorTransform = (rb: 0, gb: 255, bb: 255); G = 255; B = 255; Paso = 5; OnClipEvent (enterFrame) ( G - = paso; ColorTransform.gb = g; Si (r> = 0 && b == 255 && g == 0) ( R + = paso; ColorTransform.rb = r; Si (g == 0 && r == 255 && b B - = paso; ColorTransform.bb = b; Si (b == 0 && r == 255 && g> = 0) ( G + = paso; ColorTransform.gb = g; Si (g == 255 && b == 0 && r R - = paso; ColorTransform.rb = r; Si (r == 0 && g == 255 && b> = 0) ( B + = paso; ColorTransform.bb = b; Star1Color.setTransform (colorTransform); This._rotation - = 3; Los botones y menús son una de las partes más importantes de un sitio web y de cualquier otra aplicación donde la interactividad es importante. Creemos un menú Flash. en (lanzamiento) (getURL ("1.html", "_self");) Si es un webmaster principiante y decide revivir las páginas de su sitio utilizando Destello (destello) animaciones o videos Flash listos para usar, entonces la información en esta página es para usted. La tecnología Flash (traducida del inglés "flash") comenzó su desarrollo en 1996 y hoy en día incluso un web master novato está familiarizado con términos como: Y sitios Flash completos, incluidos chats, libros de visitas, encuestas y foros, comenzaron a aparecer en la web cada vez con más frecuencia. Para crear videos flash debe elegir un programa para usted con el que trabajará con el flash. Para insertar manualmente películas Flash en una página HTML, se utilizan dos etiquetas simultáneamente:
Al utilizar la interpolación de formas, se pueden modificar los siguientes parámetros de forma:
Capa de guía y capa de rutas
Capa de enmascaramiento y máscara de capa
Creando botones
Tipos básicos de acciones:
Algoritmo para crear un botón (alg1):
Algoritmo para crear un botón para ir a la página web especificada:
Algoritmo para crear un botón para detener un clip:
Secuencias de comandos con ActionScript
Con el advenimiento de Destello animaciones el desarrollo de sitios web ha tomado una nueva dirección.
Un sitio web creado con tecnología flash es muy diferente de sus contrapartes HTML. Lo primero que siempre atrae la atención del usuario son todo tipo de elementos de página en movimiento, brillantes, parpadeantes e iridiscentes.Qué necesitas para ver FLASH
Para ver animaciones flash, o cualquier otro contenido flash, se debe instalar un complemento flash en el navegador, que se puede descargar directamente desde el sitio para desarrolladores de Flash - Macromedia (ahora parte de Adobe).
Sin embargo, cabe señalar que, a diferencia de explorador de Internet, que puede instalar plug-in flash en modo automático, otros navegadores, como Opera o FireFox, requieren una instalación separada. Puede descargar todos los programas necesarios desde el sitio web oficial de flash: adobe.com. Dónde obtener el código fuente para crear un sitio.
Se necesita mucho tiempo, esfuerzo y conocimiento para crear animaciones Flash. A menudo sucede que una cosa, y a veces de una sola vez, falta mucho. Y aquí el llamado fuentes de flash... La red está llena de plantillas gratis Sitios FLASH, y hay archivos con la extensión…. .FLA.
Las plantillas contienen muchos efectos de animación y hermosas transiciones, no tiene que implementar este o aquel efecto, solo necesita tomarlo de la plantilla. Además, las plantillas le facilitarán la creación de su sitio flash: al abrir una plantilla y cambiarla o agregarle información, obtendrá un sitio flash impresionante en poco tiempo y con un mínimo de esfuerzo. Creación y edición de memorias flash.
Hoy en día, el líder indiscutible es el producto de la empresa Macromedia. Adobe Flash Professional CS3... Flash CS3 es el estándar de la industria para el desarrollo interactivo programas multimedia para cualquier plataforma. Flash se puede utilizar para crear juegos, sitios web, presentaciones en CD, pancartas y dibujos animados.
Пример вставки Flash-фильма в HTML-страницу: