IESTP OMATE

Animacin de Grficos

ANIMACION DE GRFICOS

1.1 INTRODUCCIN A FLASH CS4

Flash CS4 es uno de los programas ms avanzados para disear y producir elementos grficos
para las pginas Web. Con el podrs crear de manera rpida y sencillo cualquier grafico para
una pgina Web, utilizando elementos visuales que harn que tu diseo sea atractivo
visualmente
En esta sesin conocers los elementos del entorno de trabajo, las diferentes secciones de
herramientas que se pueden utilizar, la ventana del documento, los paneles, etc.
1.2. INGRESAR AL PROGRAMA FLAHS CS4
Para que puedas ingresar a trabajar al programa adobe flash cs4 debes completar los siguientes
pasos:
Haz clic en el botn inicio y luego la opcin todos los programas.
Finalmente selecciona seleccione adobe flash profesional cs4

1.3. CREAR UN NUEVO ARCHIVO

Para crear un Nuevo archivorealiza lo siguiente:

1. En la ventana de adobe flash CS4 cargada inicialmente haz clic en :

Archivo de flash CS4 (AS3.0)

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 1

 IESTP OMATE
Animacin de Grficos

MI PRIMERA ANIMACIN FLASH

Una de las caractersticas principales de Flash es su sencillez, esta sencillez en su utilizacin
permite crear animaciones de un modo efectivo y rpido.
Pongmonos en situacin, supongamos que queremos crear una animacin en la que una pelota
realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas,
pero nada ms lejos de la realidad.
En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso se ver
ms adelante), el objetivo es que entendamos cmo crea Flash las animaciones y de qu modo
nos facilita el trabajo.
A primera vista, lo lgico parece ser dibujar la pelota en cada instante del movimiento, de modo
que cuantos ms instantes dibujemos, ms real parecer el movimiento. Pues bien, con Flash
bastar con crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba
del todo), en el segundo se dibujar la pelota en el momento de tocar el suelo y en el tercero la
pelota volver a estar arriba (en realidad este tercer fotograma no har falta crearlo, pues
bastar con copiar el primero). Por tanto, vemos que el trabajo ms largo (dibujar los objetos) ya
est hecho.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 2

 IESTP OMATE
Animacin de Grficos

Ahora, se determina el tiempo que durar cada movimiento (es decir, el tiempo que transcurre
entre los instantes en los que la pelota est arriba y abajo) y por ltimo se le indica a Flash que
cree una animacin de movimiento entre estos fotogramas.
En esta versin de Flash an se ha facilitado ms la realizacin de animaciones de movimiento
como veremos en el tema correspondiente.
Observa cmo ha quedado:

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 3

 IESTP OMATE
Animacin de Grficos

UNIDAD II
EL ENTORNO DE FLASH CS4

2.1. La interfaz de Flash CS4

Flash CS4 cuenta con un entorno o interfaz de trabajo renovada de lo ms manejable e intuitiva.
Adems, tiene la ventaja de que es similar a la de otros programas de Adobe (Photoshop,
Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y
dominio. Esto es lo que nos encontraremos al abrir Flash CS4 por primera vez:

En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el
programa Flash. Flash recordar nuestras preferencias y abrir el programa tal y como lo
dejamos la ltima vez que lo utilizamos.

En esta imagen faltan algunos mens. Todos se irn viendo a lo largo de este curso aunque no
aparezcan en esta imagen, que slo pretende mostrar las partes principales de la interfaz de
Flash.

Veamos cules son:

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 4

 IESTP OMATE
Animacin de Grficos

2.2. La Barra de Mens

La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del
programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene
algunas particularidades. Veamos los principales Submens a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos, etc. Destaca la potencia
de la utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos
(sonidos, vdeo, imgenes e incluso otras pelculas Flash), o la de Configuracin de
Publicacin desde donde se pueden modificar las caractersticas de la publicacin.
Tambin permite configurar la impresin de las pginas, imprimirlas...

Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar, etc. Tanto objetos o
dibujos como fotogramas; tambin permite personalizar algunas de las opciones ms
comunes del programa.

Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las
escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se
puede seleccionar desde los submens Cuadrcula y Guas desde donde tambin se
pueden configurar sus opciones.

Insertar: Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas,

acciones, escenas, etc.

Modificar: La opcin Transformar permite modificar los grficos existentes en la

pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales
(este tema se tratar ms adelante). El resto de opciones permite modificar
caractersticas de los elementos de la animacin Suavizar, Optimizar o de la propia
pelcula (Capa, Escena, etc).

Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en

profundidad.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 5

 IESTP OMATE
Animacin de Grficos

Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas

que permiten emular lo que un usuario pueda introducir en el entorno de edicin) que
hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de
Macromedia o ejecutar los que ya tengamos.

Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula.

Reproducir, Rebobinar, Probar Pelcula, etc.

Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te ayudaran

a encontrar errores de programacin en ActionScript, entre ellos se encuentran Entrar,
Pasar, Salir, Continuar.

Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las
ventanas, incluye accesos directos a todos los paneles y tambin la posibilidad de crear
tus propios Espacios de Trabajo, guardarlos, cargarlos, etc.

Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, desde el
manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones
guiadas etc.

Veamos un ejemplo prctico del uso de mens, realiza el ejercicio utilizar la

cuadrcula

Ejercicio paso a paso: Utilizar la cuadrcula

Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no saldr en la
pelcula) y que nos servir como gua para poder dibujar objetos de forma exacta y precisa.

Ejercicio paso a paso.

