Animacin

con Flash
Flash CS4 y CS5

PROFESOR

ISBN 978-607-7272-92-2

9 786077 272922

Carlos Zepeda Chehaibar

LEGALES

Animacin con Flash

Flash CS4/CS5

Autor: Diseo Grfico y editorial:

Carlos Zepeda Chehaibar Hctor Mendoza Surez
Abraham Lule Oyervides
Apoyo en actualizacin: Guillermo Larios
Miguel Prez Martnez
Guillermo Larios Revisin de edicin:
Alfredo Salazar de la Vega
Director del Libro:
Carlos Zepeda Chehaibar Ilustracin de portada:
ngel Gabriel Herrera Medina
Coordinacin Editorial: Jess Arteaga Duarte
Abraham Lule Oyervides

Animacin con Flash CS4/CS5. Profesor

2 Edicin 1 Reimpresin
Junio 2015

D.R. Grupo Educare, S.A. de C.V., Cerro de Mesontepec, nmero 83, Colonia Colinas del Cimatario, Quertaro, Qro., CP. 76090, 2011.
Queda prohibida la reproduccin total o parcial de esta obra por cualquier medio, sin autorizacin de los editores.

ISBN 978-607-7272-92-2
Impreso y hecho en Mxico.
Esta es una obra protegida por las leyes internacionales de derechos de autor. Prohibida la reproduccin total o parcial de esta obra y/o los
recursos que la acompaan, por cualquier medio, sin autorizacin escrita de Grupo Educare, S.A. de C.V.

Editado por Grupo Educare S.A. de C.V.

Impreso por: Grupo Formavi, S.A. de C.V.
Calz. Santo Toms #139 Col. Santo Toms Del. Azcapotzalco, C.P. 02020 Mxico, D.F.

El logotipo de Grupo Educare es propiedad de Grupo Educare, S.A. de C.V.

El diseo editorial y contenidos grficos son propiedad exclusiva de Grupo Educare, S.A. de C.V.
Todos los nombres de empresas, productos, direcciones y nombres propios contenidos en esta obra, forman parte de ejemplos ficticios, a menos que se indique lo
contrario. Las citas, imgenes y videogramas utilizados en esta obra se utilizan nicamente con fines didcticos y para la crtica e investigacin cientfica o artstica, por
lo que el autor y Grupo Educare, S.A. de C.V. no asumen ninguna responsabilidad por el uso que se d a esta informacin, ni infringen derecho de marca alguno, en
conformidad al Artculo 148 de la Ley Federal del Derecho de Autor.

Microsoft Office, MS DOS, MS Windows, Word, PowerPoint, Excel, FrontPage y Access y sus logotipos son marcas comerciales de Microsoft Corporation. Microsoft y el
logo de Microsoft Office son marcas registradas de Microsoft Corporation en los Estados Unidos y/o en otros pases. Microsoft no patrocina, endosa o aprueba esta
obra. Flash, Illustrator, Fireworks, Freehand, Dreamweaver, Photoshop y sus logotipos son marcas registradas de Adobe Inc. Adobe no patrocina o endosa esta obra.
 CONTENIDO

Animacin Flash CS4/CS5

Propuesta Pedaggica I
Qu es Flash? 7
Lmina de apoyo 01. Evolucin de Flash (Historia)? 9
Actividad 01. Evolucin de Flash (Historia) 9
Derechos de Autor 10
Requisitos del proyecto 11
Imgenes vectoriales 13
Ventajas de los vectores / Formatos de archivo 14
Imgenes de mapas de bits 15
Actividad 02. Recordando e investigando 16

Entorno de trabajo 19
Escenario (Stage) 19
Lnea de tiempo (Timeline) 20
Herramientas (Tools) / Propiedades (Properties) 20
Biblioteca de smbolos (Library) / Acciones (Actions) 21
Actividad 03. Reconociendo el entorno 21
MID 01. Entorno de trabajo de Flash 22
Cmo reorganizar los paneles 22

Dibujar y colorear vectores 23

MID 02. Herramientas de Flash 23
Actividad 04. Identificando herramientas 23
Cmo se comportan las formas en Flash 26
MID 03. Dibujando vectores 27
Actividad 05. Dibujando vectores 27

Texto (Text) 29
Texto Esttco (Static Text) / Texto Dinmico (Dinamic Text) 30
Texto de entrada (Imput Text) 30
MID 04. Trabajando con texto 30
Actividad 06. Creando formas 31
Trabajo con la Lnea de tiempo (Timeline) 31
MID 05. Lnea de tiempo 33
Actividad 07. Repaso de la lnea de tiempo 33
Actividad 08. Animando con la lnea de tiempo 34

Sonido (Sound) 35
MID 06. Biblioteca de smbolos 35
Event / Stream 35
CONTENIDO

MID 07. Trabajando con sonido 36

Actividad 09. Haciendo pruebas con sonido 37
Actividad 10. Conceptos clave 38

Smbolos, sus propiedades y lneas de tiempo 40

Tipos de smbolos 40
MID 08. Tipos de smbolo y sus lneas de tiempo 42
MID 09. Cmo crear un botn 42
MID 10. Cmo crear un MovieClip 42
Actividad 11. Tipos de smbolos 42
MID 11. Instancias y sus propiedades 44
Actividad 12. Creando instancias 44
Actividad 13. Creando botones para una tarjeta interactiva 45

Mscara (Mask) 48
MID 12. Mscaras 49
Actividad 14. Creando una mscara 49

Principios de Animacin 50
Animacin cuadro por cuadro (frame by frame) 51
Actividad 15. Animando cuadro por cuadro 51
MID 13. Animacin cuadro por cuadro 51
Animacin Interpolacin Clsica 52
Animacin Interpolacin de Movimiento 52
MID 14. Motion Tween 53
Actividad 16. Animando con Motion Tween 54
Animacin Interpolacin de Forma 55
MID 15. Shape Tween 56
Actividad 17. Animando con Shape Tween 56
Actividad 18. Identificando Tweens 58

Guas de movimiento (MotionGuide) 58

MID 16. Guas de movimiento 59
Actividad 19. Siguiendo guas 59

Filtros (Filters) 61
MID 17. Filtros 62
Actividad 20. Utilizando filtros 63
Actividad 21. Publicidad para Internet 64
Actividad 22. Creacion de un banner 67
Actividad 23. Animacin con Pivotes 73
Actividad 24. Tarjeta Electrnica 79
Actividad 25. Mscara ASV 85
 RECURSOS

Material Impreso
Este material forma parte de un conjunto de recursos que conforman el Programa de Informtica y Tecnologa
(PIT). Est organizado en bloques integrales que incluyen todo lo necesario para aprender, practicar y evaluar
habilidades o competencias. Las explicaciones, imgenes, tablas, actividades, notas y tips, apoyadas con las
lminas y tutoriales, permiten integrar la experiencia de aprendizaje desde mltiples perspectivas. As, podemos
afirmar que el PIT de Grupo Educare es la mejor manera de aprender haciendo.

Recursos Digitales
Los recursos digitales que acompaa al material impreso contienen videos que te ayudarn a comprender los
conceptos y a poner en prctica las habilidades adquiridas. Adicionalmente encontrars los archivos que se
requieren para realizar las actividades, algunos documentos y aplicaciones tiles. No olvides que los recursos
digitales son parte integral del programa, por lo que es muy importante que lo conozcas y utilices en el curso.
ICONOGRAFA

Actividad
Este icono nos indica un ejercicio que refuerza de manera prctica e inmediata la
parte terica de este material.

Nota
Las notas que vers dentro de tu texto, puntualizan la teora o los aspectos ms
importantes de un tema.

Tip
Es una sugerencia que complementa un tema del material impreso, dando un
panorama ms amplio al alumno sobre cmo ejecutar una actividad de manera
ms sencilla y prctica.

Video
Es el material digital de los recursos del programa. La representacin en video de
la parte terica de este volumen.

Lmina de apoyo
La lmina es un recurso del profesor, que sirve como refuerzo dinmico e
interactivo a un tema denso, que complementa la teora del material impreso.
PROPUESTA DIDCTICA
ANIMACIN CON FLASH
Flash CS4 CS5
ANIMACIN CON FLASH
Flash CS4 CS5

TIEMPO EN
TEMAS SUBTEMAS COMPETENCIA
SEMANAS

Derechos de Autor Escoge la aplicacin correcta al manipular

Requisitos del proyecto
Imgenes vectoriales
1 Qu es Flash?
Ventajas de los vectores
Formatos de archivo
Imgenes de mapas de bits
diferentes tipos de archivos.
Define derechos de autor su importancia y la
relacin con su proyectos.
Distingue entre imgenes Vectoriales y Mapas
de Bits.

1 Entorno de Trabajo
Escenario (Stage)
Lista los elementos que componen el Espacio de
Lnea de tiempo (Timeline)
Trabajo de Flash.
Herramientas (Tools)
Usa el acomodo de paneles para organizar un
Propiedades (Properties)
Espacio de Trabajo presonalizado.
Biblioteca de smbolos (Library)
Identifica los grupos de Herramientas, sus
Acciones (Actions)
opciones y aplicaciones.
Cmo reorganizar los paneles

Cmo se comportan las formas Compone formas compuestas a partir de la

2 Dibujar y Colorear Vectores
en Flash combinacin de formas simples.

1 Texto (Text)
Texto Esttco (Static Text)
Texto Dinmico (Dinamic Text)
Texto de entrada (Input Text)
Trabajo con la Lnea de tiempo
(Timeline)
Escoge el tipo de texto adecuado para cada
proecto.
Emplea la linea de tiempo reconociendo los
elementos que la componen y organizando los
elementos del escenario para crear animaciones.

Usa el panel de propiedades para aplicar

2 Sonido (Sound) Event / Stream
diferentes efectos a un archivo de sonido.

II
 DISEO MULTIMEDIA
Propuesta Didctica

ACTIVIDADES SUGERIDAS PARA EL

OBJETIVOS ALUMNO (CONTENIDAS EN EL MATERIAL TUTORIAL SUGERIDO RECURSOS
DE TRABAJO)

1.- Conocer los origenes de Flash y su evolucin. Lmina de apoyo 01.

2.- Definir los Derechos de Autor identificando fuentes Evolucin de Flash (Historia)
de informacin de libre uso. Actividad 01. Evolucin de Flash
3.- Identificar las principales caracteristicas de las (Historia) Computadora.
imgenes de Mapa de Bits y Vectoriales, listando Actividad 02. Recordando e
sus ventajas, desventajas y usos. investigando Material de aopyo del alumno.
4.- Analizar un proyecto y determinar las herramientas
necesarias para su desarrollo. CD del alumno.

1.- Identificar diferentes usos de Flash y reconocer los Computadora.

elementos que conforman el Espacio de Trabajo. MID 01. Entorno de
Actividad 03. Reconociendo el
2.- Localizar las Herramientas, explicar su uso y trabajo de Flash Material de aopyo del alumno.
entorno 21
distinguir propiedades y opciones disponibles para 22
cada una de ellas. CD del alumno.

Computadora.
MID 02. Herramientas de
1.- Emplear las Herramientas de dibujo y pintura para Actividad 04. Identificando
Flash
crear formas complejas, disitinguiendo propiedades herramientas Material de aopyo del alumno.
MID 03. Dibujando
de las formas. Actividad 05. Dibujando vectores
vectores
CD del alumno.

1.- Definir los diferentes tipos de Texto que trabaja Actividad 06. Creando formas Computadora.
Flash y sus caracteristicas. Actividad 07. Repaso de la lnea MID 04. Trabajando con
2.- Usar la lnea de tiempo para organizar smbolos de tiempo texto Material de aopyo del alumno.
reconociendo los diferentes tipos de fotogramas Actividad 08. Animando con la MID 05. Lnea de tiempo
empleados en la animacin. lnea de tiempo CD del alumno.

Computadora.
MID 06. Biblioteca de
Actividad 09. Haciendo pruebas
1.- Incorporar sonidos en un documento de Fash smbolos
con sonido Material de aopyo del alumno.
comparando los tipos de sincrona Event y Stream. MID 07. Trabajando con
Actividad 10. Conceptos clave
sonido
CD del alumno.

III
ANIMACIN CON FLASH
Flash CS4 CS5

TIEMPO EN
TEMAS SUBTEMAS COMPETENCIA
SEMANAS

Smbolos, sus propiedades y lneas de Localiza simbolos en la Biblioteca de smbolos y

2 Tipos de smbolos
tiempo crea animaciones con ellos.

Aplica mascaras a elementos en el Escenario

Mscara (Mask) mejorando el impacto de su trabajo.

Animacin cuadro por cuadro

Principios de Animacin
(frame by frame)
Animacin Interpolacin Clsica
Animacin Interpolacin de
Movimiento
Animacin Interpolacin de
Forma
Nombra las formas de Animacin que tiene
disponibles Flash reconociendo las caracteristicas
principales para cada una de ellas.
Ejemplifica las formas de Animacin aplicando
estas para crear pelculas de Flash.

Prepara guas de movimiento para emplearlas

Guas de movimiento (MotionGuide) como base para animacines no lneales y que
sigan una ruta especifica.

IV
 DISEO MULTIMEDIA
Propuesta Didctica

ACTIVIDADES SUGERIDAS PARA EL

OBJETIVOS ALUMNO (CONTENIDAS EN EL MATERIAL TUTORIAL SUGERIDO RECURSOS
DE TRABAJO)

MID 08. Tipos de smbolo

y sus lneas de
Actividad 11. Tipos de smbolos tiempo Computadora.
1.- Crear smbolos en un documento Flash Actividad 12. Creando instancias MID 09. Cmo crear un
determinando lneas de tiempo para emplearlos en Actividad 13. Creando botones botn Material de aopyo del alumno.
una pelcula. para una tarjeta MID 10. Cmo crear un
interactiva MovieClip CD del alumno.
MID 11. Instancias y sus
propiedades 44

Computadora.
1. Crear efectos de mscara e identificando como el
Actividad 14. Creando una
enmascaramiento puede emplearse para MID 12. Mscaras Material de aopyo del alumno.
mscara
mejorar un documento Flash.
CD del alumno.

Actividad 15. Animando cuadro

por cuadro
MID 13. Animacin Computadora.
1.- Crear diferentes animaciones aplicando los Actividad 16. Animando con
cuadro por
conceptos de animacin Cuadro por Cuadro, Motion Tween
cuadro Material de aopyo del alumno.
Interpolacin Clsica, Interpolacin de Movimiento e Actividad 17. Animando con
MID 14. Motion Tween
Interpolacin de Forma. Shape Tween
MID 15. Shape Tween CD del alumno.
Actividad 18. Identificando
Tweens

Computadora.
1.- Disear animacines no lineales empleando Guas MID 16. Guas de
Actividad 19. Siguiendo guas Material de aopyo del alumno.
de Movimiento. movimiento
CD del alumno.

V
ANIMACIN CON FLASH
Flash CS4 CS5

TIEMPO EN
TEMAS SUBTEMAS COMPETENCIA
SEMANAS

Filtros (Filters) Recuerda los filtros disponibles en Flash y los

aplica alos elementos dentro del proyecto.

Total de
semanas 9

VI
 DISEO MULTIMEDIA
Propuesta Didctica

ACTIVIDADES SUGERIDAS PARA EL

OBJETIVOS ALUMNO (CONTENIDAS EN EL MATERIAL TUTORIAL SUGERIDO RECURSOS
DE TRABAJO)

Actividad 20. Utilizando filtros

