La interfaz de Flash Flash CS5 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 CS5 por primera vez:

A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS5 en castellano. Podeis descargar esta versin de forma gratuita desde la web de Adobe. Estar disponible hasta que se lance la siguiente evrsin.

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 Tambin permite impresin de imprimirlas...

la publicacin. configurar la las pginas,

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: 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.... Depurar: Aqu encontraremos las opciones de depuracin de la pelcula

que te ayudaran a encontrar errores de progrmacin en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar... Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos directos a todos los paneles y tambin la posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, 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 permiten saber asignado cada dura o cundo pelcula. de Fotograma que qu nmero tiene fotograma, cunto aparecer en la

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 (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 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 . 2.4. 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 el cdigo ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se ver en la unidad referente a Capas.

2.5. El Escenario A continuacin veremos las diferentes partes que conforman el rea de trabajo empezaremos con la ms importante: 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)

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.

Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso Cambiar las dimensiones de la pelcula

Las Vistas o Zooms La Herramienta Zoom 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 con el Zoom duplicaremos el porcentaje indicado en el desplegable 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. Para saber ms acerca de los Zooms pgina Bsica . 2.7. Los Paneles 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. Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de trabajo. Pudindose expandir o minimizar con un clic de ratn. Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el men Ventana y haciendo clic sobre el nombre del panel que quieras mostrar. Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias disposiciones de paneles, para que si en algn momento el entorno se vuelve un poco catico puedas recuperar tu

configuracin elegida desde el men Ventana. Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.

Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo elemento de men Espacio de trabajo en cualquier momento.

Todos los paneles se estudiarn en profundidad a lo largo del curso. An 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 Color: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones). Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos

modificarlas. Muy alineaciones exactas.

til

para

Panel Escena: Modifica los atributos de las escenas que usemos. Si an no sabes lo que son las Escenas, te lo explicamos en nuestro tema bsico . 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 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

El dibujo en Flash CS5

Cuando se disea una pgina web o una animacin el diseador pasa por muchas fases. Tras la fase de "Qu quiero crear y cmo va a ser" viene (normalmente) la fase de diseo grfico. Llevar lo que ha producido tu imaginacin al papel (en este caso al papel de Flash). No conviene engaarnos, Flash no es un programa de diseo grfico, pero su potencia en este mbito es casi tan grande como la de stos programas. Vamos a ver cmo emplear cada herramienta de dibujo para sacarle el mximo partido. 3.2. La barra de Herramientas bsicas Herramientas.

La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas ms importantes:

Herramienta Seleccin (flecha): . Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic),

los rellenos (con un slo clic), zonas a nuestra eleccin... Su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se vern en el tema siguiente. 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 situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla.

Herramienta de forma: Permite dibujar formas predefinidas como las que aparecen en la imagen, la ltima herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo: La herramienta valo permite dibujar crculos o elipses de manera rpida y sencilla. Para practicar el manejo de esta Herramienta, te aconsejamos realizar Ejercicio Crear valo.

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 Pincel: Su funcionalidad es parecida a la del lpiz, pero por defecto su trazo es ms grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar su herramientas. 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 Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas. Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Pincel. Pero su funcin es la de eliminar todo aquello que "dibuje".

La barra de Herramientas. Herramientas avanzadas

Herramienta Lazo: Su funcin es complementaria a la de la herramienta Seleccin, 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). Al seleccionar esta herramienta, en el Panel de Herramientas aparecen estos botones: . 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: para seleccionar Poligono. 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 Subseleccin: 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: Su misin es "capturar" colores para que posteriormente podamos utilizarlos.

Para ver cmo funciona, consulta este videotutorial: 3.4. La barra Opciones de Herramientas.

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 sino que adems debemos 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 superpongan, 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.

Qu es una capa? Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos animados. Y todos hemos visto cmo colocan una hoja semitransparente (lminas de acetato) con dibujos sobre otras y la

superposicin de todas forman el dibujo final. Por qu no dibujan todo en una misma hoja? Por qu trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash, y la mayora de programas de dibujo o retoque, como Photoshop. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con independencia del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Lnea de Tiempo

y por tanto, sus distintos fotogramas se reproducirn simultneamente. Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante estn vacos). Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas del 5 al 10) mostrar la portera sin portero.

