Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

1

ELABORADO POR LA DOCENTE Cielo Muoz Muoz

De la especialidad de sistemas.

MARZO DE 2013 CALI-VALLE

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

2

CAPITULO I.
ENTORNO DE TRABAJO

Hola me llamo Jorge, con tu ayuda aprender FLASH 8

Qu es FLASH?
Flash 8 es una potente herramienta creada por Macromedia. Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, as como para crear GIFs animados.

Descarga tu versin gratis desde la pgina inicial en el botn

Veamos pues, porque es interesante Flash 8.

El Entorno de Trabajo

La Interfaz de Flash 8
Flash 8 cuenta con un entorno o interfaz de trabajo manejable e intuitiva. Similar Adems a la de otros programas de Macromedia (Dreamweaver, Freehand, Director...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio.

Manos a la obra

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

versin 8 de flash en espaol desde:

Tambin puedes descargar la http://www.adobe.com/es/downloads/

3 2

5 4 4 6 2

7 2

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. En esta imagen faltan algunos mens. Todos se irn viendo a lo largo de este curso aunque no aparezcan en esta imagen, que slo pretende mostrar las partes principales de la interfaz de Flash. Veamos cules son:

La Barra de Mens
La Barra de Mens tiene como propsito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro programa de diseo web o grfico, aunque tiene algunas particularidades. Veamos los principales Submens a los que se puede acceder:

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la pelcula actual casi todo tipo de archivos (sonidos, vdeo, imgenes e incluso otras pelculas Flash), o la de Configuracin de Publicacin desde donde se pueden modificar las caractersticas de la publicacin. Tambin permite configurar la impresin de las pginas, imprimirlas... Edicin: Es el clsico men que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; tambin permite personalizar algunas de las opciones ms comunes del programa. Ver: Adems de los tpicos Zooms, te permite moverte por los fotogramas y por las escenas. Tambin incluye la posibilidad de crear una cuadrcula y unas guas. Esto se puede seleccionar desde los submens Cuadrcula y Guas desde donde tambin se pueden configurar sus opciones.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

4

Insertar: Te permite insertar objetos en la pelcula, as como nuevos fotogramas, capas, acciones, escenas... Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...). Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en profundidad. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edicin) que hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o ejecutar los que ya tengamos. Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula. Reproducir, Rebobinar, Probar Pelcula .... Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos directos a TODOS los Paneles. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc...

La Lnea de Tiempo
La Lnea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes. 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 herramientas para trabajar con Papel cebolla e informacin sobre el Nmero de Fotograma actual (1 en la imagen), la Velocidad de los Fotogramas (12.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 la Lnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo. Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas que existen visita nuestra Pgina Avanzada

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

5

3 2

Las Capas
El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicar un tema completo. An as, veamos a grandes rasgos qu son las capas. 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). 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 sonidos en una capa independiente llamada "Sonidos", por ejemplo). Las ventajas y desventajas de usar capas se ver en el Tema 8.

4
2

El rea de Trabajo
El rea de trabajo consta de numerosas partes, vemoslas: La parte ms importante es 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. 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)

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

6

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. Unidades de Regla: Unidad que se emplear para medir las cantidades. Transformar en predeterminado: Este botn, propio de la nueva versin de Flash, 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.

La Barra de Herramientas.
5.1 Herramientas Bsicas. La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Veamos cules son las ms importantes y cmo se usan: Herramienta Seleccin (flecha): . Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un slo clic), los bordes (con doble clic), zonas a nuestra eleccin... Adems, su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar sin ms que seleccionar situar el

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

7

cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se vern en el tema siguiente. Herramienta valo: La herramienta valo permite trazar crculos o elipses de manera rpida y sencilla. Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear valo Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Dar color a un valo Herramienta Rectngulo: Su manejo es idntico al de la Herramienta valo, tan solo se diferencian en el tipo de objetos que crean. Herramienta Lpiz: Es la primera Herramienta de dibujo propiamente dicho. Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Herramienta Brocha: Su funcionalidad equivale a la del lpiz, pero su trazo es mucho ms grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo. Herramienta Cubo de Pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no est delimitada por un borde. El color que aplicar esta Herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas.
Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Brocha. Pero su funcin es la de eliminar todo aquello que "dibuje".

