Acerca de la animación más simple en Flash. Cómo crear una animación flash ¿Qué es una escena?

¿Alguna vez te has preguntado qué se esconde detrás de la hermosa animación de los banners en Internet? ¿O dibujos animados novedosos creados con tecnología informática? La mayoría de las veces, se basan en "carne", o más bien, así es como se traduce el nombre del inglés. Tecnología flash... Hoy vamos a hablar de la animación flash para un sitio web:

Tecnología flash

El marco multimedia fue desarrollado por Macromedia. Pero después de su adquisición (fusión), todos los derechos de la tecnología se transfirieron al nuevo propietario: Adobe Sistemas.

Región uso moderno Adobe Flash :

• La creación de aplicaciones web es una dirección bastante nueva. Incluye el uso total o parcial de Flash para crear sitios web. Con aplicación parcial, esta tecnología crea elementos individuales diseño: varios menús interactivos, botones animados, etc.

En comparación con los recursos convencionales en basado en html Los sitios Flash tienen algunas características que limitan su uso. Estos incluyen el alto costo de desarrollo, los recursos de servidor exigentes, los tiempos de descarga prolongados con una conexión a Internet lenta y algunos otros aspectos:

• Implementación de capacidades multimedia: para escuchar audio y reproducir video en sitios, reproductores multimedia creados en Basado en flash... Su desarrollo incluye el uso de uno de los lenguajes de scripting (más a menudo JavaScript):

• En la publicidad online, la tecnología se utiliza con mayor frecuencia para crear banners animados. Implican no solo la reproducción de anuncios multimedia, sino también algún tipo de interacción con el usuario basada en un juego.

Conceptos básicos y herramientas de desarrollo Flash

Para crear animaciones Flash, las herramientas tradicionales de Adobe se utilizan con mayor frecuencia:

• Adobe Flash Professional: un programa para crear animaciones interactivas (animador);
• Adobe Flash Builder: un entorno para crear una interfaz de aplicación web;
• Adobe Flash Player es un reproductor integrado en el navegador para reproducir Flash.

Además, se puede reproducir una serie de contenido multimedia de este tipo. Aplicaciones de terceros... Los más populares son Gnash, QuickTime y algunos otros:

Esta tecnología le permite mostrar cualquier tipo de gráficos ( trama, vector, 3D). Y también admite la transmisión de datos de audio y video. Se ha desarrollado una versión ligera de Flash Lite específicamente para dispositivos móviles.

El estándar principal para los archivos Flash es la extensión SWF. La abreviatura significa Small Web Format. El video grabado en Flash tiene extensiones de archivo FLV, F4V.

Los gráficos vectoriales son el núcleo del desarrollo de la animación interactiva en Flash. Fue gracias a esto que fue posible implementar el soporte para la plataforma multimedia y la independencia de la calidad de la animación de la resolución de la pantalla.

El tamaño de archivo de la aplicación flash es el mismo para todos los usuarios independientemente de características técnicas resolución de la pantalla).

La animación interactiva Flash se basa en el morphing (tipo vectorial), en el que hay un flujo lento entre fotogramas clave. Para la reproducción de datos, se utiliza un reproductor flash, cuyo trabajo es en muchos aspectos similar al trabajo máquina virtual JavaScript. El componente de software de la tecnología se implementa mediante el lenguaje ActionScript.

Las desventajas de la tecnología incluyen los siguientes puntos:

• Carga pesada en UPC máquina cliente. Esto se debe a la baja eficiencia de la máquina virtual flash, que está integrada con el reproductor en el navegador del usuario;
• Alta probabilidad de errores: la animación Flash se puede reproducir con una alta probabilidad de errores. Además, las fallas en la reproducción de Flash afectan negativamente el funcionamiento de toda la aplicación cliente (navegador). Esto se debe a un control insuficiente de la tolerancia a fallos. código de programa al crear aplicaciones flash;
• Error al indexar: todo el contenido de texto que se muestra en el contenido Flash no participa en el proceso de indexación. Esta limitación es especialmente problemática para aquellos recursos que se basan en esta tecnología.

Descripción general del software de creación de Flash de terceros

Sothink SWF Quicker se tomó como una aplicación prototipo para demostrar los conceptos básicos de la creación de Flash. Según muchos profesionales, el programa es el más comprensible y el más fácil de aprender.

Además de crear y editar, el editor flash "sabe" cómo trabajar con todos los demás tipos de animación web (GIF, HTML y otros estándares):

Después de la instalación, vaya a la interfaz amigable del programa. Desafortunadamente, después de recorrer todos los rincones y recovecos del conmutador de idioma de la interfaz, no lo encontramos.

Para entender cómo hacer animaciones Flash en esta aplicación, usaremos las plantillas integradas. El cuadro de diálogo "Nuevo desde plantilla" aparece inmediatamente después de iniciar el programa. Además, se puede llamar a través del elemento del menú principal "Archivo". Entre las opciones propuestas, hemos optado por crear un banner:

En la siguiente ventana del asistente, de la lista desplegable, debe seleccionar una plantilla según la cual se creará la animación. Debajo hay un pequeño cuadro en el que se reproduce la plantilla seleccionada:

En los siguientes pasos, debe establecer las dimensiones del banner e ingresar 5 frases de texto que se reproducirán en la animación. Además, debe especificar la dirección del recurso al que será dirigido el usuario haciendo clic en el banner:

Después de compilar el proyecto y cerrar la ventana del asistente, puede ver el video resultante en el reproductor integrado. Para hacer esto, haga clic en la flecha verde en la parte superior:

Después de cerrar el reproductor, echemos un vistazo más de cerca a la interfaz de la aplicación. Tenga en cuenta que consta de dos ventanas principales: la superior está destinada a editar el intervalo de tiempo del vídeo y la inferior es normal. editor de gráficos... Cada uno de los elementos está ubicado en una capa separada que se puede modificar usando herramientas estándar ubicadas en la barra lateral.

Constantemente nos enfrentamos a la animación flash, en Internet y en las transmisiones de televisión. Hacer animaciones Flash simples con tecnología Flash es bonito tarea sencilla como Flash ofrece muchas herramientas útiles que simplifican todo el proceso. Si desea crear una animación flash o una caricatura, puede dibujarla en solo un par de horas.

