Apuntes Producción PDF

SUBMODULO II
Producción de animaciones con

elementos multimedia
CAPACITACION EN INFORMÁTICA
SEXTO SEMESTRE
SUBMODULO II
Producción de animaciones con elementos multimedia SUBMODULO II
Contenido
Página de Inicio .....................................................................................................................8
Entorno/Interface .................................................................................................................9
Herramientas .................................................................................................................. 10
Barra de Menús............................................................................................................... 10
Barra de herramientas principal ...................................................................................... 11
Línea de tiempo............................................................................................................... 11
Escena............................................................................................................................. 12
Controlador ..........................................................................¡Error! Marcador no definido.
Propiedades .................................................................................................................... 12
Paneles de Color .............................................................................................................. 12
Acciones.......................................................................................................................... 12
Explorador de película ..........................................................¡Error! Marcador no definido.
Operaciones básicas para el manejo de flash ...................................................................... 13
Crear un nuevo documento de Flash ................................................................................ 13
Guardar un documento ................................................................................................... 13
Publicar un documento.................................................................................................... 13
Importar un documento .................................................................................................. 13
Utilización de los Paneles en Flash ...........................................¡Error! Marcador no definido.
Procedimiento para abrir un panel: ......................................¡Error! Marcador no definido.
Procedimiento para cerrar un panel, siga uno de estos procedimientos:¡Error! Marcador no
definido.
Procedimiento para expandir o contraer un panel a su barra de título: ¡Error! Marcador no
definido.
Procedimiento para cerrar todos los paneles: .......................¡Error! Marcador no definido.
Panel de Herramientas........................................................................................................ 14
Creación de gráficos ............................................................................................................ 15
Herramientas de selección............................................................................................... 15
Herramienta de subselección........................................................................................... 15
Herramienta de transformación libre .............................................................................. 15
Producción de animaciones con elementos multimedia.
Herramienta de transformación de relleno ...................................................................... 15

3
Herramienta Línea .......................................................................................................... 16
Herramienta Lazo............................................................................................................ 16
Herramienta Pluma: ........................................................................................................ 16
Herramienta Texto .......................................................................................................... 16
Herramienta Óvalo.......................................................................................................... 16
Herramienta Rectángulo: ................................................................................................ 16
Herramienta Lápiz........................................................................................................... 17
Herramienta de Brocha ................................................................................................... 17
Herramienta Bote de Tinta .............................................................................................. 17
Herramienta Cubo de Pintura .......................................................................................... 18
Herramienta de cuentagotas ........................................................................................... 18
Herramienta de borrador ................................................................................................ 18
Herramienta de Acercamiento (ZOOM) ........................................................................... 18
Herramienta de Mano ..................................................................................................... 18
Modificación de características de las formas ..................................................................... 18
Modificación de los colores ............................................................................................. 19
Aplicar animaciones a un dibujo .......................................................................................... 21
Escenas ........................................................................................................................... 21
Línea de tiempo............................................................................................................... 22
Fotogramas..................................................................................................................... 23
Para insertar fotogramas en la línea de tiempo, sigue uno de estos tres procedimientos: 23
Capas .................................................................................................................................. 23
Creación de un símbolo....................................................................................................... 25
Tipos de comportamiento de los símbolos ....................................................................... 25
Símbolos gráficos ........................................................................................................ 25
Símbolos de botón ...................................................................................................... 25
Símbolos de clip de película ...................................................................................... 26
Procedimiento para crear un grafico ............................................................................... 26
Inserción de imágenes de archivo ....................................................................................... 26
Procedimiento para importar una imagen al panel de biblioteca ..................................... 27
Utilizar las imágenes importadas para crear nuestros propios dibujos. ............................ 27
Animación Interpolada .................................................................................................... 28

4
Crear una animación interpolada .................................................................................... 28
Procedimiento para crear una animación interpolada ..................................................... 28
Procedimiento para crear una animación por medio de fotogramas ................................ 28
Procedimiento para crear una animación por medio del panel de propiedades ................ 29
Inserción de texto a las escenas .......................................................................................... 29
Tipos de Textos ............................................................................................................... 31
Texto Estático ................................................................................................................. 31
Texto Dinámico ............................................................................................................... 32
Texto de entrada ............................................................................................................. 32
Creación de imágenes GIF ................................................................................................... 32
Procedimiento para exportar tu animación a formato .GIF .............................................. 33
Manipulación de botones en Flash ..................................................................................... 34
Procedimiento para insertar un botón desde la librería .................................................... 34
Procedimiento para crear un Botón ................................................................................. 35
Alineación de botones ..................................................................................................... 36
Programar las propiedades de los botones ...................................................................... 37
Programar acciones de los botones ................................................................................. 37
Inserción de sonidos en Flash .............................................................................................. 41
Importar Sonidos de Flash ............................................................................................... 42
Propiedades de los Sonidos ............................................................................................. 43
Partes que integran este panel ........................................................................................ 43
EVALUACIÓN DIAGNÓSTICA.
Contesta las siguientes preguntas en tu cuaderno:
1. ¿Cómo defines animación?

2. Conoces algún software para crear animaciones.
3. Antes de existir los software de animación. ¿Cómo crees que se hacían éstas?
4. ¿Qué entiendes por multimedia?
5. Que diferencia existe entre un gráfico de vectores y un gráfico de mapa de bits?
6. ¿Qué formatos de gráficos conoces?
INTRODUCCIÓN.
6
Adobe Flash es una herramienta de edición con la que los diseñadores y desarrolladores
pueden crear presentaciones, aplicaciones y otro tipo de contenido que permite la
interacción del usuario. Los proyectos de Flash pueden abarcar desde simples animaciones
hasta contenido de vídeo, presentaciones complejas, aplicaciones y cualquier otra utilidad
relacionada. En general, los fragmentos independientes de contenido creados con Flash se
denominan aplicaciones, aunque se trate solamente de una animación básica. Se pueden
crear aplicaciones de Flash con una amplia variedad de contenido multimedia que incluye
imágenes, sonido, vídeo y efectos especiales.
Historia de Adobe Flash.
En 1993 Jonathan Gay y Charly Jackson lanzan FutureSplash, un software de dibujo.

En 1995 tratan de venderlo a Adobe, pero a este no le interesa comprarlo
En 1996 Adobe compra el software y lo nombra Adobe Flash 1.0
Adobe lanza 8 versiones de flash.
En 2005 Adobe compra Adobe, incluyendo flash y lanza sus versiones Adoble flash CS3,
CS4 (2008), CS5 y CS6.
A partir del 2016 surge Adobe anímate CC para sustituir a Adobe flash.
Diferencia entre Gráfico Vectorial y Mapa de Bits
La principal diferencia entre los Bitmaps y los Gráficos Vectoriales está en su tamaño. Los
gráficos vectoriales tienen una ventaja de gran importancia: ocupan mucho menos espacio en
disco o en memoria y, por tanto, necesitan mucho menos tiempo para descargarlos desde una
aplicación o página web.
La explicación de este hecho se puede ver en la forma en la que están creados y

representados cada uno de los dos tipos de gráficos:
Los bitmaps o mapas de bits están formados por grandes "rectángulos de

