DISEO ANIMADO MACROMEDIA FLASH PROF.

MARTN EDUARDO BRENIS LANEGRA

Introduccin a Macromedia Flash 8 Conceptos bsicos Qu es una animacin? La animacin es un proceso utilizado para dar la sensacin de movimiento a imgenes o dibujos. Para realizar animacin existen numerosas tcnicas que van ms all de los familiares dibujos animados. Existen programas o aplicativos que nos permiten crear estas animaciones desde el Microsoft Power Point hasta el flash. Qu es flash? Es una aplicacin en forma de estudio de animacin que trabaja sobre "fotogramas", destinado a la produccin y entrega de contenido interactivo para las diferentes audiencias alrededor del mundo sin importar la plataforma. Los archivos de Flash, que tienen generalmente la extensin de archivo SWF, pueden aparecer en una pgina web para ser vista en un navegador, o pueden ser reproducidos independientemente por un reproductor Flash. Qu es una Pelcula? Se le llama pelcula al archivo que se genera con el programa de Macromedia Flash. La extensin que genera este programa es fla. Qu es una Escena? Escena es nuestra rea trabajo, es donde se insertan los objetos que se necesitan para realizar una animacin. Qu es un objeto? Objeto es cualquier dibujo generado con las herramientas de flash, ejemplo: un rectngulo, elipse, smbolo, imagen, componente, etc. Qu aplicaciones se pueden crear con flash? Animaciones: Incluyen anuncios publicitarios, tarjetas de felicitacin en lnea, dibujos animados, etc. Muchos otros tipos de aplicaciones de Flash tambin incluyen elementos de animacin. Juegos: La mayora de los juegos se crean con Flash combinando con las capacidades lgicas de ActionScript. reas de mensajes flexibles: Se trata de reas de las pginas Web que utilizan los diseadores para mostrar informacin que puede variar con el tiempo. Presentaciones: Se trata de aplicativos que se utilizan para mostrar alguna informacin, contenido, esquemas, imgenes y videos de un tema. Lo cual les servir para una exposicin y/o libro virtual. Ventajas de Flash Diseos ms atractivos: permite el uso de efectos visuales que nos facilitarn la creacin de animaciones, presentaciones y formularios ms atractivos y profesionales. Optimizacin de fuentes: permite la seleccin de configuraciones preestablecidas para textos dinmicos y estticos. Mayor potencia de animacin: permite un mayor control de las interpolaciones habilitando un modo de edicin desde el que se podr modificar independientemente la velocidad en la que se apliquen los

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

diferentes cambios de rotacin, forma, color, movimiento, etc, de nuestras interpolaciones. Mayor potencia grfica: Evita la repeticin innecesaria de la representacin de objetos vectoriales simplemente sealando un objeto como mapa de bits. Importacin de vdeo y audio: Permite insertar video y audio, de esta manera tener un trabajo ms dinmico y animado. Utiliza el ActionScript: lenguaje de programacin que ha utilizado Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash 8. Utilizado especialmente en aplicaciones web animadas. Entorno de Flash 8 Flash 8 cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva, esto hace ms fcil aprender Flash y ms rpido su manejo y dominio.

Barra de Ttulo: contiene el nombre del aplicativo y del archivo. Barra de Men: 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. Barra o caja de Herramientas: contiene todas las Herramientas necesarias para el dibujo. 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. Capas: se puede definir como una pelcula independiente de un nico nivel. Es decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas). rea de Trabajo: es el Escenario, sobre el cual dibujaremos y colocaremos los diferentes elementos de la pelcula que estemos realizando. Panel de Propiedades:
NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

Paneles: son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que haga referencia a las acciones, ir en el Panel "Acciones"). Su misin es simplificar y facilitar el uso de los comandos. REALIZANDO LA PRIMERA ANIMACIN A primera vista, lo lgico parece ser dibujar la pelota en cada instante del movimiento, de modo que cuantos ms instantes dibujemos, ms real parecer el movimiento. Pero la tcnica es la siguiente: Crear 3 fotogramas: en el primero dibujaremos la pelota en el instante inicial (arriba del todo), en el segundo se dibujar la pelota en el momento de tocar el suelo y en el tercero la pelota volver a estar arriba. Para seguir insertando fotogramas, solo debes ubicar el cursor en el fotograma y presionar la tecla F6. Recuerda que entre los tres fotogramas debe haber una distancia para que se aprecie mejor la animacin. En la lnea de tiempo se apreciar as:

Para visualizar nuestra pelcula o animacin se debe presionar las teclas Ctrl + Enter. Podemos ver que la animacin es muy simple, para darle movimiento a este objeto se aplicar la siguiente tcnica: Anticlic sobre el primer fotograma, aparece un men contextual, clic en crear interpolacin de movimiento. Ahora visualizaremos la lnea de tiempo de la siguiente manera:

Tipos de Animacin En Flash existen tres tipos de animacin: fotograma a fotograma interpolacin de movimiento interpolacin de forma En la animacin fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animacin uno por uno, al estilo de las clsicas pelculas de

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Adems, el archivo debe almacenar los cambios de cada fotograma. La animacin por interpolacin consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automticamente los pasos intermedios. La animacin por interpolacin de movimiento es que la debemos elegir cuando los objetos de los dos fotogramas claves slo se diferencian en su posicin, escala o rotacin La animacin por interpolacin de forma esta se diferencia en que grada el cambio de la forma del objeto, realizada a travs de la manipulacin de sus puntos de control. Tambin permite cambiar el color. LA INTERFAZ DE TRABAJO 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. 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.

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

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 LINEA 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).

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

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

PROPIEDADES DEL ESCENARIO O DOCUMENTO 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) COLOR DE FONDO: El color aqu seleccionado ser el color de fondo de toda la pelcula. VELOCIDAD DE FOTOGRAMAS: O nmero de fotogramas por segundo que aparecern en la pelcula. UNIDADES DE REGLA: Unidad que se emplear para medir las cantidades. LAS VISTAS O ZOOM La Herramienta Lupa se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en la Lupa duplicaremos el porcentaje indicado en el Panel Zooms. Panel Zooms: Son un conjunto de accesos directos a Submens existentes en el Men Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean correctamente. LOS PANELES Son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que haga referencia a las acciones, ir en el Panel "Acciones"). Su misin es simplificar y facilitar el uso de los comandos. Todos ellos se estudiarn en profundidad a lo largo del curso. Aun as, vamos a nombrarlos y a resumir las funciones de la mayora de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til. Panel Mezclador de Colores: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras de Color: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones).

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy til para alineaciones exactas.

Panel Escena: Modifica los atributos de las escenas que usemos.

Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula. Panel Comportamientos: Permiten asignar a determinados objetos una serie de caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a otros objetos de forma rpida y eficaz. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash 8 aporta soporte multi-idioma a nuestras pelculas. Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlo de vista nunca. Panel Explorador de Pelculas: Nos permite acceder a todo el contenido de nuestra pelcula de forma fcil y rpida BARRA DE HERRAMIENTAS BSICAS Herramienta Seleccin (flecha): seleccionar objetos. Herramienta Lnea: modo rpido. Herramienta Texto: hagamos clic. . Su uso principal es para

Permite crear lneas rectas de un Crea un texto en el lugar en el que

Herramienta valo: La herramienta valo permite trazar crculos o elipses de manera rpida y sencilla. Herramienta Rectngulo: Su manejo es idntico al de la Herramienta valo, tan solo se diferencian en el tipo de objetos que crean.

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

Herramienta Lpiz: Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. Herramienta Brocha: Su funcionalidad equivale a la del lpiz, pero su trazo es mucho ms grueso. Herramienta Cubo de Pintura: que hayamos creado. Herramienta Borrador: "dibuje". Permite aplicar rellenos a los objetos

Su funcin es la de eliminar todo aquello que

BARRA DE HERRAMIENTA AVANZADAS Herramienta Lazo: Su funcin es complementaria a la de la Herramienta Flecha, pues puede seleccionar cualquier cosa, sin importar la forma. Herramienta Pluma: Permite 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 Bote de Tinta: color de un trazo. Se emplea para cambiar rpidamente el

Herramienta Cuentagotas: Su misin es "Capturar" colores para que posteriormente podamos utilizarlos.

BARRA DE HERRAMIENTAS OPCIONES 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: Convierte los trazos rectos en lneas menos rgidas.

Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en ms rectilneos.

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