1. Pulsa en el men Archivo.

2. Selecciona la opcin Nuevo.
3. Elige Archivo de Flash (ActionScript 3.0).
4. Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una pelcula ya
empezada, sltate los 2 primeros pasos.
5. Selecciona la opcin Mostrar cuadrcula del men Ver.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 6

 IESTP OMATE
Animacin de Grficos

6. Se desplegar un submen como el de la figura.

7. Selecciona la opcin Mostrar Cuadrcula para hacerlo visible.

8. Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula a tu

gusto (tamao, color de fondo, etc)
9. Selecciona la opcin Ajustes Ajustar a Cuadrcula del men Ver para que los objetos
que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlos de un
modo fcil.

2.3. La Lnea de Tiempo

La Lnea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta
de 2 partes.

1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando
rectngulos)

2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada
fotograma, cunto dura o cundo aparecer en la pelcula.

Adems, en la parte inferior hay herramientas para trabajar con Papel cebolla e informacin
sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en
la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen).

A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el tiempo. Es

decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en la Lnea de
tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 7

 IESTP OMATE
Animacin de Grficos

La Lnea de Tiempo - Fotogramas

Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una

animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la
Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan
igual. Veamos qu tipos de fotogramas hay y cules son sus rasgos.

Fotograma Clave (KeyFrame): Son fotogramas con un contenido especfico, se

crean, por tanto, para insertar en ellos un nuevo contenido no existente en la
pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se
le diferencia por una lnea negra vertical.

Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habra 3

Keyframes. Uno para cada posicin distinta de la pelota.

Fot. Clave

Fotograma Normal (Normal Frame): Estos fotogramas siempre siguen a los

fotogramas clave, no representan contenido nuevo y son de color gris.

Fot. Normal

El ltimo fotograma de una secuencia de fotogramas normales viene representado

por un cuadrado blanco sobre fondo gris.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 8

 IESTP OMATE
Animacin de Grficos

Fotograma Contenedor:No son fotogramas propiamente dichos, sino que

representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno.
Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la
pelcula. En la imagen anterior, son fotogramas contenedor todos los fotogramas a
partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.

Fotograma Vaco: Son fotogramas sin contenido, Su color es blanco.

En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacos. No

debemos confundirlos con los fotogramas contenedor, pues estos ltimos vienen
delimitados por lneas verticales grises (no negras). Si se inserta algo en estos
fotogramas, pasan a ser Keyframes.

Fot. vaco

Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrar

una imagen en blanco. (No dar por terminada la animacin). De modo que si queremos
que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los
fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer"
y volver a aparecer.

Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera"

roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el
Panel Propiedades. Si la duracin del frame es la suficiente, se puede leer el nombre
(o etiqueta) que identifica al conjunto de fotogramas.

Fot. Etiquetado.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 9

 IESTP OMATE
Animacin de Grficos

Fotograma con Acciones asociadas:Contienen en la parte superior una "a" que

indica que tienen una accin asociada. Estos fotogramas son especialmente
importantes, pues estas acciones, en principio "ocultas" (para verlas hay que
acceder al Panel Acciones) pueden cambiar el comportamiento de la pelcula. En la
imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser
fotogramas normales). El fotograma 4 no tiene acciones y s las tiene el 5.

Fot.con Acciones

Fotogramas Animados: Pueden ser de 2 tipos:

1. Fotogramas de Animacin de Movimiento: Vienen caracterizados por el color

morado y representa el movimiento (con o sin efectos) de un objeto, que pasa
de la posicin del Keyframe inicial al final. Para representar esta animacin
aparece una flecha entre estos Keyframes.

Fot. de Anim de Mov.

Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash

representar el movimiento entre ambas posiciones en la pelcula final) y del 6 al
11. Otro movimiento.

2. Fotogramas de animacin de Forma:Vienen caracterizados por el color verde

y representan un cambio en la forma de un objeto, que pasa de la forma que
tena en el Keyframe inicial a la del final. Para representar esta animacin
aparece una flecha entre estos Keyframes.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 10

 IESTP OMATE
Animacin de Grficos

Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame

1 tendra la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11,
otra forma distinta.

En esta ltima imagen aparecen casi todos los tipos de fotogramas, los reconoces?

2.4. Las Capas

El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la

importancia de estas, se le dedicar un tema completo. An as, veamos a grandes
rasgos qu son las capas.

Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir,
una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas).

Los objetos que estn en una determinada capa comparten fotograma y por tanto,
pueden "mezclarse" entre s. Esto es interesante a menudo, pero otras veces es
conveniente separar los objetos de modo que no interfieran entre s. Para ello,
crearemos tantas capas como sea necesario. El uso de mltiples capas adems, da
lugar a pelculas bien ordenadas y de fcil manejo (es conveniente colocar los el cdigo
ActionScript en una capa independiente llamada "acciones", por ejemplo). Las
ventajas y desventajas de usar capas se ver en la unidad referente a Capas.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 11

 IESTP OMATE
Animacin de Grficos

2.5. El Escenario

A continuacin veremos las diferentes partes que conforman el rea de trabajo empezaremos
con la ms importante: el Escenario.

Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la

pelcula que estemos realizando. El escenario tiene unas propiedades muy
importantes, ya que coinciden con las Propiedades del documento. Para acceder a
ellas, hagamos clic con el botn derecho sobre cualquier parte del escenario en la
que no haya ningn objeto y despus sobre Propiedades del documento:

Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de
bsqueda rellenando los campos de Ttulo y Descripcin.

Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1