datos" (matrices) que contienen información sobre cada uno de los puntos (pixels) por
los que está formado el gráfico, y que se corresponde aproximadamente con la percepción
que nosotros vemos de ellos en nuestra pantalla.
A simple vista no apreciamos los pixels debido al pequeño tamaño que tienen en general,
7
pero si ampliamos mucho un Bitmap los podemos observar como cuadrados de color, y
apreciamos un aspecto dentado en las curvas.
La información que almacenan estas matrices son las características de cada pixel. Las
características que se almacenan sobre los pixels son sus coordenadas dentro del gráfico y
su color.
Así, nuestro PC procesa esa información, y genera la imagen en el monitor u otro

dispositivo de salida, indicando qué color se debe poner en cada coordenada de la imagen.
Los pixels (cuadraditos), o unidades más pequeñas que forman una imagen, no son
apreciables a simple vista en una imagen de calidad, pero sí con una ampliación.
Los pixels no tienen siempre el mismo tamaño ni se tienen porque encontrar en mismo
número en imágenes de las mismas dimensiones. La calidad de una imagen viene dada por
número de pixels en que dividamos una imagen (normalmente esto se mide en puntos por
pulgada o dpi, de hecho una cámara digital tiene mayor resolución cuantos más megapíxel
puede captutar) y el número de colores que puedan tener y, evidentemente, ocuparán más
espacio en disco en la medida que dicha calidad aumente. Como consecuencia de esto
aquellos gráficos con más calidad y número de pixels serán mucho más costosos de
reproducir y transformar para nuestra aplicación o reproductor gráfico y más lentos en la

8
descarga vía web.
Entre los tipos de archivo de mapa de bits más comunes tenemos: JPG, PCX, PNG,
TIFF, GIF, BMP, ...
Como hemos visto, para generar un gráfico de mapa de bits, nuestro PC tiene que
almacenar y trabajar con una gran cantidad de información por la necesidad de mantener los
datos de cada pixel.
Sin embargo, para representar una imagen vectorial se considera que el gráfico está
formado por un conjunto de vectores o líneas.
Esto es una gran ventaja, ya que una línea, que en el caso de un bitmap estaría compuesta
por muchos pixels, en una imagen vectorial solo se necesita almacenar información sobre su
principio, su final y su aspecto. Esto es así con las líneas y con cualquier figura más compleja.
Por ejemplo, podríamos representar un círculo simplemente guardando la información de su
centro y su radio, además de indicar el color de contorno y el de fondo. Aquí reside el secreto
del reducido tamaño de los gráficos de este tipo.
Además, si aumentamos el tamaño de la imagen, sólo hay que volver a generarla a partir
de sus coordenadas, lo que la mostrará perfectamente nítida por mucho que la aumentemos.
¿Cómo trabaja Flash CS4?
Flash CS4, aunque permite trabajar también con bitmaps, utiliza gráficos vectoriales para
realizar sus animaciones. Esto permite que se generen animaciones de muy alta calidad y
dimensiones, reduciendo mucho su tiempo de carga cuando intentamos visualizarlas en
nuestro navegador web.
Página de Inicio
Para poder ingresar al programa de Adobe Flash CS4 podemos hacerlo de las siguientes
formas:
1. Dar clic en Inicio/ Todos los programas/ Adobe Flash CS4 professional.
2. Dar clic en el icono de programa que aparece al fondo de la pantalla.
3. Dar clic en el icono de programa de flash CS4 que aparece a un costado de la barra
9 de tareas.
Posteriormente aparecerá la siguiente pantalla
La página inicial muestra tres columnas correspondientes a:
a) La apertura de archivos recientes: Donde nosotros podemos visualizar los

últimos documentos creados en la aplicación de Adobe Flash, también
podemos ver el cuadro de dialogo Abrir si se hace clic en el icono Abrir.
b) Creación de nuevos proyectos: En esta sección nosotros podemos crear nuevos

documentos o aplicaciones que se adapten a nuestras necesidades. Si
deseamos crear rápidamente un nuevo archivo, lo única que debemos hacer es
dar clic en el tipo de archivo que aparece en la lista.
c) Bloque de plantillas prediseñadas para crear algunas aplicaciones, por ejemplo

podemos crear: calendarios, cuestionarios, agendas personales,
presentaciones, etc.
Entorno/Interface
Para tener acceso por primera vez a un nuevo documento debemos de dar clic en la
opción archivo de flash (AS 3.0), donde aparecerá una ventana similar a la siguiente:
10
En versiones recientes, Adobe Flash ha incluido en su entorno nuevas características para

acceder directamente a herramientas y paneles de uso frecuente, facilitando los procesos
para el desarrollo de diseños y aplicaciones. Los elementos más relevantes de la ventana
de trabajo de Adobe Flash son los siguientes:
Herramientas
Contiene las simbologías relacionadas al diseño gráfico, con las cuales podemos crear
nuestros propios diseños que van desde lo más simple, hasta diseños totalmente
profesionales. Inicialmente se encuentra en la parte derecha de la ventana pero se
puede mover a otra posición de la ventana si así se desea.
Barra de Menús
Esta barra despliega los diferentes menús y submenús que ejecutan los comandos
relacionados para cada actividad. Para tener acceso a ello también puedes hacer uso
del teclado presionando las teclas ALT y la letra que aparece subrayada.
Barra de herramientas principal

11
Contiene una simbología estándar, que permite la ejecución directa de comandos para el
manejo de archivos, edición, copia, etc.
El programa de Flash ofrece una opción para personalizar la barra de herramientas,

mediante el siguiente procedimiento:
1. Edición
2. Personalizar panel de herramientas,
3. Posteriormente aparecerá una ventana con las herramientas
disponibles, como la siguiente:
Únicamente debes seleccionar la herramienta deseada y presionar el botón

Añadir o en su defecto Quitar.
Línea de tiempo
La línea de tiempo
organiza y controla el
contenido de un
documento a través
del tiempo en capas y fotogramas. Al igual que en un largometraje, los documentos de
Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película
apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que
aparece en el escenario. Los componentes principales de la línea de tiempo son las capas,
los fotogramas y la cabeza lectora.
Un fotograma viene a ser en Flash un instante o momento de una película.
Cada capa es un nivel en el que podemos dibujar, insertar sonidos, textos...
con independencia del resto de capas. Hay que tener en cuenta que todas las capas comparten la
misma Línea de Tiempo y por tanto, sus distintos fotogramas se reproducirán simultáneamente.
Escenario
Equivale al área de trabajo donde se incluyen los elementos que 12
conforman un diseño, dependiendo de la aplicación, estos
aparecerán en un orden determinado por la posición de la
cabeza lectora en la línea de tiempo.
Propiedades
Cambia en relación al elemento activo, muestra las características

propias y permite la modificación de sus componentes de acuerdo a
las necesidades del documento generado; aplica a escenas,
fotogramas, símbolos, sonidos, etc.
Acciones
El panel Acciones permite crear y editar código ActionScript para un objeto o
fotograma. El panel Acciones se activa cuando se selecciona una instancia de un
fotograma, botón o escena.
Acciones cambia a:
Acciones – Botón
Acciones - Escena
Acciones- Fotograma,
Según el elemento que esté seleccionado.
Operaciones básicas para el manejo de flash

13
Como en cualquier otro documento flash te permite realizar las operaciones básicas como
Abrir, Nuevo, Guardar, Imprimir, Publicar, Importar, Exportar, etc.
Crear un nuevo documento de Flash
1. Seleccione Archivo > Nuevo.