Actividad 21. Publicidad para
Internet Computadora.
1.- Mejorar el impacto visual de los simbolos de un Actividad 22. Creacion de un
documento Flash mediante la aplicacin de los banner MID 17. Filtros Material de aopyo del alumno.
efectos disponibles en la aplicacin. Actividad 23. Animacin con
Pivotes CD del alumno.
Actividad 24. Tarjeta Electrnica
Actividad 25. Mscara ASV

VII
ANIMACIN CON FLASH
Flash CS4 CS5

VIII
 Diseo Multimedia
Qu es Flash?
Flash se origin como un simple programa de dibujo para computadora llamado SuperPaint, creado por
un estudiante de ingeniera de nombre John Gay, a quien le gustaba disear y construir cosas. El progra-
ma funcionaba en las computadoras Apple II, en una poca en la que los grficos eran algo novedoso y
ni siquiera se haba inventado el concepto de deshacer (undo).

La tecnologa de SuperPaint fue desarrollada por varias compaas hasta crear un programa que se llam
InetlliDraw. La caracterstica nica de IntelliDraw era que, adems de poder dibujar cosas, era posible
agregar acciones a los dibujos. Por ejemplo, por primera vez fue posible dibujar una grfica que cambiara
mientras el usuario tecleaba diferentes nmeros. IntelliDraw tuvo poco xito en el mercado, pero John
Gay nuevamente pens que tena que crear un producto novedoso.

7
Diseo Multimedia 7
 ANIMACIN CON FLASH
Flash CS4 CS5

En 1995, la compaa Future Wave se interesaba por crear programas de animacin, pero en ese
entonces, la nica forma de distribuir animacin era por medio de videos VHS o CD Rom, por lo que el
mercado para un software que facilitara la animacin era muy reducido.

Pero justo en la misma poca, el Internet surga como una novedosa y creciente herramienta de
comunicacin. En teora, era posible que el Internet se volviera lo suficientemente popular como para
crecer y permitir transmitir grficos e incluso animacin. Si esto ocurra, Future Wave tendra una
oportunidad para vender su programa de animacin.

Con esta esperanza en mente, empezaron a trabajar en un programa que permitiera dibujar, crear
animacin y usar un lenguaje de programacin para crear contenido para la Web. El programa se llam
Future Splash Animator y empez a crecer poco a poco.

En 1996, la compaa Macromedia compr el novedoso programa y lo rebautiz con el nombre de Flash
1.0. Diez aos ms tarde, Macromedia ya haba lanzado al mercado 7 versiones de Flash, alcanzando a
millones de usuarios, convirtindose en la aplicacin para Web con mayor penetracin en el mundo.

8
8
En 2006, la compaa Adobe, lder mundial en aplicaciones para diseo grfico, adquiere a Macromedia.
La fusin de los expertos en diseo Web y diseo grfico, ha ofrecido desde entonces poderosas
herramientas de software para el diseo, la animacin y la produccin multimedia.

Pero entonces, qu es Flash hoy da? Flash es una herramienta de edicin con la que los diseadores
y desarrolladores pueden crear presentaciones, aplicaciones y contenido que permite la interaccin
del usuario. Los proyectos de Flash incluyen desde simples diseos hasta complejos sitios Web con
animaciones, contenido de video e interacciones complejas.

Dado el pequeo tamao de sus archivos, Flash resulta ideal para crear contenido que se distribuye a travs
de Internet. Para lograrlo, Flash utiliza en gran medida grficos vectoriales. Este tipo de grfico requiere
menos memoria y espacio de almacenamiento que las imgenes tradicionales de mapa de bits.

Lmina01 Evolucin de Flash (historia)

Actividad 01 Evolucin de Flash

1. En la red mundial de Internet hay miles de sitios con contenido creado en Flash, algunos de ellos
simples, pero otros muy complejos. La pgina www.thefwa.com (The Favourite Website Awards),
agrupa decenas de sitios reconocidos por su alta calidad. Visita este sitio y navega en algunas
pginas para que conozcas las posibilidades de Flash y te sirvan de inspiracin creativa.

2. Elige tres de los sitios visitados (los que ms te hayan gustado) y llena las siguientes formas:

Sitio 1 URL:
Anlisis de diseo
Anlisis de contenido
Anlisis de interactividad

9
 ANIMACIN CON FLASH
Flash CS4 CS5

Sitio 2 URL:
Anlisis de diseo
Anlisis de contenido
Anlisis de interactividad

Sitio 3 URL:
Anlisis de diseo
Anlisis de contenido
Anlisis de interactividad

Derechos de autor

Actualmente es posible encontrar una gran cantidad de informacin, imgenes fotogrficas y de vectores,
archivos de audio y otros contenidos en Internet y no siempre es fcil evitar caer el la tentacin de
utilizarlos para nuestros proyectos de Flash. Hacer esto conlleva el riesgo de usar informacin protegida
o con derechos de autor o Copyright .

El derecho de autor consiste en una seria de normas y derechos que la ley otorga al creador de una obra
literaria, cientfica, artstica o didctica para su uso y publicacin. Estos derechos varan segn el pas,
pero el uso de este tipo de trabajos sin permiso de su creador, puede ser legalmente sancionado.

Algunas de las obras originales que pueden ser protegidas (cualquiera que sea su forma de expresin,
soporte o medio) son: entrevistas, libros, folletos, obras dramticas o coreogrficas, composiciones
musicales (con o sin letra), grabaciones sonoras, cinematogrficas y/o audiovisuales, dibujos, pinturas,
esculturas, grabados, litografas, historietas, cmics, fotografias, grficos, mapas, planos, maquetas y
diseos arquitectnicos, de ingeniera, programas informticos y sitios web.

En Mxico, la Ley Federal del Derecho de Autor otorga derechos patrimoniales que estn vigentes
durante toda la vida del autor, ms 100 aos tras la fecha de su muerte o la fecha de publicacin. Por
esto, es muy importante el correcto uso del material grfico, de audio o video que puedes encontrar
circulando en Internet.

Y a pesar de que existen algunos sitios web que ofrecen archivos de uso libre, una buena recomendacin
es que trates de generar t mismo los diferentes elementos que utilizars en tus proyectos.

10
10
Requisitos del proyecto

En la mayora de los casos, los proyectos de Flash requieren de la manipulacin de los archivos grficos
(ilustraciones y fotos), de audio y video por medio de otros programas, por lo que es conveniente que
cuentes con conocimientos bsicos de otros programas tales como Photoshop o Ilustrator.

Adobe Photoshop:

Muchas veces los proyectos de Flash requieren el uso de imgenes fotogrficas. Estas, a diferencia de un
archivo compuesto por vectores, poseen una mayor cantidad de informacin para definir cada punto de
la imagen, lo que les confiere un mayor peso.

Recuerda que la mayora de las veces, los archivos de Flash estan destinados a Internet, por lo que es
aconsejable que todas las fotografas sean optimizadas para as tener pelculas ms giles al momento
de publicarlas.

Algunos puntos bsicos a considerar en el uso de fotografas en Flash son:

1. Las imgenes deben de tener el tamao final al que sern publicadas. Si los archivos que utilizars
no tienen el tamao adecuado para los requerimientos de tu proyecto de Flash, se debern redimen-
cionar desde un programa de edicin de imgenes fotogrficas (generalmente Adobe Photoshop).

2. Es aconsejable que estas imgenes tengan una resolucin adecuada; al no ser archivos que se
requieran imprimir, 72 dpi son suficientes.

3. Adobe Photoshop cuenta con una opcin para guardar documentos (Salvar para Web y Dispositivos
o Save for Web & Devices), la cual nos permite obtener archivos de poco peso y buena calidad.

4. Aunque Flash CS4 reconoce varios formatos de imgenes, los archivos JPG son recomendables.

Adobe Illustrator:

A diferencia de Photoshop, los programas de generacin de ilustraciones con base en vectores, crean
documentos de poco peso; estos tienen la desventaja de tener una apariencia poco real, pues no tienen
el nivel de detalle de una fotografa.

Para utilizar documentos de Illustrator en Flash, puedes guardarlos en formato Adobe Ilustrator (AI) e
importarlo dentro de Flash o simplemente copiar directamente de Illustrator y pegar en Flash. Algunas
opciones que te permiten estas maneras de trabajar son:

11
Diseo Multimedia 11
 ANIMACIN CON FLASH
Flash CS4 CS5

1. Pegar como mapa de Bits. Es la manera ms simple de pegar un archivo, este pasa como una
imagen de mapa de bits perdiendo las propiedades de los objetos vectoriales.

2. Mantener las capas (layers). Esta opcin permite conservar las capas originales en Flash.

3. Convertir capas en... Al utilizar esta herramienta, Flash puede convertir las capas de Illustrator a
fotogramas clave en una capa en particular.

4. Colocar objetos en la posicin original. Se conserva la misma ubicacin del material al pasarlo
de Illustrator a Flash.

Adobe Fireworks:

A diferencia de los dos programas anteriores, al utilizar material de Fireworks en Flash es posible
conservar la mayora de sus atributos originales, sin importar si estos son archivos PNG o materiales
grficos. Esto se debe a que originalmente ambos programas eran propiedad de Macromedia.

Algunas opciones que podrs utilizar al momento de importar archivos de Fireworks son:

1. Impotar como un mapa de bits plano. Elementos como capas, vectores o textos de nuestro
archivo original son reducidos a pixeles dejando de ser editables.

2. Importar No. de pgina. Permite seleccionar de un documento con varias pginas una en particu-
lar.Tambin es posible pegarlas todas. Al hacerlo, cada pgina se convertir en un movieclip.

Otros archivos que Flash tambin reconoce son los de AutoCAD y FreeHand (del FH7 al FH11). En ambos
casos, una vez importados, los archivos son editables.

Sonido:

En cuanto a sonido, Flash no puede grabar ni crear sonidos. Para utilizar este recurso en tus proyectos
debers grabarlos o utilizarlos por otros medios como un CD de sonidos o de un sitio web de libre
acceso. Siempre que quieras modificar la duracin, calidad o volumen ser necesario la utilizacin de un
programa de edicin de audio.

Cuando hayas importado tus archivos de audio a Flash, podrs sincronizar el sonido con animaciones,
reproducir uno o varios sonidos al mismo tiempo o utilizar efectos como balances y desvanecimientos.

12
12
Flash slo puede importar archivos de audio en los siguientes formatos:
1. MP3 (en plataformas Windows y Mac).
2. WAV (preferente en Windows).
3. AIFF (preferente en Mac).

Si tu equipo tiene instalado el QuickTime, podrs utilizar archivos WAV y AIFF en ambas plataformas.

As mismo, en lo referente al uso de videos, debers convertir los archivos a un formato que reconozca
Flash. La versin de CS4 es capaz de aceptar archivos de video compactados por el codec H.264. Este
codec (esquema de compresin/descompresin) est incluido en casi todos los programas de conversin
actuales, tales como Any Video Converter Free Version (de Anvsoft) o el QuickTimePro de Apple.

Un formato muy utilizado en Flash es Flash Video (FLV) obtenido por medio de Adobe Media Encorder,
programa que se instala en tu disco duro al instalar Flash. Este formato es compatible con las versiones
anteriores de Flash Player.

Imgenes Vectoriales

Recuerdas que en las clases de fsica se estudian los vectores? En diseo grfico un vector esta consti-
tuido por una serie de puntos y lneas, rectas o curvas, definidas matemticamente.

Las caractersticas de un vector son las siguientes:

a. Tienen una lnea de contorno (tambin llamado trazo) y un color de relleno. Las
caractersticas del contorno y del relleno se pueden cambiar en cualquier momento.
b. Los vectores se pueden agrupar, separar, recortar, intersectar y relacionar con otros vectores
en el dibujo.
c. Cada vector se manipula por separado del resto de los objetos: se puede ordenar de
cualquier manera y modificar sin afectar otros vectores.

Para comprender mejor por qu a estos objetos se les llama vectores, primero recuerda que en geome-
tra, un punto del plano se puede definir por sus coordenadas. Dos puntos cualesquiera se pueden unir
mediante una lnea recta.

Si en lugar de unir dos puntos con una recta se hace con una curva, los puntos se denominan nodos o
puntos de anclaje. La forma de la curva (suave o pronunciada) se define por otros puntos invisibles en
el dibujo, llamados puntos de control, manejadores o manecillas.

13
 ANIMACIN CON FLASH
Flash CS4 CS5

Nodo

Punto de control

Nodo

Punto de control

Nodo

Cualquier forma abierta o cerrada, como un polgono, rectngulo, elipse o una curva irregular, se basa
en nodos y puntos de control. Para rellenar un grfico vectorial es necesario que los puntos estn unidos
formando una lnea cerrada.

Los contornos o trazos pueden ser delgados o gruesos y tener una forma determinada. Esto permite crear
dibujos lineales o creaciones artsticas con un contorno caligrfico.
Ventajas de los Vectores

1. No importa el tamao en el que se dibuje o despliegue un vector: siempre aparecer con la misma
nitidez y calidad al escalarlo (hacerlo ms pequeo o ms grande), tanto en la pantalla como en la
impresin.

2. Cada objeto est definido por frmulas matemticas independientes al resto de los dems. Puede
escalarse, distorsionarse, cambiar de forma o resituarse sin afectar a los otros elementos del dibujo.

3. Se puede controlar con gran precisin la forma, orientacin y orden de los elementos.

4. Las imgenes vectoriales no estn limitadas a un rea rectangular, como los mapas de bits.

5. Cualquier cambio que se aplique a los objetos puede modificarse en cualquier momento: el
dibujo siempre es editable.

6. Se puede reutilizar un dibujo vectorial o parte de l en otros proyectos.

7. El peso del archivo es muy reducido, dado que no se almacena informacin para definir cada punto de la
pantalla.

8. Permite trabajar con texto sin limitaciones.

14
14
Desventajas de los Vectores

Los grficos vectoriales no pueden producir imgenes fotogrficas realistas, ya que estn hechos de reas
de color slido o degradado y no pueden representar los tonos continuos de una fotografa. Por eso la
mayora de las imgenes vectoriales tienen una apariencia de caricatura. Los vectores son de aspecto
fro, con un contorno o trazo perfecto, sin naturalidad.

Un uso frecuente que se da a la conversin de mapas de bits a vectores, es la necesidad de publicarlos

en Web. Los formatos ms comunes y aceptados para la imagen vectorial en Web son el Shockwave
Flash (SWF) y PNG.

Formatos de archivo

Existen diferentes aplicaciones que trabajan con archivos de tipo vectorial, como Adobe Illustrator ,
Corel Draw o Inkscape. Aunque cada aplicacin maneja sus formatos de archivo nativos, en general es
posible abrir y modificar los grficos creados en una aplicacin, utilizando otra aplicacin. Los formatos
de archivo nativos principales, reconocidos por otras aplicaciones son:

a. Adobe Illustrator (AI).

b. Corel Draw (CDR).
c. Corel Exchange (CMX).
d. Computer Graphics Metafile (CGM).
e. Inkscape (SVG).
f. Auto CAD (DXF).

Imgenes de Mapa de bits

Las imgenes de Mapa de bits o bitmaps, estn compuestas por pxeles. Los pxeles son los elementos
mnimos de imagen. Un mapa de bits es una cuadrcula de esos pequeos puntos individuales de color,
que estn ordenados de una forma determinada para definir un patrn y formar la imagen que observas
en pantalla.

Las imgenes bitmap dependen de la resolucin, es decir del nmero de pxeles que existen en un rea
determinada. La resolucin se mide en dpi o puntos por pulgada.

15
 ANIMACIN CON FLASH
Flash CS4 CS5

