Guía para la realización de cortos de animación 1
Guía para la realización de cortos de animación
Macromedia Flash
Para Producción Gráfica, I.T. Diseño IndustrialJosé Pablo Suárez Rivero ©
Guía para la realización de cortos de animación 2
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 3
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 4
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 5
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 6
Estructura general de un corto
Corto
Etapa Inicial Etapa intermedia Etapa final
Escena 1 Escena n… … …
Etapa Inicial
Etapa intermedia
Etapa final
…
Guía para la realización de cortos de animación 7
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 8
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’
‘Pasa a:’ nº escena… ‘Fin’
DIÁLOGO
Nombre de personaje
Detalle del diálogo de este personaje
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.
Guía para la realización de cortos de animación 9
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: 70 %
Guía para la realización de cortos de animación 10
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 11
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 12
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 13
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 14
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 15
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 16
Guía para la realización de cortos de animación 17
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 18
Parte 1:Introducción a FLASH
Guía para la realización de cortos de animación 19
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 20
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 21
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 22
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 23
Interfaz general de Flash 5
Guía para la realización de cortos de animación 24
Propiedades de la película
Guía para la realización de cortos de animación 25
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 26
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 27
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 28
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 29
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 30
Paleta de herramientas
Guía para la realización de cortos de animación 31
Parte 2:Herramientas de Dibujo en FLASH
Guía para la realización de cortos de animación 32
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 33
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 34
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 35
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 36
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 37
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 38
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 39
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 40
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 41
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 42
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 43
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 44
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 45
Color
Guía para la realización de cortos de animación 46
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 47
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 48
Panel de Rellenos especiales
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
Utilidades y trucos en FLASH
Guía para la realización de cortos de animación 52
Animación en FLASH
Guía para la realización de cortos de animación 53
• La animación se crea mediante el cambio del contenido de fotogramas sucesivos
Guía para la realización de cortos de animación 54
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 55
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 56
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 57
Representación de animaciones
Guía para la realización de cortos de animación 58
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 59
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 60
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 61
Interpolación de forma:ejemplo
(inicio) (final)
Guía para la realización de cortos de animación 62
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 63
Interpolación de forma
• Uso de consejos de forma: Ejemplo
Sin consejos de forma Usando
consejos de forma
Guía para la realización de cortos de animación 64
Estructura de un Corto en Flash
Caso de Estudio: Falto de Ideas
Guía para la realización de cortos de animación 65
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 66
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 67
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 68
Organización de la BIBLIOTECA cont.
• EJEMPLO:• La figura de un personaje que va a ser animado
puede estructurarse en:
¡¡ Hasta las PUPILAS !!
Guía para la realización de cortos de animación 69
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 70
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 71
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 72
Las Cámaras: ZOOM
Guía para la realización de cortos de animación 73
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 74
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 75
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 76
Cámaras: foco a detalles
Guía para la realización de cortos de animación 77
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 78
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 79
Acompañar Sonido con Diálogos
Guía para la realización de cortos de animación 80Efectos de sonido
Clips de Películas para animaciones monótonas y repetidas, ej: FUEGO
Se pueden escalar, rotar …
Sonidos Cortos/Repetidos.
SOLO 56,8 KB
FUEGO: Sonidos Cortos/Repetidos.
Guía para la realización de cortos de animación 81
INTRODUCCIÓN A ACTIONSCRIPT 2.0
Flash MX
Guía para la realización de cortos de animación 82
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.
• ActionScript es un lenguaje de creación de scripts orientado a objetos que ofrece control sobre cómo se reproduce el contenido de Flash.
Guía para la realización de cortos de animación 83
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 84
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 85
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 86
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 c_color = new Color(mcinstanceName);
Guía para la realización de cortos de animación 87
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 88
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 89
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 90
Variables
Declaración de variablesEjemplo: • 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 91
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 92
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 93
Datos y Tipos de Datos
Clasificación de los tipos de datosLos 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:• MovieClipLos clips de película son símbolos que pueden reproducir
animaciones en una aplicación Flash.Son el único tipo de datos que hace referencia a elementos gráficos.
Guía para la realización de cortos de animación 94
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 95
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 a Flash crear decisiones lógicas.
Guía para la realización de cortos de animación 96
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 97
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 98
Sentencias repetitivas: bucles
Bucle forRepite 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 99
Sentencia de función: function
• Define un bloque de sentencias que ejecuta unas tareas determinadas.• Sintaxis
function nombreFuncion (argumento0,...,argumentoN) { sentenciasreturn 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 media (a, b) { // Return the average of a and b. return (a + b)/2;}
function mediajugador(){var jugador ;jugador = media(6, 12);trace("La media alzanzado por el jugador es " + jugador);}
Guía para la realización de cortos de animación 100
Trabajo con sonido en FLASH
Guía para la realización de cortos de animación 101
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 102
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 103
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 104
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 sonido debe reproducirse o seleccione Reproducir indefinidamente para que se repita continuamente. Para una reproducción continua, introduzca un número suficientemente alto para reproducir el sonido con una duración larga. Por ejemplo, para que un sonido de 15 segundos dure 15 minutos, introduzca 60.
• Nota: no se recomienda crear reproducciones indefinidas con flujos de sonido. Si un flujo de sonido se establece para reproducirse indefinidamente, los fotogramas se añadirán al archivo y el tamaño del archivo aumentará tantas veces como se reproduzca el sonido.
Guía para la realización de cortos de animación 105
La sintaxis de ActionScript
• Inicio y detención de sonidos en fotogramas claveLa 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 106
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 107
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.– 44 kHz es la velocidad de audio CD estándar.
Guía para la realización de cortos de animación 108
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 109
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 110
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.
Top Related