2. En el cuadro de diálogo Nuevo documento, Documento de Flash aparece
seleccionado de forma predeterminada. Dar clic en la opción aceptar.
3. En la parte inferior de la escena aparece el panel de propiedades, el tamaño actual
del escenario es de (550 x 400 píxeles) y podrás configurar el tamaño deseado.
4. El color de fondo predeterminado del escenario es blanco. Para cambiar el color
solo tienes que dar clic en la muestra de fondo y selecciona un color diferente.
Guardar un documento
1. Selecciona Archivo> Guardar como…> y asigna el nombre del archivo. Al guardar tu

documento este se guardara con la extensión .FLA
2. Recuerda que cada que realices algún cambio tienes que guardar para evitar
perder cambios.
3. Al terminar de realizar tu diseño es importante que lo ejecutes por última vez para
generar el archivo con la extensión .SWF, esta es la versión que se puede publicar.
Publicar un documento
Una vez terminado el archivo flash y generado el archivo .SWF, este ya está preparado
para publicarse en una página Web. De la misma manera puedes transformar tus archivos
.SWF en archivo HTMAL, GIF, JPG, PNG entre otras.
Importar un documento
Cuando se trabaja con Flash, a menudo se importan activos al documento. Tal vez tenga
un logotipo de empresa o un gráfico que el diseñador le ha suministrado para el trabajo.
Puede importar varios activos en Flash, incluidos archivos de sonido, vídeo, imágenes de
mapa de bits y otros formatos de gráfico (como PNG, JPEG, AI o PSD).
Los gráficos importados se guardan en la biblioteca del documento. La biblioteca

almacena tanto los activos importados en el documento como los símbolos creados con 14
Flash. Un símbolo es un gráfico vectorial, un botón, una fuente, un componente o un clip
de película que se crea una vez y se puede volver a utilizar varias veces.
Panel de Herramientas
Las herramientas del panel Herramientas permiten dibujar, pintar, seleccionar y modificar
ilustraciones, así como cambiar la visualización del escenario. El panel Herramientas se
divide en cuatro secciones:
 La sección de herramientas contiene las herramientas de dibujo, pintura y

selección.
 La sección de visualización contiene herramientas para ampliar y reducir, así como
para realizar recorridos de la ventana de la aplicación.
 La sección de colores contiene modificadores de los colores de trazo y relleno.
 La sección de opciones muestra los modificadores de la herramienta actualmente
seleccionada. Los modificadores afectan a las operaciones de pintura o edición de
la herramienta.
15
Creación de gráficos
Con las formas y diseños de la barra de herramientas puedes realizar tus propias
creaciones.
Para poder crear un gráfico en especial solo tenemos que hacer uso de las herramientas
que nos proporciona el programa de flash, a continuación se definen cada una de las
herramientas disponibles.
Herramientas de selección
Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos.

Permite seleccionar los bordes de los objetos, los rellenos (con un sólo clic) y los bordes
(con doble clic).
Herramienta de subselección
Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o

ajustar los vértices que componen los objetos creados con dicha herramienta. De
manera que podemos visualizar los nodos o puntos de anclaje y ajustar nuevamente
nuestra creación hasta obtener el diseño deseado.
Herramienta de transformación libre
Esta herramienta nos permite seleccionar nuestro objeto para posteriormente

cambiarlo de tamaño, podemos agrandar o disminuir su tamaño, por otro lado esta
herramienta también nos permite girar nuestros objetos. Para poder activar esta opción
solo tienes que dar un clic sobre el objeto deseado.
Herramienta de transformación de relleno
Esta opción se puede utilizar para los colores degradados de manera que nosotros
podamos cambiar el punto de partida de un color, a su vez decidir qué color es el que va a
predominar y cuál es el punto de partida.
Herramienta Línea
16
Permite crear líneas rectas de un modo rápido. Las líneas se crean como en
cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que
llegue la línea recta. Una vez creada la podemos modificar sin más que seleccionar
situar el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana
a la recta para curvarla.
Herramienta Lazo
Su función es complementaria a la de la Herramienta Flecha, pues puede

seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha sólo puede
seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la
Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la
selección a mano).
Herramienta Pluma:
Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Su empleo

consiste en hacer clic en los lugares que queramos definir como vértices de los
polígonos, lo que nos asegura una gran precisión. Para crear curvas, hay que señalar los
puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de
práctica se acaba dominando
Herramienta Texto
Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el

tema siguiente.
Herramienta Óvalo
La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla.
Herramienta Rectángulo:
Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo

de objetos que crean. Con esta herramienta se pueden crear cuadrados y polígonos,
para activar cualquiera de las dos solo tienes que dar clic en el icono y posteriormente
17 seleccionar el tipo de objeto que desees.
En el caso de la opción polígono si requieres crear imágenes tipo estrella únicamente te

tienes que ubicar en el panel de propiedades y elegir el botón opciones, donde podrás
elegir el número de lados y el estilo (estrella o polígono).
Herramienta Lápiz
Permite dibujar líneas 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 de Brocha
Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se

suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.
Herramienta Bote de Tinta
Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos,

si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel
Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de
Herramientas.)
Herramienta Cubo de Pintura

18
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 modificar,
bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en
la Barra de Herramientas.
Herramienta de cuentagotas
Su misión es "Capturar" colores para que posteriormente podamos utilizarlos.

Puedes capturar solo el contorno o el relleno.
Herramienta de borrador
Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de

eliminar todo aquello que "dibuje".
Herramienta de Acercamiento (ZOOM)

Esta herramienta nos permite aumentar o reducir la visualización del escenario.
Herramienta de Mano
Al aumentar el tamaño de visualización del escenario, es posible que no se vea todo
su contenido. La herramienta Mano permite desplazar el escenario para cambiar la
visualización sin tener que cambiar el grado de aumento.
Modificación de características de las formas

Al momento de crear un gráfico inmediatamente en el panel de propiedades aparecen las
características propias, entre las cuales se encuentran: Posición X, Y, Longitud , color de
contorno, color de relleno, ancho de contorno, tipo de contorno, etc.
19
Al modificar en esta área los parámetros puedes observar cómo cambia tu forma, si lo que
quieres es cambiar la posición de la forma únicamente tienes que cambiar los valores de
las coordenadas y las coordenadas .
En caso de requerir cambiar el ancho únicamente tienes que cambiar los valores en
y el alto en .
Esta opción nos permite cambiar el color del contorno
Aquí puedes cambiar el color del relleno o en su defecto anular el relleno,

como se muestra en el icono del ejemplo.
Al dar clic en la pestaña que se encuentra al costado

derecho de la línea de solido, se encuentran toda la gama de
contornos disponibles para el programa de Adobe Flash. Lo
único que tienes que hacer es seleccionar el contorno de tu
preferencia.
En esta opción podemos cambiar el ancho de contorno, únicamente tienes que

asignar un número, recuerda que entre más grande sea mayor va a ser el grosor del
contorno.
Modificación de los colores

El Panel Mezclador de Colores usa para fabricar nuestros propios colores y para
seleccionar los que más nos gusten.
Para seleccionar un color determinado, bastará