5.2 La Barra de Herramientas. Herramientas Avanzadas.

Herramienta Lazo: Su funcin es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma, (la Herramienta Flecha slo puede seleccionar objetos o zonas rectangulares o cuadradas). En contrapartida, la Herramienta Lazo no puede seleccionar rellenos u objetos (a menos que hagamos la seleccin a mano).

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

8

Al seleccionar esta Herramienta, en el Panel Opciones aparecen estas imgenes: . Esto, es la Herramienta Varita Mgica, tan popular en otros programas de dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que aparece es este: permite hacer selecciones poligonales. Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando. Herramienta Subseleccionador: Esta Herramienta complementa a la Herramienta Pluma, ya que permite mover o ajustar los vrtices que componen los objetos creados con dicha herramienta. Herramienta Bote de Tinta: Se emplea para cambiar rpidamente el color de un trazo. Se aplica sobre objetos, si tienen borde, cambia al color mostrado de dicho borde, por el mostrado en el Panel Mezclador de Colores (que coincide con el subpanel Colores que hay en la Barra de Herramientas.) Herramienta Cuentagotas: podamos utilizarlos. Su misin es "Capturar" colores para que posteriormente

5.3 La Barra de Herramientas. Opciones

Algunas Herramientas poseen unas opciones especiales que facilitan y potencian su uso. Para acceder a estas utilidades, a veces no basta con hacer clic en la Herramienta correspondiente. La forma de acceder a este Submen consiste en hacer clic en la lnea o en el objeto que has dibujado. Entonces aparecer (o se iluminar si ya estaba presente) un submen como este: Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superponga, dando la sensacin de estar "unidos". Suavizar:
Enderezar: rectilneos.

Convierte los trazos rectos en lneas menos rgidas.

Realiza la labor inversa. Convierte los trazos redondeados en ms

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

9

6 2

El Panel Mezclador de Colores

El Panel Mezclador de Colores, como su nombre indica se usa para fabricar nuestros propios colores y para seleccionar los que ms nos gusten. Para seleccionar un color determinado, bastar con hacer clic en las pestaas que se encuentran junto a los iconos de las Herramientas de Lpiz y de Bote de Pintura. (Si queremos modificar el color de un borde, pulsaremos sobre la pestaa que est junto a la Herramienta Lpiz y si queremos modificar un relleno, haremos clic en la pestaa que est junto a la Herramienta Bote de Pintura.) Al hacerlo aparecer un Panel con multitud de colores para que seleccionemos el que ms nos gusta. Tambin permite introducir el cdigo del color segn el standard que establece el HTML. Tambin se puede determinar el tipo de relleno que aplicaremos a los objetos creados (mediante la Herramienta Bote de Pintura). Se pueden crear diferentes tipos de Rellenos Slido: Consiste en un relleno formado por un solo color. Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular. Mapa de Bits: Permite colocar como relleno alguna imagen existente en la pelcula (O ajena a ella si antes se "importa")
Para aprender a crear un color transparente (semi-transparente), realiza el Ejercicio Crear Color Transparente

El Panel Muestras de Color

El Panel Muestras de Color sirve para poder ver de un modo rpido y claro los colores de que disponemos, tanto slidos (un solo color) como degradados (lineales o radiales). Adems, cuando creemos un color mediante el Panel Mezclador de Colores, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un men desplegable en la parte superior derecha del Panel Mezclador de Colores). Una vez est agregado el color, pasar a estar disponible en nuestro conjunto de muestras y podremos acceder a l rpidamente cada vez que trabajemos con nuestra pelcula.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

10

Cada pelcula tiene su propio conjunto de muestras y cada vez que la abramos para editarla, podremos usar las muestras que tenamos la ltima vez que trabajamos con dicha pelcula.

Panel Propiedades:
7 6 2