Debido a que los mapas de bits dependen de la resolucin, es difcil incrementar o disminuir su tamao
sin reducir la calidad de la imagen. Cuando se hace ms pequea una imagen bitmap, se eliminan
pxeles y cuando se hace ms grande se crean nuevos pxeles. Cuando se crean nuevos pxeles, el
programa de edicin que se est utilizando, estima el valor del color de los nuevos pxeles basado en los
ya existentes. El resultado siempre es una calidad reducida.

Los bitmaps pueden modificarse con programas como Microsoft Paint, Adobe Photoshop, Corel Photo-
Paint o Gimp, entre muchos otros.

Actividad 02 Recordando e investigando

Contesta las siguientes preguntas usando tus propias palabras:

1. Qu es un vector?

2. Qu es un pxel?

3. Dibuja un pxel.

4. Qu es un Mapa de Bits?

5. En el espacio en blanco especifica si estamos hablando de un vector o de un mapa de bits.

a. No importa el tamao al que se dibuje, siempre tendr la misma nitidez y calidad

al escalarlo.
Vector

16
16
 b. Se controla de forma precisa la forma, orientacin y orden de los elementos.

Vector
c. Depende de la resolucin y es difcil cambiar el tamao sin perder calidad.

Mapa de bits
d. Pierde pixeles si se hace ms pequeo.

Mapa de bits
e. El tamao del archivo es muy compacto.

Vector
6. Haz una pequea investigacin de las similitudes y diferencias entre Adobe Illustrator y Adobe
Photoshop. Creen una mesa de discusin entre compaeros y profesor para defender puntos de
vista acerca de las ventajas o desventajas de cada uno. Anota en este espacio tus conclusiones:

17
 ANIMACIN CON FLASH
Flash CS4 CS5

7. Crea un collage con recortes de revistas. Divide el rea del collage en dos partes. En una mitad
pega solamenete imgenes que sean ilustraciones vectoriales. En la otra mitad pega imgenes
que sean mapas de bits o fotografas.

18
18
Entorno de trabajo
El entorno de trabajo de Flash se compone de seis paneles principales, que pueden mostrarse, ocultarse
o moverse segn sea necesario. Si has utilizado Flash con anterioridad, podrs notar que en la versin
CS4, muchas tareas ahora se manejan de manera diferente, pues los desarrolladores de Adobe han
homologado la interfaz del programa con los dems productos de la Crative Suite tales como Photoshop
o Illustrator. Esto ha dado como resultado que el programa sea ms fcil e intuitivo.

Al igual que en las versiones anteriores a la CS4, todos los paneles se pueden mostrar u ocultar por
medio del Men Window.

Dependiendo de las necesidades de tu proyecto, estos paneles pueden organizarse de diferentes formas,
existiendo cuatro bsicos: el panel de Herramientas (Tools), Lnea de tiempo (Timeline), Escenario
(Stage) y Propiedades (Properties). Aunque estos pneles funcionan igual que las versiones anteriores,
su apariencia cambi en Flash CS4.

Te recomiendo que, mientras te familiarizas con el programa, utilices la distribucin predeterminada del
modo Clsico (Clasic) de los pneles de trabajo. Para mostrar las diferentes distribucines predeterminadas
utiliza el Men Ventana/Espacio de Trabajo/Clsico (Window/Workspace Layout/Clasic).

Tip
A los documentos de Flash se les llama pelculas debido a que tienen elementos
similares a los largometrajes. Por esta razn es ms sencillo comprender algunos
conceptos si los relacionas con el sptimo arte.

Escenario (Stage)
Situado en la parte central del programa, el escenario es el rea de trabajo rectangular donde se coloca
el contenido, ya sean grficos vectoriales, cuadros de texto, botones, movie clips o imgenes de mapa
de bits. Slo el contenido que est dentro de este rectngulo ser mostrado en la pelcula terminada.
Puedes utilizar reas fuera del rectngulo para situar objetos que despus entrarn a escena o para
objetos temporales de trabajo.

19
 ANIMACIN CON FLASH
Flash CS4 CS5

Lnea de tiempo (Timeline)

Muestra dos dimensiones de la pelcula: el tiempo (horizontalmente a travs de frames) y la profundidad
(verticalmente en layers o capas). Los componentes principales de la lnea de tiempo son los layers,
los frames y la cabeza lectora. Dependiendo del tipo de organizacin que hayas escogido, la lnea de
tiempo puede encontrarse en la parte superior o inferior de la pantalla; incluso, en el modo Depurar y
Desarrollador, no es visible.

1. Los layers son capas apiladas unas sobre otras, cada una de las cuales puede contener un grfico
diferente que aparece en el escenario. Los layers de un documento aparecen de forma vertical a
la izquierda de la lnea de tiempo. Todos los grficos que se colocan en el escenario se ubican en
algn layer. Los tipos de layers que se pueden insertar en la lnea de tiempo son: layers, guas, guas
para movimiento y mscaras. Al igual que la Lnea de tiempo, los layers pueden no ser visibles,
dependiendo del tipo de organizacin de paneles que hayas seleccionado.

2. Similar a un largometraje, los documentos de Flash dividen el tiempo en cuadros o frames. Los
frames contenidos en cada layer aparecen de forma horizontal, a la derecha del nombre del layer.
Los tipos de frames que se pueden insertar son: Frame, Keyframe y Blank Keyframe.

3. La cabeza lectora indica el frame actual que se muestra en el escenario. Mientras se reproduce una
pelcula de Flash, la cabeza lectora se desplaza de izquierda a derecha por la lnea de tiempo. Es
posible hacer que la cabeza lectora avance hacia atrs o se mueva a diferentes lugares, pero para
ello es necesario apoyarnos con algo de programacin.

Herramientas (Tools)
Las herramientas de este pnel permiten crear, editar, dibujar, pintar, seleccionar y modificar objetos,
as como cambiar la visualizacin del escenario. Si colocas tu puntero sobre las diferentes herramientas
podrs conocer el nombre y el atajo de teclado necesario para utilizarla.
Propiedades (Properties)
Desde este panel se pueden modificar los atributos mas utilizados de cualquier herramienta que est
activa o cualquier objeto que tengamos seleccionado en el escenario. Por lo tanto, el aspecto de este
panel variar dependiendo de lo que se tenga seleccionado.
Si seleccionas una herramienta del panel Tools, sin que se haya seleccionado ningn objeto
en el escenario, el panel de propiedades muestra y permite modificar las caractersticas de esa
herramienta, como el grosor o color.

Si seleccionas un objeto en el escenario, el panel de propiedades muestra y permite modificar

las propiedades de dicho objeto, como el color, la posicin y las dimensiones.

Si no hay ninguna herramienta ni objeto seleccionado, el panel de propiedades muestra las

caractersticas del documento, como el color de fondo, dimensiones y velocidad.

20
20
 Para asegurarte que no hay nada seleccionado, puedes tomar la herramienta Arrow (flecha negra) y
hacer un clic sobre un rea vaca del escenario.
Biblioteca de Smbolos (Library)
En este panel se guardan y organizan los smbolos creados en Flash, adems de archivos importados
tales como grficos, imgenes de mapa de bits, archivos de sonido y clips de vdeo. En este panel puedes
organizar los elementos creando carpetas.
Acciones (Actions)
El panel Acciones permite crear y editar cdigo en Action Script (el lenguaje de programacin de Flash)
para hacer la pelcula interactiva.

La distribucin de paneles se guarda cuando cierras el programa, de manera que al iniciarlo de nuevo, aparece
como lo dejaste la ltima vez. No olvides que siempre puedes regresar a la distribucin de paneles predeterminada,
utilizando el Men Ventana/Espacio de Trabajo/Clsico (Window/Workspace Layout/Clasic). En todas
las actividades de este curso, suponemos que ests trabajando con la distribucin predeterminada.

Actividad 03 Reconociendo el entorno

Observa el Video Flash 01 Entorno de trabajo y coloca los nombres del entorno de trabajo de Flash en
el lugar que corresponde en la imagen siguiente.

Herramientas
Lnea de tiempo

Biblioteca
de smbolos
Escenario
Propiedades
Acciones

21
 ANIMACIN CON FLASH
Flash CS4 CS5

Video 01 Entorno de rabajo de Flash

Cmo reorganizar los paneles

Todos los paneles tienen 4 reas de control para manejarlos como mejor te convenga. Analiza la
funcin de cada una de estas reas.

Utiliza la barra gris obscura para Utiliza el men del control del panel para cerrarlo
cambiar de posicin el Marco de y acceder a opciones relacionadas con la funcin
Aplicacin. de cada panel.

Haz clic en el nombre del

panel para minimizarlo
(colapsarlo) o desplegarlo
normalmente.

Arrastra desde los puntos

para colocar el panel en
otro lugar.

Tip
En la nueva interfaz de Flash CS4, todos los paneles y herramientas se concentran en
una ventana nica llamada Marco de Aplicacin (Application Frame). Esto es comn en
Windows, pero nuevo en esta versin asi como en otros programas de Mac.

22
22
Dibujar y colorear vectores
Flash trabaja primordialmente con grficos vectoriales. Un grafico vectorial se compone de trazos que
tienen propiedades como color, tamao, posicin, etc. Un grafico vectorial puede ser rotado, escalado o
deformado sin perder sus propiedades ni disminuir su calidad.

Para crear grficos vectoriales en Flash nos apoyamos del panel de herramientas, el cual est dividido
en cuatro secciones.
Herramientas vectoriales:
Se utilizan para dibujar, pintar, borrar, modificar formas, agregar texto, seleccionar, etc.
Herramientas de vistas:
Sirven para desplazarse por el rea de trabajo o para ampliar o reducir la vista de la misma.

Color de relleno y color de contorno:

Al dibujar los grficos vectoriales en Flash, se trabaja con dos elementos: el relleno y la lnea.

Opciones:
Muestra las variantes de la herramienta seleccionada.

Video 02 Herramientas de Flash

Actividad 04 Identificando herramientas

Observa detenidamente el Video 02 Herramientas de Flash y relaciona la imagen con su funcin. Une
con una lnea el icono con su descripcin:

23
ANIMACIN CON FLASH
Flash CS4 CS5

Arrow. Sirve para seleccionar y manipular objetos en el escenario.

Subselection. Sirve para seleccionar los puntos que dan forma a un grfico
vectorial.

Rotacin 3D.

Lasso. Permite seleccionar reas irregulares a mano alzada.

Pen. Se usa para crear polgonos, curvas y trazos controlados.

Text. Permite introducir textos.

Line. Permite crear lneas rectas.

Rectangle. Sirve para crear rectngulos o cuadrados. Si se mantiene presionada

la tecla <Shift> mientras utilizamos esta herramienta, se crearn cuadrados
perfectos. Al mantener presionado el botn de la herramienta Rectangle,
aparece la opcin para seleccionar la herramienta PoliStar.

Oval. Sirve para crear valos o crculos. Si se mantiene presionada la tecla

<Shift> mientras utilizamos esta herramienta, se crearn crculos perfectos.
Tambin existe Rectangle primitive (rectngulo simple) y Oval primitive (valo
simple), las diferencias entre los objetos creados con esta herramienta y los
creados con Rectangle y Oval radican en las opciones de Edicin, Modificacin
y Convertibilidad.

PoliStar. Sirve para crear polgonos o estrellas.

Pencil. Permite dibujar lneas o contornos a mano alzada.

Spray Brush. Este pincel puede hacer varias copias de cualquier smbolo.

Brush. Se emplea para aplicar rellenos. Se puede modificar su grosor y forma

de trazo.

Deco. Permite rellenar reas grandes con patrones decorativos.

Bone. Permite animar el movimiento de un brazo o una pierna adjuntando las

diferentes partes como si fueran una sola extremidad. Esta tcnica de animacin
se denomina Cinemtica inversa (IK).

24
 PaintBucket. Se utiliza para rellenar grficos o cambiar su color de relleno.

InkBottle. Se utiliza para modificar el color del contorno de los grficos.

Eyedropper. Se utiliza para tomar una muestra del color de relleno o

contorno de un grfico.

Eraser. Su funcin es eliminar grficos.

Hand. Al seleccionar esta opcin podemos mover el escenario arrastrando

con el ratn.

Zoom. Su funcin es aumentar la visin del escenario cada vez que

hagamos clic con esta herramienta.

Ajustar a objeto. Esta herramienta crea lneas magnticas que intentarn

unirse automticamente con otros objetos al momento de ser trazada.

Transform. Sirve para escalar, distorsionar y rotar grficos.

Gradient transform. Sirve para escalar, rotar y distorsionar rellenos, sin

afectar el grfico que los contiene.

Stroke Color. Establece el color del contorno de un grfico o de una lnea.

Al presionar este botn se despliega una paleta de colores disponibles.

Fill Color. Establece el color de relleno de un grfico. Al presionar este

botn se despliega una paleta de colores disponibles.

Los paneles de color trabajan con los sistemas RGB (rojo, verde y azul) y HSB (matz, saturacin y
brillo).

El primero mezcla diferentes valores de los 3 colores primarios aditivos (rojo, verde y azul) que al
combinarse entre s pueden formar cualquier color que despliega el monitor de la computadora.

Para seleccionar cualquier color mediante el segundo sistema, haz clic en cualquier parte del cuadro
multicolor y al moverte hacia arriba o hacia abajo modificars el matz o la saturacin respectivamente.
En el rectngulo vertical lateral puedes variar el brillo del color seleccionado.

25
ANIMACIN CON FLASH
Flash CS4 CS5

Cmo se comportan las formas en Flash

En su mayora, las herramientas de dibujo pueden crear trazos y rellenos al mismo tiempo. En objetos
como valos o rectngulos, Flash considera al trazo de manera independiente al relleno y ambos pueden
ser seleccionados o modificados por separado.

La forma en que el programa nos indica cul de los dos est seleccionado es marcndolos con una
pantalla punteada.

1 2 3

4 5 6

1. Un clic con la Herramienta Arrow sobre una lnea del contorno, seleccionar un segmento de lnea.
En el caso de un rectngulo, un clic selecciona slo un lado, pero como el contorno de un valo es
un solo segmento de lnea continua, un clic selecciona todo el contorno.

2. Un doble clic sobre el contorno lo selecciona todo.

3. Un clic sobre el relleno seleccionar slo el relleno. Podras moverlo o eliminarlo sin modificar el con-
torno.

4. Un doble clic sobre el relleno selecciona tanto el relleno como el contorno.

5. Para seleccionar reas mayores o slo parte de algn objeto, utiliza la herramienta Arrow y arrastra
enmarcando los objetos o partes a seleccionar.

6. Con un clic de la Herramienta Subseleccin (Subselection) podrs seleccionar los puntos de ancla
de un trazo de manera independiente.

26
Algunos objetos, como las lneas creadas con las herramientas Line, Pen y Pencil, slo tienen contorno y no
relleno. Otros objetos, como los creados con las herramientas Text y Brush, slo tienen relleno y no contorno.

Para aplicar un color de relleno, selecciona la figura y utiliza el panel de propiedades. Tambin puedes aplicar
rellenos con la herramienta Paint Bucket, haciendo clic con dicha herramienta sobre cualquier figura, est o
no seleccionada. Similarmente, los colores de contorno se aplican con la herramienta Ink Bottle.

Video 03 Dibujando vectores

Actividad 05 Dibujando vectores

En esta actividad vas a dibujar y colorear vectores, adems de conocer su comportamiento en Flash.
1. Abre un documento nuevo de Flash utilizando el Men Archivo/Nuevo (Men File/New) y selecciona
la opcin Flash File (AS2.0) en la ventana Generales. Analiza la lnea de tiempo. Todas las pelculas
nuevas de Flash tienen un layer y un frame en blanco.

2. Selecciona la herramienta Rectngulo (Rectangle) y dibuja un cuadrado perfecto en el centro del

escenario.

2 3 4