con hacer clic en las pestañas que se encuentran
junto a los iconos de las Herramientas de Lápiz y
de Bote de Pintura. (Si queremos modificar el color
de un borde, pulsaremos sobre la pestaña que
está junto a la Herramienta Lápiz y si queremos
modificar un relleno, haremos clic en la pestaña
que está junto a la Herramienta Bote de Pintura.)
Al hacerlo aparecerá un Panel con multitud de colores para que seleccionemos el que
más nos gusta. También permite introducir el código del color según el standard que 20
establece el HTML.
Contamos con tres tipos de Rellenos que podemos aplicar a nuestros diseños
Sólido: 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

escena (O ajena a ella si antes se "importa")
21
Aplicar animaciones a un dibujo

Antes de aplicar la animación a un dibujo es muy importante conocer los elementos
básicos con los que debes de trabajar, así como los procedimientos básicos para:
Crear escenas
Crear capas
Crear fotogramas
Escenas
El área de trabajo se conoce como el nombre de escena, cada documento puede tener
una o más escenas a la vez.
Procesos de Inserción de Escenas
a) Insertar / Escena
b) Ventana / Otros paneles / Escena, aquí aparecerá la
siguiente ventana, donde podrás agregar, eliminar o
copiar escenas.
Conforme vayas insertando escenas están aparecerán
en orden ascendente dentro de la ventana de Escena.
Para poder observar la escena con la que estás trabajando esta aparece en la parte
superior de la línea de tiempo.
22
Para poder cambiar de Escena solo hay que seleccionar la requerida desde el controlador
de escenas.
Línea de tiempo
Dentro de la línea de tiempo tenemos las capas de un documento y aparecen en una
columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada
capa aparecen en una fila a la derecha del nombre de la capa.
El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo

indica los números de fotograma. La cabeza lectora indica el fotograma actual que se
muestra en el escenario. Mientras se reproduce el documento de Flash, la cabeza lectora
se desplaza de izquierda a derecha de la línea de tiempo. La información de estado de la

23 línea de tiempo situada en la parte inferior de la misma indica el número del fotograma
seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el
fotograma actual. El menú emergente de visualización de fotogramas muestra en
miniatura los objetos de cada capa dependiendo de la ubicación de la cabeza lectora.
Fotogramas
Dentro de la línea de tiempo tenemos tres tipos de fotogramas, cada uno de ellos realiza
una tarea en específico.
Fotograma Nuevo F5
Fotograma Clave F6
Fotograma Clave Vacio F7
Para insertar fotogramas en la línea de tiempo,

sigue uno de estos tres procedimientos: Recuerda que las capas y el
buen manejo de estas
Para insertar un fotograma nuevo, selecciona contribuyen al desarrollo
Insertar > Línea de tiempo >Fotograma. eficaz de un diseño,
Para crear un fotograma clave nuevo, elije mediante el uso de varias
Insertar > Línea de tiempo >Fotograma clave escenas puedes lograr tener
mayor impacto. Es
Para crear un nuevo fotograma clave vacío, elija
importante asignarle
Insertar > Línea de tiempo> Fotograma clave vacío
nombre a las capas de
acuerdo a lo que va a
Capas contener, de esta manera
podrás identificar
Las capas son como hojas de acetato transparente apiladas rápidamente un objeto,
símbolo, etc.
en el escenario. Las capas ayudan a organizar las
ilustraciones de los documentos. Los objetos de una capa
pueden dibujarse y editarse sin que afecten a objetos de
otras capas. Cuando una capa está vacía, las capas situadas debajo pueden verse a través
de ésta. 24
Para dibujar, pintar o modificar una capa o una carpeta, primero se debe seleccionar en la
línea de tiempo para activarla. Un icono con forma de lápiz
junto a una capa o carpeta de la línea de tiempo indica que
la capa o carpeta está activa. Sólo puede haber una capa
activa en cada momento (aunque se pueda seleccionar más
de una capa a la vez).
Inicialmente, un documento de Flash contiene una sola

capa. Puedes añadir más capas para organizar las
ilustraciones, la animación y los demás elementos del documento. El número de capas
que pueden crearse sólo está limitado por la memoria del equipo. Las capas no aumentan
el tamaño del archivo SWF publicado. Sólo los objetos que se ubican en las capas
aumentan el tamaño del archivo. Asimismo, es posible ocultar, bloquear o reordenar
capas.
También puede organizar y administrar capas creando carpetas de capas y colocando las
capas en ellas. Las carpetas de capas se pueden expandir o contraer en la línea de tiempo
sin que ello afecte a lo que se muestra en el escenario. Es aconsejable utilizar capas o
carpetas distintas para archivos de sonido, ActionScript, etiquetas y comentarios de
fotogramas. De este modo encontrará estos elementos con mayor facilidad cuando tenga
que editarlos.
A continuación se muestran las diferentes operaciones que se pueden realizar con las
capas que componen cada escena de Flash.
ICONO FUNCION
Esta opción nos permite mostrar u ocultar alguna capa
Bloquea o desbloque la capa, de manera que si se encuentra
bloqueada no se puede realizar ninguna modificación.
Al activar esta opción en una capa determinada solo muestra los
contornos de los objetos.
Esta opción permite crear carpetas en donde podemos organizar las
capas, de manera que podamos ubicarlas más fácilmente.
Nos permite la creación de capas guía.
Al dar clic sobre este icono aparecerá una capa, de tal manera que
25 cuantas veces des clic este mismo número de capas aparecerá.
Este icono nos indica que la capa se puede modificar.
Esta opción nos permite eliminar capas, solo tenemos que

seleccionar la capa a eliminar y enseguida presionar el icono.
Creación de un símbolo
Un símbolo es un objeto creado en Flash. Un símbolo puede ser un gráfico, un botón o un

clip de película y es posible reutilizarlo en el documento FLA actual y en otros archivos
FLA. Los símbolos creados se añaden automáticamente a la biblioteca del documento
(Ventana > Biblioteca), por lo que es posible utilizarlo varias veces en un mismo
documento.
Al añadir una animación, siempre debe animar los símbolos en Flash, no animar gráficos
en bruto (gráficos creados por ti) o activos en bruto importados (por ejemplo, un archivo
PNG). Por ejemplo, si dibuja un círculo utilizando la herramienta Óvalo en Flash, debería
convertir el gráfico de círculo en un clip de película para poder animarlo. De esta forma se
reduce el tamaño del archivo SWF y se facilita la creación de la animación en Flash.
Tipos de comportamiento de los símbolos

Cada símbolo posee una Línea de tiempo y un Escenario únicos, completo con capas. Al
crear un símbolo, debe elegir cómo se va a comportar el símbolo, en función cómo se
utilizará en la película.
Tenemos tres tipos de símbolos.
Símbolos gráficos
Para las imágenes estáticas y para crear piezas de animación reutilizables ligadas a la Línea
de tiempo de la película principal. Estos símbolos están sincronizados con la Línea de
tiempo de la película principal. Los controles y sonidos interactivos no funcionan en la
secuencia de animación de un símbolo gráfico.
Símbolos de botón
Para crear botones interactivos en la película que respondan a los clics y desplazamientos
del ratón, o demás acciones.
Símbolos de clip de película

26
Para crear piezas de animación reutilizables. Los clips de películas tienen sus propias líneas
de tiempo de varios fotogramas que se reproducen de independientemente de la Línea de
tiempo de la película principal.
Procedimiento para crear un grafico