7.1 Propiedades de los Textos

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir. Para saber ms acerca de Cmo escribir textos visita nuestra Pgina Avanzada El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos ver en l todo lo que nos hace falta conocer sobre nuestro texto. Si tenemos experiencia usando Flash 5, notaremos que todas las propiedades que antes se encontraban en los Paneles Carcter y Prrafo, se encuentran agrupadas ahora en el Panel Propiedades.

Panel Propiedades

Veamos a fondo el Panel Propiedades

Fuente: Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que ms nos guste. Altura: Determina el espaciado entre los caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. Direccin del Texto: Cambia la orientacin del texto de horizontal a vertical, tanto de izquierda a derecha como de derecha a izquierda.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

11

Ajuste automtico entre caracteres: Activar esta casilla provoca que la separacin entre caracteres se realice de modo automtico. Posicin: (o dejarlo normal). Nos permite convertir nuestro texto en subndices o en superdices

URL: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en ese momento. Destino: Determina si la URL a la que el texto hace referencia se cargar en la misma ventana del navegador, en una nueva ... Tipo de Lnea: Si el texto que vamos a incluir es dinmico (de lo contrario aparece sin activar), esta opcin nos permite determinar cmo queremos que aparezcan las lneas (lnea nica, multilnea o multilnea sin ajuste). Configuracin: Son las clsicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamao.

Otras Propiedades: Dado que Flash trata los textos como objetos, stos tambin tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografas son una parte muy importante y deben respetarse. Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos (entre otras). A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: Prrafo. Las lneas se distribuyen a la derecha y a la izquierda del punto medio del

A la derecha: Todas las lneas empezarn tan a la derecha como sea posible (dentro del recuadro de texto que hayamos definido). Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus lmites. El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los sangrados de prrafo y el espacio interlineal.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

12

Continuemos
Quin sera capaz de ver una pelcula muda? Y una animacin espectacular sin sonido? Hasta hace poco, los nicos sonidos que oamos en las pginas web eran los famosos "midis", de escaso tamao y de escasa calidad. De hecho, eran slo instrumentos musicales sin voz, de ah su pequeo tamao (y calidad). An as, siempre exista algn creador de pginas web que se aventuraba a poner algn sonido complejo (.wav o .mp3) en su pgina web, por desgracia, su carga es tan lenta, que la mayora de los visitantes se iran de la pgina sin llegar a escucharla. Hoy, gracias a las conexiones de banda ancha orientadas a contenido multimedia, poner sonido a las pginas web es un poco ms fcil, qu aporta FLASH? Flash nos permite insertar cualquier sonido que queramos en nuestras pelculas (.wav, .aiff y .mp3) de forma fcil y muy efectiva, ya que es capaz de acelerar la descarga del sonido siempre y cuando se descargue junto con nuestra pelcula. Podemos dar a la pelcula efectos simples (el tpico "clic" al pulsar un botn), efectos complejos (msica de fondo) e incluso podemos hacer que la animacin se desarrolle conjuntamente con una msica (si bien esto ltimo necesitara que toda la pelcula estuviera descargada previamente, para evitar "atascos" durante el desarrollo de la animacin). En definitiva, Flash nos lo vuelve a poner fcil.

7.2 Propiedades de los Sonidos

Importar sonidos: si, no has conseguirlo insertar sonidos, esto se debe a que no se tiene en cuenta que para poder emplear un objeto en nuestra pelcula, o bien lo creamos nosotros (como llevamos haciendo hasta ahora) o bien lo conseguimos de cualquier otro modo y lo insertamos en nuestra pelcula. A esto ltimo se le llama "Importar" y se puede hacer con sonidos, grficos, e incluso con otras pelculas Flash. Importar por tanto, no es ms que decirle a Flash que aada un determinado archivo a nuestra pelcula, para que podamos usarlo cuando queramos. En realidad, lo aade a nuestra Biblioteca, que es el Panel en el que estn todos los objetos que participan en la pelcula (este Panel se ver ms adelante). As pues si queremos manejar un sonido en pelcula, deberemos importarlo previamente. Una vez est importado, podremos usarlo con total libertad. Para importar un sonido haz clic en el men Archivo Importar Importar a biblioteca. nuestra

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