6 7 8 9

3. Selecciona el cuadrado con la herramienta Seleccin (Arrow) y cambia su color de relleno desde el
selector Color de relleno (Fill Color) en el panel de Propiedades.

27
ANIMACIN CON FLASH
Flash CS4 CS5

4. Selecciona la herramienta Oval y dibuja un crculo a un lado del cuadrado, dejando un espacio entre
las dos figuras. Es importante que el tamao del crculo sea igual o un poco ms grande que el del
cuadrado.

5. Selecciona el crculo con la herramienta Seleccin (Arrow) y cambia su color de relleno a uno
diferente al del cuadrado.

6. Selecciona el crculo y duplcalo con el Men Edicin/Duplicar (Menu Edit/Duplicate). Arrastra el

nuevo crculo al lado opuesto del cuadrado.

7. Acerca los dos crculos sobreponindolos al cuadrado.

8. Elimina los dos crculos. Observa como el cuadrado queda recortado.

9. Selecciona lo que qued del cuadrado. Usa Men Edicin/Copiar (Menu Edit/Copy) para copiar
la seleccin al portapapeles. Luego usa Men Edicin/Pegar en sitio (Menu Edit/Paste in Place)
para pegar la copia en el lugar donde estaba el original. Por ltimo, usa Men Modificar/Transfor-
mar/Rotar 90 en sentido de las manecillas del reloj (Menu Modify/Transform/Rotate 90
CW) y la nueva figura formar una cruz con la figura anterior.

10. Prueba la pelcula con Men Control/Probar pelcula (Menu Control/TestMovie).

11. Guarda el archivo con Men Archivo/Guardar (Menu File/Save) con el nombre actividad02.fla,
en la carpeta que tu profesor indique.

Tip
En Flash, si se sobreponen dos grficos de diferente color, se cortan. Si se sobreponen dos
grficos del mismo color, se agrupan. Si no quieres que unos grficos afecten a otros, debes
agruparlos, colocarlos en diferentes layers, o bien convertirlos en smbolos como estudiare-
mos ms adelante.

28
Texto (Text)
Para aadir texto a una pelcula Flash, selecciona la herramienta Texto (Text) y da clic en el lugar donde lo
quieres situar en el escenario. Los textos estn contenidos en un espacio de ancho determinado. Si al escribir
se sobrepasa este espacio, entonces el texto pasa a la siguiente lnea. En el panel de propiedades podemos
modificar los atributos de color, tamao, tipo de fuente, alineacin del texto e interlineado. Es posible aadir
hipervnculos (URL link) y podemos decidir si el texto ser seleccionable o no en la pelcula publicada.
Adems, puedes seleccionar si ser un texto esttico, texto dinmico o texto de entrada.

Panel de propiedades de los textos incluye opciones como textos dinmicos, tipo de letra, estilo, color, tamao, entre otros.

Texto Esttico (Static Text). Estos textos funcionan como si fueran imgenes: son textos que no se
modificarn al publicar la pelcula. Un texto esttico se puede usar para ttulos, mensajes o etiquetas que
no van a cambiar durante la reproduccin de la pelcula.

29
ANIMACIN CON FLASH
Flash CS4 CS5

Texto Dinmico (Dynamic Text). El contenido de estos textos puede ser modificado durante la
reproduccin de la pelcula publicada, normalmente mediante programacin. Mensajes como el
puntaje de un juego o la hora actual, son ejemplos de textos dinmicos.

Texto de Entrada (Input Text). Este tipo de texto se utiliza para que el usuario de la pelcula
terminada pueda introducir informacin, que puede ser manipulada mediante programacin. Cuando
una pelcula pide informacin al usuario, como su nombre, correo electrnico o comentarios, esta
informacin se introduce por lo regular en un texto de entrada.

Un texto seleccionado puede convertirse en caracteres separados utilizando el Men Modificar/

Separar (Modify/Break Apart) o la combinacin de teclas <Ctrl+B>. Si se aplica por segunda vez
este mismo comando, los caracteres separados se convierten en grficos vectoriales independientes,
que ya no pueden ser editados con la herramienta de texto.

Texto
editable

Letras
separadas

Grfico vectorial

Video 04 Trabajando con texto

30
 Actividad 06 Creando formas

Con el objetivo de que te familiarices con las herramientas de dibujo de Flash, debes crear, lo mejor
posible, los siguientes diseos. Incluye junto a cada uno un texto con su nombre.
1. Un telfono mvil.

2. Un automvil.

3. Una tortuga.

4. La silueta de una persona.

Trabajo con la lnea de tiempo (TimeLine)

La lnea de tiempo se utiliza para organizar las imgenes, grficos, sonidos e instrucciones de
programacin de una pelcula. Imagina que una pelcula Flash es como una pelcula de cine o una obra
de teatro: diferentes actores, objetos, grficos y secuencias sonoras pueden entrar o salir del escenario,
de acuerdo a las instrucciones que determine el director para cada momento.

De forma similar, Flash organiza los grficos, sonidos e instrucciones a lo largo de la lnea de tiempo
en cuadros o fotogramas consecutivos tambin llamados frames. De forma predeterminada, Flash
reproduce 12 cuadros (frames) cada segundo (frames per second o fps), pero es posible definir una
velocidad diferente, desde 0.01 hasta 120 fps.

Por otra parte, en una pelcula de cine no todos los actores y objetos estn en el mismo plano: hay
elementos de fondo mientras el resto se distribuyen unos delante o detrs de otros. En Flash esta
distribucin se logra con capas o layers. Cada layer es independiente, as que pueden modificarse los
objetos de un layer sin que afecten a los objetos de otros layers. Cada layer dispone de su propia
secuencia de frames, aunque durante la reproduccin todos corren en sincrona.

Cuando abres un nuevo documento de Flash, este tiene slo un frame, en un solo layer. A partir de ah, es
posible insertar tantos frames como sean necesarios y organizar el contenido en tantos Layers como quieras.

Para insertar un nuevo layer usa el Men Insertar/Lnea de Tiempo/Capa (Insert/TimeLine/

Layer) o bien con el botn Insertar capa (Insert Layer) de la Lnea de tiempo. Para eliminar un layer,
seleccinalo en la Lnea de tiempo y da clic en el botn Eliminar (Delete Layer).

31
ANIMACIN CON FLASH
Flash CS4 CS5

Cuando insertas nuevos frames, pueden ser de alguno de los siguientes tipos:

Keyframe (Fotograma clave): Marca un contenido nuevo en la pelcula. Se identifican por tener dentro un
punto negro. Para insertar un Keyframe en el lugar seleccionado de un layer, usa el Men Insertar/Lnea
de tiempo/Fotoframa clave (Insert/TimeLine/Keyframe). Para eliminar un Keyframe seleccionado, usa
el Men Edicin/Lnea de tiempo/Quitar Fotoframa (Edit/TimeLine/Clear Keyframe).

Frame (Fotograma normal): Son los frames que siguen a un Keyframe. No representan contenido
nuevo, ya que contienen exactamente lo mismo que el Keyframe que les precede. Se utilizan para
alargar la duracin de un contenido que permanece sin cambios durante cierto tiempo en la pelcula.
Para insertar un frame en el lugar seleccionado de un layer, ve al Men Insertar/Lnea de tiempo/
Fotograma (Insert/TimeLine/Frame). Para eliminar un frame utiliza Men Edicin/Lnea de tiempo/
Borrar Fotoframa (Edit/TimeLine/Clear Keyframe).
Blank Keyframe (Fotograma clave vaco): Son Keyframes sin contenido. Se identifican por tener
un punto blanco. Para insertar un Keyframe vaci ve al Men Insertar/Lnea de tiempo/Fotograma
clave vaco (Insert/TimeLine/Blank Keyframe). Para eliminar un Keyframe seleccionado, usa el Men
Edicin/Lnea de tiempo/Borrar Fotogramas (Edit/TimeLine/Clear Keyframe).

Abre el archivo Actividad08 de tu carpeta de actividades. Este documento es la animacin de un acrbata

organizada en diferentes Layers y frames. Analiza el documento y llena la siguiente tabla siguiendo el
mismo orden que tiene en la lnea de tiempo:
Fotograma clave vaco

Fotograma clave

Fotograma

Tip
Los Keyframes en Flash pueden identificarse no slo por nmero, sino tambin por
nombre. Para asignar un nombre a un Keyframe, seleccinalo en la lnea de tiempo y
escribe una etiqueta en el cuadro Etiqueta (Frame label) que se encuentra en el panel
de propiedades. Un Keyframe con un nombre asignado se identifica con una pequea
bandera roja en la lnea de tiempo.

32
 Video 05 Lnea de tiempo

Actividad 07 Reconociendo la lnea de tiempo

Observa detenidamente el Video 05 Lnea de tiempo y coloca los nombres de cada parte en la imagen
siguiente.
Capas

Cabeza lectora

Fotogramas

Candado

Nueva carpeta

33
ANIMACIN CON FLASH
Flash CS4 CS5

Actividad 08 Animando con la lnea de tiempo

1. Por qu algunos layers tienen un solo Keyframe, mientras que otros tienen varios?

Porque las capas o layers son independientes, pueden modificarse sin que afecten
los objetos de otros layers. Cada layer dispone de su propia secuencia de frames,
aunque durante la reproduccin todos corren en sincrona.

Layer Nombre del Layer Descripcin Keyframes

de contenido en los cuadros
1
2
3
4

2. En la Lnea de tiempo, utiliza los botones para ocultar todos los layers (primer punto a la derecha
del nombre de cada layer), excepto el que contiene el fondo.

3. Utiliza las herramientas para colorear los elementos del fondo. Cuando termines con el fondo,
bloquea este layer para que no pueda ser modificado (segundo punto a la derecha del nombre del
layer).

4. Muestra el layer siguiente y utiliza las herramientas para darle color. Bloquea el layer cuando termines.

5. Colorea as todos los layers. Observa que si en un layer hay ms de un Keyframe, es necesario
colorear cada uno, pues un Keyframe representa contenido nuevo.

6. Prueba la pelcula coloreada usando <Ctrl+Enter> y guarda tu trabajo con el nombre Acrobata08
en la carpeta que indique tu profesor.

34
Sonido (Sound)
Para hacer ms atractiva una pelcula o una animacin, Flash permite incorporar sonidos, que se importan
en formatos comunes como Wav, Aiff y MP3, entre otros, usando el Men Archivo/ Importar/Importar
a Biblioteca (File/Import/Import to library). Una vez importado, un sonido queda como un elemento
en la biblioteca de smbolos y puede usarse colocndolo en un frame o accediendo a l por medio de
programacin.

Video 06 Biblioteca de smbolos

El sonido en un frame puede ejecutarse bsicamente en dos modos de sincrona (Sync):

Evento (Event). El sonido se reproduce completo (de inicio a fin) en cuanto la reproduccin de la pelcula
llega al frame en el que se encuentra el sonido. Una vez iniciado, un evento de sonido contina hasta
terminar, independientemente de si la reproduccin de la pelcula sigue, se detiene o salta a un lugar
diferente, a menos que sea silenciado mediante programacin.

Flujo (Stream). Sincroniza el sonido con la Lnea de Tiempo. Si la reproduccin de la pelcula se detiene el
sonido tambin se detiene, y si la reproduccin salta a un lugar diferente, la secuencia del sonido tambin.

Cuando una pelcula Flash se publica en Internet, un sonido del tipo Event (Evento) debe descargar
completamente antes de que pueda ser reproducido. Un sonido de tipo Stream (Flujo) puede comenzar
a reproducirse conforme va descargando, de modo que es ms conveniente para uso en Web.

35
ANIMACIN CON FLASH
Flash CS4 CS5

A un sonido se le pueden incluir los siguientes efectos, directamente en el panel de propiedades:

1. Ninguno (None): el sonido no tiene ningn efecto y se reproduce tal como se import.

2. Canal Izquierdo (Left Channel): el sonido se reproduce solamente por el altavoz izquierdo.

3. Canal Derecho (Right Channel): el sonido se reproduce solamente por el altavoz derecho.

4. Reduccin progresiva a la Derecha (Fade left to right): el sonido comienza a escucharse por el
altavoz izquierdo y pasa a escucharse por el derecho.

5. Reduccin progresiva a la Izquierda (Fade right to left): el sonido comienza a escucharse por el
altavoz derecho y pasa a escucharse por el izquierdo.

6. Aumento progresivo (Fade in): el sonido comienza a reproducirse con el volumen en 0 y comienza
a aumentar hasta llegar al nivel original con el que se import.

7. Desvanecimiento (Fade out): el sonido comienza a reproducirse tal como se import y comienza a
disminuir el volumen hasta llegar al nivel 0.

8. Personalizado (Custom): puede modificarse la forma en que se escuchar en los altavoces.

Panel de sonido mostrando los dos modos de sincrona.

Video 07 Trabajando con sonido

36
 Actividad 09 Haciendo pruebas con sonido

1. Abre el documento de Flash Actividad09 que se encuentra en tu carpeta de actividades. Este

archivo tiene dos capas etiquetadas como Layer 1 y Layer 2. Ambas capas tienen una longitud de
50 cuadros.

2. Selecciona el Men Archivo/Importar/Importar a biblioteca (File/Import/Import to library),

e importa los dos archivos de sonido que se encuentran en la misma carpeta. Los sonidos se guar-
dan automticamente en la biblioteca cuando los importas. Comprubalo.

3. En la lnea de tiempo, selecciona el primer Keyframe del Layer 1.

4. Despus, en el panel de propiedades, abre el men colgante Sonido (Sound), que contiene todos
los archivos de sonido de la biblioteca. Selecciona el primer sonido (sound01). Con esto, el sonido
quedar asignado al Keyframe.

5. Cambia el modo de sincrona de este sonido (Sync) a Flujo (Stream). Observa que la forma de
onda del sonido se puede ver en la lnea de tiempo.

6. Arrastra el puntero del ratn sobre la lnea de tiempo. Debes hacer clic y arrastrar sobre la escala
que muestra los nmeros de cuadros, en la parte superior de la lnea de tiempo. Mientras arrastras
hacia atrs o hacia delante escuchars en sincrona el sonido asignado.

7. Prueba la pelcula presionando Men Control/Probar pelcula (Control/Test Movie) o la combina-

cin de teclas <Ctrl + Enter>.
Contesta:
a. Con qu caractersticas se reproduce el sonido?

b. Se escucha completo? Por qu?

Sincroniza el sonido con la lnea de tiempo. Si la reproduccin de la pelcula

se detiene el sonido tambin se detiene.

37
ANIMACIN CON FLASH
Flash CS4 CS5

8. Selecciona el Keyframe 40 del Layer 2.

9. Mediante el panel de propiedades, asigna a este frame el segundo sonido importado (sound02) con
el modo de sincrona Evento (Event).

Contesta las siguientes preguntas:

a. Es posible escuchar el segundo sonido arrastrando el puntero del ratn sobre los cuadros
de la lnea de tiempo?

No

b. Cuando ejecutas la pelcula, qu pasa si el evento de sonido es ms largo que el rango

de frames donde est asignado?
Un evento de sonido contina hasta terminar, independientemente de si la
reproduccin de la pelcula sigue, se detiene o salta a un lugar diferente.

10. Modifica los efectos de sonido para que el primer sonido slo se escuche por el altavoz izquierdo,
y el segundo sonido slo se escuche por el altavoz derecho.

11. Guarda el archivo con el nombre sonido09 en la carpeta que indique tu profesor.

Actividad 10 Conceptos clave

1. Para crear un grfico vectorial en Flash, se dibuja sobre:

a. la lnea de tiempo.
b. la biblioteca de smbolos.
c. el escenario.
d. el panel de propiedades.