De este modo la portera es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada.

Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada animacin distinta en una capa. De lo contrario, todos los

objetos que se encuentren en dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de una animacin, deberemos quitarlo de la capa en la que se produce dicha animacin. Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera en la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, con lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos en 2 capas, como ya hemos hecho.

Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos interese). Trabajar con capas La vista estndar de una capa es la que muestra la imagen. Veamos para qu sirven los distintos botones y cmo usarlos.

Nueva capa : Como su nombre indica, sirve para Insertar una nueva capa en la escena actual. Crea capas normales (en el siguiente punto se vern los distintos tipos de capas). Crear carpeta : Nos sirve para crear carpetas, que nos ayudarn a organizar nuestras capas. Borrar Capa seleccionada. : Borra la capa

Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual. Propiedades de Capa: Si hacemos doble clic sobre el icono junto al nombre de la capa, podremos acceder a un panel con las

propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna ms de menor importancia.

Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. Tambin puedes bloquearla u ocultarla.

Trabajar con avanzadas

capas.

Opciones

Mostrar / Ocultar Capas : Este botn permite ver u ocultar todas las capas de la pelcula. Es muy til cuando tenemos muchas capas y slo queremos ver una de ellas ya que permite ocultar todas a la vez, para despus mostrar slo la actual. Para activar la vista de una capa en concreto (o para ocultarla) basta con hacer clic en la capa correspondiente en el punto (o en la cruz) que se encuentra bajo el icono "Mostrar / Ocultar capas" Bloquear Capas : Bloquea la edicin de todas las capas, de modo que no

podremos modificarlas hasta desbloquearlas. Para bloquear o desbloquear una capa concreta, procederemos como en el punto anterior, clic en el punto o icono "Cerrojo" situados en la capa actual bajo el icono "Bloquear Capas". Bloquear una capa es muy til cuando tenemos varios objetos juntos y en capas distintas y queremos asegurarnos de que no modificamos "sin querer" alguno de ellos. Tras bloquear su capa podremos trabajar con la seguridad de no modificar dicho objeto, ni siquiera podremos seleccionarlo, de modo que editaremos con mayor facilidad el objeto que queramos.

Mostrar/Ocultar capas como contornos : Este botn nos muestra/oculta los contenidos de todas las capas como si slo estuviesen formados por bordes. De este modo y ante un conjunto numeroso de objetos, podremos distinguirlos a todos de forma fcil y podremos ver en qu capa est cada uno de ellos. Tambin se puede activar o desactivar para cada capa de un modo similar a los anteriores botones. Veamos como se muestran estas opciones activadas y desactivadas.

En la primera imagen la capa actual no tiene ninguno de los botones activados, podemos observar que en la columna Mostrar Capas aparece un punto. Este punto significa que no est activada esta opcin, lo mismo sucede con el botn Bloquear capas. En la columna Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarn completos y no slo sus contornos. En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas, lo que indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna "bloquear capas", lo que simboliza que la capa

est bloqueada. Y en la columna "Mostrar capas como contornos" NO aparece relleno. La capa se est mostrando en este modo y no podremos ver los rellenos hasta deseleccionar esta opcin. Adems, el color de los contornos ser diferente para cada capa, de modo que podamos distinguirlas mejor. El color del contorno, coincidir con el indicado en cada capa. En este ejemplo podis ver cmo queda un objeto en funcin de tener activada o no la opcin contorno:

7.4. Reorganizar las capas

Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas con otras. Lo primero y principal es la Lnea de tiempo, todas las capas de una misma escena comparten la misma lnea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se vern al mismo tiempo en la pelcula superpuestos unos sobre otros. y qu objeto est delante de los dems? Pues este criterio viene dado por la colocacin de las Capas en la pelcula. Los objetos que se mostrarn delante de todos los dems sern aquellos que se

encuentren en la capa situada ms arriba. Es decir, si nos fijamos en el ejemplo anterior: El portero aparece delante de la portera, porque la capa "Portero" est situada encima de la capa "Portera", como puede apreciarse en la imagen. Si quisiramos cambiar esta distribucin, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posicin deseada. Veremos como los objetos se colocan delante o detrs de los de la capa seleccionada segn su capa se encuentre por encima o por debajo de la nuestra.

Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos. Aprende a hacerlo realizando el ejercicio paso a paso Mover objetos entre capas. Tipos de capas Como habris podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botn derecho del ratn sobre el icono de

