Animando con la Línea de tiempo
07 Actividad
1.
Abre el archivo Actividad07 de tu CD de trabajo o carpeta de actividades. Este documento es la animación de un acróbata organizado en diferentes Layers y frames. Analiza el documento y llena la siguiente tabla siguiendo el mismo orden que tiene en la línea de tiempo: Layer
Nombre del Layer Descripción del contenido Keyframes en los cuadros:
4
Acróbata
3
Utilería
2
Fondo
1
Extra
a.
Contiene las imágenes del acrobata en movimiento Tiene las cosas que están sobre el escenario Contiene las imágenes del fondo del escenario No contiene nada
Cambia el contenido conforme avanza Un único frame Un único frame No tiene keyframe
¿Por qué algunos Layers tienen un solo Keyframe, mientras otros tienen varios?
Porque en esos layers el contenido no se modifica durante la animación. Un nuevo Keyframe se usa para insertar contenido nuevo.
2.
En la línea de tiempo, utiliza los botones para ocultar todos los Layers (da clic sobre el 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 (da clic sobre el 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 más de un Keyframe, es necesario colorear cada uno, pues un Keyframe representa contenido nuevo.
6.
Prueba la película coloreada usando <Ctrl+Enter> y guarda tu trabajo con el nombre Acrobata07 en la carpeta que indique tu profesor.
22
Sonido (Sound) Para hacer más atractiva una película o una animación, Flash permite incorporar sonidos, que se importan en formatos comunes como Wav, Aiff y MP3, entre otros, usando el Menú File/Import/Import to Library... Una vez importado, un sonido queda como un elemento en la biblioteca de símbolos (ver MID 06 Biblioteca de símbolos) y puede usarse colocándolo en un frame o accediendo a él por medio de programación.
Flash
06
Biblioteca de símbolos
El sonido en un frame puede ejecutarse básicamente en dos modos de sincronía (Sync):
Event
El sonido se reproduce completo (de inicio a fin) en cuanto la reproducción de la película llega al frame en el que se encuentra el sonido. Una vez iniciado, un evento de sonido continúa hasta terminar independientemente de si la reproducción de la película sigue, se detiene o salta a un lugar diferente, a menos que sea silenciado mediante programación.
Stream
Sincroniza el sonido con la línea de tiempo. Si la reproducción de la película se detiene, el sonido también se detiene y si la reproducción salta a un lugar diferente, la secuencia del sonido también. Cuando una película Flash se publica en Internet, un sonido del tipo Event debe descargar completamente antes de que pueda ser reproducido. Un sonido de tipo Stream puede comenzar a reproducirse conforme va descargando, de modo que es más conveniente para uso en Web. A un sonido se le pueden incluir los siguientes efectos directamente en el Panel de propiedades: 1.
Ninguno: el sonido no tiene ningún efecto y se reproduce tal como se importó.
2.
Left Channel: el sonido se reproduce solamente por el altavoz izquierdo.
3.
Right Channel: el sonido se reproduce solamente por el altavoz derecho.
4.
Fade left to right: el sonido comienza a escucharse por el altavoz izquierdo y continúa por el derecho.
Diseño Multimedia
23
5.
Fade right to left: el sonido comienza a escucharse por el altavoz derecho y continúa por el izquierdo.
6.
Fade in: el sonido comienza a reproducirse con el volumen en 0 y aumenta hasta llegar al nivel original con el que se importó.
7.
Fade out: el sonido comienza a reproducirse tal como se importó y disminuye el volumen hasta llegar al nivel 0.
8.
Custom: puede modificarse la forma en que se escuchará en los altavoces.
Flash
07
Trabajando con sonido
Haciendo pruebas con sonido
08 Actividad
1.
Abre el documento de Flash Actividad08 que se encuentra en tu CD de trabajo o carpeta de actividades. Este archivo tiene dos capas etiquetadas como Layer 1 y Layer 2. Ambas capas tienen una longitud de 50 cuadros.
2.
Selecciona el Menú File/Import/Import to Library… e importa los dos archivos de sonido que se encuentran en la misma carpeta Actividad08. Los sonidos se guardan automáticamente en la biblioteca cuando los importas. Compruébalo.
3.
En la línea de tiempo selecciona el primer Keyframe del Layer 1.
4.
Después, en el Panel de propiedades, abre el menú colgante Sound, que contiene todos los archivos de sonido de la biblioteca. Selecciona el primer sonido (sound01). Con esto el sonido quedará asignado al Keyframe.
24
5.
Cambia el modo de sincronía de este sonido (Sync) a Stream. Observa que la forma de onda del sonido se puede ver en la línea de tiempo.
6.
Arrastra el puntero del ratón sobre la línea de tiempo. Debes hacer clic y arrastrar sobre la escala que muestra los números de cuadros, en la parte superior de la línea de tiempo. Mientras arrastras hacia atrás o hacia adelante escucharás en sincronía el sonido asignado.
7.
Prueba la película presionando Menú Control/Test Movie o la combinación de teclas <Ctrl + Enter>. Contesta: a. ¿Con qué características se reproduce el sonido?
Se reproduce mientras se va cargando. Sin efectos y se repite.
b. ¿Se escucha completo? ¿Por qué?
No, porque el sonido no ocupa todos los cuadros necesarios para su reproducción. 8.
Selecciona el Keyframe 40 del Layer 2.
9.
Mediante el Panel de propiedades, asigna a este frame el segundo sonido importado (sound02) con el modo de sincronía Event. Contesta las siguientes preguntas: a. ¿Es posible escuchar el segundo sonido arrastrando el puntero del ratón sobre los cuadros de la línea de tiempo?
No b. Cuando ejecutas la película ¿qué sucede si el evento de sonido es más largo que el rango de frames donde está asignado?
Se escucha el sonido completo aunque ocupe menos cuadros. 10. Modifica los efectos de sonido para que el primer sonido sólo se escuche por el altavoz izquierdo y el segundo sonido sólo por el altavoz derecho. 11. Guarda el archivo con el nombre Sonido08 en la carpeta que indique tu profesor.
Diseño Multimedia
25
Conceptos clave
09 Actividad
Selecciona la respuesta que mejor corresponda a cada pregunta: 1.
Para crear un gráfico vectorial en Flash se dibuja sobre: a. la línea de tiempo b. la biblioteca de símbolos c. el escenario d. el panel de propiedades
2.
Para crear la secuencia de una película, los objetos se animan a lo largo de: a. la línea de tiempo b. la biblioteca de símbolos c. el escenario d. el panel de propiedades
3.
Los parámetros de los objetos se modifican en: a. la línea de tiempo b. la biblioteca de símbolos c. el escenario d. el panel de propiedades
4.
Para extender el contenido de un cuadro sin cambios, debes insertar un: a. Frame b. Keyframe c. Blank Keyframe d. Symbol
5.
Para crear nuevo contenido en un layer se requiere un: a. Frame b. Keyframe c. Blank Keyframe d. Symbol
6.
Un sonido en Stream está sincronizado con la línea de tiempo. a. Verdadero b. Falso
7.
Un sonido Event debe descargar completo para ser reproducido. a. Verdadero b. Falso
26
Símbolos, sus propiedades y líneas de tiempo Un símbolo es un objeto que se guarda en la biblioteca con el objetivo de usarlo más de una vez durante la película o asignarle código de programación. La ventaja de utilizar símbolos es que pueden reutilizarse cuantas veces se desee sin aumentar el peso final del archivo. También se utilizan símbolos para crear animaciones, ya que todo símbolo cuenta con su propia Línea de tiempo, independiente de la línea de la película, con sus propios Layers y frames. Así, cada símbolo es como una película de Flash completa, que está dentro de la película principal. Un símbolo puede incluso contener más símbolos, cada uno con su propia línea de tiempo. Un símbolo se puede crear de varias maneras: a.
Se puede crear un símbolo vacío para después crear su contenido. Utiliza el Menú Insert/New Symbol o la combinación de teclas <Ctrl+F8>.
b.
Se puede crear un símbolo a partir de cualquier objeto que se seleccione en el escenario. Selecciona primero los elementos que se convertirán a símbolo y utiliza el Menú Modify/Convert to Symbol o la tecla <F8>.
c.
Se puede importar un archivo con el Menú File/Import/Import to
Library…
Tipos de símbolos
Al crear un símbolo por cualquier método, debes elegir el tipo de símbolo que deseas crear. Los tres tipos posibles son:
Movie Clip
Button
Graphic
MovieClip. Se utiliza principalmente cuando el símbolo contiene animación. Cuenta con una Línea de tiempo en la que podemos agregar los Layers y los frames que necesitemos. El comportamiento de un MovieClip puede ser programado con código escrito en el lenguaje ActionScript. Button (Botón). Es un símbolo que reacciona al puntero del ratón como lo haría un botón estándar de Windows. Se utiliza para agregar interactividad en una película Flash. El comportamiento de un botón se programa con ActionScript. Un símbolo de tipo botón, cuenta con una línea de tiempo especial de cuatro frames, en los que se definen los cuatro estados posibles de un botón: Up, Over, Down y Hit. Up. Este frame contiene la imagen, sonido y acciones del botón en su estado normal o apagado.
Diseño Multimedia
27
Over. Contiene la imagen, sonido y acciones del botón, que se despliegan cuando el puntero del ratón está sobre él. Down. Contiene la imagen, sonido y acciones del botón, que se despliegan cuando se hace clic sobre él. Hit. Contiene una imagen que delimita el área sensible del botón. Esta imagen nunca se ve en el escenario. Cualquiera de los cuatro frames puede o no tener contenido y por lo general sólo se utilizan los frames Up y Over. La Línea de tiempo de un botón también puede tener tantos Layers como se necesite. Graphic. Es un símbolo estático que comúnmente sólo requiere un Layer y un frame. No puede ser programado con ActionScript.
Flash
Tipos de símbolo y sus líneas de tiempo
08 Flash
Cómo crear un botón
09 Flash
Cómo crear un MovieClip
28
10
Tipos de símbolos
10 Actividad
Flash identifica los diferentes tipos de símbolo con un ícono. Observa las imágenes y escribe el nombre del tipo de símbolo que corresponda a cada ícono.
Button (Botón) Movie clip Graphic Instancias y propiedades
Para utilizar un símbolo en algún frame de la película, simplemente selecciona el frame en cuestión y arrastra el símbolo desde la biblioteca hasta el escenario. Esto crea una Instancia del símbolo, que es una imagen clon del símbolo original. Puedes crear todas las instancias que quieras de un mismo símbolo, modificar cada instancia cambiando sus dimensiones o propiedades o aplicar diferente comportamiento a cada una mediante programación. Cuando modificas cualquier instancia, el símbolo original no se ve afectado. En el caso opuesto, si modificas el símbolo original, todas sus instancias son afectadas. Una vez en el escenario se pueden establecer los parámetros de una instancia usando el Panel de propiedades. Instance Name. Se utiliza para identificar la instancia de un símbolo. Es muy recomendable asignar un nombre en cuanto se crea una instancia, ya que es necesario para la programación: X. Indica o asigna la posición horizontal en el escenario. Y. Indica o asigna la posición vertical en el escenario. W (Width). Muestra o determina el ancho de la instancia. H (Height). Muestra o determina el alto de la instancia. Rotate. Indica o asigna un ángulo de giro. Skew. Indica o determina la deformación oblicua de la instancia. Color. Permite asignar un aspecto especial como: Brightness. Ajusta el color a más blanco o negro. Tint. Pinta una instancia con un tono de la paleta de colores. Alpha. Aplica un porcentaje de transparencia a una instancia. Advanced. Ajusta con detalle los colores (Tint) y transparencia (Alpha).
Diseño Multimedia
29
Nombre asignado a la instancia
Dimensiones
Nombre del símbolo original
Posición
Apariencia
Flash
11
Instancias y sus propiedades
Creando instancias
11 Actividad
1.
Abre el documento de Flash Actividad11 que se encuentra en tu CD de trabajo o carpeta de actividades.
2.
Si no está visible, muestra la biblioteca de símbolos con Menú Window/ Library o las teclas <Ctrl+L>. Observa que la biblioteca tiene dos símbolos llamados bici y rueda.
3.
Selecciona en la línea de tiempo el Frame 1 del Layer 2.
4.
Arrastra el símbolo bici de la biblioteca al escenario para crear una Instancia.
5.
Crea dos Instancias del símbolo rueda en el escenario, acomodando cada una en el lugar apropiado para formar la bicicleta.
6.
De forma similar crea instancias para armar 4 bicicletas más distribuidas en el escenario.
30
7.
Utiliza el Panel de propiedades o bien la herramienta Free Transform Tool, para modificar el tamaño de las bicicletas, de manera que parezca que unas están más cerca y otras más lejos en la escena.
8.
Seleccionando directamente en el escenario cada una de las Instancias, utiliza el Panel de propiedades para aplicar un color diferente a cada bicicleta usando la opción Tint. Observa el símbolo original en la biblioteca. ¿Qué le ocurrió? ¿Por qué?
Nada. Porque estamos modificando la instancia, no el orígen de ella.
9.
Por último haz esta prueba: En la biblioteca de símbolos da doble clic al símbolo bici. Se abrirá la línea de tiempo del símbolo y el gráfico original. Haz una pequeña modificación como agregar unas líneas decorativas o un texto sobre alguno de los tubos de la bicicleta.
10. Regresa a la línea de tiempo principal haciendo clic sobre el botón Scene 1 cerca de la esquina superior izquierda de la sub-ventana del documento. Describe lo que ha ocurrido y por qué ocurrió:
Se agregó el cambio a todas las bicicletas, porque son instancias del símbolo y si éste cambia, también en el escenario.
11. Guarda el archivo con el nombre Bici11 en la carpeta que indique tu profesor.
Creando botones para una tarjeta interactiva
12 Actividad
1.
Abre en Flash la película Actividad12 que se encuentra en tu CD de trabajo o carpeta de actividades.
2.
Para poder realizar la actividad, antes de continuar guarda el archivo en la carpeta que indique tu profesor, con el nombre Tarjeta12.
3.
Abre la biblioteca y revisa su contenido. Consérvala abierta.
4.
En el escenario hay cuatro personajes en dos posiciones, en esta actividad los llamaremos normal y feliz respectivamente. Obsérvalos.
5.
Para poder trabajar mejor con los personajes, es conveniente convertirlos en símbolos. Selecciona cada uno de forma independiente y conviértelo en un símbolo gráfico. Al final debes tener ocho nuevos símbolos gráficos en la biblioteca.
6.
Una vez que los personajes están como símbolos, bórralos del escenario para que quede vacío.
Diseño Multimedia
31
7.
Con el Menú Insert/New Symbol, crea un nuevo símbolo del tipo Button y dale el nombre persona1. Verás la línea de tiempo del botón que por ahora está vacía.
8.
De la biblioteca de símbolos, arrastra al área de trabajo el primer personaje, en su posición normal. Ubícalo en medio auxiliándote de la pequeña cruz que aparece al centro. Dale color al personaje. Observa que el personaje ha quedado en el frame Up de la línea de tiempo del botón.
9.
Selecciona el frame Over de la línea de tiempo del botón e inserta un Keyframe en blanco con el Menú Insert/Timeline/Blank Keyframe.
10. Arrastra al escenario el símbolo del primer personaje en su posición feliz. Ubícalo en el área de trabajo, auxiliándote de la pequeña cruz que aparece al centro. Dale color al personaje. 11. Haz clics alternadamente en el frame Up y en el frame Over, para que preveas el comportamiento del botón y ajustes la posición de los personajes si es necesario. 12. Regresa a la línea de tiempo principal, presionando el botón Scene 1, en la parte superior de la línea de tiempo. 13. Ahora repite los pasos del 7 al 12 para crear un nuevo botón para cada uno de los personajes restantes, utilizando su posición normal para el frame Up y su posición feliz para el frame Over. Asígnale color a todos los personajes. 14. Cuando termines de crear los cuatro nuevos botones, arma una tarjeta de felicitación con las siguientes características: a. Crea un fondo en un Layer independiente. b. En otro Layer arrastra de la biblioteca algunos símbolos para mejorar la escena. c. En un tercer Layer encima de los anteriores, arrastra a la escena los botones que has creado. No utilices los símbolos originales de los personajes, sino los botones que los contienen para que tengan interactividad. d. Agrega en un Layer diferente un texto apropiado. 15. Prueba la película con el Menú Control/Test Movie. Pasa el puntero del ratón sobre los botones para ver cómo se comportan. 16. De regreso a la película principal, realiza las siguientes mejoras: a. En la línea de tiempo de cada botón, duplica el personaje feliz del frame Over al frame Down, pero además agrega en el frame Down un texto. Recuerda que al correr la película, el contenido del frame Down se verá cuando se haga clic sobre el botón. b. Aplica al frame Over y/o Down de cada botón un sonido del tipo Event. 17. Prueba la película y guarda los cambios.
32