Pasos

Parte 1

Animación flash fotograma a fotograma

Los conceptos básicos de la animación a intervalos. Este método se considera el método principal para crear una animación "tradicional", en la que cada fotograma subsiguiente incluye una imagen ligeramente modificada. Cuando se reproducen todos los fotogramas, la imagen cobra vida. Esta es la misma técnica que utilizan los animadores a mano alzada y requiere más tiempo que la interpolación (consulte la siguiente sección).

• De forma predeterminada, Flash reproduce 24 fotogramas por segundo (FPS). Esto significa que se mostrarán 24 fotogramas en un segundo, pero no todos deben ser diferentes. Puede cambiar esta configuración (si lo desea) a 12 fotogramas por segundo, pero a 24 fotogramas por segundo, la animación se reproducirá con más fluidez.

1. Instale Flash Professional. Existen muchos programas de animación flash, pero el más poderoso es Adobe Flash Professional CC. Puede probar este programa de forma gratuita o utilizar otro producto (si no desea registrarse en Adobe Creative Cloud). El resto de este artículo describe cómo trabajar con Flash Professional.

   Dado que la animación fotograma a fotograma requiere varias imágenes (que son ligeramente diferentes entre sí), debe crear estas imágenes manualmente. Para hacer esto, use Adobe Flash Professional o dibuje imágenes en cualquier editor de gráficos.

   • Si desea que sus imágenes cambien de tamaño fácilmente sin perder calidad, cree imágenes en vectores en lugar de gráficos rasterizados. Las imágenes vectoriales se volverán a dibujar cuando se cambie de tamaño (es decir, se evita la pixelación o el suavizado). Los mapas de bits son imágenes tradicionales como fotografías, dibujos hechos a mano, etc. Si intenta ampliar estas imágenes, obtendrá una imagen muy distorsionada.

2. Crea el primer marco. Cuando inicie Adobe Flash Professional por primera vez, verá un lienzo en blanco (capa) y una línea de tiempo vacía. A medida que agrega fotogramas, la línea de tiempo se llenará automáticamente. Puede trabajar con capas como lo hace en Photoshop.

   • Antes de agregar una imagen, cree un fondo básico para su animación. Cambie el nombre de "Capa 1" a "Fondo" y luego acóplelo. Crea una segunda capa y nómbrala como quieras. Esta será la capa en la que creará su animación.
   • Agrega el dibujo al lienzo del primer fotograma. Puede importar el dibujo desde su computadora, o puede usar las herramientas de dibujo para crear el dibujo directamente en el programa.
   • El primer fotograma es el fotograma "clave". Un fotograma clave es un fotograma que incluye una imagen y forma la columna vertebral de una animación. Crearás un nuevo fotograma clave cada vez que se cambia la imagen.
   • Los fotogramas clave en la línea de tiempo se indican con un punto negro.
   • No necesita un fotograma clave en cada fotograma posterior. Cree un fotograma clave cada cuatro o cinco fotogramas para hacer buena animacion.

3. Convierte la imagen en símbolo. En este caso, puede agregar la imagen al marco varias veces. Esto es especialmente útil si necesita agregar rápidamente varias imágenes del mismo tipo en un cuadro (por ejemplo, peces en un acuario).

   • Seleccione la imagen. Haga clic derecho en la imagen y seleccione "Convertir en símbolo". La imagen se agregará a la biblioteca, lo que facilitará su uso en el futuro.
   • Elimina el dibujo. No se preocupe, puede agregarlo a su marco simplemente arrastrándolo y soltándolo desde la biblioteca. De esta manera, puede agregar la misma imagen varias veces al marco.

4. Agrega marcos en blanco. Una vez que su primer fotograma clave esté listo, inserte fotogramas en blanco y luego proceda a crear el segundo fotograma clave. Presione F5 (cuatro o cinco veces) para agregar fotogramas en blanco después del primer fotograma clave.

   Cree un segundo fotograma clave (después de haber agregado algunos fotogramas en blanco). Hay dos formas diferentes de hacer esto: puede copiar un fotograma clave existente y realizarle pequeños ajustes, o puede crear un fotograma clave vacío y agregarle una nueva imagen. Si está utilizando un dibujo creado en otro programa, utilice el segundo método. Si va a pegar una imagen creada con las herramientas de dibujo de Adobe Flash Professional, utilice el primer método.

   • Para crear un fotograma clave utilizando el contenido del fotograma clave anterior, presione F6. Para crear un fotograma clave en blanco, haga clic con el botón derecho en el último fotograma en la línea de tiempo y elija Insertar fotograma clave en blanco.
   • Una vez que haya creado el segundo fotograma clave, debe modificar su imagen para que la animación cobre vida. Si ha utilizado las herramientas de dibujo de Adobe Flash Professional, seleccione la herramienta Transformar para seleccionar un elemento en su dibujo (como la mano de un personaje) y modificarlo.
   • Si está insertando una nueva imagen en cada fotograma clave, asegúrese de que esté en el lugar correcto (de acuerdo con la secuencia lógica de fotogramas).

5. Repite el proceso. Después de crear dos fotogramas clave, repita el proceso: agregue algunos fotogramas en blanco entre cada fotograma clave y asegúrese de que la animación se reproduce "sin problemas".

   • Haz pequeños cambios. Los cambios más pequeños (más sutiles), más suave se reproduce la animación. Por ejemplo, si desea que el personaje levante la mano, el segundo fotograma clave no debe incluir un dibujo en el que el personaje esté representado con una mano ya levantada. En su lugar, utilice algunos fotogramas clave para pasar del brazo bajado al brazo levantado. En este caso, la animación será más suave.

6. Convierta el dibujo. Una vez que haya creado los fotogramas clave y la trayectoria, puede transformar la imagen para que cambie sin problemas a medida que avanza a lo largo de la trayectoria del gemelo. Puede cambiar la forma, el color, la inclinación, el tamaño y cualquier otro parámetro de la imagen.

   • Seleccione el marco en el que se transformará la imagen.
   • Abra el panel de propiedades de la imagen. Para hacer esto, presione F3.
   • Cambie los valores de los parámetros en la ventana de propiedades de la imagen. Por ejemplo, puede cambiar el tono o el color, agregar filtros, cambiar el tamaño.
   • También puede utilizar la herramienta Transformación libre para cambiar la imagen como desee.