38
2. Para crear la secuencia de una pelcula, los objetos se animan a lo largo de:

a. La lnea de tiempo.
b. La biblioteca de smbolos.
c. El escenario.
d. El panel de propiedades.

3. Los parmetros de los objetos se modifican en:

a. La lnea de tiempo.
b. La biblioteca de smbolos.
c. El escenario.
d. El panel de propiedades.

4. Para extender el contenido de un cuadro, sin cambios, debes insertar un:

a. Frame.
b. Keyframe.
c. Blank Keyframe.
d. Symbol.

39
ANIMACIN CON FLASH
Flash CS4 CS5

Smbolos, sus propiedades y sus lneas de tiempo

Un smbolo es un objeto que se guarda en la biblioteca con el principal objetivo de usarlo ms de una
vez durante la pelcula, o asignarle cdigo de programacin. La ventaja de utilizar smbolos es que se
pueden reutilizar cuantas veces se desee, sin aumentar el peso final del archivo.

Tambin se utilizan smbolos para crear animacin, ya que todo smbolo cuenta con su propia lnea de
tiempo, independiente de la lnea de tiempo principal de la pelcula, con sus propios layers y frames.
As, cada smbolo es como una pelcula de Flash completa, que est dentro de la pelcula principal. Un
smbolo puede incluso contener mas smbolos, cada uno con su propia lnea de tiempo.

Un smbolo se puede crear de varias maneras:

a. Se puede crear un smbolo vaco para despus crear su contenido. Utiliza el Men Insertar/
Nuevo smbolo (Insert/New Symbol) o la combinacin de teclas <Ctrl+F8>.

b. Se puede crear un smbolo a partir de cualquier objeto que se seleccione en el escenario.

Selecciona primero los elementos que se convertirn a smbolo y utiliza el Men
Modificar/Convertir a Smbolo (Modifiy/Convert to Symbol) o la tecla <F8>.

c. Se puede importar un archivo con el Men Archivo/Importar/Importar a biblioteca (File/

Import/Import to Library).

Tipos de smbolos
Al crear un smbolo por cualquier mtodo, debes elegir el tipo de smbolo que deseas crear. Los tres tipos
posibles son:

Movie clip. Se utiliza principalmente cuando el smbolo va a contener animacin.

Cuenta con una lnea de tiempo en la que podemos agregar los layers y los frames
que necesitemos. El comportamiento de un Movie Clip puede ser programado con
cdigo escrito en el lenguaje Action script.

Button (Botn). Es un smbolo que reacciona al puntero del ratn como lo hara un
botn estndar de Windows. Se utiliza para agregar interactividad en una pelcula
Flash. El comportamiento de un botn se programa con Action script.

Un smbolo de tipo botn, cuenta con una lnea de tiempo especial de cuatro
frames, en los que se definen los cuatro estados posibles de un botn: Up, Over,
Down y Hit.

40
 Reposo (Up). Este frame contiene la imagen, sonido y acciones del botn en su estado
normal o apagado.
Sobre (Over). Contiene la imagen, sonido y acciones del botn, que se despliegan cuando el
puntero del ratn est sobre l.
Presionado (Down). Contiene la imagen, sonido y acciones del botn, que se despliegan
cuando se hace clic sobre l.
Zona sensible (Hit). Contiene una imagen que delimita el rea sensible del botn.

Cualquiera de los cuatro frames puede o no tener contenido y por lo general slo
se utilizan los frames Up y Over. La lnea de tiempo de un botn tambin puede
tener tantos layers como se necesite.

Grfico (Graphic). Es un smbolo esttico que comnmente solo requiere un layer y un frame. No
puede ser programado con Action script.

Instancias y sus propiedades

Para utilizar un smbolo en algn frame de la pelcula, simplemente selecciona el frame en cuestin
y arrastra el smbolo desde la biblioteca hasta el escenario. Esto crea una instancia del smbolo,
que es una imagen clon del smbolo original. Puedes crear todas las instancias que quieras de un
mismo smbolo, modificar cada instancia cambiando sus dimensiones o propiedades, o aplicar diferente
comportamiento a cada una mediante programacin.

Cuando modificas cualquier instancia, el smbolo original no se ve afectado. En el caso opuesto, si

modificas el smbolo original, todas sus instancias son afectadas.

41
ANIMACIN CON FLASH
Flash CS4 CS5

Video 08 Tipos de smbolo y sus lneas de tiempo

Video 09 Cmo crear un botn

Video 10 Cmo crear un MovieClip

Actividad 11 Tipos de smbolos

Flash identifica los diferentes tipos de simbolo con un icono. Obseva las imgenes y escribe el nombre
de smbolo que corrresponde.

Clip de pelcula
Grfico

Botn

42
Una vez en el escenario, se pueden establecer los parmetros de una instancia usando el panel de
propiedades y de transformar.

Nombre del smbolo (Instance Name). Se utiliza para identificar la instancia de un smbolo. Es
muy recomendable asignar un nombre en cuanto se crea una instancia, ya que es necesario
para la programacin.
X. indica o asigna la posicin horizontal en el escenario.
Y. indica o asigna la posicin vertical en el escenario.
Ancho (Width). Muestra o determina el ancho de la instancia.
Alto (Heigh). Muestra o determina el alto de la instancia.
Rotacin (Rotate). Indica o asigna un ngulo de giro.
Sesgo (Skew). Indica o determina la deformacin oblicua de la instancia.
Color: Permite asignar un aspecto especial como:
a. Brillo (Brightness). Ajusta el color a ms blanco o negro.
b. Tinta (Tint). Pintar una instancia con un tono de la paleta de colores.
c. Avanzadas (Advanced). Ajusta con detalle los colores (tinte) y transparencia (alpha).
d. Alfa (Alpha). Aplica un porcentaje de transparencia a una instancia.

1. Abre el documento de Flash Actividad11 que se encuentra en tu carpeta de actividades.

2. Si no est visible, muestra la biblioteca de smbolos con Men Ventana/Biblioteca (Window/

Library) o las teclas <Ctrl+L>. Observa que la biblioteca tiene dos smbolos llamados bici y rueda.

3. Crea un segundo layer y selecciona en la lnea de tiempo el frame 1 del Layer 2.

4. Arrastra el smbolo bici de la biblioteca al escenario para crear una instancia.

5. Crea dos instancias del smbolo rueda en el escenario, acomodando cada una en el lugar apropiado
para formar la bicicleta.

43
ANIMACIN CON FLASH
Flash CS4 CS5

Nombre asignado
a la instancia.

Nombre del
smbolo original. Opciones de apariencia.

Flash te permite hacer modificaciones a un smbolo o instancia al cambiar, por ejemplo, sus dimensio-
nes, tamao, color o aplicar filtros.

Video 11 Instancias y sus propiedades

Actividad 12 Creando instancias

1. De forma similar a la actividad anterior y basndote en el mismo archivo, crea instancias para armar
4 bicicletas ms distribuidas en el escenario.

2. Utiliza el panel de propiedades, o bien la herramienta Men Transformacin/Transformacin

Libre (Transform/Free Transform), para modificar el tamao de las bicicletas, de manera que
parezca que unas estn ms cerca y otras ms lejos en la escena.

44
3. Seleccionando directamente en el escenario cada una de las instancias, utiliza el panel de pro-
piedades para aplicar un color diferente a cada bicicleta usando la opcin Tinta (Tint). Observa el
smbolo original en la biblioteca. Qu le ocurri?, por qu?
No le ocurri nada porque cuando modificas cualquier instancia, el smbolo original no
se ve afectado.

4. Por ltimo, haz esta prueba: En la biblioteca de smbolos da doble clic al smbolo bici. Se abrir la
lnea de tiempo del smbolo y el grfico original. Haz una pequea modificacin, como agregar unas
lneas decorativas o un texto sobre alguno de los tubos de la bicicleta.

5. Regresa a la lnea de tiempo principal haciendo clic sobre el botn Scene 1. Describe lo que ha
ocurrido y por qu ocurri:
El smbolo se modific porque si modificas el smbolo original, todas sus instancias
son afectadas.

6. Guarda el archivo con el nombre bici12 en la carpeta que indique tu profesor.

Actividad 13 Creando botones para una tarjeta interactiva

1. Abre en Flash la pelcula Actividad13, que se encuentra en tu carpeta de actividades.

2. Para poder realizar la actividad, antes de continuar, guarda el archivo en la carpeta que indique tu
profesor, con el nombre tarjeta13.

3. Abre la biblioteca y revisa su contenido. Consrvala abierta.

4. En el escenario hay 4 personajes en dos posiciones, que en esta actividad llamaremos normal y
feliz, respectivamente. Obsrvalos.

45
ANIMACIN CON FLASH
Flash CS4 CS5

5. Para poder trabajar mejor con los personajes, es conveniente convertirlos en smbolos. Selecciona
cada uno de forma independiente y convirtelo en un smbolo grfico. Al final debes tener 8
nuevos smbolos grficos en la biblioteca.

6. Una vez que los personajes estn como smbolos, brralos del escenario para que quede vaco.

Selecciona cada uno de los personajes y

convirtelos en smbolos grficos.

7. Con el Men Insert/New Symbol, crea un nuevo smbolo del tipo Button y dale el nombre persona
1. Vers la lnea de tiempo del botn, que por ahora est vaca.

8. De la biblioteca de smbolos, arrastra al rea de trabajo el primer personaje, en su posicin normal.

Ubcalo en medio, auxilindote de la pequea cruz que aparece al centro. Dale color al personaje.
Observa que el personaje ha quedado en el frame Up de la lnea de tiempo del botn.

9. Selecciona el frame Over de la lnea de tiempo del botn, e inserta un keyframe en blanco con el
Men Insert/Timeline/Blank Keyframe.

10. Arrastra al escenario el smbolo del primer personaje, en su posicin feliz. Ubcalo en el rea de
trabajo, auxilindote de la pequea cruz que aparece al centro. Dale color al personaje.

46
 11. Haz clics alternadamente en el frame Up y en el frame Over, para que preveas el comportamien-
to del botn, y ajustes la posicin de los personajes si es necesario.

12. Regresa a la lnea de tiempo principal, presionando el botn Scene 1 en la parte superior de la
lnea de tiempo.

Arrastra los smbolos en las diferentes casillas de la linea de tiempo del botn.

13. Ahora repite los pasos 7 a 12 para crear un nuevo botn para cada uno de los personajes restan-
tes, utilizando su posicin normal para el frame Up y su posicin feliz para el frame Over. Dale
color a todos los personajes.

14. Cuando termines de crear los 4 nuevos botones, arma una tarjeta de felicitacin con las siguien-
tes caractersticas:

a. Crea un fondo en un layer independiente.

b. En otro layer arrastra de la biblioteca algunos smbolos para mejorar la escena.
c. En un terecer layer encima de los anteriores, arrastra a la escena los botones que has
creado. No utilices los smbolos originales de los personajes, sino los botones que los
contienen, para que tengan interactividad.
d. Agrega en un layer diferente un texto apropiado.

15. Prueba la pelcula con el Men Control/Test Movie. Pasa el puntero del ratn sobre los botones
para ver cmo se comportan.

47
ANIMACIN CON FLASH
Flash CS4 CS5

16. De regreso a la pelcula principal, realiza las siguientes mejoras:

a. En la lnea de tiempo de cada botn, duplica el personaje feliz del frame Over al frame
Down, pero adems agrega en el frame Down un texto. Recuerda que al correr la pelcula,
el contenido del frame Down se ver cuando se haga clic sobre el botn.
b. Aplica al frame Over y/o Down de cada botn un sonido del tipo Event.

17. Prueba la pelcula y guarda los cambios.

Mscara (Mask)
Las mscaras tradicionales que se usan en fiestas o carnavales son objetos que cubren parcialmente la
cara de quien las usa. Se puede ver a travs de los agujeros que tiene, mientras el resto queda oculto
por la mscara misma.

En Flash se puede crear una capa mscara, que oculta lo que est en el layer que se encuentra debajo
de ella. Los agujeros a travs de los cuales se puede ver, se dibujan en la capa mscara o se crean
colocando smbolos vectoriales en ella.

Layer con crculo (mscara) y Layer con fotografa (enmascarado).

48
Para convertir cualquier capa seleccionada en mscara, da clic en el cono a la izquierda del nombre de
la capa y selecciona del men contextual la opcin Mask (Mscara) o da un clic con el botn secundario
del ratn sobre el nombre del Layer 2 y selecciona la opcin Mask del men contextual.

Para convertir cualquier capa en enmascarado, da clic en el mismo cono y selecciona la opcin
Masked (Con Mscara). Los layers que arrastres a niveles inferiores al designado como mscara, sern
enmascarados de manera automtica.

Video 12 Mscaras

Actividad 14 Creando una mscara

1. Abre un documento nuevo de Flash y selecciona el frame 1 del Layer 1.

2. Importa una fotografa directamente al escenario usando Men File/Import/Import to Stage.

Puedes importar alguna de las fotografas de la carpeta de la actividad 14 de tu carpeta de trabajo.

3. Inserta un nuevo layer (Layer 2) asegurndote que queda encima del existente.

4. Dibuja en el Layer 2 una figura simple, como un crculo o una estrella, usando las herramientas. El
color no es importante.

5. Haz un clic con el botn secundario del ratn sobre el nombre del Layer 2, y selecciona la opcin
Mask del men contextual. Despus, selecciona el layer 1 y activa la opcin Masked del men
contextual.

6. Describe lo que ocurre:

49
ANIMACIN CON FLASH
Flash CS4 CS5

a. Con la imagen en el Layer 1:

b. Con la imagen en el Layer 2:

c. Con las opciones de bloqueo de layers:

Si quieres modificar la figura en la mscara, basta desbloquear el layer correspondiente. Una vez
terminadas las modificaciones, vuelve a bloquear el layer para ver la mscara en accin.
7. Prueba la pelcula y guarda el archivo con el nombre mscara 14 en la carpeta de costumbre.

Tip
Un grfico vectorial o un Movie clip puede enmascarar cualquier objeto en el escenario,
pero una imagen no puede funcionar como mscara, slo puede ser enmascarada.

Principios de Animacin
En Flash se pueden utilizar tres tcnicas de animacin a lo largo de la lnea de tiempo de cualquier layer:

Animacin cuadro por cuadro (frame by frame)

En esta tcnica de animacin se utiliza un Keyframe para cada movimiento o cambio, tal y como fue
animado el acrbata que salta de la actividad 08. La tcnica tambin se conoce como animacin tradicional,
ya que cuadro por cuadro era la nica forma en que podan hacerse los dibujos animados antes de las
computadoras. Este tipo de animacin funciona muy bien a una velocidad de 12 frames por segundo.

50
Para crear animacin frame to frame, coloca la imagen original en un Keyframe. Inserta delante de
l un segundo Keyframe y haz alguna modificacin a la imagen. Inserta otro Keyframe y contina la
modificacin. Contina cuadro por cuadro hasta terminar la animacin.

Actividad 15 Animando cuadro por cuadro

1. En un nuevo documento de Flash utiliza las herramientas de dibujo para crear una animacin cuadro
por cuadro de un deportista en accin, con las siguientes caractersticas:

a. La pelcula debe ejecutarse a 10 fps.

b. Debes utilizar al menos 30 Keyframes, para lograr una animacin de 3 segundos.
c. Debe mostrar al menos un personaje, pero puede incluir otros elementos.

2. Conforme vas avanzando, puedes ir probando la ejecucin presionando la tecla <Enter>.

3. Guarda tu trabajo con el nombre frame 15 en la carpeta que indique tu profesor.

Video 13 Animacin cuadro por cuadro

