Guía para la realización de cortos de animación 1

INTRODUCCIÓN AL FLASH

PARTE 1: Introducción a Macromedia Flash

PARTE 2: Herramientas de Dibujo

Guía para la realización de cortos de animación 2

Parte 1:Introducción a FLASH

Guía para la realización de cortos de animación 3

Conceptos básicos

• Las películas de Flash son imágenes y animaciones para los sitios Web.

• Aunque están compuestas principalmente por imágenes vectoriales, tambiénpueden incluir imágenes de mapa de bits y sonidos importados.

• La películas Flash pueden incorporar interacción para permitir la introducción de datos de los espectadores, creando películas no lineales que pueden interactuar con otras aplicaciones.

• Los diseñadores Web utilizan Flash para crear controles de navegación, logotipos animados, animaciones de gran formato con sonido sincronizado e incluso sitios Web con capacidad sensorial.

• El trabajo en Flash para la creación de una película incluye el dibujo o la importación de una ilustración, su organización en el Escenario y su animación con la Línea de tiempo.

• La película puede hacerse interactiva utilizando acciones que hagan que la película responda a determinados eventos de cierta manera.

Guía para la realización de cortos de animación 4

Las películas FLASH (.swf)

• Las películas de Flash pueden reproducirse de varias formas:

• En navegadores Internet, tales como Netscape Navigator y Microsoft Internet

• Explorer, que estén equipados con Flash Player.• Con el control ActiveX de Flash en Microsoft Office, Microsoft

InternetExplorer para Windows y otros entornos anfitrión de ActiveX.

• En Flash Player, una aplicación independiente de manejo similar al complemento Flash Player.

• Como un proyector independiente, un archivo de película que se puedereproducir sin disponer de Flash Player.

Guía para la realización de cortos de animación 5

Gráficos en Flash

Los gráficos vectoriales representan imágenes mediante líneas y curvas, denominadas vectores, que también incluyen propiedades de color y posición. Al editar un gráfico vectorial, se modifican las propiedades de las líneas y curvas

que definen su forma. La posición, el tamaño, la forma y el color de los gráficos vectoriales puede cambiarse sin que por ello pierdan calidad. Los gráficos vectoriales no dependen de la resolución.

Las imágenes de mapa de bits están compuestas de puntos de color, denominados píxeles y que están organizados en una cuadrícula.

Al editar una imagen de mapa de bits, se modifican los píxeles y no las líneas o

curvas. Las imágenes de mapa de bits dependen de la resolución.

Guía para la realización de cortos de animación 6

Entorno de trabajo

• Entorno de trabajo de Flash se divide en:

• El Escenario, área rectangular en la que se reproduce la película.

• La Línea de tiempo, donde se animan los gráficos respecto al tiempo.

• Los símbolos, componentes de los medios reutilizables de la película.

• La ventana Biblioteca, donde se organizan los símbolos.• El Explorador de películas, que ofrece una descripción

general de una película y su estructura.• Paneles acoplables y flotantes, que permiten modificar los

distintos elementos de la película y configurar el entorno de creación de Flash para adaptarlo a sus necesidades concretas.

Guía para la realización de cortos de animación 7

Interfaz general de Flash 5

Guía para la realización de cortos de animación 8

Interfaz general de Flash 2008

Interfaz general de Flash 2008

Guía para la realización de cortos de animación 9

Propiedades de la película

Guía para la realización de cortos de animación 10

Línea de tiempo

• En la Línea de tiempo se coordina el tiempo de la animación y se ensambla la ilustración en distintas capas. La Línea de tiempo muestra todos los fotogramas de la película.

Guía para la realización de cortos de animación 11

Capas

• Las capas actúan como una serie de hojas de acetato transparente superpuestas, manteniendo las diferentes ilustraciones por separado, de forma que puedan combinarse distintos elementos en una imagen visual cohesionada.