1. Selecciona el grafico creado
2. En la barra de menús selecciona la opción Modificar
3. Da clic en convertir en símbolo y aparecerá el siguiente cuadro de dialogo
4. Aquí podrás elegir si va a ser de tipo grafico, botón o

clip de película, una vez elegido el tipo de símbolo
basta con seleccionar la casilla de selección y asignar
un nombre al archivo.
5. Una vez creado este aparecerá en la biblioteca
Inserción de imágenes de archivo

En el programa de flash las imágenes no se pueden insertar directamente del menú
insertar, primeramente las tienes que importar y estas aparecerán en el panel de
biblioteca, una vez que estas aparecen en el panel de herramientas podrás insertarlas en
tu escena.
27
Procedimiento para importar una imagen al panel de biblioteca
1. Elegir archivo del barra de menús
2. Seleccionar la opción importar
3. Elegir la opción importar a biblioteca
4. En el cuadro de dialogo que aparece
seleccionar la imagen que deseas
importar.
5. Finalmente la imagen aparecerá en el panel de biblioteca.
6. Una vez importada la imagen la puede usar como un grafico, relleno, etc.
Utilizar las imágenes importadas para crear nuestros propios dibujos.

Una de las grandes ventajas de poder importar imágenes en una escena podemos
utilizarlas como referencia para crear nuestros propios dibujos.
Para poder lograrlo únicamente necesitas crear dos capas, la primera es para insertar la
imagen que deseas dibujar y la segunda capa para crear tu propio dibujo apoyado de la
herramienta de lápiz.
El siguiente ejemplo muestra una imagen importada y la otra imagen creada a partir de la
anterior.
Imagen Imagen
importada Creada
Interpolación fotograma a fotograma.

Este tipo de interpolación se realiza en base a puros fotogramas clave. Los cambios en las
imágenes u objetos se hacen de manera muy drástica, sin embargo si se pueden utilizar por
ejemplo en un semáforo, en unas luces de navidad, en un letrero que normalmente vemos en las
carreteras o en los centros comerciales.
Animación Interpolada
La animación de un dibujo es la esencia del programa de Flash, y para lograrlo debemos 28
de hacer un uso adecuado de las capas y los fotogramas.
Una vez realizado nuestro dibujo, trazo, forma, etc. Procederemos a la inserción de
movimiento, de manera que nuestra creación ahora este animada. Inicialmente cuando
generas un documento
Crear una animación interpolada

La interpolación de movimiento es un tipo de animación en la que un objeto se mueve de
una posición a otra.
Nosotros podemos darnos cuenta de la animación de un objeto en la línea de tiempo

donde aparecen líneas de color verde claro y violeta claro.
Procedimiento para crear una animación interpolada

1. Seleccionamos el fotograma 1 ubicado en la línea de tiempo
2. Dar clic derecho y seleccionar la opción Crear interpolación de movimiento
3. Posteriormente ubícate en un fotograma posterior al 1 y veras la animación de tu
objeto.
4. Finalmente presiona CTRL + INTRO
Procedimiento para crear una animación por medio de fotogramas

Si lo que deseas es crear una sensación de movimiento lineal es importante seguir los
siguientes pasos:
1. Inserta varios fotogramas seguidos por medio de la tecla F5

2. Inicialmente aparecerán vacíos ya que no hay nada en cada fotograma
3. Conforme vayas insertando una imagen en cada fotograma estos ya no
aparecerán vacíos.
Procedimiento para crear una animación por medio del panel de

29 propiedades
1. Inicialmente da clic en el fotograma de donde deseas que inicie la animación

2. En el panel de propiedades ubicada en la parte inferior de la ventana ubica la
opción animar.
3. Da clic en la pestaña Movimiento
4. Selecciona el tipo de animación
5. Es importante que sepas que si vas a dar animación a una forma selecciones
la opción forma del menú desplegable de animar, en caso de ser un objeto
selecciona la opción Movimiento.
6. Ubícate en el fotograma donde deseas que termine animación e inserta el
grafico
Inserción de texto a las escenas

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en
el punto del escenario en el que queramos empezar a escribir. Una vez escrito nuestro
texto aparecerá el panel de propiedades correspondiente.
El Panel Propiedades contiene las principales propiedades de todos los objetos que
vamos a emplear durante nuestro diseño, de modo que si seleccionamos un texto,
podremos ver en él todo lo que nos hace falta conocer sobre nuestro texto.
Fuente: Desde aquí, al igual que en los editores de texto

más comunes podemos seleccionar el tipo de letra o "fuente" que más nos guste.
Altura: Determina el espaciado entre los caracteres. Útil cuando la tipografía

30
que empleamos muestra las letras muy juntas o para dar efectos concretos al texto.
Dirección del Texto: Cambia la orientación del texto de horizontal a vertical, tanto
de izquierda a derecha como de derecha a izquierda.
Ajuste automático entre caracteres: Activar esta casilla provoca que la

separación entre caracteres se realice de modo automático.
Posición: Nos permite convertir nuestro texto en subíndices o en

superídices (o dejarlo normal).
URL: Si queremos que al pulsar sobre

nuestro texto, el usuario vaya a una dirección web, nada más fácil que escribirla ahí.
Flash la asociará al texto que estés 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 ...
Tipo de Línea: Si el texto que vamos a incluir es dinámico (de lo

contrario aparece sin activar), esta opción nos permite determinar cómo queremos que
aparezcan las líneas (línea única, multilínea o multilínea sin ajuste).
Configuración: Son las clásicas opciones que permiten convertir el

texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamaño.
Otras Propiedades: Dado que Flash trata los textos como objetos,
éstos también tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro
gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo,
pues las tipografías son una parte muy importante y deben respetarse.
Un Párrafo no es más que un conjunto de caracteres con propiedades comunes a todos

ellos. Estos párrafos admiten ciertas opciones que nos permiten trabajar con bloques de
texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con
párrafos (entre otras).
A la Izquierda: Todas las líneas empezarán tan a la izquierda como sea posible
(dentro del recuadro de texto que hayamos definido).
Centrar: Las líneas se distribuyen a la derecha y a la izquierda del punto medio del
Párrafo.
A la derecha: Todas las líneas empezarán tan a la derecha como sea posible (dentro
31
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 límites.
Tipos de Textos
El tipo de texto se puede modificar desde el Panel Propiedades sin más que haciendo clic
sobre la pestaña Tipo de texto:
Texto Estático
El Texto Estático se caracteriza por no presentar ningún cambio a lo largo de la animación.
Es importante que no confundamos la palabra "estático" con que el texto no se mueva o
malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la
animación”
Los textos estáticos sólo tienen 2 propiedades extras:
Usar Fuentes del Dispositivo: Esta opción permite que la película Flash emplee las
Fuentes que tenga instaladas el usuario que ve la película en su computadora. Si dicho
usuario dispone de las fuentes que hemos utilizado en la película, la verá exactamente
como queremos que la vea, pero si no las tiene, Flash empleará la fuente que más se le
parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se
parezca al que pretendíamos, por lo que suele ser conveniente mantener esta opción
sin seleccionar, aunque esto conlleve un mayor tamaño de la película final.
Seleccionable: Con esta opción activada el usuario podrá seleccionar los textos que
aparezcan en la película (cortarlos, copiarlos...) Actívala si lo crees conveniente.
32
Texto Dinámico
El Texto Dinámico en contraposición al estático sí

que puede cambiar su contenido (además de estar
animado). Su uso es bastante más complejo que el
del Texto Estático, ya que cada recuadro de texto
Dinámico puede ser una variable modificable
mediante ActionScript, esto quiere decir que los
valores y propiedades de este tipo de textos se
pueden modificar mediante programación, lo que
nos saca del objetivo de este curso. Un uso común
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 número de líneas que van a tener, se puede introducir texto HTML, se puede añadir
fácilmente un borde al texto o dar nombre a la variable que represente al texto Dinámico.
Texto de entrada
El Texto de Entrada tiene básicamente las mismas propiedades que

el Texto Dinámico, junto con algunas propias de un tipo de texto
orientado a la introducción de datos por parte de usuario, como
por ejemplo el número máximo de líneas 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 contraseñas).
Evidentemente este tipo de texto se reflejará en nuestra película como un recuadro de