Animacin Interpolacin Clsica

Esta tcnica de animacin es la nica que puede ser usada en versiones anteriores de Flash. Usa
solamente dos Keyframes: uno para la posicin inicial y otro para lo posicin final. Este tipo de animacin
tiene algunas particularidades:
a. Para que este tipo de animacin funcione, debes usar instancias del mismo smbolo en el
frame inicial y en el final.

b. Para crear una interpolacin clsica, inserta un Keyframe, que llamaremos Keyframe
inicial. Toma de la biblioteca una instancia del smbolo a animar y colcala en este primer
Keyframe.

51
ANIMACIN CON FLASH
Flash CS4 CS5

c. Despus, en la lnea de tiempo y en el mismo layer, rellena las celdas con fotogramas
regulares (tantos como quieras que dure la animacin). Al final de tu secuencia de
fotogramas, inserta un ltimo keyframe que llamaremos Keyframe final.

Fotogramas con pantalla azul en la lnea de tiempo los cules marcan una Interpolacin Clsica.

d. Modifica la instancia de este ltimo cuadro, cambiando su posicin, tamao y/o color.

e. Para aplicar la interpolacin clsica, selecciona el Keyframe inicial y aplica la opcin

Men Insertar/Interpolacin clsica.

f. Los fotogramas intermedios se volvern azules y aparecer una flecha continua negra del
fotograma inicial al fotograma final.

g. Otra caracterstica es que el editor de movimiento no funciona con interpolacines clsicas,

por lo que, al animar un objeto para que se traslade de un punto a otro en el escenario,
ste lo har en lnea recta. Si necesitas que tu objeto siga una trayectoria en particular,
tendrs que crear una gua de movimiento (motion guide).

Animacin Interpolacin de movimiento

Se utiliza principalmente para mover smbolos. En este tipo de interpolacin Flash CS4 crea animaciones
de un segundo a partir de un primer keyframe. Los frames subsecuentes al keyframe inicial aparecen de
forma automtica. El nmero de cuadros que usar en este segundo de animacin dependera del valor
que hallamos determinado al configurar el documento (fps).

Para crear una Interpolacin de Movimiento o Motion Tween debe existir una instancia de un smbolo
sobre el escenario. Esta instancia est en un Keyframe, que llamaremos Keyframe inicial.
a. Para aplicar el Motion Tween selecciona el Keyframe inicial y aplica la opcin Men
Insertar/Interpolacin de movimiento. Automticamente apareceran frames que
abarquen un segundo de animacin. Puedes modificar esta duracin arrastrando el ltimo
frame hacia delante o hacia atrs en la lnea de tiempo.

52
Fotogramas con una Interpolacin de movimiento donde aparece el Property Keyframe como un rombo negro.

b. En cualquier punto intermedio haz alguna modificacin a tu instancia.

c. Aparecer un pequeo rombo negro en el frame seleccionado. A este frame lo llamaremos

Property keyframe (fotograma clave de propiedad).

d. Si modificas la posicin de un objeto, Flash CS4 conecta la posicin original y la final con
una lnea de color punteada a la que llamaremos motion path (ruta de movimiento).

e. De manera predeterminada el motion path se genera como una lnea recta, si quieres que
el movimiento de tu objeto sea diferente, por ejemplo, siguiendo una lnea curva, con la
herramienta de seleccin (Arrow) modifica el Motion path segn tus necesidades.

Video 14 Animacin con Interpolacin

53
ANIMACIN CON FLASH
Flash CS4 CS5

Actividad 16 Animando con Motion Tween

1. En un nuevo documento de Flash, cambia la velocidad de reproduccin (frame rate) a 30 fps. Lo

puedes hacer en el panel de propiedades o bien con el Men Modify/Document.

2. Dibuja sobre el escenario un rectngulo de 120 px de ancho por 20 px de largo. Para que las
dimensiones sean exactas puedes modificar las propiedades W y H del rectngulo seleccionado
usando el panel de propiedades.

3. Selecciona la figura y convirtela en un smbolo del tipo Movie Clip. La animacin Motion Tween
no funciona en objetos que no son smbolos. Una vez convertido, tendrs el smbolo en la biblioteca
y una instancia en el escenario.

4. Centra horizontalmente el rectngulo en el escenario, y pgalo al borde superior.

5. Selecciona el frame 1 y asgnale un Motion Tween. Lo puedes hacer en Men Insertar/Interpolacin de

Movimiento. Deben aparecer frames hasta la casilla 30 marcados con color azul.

6. Selecciona el frame 30 y muvelo al borde inferior del escenario. Aparecer un pequeo rombo
negro en esta casilla de la lnea de tiempo.

7. Ahora selecciona la casilla 60 y inserta un nuevo keyframe. En esta casilla mueve de nuevo tu
objeto a la esquina superior derecha entintando esta instancia con otro color; utiliza el panel de
propiedades.

8. Con la herramienta seleccin (Arrow) transforma el ltimo recorrido del motion path para hacerlo
una curva.

9. Prueba la pelcula. Tambin puedes arrastrar el puntero del ratn sobre la escala de la lnea de
tiempo, para ver cada paso de la animacin.

10. Selecciona el Keyframe 1 y prueba las opciones Aceleracion (Ease) y Rotacin (Rotate) del panel
de propiedades.

54
11. Contesta:

a. Qu efecto tiene agregar un valor Ease positivo?

Da el efecto de una aceleracin rpida.

b. Qu efecto tiene agregar un valor Ease negativo?

Da el efecto de una aceleracin lenta.

c. Para qu sirve la opcin Rotate CW?

Rotar en el sentido de las manecillas del reloj.

d. Para qu sirve la opcin Rotate CCW?

Rotar en el sentido contrario a las manecillas del reloj.

e. Qu funcin tiene el parmetro times?

Indica el nmero de rotaciones del smbolo.

13. Guarda el archivo con el nombre motion 15 en la carpeta de costumbre.

Interpolacin de forma (ShapeTween)

Esta tcnica de animacin usa tambin slo dos Keyframes: uno inicial y otro final. Todos los pasos
intermedios son calculados automticamente por Flash durante la ejecucin de la pelcula. La nica
diferencia es que el Shape Tween funciona slo con grficos que no son smbolos. Se utiliza principalmente
para deformar vectores.
a. Para crear un Shape Tween debe existir un grfico sobre el escenario, que no sea un
smbolo, que no sea un grupo ni un objeto compuesto. Este grfico est en un Keyframe,
que llamaremos Keyframe inicial.

b. Despus, en la lnea de tiempo y en el mismo layer, se inserta un Keyframe final,

que normalmente estar varios cuadros adelante del Keyframe inicial (tan lejos como
quieras que dure la animacin). Recuerda que al insertar un Keyframe, Flash duplica
automticamente el contenido del Keyframe anterior, es decir crea una copia del grfico
inicial.

55
ANIMACIN CON FLASH
Flash CS4 CS5

c. Modifica este segundo grfico, cambiando su forma o color. Con esto, ya estn definidos
los Keyframes inicial y final.

Fotogramas con una pantalla verde aparecen al aplicar una Interpolacin de forma.

d. Para aplicar el Shape Tween selecciona el Keyframe inicial y en Men Insertar/

Interpolacin de Forma.

Este tipo de animacin tambin se ve mejor a velocidades entre 15 y 30 frames por segundo. En la
lnea de tiempo una Interpolacin de Forma (Shape Tween) se identifica con un punto negro, seguido
de una flecha que llega hasta el Keyframe final. El fondo es verde claro. Una lnea punteada indica que
se ha definido un Tweening, pero falta el Keyframe final.

Video 15 Shape Tween

Actividad 17 Animando con Shape Tween

1. En un nuevo documento de Flash, cambia la velocidad de reproduccin (frame rate) a 30 fps.

Selecciona el cuadro 1 del layer 1.

2. Escribe sobre el escenario una letra A mayscula y cambia su alto y ancho a 300 X 300 px. Centra
perfectamente la letra en el escenario.

3. Como el Shape Tween no funciona con objetos compuestos, separa la letra para convertirla en
grfico, con el Men Modificar/Separar (MenuModify/Break Apart).

56
4. Inserta un Keyframe en el cuadro 30 y otro en el cuadro 60 del layer 1.

5. Selecciona el Keyframe 30 y borra su contenido (una copia de la letra A). Quedar vaco el
espacio entre los frames 30 y 60.

6. Escribe sobre el escenario la letra B mayscula. Cntrala perfectamente en el escenario y ponle

un color diferente. Separa tambin esta letra en un grfico, con el Men Modificar/Separar
(MenuModify/Break Apart).

7. Selecciona el frame 1 del layer 1 y asgnale una Interpolacin de forma (Shape Tween), en
Men Insertar/Interpolacin de Forma. Debes ver una flecha continua que va del Keyframe
1 al Keyframe 30.

8. Asigna otra Interpolacin de forma (Shape Tween) entre el Keyframe 30 y el Keyframe 60.

9. Prueba la pelcula. Tambin puedes arrastrar el puntero del ratn sobre la escala de la lnea de
tiempo, para ver cada paso de la animacin.

10. Selecciona el Keyframe 1 y prueba las opciones Fusin (Blend) del panel de propiedades.

Contesta:

a. Para qu sirve el Blend Distributivo?

Crea una animacin en la que las formas intermedias son ms suaves y ms
irregulares.
b. Para qu sirve el Blend Angular?
Crea una animacin que mantiene las esquinas y las lneas rectas en las
formas intermedias.
11. Guarda el archivo con el nombre shape 16 en la carpeta de costumbre.

Observa las tres lneas de tiempo y escribe sobre la lnea cul es interpolacin de movimiento,
interpolacin clsica o interpolacin de forma.

57
ANIMACIN CON FLASH
Flash CS4 CS5

Actividad 18 Identificando Tweens

1. Observa las lneas de tiempo y escribe sobre la lnea de qu tipo de Tween se trata.

a.
Interpolacin clsica

b.
Interpolacin de forma

c.
Interpolacin de movimiento
Guas de movimiento (Motion Guide)
En un Motion Tween, cuando un objeto se mueve de una posicin inicial a una final, normalmente lo hace
en una trayectoria de lnea recta. Si se agrega una gua de movimiento se puede hacer que el movimiento
siga una lnea dibujada en una capa especial llamada Gua de Movimiento (Motion Guide).

1. Para crearle una gua de movimiento a un capa seleccionada, primero debes crear una nueva capa
gua en el nivel inmediato superior.

2. Despus, da clic en el cono a la izquierda del nombre de la nueva capa y selecciona del men
contextual la opcin Guide (Gua). Dibuja la trayectoria que deseas que siga tu objeto utilizando las
herramientas (normalmente el lpiz, la pluma o un pincel delgado) en el escenario.

3. Ahora regresa a la capa que contiene el objeto que movers y da clic en el cono a la izquierda del
nombre de la capa, selecciona del men contextual la opcin Guided (Con Gua).

4. Esta capa quedar subordinada a la informacin que tenga la Capa gua. Para realizar la animacin
de tu objeto, crea un Fotograma clave al inicio y otro al final de tu secuencia de movimiento.

5. Posiciona el centro de tu objeto en los extremos de la lnea gua (donde empezar el recorrido y
donde terminar). Al exportar la pelcula, la trayectoria dibujada ser invisible.

58
 Video 16 Guas de movimiento

Actividad 19 Siguiendo guas

Importante: Para realizar esta actividad es preciso haber comprendido bien las tcnicas para crear
animacin cuadro por cuadro y animacin con interpolacin clsica.

1. Abre en Flash la pelcula Actividad19.fla que se encuentra en tu CD de trabajo o carpeta de actividades.

2. Localiza en la biblioteca de smbolos el Movie clip llamado mariposa. brelo haciendo doble clic sobre
l. Puedes verificar que ests viendo la lnea de tiempo del smbolo y no la lnea de tiempo principal,
comprobando los botones de la esquina superior izquierda de la sub-ventana del documento. Este Mo-
vie clip cuenta con tres layers: en uno se encuentra el cuerpo y en los otros dos las alas de la mariposa.

3. Para simular el movimiento de las alas de la mariposa usars la tcnica de animacin cuadro por
cuadro. Localiza el layer donde est una de las alas e inserta un Keyframe en el cuadro 2.

4. Selecciona el ala en el cuadro 2 y modifica un poco su tamao. Tambin puedes deformarla para
simular el aleteo. Recuerda ir probando con la tecla <Enter> hasta lograr el efecto ms natural.

5. Haz lo mismo para animar el movimiento de la otra ala del insecto.

6. Regresa a la lnea de tiempo principal presionando el botn Scene 1.

Puedes deformar el ala para simular un efecto ms natural.

59
ANIMACIN CON FLASH
Flash CS4 CS5

7. Crea en el escenario una instancia del smbolo mariposa, que se encuentra en la biblioteca de smbolos.

8. Prueba la pelcula. Aunque la lnea de tiempo principal tiene un solo cuadro, el smbolo que contiene
se reproduce continuamente.

9. En la lnea de tiempo principal utiliza la tcnica de animacin con Interpolacin clsica para que la
mariposa se desplace en lnea recta por el escenario, desde la esquina inferior izquierda hasta la
esquina superior derecha. Utiliza al menos 30 cuadros para el movimiento.

10. Prueba la pelcula y revisa que la animacin funciona correctamente.

11. Ahora agrega al layer actual una gua de movimiento dando clic en el cono a la izquierda del
nombre de la nueva capa y selecciona del men contextual la opcin Guide (Gua).

12. En el nuevo layer, utiliza la herramienta lpiz para dibujar una trayectoria con curvas que deber
seguir la mariposa. Puedes usar la opcin de suavizar (Smooth) en la parte inferior de la barra de
herramientas, para que la trayectoria sea ms natural.

Con la herramieta lpiz dibuja la trayectoria que seguir la mariposa.

Capas Gua y Guiada en la lnea

de tiempo.

Debes anclar la instancia mariposa al punto Snap.

60
13. Selecciona la instancia de la mariposa en el Keyframe inicial del movimiento y muvela al punto
inicial de la trayectoria. Mientras la mueves se ve un pequeo crculo llamado snap, que se debe
anclar con la trayectoria.

14. De forma similar, selecciona la mariposa en el Keyframe final y muvela hasta que el snap se
ancle en el extremo final de la trayectoria.

15. Prueba la pelcula y guarda el archivo con el nombre trayectoria 18 en la carpeta de costumbre.

Filtros (Filters)
Los filtros permiten aadir atractivos efectos visuales a texto, botones y Movie Clips. No es posible
aplicar filtros a grficos que no son instancias de smbolos.

Flash cuenta con las siguientes opciones de filtros:

Drop Shadow (sombra).

Blur (desenfocar).

Glow (Iluminacin).

Bevel (Bisel).

Gradient Glow (Iluminacin degradada).

Gradient Bevel (Bisel degradado).

Adjust Color (Ajuste de color).

61
ANIMACIN CON FLASH
Flash CS4 CS5

Sombra Iluminado Bisel Ajuste

Desenfoque
de color

De estos, los utilizados ms frecuentemente son las sombras, los desenfoques y los biseles. Una caracterstica
exclusiva de las nuevas versiones de Flash es que permite animar los filtros utilizando un Motion Tween.

Para aplicar un filtro a un objeto seleccionado en el escenario, utiliza el panel Filters que se encuentra la
ventana de propiedades, pulsa el icono Add Filter y selecciona uno de los filtros disponibles. Al hacerlo,
aparecern algunas propiedades que puedes ajustar de acuerdo a tus necesidades como:
Strength (Intensidad)

Quality (Calidad)

Angle (Angulo)

Knockout (Extractor)

Outer/Inner (Exterior/Interior)

