Guía para la realización de cortos de
animación
Macromedia Flash
Para Producción Gráfica, I.T. Diseño Industrial
José Pablo Suárez Rivero ©
Guía para la realización de cortos de animación
1
La idea inicial. Búsqueda
• Las ideas están en cualquier lado
• Buscar en publicaciones, web, libros, revistas,
televisión, experiencias, amigos etc.
• Proceso sugerido:
1.- Mirar, Tomar bocetos de las ideas, anotarlas
2.- Dudar, Pensar en personajes, mejoras de la idea etc.
3.- Escoger, del trabajo realizado, sacrificar y tomar una idea para el
trabajo
4.- DESARROLLO, empieza el trabajo
Conjugar en la historia: drama, sensualidad, tensión
etc.
Guía para la realización de cortos de animación
2
La idea inicial. El conflicto
• La idea debe fundamentarse en un CONFLICTO.
• El conflicto es el problema que la historia resolverá.
• Ejemplo: “El gato Silvestre tiene hambre y sabe que
el vecino se ha dejado su canario afuera en el
garaje”.
El conflicto es:
¿cómo Silvestre atrapará al pájaro sin que el perro
Bulldog del vecino le acribille a él?)
• El formato y estructura del corto es importante,
pero el conflicto es el que guiará la historia
• Conflictos: -> Físicos
-> Emocionales,
Guía para la realización de cortos de animación
3
Anatomía del corto
• Todas las buenas historias se clasifican en tres
etapas:
Inicio, Medio, Final
• La estructuración en tres partes es siempre
recomendable
•Un corto se
divide en
escenas.
Cada escena debe
tener, ‘a menor escala’,
la misma organización
de Inicio, Medio y Final y
también tendrán un
conflicto principal que
resolver.
Guía para la realización de cortos de animación
4
Anatomía del corto
• Etapa Inicial: La intención de esta etapa es conseguir
‘enganchar’ espectador, haciendo atraer su atención. Se
presenta la clase de conflicto de la obra.
– Se introduce la historia.
– Se introducen los personajes y
– Se configura el resto del corto.
• Etapa Intermedia: contempla la sustancia del corto.
– Se suceden eventos, escenas que hace surgir pequeños conflictos que
‘normalmente’ encuentran solución en esta etapa.
– Se ha de resolver en este transcurso el conflicto principal del corto
• Etapa Final:
–
–
–
–
Normalmente es la más corta
Ya el conflicto esta resuelto. Se remata algún pequeño conflicto anterior.
Se habrá ideo la tensión del corto
La audiencia sentirá que la obra habrá terminado.
Guía para la realización de cortos de animación
5
Estructura general de un corto
Corto
Etapa Inicial
Escena 1
…
Etapa intermedia
Etapa final
…
…
Escena n
Etapa Inicial
…
Etapa intermedia
Etapa final
Guía para la realización de cortos de animación
6
Configuración del corto
• PREMISA.- es la idea expresada en pocas palabras
(una o dos líneas)
• PERSONAJES.- es importante delimitar la actuación
de cada personaje. También delimitar la relación
entre ellos. Los nombres hay que fijarlos. Se debe
redactar una lista de personajes:
Ej: Odesio: tiene 25 años, ha dejado los estudios y trabaja de taxista para
mantener a su familia. Vive con su abuela María
Elena: la ‘heroína’, vive con sus padres, tiene un hemano, Cris, que es
el mejor amigo de Odesio
• SINOPSIS.- resumen del corto completo, teniendo
en mente: estructura en tres partes, historia basada
en conflictos, mantener la atención.
Guía para la realización de cortos de animación
7
Forma de escribir la sinopsis de un corto
• La estructura es por escenas, y para cada una de ella se
escribe: (NOTA: lo que va entre comillas se pone tal cual)
‘Comienzo’
Nº escena _____
‘Exterior’/’Interior ‘ Lugar concreto de la escena
‘Día’/’Noche’
ACCIÓN. Redacción textual que explica la escena
(máximo 10 líneas). Puede ser una ACCIÓN o una
DIÁLOGO. Se resalta en mayúsculas cuando
aparece por primera vez un personaje.
DIÁLOGO
Nombre de personaje
Detalle del diálogo de este personaje
‘Pasa a:’ nº escena
…
‘Fin’
Guía para la realización de cortos de animación
8
Técnicas de video en Flash
Pautas generales:
• Flash no es en si mismo una herramienta para
diseñar vídeos, películas, cortos etc.
• Flash es una herramienta genérica que vale casi
para cualquier cosa.
• Por ejemplo, no existe 3D ni cámaras de vídeo
manipulables … pero podemos hacer simulaciones
reales.
• Si midiéramos el coste o esfuerzo de desarrollo en
Flash:
–
APRENDIZAJE DE LA HERRAMIENTA 30 %
–
DESARROLLO DE PROYECTOS:
Guía para la realización de cortos de animación
70 %
9
Técnicas de video en Flash
ANIMACIÓN. Paso 1
•
•
•
•
•
Primeramente es aconsejable animar los objetos de una forma imperfecta.
Solo el cuerpo del mismo, con trazos y formas aprox, sin colores etc.
La animación de objetos debe agruparse en capas: una para cada efecto
que se considere “autónomo”.
Resaltar bien los fotogramas claves, allí donde cambia sustancialmente la
animación.
Usar los tipos de animación que tiene el flash:
1.- de movimiento 2.- de forma y 3.- fotograma a fotograma
Guía para la realización de cortos de animación
10
Técnicas de video en Flash
ANIMACIÓN. Paso 2
• Proceder con detalles de la animación, por
ejemplo manos, brazos y detalles de la cara
Guía para la realización de cortos de animación
11
Técnicas de video en Flash
ANIMACIÓN. Paso 3
• Una vez aprobada la animación, precisar trazos y
definir colores y sombras. También controlar los
efectos de la línea de tiempo -timing-
Guía para la realización de cortos de animación
12
Técnicas de video en Flash. Técnicas de cámara SIN
CÁMARAS
Flash no tiene cámaras.
• Se recomienda siempre pintar más allá del área
visible.
Guía para la realización de cortos de animación
13
Técnicas de video en Flash. Técnicas de cámara SIN
CÁMARAS
• Se puede usar interpolación movimientos para
simular movimientos de cámaras
• Y cambios de escala para simular Zoom In-Out
Guía para la realización de cortos de animación
14
Técnicas de video en Flash. Técnicas de cámara SIN
CÁMARAS
• Resultado de movimiento de cámara+Zoom del
ejemplo anterior
Guía para la realización de cortos de animación
15
Guía para la realización de cortos de animación
16
DENTRO DE FLASH
PARTE 1: Introducción a Macromedia Flash
PARTE 2: Herramientas de Dibujo
Guía para la realización de cortos de animación
17
Parte 1:
Introducción a FLASH
Guía para la realización de cortos de animación
18
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 deelanimación
Escenario y su animación con la Línea
Guía para la realización de cortos
de tiempo.
19
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
20
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.
Guía para la realización de cortos de animació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.
21
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
22
Interfaz general de Flash 5
Guía para la realización de cortos de animación
23
Propiedades de la película
Guía para la realización de cortos de animación
24
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
25
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
26
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
27
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
28
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 para
realizar 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
29
Paleta de herramientas
Guía para la realización de cortos de animación
30
Parte 2:
Herramientas de Dibujo en
FLASH
Guía para la realización de cortos de animación
31
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
32
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
33
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
34
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
35
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
36
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
37
Dibujo de líneas rectas, óvalos y rectángulos
Herramienta Pluma
Para dibujar trazados precisos como
líneas rectas o bien como suaves
curvas
fluidas, puede utilizar la herramienta
Pluma. Puede crear segmentos de
líneas
rectas o curvas, y ajustar el ángulo y
la longitud de los segmentos rectos,
así como
la pendiente de los segmentos curvos.
Guía para la realización de cortos de animación
38
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.
Guía para la realización de cortos de animación
Rellenos de pintura pinta rellenos y áreas vacías
39
y no afecta a las líneas.
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
40
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
41
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
42
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
43
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
44
Color
Guía para la realización de cortos de animación
45
Panel Mezclador de colores
Panel 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
46
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
47
Panel de Rellenos especiales
Guía para la realización de cortos de animación
48
Utilidades y trucos en FLASH
Guía para la realización de cortos de animación
49
Utilidades y trucos en FLASH
Guía para la realización de cortos de animación
50
Utilidades y trucos en FLASH
Guía para la realización de cortos de animación
51
Animación en FLASH
Guía para la realización de cortos de animación
52
• La animación se crea mediante el cambio del contenido de
fotogramas sucesivos
Guía para la realización de cortos de animación
53
Tipos de animación
Flash 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
54
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
55
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
56
Representación de animaciones
Guía para la realización de cortos de animación
57
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
58
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
59
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
60
Interpolación de forma:ejemplo
(inicio)
Guía para la realización de cortos de animación
(final)
61
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
62
Interpolación de forma
• Uso de consejos de forma: Ejemplo
Sin consejos
de forma
Guía para la realización de cortos de animación
Usando
consejos de
forma
63
Estructura de un
Corto en Flash
Caso de Estudio: Falto de Ideas
Guía para la realización de cortos de animación
64
Estructuración en ESCENAS
• Una buena planificación en escenas es necesario:
• Reduce complejidad al aislar módulos del corto
Guía para la realización de cortos de animación
65
Organización de la BIBLIOTECA
• La biblioteca es el lugar donde se
almacenan los recursos (símbolos de
sonidos, gráficos y clips de películas).
• Desde allí se reutilizan y llevan al el
corto.
• Es COMUN A TODAS LAS ESCENAS
• Permite organizarlos en carpetas, para
estructurar bien los elementos.
• Una buena organización de la
biblioteca tiene los siguientes
beneficios:
• REDUCE TAMAÑO DE ARCHIVOS
• PERMITE REUTILIZACION
• FACILITA EL DESARROLLO
Guía para la realización de cortos de animación
66
Organización de la BIBLIOTECA cont.
• EJEMPLO:
• La escena 1 se clasifica en una
carpeta, dentro de la cual hay dos
carpeta más: arbol_1 y casa.
• Arbol_1 contiene los elementos de
un arbol, hoja, sombra de la hoja, y
un clip de película donde se mueve
las ramas y salta una hoja.
• Casa contiene, entre otros, la forma
de la casa y un clip con la luz de la
ventana, la cual es un clip de
película con efecto.
Guía para la realización de cortos de animación
67
Organización de la BIBLIOTECA cont.
• EJEMPLO:
• La figura de un personaje que va a ser animado
puede estructurarse en:
Guía para la realización de cortos de animación
¡¡ Hasta las PUPILAS !!
68
Organización en CAPAS
• Las capas permite mejorar la organización de los
distintos elementos que componen la escena.
• Se agrupas las capas, elementos que van a tener
una misma forma y comportamiento.
• Las capas permiten estar estructuradas en
CARPETAS y SUBCARPETAS
Guía para la realización de cortos de animación
69
Uso de la línea de tiempo
• Frecuentemente, la animación que mejor resulta es
la de FOTOGRAMA A FOTOGRAMA
Guía para la realización de cortos de animación
70
Papel de Cebolla
• El PAPEL DE CEBOLLA permite ver la evolución de animaciones,
varios instantes antes y después. Por ejemplo en un ZOOM con
INT. MOVIMIENTO
Guía para la realización de cortos de animación
71
Las Cámaras: ZOOM
Guía para la realización de cortos de animación
72
Aprovechar mas allá del área de DIBUJO
Dibujar fuera de la pantalla para efectos de ZOOM y CAMARAS
Guía para la realización de cortos de animación
73
Mostrar/Ocultar contornos
• Sabremos los límites del escenarios, a pesar de que
sea tapado por gráficos exteriores a él.
Mostrar/Ocultar
contornos
ESCENARIO
Guía para la realización de cortos de animación
74
Cámaras: foco a detalles
• Llevar el foco de la cámara a una parte en concreta
Salta
a:
Guía para la realización de cortos de animación
75
Cámaras: foco a detalles
Guía para la realización de cortos de animación
76
Inclusión del sonido
• El sonido puede ir incluido en un fotograma en
concreto, y se prolongara hasta cuando se desee,
o esperar a que termine.
Guía para la realización de cortos de animación
77
Inclusión del sonido
cont.
• También se puede organizar todo el sonido en solo
una capa
Guía para la realización de cortos de animación
78
Acompañar Sonido con Diálogos
Guía para la realización de cortos de animación
79
FUEGO: Sonidos Cortos/Repetidos.
Clips de Películas para
animaciones monótonas
y repetidas, ej: FUEGO
Se pueden escalar, rotar
…
Efectos
de sonido
Guía para la realización de cortos de animación
Sonidos
Cortos/Repetidos.
80
SOLO 56,8 KB
INTRODUCCIÓN A
ACTIONSCRIPT 2.0
Flash MX
Guía para la realización de cortos de animación
81
Introducción
• El lenguaje de ActionScript que forma parte de
Macromedia Flash MX ofrece a los diseñadores y
desarrolladores muchas ventajas.
• Con ActionScript se puede controlar la
reproducción del documento en respuesta a
eventos, como tiempo transcurrido y carga de
datos.
• Añadir interactividad a un documento en
respuesta a acciones de los usuarios, como un clic
en un botón; utilizar objetos incorporados, como un
objeto de botón, con métodos, propiedades y
eventos asociados incorporados; crear clases y
objetos personalizados.
82
Guía para la realización de cortos de animación
Introducción
• ActionScript sigue reglas gramaticales y de puntuación que
determinan qué caracteres y palabras se utilizan para dar
significado a una sentencia y el orden en que se deben
escribir.
• Por ejemplo, en español, una oración termina con un punto.
En ActionScript, se utiliza un punto y coma para finalizar una
sentencia.
ActionScript y JavaScript
• ActionScript es parecido al lenguaje de programación
JavaScript.
• El documento ECMA-262 de la Asociación europea de
fabricantes de PC (ECMA, European Computers
Manufacturers Association) se deriva de JavaScript y sirve de
estándar internacional para el lenguaje JavaScript.
ActionScript se basa en la especificación ECMA-262.
Guía para la realización de cortos de animación
83
Terminología
• Acciones: sentencias que indican a un archivo SWF que debe
llevar a cabo alguna acción durante su reproducción. Por
ejemplo, gotoAndStop() desplaza la cabeza lectora a un
fotograma o etiqueta determinados.
• Eventos: acciones que tienen lugar durante la reproducción
de un archivo SWF. Por ejemplo, cuando se carga un clip de
película se generan diferentes eventos: la cabeza lectora
accede a un fotograma, el usuario hace clic en un botón o
clip de película o el usuario introduce información mediante
el teclado.
• Expresión: cualquier combinación válida de símbolos de
ActionScript que representan un valor. Una expresión está
formada por operadores y operandos. Por ejemplo, en la
expresión x + 2, x y 2 son operandos y + es un operador.
• Función: bloque de código reutilizable que acepta
parámetros y puede devolver un valor.
Guía para la realización de cortos de animación
84
Terminología
• Operador: término que calcula un nuevo valor a partir de uno
o más valores. Por ejemplo, el operador de suma (+) suma dos
o más valores para generar un nuevo valor. Los valores
manipulados por los operadores se denominan operandos.
• Parámetro (denominado también argumento): marcador de
posición que permite pasar valores a las funciones. La
siguiente función welcome(), por ejemplo, utiliza dos valores
que recibe de los parámetros firstName y hobby:
function welcome(firstName, hobby) {
welcomeText = "Hola, " + firstName + "Se nota que te gusta " +
hobby;
}
• Propiedad: atributo que define un objeto. Por ejemplo, _visible
es una propiedad de los clips de película que define si el clip
está visible u oculto.
Guía para la realización de cortos de animación
85
Terminología
• Variable:
Identificador que almacena valores de cualquier tipo
de datos. Las variables pueden crearse,
modificarse y actualizarse. Los valores
almacenados en una variable pueden recuperarse
para ser utilizados en scripts.
En el siguiente ejemplo, los identificadores situados a
la izquierda de los signos igual son variables:
var x = 5;
var name = "Lolo";
var Guía
c_color
= new
Color(mcinstanceName);
para la realización
de cortos
de animación
86
Sintaxis ActionScript
• Todos los lenguajes, con independencia de si son
lenguajes informáticos o lenguajes "humanos"
hablados y escritos, siguen reglas específicas que
fomentan la comunicación. Estas reglas se
conocen como la sintaxis del lenguaje.
• Flash utiliza la sintaxis de puntos, que significa que el
punto (.) sirve para vincular partes de un script.
Otros elementos de la sintaxis de ActionScript son:
– Un punto y coma (;) en una sentencia de ActionScript, al igual que un
punto en una sentencia normal, indica el final de una sentencia.
– Los paréntesis () agrupan argumentos que se aplican a una sentencia
de ActionScript.
– Las llaves {} agrupan sentencias de ActionScript relacionadas. Se
pueden utilizar llaves anidadas para crear una jerarquía de sentencias.
Guía para la realización de cortos de animación
87
Variables
• En una película de flash podemos llegar a manejar mucha
información: desde los datos introducidos por los usuarios en campos
de entrada, hasta las coordenadas de una nave espacial, pasando
por un número de fotograma determinado. Para poder seguir la
pista y manipular toda estos datos, necesitamos guardarlos en algún
sitio y poder recuperarlos siempre que los necesitemos.
• Las variables son los contenedores (para almacenamiento de
información) donde guardaremos los datos de un script. Gracias a
las variables podremos gestionar y recuperar cualquier información
que almacenemos en ellas.
• Una variable es como una cuenta bancaria que, en lugar de
disponer de dinero, dispone de datos. Crear una nueva variable es
como abrir una nueva cuenta en un banco: depositamos en ella
algo (datos) para poder recuperarlos posteriormente.
Guía para la realización de cortos de animación
88
Variables
• Así como las cuentas bancarias tienen un número
de cuenta para poder identificarlas, las variables
tienen un nombre asociado para poder dirigirnos a
ellas y manipular la información almacenada.
• Una vez creada una variable, podremos poner
datos en ella siempre que queramos. Si no la
utilizamos, podemos borrarla definitivamente.
• Lo importante de las variables es comprender que
podemos referirnos a ellas, aunque los datos
contenidos pueden ser alterados por las diversas
operaciones que puede sufrir su contenido a lo
largo de la película.
• El nombre de la variable queda fija, aunque el
contenido (la información) cambie.
Guía para la realización de cortos de animación
89
Variables
Declaración de variables
Ejemplo:
• var altura;
• var ancho;
• var apellidos;
• var x;
Podemos dar a las variables un valor inicial, al mismo
tiempo que las declaramos:
• var altura = 5;
• var ancho= 4.35;
• var apellidos = "Moreno García" ;
Guía para la realización de cortos de animación
90
Variables
Normas para nombrar las variables
• Los nombres de variables sólo pueden contener
letras, números y el carácter de subrayado.
• Deben empezar con una letra.
• Los nombres de variable son insensibles a las
mayúsculas. Esto significa que Nombre, nombre o
NOMBRE serán la misma variable.
Guía para la realización de cortos de animación
91
Datos y Tipos de Datos
• Un tipo de datos describe la clase de información que puede
contener una variable o un elemento del script. Al contrario
de otros lenguajes de programación, los scripts no necesitan
una declaración del tipo de dato.
• Las sentencias de programación contienen instrucciones de
script. Pero muchas instrucciones serían inútiles sin los datos.
Cuando creamos una variable, por ejemplo, asignamos
cualquier dato como su valor. Cuando utilizamos el comando
trace, pasamos datos como argumento para mostrar en la
ventana de salida.
• Los datos son el contenido que manipulamos con el código
ActionScirpt. A lo largo de sus scripts recuperará, dará,
almacenará y generalmente lanzará muchos datos.
Guía para la realización de cortos de animación
92
Datos y Tipos de Datos
Clasificación de los tipos de datos
Los tipos de datos principales (primitivos)
• Cadena:
var color = "azul"; var telefono = "969139344";
• Numérico:
numero = -10; numeroFlotante = 3.14159265359;
• Booleano:
hoySabado = true; if (hoySabado == true) { fiesta="Si"; }
Los tipos de datos compuestos (de referencia)
• Objeto
• Matriz var empleados = new Array(4);
empleados[0] = "Pedro"; empleados[1] = "Juan";
empleados[2] = "Ana"; empleados[3] = "Luisa";
De Película:
• MovieClip
Los clips de película son símbolos que pueden reproducir
animaciones en una aplicación Flash.
Son el Guía
único
tipodede
para la realización
cortos datos
de animación que hace referencia a elementos
gráficos.
93
Sentencias Condicionales
• Uno de los aspectos gratificantes de Flash es crear películas
inteligentes. Con inteligente queremos decir:
• Suponga una niña llamada Alicia a la que no le gusta mojarse la
ropa. Antes de salir de su casa cada mañana, Alicia mira por la
ventana para comprobar el tiempo y, si está lloviendo, coger un
paraguas. Alicia es inteligente. Utiliza la lógica para ver una serie de
opciones y construir una decisión sobre lo que hacer basada en las
circunstancias. Nosotros utilizaremos la misma lógica básica cuando
creemos películas interactivas en flash.
• Ejemplos de lógica en una película flash:
• Suponga que tenemos una sección de una película restringida. Para
entrar en la zona restringida, el usuario debe entrar una contraseña.
Si el usuario entra la contraseña correcta, le enseñaremos el
contenido restringido. En caso contrario, no.
• Suponga que estamos moviendo una pelota a través de la pantalla
y queremos que rebote en un muro. Si la pelota cruza cierto punto,
cambiaremos la dirección de la pelota. En caso contrario,
dejaremos que la pelota continúe viajando en su dirección.
Guía para la realización de cortos de animación
94
Sentencias Condicionales
Ejemplo de sentencia condicional
• if (userName == "James Bond") { trace
("Bienvenido a mi website, 007"); }
La estructura genérica de una condicional
es:
if (condicion) { sentencias }
Una condicional permite
decisiones lógicas.
Guía para la realización de cortos de animación
a
Flash
crear
95
Sentencias repetitivas: bucles
• No solo queremos que las películas tomen decisiones,
también queremos que hagan tareas tediosas y repetitivas
por nosotros.
• Suponga que quiere visualizar una secuencia de cinco
números en la pantalla de salida y quiere que la secuencia
empiece en cualquier número. Si el número para empezar
es 10, puede mostrar la siguiente secuencia:
trace(10); trace(11); trace(12); trace(13); trace(14);
• Pero si quiere que empiece en la secuencia 513, tendrá que
repetir todos los números:
trace(513); trace(514); trace(515); trace(516); trace(517);
Guía para la realización de cortos de animación
96
Sentencias repetitivas: bucles
• Podemos evitar la repetición haciendo que la sentencia trace
dependa de una variable, tal que así:
var x = 1;
trace(x);
x = x +1; trace(x);
x = x +1; trace(x);
x = x +1; trace(x);
x = x +1; trace(x);
x = x +1; trace(x);
• Sin embargo, para realizar tareas muy repetitivas utilizamos una
sentencia bucle que haga que un bloque de código se repita un
número arbitrario de veces:
var x = 1;
while (x<=5) {
trace(x);
x = x +1;
}
Guía para la realización de cortos de animación
97
Sentencias repetitivas: bucles
Bucle for
Repite una serie de acciones un número determinado de veces
for(init; condition; next) {
statement(s);
}
Ejemplo:
for (var i = 0; i < 10; i++) {
// Escribe el valor de i.
trace(i);
}
Guía para la realización de cortos de animación
98
Sentencia de función: function
• Define un bloque de sentencias que ejecuta unas tareas
determinadas.
• Sintaxis
function nombreFuncion (argumento0,...,argumentoN)
{ sentencias
return valor }
nombreFuncion: Cualquier nombre.
argumentoN: cero o más valores para pasar a la función. Estos valores
pueden ser recogidos por las sentencias para su posterior
manipulación.
• Ejemplos
function mediajugador(){
var jugador ;
jugador = media(6, 12);
function media (a, b) {
// Return the average of a and b. trace("La media alzanzado por el jugador
es " + jugador);
return (a + b)/2;
99
}
Guía para la realización de cortos de animación
}
Trabajo con sonido en FLASH
Guía para la realización de cortos de animación
100
Trabajo con sonido
• En Flash hay dos tipos de sonidos (paleta de
propiedades de una sonido):
Sonidos de evento y flujos de sonido.
Un sonido de evento debe descargarse por
completo antes de empezar a reproducirse y
continúa haciéndolo hasta que se detiene
completamente.
Los flujos de sonido empiezan a reproducirse en
cuanto se ha descargado información suficiente
para los primeros fotogramas y se sincronizan con la
línea de tiempo para reproducirse en sitios Web.
Guía para la realización de cortos de animación
101
Trabajo con sonido
• Puede importar a Flash los siguientes formatos de
archivo de sonido:
• WAV (sólo en Windows)
• AIFF (sólo en Macintosh)
• MP3 (Windows o Macintosh)
Flash almacena los sonidos en la biblioteca junto con
los mapas de bits y los símbolos.
Si desea añadir efectos a los sonidos de Flash, es
preferible importar sonidos de 16 bits. Si la memoria
RAM del sistema es limitada, trabaje con clips de
sonido cortos o con sonidos de 8 bits en lugar de 16
bits.
Guía para la realización de cortos de animación
102
Trabajo con sonido
• PROPIEDADES DEL SONIDO EN FLASH
• Efectos: Ninguno no aplica ningún efecto al archivo de sonido.
Seleccione esta opción para eliminar efectos aplicados con
anterioridad.
• Canal izquierdo/Canal derecho sólo reproducen el sonido en el
canal izquierdo o derecho.
• Desvanecimiento de izquierda a derecha/Desvanecimiento de
derecha a izquierda mueven el sonido de un canal a otro.
• Aumento progresivo incrementa gradualmente la amplitud de un
sonido.
• Desvanecimiento reduce gradualmente la amplitud de un sonido.
• Personalizar le permite crear sus propios puntos de entrada y salida y
de sonido mediante Editar envolvente. Véase Utilización de
controles de edición de sonido.
• Seleccione una opción de sincronización en el menú emergente
Sinc.: Evento sincroniza el sonido con un evento. Un sonido de
evento no comienza a sonar hasta que aparece el fotograma clave
inicial y se reproduce por completo, independientemente de la línea
de tiempo, aunque el archivo SWF se detenga. Al reproducir el
archivo SWF publicado, los sonidos de evento se mezclan.
Guía para la realización de cortos de animación
103
Trabajo con sonido
• PROPIEDADES DEL SONIDO EN FLASH
•
•
•
•
•
•
•
Evento: Un ejemplo de sonido de evento es el que suena cuando el
usuario hace clic en un botón. Si un sonido de evento se está
reproduciendo y se crea una nueva instancia del sonido (por ejemplo,
cuando el usuario hace clic en el botón nuevamente), la primera
instancia del sonido continúa reproduciéndose y la nueva instancia
empieza a reproducirse de forma simultánea.
Inicio es equivalente a Evento, pero si el sonido ya se está
reproduciendo, no se reproduce una nueva instancia del mismo.
Detener detiene el sonido especificado.
Flujo sincroniza el sonido para reproducirlo en un sitio Web. Flash hace
que la animación vaya a la misma velocidad que los flujos de sonido. Si
no puede dibujar los fotogramas de animación a una velocidad
suficiente, se los salta. Al contrario que los sonidos de evento, los flujos de
sonido se detienen cuando el archivo SWF se detiene. Nunca pueden
sonar durante un periodo más largo que la longitud de los fotogramas
que ocupa. Al publicar el archivo SWF, los flujos de sonido se mezclan.
Un ejemplo de flujo de sonido es la voz de un personaje en una
animación que se reproduce en fotogramas múltiples.
Nota: si utiliza un sonido MP3 como flujo de sonido, deberá volver a
comprimir el sonido para exportarlo. Puede exportar el sonido como
archivo MP3 con la misma configuración de compresión que tenía
cuando se importó. Véase Compresión de sonidos para la exportación.
Introduzca un valor en Repetir para especificar el número de veces que
el Guía
sonido
debe reproducirse o seleccione Reproducir indefinidamente 104
para la realización de cortos de animación
para que se repita continuamente. Para una reproducción continua,
introduzca un número suficientemente alto para reproducir el sonido con
La sintaxis de ActionScript
• Inicio y detención de sonidos en fotogramas clave
La tarea relacionada con sonidos más habitual en Flash es la de empezar
y terminar sonidos en los fotogramas clave en sincronización con la
animación.
Para detener e iniciar sonidos en fotogramas clave:
1.- Para sincronizarlo con un evento de la escena, elija un fotograma clave de inicio que se
corresponda con el fotograma clave del evento de la escena. Puede seleccionar todas las
opciones de sincronización.
2.- Cree un fotograma clave en la línea de tiempo de la capa de sonido, en el fotograma donde desee
que termine el sonido.
En la línea de tiempo aparece una representación del archivo de sonido.
3.- Elija Ventana > Propiedades y haga clic en la flecha de la esquina inferior derecha para expandir
el inspector de propiedades.
4.- En el inspector de propiedades, elija el mismo sonido en el menú emergente Sonido.
5.- Seleccione Detener en el menú emergente Sincronización.
Cuando se reproduce el archivo SWF, el sonido se detiene al llegar al fotograma clave final.
6.- Para reproducir el sonido basta con mover la cabeza lectora.
Guía para la realización de cortos de animación
105
Compresión de sonidos para la exportación
• Es posible seleccionar las opciones de compresión de sonidos
de evento determinados y exportarlos con dicha
configuración.
• Todos los flujos de sonido de un documento se exportan
como un único archivo continuo con la configuración más
alta de todas las aplicadas a estos flujos de sonido. Esto
incluye los flujos de sonido de los objetos de vídeo.
• La velocidad de muestra y el grado de compresión son de
gran importancia para la calidad y el tamaño de los sonidos
en la exportación de archivos SWF.
• Cuanto más comprimido esté un sonido y menor sea la
velocidad de muestra, menores serán el tamaño y la calidad.
• Deberá hacer algunas pruebas hasta encontrar el equilibrio
óptimo entre calidad de sonido y tamaño de archivo.
Guía para la realización de cortos de animación
106
Opción de compresión ADPCM
• La opción de compresión ADPCM define la
compresión para datos de sonido de 8 o 16 bits.
• Utilice la opción ADPCM para exportar sonidos de
evento cortos, como pulsaciones de botón.
• En Frec. muestra, seleccione una opción para
controlar la fidelidad del sonido y el tamaño del
archivo. Las velocidades más bajas disminuyen el
tamaño del archivo pero también pueden
degradar la calidad del sonido. Las opciones de
velocidad son las siguientes:
– 5 kHz es apenas aceptable para la voz.
– 11 kHz es la calidad mínima recomendada para un segmento corto de
música y es un cuarto de la velocidad de CD estándar.
– 22 kHz es una opción muy utilizada para la reproducción en Internet y
es
la mitad de la velocidad de CD estándar.
107
Guía para la realización de cortos de animación
– 44 kHz es la velocidad de audio CD estándar.
Opción de compresión MP3
• La opción de compresión MP3 permite exportar sonidos con
compresión MP3. Utilice MP3 para exportar flujos de sonido
largos, como pistas de sonido con música.
(Si exporta un archivo importado en formato MP3, puede exportarlo con la misma
configuración que tenía al importarlo.)
• En Velocidad, seleccione una opción para determinar los bits
por segundo en el archivo de sonido exportado. Flash admite
de 8 Kbps a 160 Kbps CBR (velocidad constante de bit).
• Cuando exporte música, establezca una velocidad de 16
Kbps o superior para obtener un resultado óptimo.
• En Calidad, seleccione una opción para determinar la
velocidad de compresión y la calidad de sonido:
• Rápida proporciona una compresión más rápida pero una menor calidad de sonido.
• Media proporciona una compresión algo más lenta pero una mejor calidad de sonido.
• Óptima proporciona la compresión más baja y la mejor calidad de sonido.
Guía para la realización de cortos de animación
108
Opción de compresión Voz
• La opción de compresión Voz exporta sonidos
mediante una compresión especialmente
adaptada al habla.
• En Frec. muestra, seleccione una opción para
controlar la fidelidad del sonido y el tamaño del
archivo, igual al de compresión ADPCM:
– 5 kHz es apenas aceptable para la voz.
– 11 kHz es la calidad mínima recomendada para un segmento corto de
música y es un cuarto de la velocidad de CD estándar.
– 22 kHz es una opción muy utilizada para la reproducción en Internet y
es la mitad de la velocidad de CD estándar.
– 44 kHz es la velocidad de audio CD estándar.
Guía para la realización de cortos de animación
109
Consejos para la exportación de sonido
• Saque el máximo partido de cada sonido
mediante la aplicación de efectos diferentes
(como envolventes de volumen, reproducciones
indefinidas y puntos iniciales y finales) en
fotogramas clave distintos. Puede obtener varios
efectos con un solo archivo de sonido.
• Reproduzca indefinidamente sonidos cortos para
crear música de fondo.
• No establezca flujos de sonido para que se
reproduzcan indefinidamente.
• Utilice la sincronización de flujos para que la
animación esté sincronizada con la pista de sonido
al previsualizar la animación en el editor.
Guía para la realización de cortos de animación
110
Descargar

trasparencias-guia para la realización del corto en