13

Se abrir el cuadro de dilogo de Importar a biblioteca. All debers seleccionar en Tipo de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu pelcula. Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar. El sonido estar listo para usarlo donde quieras, podrs encontrarlo en la Biblioteca (men Ventana Biblioteca).

Todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningn sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie. Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algn fotograma de nuestra pelcula, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:

Veamos las partes que tiene este panel. Sonido: En esta pestaa nos aparecern las canciones que tenemos importadas, deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (en el siguiente punto veremos cmo insertarlo). Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensacin de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si deseamos aadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algn programa creado especficamente para este propsito antes de importarlo. En el punto Editar Sonidos se tratar en ms profundidad estos efectos. Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestro sonido, estas son las opciones que tenemos: Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defecto y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en el que

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

14

est situado. Tambin se puede sincronizar el sonido con botones y los dems tipos de smbolos.

Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si est seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" del sonido actual. Puede ser un efecto muy atractivo, o puede provocar que se forme "ruido" en nuestra pelcula. Detener: Detiene el sonido seleccionado. Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado, por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de que la pelcula se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una pelcula. En esta situacin, es muy recomendable que el sonido y las imgenes estn sincronizadas.

Repetir: Determina el nmero de veces que se reproducir el sonido segn lo que escribas en la caja de texto de la derecha. Tambin puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave. No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el tamao de la pelcula.

Insertar un Sonido
Ahora que ya sabemos importar un sonido, qu opciones podemos modificar y para qu sirve cada una. Veamos lo ms importante, cmo insertarlos en nuestra pelcula. Supongamos que queremos insertar un sonido en un fotograma determinado, de modo que cuando la pelcula Flash llegue a este fotograma comience a reproducirse el sonido. Para que un sonido se reproduzca al llegar a un fotograma, deberemos seleccionar el fotograma en el que queremos que empiece a reproducirse el sonido. Una vez all, abriremos el Panel Propiedades e importaremos el sonido que queramos del modo visto en el punto anterior. Otro modo ms rpido an consistira en seleccionar dicho sonido en la Biblioteca y arrastrarlo al fotograma en el que queramos que se empiece a reproducir el sonido (al fotograma, no a la lnea de tiempo).
As representa Flash los sonidos insertados en Fotogramas

De este modo insertamos un sonido, pero suena tal y cmo queremos que suene? ... Depende de lo que busquemos. Por defecto Flash entiende que quieres reproducir el sonido en su totalidad, sino para qu insertarlo entero?, de modo que Flash reproducir el sonido todas las veces que le hayas indicado en Repetir y el sonido sonar aunque el fotograma en el que est no sea el que se

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

15

est ejecutando en ese instante. Si quisiramos que el sonido pare cuando entremos en otro fotograma, lo podemos hacer de 2 formas distintas, ambas combinando las opciones que nos ofrece el Panel Propiedades. La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario. El sonido se aadir al fotograma en el que nos encontramos. Otra opcin sera la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el panel Propiedades del fotograma seleccionado:

En la opcin Sonido seleccionaramos el audio que queremos aadir al fotograma. Luego modificaramos la opcin Sinc. del siguiente modo: Si seleccionamos Flujo, el sonido se reproducir hasta llegar al primer fotograma que no lo contenga.

Podemos seleccionar Stop para marcar un fotograma de modo que el sonido se detenga al llegar a l.

