Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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 los tendrá en cuenta al publicar la película. En la imagen anterior, son fotogramas contenedor todos

Clase Informática2015

Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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. Para representar esta animación aparece una flecha entre estos Keyframes.

Clase Informática2015

Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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.

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

Clase Informática2015

Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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.

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.

Clase Informática2015

Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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.

Taller Sobre Capas y Guías de Movimiento

1. Abra flash 8 y cree un documento de flash nuevo2. 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)

Clase Informática2015

Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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

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)

Clase Informática2015

Institución Educativa Técnica Soledad MedinaÁrea de Informática

Grado Décimo

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 final18. 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

Clase Informática2015