px (pxeles) y el mximo de 2880 x 2880 px.

Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado

(tamao por defecto de la Impresora, Contenidos existentes o los elegidos como
Predeterminados)

Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la

pelcula.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 12

 IESTP OMATE
Animacin de Grficos

Velocidad de Fotogramas: nmero de fotogramas por segundo que aparecern en la

pelcula.

Unidades de Regla: Unidad que se emplear para medir las cantidades.

Transformar en predeterminado: Este botn, propio de la nueva versin de Flash,

permite almacenar las propiedades del documento actual y aplicarlas a todos los
documentos nuevos que se creen desde ese instante en adelante. Estas propiedades
por supuesto podrn ser alteradas desde este panel cuando se desee.

Cambiar las dimensiones de la pelcula

Practicar cmo se pueden cambiar algunos atributos fundamentales de las pelculas.

Ejercicio paso a paso.

1. Haz clic con el botn derecho sobre el fondo de la pelcula.

2. Selecciona Propiedades del Documento.
3. En Unidades de Reglas selecciona Centimetros.
4. A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22.46 y
en Altura 16.84.
5. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen
aproximadamente a las estndar 640 x 480 px.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 13

 IESTP OMATE
Animacin de Grficos

2.6. Las Vistas o Zooms

La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto,

permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que hagamos
clic en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.

Panel Zooms: Son un conjunto de accesos directos a Submens existentes en el Men

Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean correctamente.

Bsico: Zooms

El efecto Zoom consiste en acercar o alejar la "mirada" de un determinado lugar. En realidad,

lo que se hace es aumentar o reducir el tamao de un objeto, de modo que parece que nos
hayamos acercado o alejado de l.

Es muy til para poder ver con ms detalle ciertos puntos de la animacin (grficos
principalmente) y para poder retocar algunas partes que no son visibles desde lejos.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 14

 IESTP OMATE
Animacin de Grficos

Igualmente, resulta til ver la animacin desde lejos para tener una visin global de ella.
Veamos cmo trabaja Flash con los Zooms.

Panel Zoom

Se puede acceder a todas las funciones de los Zooms desde el Men Ver. En
cualquier caso, Flash incluye un submen de acceso rpido para dichos comandos.
Veamos en qu consisten:

Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es

decir, amplia el tamao del fotograma hasta ocupar todo el rea de Trabajo. si hay
objetos fuera del rea de Trabajo, no se vern.

Mostrar Todo: Muestra en el rea de Trabajo todos los objetos que haya en la
pelcula, adaptando el tamao del fotograma al espacio necesario para que quepan.
Si todos los objetos estn en la parte izquierda de un fotograma, la parte derecha no
se ver.

Como podemos ver, ambas selecciones son tiles, pero tienen sus desventajas.
Para darnos libertad total, Flash nos permite elegir el tamao del Escenario.

25%, 50%...: Muestra el fotograma con el tamao que indiquemos en % teniendo en

cuenta que el 100% es el tamao de referencia. Es decir, el 100% es el tamao
original de la pelcula (ocupa lo que se ver al publicar la pelcula), todo lo dems
depende de cunto sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% ser
justo la mitad de esta cantidad y el 200% ser el doble de 640 x 480 px.

2.7. Los Paneles

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 15

 IESTP OMATE
Animacin de Grficos

Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que
haga referencia a las acciones, ir en el Panel Acciones). Su misin es simplificar y facilitar el
uso de los comandos.

Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de trabajo.
Pudindose expandir o minimizar con un clic de ratn.

Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el men Ventana y

haciendo clic sobre el nombre del panel que quieras mostrar.

Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias disposiciones
de paneles, para que si en algn momento el entorno se vuelve un poco catico puedas
recuperar tu configuracin elegida desde el men Ventana.

Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio de
trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo elemento
de men Espacio de trabajo en cualquier momento.

Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos a
nombrarlos y a resumir las funciones de la mayora de ellos.

Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til.
Panel Color: Mediante este panel creamos los colores que ms nos gusten.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 16

 IESTP OMATE
Animacin de Grficos

Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas
nuestras creaciones).
Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados,
permitindonos modificarlas. Muy til para alineaciones exactas.
Panel Escena: Modifica los atributos de las escenas que usemos.
Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados.
Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra
pelcula.
Panel Comportamientos: Permiten asignar a determinados objetos una serie de
caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a
otros objetos de forma rpida y eficaz.
Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos
para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes"
con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...)
Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras
pelculas.
Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos
accesibles desde este panel.
Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las
propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de
trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay
interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlo
de vista nunca.
Panel Explorador de Pelculas: Nos permite acceder a todo el contenido de nuestra
pelcula de forma fcil y rpida
Bsico: Escenas

Escenas

Una Escena no es ms que una porcin de la Lnea de Tiempo, con todo lo que sta
incluya (capas, fotogramas...).

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 17

 IESTP OMATE
Animacin de Grficos

Su finalidad principal es la de organizar la pelcula, de modo que las partes de la pelcula

que no tengan relacin entre s o no estn una a continuacin de la otra (seguida en la
lnea de tiempo). De este modo, separando una pelcula en 3 escenas, conseguimos
tener 3 lneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que
veremos y editaremos como si de 3 pelculas diferentes se tratara.

No debemos olvidar que aunque en apariencia sean pelculas distintas, la Lnea de

Tiempo es la misma y que al acabar la primera escena se reproducir la segunda y as
sucesivamente...

Las Escenas se pueden aadir, eliminar, editar... desde el Men Escena al que se
accede desde Ventanas Escena.