Es posible aadir uno o varios filtros a un objeto, que se aplican en el mismo orden en que son agregados.

Video 17 Filtros

62
 Actividad 20 Utilizando filtros

1. Abre en Flash la pelcula Actividad20 que se encuentra en la carpeta de actividades.

2. Desde la biblioteca de smbolos arrastra el Movie Clip acrbata al escenario.

3. Duplica 5 veces la instancia en el escenario, seleccionndola y usando el Men Edit/Duplicate o

bien la combinacin de teclas <Ctrl+D>.

4. Utiliza el panel de filtros para aplicar un efecto diferente a cada una de las instancias en el escenario.

5. Debajo de cada instancia, utiliza la herramienta de texto para escribir el nombre del filtro aplicado
y las propiedades o parmetros usados.

6. Prueba la pelcula y guarda el archivo en la carpeta que indique tu profesor.

63
ANIMACIN CON FLASH
Flash CS4 CS5

Actividad 21 Publicidad para Internet

Actualmente el medio publicitario ms utilizado en Internet es el banner, que es un recuadro que aparece
dentro del rea de un sitio o pgina Web y que contiene algn mensaje comercial. La mayora de los
banners aparecen horizontalmente en la parte superior de las pginas, pero tambin los hay verticales o
cuadrados, y pueden mostrarse en otras reas.

Algunos tipos de banner y sus dimensiones son:

a. Full banner: 480 X 60 pixeles

b. Leaderboard: 728 X 90 pixeles

c. Skyscrapper: 120 X 600 pixeles

d. Banner Botn: 120 X 60 pixeles

e. Robapgina 300 X 250 pixeles

1. Elige 5 temas publicitarios distintos y antalos aqu. Pueden referirse a productos, eventos escola-
res, espectculos, servicios u otros.

a.

b.

c.

d.

e.

2. Crea un banner para cada tema, usando cada uno de los 5 tipos y dimensiones especificados arriba.

64
 Utiliza un documento diferente para cada banner. Cada uno debe cumplir los siguientes requisitos
mnimos:

a. Velocidad de la pelcula de 30 fps.

b. Elementos que se muestran en diferentes momentos de la pelcula.

c. Incluir Motion Tween (adems al menos uno de los banners debe seguir una gua de
movimiento).

d. Incluir texto.

e. Incluir uso de filtros.

f. Al menos uno de los banners debe tener animacin cuadro por cuadro.

3. Prueba y guarda cada archivo con el nombre que consideres adecuado.

65
ANIMACIN CON FLASH
Flash CS4 CS5

Para la creacin de banners para internet, podemos bsicamente usar cualquier tamao segn nuestro
diseo nos lo permita, pero hay tamaos estndar como en muchas otras cosas.

Leaderboard (728 x 90)

Full Banner (468 x 60)

Half Banner (234 x 60) Micro Bar

(88 x 31)

Rectangle (180 x 150) Square Button

(125 x 125)

Large Rectangle (336 x 280)

Skyscaper Wide Skyscraper

(120 x 600) (160 x 600)

Medium Rectangle (300 x 250)

66
 Actividad 22 Creacin de un banner para un cliente

Aprenders como hacer un banner, en este caso para la Mueblera Ordaz, en un tamao estndar:
Medium Rectangle 300 x 250 pixeles.
1. Inicia un documento nuevo de Flash (Actionscript 2.0). Ve al Panel de Propiedades (Properties) y
presiona en el botn Tamao (Size) para ajustar las medidas de la escena e ingresa en el apartado
Dimensiones (Dimensions) introduce 300 en el parmetro que indica la medida horizontal (width)
y 250 en la que indica la vertical (height). En la velocidad de fotogramas (Frame rate) introduce
el valor de 30. Presiona OK.

2. Tenemos ahora nuestro documento para banner con las dimensiones y la velocidad establecida. Es hora
de importar lo que ser el fondo. Renombra la Capa1 (Layer 1) por fondo. Despus, selecciona el nico
Keyframe, que se encuentra en blanco, y ve al men Archivo/Importar/Importar a Escenario (File /
Import /Import to Stage). Busca en tu carpeta de actividades la carpeta Actividad22 y de ah, impor-
ta el archivo bg.png. Asegrate que el archivo se haya importado con las medidas correctas: 300x250
pxeles, adems de que se encuentre en la coordenada 0 en X y 0 en Y. Con esto ya tenemos nuestro
fondo, es hora de incluir los objetos que animaremos as como el logo de la mueblera.

67
ANIMACIN CON FLASH
Flash CS4 CS5

3. Ve al frame 280 de la capa Fondo, da clic derecho y presiona en Insertar Fotograma (Insert Frame), con
esto estamos haciendo visible el grafico del fondo durante todos los frames que durar nuestro banner.

Bloquea la capa Fondo y crea una nueva, renmbrala lmpara. Ahora importa el archivo lmpara.png
de la carpeta de este proyecto. Este archivo tiene 127 x 250 pixeles de ancho; verifica que tenga estas
dimensiones seleccionndolo y revisando sus propiedades en el panel Propiedades (Properties). Colcalo
en la posicin 0 en X y 0 en Y, y dando clic derecho sobre la lmpara convirtela en Clip de Pelcula
(MovieClip); nmbralo lmpara_mc.3c.png

4. Enseguida haz lo mismo con el archivo silln.png y logo.png, imprtalos, verifica que el silln
tenga una dimensin de 246 de ancho por 138 de alto, y el logo de 173 de ancho por 112 de
alto. Convierte ambos a Clip de Pelcula (MovieClip) y ponles por nombre silln_mc y logo_mc
respectivamente. Enseguida, crea dos capas nuevas y nmbralas silln y logo, coloca en ellas los
Movieclips que correspondan a cada una. Ordena tus capas de tal manera que quede como se
muestra en la siguiente imagen:

68
5. Ahora es cuando comenzamos a planear la animacin que tendr nuestro banner y en cmo se presen-
tar el logotipo de nuestra mueblera. Es importante que acomodes los MovieClips como se muestra en
la imagen siguiente, de esta manera ser ms fcil que sigas las instrucciones para animarlo.

6. Empuja <Shift + Flecha Izquierda> la lmpara a la izquierda, hasta que veas que sale de la escena.
Empuja ahora el silln hacia la derecha y colcalo fuera de la escena tambin. Realiza lo mismo con
el logo, empjalo hasta la parte derecha, fuera de escena.

Hasta aqu hemos terminado de colocar todos los elementos necesarios para comenzar a animar
nuestro banner. A partir de ahora con la ayuda de Motion Tween moveremos los diferentes elementos
para crear una animacin de entrada y salida de todos nuestros MovieClips.
7. Selecciona el Keyframe de la de la capa Lmpara, ve al frame 10 y da clic derecho para acceder al
men contextual y presiona en Insertar Fotograma Clave (Insert Keyframe), hemos indicado que
el MovieClip lmpara_mc deber estar en el mismo lugar durante esos 10 frames.

69
ANIMACIN CON FLASH
Flash CS4 CS5

Ahora ve al frame 18 de la misma capa y nuevamente inserta un Keyframe, mueve el MovieClip

al lugar en donde colocamos la lmpara dentro de la escena; con esto le estamos indicando que el
movimiento de la lmpara deber tomar 8 frames. Presiona botn derecho sobre la lnea de tiempo
entre el frame 10 y 18 de esta misma capa y selecciona Crear Interpolacin Clsica de Movimiento
(Create Classic Tween).

8. Realiza lo mismo con el silln, nicamente asegrate que la animacin le tome los mismos 8 frames
pero a partir del frame 24, es decir, del 24 al 32.

9. Para poder visualizar la animacin que llevamos hasta ahora, presiona <Enter>. Como ves, tene-
mos el movimiento de la lmpara y del silln. Es hora de animar el logotipo.

10. Inserta un keyframe sobre la capa logo en el frame 40, con ello indicamos que el logo debe estar
inmvil hasta llegado el frame 40.

11. Agrega un keyframe ms en la capa logo, pero ahora en el frame 52 para que nuestra animacin
de entrada del logo dure 12 frames.

70
12. Selecciona la imagen del logo estando en el fra-
me 40 toma la herramienta de Transformacin
Libre (Free Transform) y esclalo presionando
<Shift> un 160%, revisa este dato en el Panel
Transformacin (Transform).

13. Ve al frame 52 y mueve el logotipo en la escena

hasta que lo coloques en la posicin que haba-
mos planeado al principio. Agrega la Interpolacin
ClassicTween entre los frames 40 y 52.

14. Listo, ya tenemos la mitad de lo que ser nuestro banner. Es importante que dejemos por unos
instantes las imgenes sin movimiento, despus de todo, lo que quiere el cliente es que su marca
sea expuesta.

15. Es hora de retirar los elemento de escena, excepto el logo. Agrega un Keyframe en las capas de
Lmpara y Silln en el frame 120, a partir de ah comenzarn su movimiento de salida; agrega un
par mas de Keyframes en las mismas capas pero ahora en los frames 128, ah debern terminar
su animacin.

16. En el frame 128 empuja los smbolos lmpara_mc y silln_mc a la izquierda y derecha respectivamen-
te fuera del escenario. Crea el ClassicTween para ambas capas entre los frames 120 y 128.

71
ANIMACIN CON FLASH
Flash CS4 CS5

17. Para darle mejor presentacin al logo lo dejamos al final y lo situaremos al centro del banner, realiza
esa animacin del frame 132 al 148, recuerda poner entre estos frames el ClassicTween.

18. Agrega un Keyframe sobre la capa logo en el frame 188 y uno ms en el 200. Crea un ClassicTween
entre ellos y selecciona el grfico del logo que se encuentra en el frame 200.
Ve al panel Propiedades (Properties) y abre la opcin Efecto-Alfa (Color Alpha).

Asegrate que se encuentre el valor al 0%, con esto se efectuar un desvanecimiento del logotipo
dejndonos de nuevo el escenario limpio para que comience de nuevo la animacin.

13. Publica la pelcula <Control + Enter> y observa el resultado.

Tip
Puedes agregar un efecto de aceleracin o desaceleracin en tus Interpolaciones de Movimiento
Clsicas para obtener un movimiento ms fluido. Selecciona un frame entre dos Keyframes que
contengan una interpolacin y ve al Panel de Propiedades e ingresa en el indicador Ease un valor
de +100 cuando el grfico vaya entrando a escena y -100 para cuando este vaya saliendo.

72
 Actividad 23 Animacin con Pivotes

Flash nos permite animar objetos tomando como eje de movimiento un pivote que por default
encontramos en el centro de cada smbolo.

El pivote es representado por un pequeo crculo blanco y puede estar dentro o fuera del rea del
smbolo. Es visible nicamente cuando seleccionas el objeto, y es editable slo cuando es seleccionado
con la herramienta de Transformacin Libre (Free Transform).

Al girar el objeto, este girar usando como eje el lugar en donde hayamos colocado el pivote. Al
realizar el siguiente ejercicio comprenders el uso de los pivotes, adems de la animacin concatenada
en smbolos y distintas lneas de tiempo.

Abre de la carpeta Actividad23,

dentro de ella encontrars el
archivo Pndulos.fla, brelo.

En escena se encuentran 4 grupos: el soporte (a1), un brazo (a2) y dos pndulos (a3 y a4), todos
ellos en una sola capa: Pndulos. Realizaremos una animacin con ellos de manera que cada pndulo
se encuentre dentro del smbolo del brazo, y este a su vez, dentro del smbolo del soporte.

73
ANIMACIN CON FLASH
Flash CS4 CS5

1. Selecciona todos los elementos en el escenario encerrndolos dentro de un cuadro con la herramien-
ta de seleccin. Presiona el botn derecho de tu ratn sobre ellos y en el men contextual presiona
Convertir a smbolo (Convert to Symbol) nombra el smbolo como aparato_mc.

2. Ingresa dentro de este smbolo con doble clic sobre l. Ahora te encuentras en la lnea de tiempo de
aparato_mc y nuevamente los grficos son mostrados como grupos.

3. Crea una nueva capa y llmala Brazo. Tambin renombra la Capa 1, ponle Soporte.

4. Selecciona el brazo (a2) y los dos pndulos (a3 y a4) de los extremos, crtalos <Control + X> y
pgalos en la misma coordenada donde se encontraban: Editar/Pegar In situ (Edit/Paste in Place),
pero en la capa Brazo. En apariencia tendrs lo mismo, pero ordenado ahora en 2 capas.

5. Selecciona todo lo que tenga la capa Brazo, deben ser tres grupos (a2, a3 y a4). Convirtelos en
un smbolo MovieClip y nmbralo: brazo_mc; ingresa con doble clic sobre este ltimo para acceder
a su lnea de tiempo.

74
6. Dentro, ahora debers crear dos capas ms y renombrar las 3 que se encuentran en esta lnea
de tiempo. A continuacin, cortars y pegars en sitio los siguientes grupos, es importante que
queden en el mismo lugar exacto en donde se encuentran ahora. En una capa que llamars
Brazo Img, debes colocar el grupo a2, en otra con el nombre de Pndulo 1 coloca el a3 y por
ltimo en una capa con el nombre Pndulo 2, el grupo a4. El resultado de esto debe verse
de la siguiente manera.

7. El paso siguiente es convertir a MovieClip cada uno de los grupos a3 y a4 nmbralos pndulo1_mc
y pendulo2_mc respectivamente. Con esto lo que queda es animar nuestros pndulos, as como el
brazo posteriormente.

8. Selecciona el MovieClip pendulo1_mc (a3) con la herramienta de Trans-

formacin Libre (Free Transform) y asegrate que el pivote (representado
por un crculo blanco) est justo en el centro del eje grfico, para que al girar
parezca hacerlo por dicho eje. Haz lo mismo con el pndulo2_mc (a4). A
continuacin, un ejemplo del lugar en donde deben quedar los pivotes en los
dos MovieClips.

9. Con los pivotes en su lugar, ahora agrega Keyframes en la capa Pivote 1 en los frames 40 y 80. Ve
al Keyframe del frame 40 de la misma capa y gira el Pndulo 160 en el sentido de las manecillas
del reloj, puedes ayudarte del panel de transformacin o calcular los grados.

75
ANIMACIN CON FLASH
Flash CS4 CS5

10. Agrega interpolacin ClassicTween entre los Keyframes 1 y 40, tambin entre los 40 y 80. Como
la instancia de pndulo1_mc en el frame 80 no la movimos, est igual que la del frame 1; por lo
que nuestra animacin ser un ciclo perfecto.

11. Para agregar un efecto de aceleracin y desaceleracin como en estos movimientos sucede, se-
lecciona un frame entre el 1 y 40 y en el panel de propiedades modifica el valor de Aceleracin
(Ease) por 100, haz lo mismo seleccionando un frame entre el 40 y el 80 ingresa ahora un valor
en Aceleracin (Ease) de -100.

12. Realiza lo mismo con el MovieClip pndulo2_mc (a4); pero en este caso el movimiento debe ser
ms irregular usando el mismo nmero de frames. Primero, con la Herramienta de Transformacin
Libre (Free Transform), modifica el pivote asegurndote que este se encuentre en el eje grfico;
hecho esto, inserta Keyframes en los frames 20, 50, 65 y 80; recuerda que los Keyframes 1 y 80
deben quedar iguales para que nuestra animacin sea un ciclo, por lo tanto, slo modificaremos los
Keyframes 20, 50 y 65.

76
13. Ve al Keyframe 20 y gira el smbolo pndulo2_mc 160 en el sentido de las manecillas del reloj,
despus ve al Keyframe 50 y gralo 100 en sentido contrario, por ltimo, colcate en el frame 65
y gira de nuevo el objeto 160 en sentido de las manecillas del reloj.