una capa cualquiera, existen varios tipos de capas.

Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas... Capas animacin movimiento : Son las capas que contienen una animacin por interpolacin de movimiento.

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.

Capas guiadas (Guided Layers) : Definir una capa como gua no tiene sentido hasta que definamos tambin 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. 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 inferior es, evidentemente, la capa con Gua) El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de las Animaciones 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 temas 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 anteriores, ya que son las capas que estn bajo las mscaras y a las

que afectan. 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", que es lo que se ve en la imagen de la derecha. As se emplean las mscaras...

Qu son los smbolos Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS5. Estos objetos al ser transformados en smbolos, son incluidos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones (instancias), ya sea en la misma o en

otra pelcula. Los smbolos nos resultarn fundamentales a la hora de crear nuestras animaciones. 8.2. Cmo crear un smbolo La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de los primeros pasos para crear una animacin, como veremos ms adelante. El procedimiento es el siguiente: Seleccionamos el o los objetos que queramos convertir en un smbolo. Lo ms habitual es partir de una forma. Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo Smbolo, desde el men

contextual eligiendo Convertir en smbolo, o directamente con las teclas Ctrl + F8 o F8. Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen. Introducimos el nombre del smbolo que vamos a crear, y que nos permitir identificarlo en la biblioteca, lo que se har imprescindible cuando tengamos muchos smbolos.

Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de

Pelcula, Botn y Grfico. Sus caractersticas y las diferencias entre ellos las veremos en temas posteriores. Lo ms habitual es Clips de pelcula para los objetos que queremos mostrar en el escenario, y Botn si queremos que acte como tal. Bastar con pulsar Aceptar para tener nuestro smbolo creado.

Las Bibliotecas En Flash CS5 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas

asociadas a las pelculas que hemos creado. Todas ellas las tenemos a nuestra disposicin para utilizar los smbolos que contienen. Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a al men Ventana Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de smbolos: botones, clips o grficos.

Para acceder a la biblioteca de smbolos de la pelcula que estamos creando, de nuevo vamos a la Barra de Mens, Ventana Biblioteca. En esta biblioteca aparecern todos los smbolos que hemos creado hasta el momento. Podemos comprobar como el nuevo smbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha aadido a nuestra biblioteca accediendo a ella como acabamos de indicar. Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un icono que representa el tipo de smbolo que representan: Clip Botn Grfico

8.4. Diferencia instancia

entre

smbolo

Como hemos comentado anteriormente, cuando creamos un smbolo, Flash lo almacena en una biblioteca. Pues bien, cada vez que utilicemos ese objeto en una pelcula, ste se convierte en una instancia del

smbolo.

Por tanto, podemos crear muchas instancias de un smbolo, pero a una instancia solo le corresponder un smbolo. Aunque parece que sean lo mismo, la importancia de esta distincin es que cuando utilicemos un smbolo que hayamos creado previamente en una pelcula y lo modifiquemos, solo alteraremos sa instancia, mientras que el objeto seguir intacto, tal y como era en el momento de su creacin, de manera que podremos volverlo a utilizar en otro momento. En cambio, si modificamos el smbolo de la biblioteca, alteraremos todas sus instancias.

A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es un smbolo.

La animacin en Flash Flash 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, mucha prctica, aparte de conocer bien las herramientas. En este tema y los sucesivos mostraremos las tcnicas bsicas de animacin en Flash. La unin de estas tcnicas ser la que nos