Ejercicio : Crear una Pelcula a nuestro gusto

Crea una pelcula que tenga las siguientes propiedades:
1. Un tamao de 300 x 100 px
2. Un color de fondo rojo
3. Un Velocidad de los Fotogramas de 14 fps
Ejercicio 2: Estructurar una Pelcula
1. Abre una nueva pelcula
2. Crea 2 Escenas y llmalas Escena 1 y Escena 2
3. Crea 2 capas en cada una.
4. Llmalas E1_1, E1_2 y E2_1, E2_2
Ejercicio 3: Creando Fotogramas
1. Crea en una pelcula nueva 3 fotogramas clave
2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto
Ejercicio 4: Identificando Fotogramas
1. Dada la siguiente pelcula

Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuerdas para
qu sirve cada uno?
Ejercicio 5: Paneles

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 18

 IESTP OMATE
Animacin de Grficos

1. Abre el Panel Color.

2. Abre el Panel Acciones.
3. Abre el Panel Alinear.
4. Cierra el Programa Flash CS4
5. Vuelve a abrirlo. Qu notas?

UNIDAD III
DIBUJANDO CON FLASH CS4
3.1. EL DIBUJO EN FLASH CS4
Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases. Tras la
fase de "Qu quiero crear y cmo va a ser" viene (normalmente) la fase de diseo grfico. Llevar
lo que ha producido tu imaginacin al papel.
3.2. La barra de Herramientas. Herramientas bsicas

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 19

 IESTP OMATE
Animacin de Grficos

La Barra de Herramientas contiene todas las Herramientas necesarias para el

dibujo.

Herramienta Seleccin (flecha): . Es la herramienta ms usada de todas.

Su uso principal es para seleccionar objetos, permite seleccionar los bordes
de los objetos (con doble clic), los rellenos (con un slo clic), zonas a nuestra
eleccin.

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus

propiedades se vern en el tema ms adelante.

Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las

lneas se crean como en cualquier programa de dibujo, se hace clic y se
arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la
podemos modificar situando el cursor encima de los extremos para estirarlos y
en cualquier otra parte cercana a la recta para curvarla.
Herramienta de forma: Permite dibujar formas predefinidas como las que
aparecen en la imagen, la ltima herramienta utilizada es la que aparece como
icono en la barra de herramientas. Manteniendo pulsado el icono podremos
acceder a las diferentes herramientas de forma. Por ejemplo:

La herramienta valo permite dibujar crculos o elipses de manera rpida y sencilla.
Herramienta Lpiz: Es la primera herramienta de dibujo propiamente dicho. Permite
dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro
gusto. El color que aplicar esta herramienta se puede modificar, bien desde el Panel
Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de
Herramientas.
Herramienta Pincel: Su funcionalidad es parecida a la del lpiz, pero por defecto su
trazo es ms grueso e irregular. Se suele emplear para aplicar rellenos.
Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos que hayamos
creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si
la zona no est delimitada por un borde. El color que aplicar esta herramienta se puede

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 20

 IESTP OMATE
Animacin de Grficos

modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la
Barra de Herramientas.
Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Pincel. Pero su
funcin es la de eliminar todo aquello que "dibuje".

3.3. La barra de Herramientas. Herramientas avanzadas

Herramienta Lazo:

Su funcin es complementaria a la de la herramienta Flecha, pues puede seleccionar

cualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionar
objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no
puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano).

Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones:

. Esto es la herramienta Varita Mgica, tan popular en otros programas de

dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que

aparece es este: para seleccionar Polgono.

Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo

sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las
ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que
queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin.
Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar
las tangentes a ellas. Con un poco de prctica se acaba dominando.

Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta

Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados
con dicha herramienta.

Herramienta Bote de Tinta: Se emplea para cambiar rpidamente el color de un

trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde,

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 21

 IESTP OMATE
Animacin de Grficos

por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores
que hay en la Barra de Herramientas.)

Herramienta Cuentagotas: Su misin es "capturar" colores para que posteriormente

podamos utilizarlos.

3.4. La barra de Herramientas. Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su

uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta
correspondiente sino que adems debemos hacer clic en la lnea o en el objeto que has
dibujado.

Entonces aparecer (o se iluminar si ya estaba presente) un submen como este:

Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros,
es decir, para que en caso de ser posible, sus bordes se superpongan, dando la
sensacin de estar "unidos".

Suavizar: Convierte los trazos rectos en lneas menos rgidas.

Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en ms

rectilneos.

3.5. El panel Color

El Panel Color, como su nombre indica se usa para fabricar nuestros propios colores y para
seleccionar los que ms nos gusten.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 22

 IESTP OMATE