Editar Sonidos
Flash no fue creado como un editor de sonidos, por lo que su potencia en este campo es limitada. An as, los efectos que permite aplicar de un modo sencillo suelen ser suficientes para cualquier animacin que queramos realizar. Disponemos de estos efectos: Canal Izquierdo: El sonido tan slo se escuchar por el altavoz izquierdo. Canal Derecho: El sonido tan slo se escuchar por el altavoz derecho. Desvanecimiento de izquierda a derecha: El sonido se reproduce inicialmente en el altavoz izquierdo para luego pasar al derecho. Desvanecimiento de derecha a izquierda: El sonido se reproduce inicialmente en el altavoz derecho para luego pasar al izquierdo. Aumento Progresivo: El volumen de nuestro sonido aumenta progresivamente. Desvanecimiento: El volumen de nuestro sonido disminuye progresivamente. Personalizado: Esta opcin nos permite "editar" el sonido de un modo rpido y sencillo. Desde este editor podemos decidir qu volumen tendr nuestro sonido y en qu altavoz.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

16

Podemos crear los efectos anteriores ajustndolos a nuestro gusto y podemos crear efectos ms complejos a nuestra medida. Esta es la apariencia del Panel Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una lnea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las lneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen. En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen est al mximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldra a un Aumento Progresivo en el canal derecho).

CAPITULO II
LA ANIMACION EN FLASH

Flash 8 es un programa bsicamente orientado a la animacin, de ah la gran importancia de este tema. No obstante, para ir creando animaciones cada vez ms complicadas se necesita, sobre todo, de mucha prctica. Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren muchos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programacin como Java, de una manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco. Aunque Flash ofrece tcnicas mejores, tambin se pueden crear animaciones a modo de GIF animado. A continuacin veremos distintos tipos de animaciones:

1. Animacin Fotograma a Fotograma.

Cabe destacar que podremos aplicar varias de estas animaciones colocndolas en distintas capas. Con esto es con lo que conseguiremos los efectos ms espectaculares a la par que tiles. Es muy importante tener claro un concepto: no se debe crear animaciones en pginas que no lo necesitan, ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

17

Aunque Flash incorpora tcnicas mucho mejores que estas, tambin permite "simular" la forma de animacin de los GIF animados, ya que en ocasiones la animacin es muy brusca o el cambio no es realizable "automticamente" con Flash o simplemente nuestro objetivo es exportar el grfico creado como este tipo de mapa de bits. Para crear una animacin fotograma a fotograma basta introducir la apariencia inicial del objeto en el primer fotograma, hacer claves todos aquellos fotogramas que vayan a intervenir en ella, e ir modificndolos uno a uno, progresivamente, ya que una diferencia muy grande de un fotograma al siguiente creara un golpe brusco para el que la visualiza. Una vez completada la animacin tendremos algo como lo que mostramos a continuacin en nuestra lnea de tiempos:

Veamos la diferencia de tamaos de las diferentes tcnicas de animacin para una misma pelcula: Tenemos la siguiente animacin. La apariencia se mantendr prcticamente igual en todos estos casos, pero cabe la posibilidad de que al hacerlo fotograma a fotograma, se cometan pequeos errores de posicionamiento en la trayectoria que Flash no cometera:

2. Animacin con Interpolacin de Movimiento (I)

Es la accin bsica de las animaciones en Flash. Permite desplazar un smbolo Flash de un lugar a otro del escenario, siendo necesarios nicamente dos fotogramas, lo que optimiza mucho el rendimiento de la pelcula. Es importante destacar que para que una Interpolacin de movimiento se ejecute correctamente aquellos objetos que intervengan debern haber sido previamente convertidos a smbolo. Tambin se debe tener cuidado al realizar una Interpolacin con dos smbolos que se encuentren en la misma capa, ya que el motor de animacin los agrupar como uno slo y el resultado no ser el esperado. Por esto es conveniente asegurarse de dos cosas: 1) Separar en distintas capas los objetos fijos y los que estarn animados. 2) Poner tambin en distintas capas objetos que vayan a ser animados con direcciones o formas distintas. Pasemos pues al tema en cuestin. Una interpolacin de movimiento, como hemos dicho, es el desplazamiento de un smbolo de uno a otro punto del escenario. El hecho de que slo se necesiten dos fotogramas es debido a que Flash, nicamente con la posicin inicial y final,

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

18

"intuye" una trayectoria en lnea recta y la representa (veremos que tambin se pueden realizar movimientos no rectilneos). Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo.