PRCTICA DE LABORATORIO: EL SEMFORO Y EL CARRO PRIMERA CAPA: EL TTULO 1. Primero inserta un fotograma, presionando F6. 2. Selecciona la herramienta texto , insrtela fuera del escenario, escribir: EL SEMFORO Y EL CARRO (la fuente y el color queda a criterio de usted), luego ubcate en el fotograma # 20, presiona F6, ubica el texto en el otro extremo del escenario, y finalmente en el fotograma # 40, ubica el texto en el centro del escenario. 3. Finalmente crear interpolacin de movimiento en cada fotograma. Nota: Para insertar una nueva capa, solo debes hacer anticlic sobre la primera capa y selecciona la opcin insertar capa. Y para cambiarle el nombre debes hacer doble clic en el nombre de la capa y escribir el nombre deseado. SEGUNDA CAPA: EL SEMFORO 1. Seleccionar la herramienta rectngulo , trazar un rectngulo de regular tamao, de color gris, luego trazar otro rectngulo debajo de este, pero ms delgado, ambos a un lado del escenario (como se visualiza en la imagen de abajo). 2. Luego seleccionar la herramienta valo , trazar tres valos sobre el rectngulo grande, el primero de color rojo (encendido), el segundo amarillo oscuro (apagado) y el tercero de color verde oscuro (apagado). 3. Ubcate en el fotograma # 15, presiona la tecla F6, luego en el fotograma # 28 y finalmente en el fotograma # 40, en ambos debes presionar la tecla F6. 4. En el fotograma # 15 selecciona el 1 valo, cambia el color por uno ms oscuro (apagado), al 2 valo cmbiale por un color ms vivo (encendido). 5. En el fotograma # 28 selecciona el 1 valo, cambia el color por uno ms oscuro (apagado) y el 3 ovalo por un verde fosforescente (encendido). 6. En el fotograma # 40 los tres valos deben poseer un color oscuro, es decir el color en su estado de apagado. TERCERA CAPA: EL CARRO: 1. Seleccionar la herramienta lpiz , ubcate en el fotograma # 10, presiona F6, al extremo del semforo, dibujars un carro con el lpiz. Con el cubo de pintura le puedes dar color de relleno. 2. Selecciona la herramienta valo , ahora selecciona el color con ayuda de la opcin color de relleno dibuja ahora las dos llantas del carro. 3. Ahora ubcate en el fotograma # 40, presiona F6 y ubica al carro cerca del semforo. 4. Finalmente crear interpolacin de movimiento. La lnea de tiempo y el escenario deben apreciarse de la siguiente manera:

10

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

TRABAJANDO CON TEXTOS Flash abarca todo aquello que nos pueda hacer falta a la hora de crear una animacin, y por tanto, tambin todo aquello relativo a los textos. Sin embargo, Flash fue concebido para crear animaciones grficas, de modo que tratar cualquier texto como si de un objeto ms se tratase, listo para ser animado a nuestro gusto. Esto nos permitir posteriormente animar textos y crear espectaculares animaciones con muy poco esfuerzo. Flash distingue entre 3 tipos de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo). Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario en el que queramos empezar a escribir.

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.

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.

11

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

Ajuste automtico entre caracteres: Activar esta casilla provoca que la separacin entre caracteres se realice de modo automtico. Posicin: Nos permite convertir nuestro texto en subndices o en superdices (o dejarlo normal). 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: Las lneas se distribuyen a la derecha y a la izquierda del punto medio del Prrafo. 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. GUIA 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

12

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

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. Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que debers hacer es crear una animacin de movimiento, para ello: 1. Crea un fotograma clave pulsando F6 e inserta en l el smbolo que quieres que realice el movimiento. 2. 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. 3. 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. AADIENDO GUIA DE MOVIMIENTO PRCTICA DE LABORATORIO 01: EL AVIN 1. Ejecuta o abre la aplicacin flash 8 y crea un documento en blanco. 2. Importar a biblioteca la imagen del avin que se ubica en la unidad D. 3. Inserta el avin en el fotograma 1 y luego en el fotograma 45, presionando F6. 4. Luego crea interpolacin de movimiento en la capa 1. 5. Ubcate debajo de la capa 1 y haz clic en GUIA DE MOVIMIENTO . Se insertara automticamente una nueva capa llamada gua de movimiento. 6. Ubica el puntero en el fotograma 1 de la gua de movimiento. 7. Ahora selecciona la herramienta lpiz, en opciones elige SUAVIZAR.

13

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

8. En el escenario traza un ruta para este avin, que vaya de abajo hacia arriba (zig zag). Esta debe coincidir con el crculo que est en medio de dicho avin, para que la animacin funcione. 9. Ahora ubica el puntero en el fotograma 45 de la capa 1, con la herramienta seleccin ubica al avin en el otro extremo del escenario, de tal manera que coincida con el final del trazo del lpiz. 10.Listo, visualzalo y gurdalo.