permita crear las ms variadas y vistosas animaciones. En el tema de la animacin, Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programacin como JavaScript, 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.

Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones ms bsicas y conviene conocerlas. Para ello conviene visitar nuestro tema bsico: Animaciones Fotograma a Fotograma. A continuacin veremos distintos tipos de animaciones que el creador de pelculas Flash deber tomar como gua inicial. 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. Desde el punto de vista del diseo general de una pgina web 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. Ya en la versin anterior de Flash se hicieron cambios importantes en el tema de animaciones. Lo que hasta entonces se llamaba interpolacin de movimiento, pasa a llamarse interpolacin clsica y la interpolacin de movimiento actual es totalmente nueva, ms potente y verstil. 12.2. Interpolacin de movimiento Aqu puedes ver cmo realizar una interpolacin de movimiento

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 smbolos. Los grficos, clips de pelcula, textos y botones son algunos de los smbolos que se pueden interpolar. 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: Separar en distintas capas los objetos fijos y los que estarn animados. 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 un punto a otro del escenario. El hecho de que slo se necesiten dos fotogramas es debido a que Flash,

nicamente con la posicin inicial y final, calcula una trayectoria en lnea recta y la representa (veremos que tambin se pueden realizar movimientos no rectilneos). Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolacin de movimiento. Por defecto, se aadirn unos cuantos fotogramas, rellenos de un color azulado. Ahora vamos al fotograma final, o creamos uno clave de propiedad donde nos plazca. Y desplazamos el smbolo. Veremos que aparece una lnea punteada, por defecto recta, que

representa animacin.

el

trazado

de

la

Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo, en el que los fotogramas aparecen de color azul.

Esto indica que la animacin cambiar la posicin del smbolo del fotograma 1 hasta la posicin del mismo smbolo en el fotograma 24, utilizando precisamente 24 fotogramas. El nmero de fotogramas

que se usen en la interpolacin 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. Podemos seleccionar cualquier fotograma y ver dnde se sita el clip en cada punto. De hecho, si en alguno de estos fotogramas lo cambiamos, se crear un fotograma clave de propiedad, mostrndose como un diamante en la lnea de tiempo. La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su parmetro en

la lnea de tiempo, pero esto no cambiar lo que hemos comentado anteriormente respecto al nmero de fotogramas. La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la lnea de tiempo. A mayor valor ms velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animacin como queremos. El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrndolo, una vez seleccionada previamente la herramienta Seleccin .

En cualquier fotograma de la interpolacin podemos cambiar la posicin del smbolo (o cualquier otra propiedad), creando ah un fotograma clave de propiedad, que se representa por un pequeo rombo en la lnea de tiempo. La interpolacin de movimiento permite modificar muchos parmetros del movimiento mediante el Editor de movimiento, que veremos a continuacin. Interpolacin clsica

En versiones ms viejas de Flash slo haba una interpolacin de movimiento disponible, y se llamaba precisamente as, interpolacin de movimiento, en la versin Flash CS4 esa interpolacin de movimiento pas a llamarse interpolacin clsica. Una interpolacin clsica, igual que una interpolacin de movimiento, es el desplazamiento de un smbolo de uno a otro punto del escenario, muchos de los conceptos vistos en las interpolaciones de movimiento son los mismos para las interpolaciones clsicas. Por ejemplo, las animaciones tambin han de ser sobre smbolos y deben estar en una

capa. Los Fotogramas Por Segundo (fps) tienen el mismo significado. Para crear una interpolacin clsica hay que hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolacin clsica. Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo, con los fotogramas sobre fondo de color morado.

Vemos que la animacin va desde el fotograma 1 hasta el fotograma 30. Aparece una flecha que no aparece en la interpolacin de movimiento y el

icono que hay a la derecha del nombre de la capa es distinto. Por supuesto, al realizar una interpolacin clsica 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:

Aqu puedes ver cmo realizar una interpolacin clsica Si el objeto con el que queremos hacer la interpolacin clsica no est convertido a smbolo nos encontraremos con algo as...

... y la animacin no funcionar. 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. 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. Para crear una interpolacin de este tipo, basta con tener un fotograma clave. Hacemos clic con el botn derecho sobre el fotograma en la

lnea de tiempo, y seleccionamos Crear Interpolacin Clsica. Ahora, creamos un nuevo fotograma clave donde queremos que finalice la interpolacin, y modificamos los smbolos en los fotogramas clave. Veremos que si seleccionamos uno intermedio, se muestran los smbolos en su transicin al fotograma final. Podemos decidir cmo mostrar el smbolo en ese fotograma, por ejemplo movindolo. Al hacerlo automticamente se crea un fotograma clave. Esto hace que el movimiento ya no sea recto, y pueda ser en zig-zag.

Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas ms. Pero recuerda, que para la mayora de casos, nos resultar ms verstil la interpolacin de movimiento. Diferencias entre interpolacin de movimiento e interpolacin clsica En general las interpolaciones de movimiento son ms fciles de utilizar y ms potentes, no obstante las interpolaciones clsicas tienen caractersticas que pueden hacerlas ms interesantes para determinados usuarios. Estas son algunas de las diferencias entre los dos tipos de interpolaciones:

- Las interpolaciones de movimiento incluyen el trazado del movimiento, mientras que en una animacin clsica no existe el trazado, a menos que lo creemos expresamente. Slo se permiten realizar interpolaciones con smbolos, si aplicamos una interpolacin de movimiento a un objeto que no es un smbolo, Flash lo convertir en un clip de pelcula, mientras que si se trata de una interpolacin clsica lo convertir en un smbolo grfico. - En las interpolaciones clsicas cuando cambia una propiedad se crea un fotograma clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento

slo hay una instancia de objeto y al cambiar una propiedad se crea un fotograma clave de propiedad. - La interpolaciones de movimiento pueden trabajar con texto sin tener que convertirlo en smbolo, como ocurre en las clsicas. - En un grupo de interpolacin de movimiento no est permitido usar scripts de fotograma, mientras que s es posible en las clsicas. - Los grupos de interpolaciones de movimiento se pueden cambiar de tamao en la lnea de tiempo. Se tratan como un objeto nico. Las interpolaciones clsicas estn formadas por grupos de fotogramas

que se pueden seleccionar de forma independiente. - Las interpolaciones de movimiento slo pueden aplicar un efecto de color por interpolacin, mientras que las clsicas pueden aplicar ms de uno. - Los objetos 3D slo pueden animarse en interpolaciones de movimiento, no en clsicas. - Slo las interpolaciones de movimiento se pueden guardar como configuraciones predefinidas de movimiento. 12.6. Cambio de forma en una interpolacin Acabamos de ver las interpolaciones de movimiento y las interpolaciones

clsicas como un mecanismo para desplazar un smbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar una interpolacin para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamao. Esto es muy sencillo con Flash, basta con modificar la instancia del smbolo en el ltimo fotograma de la interpolacin de movimiento o de la interpolacin clsica, pero esta vez cambindole el tamao. Podemos utilizar la herramienta Transformacin libre para cambiar 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. Otra forma es emplear el Editor de movimiento. Veremos los cambios de tamao en la seccin de Transformacin, separados en Escala X (ancho) y Escala Y (alto).

El ejemplo siguiente incorpora estas tres caractersticas de la interpolacin: <object classid="clsid:D27CDB6EAE6D-11cf-96B8-444553540000" codebase="http://download.macrome dia.com/pub/shockwave/cabs/flash/sw flash.cab#version=9,0,28,0" width="550" height="240"> <param name="movie"value="flash/a_13_1_1. swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="flash/a_13_1_1.swf" width="550" height="240" quality="high" pluginspage="http://www.adobe.com/ shockwave/download/download.cgi?

P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed> </object> Y la lnea de tiempo que nos queda es algo tan sencillo como esto:

Aqu puedes ver cmo simulamos el bote de una pelota empleando el Editor de movimiento 12.7. Animacin de textos 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. 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 Aqu tienes un ejemplo de una presentacin sencilla mediante texto utilizando esta tcnica. 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. Aqu podemos ver un ejemplo de este tipo de presentaciones: <object classid="clsid:D27CDB6EAE6D-11cf-96B8-444553540000" codebase="http://download.macrome dia.com/pub/shockwave/cabs/flash/sw flash.cab#version=9,0,28,0"

width="300" height="150"> <param name="movie"value="flash/a_13_2_2. swf" /> <param name="quality" value="high" /> <embed src="flash/a_13_2_2.swf" width="300" height="150" quality="high" pluginspage="http://www.adobe.com/ shockwave/download/download.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwaveflash"> </embed> </object>

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

Animacion 1 Realizar una animacion en la tutoria y subila en formato swf

Animacion 2 Realizar una animacion por capas y subirla en formato swf

Animacin 3 Realizar una animacion para el proyecto final y subirla en formato swf