Esto indica que la animacin cambiar la posicin del smbolo del fotograma 1 hasta la posicin del mismo smbolo en el fotograma 20, utilizando precisamente 20 fotogramas. El nmero de fotogramas que se usen en la interpolacin de movimiento indicar las subetapas de que constar la animacin. Cuantas ms subetapas ms sensacin de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su parmetro en la barra de tiempos, pero esto no cambiar lo que hemos comentado anteriormente. La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor ms velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animacin como queremos. Mantn en mente que cuando realices una interpolacin de movimiento el fotograma inicial y final debern ser diferentes, en caso contrario no se crear ningn tipo de animacin. Observa en las siguientes imgenes dnde est situada la pelota en el primer fotograma de la animacin y su posicin final en el ltimo fotograma: Si el objeto con el que queremos hacer la interpolacin de movimiento no est convertido a smbolo nos encontraremos con algo as...

... y la animacin no funcionar.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

19

Tambin podemos realizar la interpolacin de otra forma, sin convertir previamente el objeto a smbolo, ya que Flash lo convierte a smbolo automticamente si no lo hacemos, dndole el nombre "Animar" ms un nmero. Basta con hacer clic con el botn derecho sobre el fotograma que contiene nuestro objeto (en la lnea de tiempos) y seleccionar Crear Interpolacin de Movimiento. Despus, al crear un fotograma clave en otro lugar de la lnea de tiempos se crear automticamente la interpolacin, y slo deberemos modificar este ltimo fotograma para producir la animacin. Esto quiz no sea lo ms conveniente en pelculas grandes, debido a lo que ya comentamos de la gran cantidad de smbolos que pueden aparecer y la confusin que crean muchos smbolos con nombres parecidos. Flash tambin nos permite crear animaciones con trayectorias rectilneas en varias fases, con direcciones distintas. Para ello, una vez creada la interpolacin, basta con pinchar en uno de los fotogramas intermedios y crear un nuevo fotograma clave. Si movemos el smbolo en ese fotograma a otro lugar del escenario y reproducimos, la animacin ir primero a esa posicin y despus a la posicin final. Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas ms.

3. Interpolacin de Movimiento (II)

Acabamos de ver las interpolaciones de movimiento como un mecanismo para desplazar un smbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar este comando del programa para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamao. Esto es muy sencillo con Flash 8, basta con modificar la instancia del smbolo en el ltimo fotograma de la interpolacin de movimiento, pero esta vez cambindole el tamao. Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamao se producir mientras el objeto se desplaza. Tambin podemos hacer el cambio de tamao en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes. Y la lnea de tiempos que nos queda es algo tan sencillo como esto:

4. Animacin de texto y figuras

Es indudable que para comunicar algn mensaje, en la mayora de las ocasiones, no basta con imgenes o iconos, y es aqu donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animacin de los textos, ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamao.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

20

Por este motivo, un texto animado debera estar slo en las presentaciones o bien formar parte de una animacin corta y, lo que es ms importante no debera estar reproducindose infinitamente. En las presentaciones, se utilizan multitud de efectos que veremos ms adelante. Sin embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones ms utilizadas es separar las letras de los textos y animarlas independientemente
Animacin de Lneas

Una buena animacin no tiene que porqu estar compuesta slo por textos o imgenes espectaculares. En ocasiones conviene darle a la pelcula un aire ms sencillo o aadir determinados efectos que la hagan vistosa sin necesidad de cargar mucho la pelcula visualmente, y en cuanto a tamao de archivo se refiere.

Esto lo podemos conseguir simplemente animando lneas y haciendo que se muevan por el escenario. Esta tcnica nos permite dar dinamismo a la animacin o crear formas distintas a lo largo de su recorrido. Son especialmente tiles y vistosas en fondos oscuros y se suelen usar para formar rectngulos que se aprovechan para insertar imgenes. A la derecha podemos ver un ejemplo de este tipo de presentaciones.

