con Flash
Flash CS4 y CS5
PROFESOR
ISBN 978-607-7272-92-2
9 786077 272922
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.
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
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
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
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
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
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
1 Entorno de Trabajo 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
Texto Esttco (Static Text) Escoge el tipo de texto adecuado para cada
Texto Dinmico (Dinamic Text) proecto.
1 Texto (Text) Texto de entrada (Input Text) Emplea la linea de tiempo reconociendo los
Trabajo con la Lnea de tiempo elementos que la componen y organizando los
(Timeline) elementos del escenario para crear animaciones.
II
DISEO MULTIMEDIA
Propuesta Didctica
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
IV
DISEO MULTIMEDIA
Propuesta Didctica
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.
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
Total de
semanas 9
VI
DISEO MULTIMEDIA
Propuesta Didctica
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.
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.
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.
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.
7. El peso del archivo es muy reducido, dado que no se almacena informacin para definir cada punto de la
pantalla.
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.
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:
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.
1. Qu es un vector?
2. Qu es un pxel?
3. Dibuja un pxel.
4. Qu es un Mapa de Bits?
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
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.
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.
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
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.
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.
Opciones:
Muestra las variantes de la herramienta seleccionada.
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
Subselection. Sirve para seleccionar los puntos que dan forma a un grfico
vectorial.
Rotacin 3D.
Spray Brush. Este pincel puede hacer varias copias de cualquier smbolo.
24
PaintBucket. Se utiliza para rellenar grficos o cambiar su color de relleno.
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
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.
3. Un clic sobre el relleno seleccionar slo el relleno. Podras moverlo o eliminarlo sin modificar el con-
torno.
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.
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 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.
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.
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.
Texto
editable
Letras
separadas
Grfico vectorial
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.
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.
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).
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
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
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.
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.
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
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.
36
Actividad 09 Haciendo pruebas con sonido
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.
37
ANIMACIN CON FLASH
Flash CS4 CS5
9. Mediante el panel de propiedades, asigna a este frame el segundo sonido importado (sound02) con
el modo de sincrona Evento (Event).
No
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.
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.
a. La lnea de tiempo.
b. La biblioteca de smbolos.
c. El escenario.
d. El panel de propiedades.
a. Frame.
b. Keyframe.
c. Blank Keyframe.
d. Symbol.
39
ANIMACIN CON FLASH
Flash CS4 CS5
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.
Tipos de smbolos
Al crear un smbolo por cualquier mtodo, debes elegir el tipo de smbolo que deseas crear. Los tres tipos
posibles son:
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.
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.
41
ANIMACIN CON FLASH
Flash CS4 CS5
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.
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.
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.
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.
2. Para poder realizar la actividad, antes de continuar, guarda el archivo en la carpeta que indique tu
profesor, con el nombre tarjeta13.
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.
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.
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:
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
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.
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.
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
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.
49
ANIMACIN CON FLASH
Flash CS4 CS5
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:
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.
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:
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.
f. Los fotogramas intermedios se volvern azules y aparecer una flecha continua negra del
fotograma inicial al fotograma final.
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.
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.
53
ANIMACIN CON FLASH
Flash CS4 CS5
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.
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:
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.
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.
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.
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.
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:
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
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
Importante: Para realizar esta actividad es preciso haber comprendido bien las tcnicas para crear
animacin cuadro por cuadro y animacin con interpolacin clsica.
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.
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.
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.
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.
Blur (desenfocar).
Glow (Iluminacin).
Bevel (Bisel).
61
ANIMACIN CON FLASH
Flash CS4 CS5
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
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.
63
ANIMACIN CON FLASH
Flash CS4 CS5
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.
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:
c. Incluir Motion Tween (adems al menos uno de los banners debe seguir una gua de
movimiento).
d. Incluir texto.
f. Al menos uno de los banners debe tener animacin cuadro por cuadro.
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.
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
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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