Animacin de Grficos

Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se
encuentran junto a los iconos de las herramientas de Lpiz y de Bote de Pintura. (Si queremos

modificar el color de un borde, pulsaremos sobre el color que est junto al lpiz y si

queremos modificar un relleno, haremos clic en el color que est junto al bote de pintura
.

Al hacerlo aparecer un panel con multitud de colores para que seleccionemos el que ms nos
gusta. Tambin permite introducir el cdigo del color segn el estndar

As mismo se puede determinar el tipo de relleno que aplicaremos a los objetos creados
(mediante la herramienta Bote de Pintura).

Se pueden crear diferentes tipos de relleno:

Slido: Consiste en un relleno formado por un solo color.

Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada
hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro
Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular.
Mapa de Bits: Permite colocar como relleno alguna imagen existente en la pelcula (O
ajena a ella si antes se "importa")

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 23

 IESTP OMATE
Animacin de Grficos

3.6. El panel Muestras

El Panel Muestras sirve para poder ver de un modo rpido y claro los colores de que
disponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems,
cuando creemos un color mediante el Panel Color, podremos agregarlo a nuestro conjunto de
muestras mediante Agregar Muestra (que se encuentra en un men desplegable en la parte
superior derecha del panel Color). Una vez est agregado el color, pasar a estar disponible en
nuestro conjunto de muestras y podremos acceder a l rpidamente cada vez que trabajemos
con nuestra pelcula.

Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para editarla,
podremos usar las muestras que tenamos la ltima vez que trabajamos con dicha pelcula.

Crear Textos Estticos

1. Creamos la pelcula mediante Archivo Nuevo, eligiendo Achivo de Flash (AS 3.0) (por
defecto tendremos un nico fotograma).
2. Selecciona la herramienta Texto del Panel de Herramientas.
3. Haz clic sobre el escenario.

4. Veremos esta imagen . Escribe dentro el texto Bienvenido a mi pgina web.

5. Centra el texto haciendo clic en en el Panel de Propiedades.
6. Cambia la fuente del texto a Verdana seleccionndola en el desplegable

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 24

 IESTP OMATE
Animacin de Grficos

7. Por ltimo cambia el tamao del texto a 45 este controles:

Crea la Bandera Olmpica

1. Dibuja 5 aros.
2. Cmbiale los colores. Por ejemplo, los colores de la bandera olmpica (azul, negro, rojo,
amarillo y verde)
3. nelos de modo que parezcan los aros olmpicos.

Creando Saturno

1. Dibuja un valo
2. Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo).
3. Crea el aro que le rodea.
4. Une los 2 objetos para que parezca el planeta Saturno

Ejercicio de ayuda: Los Aros Olmpicos

Vamos a dibujar los aros olmpicos.
Como siempre, partiremos de un nuevo Documento de Flash (Action Script 3.0), a travs del
men Archivo Nuevo.
1. Seleccionamos la Herramienta valo.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 25

 IESTP OMATE
Animacin de Grficos

2. Trazamos un valo, y para que sea perfectamente circulare, mantenemos pulsada la

tecla Shift.
3. Ahora, podemos intentar crear los otros cuatro aros iguales, o seleccionarlos con la
herramienta Seleccin, copiarlos desde el men Edicin y pegarlos.
4. Una vez estn dibujados, seleccionamos el relleno de cada valo y pulsamos la tecla
Suprimir para eliminarlo. (Igualmente podamos haber seleccionado el color "ninguno"

y posteriormente creado los valos que hubieran aparecido sin color de fondo)
5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos
seleccionndolo en el Panel Color.
6. Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona la
Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo.

Creando Saturno
Vamos a dibujar un planeta parecido a Saturno

1. Seleccionamos la Herramienta valo.

2. Creamos un valo
3. Eliminamos el borde, para ello, hacemos clic en l y pulsamos la tecla Suprimir.
4. Seleccionamos el Relleno del valo y abrimos la opcin Relleno.
5. Seleccionamos la opcin Degradado Radial.

6. Pulsamos en y seleccionamos los colores que

deseemos, (podemos aadir tantos colores como queramos y probar su efecto).
7. Dibujamos el anillo de Saturno, por ejemplo creando otro valo con la forma adecuada.
No lo dibujes sobre el planeta.
8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por
ejemplo, borramos parte del planeta seleccionndola de forma rectangular y pulsando la
tecla Suprimir tal y como vimos en el paso 3.
Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 26
 IESTP OMATE
Animacin de Grficos

9. Separa los dos hemisferios del planeta.

10. Pon el anillo sobre el hemisferio inferior, y despus, arrastra sobre el anillo la otra parte
del planeta.

UNIDAD IV
TEXTOS
4.1. Propiedades de los textos

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 27

 IESTP OMATE
Animacin de Grficos

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto
del escenario en el que queramos empezar a escribir.
El Panel Propiedades contiene las principales propiedades de todos los objetos que
empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos
ver en l todo lo que nos hace falta conocer sobre nuestro texto, respecto a la anterior
versin la interfaz de las propiedades de texto a cambiado considerablemente.

Veamos a fondo el Panel Propiedades:

Posicin y Tamao: Dado que Flash trata los textos

como objetos, stos tambin tienen ancho, altura y coordenadas. Podemos modificarlos
a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse
sin motivo, pues las tipografas son una parte muy importante y deben respetarse.

Familia: Desde aqu, al igual que en los editores de

texto ms comunes podemos seleccionar el tipo de letra o "fuente" que ms nos guste.

Espaciado entre letras: Determina el espaciado entre los

caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para
dar efectos concretos al texto.
Ajuste automtico: Activar esta casilla provoca que la separacin
entre caracteres se realice de modo automtico.

Configuracin: Son las clsicas opciones que

permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el
tamao.

Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar

nuestro texto. Encontramos estas opciones:

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 28

 IESTP OMATE
Animacin de Grficos

Utilizar fuentes de dispositivo: Se emplean las fuentes de la impresora, lo que

hace ms liviano el archivo SWF al no incluir la fuente. Aunque nos exponemos
a que la fuente no est instalada, por lo que se emplear otra. Slo deberamos
de utilizar esta opcin para las ms comunes.
Texto de mapa de bits, no realiza suavizado, ocupando ms tamao y
perdindose resolucin al redimensionar.
Suavizado para animacin, es la mejor opcin cuando pretendemos animar
texto.
Suavizado para legibilidad, favorece la legibilidad, pero no debemos de
emplearla en textos animados.
Suavizado personalizado, nos permite ajustarlo manualmente.