texto SIN contenido, ya que lo deberá introducir el usuario.
Creación de imágenes GIF
El programa de diseño de flash ofrece herramientas de mucha

utilidad como es la exportación de imágenes a distintos formatos, el
comando Exportar animaciones que se pueden editar en otras
aplicaciones. Por ejemplo, podemos exportar una película entera
como archivo de Flash Player, como una serie de imágenes de mapas
de bits, como un fotograma único o un archivo de imagen, y como
imágenes estáticas y de movimiento en varios formatos entre los que se incluye GIF, JPEG,
33 PNG, BMP, QuickTime o AVI.
Procedimiento para exportar tu animación a formato .GIF

Una vez que tu diseño esté listo para convertirlo en imagen GIF sigue los siguientes pasos.
1. Elige la opción configurar publicación que se encuentra en la sección Archivo de la

barra de Menús.
2. Aparecerá la siguiente pantalla
Como puedes observar la

configuración predeterminada
de la publicación de las
animaciones en el programa
de flash, tiene únicamente dos
tipos la que funciona
únicamente si cuentas con el
programa de flash que es la
extensión .SWF y la HTML
utilizada para la publicación
Web.
Activa la casilla de verificación IMAGEN

GIF, una vez activada te aparecerá la
siguiente ventana, para lograr que tu
imagen siga animada tendrás que
seleccionar la opción Animada de la
sección reproducción e indicar si deseas
que se repita un determinado número
de veces la animación o en su caso
repetir indefinidamente.
3. Dar clic en publicar y posteriormente aceptar.

34
4. Para que puedas ver tu imagen GIF creada solo tienes que seleccionar la opción
Vista previa de publicación y podrás ver tu imagen ya en formato GIF.
5. La ubicación donde se alojara tu imagen será la misma en donde guardaste tu

archivo original de flash.
6. Una vez que hayas convertido tu animación a imagen GIF puedes usarla en
cualquier otro programa.
Recuerda que puedes utilizar este mismo procedimiento para los distintos
formatos, solo asegúrate de que cubran con tus expectativas planeadas.
Manipulación de botones en Flash

Adobe Flash cuenta con una serie de botones previamente elaborados estos se
encuentran en las librerías, estos botones cuentan con ciertas características que
pueden ser modificados en caso de así requerirlo.
Procedimiento para insertar un botón desde la librería

1. Seleccionar la opción de librerías comunes de la sección Ventana
2. Posteriormente elegir la opción Botones
3. Aparecerá la librería con todos los botones disponibles, agrupados por carpetas
35
4. Selecciona el botón de tu agrado y únicamente arrástralo a la escena.

5. Una vez insertado el botón en la escena podrás ver su estructura únicamente
presionando doble clic
6. Recuerda que estos botones ya están listos para ser utilizados únicamente tienes
que programar en el panel de acciones, haciendo uso del ActionScript.
Procedimiento para crear un Botón

1. Diseña el botón de acuerdo a tus preferencias
2. Una vez que el diseño esté listo selecciónalo y utiliza la opción de convertir a símbolo
ubicada en la sección Modificar de la barra de menús.
3. Una vez que le asignes nombre y le des aceptar este aparecerá en la biblioteca con la
especificación de tipo botón.
36
4. Una vez convertido en botón da doble clic y comienza a configurar sus diferentes
escenarios.
5. Recuerda que debe de haber un cambio en cada estado (Reposo, Sobre, Presionado y
Zona Activa), para que pueda tener un efecto visual al dar clic sobre este.
NOTA: Los botones los puedes utilizar en cualquier escena sin importar el número
de veces que desees hacerlo.
Alineación de botones
Los botones se pueden alinear botones respecto a los ejes horizontal y vertical mediante
el panel Alinear.
1. Lo primero que tienes que hacer es seleccionar todos los botones mediante la
herramienta de selección.
2. Una vez seleccionados, abre el panel de alinear mediante el siguiente
procedimiento:
I. Selecciona la opción ventana de la barra de menus
II. Elige la opción alinear o presiona Ctrl + K
III. Aparecerá el siguiente panel
37
Observa que todo se va a alinear respecto al escenario y puedes alinear de

manera horizontal, vertical, etc.
3. Selecciona la opción más adecuada a tu diseño y observa como los botones se

alinean en el escenario.
4. Cierra el panel Alinear en caso de ya no requerirlo.
Programar las propiedades de los botones

Una vez creado tus botones puedes requerir modificar alguna de sus propiedades, para
ello únicamente tienes que seleccionar el botón y observar sus propiedades que aparecen.
Aquí puedes modificar su tamaño y la posición dentro del escenario, así como decidir
cambiar de botón a grafico o película clip.
Programar acciones de los botones

La programación de los botones es clave para lograr que realicen la función deseada, para lo cual
se tiene que hacer uso de panel de acciones e instrucciones ActionScript que tienen que ver con
los diferentes eventos que puede realizar un botón.
El panel Acciones permite crear código ActionScript en un documento de Flash (archivo FLA). Este
panel consta de tres paneles, cada uno de los cuales le facilita la creación y gestión de los scripts.
38
Caja de herramientas Acciones Se utiliza para examinar una lista de elementos del lenguaje
ActionScript ordenados por categorías (funciones, clases, tipos, etc.) y luego insertarlos en el panel
Script. Para insertar un elemento de script en el panel Script, haga doble clic en él o arrástrelo
directamente al panel Script. También puede añadir elementos del lenguaje a los scripts mediante
el botón Añadir (+) de la barra de herramientas del panel Acciones. Para más información,
consulte Barras de herramientas del panel Acciones y la ventana Script.
Navegador de scripts Muestra una lista jerárquica de elementos de Flash (clips de película,
fotogramas y botones) que contienen scripts. Utilice el navegador de scripts para desplazarse
rápidamente por todos los scripts del documento de Flash.
Si hace clic en un elemento del navegador de scripts, el script asociado con ese elemento
aparecerá en el panel Script y la cabeza lectora se desplazará a esa posición en la línea de tiempo.
Si hace doble clic en un elemento del navegador de scripts, el script quedará fijado (bloqueado en
su sitio). Para más información, consulte Fijación de scripts en el panel Acciones.
Panel Script En este panel es donde se escribe el código. El panel Script ofrece herramientas para
crear scripts en un editor completo (denominado editor de ActionScript) que incluye aplicación de
formato y revisión de la sintaxis del código, sugerencias o consejos sobre códigos, colores para el
código y otras funciones que simplifican la creación de scripts. Para más información, consulte
Utilización del panel Acciones y la ventana Script.
CREANDO BOTONES EN ACTION SCRIPT 3.0