7. Agrega los toques finales. Pruebe la animación creada presionando Ctrl + Enter. Asegúrese de que el dibujo (personaje) cambie correctamente y que la animación se reproduzca a la velocidad correcta. Si la animación se reproduce demasiado rápido, disminuya el FPS o aumente la duración del gemelo.

   • El FPS predeterminado es 24, así que intente reducir este valor a 12. Cambie el valor de FPS en la barra de propiedades. Sin embargo, a FPS = 12, es posible que la animación no se reproduzca con la suficiente fluidez.
   • Para cambiar la duración de un gemelo, seleccione la capa que contiene al gemelo y use el control deslizante para cambiar la duración del gemelo. Si desea duplicar la duración del gemelo, mueva el control deslizante 48 fotogramas. Recuerde insertar el fondo en cuadros vacíos para que el fondo no desaparezca en medio de la animación. Para hacer esto, seleccione pho nueva capa, haga clic en el último fotograma de la animación (en la línea de tiempo) y luego presione F5.

Parte 3

Agregar efectos de sonido y música

1. Grabar o descargar efectos de sonido y musica. Puede agregar efectos de sonido a su animación para hacerla más efectiva. La música hará que las animaciones sean más emocionantes y puede convertir las buenas animaciones en fantásticas. Flash admite una variedad de formatos de archivos de audio, incluidos AAC, MP3, WAV y AU. Elija un formato que garantice un sonido de alta calidad con el tamaño de archivo más pequeño.

   • El formato MP3 garantiza un sonido de alta calidad con el tamaño de archivo más pequeño. Los archivos WAV son grandes.

2. Importe archivos de audio a la biblioteca para poder agregar rápidamente sonidos y música a las animaciones. Haga clic en Archivo - Importar - Importar a biblioteca. Busque el archivo de audio en su computadora. Asegúrese de que el archivo de audio tenga un nombre fácil de recordar para que pueda encontrarlo rápidamente.

   Crea una nueva capa para cada archivo de audio. Esto es opcional y puede agregar audio a capas existentes, pero insertar el archivo de audio en una capa separada le dará un mejor control sobre la banda sonora de la animación.

   Cree un fotograma clave desde el que comenzar a reproducir el audio. En la capa de sonido, seleccione el cuadro de animación desde el que comenzará a reproducirse el sonido. Presione F7 para insertar un fotograma clave en blanco. Por ejemplo, si desea insertar un archivo de audio que se reproducirá a lo largo de la animación, seleccione el primer fotograma en la capa del archivo de audio. Si está agregando la voz de un personaje, seleccione el marco donde el personaje comienza a hablar.

Hasta ahora, hemos analizado las películas Flash que se reprodujeron sin la intervención del espectador de principio a fin. Sin embargo, Flash también le permite crear aplicaciones interactivas en las que el usuario puede controlar la visualización del contenido. En esta lección, comenzaremos a familiarizarnos con los elementos del lenguaje de secuencias de comandos de Action Script y veremos cómo puede usarlo para crear aplicaciones interactivas. Como ejemplo, creemos un álbum de fotos con elementos de una interfaz interactiva. Pero antes de continuar con la descripción de Action Script, es necesario hablar sobre un tipo más de símbolos que hemos dejado sin atención hasta ahora: estos son símbolos de botones. Para construir una interfaz interactiva, simplemente son necesarios.

Creando botones

El botón es un clip de película interactivo de cuatro fotogramas. Cuando establecemos un símbolo en un tipo de botón, Flash crea una línea de tiempo de cuatro fotogramas para el nuevo símbolo:

Up-state es un marco correspondiente a la situación en la que el botón no está presionado y el puntero del mouse no está sobre el botón;

Sobre-estado: un marco que ilustra la apariencia de un botón cuando el puntero del mouse está sobre el botón, pero el botón no está presionado;

Estado hacia abajo: este marco muestra la apariencia del botón cuando se presiona;

Estado de golpe: define el área en la que el botón reacciona al clic del mouse; esta área no es visible en el clip.

Para crear un botón, ejecute el comando Insertar => Nuevo símbolo (puede escribir el atajo de teclado Control + F8). En el cuadro de diálogo Crear nuevo símbolo que aparece, ingrese un nombre para el símbolo del botón (por ejemplo, but1) y seleccione el tipo de símbolo Botón.

Flash cambiará al modo de edición de símbolos, proporcionando los marcos Arriba, Arriba, Abajo y Hit. El primer fotograma, Arriba, se convierte en un fotograma clave vacío. Dibujemos una vista sin presionar del botón en este cuadro (Fig. 1).

Arroz. 1. Marco del botón ARRIBA

Seleccionemos el segundo cuadro, marcado como Over y correspondiente al estado en el que el cursor se coloca sobre el botón. Inserte un fotograma clave en este fotograma (mediante el comando Insertar => Fotograma clave), como resultado de lo cual aparece un fotograma clave que repite completamente el contenido del fotograma arriba. Cambiemos el color del botón como se muestra en la fig. 2.

Fig 2. Marco superior de un botón

De manera similar, agregue el siguiente cuadro (cuadro abajo) y dibuje el estado presionado del botón (Fig. 3).

Arroz. 3. Botones de marco inferior

Todavía no dibujaremos nada en el cuadro Hit, pero volveremos a este cuadro un poco más tarde.

Vayamos a la escena principal, llamemos a la biblioteca usando el comando Ventana => Biblioteca y creemos una instancia del símbolo del botón arrastrándolo a la escena (Fig. 4).

Arroz. 4. Creemos una instancia del botón arrastrándolo desde la biblioteca.

Como resultado, obtenemos la siguiente película. Como puede ver en esta película, el botón se presiona no solo cuando hacemos clic en el área central (de trabajo) del botón, sino también cuando hacemos clic en el marco que lo rodea. Esto se debe al hecho de que si no se dibuja el cuadro de impacto, el área de trabajo del botón corresponderá al cuadro superior.