Orientacin: Cambia la orientacin del texto de horizontal a vertical, tanto de

izquierda a derecha como de derecha a izquierda.

Seleccionable: Determina si el usuario pordr seleccionar el texto.

Posicin: Nos permite convertir nuestro texto en subndices o en superdices.

Vnculo: Si queremos que al pulsar

sobre nuestro texto, el usuario vaya a una direccin web, nada ms fcil que escribirla
ah. Flash la asociar al texto que ests escribiendo en ese momento.

Destino: Determina si la URL a la que

el texto hace referencia se cargar en la misma ventana del navegador, en una nueva ...

Comportamiento: Si el texto que

vamos a incluir es dinmico (de lo contrario aparece sin activar), esta opcin nos permite
determinar cmo queremos que aparezcan las lneas (lnea nica, multilnea o multilnea
sin ajuste).

A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible
(dentro del recuadro de texto que hayamos definido).
Centrar: Las lneas se distribuyen a la derecha y a la izquierda del punto medio del
prrafo.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 29

 IESTP OMATE
Animacin de Grficos

A la derecha: Todas las lneas empezarn tan a la derecha como sea posible dentro
del recuadro de texto que hayamos definido).
Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado"
por ninguno de sus lmites.
El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los
sangrados de prrafo y el espacio interlineal.

EJERCICIO: Propiedades del texto

Objetivo.

Crear un texto cualquiera y asignarle las propiedades que ms nos interesen.

Ejercicio paso a paso.

1 Abre el archivo trabajo.fla, creado en la unidad anterior.

2 Creamos una nueva capa (ya veremos ms adelante para que sirven) haciendo clic en el botn
en la lnea de tiempo.

3 Hacemos clic en la Herramienta Texto y despus en el escenario.

4 Veremos esta imagen . Escribe dentro el texto Esto es un texto de prueba.

5 Hacemos clic en el Propiedades, si es que tenamos minimizado este Panel.

6 Haz que el texto se encuentre centrado haciendo clic en

7 Cambia la fuente del texto a Verdana seleccionndola en el desplegable

.

8 Cambia el espaciado entre caracteres del texto a 2 escribindolo en la opcin

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 30

 IESTP OMATE
Animacin de Grficos

9 Por ltimo cambia el tamao del texto a 30 y ponlo en Negrita utilizando estos controles:

TIPOS DE TEXTOS

4.4. Texto esttico

El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo de la animacin. Es

importante que no confundamos la palabra "esttico" con que el texto no se mueva o
malinterpretemos la frase es el texto que no presenta cambios a lo largo de la animacin.

Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el
texto puede estar animado (girar, cambiar de color...) y sin embargo ser esttico. As, un
recuadro de texto en el que pone "Aprende Flash CS4" durante toda la pelcula, es esttico,
aunque dicho texto cambie de posicin, forma o color. Sin embargo, si en ese mismo recuadro
de texto pasa a poner "Con este Curso", este recuadro de texto NO es esttico. Se insistir en
este punto en los ejercicios de evaluacin.

4.5. Texto dinmico

El Texto Dinmico en contraposicin al esttico s que puede cambiar su contenido (adems de

estar animado). Su uso es bastante ms complejo que el del Texto Esttico, ya que cada
recuadro de texto Dinmico puede ser una variable modificable mediante ActionScript, esto
quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante
programacin, lo que nos saca del objetivo de este curso. Un uso comn que suelen tener es el
de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto).

Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el

nmero de lneas que van a tener, se puede introducir texto HTML, se puede aadir fcilmente
un borde al texto o dar nombre a la variable que represente al texto Dinmico.

Una opcin interesante es el botn , que nos permite indicar qu

caracteres incluir en el archivo SWF. Aqu debemos de indicar los carcteres que esperamos que
muestre el texto dinmico.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 31

 IESTP OMATE
Animacin de Grficos

Al editar nuestra pelcula, distinguieremos los textos dinmicos por aparecer enmarcados en una
lnea discontinua.

4.6. Introduccin de texto

El Texto de Entrada o Introduccin de texto tiene bsicamente las mismas propiedades que el
Texto Dinmico, junto con algunas propias de un tipo de texto orientado a la introduccin de
datos por parte de usuario, como por ejemplo el nmero mximo de lneas que puede introducir
en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca
como asteriscos (para las contraseas).

EJERCICIO: Cambiar el tipo de texto

Objetivo.

Crear un texto cualquiera y asignarle el Tipo que ms nos interese.

Ejercicio paso a paso.

1. Abre el archivo trabajo.fla, utilizado en ele ejercicio anterior.

2. Selecciona el texto que creamos en el ejercicio anterior.
3. Hacemos clic en el Panel Propiedades, si es que tenamos minimizado este Panel.
4. Una vez podamos ver el panel seleccionamos el desplegableen la que pondr el tipo de

texto y elegimos el tipo de texto que queramos. Veremos

que, al hacer clic fuera del texto, cambia la lnea que rodea al recuadro de texto,
pasando a ser discontnua y no desapareciendo aunque no escribamos nada dentro.
(Los textos estticos desaparecen si no escribes nada y haces clic en cualquier lugar del
escenario). Esto es lgico, ya que los textos Dinmicos y los de entrada no tienen
porque tener "contenido".

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 32

 IESTP OMATE
