SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Introduccin a Flash Professional

Qu es Flash?
Flash Professional es una potente herramienta desarrollada por Adobe, Flash fue creado con el objeto de realizar animaciones y diseos vistosos para la web, y grficos interactivos. Flash cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva. Adems, tiene la ventaja de que es casi idntica a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash por primera vez:

En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa Flash. Flash recordar nuestras preferencias y abrir el programa tal y como lo dejamos la ltima vez que lo utilizamos.

El entorno de Flash
La Lnea de tiempo
La Lnea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes.

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

1) Los Fotogramas (frames) que vienen delimitados por lneas verticales (formando rectngulos) 2) Los Nmeros de Fotograma que permiten saber qu nmero tiene asignado cada fotograma, cunto dura o cundo aparecer en la pelcula. Adems, en la parte inferior hay informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen). A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en laLnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo. Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qu tipos de fotogramas hay y cules son sus rasgos.

Fot. Clave

Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se le diferencia por una lnea negra vertical.

Fot. Normal

Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris.

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

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 - 4 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es prolongar la duracin de un fotograma clave o keyframe. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la pelcula. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos.

Fot. vaco

Fotograma Vaco: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacos. No debemos confundirlos con los fotogramas contenedor, pues estos ltimos vienen delimitados por lneas 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 animacin). De modo que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer" y volver a aparecer.

Fot. Etiquetado.

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 Propiedades. Si la duracin del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Fot.con Acciones

Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una accin 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 pelcula. En la imagen, la accin existente en el fotograma 1 afecta tambin 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:

Fot. de Anim de Mov.

1) Fotogramas de Animacin de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posicin del Keyframe inicial al final. Para representar esta animacin aparece una flecha entre estos Keyframes.

Fot. de Anim de Forma.

2) Fotogramas de animacin de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tena en el Keyframe inicial a la del final. Para representar esta animacin aparece una flecha entre estos Keyframes.

Las capas
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir,

una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas).

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Los objetos que estn 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 mltiples capas adems, da lugar a pelculas bien ordenadas y de fcil manejo (es conveniente colocar los cdigo ActionScript en una capa independiente llamada "acciones", por ejemplo).

El Escenario
Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre Propiedades del documento: Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de busqueda rellenando los campos de Ttulo y Descripcin. Dimensiones: Determinan el tamao de la pelcula. El tamao mnimo es de 1 x 1 px (pxeles) y el mximo de 2880 x 2880 px. Unidades de Regla: Unidad que se emplear para medir las cantidades. Coincidir: Provocan que el tamao de la pelcula coincida con el botn seleccionado (tamao por defecto de la Impresora, Contenidos existentes o los elegidos como Predeterminados)

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Color de Fondo: El color aqu seleccionado ser el color de fondo de toda la pelcula. Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. Para cambiar este nmero, arrastra con el cursor hacia la derecha o izquierda. Transformar en predeterminado: Este botn permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrn ser alteradas desde este panel cuando se desee.

Escenas
Una Escena no es ms que una porcin de la Lnea de Tiempo, con todo lo que sta incluya (capas, fotogramas...). Su finalidad principal es la de organizar la pelcula, de modo que las partes de la pelcula que no tengan relacin entre s o no estn una a continuacin de la otra (seguida en la lnea de tiempo). De este modo, separando una pelcula en 3 escenas, conseguimos tener 3 lneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 pelculas diferentes se tratara. No debemos olvidar que aunque en apariencia sean pelculas distintas, la Lnea de Tiempo es la misma y que al acabar la primera escena se reproducir la segunda y as sucesivamente... Las Escenas se pueden aadir, eliminar, editar... desde el Men Escena al que se accede desde Ventanas Escena.

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Ejercicio: Accediendo a paneles Objetivo

Abrir los Panel de Muestras y seleccionar una muestra de color.

Ejercicio 1 paso a paso

1. Pulsa en el men Ventana. 2. Selecciona la opcin Muestras, si ya tuviera una seal junto al nombre del Panel, significa que ya est abierto. Si no, haz clic sobre l. 3. Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor, ste tomar la forma de la herramienta cuentagotas (que serva para seleccionar un color). 4. Todo lo que dibujemos de ahora en adelante, ser de color verde (podemos usar este mecanismo para cambiar el color de relleno o el color del trazo).

Ejercicio 2: Crear una Pelcula a nuestro gusto

Cambiar las dimensiones del Escenario: 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento. 2. Pulsamos sobre la pestaa Unidades de Regla y seleccionamos Pxeles (px) 3. Introducimos las medidas pedidas (300 x 100) en Dimensiones. Cambiar el color de fondo del Escenario: 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento 2. Pulsamos sobre la pestaa Color de fondo, el puntero se convertir en un "cuentagotas". 3. Seleccionamos el color pedido. Aumentar la velocidad de reproduccin de la pelcula 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento.

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

2. En Veloc. Fotogramas escribe 14 fps. El resultado debe ser un rectngulo rojo con las medidas propuestas.

Ejercicio 3 Estructurar una Pelcula

Crear la pelcula pedida y a estructurarla tal y como piden 1. Abrimos una nueva Pelcula desde el men Archivo Nuevo 2. Accedemos al Panel Escena desde Ventana Otros Paneles Escena 3. Creamos una nueva Escena pulsando sobre el signo .

4. Les cambiamos los nombres haciendo doble clic en sus nombres actuales Crear nmero de capas. 1. Seleccionamos la Escena E1 en el Panel Escena 2. Creamos otra capa ms, pulsando el signo en la lnea de tiempo.

3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales (por defecto Capa 1 y Capa 2) Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2 al 3. El Panel Escena debera quedar as:

Y as las Capas:

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Ejercicio 4: Creando Fotogramas

Crear fotogramas claves 1. Abrimos una nueva pelcula 2. Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe 3. Vamos al men Insertar Lnea de Tiempo Fotograma Clave 4. Hacemos clic sobre el fotograma 3 y seleccionamos Insertar Lnea de Tiempo Fotograma Clave Ya tenemos los 3 Fotogramas Clave creados. Crear fotogramas normales 1. Seleccionamos el fotograma 1 y hacemos clic en el men Insertar Lnea de Tiempo y seleccionamos Fotograma. 2. Ahora el fotograma 2 ser un fotograma normal y el 3 y el 4 sern Fotogramas Clave. Seleccionamos el fotograma 3 y repetimos el proceso anterior. 3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto ser lo que obtengamos:

Fijmonos en que no estn los puntos negros en los Fotogramas Clave ni los cuadrados blancos en lo fotogramas normales. Esto se debe a que no hay nada dibujado en dichos fotogramas. Si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:

SERVICIO NACIONAL DE APRENDIZAJE SENA

DISEO E INTEGRACION DE MULTIMEDIA FLASH CONCEPTOS BSICOS

Ejercicio 5: Identificando Fotogramas

Identificar los diferentes tipos de fotogramas:

1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan una animacin de Movimiento. (probablemente contendrn al mismo objeto pero cambiado de lugar). El tercero es unFotogramas Clave normal. 2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son fotogramas normales. Simplemente determinan la duracin de los Keyframes a los que van asociados. 3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor. Existen y en la pelcula se vern como fotogramas en blanco (o con el color de fondo que hayamos seleccionado). 4. Los fotogramas del 16 en adelante son fotogramas vacos y no se vern en la pelcula.

10