Para que el botón se presione solo en el área de trabajo, es necesario definir esta área en el Hit-frame, es decir, dibujar un botón sin marco (ver Fig.5)

Arroz. 5. Hit-frame del botón

Después de agregar el Hit-frame requerido, obtendremos la siguiente película, en la que presionar el marco no presiona el botón.

Para que un botón sea interactivo, es necesario asociar el hecho de presionar el botón con la ejecución de ciertos comandos, es decir, describir un determinado escenario. Para la creación de scripts en Flash, existe un lenguaje especial llamado Action Script. En esta lección, abordaremos solo una pequeña parte de las capacidades de este lenguaje, y en el futuro volveremos a la estructura y sintaxis de Action Script a medida que los ejemplos de creación de películas interactivas en Flash se vuelvan más complejos.

Comprensión del guión de acción

Action Script es un lenguaje de secuencias de comandos, un conjunto de instrucciones que controlan elementos de una película Flash. Los guiones de acción se pueden incrustar en la película o almacenar en un Archivo de texto con la extensión AS.

Cuando incrusta un guión en una película, puede incrustarlo en diferentes partes de la película. Más específicamente, Action Scripts pueden contener fotogramas clave, instancias de botón e instancias de clip de película. En consecuencia, los scripts se denominan Acción de fotograma, Acción de botón y Acción de MovieClip.

Los scripts de acción se ejecutan cuando el usuario o el sistema desencadenan ciertos eventos. El mecanismo que indica Destello qué operador debe ejecutarse cuando ocurre un evento se denomina controlador de eventos.

Action Script tiene su propia sintaxis, al igual que JavaScript. Flash MX 2004 admite Action Script de todos Versión anterior Destello.

Uno de los conceptos básicos de Action Script son las acciones: comandos que emiten instrucciones durante la ejecución de un archivo SWF. Por ejemplo, gotoAndStop () envía la cabeza lectora (cabeza lectora) a un fotograma o etiqueta específicos. El nombre del idioma proviene de la palabra Acciones - Script de acción (literalmente - script de acción). Nos familiarizaremos con la mayoría de los conceptos de este lenguaje en ejemplos específicos.

Álbum de fotos interactivo

Demostremos cómo usar los botones para controlar un álbum de fotos: cree un conjunto de fotos y agregue dos botones que desplazarán la foto hacia adelante y hacia atrás.

Coloque la primera foto en la línea de tiempo principal y agregue un botón del conjunto estándar. Acceder la carpeta deseada ejecute el comando Windows => Paneles de control Bibliotecas comunes => Botones (Fig. 6).

Arroz. 6. Agregue un botón de la biblioteca estándar

Como resultado de ejecutar este comando, aparecerá un panel que contiene un gran conjunto de botones prediseñados diferentes tipos... Seleccionemos, por ejemplo, Botones de tecla (botones que parecen teclas de teclado), abra la carpeta correspondiente, seleccione el botón de tecla izquierda (Fig.7) y creemos una instancia de este botón (arrastrándolo al escenario).

Arroz. 7. Elementos de la carpeta Botones clave

Tenga en cuenta que cuando coloca el segundo botón (tecla derecha) en el escenario y lo mueve para alinearlo con el primer botón, el programa le da una pista (línea discontinua) que le permite colocar con precisión el botón (Figura 8).

Arroz. 8. Alineación automática de botones en el mismo nivel

Para agregar un script, debe llamar al editor de Action Script con el comando Ventana => Paneles de desarrollo => Acciones o presionando la tecla F9. Si va a escribir scripts con frecuencia, vale la pena recordar este comando de teclado. Como resultado, aparecerá el editor de Action Script (Fig. 9).

Arroz. 9. Paneles del editor de Action Script

Si experimenta resaltando diferentes elementos en la escena, mientras monitorea los mensajes en los paneles del editor de Action Script, encontrará que el programa le indica en qué elemento puede "colgar" el código. Si selecciona un marco en la escena, en la esquina superior izquierda del panel del editor aparece la inscripción Acciones - Marco, si hace clic en el botón, aparecerá la inscripción Acciones - Botón, es decir, el programa indica que el El código ingresado se referirá a la secuencia de comandos del botón. Y si selecciona una foto, en el campo destinado a ingresar un guión, aparecerá un mensaje: No se pueden aplicar acciones a la selección actual (el guión no se puede aplicar a este objeto seleccionado).

Asignaremos un script a un botón. V Últimas Versiones ActionScript tiene la capacidad de escribir código centralizado, es decir, código que se encuentra en un solo lugar, y esta capacidad le permite comprender mejor los programas grandes. Sin embargo, en ejemplos sencillos(que estamos considerando) asignar un script a un botón es perfectamente válido.

Entonces, para el botón con la flecha izquierda, necesitamos formalizar el siguiente escenario: "Si el botón se suelta en un cuadro determinado, entonces desde este cuadro es necesario ir al cuadro anterior". De acuerdo con la sintaxis del lenguaje Action Script (Fig.10), se verá así:

La primera línea contiene el controlador de eventos del botón on (), que tiene el siguiente formato:

Ahora agreguemos varios fotogramas clave para que los botones creados en el primer fotograma se copien en ellos y coloquemos las fotos necesarias en los fotogramas recién creados.

Si inicia la película creada para su ejecución, los fotogramas se reproducirán continuamente uno tras otro y, por lo tanto, en primer lugar, debemos dar el comando "Detener" en el primer fotograma. Para hacer esto, agregue el comando apropiado al primer cuadro (Fig. 11).

Arroz. 11. Script asignado al primer fotograma

Tenga en cuenta: el comando ya no está asignado al botón, sino al marco. El hecho de que se haya asignado un guión al fotograma se indica en la línea de tiempo principal: aparece una letra minúscula "a" encima del punto en negrita en la designación del fotograma.

Como resultado, obtuvimos la siguiente película.

Si solo tenemos unos pocos marcos en el álbum de fotos, entonces dos botones, "Adelante" y "Atrás", son suficientes, pero si el conjunto de fotos es grande, entonces es deseable tener también botones que envíen al principio. y final de la película. En el siguiente ejemplo, agregaremos los botones correspondientes: "Al primer cuadro" y "Al último cuadro". Puede seleccionar botones de un mnemónico adecuado de la biblioteca estándar de botones de la carpeta Circle Buttons (Fig. 12).