Animacin de Grficos

4.7. Incorporar Fuentes

Al crear un archivo de flash, y utilizar texto dinmico o textos de entrada, tenemos que tener
presente que si hemos elegido una fuente que no est disponible en el sistema que se reproduce
la pelcula, se sustituir por otra fuente disponible. Esto es un problema, ya que puede alterar
bastante nuestro diseo.
Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto. Esto
garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentes del
sistema.
Esto slo ser necesario hacerlo para los textos dinmicos, ya que el texto esttico se guarda
como un grfico vectorial, y no habr problemas.
Para incorporar una fuente en la pelcula hacemos clic derecho en alguna parte vaca de la
Biblioteca, y seleccionamos Nueva fuente.
Se abrir el siguiente cuadro de dilogo:

En el desplegable Fuente seleccionamos la fuente que deseamos utilizar. Seleccionamos los

estilos que vamos a utilizar (Negrita, Cursiva y Tamao).
El nombre que le demos se mostrar en la Biblioteca y estar lista para utilizarse.
Cuando creemos un campo de texto dinmico o de entrada, seleccionamos nuestra fuente, que
aparecer sealada con un asterisco (*).

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 33

 IESTP OMATE
Animacin de Grficos

Ejercicios unidad 4: Textos

Ejercicio 1: Crear Textos Estticos

1. Crea una pelcula con 1 fotograma.

2. Crea un objeto de tipo texto esttico que diga: Bienvenido a mi pgina web.
3. Utiliza la fuente Verdana a un tamao de 45.

UNIDAD V.
SONIDOS

5.1. Importar Sonidos

Para importar un sonido haz clic en el men Archivo Importar Importar a biblioteca.

Se abrir el cuadro de dilogo de Importar a biblioteca. All debers seleccionar en Tipo de

archivo Todos los formatos de sonido.

Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu pelcula.
Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar.

El sonido estar listo para usarlo donde quieras, podrs encontrarlo en la Biblioteca (men
Ventana Biblioteca)

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 34

 IESTP OMATE
Animacin de Grficos

5.2. Propiedades de los Sonidos

Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en seleccionar el
fotograma en el que queremos reproducir el sonido, tras hacer esto, el Panel Propiedades toma
el siguiente aspecto:

Veamos las partes que tiene este panel.

Nombre: En este desplegable nos aparecern las canciones que tenemos importadas,
deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (en el
siguiente punto veremos cmo insertarlo). Si no queremos reproducir sonido,
seleccionamos Ninguno.

Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo
que el sonido pase del canal izquierdo al derecho (esto crea la sensacin de que el
sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos
de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc...
Si deseamos aadir complejos efectos sonoros, deberemos tratar adecuadamente el
sonido con algn programa creado especficamente para este propsito antes de
importarlo.

En el punto Editar Sonidos se tratar en ms profundidad estos efectos.

Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestro
sonido, estas son las opciones que tenemos:

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 35

 IESTP OMATE
Animacin de Grficos

Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defecto
y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en
el que est situado. Tambin se puede sincronizar el sonido con botones y los dems
tipos de smbolos. El sonido se repetir completamente, y si lo ejecutamos varias veces,
se reproducir de nuevo, aunque no hubiese acabado, provocando que el sonido se
solape.
Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya se
est reproduciendo, no se reproduce de nuevo.
Detener: Detiene el sonido seleccionado.
Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado,
por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el
sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de
que la pelcula se corta de un modo muy brusco (pensar en que se considera normal que
una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce,
produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante una pelcula. En esta situacin, es muy
recomendable que el sonido y las imgenes estn sincronizadas.

Repetir: Determina el nmero de veces que se reproducir el sonido segn lo que

escribas en la caja de texto de la derecha. Tambin puedes seleccionar Reproducir
indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente
fotograma clave.

No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que al

estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y
los fotogramas que las contengan) se dupliquen tambin, aumentando
considerablemente el tamao de la pelcula.

5.3. Insertar un Sonido

Una vez importado el sonido, vamos a configurarlo para que se reproduzca como queramos:

Sonido en la lnea de tiempo.

Veamos cmo hacer que el sonido se reproduzca con nuestra pelcula.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 36

 IESTP OMATE
Animacin de Grficos

Lo mejor ser crear una nueva capa para cada sonido. As lo controlaremos fcilmente.
Despus, arrastramos el sonido de la biblioteca al escenario, sobre la nueva capa.

Con el primer fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la

seccin de Sonido.

Seleccionamos el Nombre del archivo, los efectos deseados, y las veces que lo queremos
Repetir.

En el men Sinc. Seleccionamos la opcin de sincronizacin deseada. Por ejemplo, si queremos

que cada vez que se pase por ah, se lance un sonido breve, porque por ejemplo se mueve un
objeto, seleccionaremos evento. En cambio, si queremos iniciar la reproduccin el sonido a partir
de ah, marcamos Inicio. Si queremos iniciar el sonido en un fotograma ms adelante,
seleccionamos Detenido, y lo iniciamos creando un fotograma clave, seleccionado el mismo
sonido.

As representa Flash los sonidos insertados en Fotogramas

Por defecto, Flash entiende que queremos reproducir el sonido completo, si no por que
importarlo todo cuando genera un archivo ms grande? Por supuesto, podemos hacer que el
sonido se detenga en un fotograma determinado. Para ello, creamos un fotograma clave, y con
el mismo sonido seleccionado, elegimos Detener en el desplegable Sinc.

Otra sera utilizar la opcin Flujo.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 37

 IESTP OMATE
Animacin de Grficos

Al seleccionar esta opcin, el sonido se reproducir hasta que se acabe o llegue a un fotograma
clave, siguiendo la pelcula. Slo es aconsejable esta opcin si realmente la necesitamos.

TRABAJANDO CON SONIDOS

Objetivo.

Insertar un sonido que reproduzca desde el fotograma 5 al 15.

Ejercicio paso a paso.

1. Creamos la pelcula mediante Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0)
(por defecto tendremos un nico fotograma).
2. Creamos una nueva capa (icono Nueva capa de la lnea de tiempo) y la seleccionamos.
3. Insertamos un nuevo fotograma clave en la lnea de tiempo en el fotograma 5 y 15
(desde el Men Insertar Lnea de Tiempo Fotograma Clave, o pulsando F6).
4. Seleccionamos Archivo Importar Importar a Biblioteca, que se encuentra en el
Men Archivo.
5. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el archivo
sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.
6. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana Biblioteca)
y comprobamos que se encuentra all.
7. Seleccionamos el fotograma 5 (donde queremos insertar el sonido).

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 38

 IESTP OMATE