14. Selecciona un frame entre cada Keyframe que contenga un Classic Tween para que en el panel de
Propiedades (Properties) a todos les cambies el valor a 100 en el indicador Ease. En el frame 80
de la capa brazo img inserta un Keyframe para que puedan verse los tres elementos durante todo
el ciclo de la animacin.

15. Hasta aqu hemos terminado con la animacin de los pndulos. Ahora comenzaremos con la ani-
macin de brazo_mc, da doble clic en un rea en blanco para saltar a la lnea de tiempo superior.
Ahora tenemos la vista con las capas brazo y soporte.

16. Asegurate que el pivote del MovieClip brazo_mc est en el centro del pivote grfico, como se
muestra en la siguiente imagen.

17. Ahora en el frame 1, gira brazo_mc 25 en contra del sentido de las manecillas del reloj. Esta ser la
posicin inicial y final de esta animacin. Agrega Keyframes en la capa brazo en los frames 60 y 100; en el
frame 60 gira el brazo_mc 55 en el sentido de las manecillas del reloj, hasta que lo veas de esta manera.

77
ANIMACIN CON FLASH
Flash CS4 CS5

18. Selecciona un frame entre el 1 y el 60 y agrega un Classic Tween, repite esta operacin entre el frame
60 y 100. Al terminar asegrate de insertar un frame en la posicin 100 de la capa Soporte, con ello
el grfico del soporte estar presente en toda la animacin. Puedes agregar en el campo Aceleracin
(Ease) en las dos interpolaciones del brazo el valor 100, para lograr un efecto ms natural.

19. Presiona nuevamente doble clic en algn espacio en blanco dentro del escenario para saltar a
la lnea de tiempo superior, que es la lnea de tiempo principal. Publica la pelcula presionando
<Control + Enter>.

Como puedes observar, las animaciones concatenadas van una dentro de otra y se mueven segn su
instancia superior, tal es el caso de los pndulos, que se mueven segn se mueve el brazo.

78
Tip
Cuando se hace girar un objeto con programacin ActionScript el programa ignora el pivote que
se edita con la herramienta de transformacin y en cambio, usa como pivote el punto de registro
de los MovieClips.

Actividad 24 Tarjeta Electrnica

Flash nos permite hacer animaciones muy sencillas de realizar, pero que a su vez con un buen diseo
pueden lucir muy profesionales.

Crearemos una tarjeta electrnica. Con un poco de creatividad y planeacin ser sumamente fcil
realizarla, veremos que las animaciones son realmente sencillas y nos basaremos en gran parte al uso
de guas de movimiento.

Las guas de movimiento (guide) son trazos que nos sirven para definir una ruta a seguir por un
smbolo, este ltimo se desliza por el trazo tomando como eje el pivote del objeto.

Entra a la carpeta Actividad24 en tu carpeta de actividades. Dentro de ella encontrars el archivo Feliz
viaje.fla, brelo.

79
ANIMACIN CON FLASH
Flash CS4 CS5

En este archivo encontramos 7 capas: ola3, ballena, ola2, pez, ola1, barco y fondo. Convierte a Clip
de pelcula (MovieClip) todos los grficos, excepto fondo, ya que es lo nico que no vamos a mover y
recuerda nombrarlos usando el mismo nombre de la capa, pero aadiendo al final _mc, el resultado
deber ser: ola3_mc, ballena_mc, ola2_mc, pez_mc, ola1_mc y barco_mc. Sigue los pasos a
continuacin.
1. Esconde todas las capas, excepto ola1, crearemos una gua de movimiento para hacer una anima-
cin circular de esta ola, y que de igual manera nos servir para las dos restantes.

2. Toma la herramienta valo (Oval) y asegrate que el trazo sea negro y que no tenga relleno, crea
una nueva capa, nmbrala gua_ola1 y colcala arriba de la capa ola1; hecho esto debers trazar
un valo sobre la capa que acabas de crear, cercirate que tenga el tamao en X de 50 y en Y de
20, esto lo podrs hacer desde el Panel de Propiedades (Properties).

3. Coloca el pequeo valo en el centro del grfico ola1; la parte superior del valo debe coincidir con
el pivote (crculo blanco que aparece al seleccionar el objeto) con la herramienta de Transfor-
macin Libre (Free transform tool).

4. Bloquea la capa ola1 y realiza un zoom al 400%, esto lo puedes hacer en el indicador activo del zoom.

5. Con la herramienta de Seleccin (Selec-

tion tool) realiza una pequea incisin en
la parte superior del valo, y elimina lo que
seleccionaste presionando la tecla <Supr>.
Este corte se hace debido a que toda Gua
de Movimiento debe tener un principio y un
final, as el programa realizar la animacin
del objeto que correr a travs de esa lnea,
que en este caso es un valo sin cerrar.

80
6. Da clic con el botn derecho sobre la capa gua_ola1 y selecciona la opcin Gua (Guide) del men
contextual. Con esto la capa queda configurada como una gua de Movimiento, pero an no tiene
asignada ninguna capa ni smbolo para que ste se desplace por la gua. Recuerda que la vista en
el escenario an esta en 400%.

7. Desbloquea y arrastra la capa ola1 y sultala justo encima de la capa gua_ola1, como si quisieras
ponerla dentro de la capa gua. Como ves, la capa ola1 se ha enlazado a la capa gua_ola1 y
esta, a su vez, ha cambiado su icono indicndonos que ya tiene un smbolo a mover.

8. Hasta este punto no tenemos ninguna animacin en nuestro archivo. Ve a la capa fondo y mustra-
la, pero no la desbloquees, en ella, inserta un frame en el cuadro 36 para que durante 36 frames
nuestro fondo est visible; haz lo mismo con la capa gua_ola1, ahora inserta un Keyframe en el
frame 36 de la capa ola1.

9. Ve al frame 1 de la capa ola1 y nuevamente con el zoom a 400%, toma la herramienta de Trans-
formacin Libre (Free Transform) y empuja con ayuda de las <Flechas de direccin> el grfico de
ola1_mc hasta que el pivote (crculo blanco central del objeto seleccionado) se encuentre con
el extremo derecho de la curva que forma el valo sin cerrar.

81
ANIMACIN CON FLASH
Flash CS4 CS5

10. Ve al frame 36 y haz lo mismo, empuja el grfico hasta que el pivote se encuentre con el
extremo opuesto.

11. Crea una Interpolacin de Movimiento Clsico (Create Classic Tween) entre el frame 1 y el 36.
Presiona <Control + Enter>.

Como vers, las olas se mueven de manera circular, este tipo movimiento con interpolacin es
nicamente posible con la ayuda de guas de movimiento. Realiza lo mismo con las otras dos capas
de olas: crea una capa para la gua de cada una y nmbralas gua_ola2 y gua_ola3. Para crear
una animacin ms de acuerdo con lo que es el movimiento del mar, coloca como gua en cada capa
valos con cortes como se muestra en la siguiente imagen para que tengan un movimiento cclico
desfasado:

Es importante que bloquees las dems capas con las que no ests trabajando para que no muevas los
elementos que en ellas se encuentran al crear los valos o hacer selecciones.

Para la gua de la ola2 procura que el valo sea un poco ms pequeo que el de la ola1 y el de la
ola3, a su vez ms chico que el de la ola2. Agrega sus fotogramas clave (Keyframes) y realiza las
Interpolaciones de Movimiento Clsicas (Create Classic Tween); al trmino de esto, asigna cada capa
de olas a su correspondiente gua (Paso 7).

82
12. Una vez que hayas terminado con estos pasos, prueba la pelcula con <Control + Enter>, deben
verse las 3 olas moverse en crculos; mientras tanto, el barco, el pez y la ballena aparecern slo en
el primer fotograma (frame) por lo que slo en un pequeo instante sern visibles.

13. Cierra el visor de la pelcula y regresa a la lnea de tiempo (time line), muestra la capa pez y se-
lecciona el grfico que ah se encuentra, modifica el pivote del pez arrastrando el crculo blanco que
se encuentra en el centro, llevndolo al centro del escenario pero un poco hacia la parte de abajo.

14. Inserta un fotograma clave (Keyframe) en el cuadro 36 y en este frame gira el pez de manera
que quede en el lado opuesto y llegue hasta la parte contraria del escenario, notars que el pez
gira en torno a un eje por debajo de l, y con esto, su trayectoria dibuja una curva. Agrega una
Interpolacin de Movimiento Clsico (Create Classic Tween) seleccionando un frame entre el 1 y
el 36 y seleccionando la opcin del men contextual.

15. Realiza lo mismo con la ballena, inserta un fotograma clave (Keyframe) en el cuadro 36, ah,
llvalo a el extremo opuesto del escenario empujndolo las flechas de tu teclado de forma com-
pletamente horizontal, coloca una Interpolacin de Movimiento Clsica (Create Classic Tween)
entre el frame 1 y 36. Para hacer que la ballena se asome un poco, ingresa un fotograma clave
(Keyframe) en el cuadro 20 y con <Flecha Hacia Arriba> empuja la ballena slo un poco hacia
arriba, lo suficiente para que su sonrisa sea visible.

Publica la pelcula. Ahora slo falta la animacin del barco. Bloquea todas las capas excepto la que
contiene el navio.

16. Selecciona el barco y modifica su pivote, colcalo

en la parte trasera inferior de la embarcacin.

83
ANIMACIN CON FLASH
Flash CS4 CS5

17. Agrega dos fotogramas clave (Keyframes), uno en el cuadro 15 y otro en el 36. Selecciona el
barco en el frame 15, gralo en el sentido de las manecillas del reloj levemente y muvelo hacia
abajo, slo un poco, al ejecutar la animacin vers si lo que lo moviste es suficiente o quizs
necesite un poco ms. Crea una interpolacin de movimiento entre los frames 1 al 15 y otra
entre el 16 y el 36.

18. Publica la pelcula <Control + Enter>, ahora

tienes una atractiva tarjeta virtual, slo debes
colocarle en una capa superior con texto un
emotivo mensaje: Feliz Viaje no estara mal.

Tip
Las guas de movimiento pueden seguir casi cualquier trazo, siempre y cuando ste no se
cruce consigo mismo.

84
 Actividad 25 Mscaras

Las mscaras funcionan como ventanas que nos permiten ver o esconder el contenido de una o ms
capas. Puedes usar varias en el mismo archivo, en la misma lnea de tiempo y al mismo tiempo. Con
ellas podrs enmascarar contenidos de diferentes tipos tales como trazos, rellenos, mapas de bits y hasta
videos que hayas importado. Es importante recordar que el uso de mscaras requiere de un pequeo
esfuerzo de nuestro equipo al momento de presentar la pelcula, por lo que el uso de varias de ellas
debe ser bien justificado.

A continuacin, aprenders como esconder

parte de un escenario haciendo una animacin
del fondo del mar. En tu carpeta de actividades
encontraras la carpeta Actividad25, dentro de
ella encontrars el archivo Fondo del mar,
brelo.

Como puedes ver, en este archivo se encuentran ya algunas capas y objetos necesarios para este ejercicio.
De abajo hacia arriba: la capa fondo, pez y tiburn, las dos ltimas vacas. Comenzaremos colocando
tanto el pez como el tiburn, seguiremos con la animacin y al final vamos a enmascarar.

1. Selecciona el Keyframe vaco de la capa pez y abre el Panel Biblioteca (Library), ah se encuentra
el MovieClip pez_mc, arrstralo al escenario y colcalo a la derecha del fondo del mar que se en-
cuentra al centro del rea de trabajo. Para este
ejercicio hemos dejado ms grande el escenario
para que al momento de publicar la pelcula po-
damos observar mejor el efecto de la mscara.

85
ANIMACIN CON FLASH
Flash CS4 CS5

2. Realiza la misma operacin con el smbolo tiburn_mc, colcalo en la capa tiburn, pero ste al
lado izquierdo de la imagen de fondo.

3. Inserta en ambas capas, tiburn y pez, Keyframes en el frame 50 seleccionando de manera simult-
nea los dos frames, haciendo clic derecho y presionando en el men contextual Insertar Keyframe
(Insert Keyframe). Esta es una manera muy sencilla de agregar dos o ms frames o Keyframes
al mismo tiempo.

4. Presiona con el botn derecho en el frame 81 de la capa fondo e inserta un frame (Insert Frame),
este frame ser el ltimo de nuestra animacin del movimiento tanto del pez como del tiburn.

5. Selecciona el Keyframe 50 de la capa pez y arrastra el smbolo del pez a la parte izquierda del
escenario, es decir, debe quedar fuera del grfico de fondo, sobre el rea blanca.

6. Realiza lo mismo con el tiburn; en el frame 50, llvalo al lado opuesto del escenario de manera
que lo veamos en la parte blanca.

7. Nuevamente selecciona un frame de cada capa, cualquiera entre el 1 y el 50, haciendo clic y
arrastrando para seleccionar hacia la otra capa, presiona sobre la seleccin de dos frames el botn
derecho de tu mouse y haz clic en Crear Interpolacin Clsica de Movimiento (Classic Tween),
con esto queda hecha la interpolacin en ambas capas.

8. A continuacin, inserta un Keyframe vacio (Blank Keyframe) en las capas pez y tiburn en el
frame 51 utilizando la misma tcnica de seleccin de frames.

9. Selecciona todos los frames que hemos utilizado de la capa tiburn (del 1 al 51) y arrstralos hasta
que el primer frame se encuentre en la posicin 30, con ello el Keyframe en blanco de esta capa
se sita en el frame 81.

86
10. Presiona <Control + Enter> y observa lo que sucede. El pez como el tiburn pasan por el fondo,
salen de este y repentinamente desaparecen, ya que el Keyframe en blanco al final de las interpo-
laciones evita que el smbolo siga en el escenario. Cierra la reproduccin de la pelcula.

11. Agrega una capa nueva y nmbrala: mscara, es importante que esta se encuentre por encima
de las otras tres.

12. Selecciona el Keyframe en blanco que se encuentra en la capa mscara y toma la herramienta Rec-
tngulo (Rectangle), con ella traza un rectngulo procurando que este sea del mismo tamao que
el grfico del fondo del mar; no importa el color de relleno ni del trazo. En este punto es importante
entender que lo que estamos colocando en la capa mscara nos servir como ventana.

13. Da clic derecho sobre el nombre de la capa mas-

cara; selecciona la opcin Mscara (Mask) del
men contextual. Con esto le has asignado la
funcin de mscara a esta capa. Nota como su
icono cambi.

14. Como ltimo paso, toma cada una de las capas pez y fondo, de una en una y arrstralas hasta la
capa mscara, sin soltar, observa cmo interacta el indicador de la posicin en la que se colocar
la capa que arrastras. Si lo hiciste correctamente la capa que soltaste se ver en un orden jerrquico
diferente, esto lo puedes ver en la alineacin de los mismos nombres de las capas. Si no lo logras
a la primera, vuelve a intentarlo.

15. Ya que tengas las dos capas colocadas dentro de la capa mscara, bloqualas todas excepto la
capa fondo. Publica la pelcula, <Control + Enter>

87
ANIMACIN CON FLASH
Flash CS4 CS5

Como puedes notar, tanto el pez como el tiburn se ocultan mientras que van saliendo del rea del
rectngulo que contiene la capa mscara. Ahora experimenta un poco con esa capa, desbloquala y
escala al 50% el rectngulo. Observa qu sucede si pones otra figura en lugar del rectngulo como una
estrella o un crculo.

Tip
El aspecto en que lucir el efecto de la capa mscara slo es visible cuando esta y las capas
que contiene dentro estn bloqueadas. La capa mscara no funciona con trazos, slo
admite rellenos y smbolos.

88