Usando este ejemplo, nos familiarizaremos con un comando más, gotoAndStop (), que le permite ir al marco deseado y luego detenerse.

Arroz. 12. Botones de la carpeta Circle Buttons

Sobre el botón para ir al primer cuadro (el tercero desde la izquierda en la Fig.13) agregaremos el código, como se muestra en la Fig. 13.

Arroz. 13. Escenario para el botón "Al primer fotograma"

En el caso de un álbum de fotos de cinco fotogramas, agregue el script de transición "Al último fotograma" al último botón:

Scripting automatizado

Hasta ahora, hemos escrito todos los comandos manualmente, pero los paneles del editor de ActionScript proporcionan una variedad de servicios de secuencias de comandos automatizados. Consideremos estas posibilidades.

Arroz. 14. Herramientas de secuencias de comandos automatizadas

El panel Editor de secuencias de comandos de acción le permite seleccionar, arrastrar, reposicionar y eliminar comandos.

Vamos a mostrar cómo puede escribir el mismo script para el botón "Adelante" en modo automático. Al seleccionar la carpeta Movie Clip Control (ventana superior izquierda en la Fig.14), puede acceder al controlador de eventos on y luego hacer doble clic en el elemento correspondiente o arrastrar la expresión al campo de escritura del script en el modo Arrastrar y soltar.

Arroz. 15. Sugerencia para completar la expresión

Como resultado, la expresión necesaria y una pista del formulario aparecerán en el campo de trabajo (Fig. 15): seleccione el comando requerido del menú y la expresión se completará automáticamente. Como puede ver en el menú, puede seleccionar no solo la condición asociada con los botones en pantalla, también puede seleccionar desde el menú fig. 15 tecla de cláusula Pulse “ ", O keyPress" ”, Que corresponde a presionar las teclas del teclado (flecha izquierda, flecha derecha), es decir, es posible crear un álbum de fotos que se“ volteará ”mediante las teclas del teclado.

Arroz. 16. Acceso a un botón del teclado

Usando el comando keyPress " ”(Fig. 16), luego vaya a la carpeta Timeline Control, seleccione el comando nextFrame y arrástrelo al espacio de trabajo (Fig. 17).

Arroz. 17. El comando nextFrame se puede encontrar en la carpeta Timeline Control

Para el botón que transfiere la película al principio del álbum de fotos, puede seleccionar presionar la tecla Inicio del menú como un evento, y luego (Fig.18) arrastrar el comando gotoAndStop al campo, como resultado de lo cual otro Aparecerá una pista sobre la posible sintaxis de este comando.

Las flechas en la información sobre herramientas le muestran las diferentes opciones de sintaxis. El programa ofrece dos opciones (Fig. 18 y 19), es decir, ofrece establecer una escena y un fotograma, o simplemente un fotograma. En nuestro caso, basta con especificar solo el marco (Frame). Si se omite el nombre de la escena, se realiza de forma predeterminada la transición al fotograma de la escena actual.

Arroz. 18. Sugerencia sobre la posible sintaxis del comando

Arroz. 19. El triángulo de flecha le permite navegar por las opciones de sintaxis

Después de que asignamos todos los botones al correspondiente botones del teclado, obtendremos la siguiente película, donde se producirá la paginación de fotos desde el teclado, y hacer clic en los botones en pantalla con el mouse no causará ninguna consecuencia.

¿Es posible proporcionar un escenario en el que diferentes eventos conduzcan a las mismas acciones? Resulta que es posible; para ello, en el controlador de eventos on, debe enumerar la lista de nombres de eventos. Si coloca una coma en la lista de eventos después del primer evento, el programa en sí le ofrecerá un menú (Fig. 20).

Arroz. 20. Cuando ingresa una coma en la lista de eventos, aparece automáticamente un menú de comandos adicionales

Agreguemos al primer evento (presionando el botón del teclado) el segundo evento (soltando el botón en pantalla):

en (keyPress " ", liberación)

Repetiremos el procedimiento para el resto de botones y, como resultado, obtendremos un álbum de fotos, en el que la paginación de las fotos se realizará tanto con el ratón como con el teclado (el archivo FLA original se puede obtener del Enlace).

En el ejemplo considerado, usamos una transición por número de cuadro, pero este método no siempre es conveniente: si la numeración de cuadros cambia durante el proceso de edición, la lógica puede romperse. Es más conveniente utilizar la transición por marca de cuadro. Considere un ejemplo que requiere no solo hojear el álbum, sino también moverse a diferentes secciones, es decir, una navegación más compleja.

Deje que el álbum conste de dibujos, gráficos por computadora y fotografías.

El primer cuadro de la sección "imágenes" se etiquetará Imágenes, de manera similar a los primeros cuadros de las otras secciones asignaremos las etiquetas gráficos y foto.

Cree una capa de colocación de etiquetas y asígnele el nombre Lables. Para poner una marca en un marco, en el panel Propiedades, seleccione el tipo de marca Nombre y anote su nombre. En nuestro caso, Imágenes (Fig.21). Coloque las etiquetas de la misma forma en los marcos 5 y 10 (Fig. 22).

Arroz. 21. Un ejemplo de asignación de una etiqueta a un marco

Ahora agregue una nueva capa y asígnele el nombre Acciones. En el primer fotograma clave de la capa de acciones, llame al panel de fotogramas de acciones (presionando el botón F9) y escriba el comando detener () (ver Fig.22)

Arroz. 22. Escenario del primer fotograma

Agrega otra capa llamada Temas, en la que daremos títulos a los marcos correspondientes: "Imágenes" (Fig. 23), "Gráficos" y "Fotos".

Arroz. 23. Título de los fotogramas de la sección "Imágenes"

Ahora agregue en el costado del menú botones con los mismos nombres, que colocaremos en una nueva capa llamada Menú.

Imprimamos el primer elemento del menú "Imágenes" desde el borde izquierdo y lo traducimos en un símbolo de botón. Con la herramienta Flecha, seleccione el bloque de texto "Imágenes" y ejecute el comando Modificar => Convertir a símbolo (también puede ejecutar este comando usando la tecla F8), en el panel Convertir a símbolo, establezca el tipo de símbolo Botón y defina su nombre como botón de imagen (Fig. 24).