Para crear esta animacin debers crear tantas capas como animaciones de lneas vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de lneas de abajo a arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y finalmente una ltima para el movimiento de derecha a izquierda.
Tambin crearemos una capa que situaremos en la posicin superior donde colocaremos las imgenes que formarn el mensaje de bienvenida.

El funcionamiento de la animacin es claro, deberemos crear interpolaciones de movimiento para cada una de las capas de lneas que en su posicin final emplazaremos en su lado contrario de la pantalla, por ejemplo, las lneas situadas en un principio en la parte inferior al final de la animacin se encontrarn en la parte superior. Realizaremos esto con las 4 capas de lneas. En la capa Imgenes crearemos animaciones que harn aparecer las imgenes que forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se mostrar una imagen, del 11 al 16 otra y la ltima la mostraremos del fotograma 17 al 22. De esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio (5, 11 y 17), arrastraremos desde la Biblioteca (men Ventana Biblioteca) las imgenes para colocarlas

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

21

en su lugar en el fotograma. Estas imgenes se mostrarn nicamente durante el tiempo que dure el fotograma para desaparecer ms tarde dando paso a la otra imagen. Consejo: Si quieres aadir un fondo debers hacerlo en una nueva capa y colocar sta debajo de todas las existentes.

5. Animacin por Forma (I)

Interpolacin por Forma Cuando lo que queramos no sea cambiar la posicin de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash MX nos ofrece la tcnica de la Interpolacin por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto. Realizar una interpolacin por forma, es muy semejante a crear una interpolacin de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. As como hacamos en el tema anterior, slo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el ltimo la apariencia final que queremos que tenga. Esta vez, es importante destacar que para que una Interpolacin por Forma funcione como es debido aquellos objetos que intervengan debern ser objetos vectoriales (no smbolos Flash). Debemos tener tambin dos aspectos en cuenta: 1) Separar en distintas capas los objetos fijos y los que estarn animados. 2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformar todos los objetos vectoriales del primer fotograma en aquello que haya en el ltimo fotograma de la interpolacin. Si realizamos la interpolacin por forma correctamente la lnea de tiempos tendr este aspecto:

Las consideraciones sobre la velocidad y el nmero de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar tambin a la interpolacin por forma y a cualquier animacin hecha con Flash. Si hay algn fallo en los parmetros necesarios para que la interpolacin se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un smbolo, se mostrar algo as en la lnea de tiempos:

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

22

A la derecha podemos ver el resultado del proceso anterior.

Tambin podemos realizar interpolaciones de forma en varias fases de manera anloga a como lo hacamos en el tema anterior. De esta forma podemos hacer que un determinado objeto de convierta en otro antes de adoptar su forma definitiva. Ahora, a la derecha podemos ver el ejemplo anterior pero haciendo que se transforme previamente en un tringulo antes de pasar a ser cuadrado. Lo hemos conseguido simplemente haciendo clic con el botn derecho sobre el fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego slo tenemos que borrar el objeto que aparece en el escenario y dibujar el tringulo. Transformar formas en Textos o formas en textos

Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Aadimos as una posibilidad ms para realizar logotipos o presentaciones vistosas y transmitir informacin de manera espectacular. Recordemos que para realizar una interpolacin de forma es necesario que el objeto sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en funcin de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiramos repasado con la herramienta lpiz el contorno de cada letra. Posibilidades de esta tcnica en textos? Muchsimas, aunque puede llevar a confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transicin. Tambin es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la pelcula, porque si no lo hacemos corremos el riesgo de que la animacin parezca slo un garabato revolvindose. Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos a la izquierda. Podemos comprobar como simplemente cambiando el color del objeto final, se produce una transicin tambin en el color. Observemos a su vez como cuando se forma cada letra, mantenemos su imagen el tiempo suficiente como habamos indicado que era necesario. En este otro ejemplo se observa la transicin de colores ms claramente y, adems, observamos transiciones de forma a texto.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

23