Guía para la realización de cortos de animación 12

Símbolos y Biblioteca. Instancias• Los símbolos son elementos reutilizables que se usan

en una película. Los símbolos pueden ser gráficos, botones, clips de película, archivos de sonido o fuentes.

• Al crear un símbolo, éste se almacena en la Biblioteca. Al colocar un símbolo en el Escenario, se está creando una instancia del símbolo.

• Los símbolos reducen el tamaño de los archivos, ya que Flash, independientemente del número de instancias creadas, sólo guarda una copia en el archivo.

• Puede modificarlas propiedades de una instancia sin alterar el símbolo maestro, así como editar éste para realizar un cambio en todas las instancias.

Guía para la realización de cortos de animación 13

Paneles flotantes

• Los paneles flotantes, que contienen los comandos y las opciones relacionados con cada tipo de elemento, permiten ver, organizar y modificar los elementos de una película de Flash. Utilizando estos paneles es posible modificar símbolos, instancias, colores, tipo, fotogramas y otros elementos.

Guía para la realización de cortos de animación 14

Uso de la paleta de herramientas

• Las herramientas de la paleta de herramientas le permiten dibujar, pintar, seleccionar y modificar las ilustraciones, así como cambiar la visualización del Escenario.

• La paleta de herramientas se divide en cuatro secciones:

• La sección Herramientas contiene las herramientas de dibujo, pintura

y selección.• La sección Ver contiene herramientas para ampliar y reducir, así

como pararealizar recorridos de la ventana de la aplicación.• La sección Colores contiene modificadores de los colores de trazo y

relleno.• La sección Opciones muestra los modificadores de la herramienta

seleccionada,los cuales afectan a las operaciones de pintura o edición de dicha

herramienta.

Guía para la realización de cortos de animación 15

Paleta de herramientas

Guía para la realización de cortos de animación 16

Parte 2:Herramientas de Dibujo en FLASH

Guía para la realización de cortos de animación 17

Selección de objetos

• Para modificar un objeto, primero debe seleccionarlo.

• Flash proporciona diferentes métodos de selección, incluyendo la herramienta Flecha, la herramienta Lazo y comandos de teclado.

Guía para la realización de cortos de animación 18

Herramienta Flecha

Para seleccionar objetos enteros con la herramienta Flecha, haga clic en un objeto o arrastre para encerrar el objeto dentro de un recuadro de delimitación rectangular.

Guía para la realización de cortos de animación 19

Herramienta Lazo

• Puede utilizar la herramienta Lazo y el Modificador modo polígono para seleccionar objetos dibujando un área de selección de mano alzada o de bordes rectos.

• Cuando se utiliza la herramienta Lazo se puede cambiar del modo de selección de estilo libre al modo de selección de bordes rectos. Propiedades de la

varita mágica

Guía para la realización de cortos de animación 20

Herramientas de dibujo

• Las herramientas de dibujo de Flash permiten crear y modificar formas para las ilustraciones de las películas.

Guía para la realización de cortos de animación 21

Solapamiento de formas en Flash

• Al utilizar las herramientas Lápiz, Línea, Óvalo, Rectángulo o Pincel para dibujar una línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en segmentos en los puntos de intersección.

• Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente.

Guía para la realización de cortos de animación 22

Dibujo con la herramienta Lápiz

• Para dibujar líneas y formas, se utiliza la herramienta Lápiz, de manera muy similar a cómo se emplea un lápiz real para realizar un dibujo.

• Para aplicar un suavizado o un enderezamiento a las líneas y las formas según se va dibujando, basta con seleccionar un modo de dibujo para la herramienta Lápiz.

Guía para la realización de cortos de animación 23

Dibujo de líneas rectas, óvalos y rectángulos

Para dibujar trazados precisos como líneas rectas o bien como suaves curvasfluidas, puede utilizar la herramienta Pluma. Puede crear segmentos de líneasrectas o curvas, y ajustar el ángulo y la longitud de los segmentos rectos, así comola pendiente de los segmentos curvos.