Arroz. 24. Asignar el nombre del botón de imagen al botón de transición a la sección de imágenes

Creemos cuatro marcos para el botón "Imágenes": el primero simplemente representará el texto original (Fig. 25), el segundo - el mismo texto solo en azul, saltaremos el tercer marco (en este caso, el Abajo- el marco será el mismo que el marco superior), y en el marco de impacto dibuje un área rectangular que definirá el área donde se presiona el botón (Fig.26).

Arroz. 25. Fotograma superior del botón de imagen

Arroz. 26. Pulse el fotograma del botón de imagen

Ahora necesitamos colgar el script en el botón recién creado. Para hacer esto, seleccione el botón en la Escena 1 y, presionando F9, llame al panel de Acciones, y luego agregue el código que se muestra en la Fig. 27.

Arroz. 27. Escenario de transición a un marco con una etiqueta

Usando escenas

Como sabes, Flash te permite crear películas bastante complejas que pueden contener elementos interactivos, animación, clips, etc. Naturalmente, es necesario almacenar y buscar varios elementos de la película. Si estás trabajando en un proyecto grande y complejo, es recomendable dividirlo en varios fragmentos manejables, cada uno de los cuales contiene una secuencia específica de eventos (animación, diálogo interactivo con el usuario, etc.). Esto permitirá simplificar significativamente el trabajo. Las escenas desempeñan el papel de esos fragmentos en las películas Flash. Son películas en miniatura lógicamente completas que juntas forman una sola película Flash. Al crear grandes proyectos, el uso de escenas puede ahorrar mucho tiempo.

Que es una escena

La creación de escenas es una técnica eficaz que le permite dividir un proyecto específico en partes manejables separadas. Cada escena, como ya se mencionó, es una película en miniatura. El número de escenas utilizadas en una película Flash está limitado únicamente por la cantidad de memoria de la computadora. Las escenas se reproducen secuencialmente, en el orden especificado en el panel Escena, y aunque son independientes, al mismo tiempo están estrechamente relacionadas. Durante la reproducción, nunca hay un retraso notable entre ellos. Las posibilidades de uso de las escenas son variadas y casi ilimitadas. Por ejemplo, mientras trabaja en un proyecto de sitio web, puede implementar secciones y subsecciones como escenas. Recientemente, los cortometrajes animados en Flash, cuyo contenido se puede dividir en partes lógicas mediante escenas, se han vuelto cada vez más populares en la Web.

Panel de escena

Se accede a la lista de escenas contenidas en la película a través del panel Escena.

on), que se abre cuando se llama al comando Ventana> Paneles de diseño> Escena (Ventana> Paneles de diseño> Escena). Este panel le permite ver una lista de escenas disponibles.

y establezca el orden de reproducción en la película; está determinado por el orden de las escenas en la lista. Además, con el panel Escena, puede duplicar, agregar, eliminar y mover escenas dentro de la lista.

El menú Opciones del panel Escena contiene solo tres comandos: Maximizar panel, Cerrar panel y Ayuda.

Panel de escena

Panel de edición

El panel Editar se encuentra encima de la línea de tiempo, debajo del menú principal del programa. Para abrir el panel, use el comando Ventana> Barras de herramientas> Editar. Ya ha utilizado este panel al trabajar con la ventana del Editor de símbolos para salir del modo de edición de símbolos (consulte el Capítulo 6). Esta sección se centrará en funcionalidad del panel Editar para trabajar con escenas.

El panel Editar contiene el nombre de la escena actual (en la figura, la escena actual es la Escena 2). Puede cambiar a otra escena usando el botón Editar escena ubicado en el lado derecho del panel Editar, y el nombre de la escena seleccionada se mostrará en la línea. La funcionalidad del botón Editar escena se describe en la sección "Cambio de escenas".

Menú del botón Editar escena

Creación y manipulación de escenas

Como se mencionó, el panel Escena, que abre con Ventana> Paneles de diseño> Escena, es para trabajar con escenas. En esta sección, aprenderá cómo puede usar este panel para agregar, duplicar, renombrar y reordenar escenas.

Agregar una escena

A medida que crece la complejidad de su proyecto, tendrá que agregar constantemente nuevas escenas para distribuir fragmentos lógicos de su contenido. Puede hacer esto usando el panel Escena. Para agregar una escena, siga estos pasos.

Asegúrese de que el documento requerido esté abierto. Seleccione Ventana> Paneles de diseño> Escena para abrir el panel Escena.

Haga clic en el botón Agregar escena, que se encuentra en la esquina inferior derecha del panel, o llame al comando Escena en el menú Insertar. Después de estas acciones, el nombre de la nueva escena aparecerá en la ventana del panel Escena. De forma predeterminada, cada nueva escena se nombra con un número secuencial que es uno más que el nombre de la escena actualmente seleccionada (por ejemplo, Escena 1, Escena 2, etc.). El nombre se coloca en la lista en consecuencia.

Seleccione una nueva escena en el panel Escena y cree su contenido. Cuando crea una nueva escena, Flash cambia automáticamente a ella.

Lista de escenas en el panel Escena

Eliminar una escena

Puede eliminar una escena de esta manera.

Abra el panel Escena yendo a Ventana> Paneles de diseño> Escena. Seleccione la escena que desea eliminar.

Haga clic en el botón Eliminar escena ubicado en la esquina inferior derecha del panel. Para confirmar la eliminación de la escena, haga clic en el botón Aceptar en el cuadro de diálogo que se abre.

Duplicar una escena

En los capítulos anteriores, ya hemos hablado sobre la creación de duplicados de varios elementos. En cuanto a copiar una animación, y más aún un proyecto complejo con gran cantidad escenas, el proceso sería bastante engorroso sin la función de duplicado, que le permite crear copias exactas de cualquier escena presionando un solo botón.

Abra el panel Escena yendo a Ventana> Paneles de diseño> Escena y seleccione la escena que desea duplicar.

Haga clic en el botón Duplicar escena ubicado en la esquina inferior derecha del panel Escena.