39
Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros
elementos de Flash CS4 vamos a comentar dos de las más comunes.
Nota: Al crear un archivo, habrás visto que podemos elegir distintas versiones de ActionScript (AS
3.0, AS 2.0...). Esto se refiere al lenguaje de programación que podemos empelar en Flash y que lo
convierte en una herramienta realmente potente. En las versiones 1 y 2, se podían agregar
comportamientos directamente en las propiedades de los botones. Pero nosotros venimos
empleando las versión 3.0 a lo largo del curso, por ser la más actual y potente. Esta versión nos
obliga a escribir el código ActionScript. Veremos cosas básicas, y entraremos un poco más en
ActionScript a partir del tema 16.
Comenzamos por crear o añadir nuestro botón, y asignarle un nombre de instancia. El nombre que
le demos es muy importante, porque nos permitirá acceder a él desde el código.
Aunque podemos escribir el código en la misma capa, recomendamos crear una capa
exclusivamente para el código, para tenerlo todo mejor organizado.
Ahora, abrimos en el panel Acciones (menú Ventana → Acciones). Se mostrará un área en blanco
en la que podemos escribir:
Este es el código que debemos de escribir para asociar acciones a un botón:

40
miBoton.addEventListener('click', accionesMiBoton);
function accionesMiBoton(event):void{
//Acciones
Donde miBoton será el nombre de la instancia del botón.
accionesMiBoton contiene las acciones a realizar. Observa que aparece en dos sitios. El nombre
que le hemos dado es el que queramos.
Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es único.
También tenemos que dar un nombre único a accionesMiBoton para cada uno, si no todos
realizarían las mismas acciones.
Ahora, cambiamos donde pone //Acciones por lo que queramos que haga. Veamos las más
comunes:
1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet (o una
película Flash), lo que nos servirá para irnos desplazando por webs que contengan más de una
página, o permitir al usuario descargarse archivos entre otras cosas.
La instrucción en ActionScript que nos permite hacerlo es navigateToURL(new

URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la
página que queremos abrir, y "_blank" indica que se abrirá en una página nueva.
Por lo tanto, si tenemos un botón cuyo nombre de instancia es btnVisitarAulaclic que queremos
que abra la web http://www.aulaclic.es, escribiríamos:
btnVisitarAulaclic.addEventListener('click', visitarAulaclic);
function visitarAulaclic(event):void{
navigateToURL(new URLRequest("http://www.aulaclic.es"), "_blank");
2) Controlar una película en curso. Si estamos reproduciendo una película Flash y queremos
permitir que el usuario la detenga, la ponga en marcha, avance, retroceda ...
Para ello podemos emplear las acciones:

stop(); para detener.

41
play(); para reproducir.
gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.
gotoAndPlay(numeroFotograma,"nombre de escena"); para ir a un fotograma determinado de una

escena específica.
Por ejemplo, podemos tener el botón btnPausar para parar la película y el

botón btnContinuar para reproducirla:
btnPausar.addEventListener('click', pausar);
function pausar(event):void{
stop();
btnContinuar.addEventListener('click', continuar);
function continuar(event):void{
play();
Tal cual lo hemos puesto, afectaría a la película principal. Si lo que queremos parar o reproducir es
un clip determinado, habría que escribirlo delante de la acción, separado por un punto. Por
ejemplo miClip.stop();.
Inserción de sonidos en Flash
¿Quién sería capaz de ver una película muda? ¿Y una animación espectacular sin
sonido?
Hasta hace poco, los únicos sonidos que oíamos en las páginas web eran los famosos
"midis", de escaso tamaño y de escasa calidad. De hecho, eran sólo instrumentos
musicales sin voz, de ahí su pequeño tamaño (y calidad). Aún así, siempre existía algún
creador de páginas web que se aventuraba a poner algún sonido complejo (.wav o
.mp3) en su página web, por desgracia, su carga es tan lenta, que la mayoría de los
visitantes se irían de la página sin llegar a escucharla. 42
Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner
sonido a las páginas web es un poco más fácil, ¿qué aporta FLASH?
Flash nos permite insertar cualquier sonido que queramos en nuestras películas (.wav,
.aiff y .mp3) de forma fácil y muy efectiva, ya que es capaz de acelerar la descarga del
sonido siempre y cuando se descargue junto con nuestra película.
Podemos dar a la película efectos simples (el típico "clic" al pulsar un botón), efectos
complejos (música de fondo) e incluso podemos hacer que la animación se desarrolle
conjuntamente con una música.
Importar Sonidos de Flash
Para importar un sonido haz clic en el menú Archivo → Importar → Importar a

biblioteca.
Se abrirá el cuadro de diálogo de Importar a biblioteca. Allí deberás 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
película. Selecciónalo haciendo clic sobre él y haz pulsa el botón Aceptar.
El sonido estará listo para usarlo donde quieras, podrás encontrarlo en la Biblioteca
43 (menú Ventana → Biblioteca).
Propiedades de los Sonidos
En Flash todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades.
Aquí tenemos todo lo necesario para insertar, modificar y editar el sonido que
acabamos de importar. Si no hemos importado ningún sonido, nos daremos cuenta de
que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto
cambie.
Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algún
fotograma de nuestra película, tras hacer esto, el Panel Propiedades toma el siguiente
aspecto:
Partes que integran este panel
Sonido: En esta pestaña nos aparecerán las canciones que tenemos importadas,
deberemos seleccionar la canción que pretendamos añadir a nuestra película (en el
siguiente punto veremos cómo insertarlo)
Efecto: Desde aquí podremos añadir algún efecto a nuestro sonido, como por ejemplo
que el sonido pase del canal izquierdo al derecho (esto crea la sensación 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...
Sinc: Esta opción nos permite determinar en qué momento comenzará a actuar nuestro
sonido, estas son las opciones que tenemos:
Evento: Sincroniza nuestro sonido con un evento determinado. Es la opción por defecto
y provoca que el sonido se empiece a reproducir al pasar la película por el fotograma en
el que está situado. También se puede sincronizar el sonido con botones y los demás
tipos de símbolos.
Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si está

seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro 44
distinto, lo hace "encima" del sonido actual. Puede ser un efecto muy atractivo, o puede
provocar que se forme "ruido" en nuestra película.
Detener: Detiene el sonido seleccionado.
Flujo: Esta opción sincroniza el sonido con el o los objetos con los que esté asociado, por
tanto, si la carga de la película es lenta y las imágenes no fluyen adecuadamente, el
sonido se detendrá para sincronizarse con ellas. Este efecto puede dar la sensación de
que la película 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 reacción muy negativa en los que pueden estar viendo nuestra película).
Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el
efecto de que un personaje hable durante una película. En esta situación, es muy
recomendable que el sonido y las imágenes estén sincronizadas.
Repetir: Determina el número de veces que se reproducirá el sonido según lo que

escribas en la caja de texto de la derecha. También puedes seleccionar Reproducir
indefinidamente para que el sonido se reproduzca en un bucle hasta llegar al siguiente
fotograma clave.
HERRAMIENTA HUESO.
45
La idea es unir los elementos con "huesos", de manera que estos queden unidos formando
articulaciones. Pensemos en un brazo creado con tres huesos unidos por la muñeca y codo. Al
mover la mano, el antebrazo la seguiría doblándose por la muñeca y por el codo.
Para crear los huesos, encontramos la herramienta Hueso .
Podemos hacerlo de dos formas: creando un esqueleto dentro de una forma, o uniendo símbolos
con huesos.
Crear un esqueleto en una forma:
Partimos de una forma, como pueden ser elipses, rectángulos, trazos del pincel, etc. Cualquier
cosa que no se haya convertido en un símbolo. Con la herramienta Hueso, vamos haciendo clic y
arrastrando, dibujando los huesos. Debemos de comenzar por el hueso raíz, y seguir por los que
cuelgan de este. Por ejemplo, para dibujar un brazo, haríamos clic sobre el hombro y
arrastraríamos hasta el codo. Volveríamos a hacer clic sobre el el codo y arrastraríamos hasta la
muñeca.
En la siguiente imagen, partimos de un dibujo muy simple hecho con el Pincel, y le hemos creado
un esqueleto.
Podemos crear tantos huesos como queramos dentro de la forma. Si ahora intentas arrastrar un
brazo, verás que el resto del cuerpo le sigue. El inconveniente de la forma es que puede
deformarse y no podremos controlarlo.
Crear un esqueleto con símbolos:

Otra forma de trabajar es utilizando símbolos. Debemos de tener en cuenta que un símbolo sólo
puede tener un hueso. Por tanto, necesitamos una instancia de símbolo para cada sección entre 46
articulaciones.
Antes de comenzar a crear el esqueleto, colocamos todos los símbolos en el escenario, colocados
de la forma deseada. Después, partiendo de la raíz del esqueleto, del punto de que saldrán todos
los huesos, vamos enlazando los distintos símbolos, del comienzo del primero al comienzo del
siguiente.
Podemos mover los símbolos independientemente del esqueleto, si

mantenemos pulsada la tecla Alt. Si hemos colocado mal un hueso,
podemos seleccionarlo haciendo clic sobre él con la herramienta de
selección, y eliminarlo con la tecla Supr.
Crear la animación
Tanto si hemos utilizado formas, como si hemos trabajado con símbolos, veremos que se
ha creado una nueva capa, llamada Esqueleto donde se han movido todos los elementos.
Creamos un nuevo fotograma en esa capa para tener una zona sobre la que trabajar. No es
necesario que sea un fotograma clave, aunque es una buena idea si queremos que el último
movimiento coincida con el del primer fotograma. Veremos que los fotogramas con
movimiento aparecen de color verde oscuro:
Mover ahora nuestro esqueleto es tan sencillo como hacer clic en un fotograma, y arrastrar
los distintos elementos. No necesitamos crear fotogramas clave. Aunque sí veremos que
aparece un punto negro en los fotogramas en los que hemos movido el esqueleto. Lo que
47
hemos creado ahí es una Pose.
Al mover un hueso, el hueso del que cuelga le seguirá. Si queremos mover únicamente un
hueso por la articulación que lo une con el hueso del que cuelga, debemos hacerlo con la
tecla Shift (Mayúsculas) puslada.
Seguimos creando poses. Si queremos duplicar una pose, podemos hacer clic derecho
sobre ella en la línea de tiempo, copiarla, y pegarla en el fotograma que queramos.
De esta forma, vamos creando todas las poses necesarias hasta que consigamos el efecto
deseado.

Apuntes Producción PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apuntes Producción PDF

Caricato da

Copyright:

Formati disponibili

SUBMODULO II

Producción de animaciones con

Herramienta de transformación de relleno ...................................................................... 15

Animación Interpolada .................................................................................................... 28

Contesta las siguientes preguntas en tu cuaderno:

1. ¿Cómo defines animación?

Historia de Adobe Flash.

En 1993 Jonathan Gay y Charly Jackson lanzan FutureSplash, un software de dibujo.

Diferencia entre Gráfico Vectorial y Mapa de Bits

La explicación de este hecho se puede ver en la forma en la que están creados y

Los bitmaps o mapas de bits están formados por grandes "rectángulos de

Así, nuestro PC procesa esa información, y genera la imagen en el monitor u otro

reproducir y transformar para nuestra aplicación o reproductor gráfico y más lentos en la

¿Cómo trabaja Flash CS4?

Posteriormente aparecerá la siguiente pantalla

La página inicial muestra tres columnas correspondientes a:

a) La apertura de archivos recientes: Donde nosotros podemos visualizar los

b) Creación de nuevos proyectos: En esta sección nosotros podemos crear nuevos

c) Bloque de plantillas prediseñadas para crear algunas aplicaciones, por ejemplo

En versiones recientes, Adobe Flash ha incluido en su entorno nuevas características para

Barra de herramientas principal

El programa de Flash ofrece una opción para personalizar la barra de herramientas,

Únicamente debes seleccionar la herramienta deseada y presionar el botón

Cambia en relación al elemento activo, muestra las características

Operaciones básicas para el manejo de flash

Crear un nuevo documento de Flash

1. Seleccione Archivo > Nuevo.

1. Selecciona Archivo> Guardar como…> y asigna el nombre del archivo. Al guardar tu

Los gráficos importados se guardan en la biblioteca del documento. La biblioteca

 La sección de herramientas contiene las herramientas de dibujo, pintura y

Es la herramienta más usada de todas. Su uso principal es para seleccionar objetos.

Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o

Herramienta de transformación libre

Esta herramienta nos permite seleccionar nuestro objeto para posteriormente

Herramienta de transformación de relleno

Su función es complementaria a la de la Herramienta Flecha, pues puede

Crea polígonos (y por tanto rectas, rectángulos...) de un modo sencillo. Su empleo

Crea un texto en el lugar en el que hagamos clic. Sus propiedades se verán en el

La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla.

Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo

En el caso de la opción polígono si requieres crear imágenes tipo estrella únicamente te

Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se

Herramienta Bote de Tinta

Se emplea para cambiar rápidamente el color de un trazo. Se aplica sobre objetos,

Herramienta Cubo de Pintura

Su misión es "Capturar" colores para que posteriormente podamos utilizarlos.

Su funcionamiento es análogo a la Herramienta Brocha. Pero su función es la de

Herramienta de Acercamiento (ZOOM)

Modificación de características de las formas

las coordenadas y las coordenadas .

Esta opción nos permite cambiar el color del contorno

Aquí puedes cambiar el color del relleno o en su defecto anular el relleno,

Al dar clic en la pestaña que se encuentra al costado

En esta opción podemos cambiar el ancho de contorno, únicamente tienes que

Modificación de los colores

Para seleccionar un color determinado, bastará

Sólido: Consiste en un relleno formado por un solo color.

Degradado Lineal: Es un tipo especial de relleno, de modo que un color se

Mapa de Bits: Permite colocar como relleno alguna imagen existente en la

Aplicar animaciones a un dibujo

Procesos de Inserción de Escenas

El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo

se desplaza de izquierda a derecha de la línea de tiempo. La información de estado de la