Herramienta Pluma

Guía para la realización de cortos de animación 24

Herramienta Pincel

• La herramienta Pincel dibuja trazos similares a los de un pincel.

• Permite crear efectos especiales, incluidos efectos caligráficos.

• Puede cambiar el grosor del trazo de pincel aumentando o disminuyendo la presión sobre la pluma.

Pintar selección. Esta opción es como seleccionar un área rellena y aplicar un nuevo relleno.

Rellenos de pintura pinta rellenos y áreas vacías y no afecta a las líneas.

Guía para la realización de cortos de animación 25

Enderezamiento y suavizado de líneas

• El enderezamiento hace los pequeños ajustes necesarios a las líneas y las curvas ya dibujadas. No tiene ningún efecto sobre los segmentos rectos.

Rotar o escalar

Guía para la realización de cortos de animación 26

Optimizar curvas

• Esto refina las líneas curvas y los contornos de relleno reduciendo el número de curvas utilizadas para definirlos.

• También reduce el tamaño de las películas Flash y de las películas de Flash Player exportada. Al igual que con los modificadores Suavizar o Enderezar, puede aplicar la optimización varias veces al mismo elemento.

• Modificar > Optimizar.

Guía para la realización de cortos de animación 27

Borrar

• La herramienta Borrador permite eliminar trazos y rellenos. Puede borrar todo el Escenario con rapidez, borrar los diferentes segmentos de trazos o áreas rellenas, o borrar por arrastre.

Modos avanzados de borrado

Guía para la realización de cortos de animación 28

Herramienta Cubo de pintura

• La herramienta Cubo de pintura rellena con color áreas cerradas:

• Puede tanto rellenar áreas vacías como cambiar el color de áreas ya pintadas.

• Puede utilizar colores sólidos, rellenos de degradados o de mapa de bits.

• Puede utilizar la herramienta Cubo de pintura para rellenar áreas que no están cerradas por completo, así como especificar que Flash cierre los huecos de los contornos de las formas al utilizar esta herramienta.

Guía para la realización de cortos de animación 29

Herramienta Bote de tinta

• La herramienta Bote de tinta permite especificar el color, la anchura de línea y el estilo de los trazos de las líneas o contornos de formas.

• Puede aplicar únicamente colores sólidos, pero no degradados ni mapas de bits, a las líneas y contornos de formas.

• Utilizar la herramienta Bote de pintura en lugar de seleccionar cada una de las líneas, facilita modificar los atributos de trazo de varios objetos de una sola vez.

Guía para la realización de cortos de animación 30

Color

Guía para la realización de cortos de animación 31

Panel Mezclador de coloresPanel Muestras

• Para crear y editar colores sólidos, puede utilizar el panel Mezclador.

• Si se selecciona un objeto en el Escenario, las modificaciones de color realizadas en el panel Mezclador se aplican a la selección.

Guía para la realización de cortos de animación 32

Especificación de color, estilo y peso del trazo en el panel Trazo

• El panel Trazo permite cambiar el color, estilo y peso de línea del trazo de un determinado objeto. Para el estilo de trazo, puede elegir entre los estilos predefinidos que incluye Flash o bien crear un estilo personalizado.

Guía para la realización de cortos de animación 33

Panel de Rellenos especiales

Guía para la realización de cortos de animación 34

Utilidades y trucos en FLASH

Guía para la realización de cortos de animación 35

Utilidades y trucos en FLASH

Guía para la realización de cortos de animación 36

Utilidades y trucos en FLASH

Guía para la realización de cortos de animación 37

Animación en FLASH

Guía para la realización de cortos de animación 38

• La animación se crea mediante el cambio del contenido de fotogramas sucesivos

Guía para la realización de cortos de animación 39