6. Animacin interpolacin mediante gua de movimiento. Es importante conocer: Tipos de Capas

Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas... Capas Gua : Son capas especiales de contenido especfico. 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 misin es representar la trayectoria de un objeto animado, su contenido suele ser una lnea (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 lnea curva. La segunda capa la hemos definido como Capa Gua, para que al realizar la animacin de movimiento (esto lo veremos en un tema posterior) su contenido NO se vea en la pelcula, sino que sirva de recorrido para la bola azul.
Es Importante recordar que el contenido de las Capas Gua no se ver en la pelcula final. Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro siguiendo esa ruta. Bonito

efecto verdad?

Capas Guiadas (Guided Layers) : Cuando definimos una capa como capa gua, es necesario definir despus una capa guiada. Esto es, una capa que quedar afectada por la gua definida en la Capa gua. Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien NO se ver en la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las dems 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 gua.

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

24

Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada capa gua le corresponden una serie de capas guiadas. Al asociar una capa gua con una capa guiada, el icono que representa a la capa gua cambia, indicndonos que est realizando correctamente su labor.
En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamente asociadas entre s. (La capa llamada aulaClic es, evidentemente, la capa Guiada)

El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de las Animaciones de Movimiento Capas Mscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizar en cursos posteriores. Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y slo dejan que se vea la parte de stas que tapan los objetos situados en las capas mscara (son como filtros). Al igual que las capas gua, los objetos existentes en este tipo de capas tampoco se ven en la pelcula final. S se vern los objetos de su correspondiente capa enmascarada a los que estn "tapando". Capas Enmascaradas : Estas capas funcionan conjuntamente con las Capas mscaras. Al igual que las capas gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la capa Mscara est sobre ellos. Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en la pelcula final (pero slo lo que tape la capa mscara). El valo rojo est situado en la capa Mscara y no se ver en la pelcula, pero slo se ver lo que l "tape". As se emplean las mscaras...

Interpolacin mediante Gua de Movimiento

Curso de Flash

Institucin Tecnica Industrial Donald Rodrigo Tafur

25

Anteriormente hemos visto como las interpolaciones de movimiento desplazaban smbolos Flash en lnea recta. Puesto que esto supone una cierta limitacin Flash 8 incluye la Gua de movimiento. Una gua de movimiento es una capa especial que marca una trayectoria para los smbolos de la capa a la que afecta, para que dichos smbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproduccin y permite dibujar cualquier tipo de dibujo vectorial, que nos permitir crear un movimiento no forzosamente rectilneo. Crear un movimiento mediante esta tcnica es bastante sencillo, basta con crear una interpolacin de movimiento en una capa, seleccionarla (debemos asegurarnos de esto para evitar que la gua se asocie a otra capa), y colocar el smbolo del ltimo fotograma al final del trazado que realizaremos previamente en la capa de la gua. No es necesario colocarlos al principio del trazado ya que Flash lo hace automticamente.

Vemos como la capa a la que se asocia la gua aparece debajo y alineada a la derecha. Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que debers hacer es crear una animacin de movimiento, para ello: Crea un fotograma clave pulsando F6 e inserta en l el smbolo que quieres que realice el movimiento. 1. Crea un nuevo fotograma clave para marcar la duracin de la animacin, por ejemplo, si creaste el primer fotograma en la posicin 5, crea el nuevo en la posicin 25, as tendrs una animacin que durar 20 fotogramas. 2. Selecciona todos los fotogramas que intervengan en la animacin y haz clic derecho sobre uno de ellos en la Lnea de tiempos. Selecciona la opcin Crear interpolacin de movimiento. Una vez creada la interpolacin y con la capa seleccionada pulsa el botn Aadir gua de movimiento. Se crear una nueva capa asociada a aquella donde tienes creada la animacin. Ahora el procedimiento es fcil, selecciona la herramienta Lpiz y dibuja en la capa gua el recorrido que debe seguir el smbolo. Cuando lo hayas creado selecciona el ltimo fotograma de la animacin y coloca el smbolo en su punto final. Recuerda que el smbolo debe estar siempre en contacto con la lnea de gua tanto en el primer como ltimo fotogramas.