Flash 8

1. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
Capas, Fotogramas, Línea de Tiempo
Línea de Tiempo: La Línea de Tiempo representa una
forma de ver los fotogramas de modo simplificado. Consta
de 2 partes.
1) Los Fotogramas (frames) que vienen delimitados por
líneas verticales (formando rectángulos)
2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto
dura o cuándo aparecerá en la película.
Además, en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el
Número de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.0 en la imagen) y el
Tiempo de película transcurrido (0.0s en la imagen).
A nivel conceptual, la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. Es decir, la
película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de
otro, en el orden que establece la misma Línea de tiempo.
Un fotograma representa el contenido de la película en un instante de tiempo. Por tanto, una animación
no es más que una sucesión de fotogramas. Todo esto se puede controlar desde la Línea de
Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qué
tipos de fotogramas hay y cuáles son sus rasgos.
Fotograma Clave (KeyFrame) : Son fotogramas con un contenido
especifíco, se crean, por tanto, para insertar en ellos un nuevo contenido
no existente en la película. Se identifican por tener un punto negro en el
centro y cuando esté vacío se le diferencia por una línea negra vertical.
Fotograma Normal (Normal Frame): Estos fotogramas siempre siguen a los fotogramas clave, no
representan contenido nuevo y son de color gris.
El último fotograma de una secuencia de fotogramas normales viene
representado por un cuadrado blanco sobre fondo gris.
En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su
contenido no es nuevo, esto es, es el mismo que el del fotograma 1.
Como vemos, su misión es prolongar la duración de un fotograma clave
o keyframe.
Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro
de la Línea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la película y Flash no

2. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
los tendrá en cuenta al publicar la película. En la imagen anterior, son fotogramas contenedor todos los
fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.
Fotograma Vacío: Son fotogramas sin contenido, Su color es blanco.
En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas
vacíos. No debemos confundirlos con los fotogramas contenedor, pues
estos últimos vienen delimitados por líneas verticales grises (no negras).
Si se inserta algo en estos fotogramas, pasan a ser Keyframes.
Es importante resaltar que Flash no ignora estos fotogramas y
simplemente mostrará una imagen en blanco. (no dará por terminada la
animación). De modo que si queremos que un objeto aparezca en el
fotograma 1 y después otra vez en el fotograma 10. Los fotogramas del 2
al 9 deberán ser fotogramas vacíos ya que así el objeto "desaparecerá" y
volverá a aparecer.
Fotograma Etiquetado (Label Frame): Contiene en la parte superior
una "bandera" roja que indica que tienen un nombre asociado. Dicho
nombre se establece desde el Panel "Frame". Si la duración del frame es
la suficiente, se puede leer el nombre (o etiqueta) que identifica al
conjunto de fotogramas.
Fot. con Acciones
Fotograma con Acciones asociadas: Contienen en la parte superior una
"a" que indica que tienen una acción asociada. Estos fotogramas son
especialmente importantes, pues estas acciones, en principio "ocultas"
(para verlas hay que acceder al Panel Acciones) pueden cambiar el
comportamiento de la película. En la imagen, la acción existente en el
fotograma 1 afecta también al 2 y al 3 (por ser fotogramas normales). El
fotograma 4 no tiene acciones y sí las tiene el 5.
Fotogramas Animados: Pueden ser de 2 tipos:
1) Fotogramas de Animación de Movimiento: Vienen caracterizados por el color morado y representa
el movimiento (con o sin efectos) de un objeto, que pasa de la posición del Keyframe inicial al final.
Para representar esta animación aparece una flecha entre estos Keyframes.
Esta imagen representa un ejemplo. Del frame 1 se pasa al 6, (Flash
representará el movimiento entre ambas posiciones en la película final) y
del 6 al 11. Otro movimiento.
2) Fotogramas de animación de Forma: Vienen caracterizados por el color verde y representan un
cambio en la forma de un objeto, que pasa de la forma que tenía en el Keyframe inicial a la del final.

3. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
Para representar esta animación aparece una flecha entre estos Keyframes.
Este ejemplo, similar al de arriba representa el cambio de forma de un
objeto. En el frame 1 tendría la forma original, en el frame 5, forma de
cuadrado (por ejemplo) y en el 11, otra forma distinta.
En esta última imagen aparecen casi todos los tipos de fotogramas, ¿los
reconoces?
Las Capas
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Una Capa se puede definir
como una película independiente de un único nivel. Es decir, una capa contiene su propia Línea de
Tiempo (con infinitos fotogramas).
Los objetos que estén en una determinada capa comparten fotograma y por tanto, pueden "mezclarse"
entre sí. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no
interfieran entre sí. Para ello, crearemos tantas capas como sea necesario. El uso de múltiples capas
además, da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los sonidos en una
capa independiente llamada "Sonidos", por ejemplo).
La vista standard de una capa es la que muestra la imagen.
Veamos para qué sirven los distintos botones y cómo usarlos.
Insertar Capas : Como su nombre indica, sirve
para Insertar capas en la escena actual. Inserta capas normales
(en el siguiente punto se verán los distintos tipos de capas).
Añadir Capa Guía : Inserta una capa de tipo guía. Se tratan
en profundidad el siguiente punto.
Borrar Capa : Borra la capa seleccionada.
Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.

4. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
Propiedades de Capa: Si hacemos doble clic en el icono
, podremos acceder a un panel con las propiedades de la
capa en la que hayamos hecho clic. Podremos modificar
todas las opciones que hemos comentado anteriormente y
alguna más de menor importancia
Aquí puedes cambiar diferentes opciones sobre la capa, como
su nombre o su color. También puedes bloquearla u ocultarla.
Pero haremos especial hincapié en la opción Tipo cuyas
opciones, Guía y Máscara, veremos más adelante en el
curso.
Como lo puedes comprobar, al ver las propiedades generales de una capa o al hacer clic con el botón
derecho del ratón sobre el icono de una capa cualquiera, existen varios tipos de capas.
Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los
puntos anteriores. Son las más usadas y se emplean para todo, colocar objetos, sonidos, acciones,
ayudas...
Capas Guía : Son capas especiales de contenido específico. Se emplean en las animaciones de
movimiento de objetos y su único fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que
su misión es representar la trayectoria de un objeto animado, su contenido suele ser una línea (recta,
curva o con cualquier forma).
En esta imagen podemos ver el contenido de 2 capas. La
primera de ellas contiene la bola azul y la segunda
contiene la línea curva. La segunda capa la hemos definido
como Capa Guía, para que al realizar la animación de
movimiento (esto lo veremos en un tema posterior) su
contenido NO se vea en la película, sino que sirva de
recorrido para la bola azul.
Es Importante recordar que el contenido de las Capas Guía
no se verá en la película final. Su efecto hará que la pelota
azul se desplace de un extremo de la línea al otro
siguiendo esa ruta.

5. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
Capas Guiadas (Guided Layers) : Cuando definimos una capa como capa guía, es necesario definir
después una capa guiada. Esto es, una capa que quedará afectada por la guía definida en la Capa guía.
Si no definimos una capa guiada, la capa guía no tendrá ningún efecto y si bien NO se verá en la película
(por ser una capa guía) tampoco provocará ningún efecto en las demás capas. En la imagen anterior, la
bola azul se deberá encontrar en una capa Guiada, de lo contrario no seguirá la ruta marcada por la capa
guía.
Las capas guía y las capas guiadas se relacionan entre sí de
un modo evidente. A cada capa guía le corresponden una
serie de capas guiadas.
Al asociar una capa guía con una capa guiada, el icono que
representa a la capa guía cambia, indicándonos que está
realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa guía y capa
guiada correctamente asociadas entre sí. (La capa llamada
aulaClic es, evidentemente, la capa Guiada)
Capas Máscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las
veremos enseguida). Basta con decir que estas capas se colocan "encima" de las capas a las que
enmascaran y sólo dejan que se vea la parte de éstas que tapan los objetos situados en las capas máscara
(son como filtros). Al igual que las capas guía, los objetos existentes en este tipo de capas tampoco se
ven en la película final. Sí se verán los objetos de su correspondiente capa enmascarada a los que estén
"tapando".
Capas Enmascaradas : Estas capas funcionan
conjuntamente con las Capas máscaras. Al igual que las
capas guía y las capas guiadas deben ir asociadas unas a
otras para que su efecto sea correcto.
Sus objetos sí que son visibles en la película final, pero
sólo cuando algún objeto de la capa Máscara está sobre
ellos.

6. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
Taller Sobre Capas y Guías de Movimiento
1. Abra flash 8 y cree un documento de flash nuevo
2. Elija la herramienta ovalo, color de relleno verde radial, sin
color de trazo y presionando la teclas shift del teclado, dibuje
un circulo en la parte superior izquierda de la pantalla como
se muestra en la figura. (no agrupado)
3. Con la herramienta línea dibuje una línea negra que divida el
círculo por la mitad, y con la herramienta selección deforme
la línea hasta darle una curva, como se muestra en la imagen.
4. Repita el proceso pero ahora curvee la línea en el otro
sentido.
5. Seleccione color rojo radial y con la herramienta cubo de
pintura, coloree el lado izquierdo del círculo, luego, coloree
el otro lado de color azul radial como se muestra en la figura.
6. Con la herramienta selección, seleccione la línea negra que
divide el circulo y elimínela (no debe quedar ninguna línea)
7. Ahora, haga doble clic sobre la capa1 y cambie el nombre por “pelota”, presione enter
8. Luego haga clic derecho sobre el
fotograma1 de la capa pelota y
seleccione la opción Crear
Interpolación de Movimiento
9. Haga clic derecho sobre el
fotograma 60 de la capa pelota y
seleccione la opción insertar
fotograma clave, con la
herramienta selección mueva la
pelota hasta la parte inferior
derecha de la pantalla
como se muestra en la
figura.
10. Cree una capa nueva y
llámela “piso”, en ella
dibuje un rectángulo
verde sin color de trazo
y ubíquelo en la parte
inferior del área de
trabajo, posteriormente
mueva la capa debajo
de la capa pelota.
11. Haga clic derecho sobre la capa pelota y seleccione la opción Añadir Guía de Movimiento

7. Institución Educativa Técnica Soledad Medina
Área de Informática
Grado Décimo
Clase Informática
2015
12. Haga clic sobre el fotograma1 de la nueva capa “Guía Pelota” y con el lápiz,
opción suavizar, dibuje una línea que salga desde el centro de la pelota y que
llegue hasta el final de la página como se muestra en imagen4.
13. Ahora haga clic en el fotograma1 de la capa pelota y acomode la pelota sobre la
línea guía. (imagen5)
14. Haga clic en el fotograma 60 de la capa pelota y acomode la pelota
sobre el final de la línea guía. Observando que el punto blanco de la
pelota toque la guía. (imagen6)
15. Si presionamos Enter, la pelota debe seguir la guía de movimiento.
16. Ahora para hacer que la pelota parezca más real debemos hacer que
gire. Seleccionamos el fotograma1 de la capa pelota y en las propiedades colocamos los
siguientes valores: Aceleración (100), Girar (horario) 6 veces. Y listo ya nuestra pelota parecerá
que rebota.
17. Presione CTRL + Enter para ver el resultado final
18. Guarde la animación como Pelota_Nombre_Grado en el disco Datos o en su USB personal
Nota: Ingrese al blog informaticasoledad.blogspot.com y observe los videos explicativos que se dejaron
en la clase número 2. La próxima semana se realizara evaluación de la fotocopia N°2