Tipos de animaciónFlash ofrece distintas maneras de crear secuencias de animación:

• fotograma a fotograma: la animación se crea fotograma a fotograma

• y por interpolación: se crean los fotogramas inicial y final, y Flash crea los fotogramas intermedios. Flash varía el tamaño, la rotación, el color y otros atributos del objeto de forma distribuida entre los fotogramas inicial y final para crear la sensación de movimiento. A su vez se distinguen:

– interpolación de movimiento, se definen propiedades como la posición, el tamaño y la rotación de una instancia, un grupo o un bloque de texto en un punto en el tiempo, y estas propiedades se cambian en otro punto.

– interpolación de forma, se dibuja una forma en un punto del tiempo y se cambia o se dibuja una nueva en otro punto. Flash interpola los valores o formas de los fotogramas intermedios para crear la animación.

Guía para la realización de cortos de animación 40

Características

• La animación interpolada es una forma eficaz de crear movimiento y cambios a lo largo del tiempo y de reducir al mínimo el tamaño del archivo. En esta animación, Flash sólo guarda los valores de los cambios producidos en los fotogramas de clave.

• En la animación de fotograma a fotograma, Flash guarda los valores de los fotogramas completos.

Guía para la realización de cortos de animación 41

Creación de fotogramas clave

• Un fotograma clave es un fotograma en el que se definen cambios en la animación. En la animación fotograma a fotograma, cada fotograma es clave. En la interpolada, se definen fotogramas clave en puntos importantes y Flash crea el contenido de los intermedios. Flash muestra los fotogramas interpolados en verde o azul claro con una flecha entre los fotogramas clave. Flash vuelve a dibujar las formas en cada fotograma. Sólo debe crear los fotogramas clave en aquellos puntos del gráfico en que se modifique algo.

Guía para la realización de cortos de animación 42

Representación de animaciones

Guía para la realización de cortos de animación 43

Animación por interpolación

• Puede crear una interpolación de movimiento utilizando uno de los dos métodos siguientes:

• Cree los fotogramas de inicio y final para la animación y utilice la opción Interpolación de movimiento en el panel Propiedades de fotograma.

• Cree el primer fotograma clave para la animación y luego elija Insertar > Crear interpolación de movimiento y mueva el objeto a la nueva ubicación del Escenario. Flash crea el fotograma final automáticamente.

Guía para la realización de cortos de animación 44

Animación interpolada con guía de movimiento

• Cree una secuencia de animación interpolada de movimiento

• Seleccione la capa que contiene la animación y elija Insertar > Guía de movimiento.

Guía para la realización de cortos de animación 45

Interpolación de forma

• Al interpolar formas se crea un efecto similar al de transformación y las formas parecen cambiar en el transcurso del tiempo. Flash también puede interpolar la ubicación, el tamaño y el color de las formas.

• Flash no puede interpolar la forma de grupos, símbolos, bloques de texto ni imágenes de mapas de bits. Use Modificar > Separar para aplicar la interpolación de forma a estos elementos

• Para controlar los cambios de forma más complejos o improbables, use los consejos de forma que controlan la manera en que partes de la forma original se desplazan a la nueva forma.

Guía para la realización de cortos de animación 46

Interpolación de forma:ejemplo

(inicio) (final)

Guía para la realización de cortos de animación 47

Interpolación de forma

• Uso de consejos de forma:• Los consejos de forma identifican puntos que

deben corresponder en las formas inicial y final. Por ejemplo, si está interpolando el dibujo de una cara mientras cambia de expresión, puede marcar cada ojo con un consejo de forma. A continuación, en lugar de convertir la cara en una figura amorfa durante el cambio, los ojos siguen siendo reconocibles y cambian de manera independiente durante el proceso.

Guía para la realización de cortos de animación 48

Interpolación de forma

• Uso de consejos de forma: Ejemplo

Sin consejos de forma Usando

consejos de forma