PRCTICA DE LABORATORIO 02: MOVIMIENTO DE TRASLACIN DE LA TIERRA. 1. Crea un documento en blanco. Ruta: Clic Archivo/ Nuevo / Documento en blanco / Aceptar. CAPA 1: EL SOL 2. Traza un valo de color amarillo encendido, que se ubique en el centro del escenario. Luego crea fotogramas clave en las posiciones 20, 40, 60, 80. 3. Luego crea interpolacin de movimiento en cada uno de ellos. 4. En los fotogramas 20 y 40 selecciona el valo, dirgete al panel de propiedades y en la opcin color, selecciona TINTA y elige un color amarillo bajo. Esto permitir dar la apariencia que sol este brillando. CAPA 2: LA TIERRA 1. En el fotograma 1, traza un ovalo de color celeste azulado, ubcalo a un lado derecho superior del escenario. 2. Crea fotogramas claves en las posiciones 20, 40, 60 y 80. 3. En el fotograma 20 ubica a la TIERRA al lado izquierdo superior, en el fotograma 40 al lado izquierdo inferior, en el fotograma 60 al lado derecho inferior, y en el fotograma 80 en el mismo que el fotograma 1. 4. Crear movimiento de interpolacin. GUA DE MOVIMIENTO DE LA TIERRA 1. Aadir gua de movimiento. 2. En esta capa, trazar un valo, pero antes debers deshabilitar el color de relleno, solo debe aparecer la lnea de contorno. Trzala de manera que coincida con la ubicacin de la tierra en los diferentes fotogramas claves, para que se produzca la animacin. 3. Si por algn caso no coinciden puedes mover los valos de tal manera que coincidan con la trayectoria de la gua de movimiento. 4. Listo, visualzalo y gurdalo.

INTERPOLACIN DE FORMAS Flash 8 nos ofrece la tcnica de la Interpolacin por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz

14

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

en un fotograma clave hasta que sea igual que el contorno de otro objeto distinto en otro fotograma clave. Realizar una interpolacin por forma, es muy semejante a crear una interpolacin de movimiento. Solo debes seguir los siguientes pasos: 1. Inserta un objeto (ovalo, rectngulo, etc.) en el primer fotograma. 2. Luego ubica el cursor en un fotograma distante, y presiona la tecla F6. 3. Selecciona los fotogramas claves. 4. Ubcate en el panel de propiedades, en la opcin ANIMAR, elige FORMA. 5. Ahora cliquea el ultimo fotograma clave, presiona el botn SUPRIMIR. 6. Inserta en este fotograma otro objeto diferente al del primer fotograma.

TRANSFORMACIN DE TEXTOS Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y una vez tengamos la animacin creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolacin aparece como incorrecta. Para arreglar ese problema, debemos: 1. Cliquea el primer fotograma clave, dirgete a la barra de men. 2. Clic en MODIFICAR. 3. Clic en la opcin SEPARAR. 4. Vuelve a realizar estos pasos. Recuerda que son dos veces por fotograma. NOTA: Pixel, abreviatura de Picture Element, es un nico punto en una imagen grfica. EFECTOS EN LINEA DE TIEMPO: Flash 8 nos permite insertar efectos en la lnea de tiempo, para aplicar estos efectos debemos: 1. Anticlic sobre el elemento u objeto. 2. Selecciona Efectos de lnea de tiempo. 3. Cliquea en la opcin efectos o transicin. 4. Entre los efectos tenemos: Desenfocar, expandir, sombra y explotar.

15

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

Mscaras Para obtener el efecto de foco y de transiciones, puede utilizar una capa de mscara para crear un agujero a travs del cual se puedan ver las capas situadas por debajo. Un elemento de mscara puede ser una forma rellena, un objeto de tipo, una instancia de un smbolo de grfico o un clip de pelcula. Varias capas pueden agruparse bajo una misma capa de mscara para crear efectos sofisticados. Pasos: Este ejemplo lo podr observar en la carpeta Ejemplos con el nombre de mascaras.fla 1. Crear una animacin cualquiera sea de interpolacin de movimiento o de formas. (Capa que tendr funcin de Mscara). 2. Agregar una capa (aydese del icono de la Lnea de tiempo), inserte objeto.

(Capa que tendr funcin de enmascarada). Si el objeto es texto asegrese de que sea de tipo texto esttico. 3. Arrastrar la nueva capa debajo de la capa que tiene la animacin. 4. Clic derecho sobre la capa que tiene la animacin, elegir Mscara. Ejemplo:

Capa mscara objeto rectngulo

Capa enmascarada objeto texto de tipo esttico

16

NUESTRO MUNDO INFORMTICO EN UN CLIC

DISEO ANIMADO MACROMEDIA FLASH PROF. MARTN EDUARDO BRENIS LANEGRA

17

NUESTRO MUNDO INFORMTICO EN UN CLIC