Animacin de Grficos

8. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el

escenario (hasta el fotograma actual).
9. Por defecto, en propiedades, la opcin Sinc. est marcada como Evento. Prueba la
pelcula (tecla Intro) y comprobars que el sonido se reproduce hasta al final. Pulsa
varias veces Intro y comprobars que el sonido se reproduce varias veces solapndose.
10. En el despegable Sinc de las Propiedades, cambia el valor a Iniciar. Repite el paso
anterior y comprueba que el sonido no se vuelve a iniciar si an no ha acabado.
11. Selecciona el fotograma clave 15.
12. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos utilizando.
13. En la opcin Sinc selecciona Detener.
14. Prueba la pelcula y comprobars que ahora se detiene al llegar la fotograma 15

5.4. Editar Sonidos

Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es
limitada. Aun as, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para
cualquier animacin que queramos realizar. Disponemos de estos efectos:

Canal Izquierdo: El sonido tan slo se escuchar por el altavoz izquierdo.

Canal Derecho: El sonido tan slo se escuchar por el altavoz derecho.
Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el
altavoz izquierdo para luego pasar al derecho.
Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el
altavoz derecho para luego pasar al izquierdo.
Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente.
Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente.
Personalizado: Esta opcin nos permite "editar" el sonido de un modo rpido y sencillo.
Desde este editor podemos decidir qu volumen tendr nuestro sonido y en qu altavoz.
Podemos crear los efectos anteriores ajustndolos a nuestro gusto y podemos crear
efectos ms complejos a nuestra medida.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 39

 IESTP OMATE
Animacin de Grficos

Esta es la apariencia del cuadro de dilogo Personalizar Sonido. La parte superior representa el
canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una lnea de tiempo
que nos indica el tiempo de sonido transcurrido en cada punto.

Las lneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar
este volumen.

En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen est al mximo),

pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este
efecto equivaldra a un Aumento Progresivo en el canal derecho).

Ejercicio 1: Importar Sonidos

1. Crea una pelcula con 1 fotograma.

2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.
3. Imprtalo a tu pelcula.
4. Comprueba que est disponible en la Biblioteca.
5. Inserta el sonido importado en el fotograma 1.
6. Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa CTRL+
ENTER (Esta combinacin de teclas te permite "probar" la pelcula).
7. Consigue que el sonido deje de escucharse al llegar la pelcula al fotograma 5.
8. Consigue que vuelva a escucharse en el fotograma 10, y se reproduzca todo el sonido.

Ejercicio 2: Editar Sonidos

1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco a poco
vaya aumentando de volumen.

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 40

 IESTP OMATE
Animacin de Grficos

2. Modifica el sonido de modo que al final del mismo, parezca que el sonido pasa de un
altavoz al otro.
Ejercicios unidad 5: Sonidos
1. Creamos la pelcula mediante Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0)
(por defecto tendremos un nico fotograma) .
2. Seleccionamos Importar Importar a Biblioteca, que se encuentra en el Men Archivo.
3. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el archivo
de sonido y pulsamos Abrir.
4. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana Biblioteca)
y comprobamos que se encuentra all.
5. Si no se encuentra all, revisaremos los pasos dados, pues algo no hemos hecho bien.
6. Creamos una nueva capa y la seleccionamos.
7. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario (hasta el fotograma actual).
8. Pulsamos Enter y el sonido deber escucharse.
9. Alargamos el fotograma actual hasta el nmero 4 (insertando fotogramas normales
desde el Men Insertar Lnea de Tiempo Fotograma).

10. Insertamos un nuevo fotograma en la lnea de tiempo. En la posicin 5 (desde el Men

Insertar Lnea de Tiempo Fotograma Clave).
11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4.
12. En la opcin Sinc seleccionamos Flujo.
13. Acabamos de conseguir que el sonido slo se reproduzca cuando est en los
fotogramas indicados.
14. Insertamos un nuevo Fotograma Clave en la posicin 10.
15. Con el fotograma 10 seleccionado, vamos al panel Propiedades, y en las opciones de
Sonido, elegimos el Nombre del archivo que estamos utilizando.
16. En la opcin Sinc seleccionamos Inicio

Debe quedar parecido al grfico:

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 41

 IESTP OMATE
Animacin de Grficos

Prof. Edwin R. Yquiapaza Len ( eril_ls@hotmail.com) Pgina 42