La ventana del panel Escena mostrará el nombre de la escena duplicada. Tenga en cuenta que consta del nombre de la escena original y la palabra soru (copia).

Escena duplicada

Cambio de nombre de escenas

Dado que los nombres predeterminados asignados a las escenas duplicadas y nuevas solo difieren en el número de secuencia, es difícil identificar la escena cuando se busca contenido específico. Por ello, en proyectos grandes, es recomendable asignar nombres especiales a escenas que caractericen su contenido. Cambiar el nombre de una escena no debería llevarte mucho tiempo.

Abra el panel Escena eligiendo Ventana> Paneles de diseño> Escena y haga doble clic en el nombre de la escena que desea cambiar. En este caso, será posible editar el nombre de la escena.

Ingrese un nuevo nombre y presione la tecla Returt / Enter, o haga doble clic fuera del panel Escena.

Cambiar el nombre de una escena en el panel Escena

Cambiar el orden de las escenas

El orden en el que se colocan los nombres de las escenas en el panel Escena determina el orden en el que se reproducen las escenas de la película. Los nombres de las escenas en este panel se pueden mover para establecer el orden en el que se reproducen las escenas, independientemente del orden en el que se crearon.

Abra el panel Escena eligiendo Ventana> Paneles de diseño> Escena.

Mueva el puntero del mouse sobre el nombre de la escena que desea reorganizar, haga clic en botón izquierdo y, mientras lo sostiene, mueva el puntero a la ubicación deseada en el panel. Tenga en cuenta que a medida que mueve el puntero, aparece una línea azul que indica una posible nueva posición para el nombre de la escena en la lista.

Mover una escena en el panel Escena

Cambiar entre escenas

Puede utilizar las siguientes ayudas de navegación para cambiar entre diferentes escenas en una película mientras trabaja en un proyecto de Flash.

Panel de escena. Para navegar a la escena deseada en la película, haga clic en el nombre de la escena en el panel Escena. Recuerde que el nombre de la escena seleccionada aparece en el panel Editar.

Botón Editar escena. Al hacer clic en este botón, ubicado en el lado derecho del panel Editar, accedes a un menú con los nombres de todas las escenas de la película. Para ir a la escena deseada, seleccione el elemento de menú correspondiente.

Panel Explorador de películas. Abierto con Ventana> Otros paneles> Explorador de películas, este panel muestra la estructura jerárquica de una película (consulte el Capítulo 8) y le permite buscar escenas, símbolos e instancias de símbolos, así como reemplazar texto y fuentes.

Las escenas se representan en el panel Explorador de películas como elementos jerárquicos de orden superior. Para navegar a una escena específica, busque su nombre en el panel Explorador de películas y haga clic en él. De forma predeterminada, este panel muestra el contenido solo de la escena seleccionada. Para ver el contenido de todas las escenas al mismo tiempo, active el comando Mostrar todas las escenas en el menú Opciones de este panel.

Panel Explorador de películas con lista de escenas

Prueba de escena

Para probar la película creada directamente en el entorno de desarrollo Flash, debe presionar la tecla Retorno / Intro, pero en este caso las opciones de visualización se limitarán a la escena seleccionada. La reproducción secuencial de todas las escenas solo es posible después de que se publica la película y ya no se requiere Flash. Para probar, siga estos pasos.

Para probar una sola escena, márquela en el panel Escena y presione Retorno / Entrar, o después de seleccionar una escena, abra el menú Control y active el comando Probar escena.

Para probar la película, llame al comando Probar película en el menú Control o use la combinación de teclas Cmd / Ctrl + Retorno / Intro. Esto abrirá una nueva ventana en la que todas las escenas de la película se reproducirán en la secuencia definida en el panel Escena.

También puede reproducir todas las escenas de una película seleccionando Reproducir todas las escenas en el menú Control.

Control de escena con ActionScript

Las escenas pueden simplificar enormemente la organización general del contenido de la película. Secuencia preestablecida la reproducción de las escenas determina la linealidad de las películas. Pero además de las ventajas (por ejemplo, se excluye la reproducción simultánea de dos escenas), las películas lineales también tienen desventajas asociadas con la imposibilidad de cambiar el orden de reproducción de las escenas. Para resolver este problema, se utilizan scripts de ActionScript (en particular, acciones de fotogramas) para manipular escenas.

En el capítulo 13 se describen con más detalle las secuencias de comandos de ActionScript y el uso de acciones de fotogramas.En esta sección se describen algunas de las acciones que puede utilizar para manipular escenas.

gotoAndStopO: cuando se llama a esta acción, se produce una transición a una escena y un fotograma específicos y la película deja de reproducirse.

gotoAndPlay (): llamar a esta acción hace que el cabezal de reproducción salte a una escena y fotograma específicos (la reproducción de la película continúa desde este fotograma).

reproducir О: esta acción le permite seguir reproduciendo la película después de detenerla.

detener О: con esta acción puede detener la reproducción de la película.

¡Les doy la bienvenida a todos!
Por lo tanto, a pedido, estoy escribiendo una lección sobre la animación más simple en Flash. Comenzamos poco a poco, como dicen. Luego prometo agregar más (mediante una ventana emergente, si no escriben).

Abra Flash MX.
Ante nosotros está nuestra escena de trabajo, menú, barra de herramientas, etc. En la parte inferior hay una ventana como esta: Propiedades. Hay configuraciones básicas para su caricatura (Fig. 1).
Estamos interesados ​​en FRAME RATE allí: la velocidad de desplazamiento de su caricatura. De lo contrario, 12 fps significa que se reproducirán 12 fotogramas (fotogramas) de su caricatura en un segundo. Esta velocidad es estándar y, en principio, la que necesitas. Si necesita ralentizar su animación, disminuyala, debe hacerlo más rápido, aumente esta cifra.

Ahora pasemos a la animación en sí.
Hay dos formas principales en Flash: interpolación de formas e interpolación de movimiento.
Consideremos el primero. Forma - (ing.) Forma. Ya entiendes que aquí será cuestión de cambiar de forma. Crea una forma como un cuadrado azul. Arriba, en la línea de tiempo, aparecerá un círculo sobre un fondo gris en el primer fotograma; hemos creado un fotograma clave. Ahora creemos el mismo marco en el marco 10. Esto se puede hacer de dos maneras: mueva el mouse sobre el marco 10, haga clic (el marco se vuelve azul) y seleccione en el menú: Insertar-> fotograma clave; de lo contrario, puede: apuntar al cuadro 10, hacer clic, presionar F6. En la línea de tiempo, los 10 fotogramas son grises. La línea roja muestra en qué fotograma estamos. (Figura 2)

Vaya al cuadro 10. Seleccionamos nuestro cuadrado (con el mouse o presionando ctrl + A, - esta combinación de teclas selecciona todo lo que tenemos en área de trabajo). Movemos nuestro cuadrado hacia algún lado (¡asegúrate de que estás en el décimo cuadro!) Y cambiamos el color a, por ejemplo, amarillo. Ahora regrese al primer cuadro. Hay una selección de interpolación en la línea Propiedades, donde el valor predeterminado es "ninguno". Es decir, sin animación. Cámbielo a "forma". En la línea de tiempo, nuestros marcos se vuelven de color verde claro con una flecha. Cuando todo esté hecho presione "enter". ¡LA BELLEZA! El cuadrado se mueve, ¡e incluso cambia de color! Vaya al cuadro 10 de nuevo. Seleccionar todo (ctrl + A). Y presione la tecla eliminar (es decir, eliminar). En lugar del cuadrado, dibuja una especie de círculo rojo. Vaya al primer cuadro nuevamente y presione enter. El cuadrado ahora es un círculo y rojo. Ya entendió que no necesita dibujar todos los cuadros, ¡el flash lo hará por usted! Aunque si necesitas una precisión especial, o algo así, puedes dibujar. entonces el archivo aumentará de tamaño. Si necesita una transición más suave de un cuadrado a lo mismo, por ejemplo, un círculo, haga este proceso no para 10, sino, digamos, 25 fotogramas. Si necesita movimientos y movimientos más intrincados, hay máscaras de capa para esto, pero hablaré de ellos en algún momento la próxima vez. La Figura 3 muestra cómo se ve su animación en la línea de tiempo. ¡Ahora puedes dibujar una película de cambio de forma simple!

Ahora consideremos la segunda forma de configurar la animación: la interpolación de movimiento (traducción de algo como: construir una animación intermedia de movimiento). Será un poco más complicado aquí. Abra el nuevo archivo flash de nuevo.
¿Cuál es la diferencia entre forma y movimiento? El hecho de que en el segundo caso no trabajaremos en formularios, sino en objetos prefabricados, es decir, símbolos. Un símbolo es, por así decirlo, la unidad de animación más simple en Flash. Esta es la forma más común de pintar. Repetimos todo de nuevo: en el primer cuadro dibuja un pequeño cuadrado azul. selecciónelo y presione F8 (o ejecute secuencialmente: Insertar-> convertir a símbolo). Aparece un cuadro de diálogo frente a nosotros (Fig. 4).

¿Qué es? Hay tres tipos de símbolos en Flash: un clip de película es una especie de animación adicional dentro de un símbolo. es decir, este símbolo contiene algún tipo de animación, etc. tiene exactamente la misma línea de tiempo que el escenario principal; botón (botón): un elemento que responde a la presión, la presencia del mouse sobre él, etc. En resumen, el botón es; y el tercer elemento, el más estático, es gráfico. Es decir, solo un gráfico, una especie de imagen. Trabajaremos con este último. Lo llamamos de alguna manera, haga clic en "Aceptar". Aparece un círculo en el cuadrado; de lo contrario, el centro de nuestro símbolo (el centro también se puede establecer en ese cuadro de diálogo). Todos nuestros símbolos se ingresan en la biblioteca. Desde allí podemos editarlos, insertarlos donde sea necesario y donde no, eliminarlos, agregarlos. Para ver su biblioteca presione F11 o siga estos pasos: Ventana -> Biblioteca. En el décimo fotograma, cree un fotograma clave (F6). Ahora podemos mover nuestro cuadrado a alguna parte. Luego lo haremos invisible: para ello lo seleccionaremos en el décimo cuadro. En el panel de propiedades, en la sección de color, configure el alfa (transparencia). Establezcamos el atributo como un porcentaje: 0. Regresemos al primer cuadro. Realicemos las mismas acciones que para la interpolación de formas, pero en lugar de la forma marcamos el movimiento. Los fotogramas en la línea de tiempo se volverán morados y una flecha se extenderá a través de ellos, como se muestra en la Fig. 5. Presione enter.

Conseguiremos un efecto de "vuela cuadrada al vacío". ¡Felicidades! ¡Sabes cómo hacer gráficos primitivos en Flash!
Otra característica importante es que para cada animación, debemos tener una capa separada (Capa). Si necesita agregar otra capa, use el comando: Insertar-> Capa.
Y solo un poco sobre la línea de tiempo.
Como ya entendió, verde claro con una interpolación en forma de flecha, morado con una interpolación de movimiento con una flecha. Verde claro o violeta con líneas; especificó una animación, pero esta animación no se puede crear; hizo algo mal. Color gris: todos los fotogramas con este sombreado son una copia exacta del fotograma clave anterior (fotograma clave). Una línea blanca significa que no hay nada en estos marcos. El círculo negro es un fotograma clave. El círculo blanco es un fotograma clave en blanco. Bueno eso es todo. (figura 6)

Eso es todo por ahora. Este es el mínimo con el que puede trabajar. A continuación, aprenda cómo agregar sonido, controlar el sonido y seguir adelante y escribir Masyanya. :) Prometo que definitivamente escribiré otra lección pronto - sobre animación avanzada en flash. Sobre cómo hacer una "gota de pluma", sobre máscaras, sobre el control sobre el cambio de forma en la interpolación de formas. Luego escribiré algo más.
Si ayudó a alguien, agradezca a todo el sitio web FLASHER.RU. Este es el mejor que hay en la web.
¡Me alegré y me alegré de comer! Si tiene alguna pregunta, visite el foro o: [correo electrónico protegido]
(c) de St. Dimitryi alias Nirva a Flasher.ru
http://flasher.ru