Vous êtes sur la page 1sur 89

Unidad 1.

Introduccin a Flash MX (I)

Qu es FLASH?
Flash MX es una potente herramienta creada por Macromedia que ha superado las mejores expectativas de sus creadores. Inicialmente Macromedia Flash fue creado con el objeto de realizar animaciones vistosas para la web, as como para crear GIFs animados. Los motivos que han convertido a Flash MX en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Veamos pues, porqu es interesante Flash MX.

Porqu usar FLASH MX?


Las posibilidades de Flash son extraordinarias, cada nueva versin ha mejorado a la anterior, y el actual Flash MX no ha sido menos. Aunque su uso ms frecuente es el de crear animaciones (a lo largo de este curso veremos lo sencillo que puede resultar) sus usos son muchos ms. Son tantos, que todos los diseadores web deberan saber utilizar Flash. Flash ha conseguido hacer posible lo que ms se echa en falta en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no esttico (en contraposicin a la mayora de las pginas, que estn realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fcil y rpido animaciones de todo tipo. Flash es fcil de aprender, tiene un entorno amigable que nos invita a sentarnos y pasar horas y horas creando lo que nos dicte nuestra imaginacin, pero esto no es suficiente para ser el preferido por los diseadores profesionales... Entonces qu es?

De Flash 5 a Flash MX

Es normal incorporar novedades cada vez que se crea una nueva versin de un programa, as lo llevaba haciendo Macromedia con Flash desde que cre el primer Flash de la saga... Pero el salto de Flash 5 a Flash MX es, simplemente, ESPECTACULAR. Espectacular en cuanto a mejoras, grficas y no grficas, pero sobre todo, en cuanto a potencia. Flash MX puede hacer todo lo que sueas. Suena bien verdad?. Veamos qu mejoras funcionales presenta Flash MX respecto a Flash 5 (las diferencias en el manejo las iremos viendo a la largo del curso).

Carga dinmica de imgenes JPEG y sonidos MP3: Sin duda, la principal novedad de Flash MX, esta posibilidad nos permitir cargar dichos archivos slo en el caso de ser necesarios, lo que se traduce en unas pelculas finales de menor tamao y por tanto, ms exportables y rpidas de descargar desde cualquier sitio. Nuevas Herramientas de Diseo Grfico: Como la herramienta Transformacin Libre y el Ajuste de Pxeles, que nos permitir dibujar y disear nuestras animaciones con mayor facilidad y libertad. Anclajes con Nombre: Mayor facilidad a la hora de crear enlaces a otras partes de nuestras pelculas y posibilidad de usar marcadores de pginas. Adems se nos facilita la tarea de crear botones del tipo Atrs o Adelante Compatibilidad con Vdeo: Si eres de los que tienes webcam o cmara digital, y habas pensado en insertar vdeos que tu mismo has creado o importarlos de algn otro lugar, Flash MX ha pensado en ti. Flash MX permite insertar vdeos estndar que sean compatibles con QuickTime o Windows Media Player. Soporta los formatos MPEG, DV (Digital Video), MOV (QuickTime), AVI etc... Adems, podrs trabajar con ellos con toda la facilidad del mundo, cambiar su tamao, rotarlos, sesgarlos o incluso colocarles mscaras. Flash MX invierte en compatibilidad, saqumosle provecho! Una gran coleccin de componentes preconstruidos: Flash MX pone a nuestra disposicin componentes (smbolos inteligentes) para que los usemos de inmediato. Sus utilidades son muchas, podremos editar fcilmente un calendario, unos botones de entrada o salida, casillas de verificacin, barras de desplazamiento... Diseo para casi cualquier medio: Como decamos, Flash MX ha invertido en compatibilidad, sus pelculas FLASH podrn verse en cualquier plataforma que soporte Flash Player, esto es : Microsoft Windows, Apple Macintosh, Linux, Solaris, MicrosoftTV, Symbian EPOC, Pocket PC, y otras. En definitiva, podemos trabajar tranquilos, quien no pueda visualizar nuestra pelcula, es ... porque no quiere.... ! Soporte para multilenguaje: Flash MX est a la venta en ms de 10 idiomas, por supuesto tambin en espaol. Macromedia ha tenido la decencia con esta nueva versin de sacar la versin de evaluacin tambin en castellano (cosa que no hicieron con Flash 5). Concluimos que Flash MX nos facilita el aprendizaje, pues la ayuda tambin viene en castellano y el uso del programa. Conocida interfaz de Usuario: Si bien al principio la apariencia grfica de Flash MX desconcierta y podemos echar de menos Flash 5, con el uso le perderemos el miedo rpidamente y comenzaremos a notar sus mejoras. Cambian algunos paneles y muchas cosas cambian de sitio (pero siguen ah, eso no lo dudemos), y por algo ser... Adems, Flash MX Incorpora la opcin "Esconder Paneles" (F4) que ya usaba Dreamweaver y nos permite maximizar el rea de trabajo rpidamente. Por otra parte, su diseo general est influenciado por el diseo de Windows XP y se aprecia a simple vista. ActionScript, a la mxima potencia: El lenguaje de programacin de Flash, el ActionScript, siempre ha sido muy til, pero en Flash MX la utilidad se convierte en potencia. El ActionScript de Flash MX incorpora nuevos objetos, propiedades, funciones... en definitiva: elimina los lmites de Flash 5 (incorpora compatibilidad con XML, mejor conectividad, mayor seguridad etc...). Por supuesto Flash MX es compatible hacia atrs

(Con Flash 5, 4 etc...).

Flash MX trae muchsimas novedades

Unidad 1.

Introduccin a Flash MX (II)

Las alternativas a Flash MX. Javascript


Desde hace mucho tiempo, el lenguaje HTML ha mostrado carencias importantsimas en todos los aspectos. El HTML crea pginas web estticas, pginas en las que todo el movimiento que podemos encontrar se debe a imgenes animadas (GIFS) o a vdeos insertados en ellas... Este lenguaje, revolucionario en su da, demostr pronto que era insuficiente en todos los campos. Pronto comenzaron a surgir alternativas: El Javascript naci con el objeto de crear acciones o programas cortos que se pudieran insertar en la web para darle vida. El Javascript, no es un lenguaje de programacin propiamente dicho, pues slo crea "acciones" que se ejecutarn posteriormente en el navegador que visualice la pgina, jams podremos crear un programa en Javascript, slo complementos para la web. Este lenguaje presenta varios inconvenientes, en primer lugar, su ejecucin puede resultar peligrosa para la persona que accede a una web, por lo que muchas personas optan por desactivar el "Javascript" de sus navegadores. Si nuestra pgina web contiene mucho cdigo Javascript, simplemente, no lo vern. En segundo lugar y como con casi todo, existen navegadores (cada vez menos, eso s) que no lo soportan y sera intil intentar ejecutar un cdigo Javascript si el navegador no lo reconoce. Adems, el Javascript no sirve para crear pginas web, tan slo las complementa, por lo que su uso general suele estar enfocado a pequeas "ayudas" en la interactividad de la web, como por ejemplo realizar comprobaciones en los formularios, efectos en la barra de estado... ). Debemos destacar adems, que Flash puede trabajar conjuntamente con javascript y ejecutar cdigos y funciones Javascript sin problemas, por lo que Javascript se convierte en una ayuda para todos los usuarios de Flash MX. Para ver unos ejemplos de usos de Javascript y sus cdigos, visita nuestra Pgina Avanzada

Las alternativas a Flash MX. CSS


Aunque muchos no se hayan dado cuenta, HTML tiene una potencia muy limitada en el tratamiento de textos. De hecho, el principal problema del HTML a la hora de mostrar y distribuir textos por pantalla no suele ser su incapacidad para hacerlo (las posibilidades que permite suelen ser ms que suficientes para cualquier usuario normal), sino que su problema es la falta de precisin. As, resulta prcticamente imposible asegurar que el texto vaya a aparecer tal y como yo quiero en el navegador de otra persona, o por ejemplo, el HTML no permite crear justificados de textos o simplemente dejar un margen a la izquierda del documento... Para esto se crearon las Hojas de Estilo en Cascada (CSS en ingls). Su potencia es mucha, y cuentan con la ventaja de que se han convertido en un estndar (aunque siempre habr alguien incapaz de visualizar un contenido que use una hoja de estilo). Adems de permitir administrar los textos e imgenes como queramos por nuestra pgina web, son una forma magnfica de simplificar el cdigo de la pgina web y de

acelerar su creacin, ya que como su nombre indica son "Hojas de Estilo", una vez creado el tratamiento que queremos dar a un tipo de texto (por ejemplo, a los ttulos), todos los ttulos que creemos y los identifiquemos como tales, tendrn ese tratamiento (color, tamao de la letra, tipo de fuente...). Gracias a las CSS hemos ganado en control sobre nuestras pginas web, y tal vez en vistosidad y diseo, pero no sirven para crear animaciones.

Las alternativas a Flash MX. DHTML


Hemos visto como se solucionan los principales problemas que tiene el HTML, pero an falta por saber cmo se intenta eliminar esa "estaticidad" caracterstica de las pginas HTML. La primera solucin viene del propio HTML. Se llama DHTML (o HTML Dinmico) y como su nombre indica se cre para crear contenidos en movimiento en las pginas web. Su funcionalidad llega hasta mover objetos por la web, y sobre todo, se emplea para crear mens animados. Seguro que habeis visto un montn sin daros cuenta. Suelen tener esta apariencia:

En realidad el DHTML no es ms que una combinacin de HTML y Javascript (de ah que lo hayamos dejado para el final), aunque es una buena solucin para crear mens vistosos sin animaciones extraordinarias. Su inconveniente? Hay demasiados navegadores que tiene problemas con l y su carga puede ser lenta o retardada...

El Eterno Debate
Y ante todo esto Qu nos ofrece Flash? Pues Flash es, con diferencia, la herramienta ms potente del mercado para crear contenido multimedia para la web pero presenta 2 inconvenientes importantes. El primero es la compatibilidad con FLASH. Al igual que algunos navegadores no soportan javascript o no pueden ver contenidos DHTML (o incluso CSS), para poder ver FLASH se requiere un PLUGIN especial de la casa Macromedia. Un PLUGIN es un programita especial que permite a tu navegador identificar las pelculas FLASH y descargarlas y visualizarlas correctamente. Este PLUGIN es gratuito. Puedes descargarlo AQU. Por suerte, cada vez ms navegadores lo llevan incorporado y cada vez ms gente sabe lo que es y no se asusta cuando se le ofrece. As que cada vez ms gente lo tiene.

El segundo problema es el tamao que ocupan las pelculas y su tiempo de descarga. Mientras que una pgina HTML puede ocupar unos 10 KB como media, una animacin Flash ocupa mucho ms. Evidentemente depende del contenido que tenga, pero suelen superar los 100 KB con facilidad, y si adems incorpora sonidos es fcil que la cifra se dispare. Al ocupar ms espacio, el tiempo que tarda en estar visible el contenido Flash es mayor y no todos los visitantes estn dispuestos a esperar... simplemente, se irn a otra pgina. Por otra parte, las conexiones de banda ancha son cada vez ms numerosas, lo que ellimina el problema del tiempo de descarga, pero el da en el que todo el mundo se conecte a internet a alta velocidad an est lejos, as que el debate seguir abierto mucho tiempo. Aqu teneis algunas pginas interesantes hechas con FLASH MX 2Advanced English NRG Studios Institute Resumiendo, insertar o no contenido Flash en una pgina web puede ser cuestionable (a da de hoy), aunque depende de muchas cosas, al igual que insertar DHTML, por ejemplo. An as, no hemos de olvidar que Flash tiene muchsmas aplicaciones ms (hecho que ha provocado que otras compaas traten de sacar a la venta "clnicos" del Flash). Por ejemplo la creacin de CDs interactivos (como los que incluyen las revistas de informtica, por ejemplo), la creacin de banners publicitarios o lo que ms est de moda ahora: la creacin de dibujos animados usando Flash MX (os sorprendera saber la cantidad de dibujos animados conocidos creados o animados mediante Flash). Adems, Flash tiene uso industrial, pues se emplea para optimizar planos, crear diseos de interiores y trabajar con imgenes vectoriales en general. No dejeis de aprender a manejar el programa con ms futuro... (al menos en cunto a diseo web) Unidad 1. Avanzado.

Con Flash se pueden hacer pginas web realmente asombrosas

Ejemplos Javascript

A continuacin, podemos ver un cdigo de ejemplo de una pgina web muy sencilla que contiene cdigo Javascript, el resultado, comprubalo tu mismo pulsando el botn: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> // Cdigo Javascript function Hola() { alert("Este curso es de Flash!"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="hola()"> </FORM> </BODY> </HTML> Y aqu teneis el cdigo funcionando (lo podreis ver si vuestro navegador soporta Javascript) Por ltimo, otro ejemplo, para que os hagais una idea de la potencia de Javascript, si bien ya habreis observado que no sirve para crear pginas web ni animaciones... Este es el cdigo: function Prompt() { var contestacion = prompt("Cmo te llamas?", ""); if (contestacion) alert("Disfruta el Curso de Flash, " + contestacion); } Y aqu lo teneis funcionando: Unidad 2.

Mi primera Animacin Flash

Comenzando
Una de las caractersticas principales de Flash MX es su sencillez, esta sencillez en su utilizacin permite crear animaciones de un modo efectivo y rpido. Pongmonos en situacin, supongamos que queremos crear una animacin en la que una pelota realice un movimiento de "bote", es decir, que baje y suba. Puede parecer un trabajo de horas, pero nada ms lejos de la realidad. Veamos cmo Flash nos lo pone fcil.

Realizando la Animacin

En este apartado no pretendemos ensear cmo crear una animacin Flash (pues eso se ver ms adelante), el objetivo es que entendamos cmo crea Flash las animaciones y de que modo nos facilita el trabajo. 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. Pues bien, con Flash bastar con 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 (en realidad este tercer fotograma no har falta crearlo, pues bastar con copiar el primero). Por tanto, vemos que el trabajo ms largo (dibujar los objetos) ya est hecho.

Ahora, se determina el tiempo que durar cada movimiento (es decir, el tiempo que transcurre entre los instantes en los que la pelota est arriba y abajo) y por ltimo se le indica a Flash que cree una animacin de movimiento entre estos fotogramas. Fcil verdad? Unidad 3.

El Entorno de Trabajo (I)

La Interfaz de Flash MX
Flash MX cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva. Adems, tiene la ventaja de que es similar a la de otros programas de Macromedia (Dreamweaver, Freehand, Director...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash MX por primera vez:

A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash MX en castellano. Podeis descargar esta versin de forma gratuita desde AQU 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. 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. 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 director 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... Unidad 3.

El Entorno de Trabajo (II)

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

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.

El rea de Trabajo
Unidad 3.

El Entorno de Trabajo (III)

Las Vistas o Zooms


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. Para saber ms acerca de los Zooms visita nuestra Pgina Bsica

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. Todos ellos se estudiarn en profundidad a lo largo del curso. An as, vamos a nombrarlos y a resumir sus funciones. Panel Info: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy til para alineaciones exactas. Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Alineamiento: 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). 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 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 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 Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula.

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: 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. Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. Unidades de Regla: Unidad que se emplear para medir las cantidades. unidad 3 .

Nivel Bsico. Zooms.

El efecto Zoom consiste en acercar o alejar la "mirada" de un determinado lugar. En realidad, lo que se hace es aumentar o reducir el tamao de un objeto, de modo que parece que nos hayamos acercado o alejado de l. Es muy til para poder ver con ms detalle ciertos puntos de la animacin (grficos principalmente) y para poder retocar algunas partes que no son visibles desde lejos. Igualmente, resulta til ver la animacin desde lejos para tener una visin global de ella.Vemos cmo trabaja Flash con los Zooms.

Panel Zoom
Se puede acceder a todas las funciones de los Zooms desde el Men Ver. En cualquier caso, Flash incluye un submen de acceso rpido para dichos comandos. Veamos en qu consisten: Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir, amplia el tamao del fotograma hasta ocupar todo el rea de Trabajo. si hay objetos fuera del rea de Trabajo, no se vern. Mostrar Todo: Muestra en el rea de Trabajo todos los objetos que haya en la pelcula, adaptando el tamao del fotograma al espacio necesario para que quepan. Si todos los objetos estn en la parte izquierda de un fotograma, la parte derecha no se ver. Como podemos ver, ambas selecciones son tiles, pero tienen sus desventajas. Para darnos libertad total, Flash nos permite elegir el tamao del Escenario. 25%, 50% ...: Muestra el fotograma con el tamao que indiquemos en % teniendo en cuenta que el 100% es el tamao de referencia. Es decir, el 100% es el tamao original de la pelcula (ocupa lo que se ver al publicar la pelcula), todo lo dems depende de cunto sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% ser justo la mitad de esta cantidad y el 200% ser el doble de 640 x 480 px. unidad 3 .

Nivel Bsico. Escenas

Escenas

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

La Lnea de Tiempo - Fotogramas -

Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qu tipos de fotogramas hay y cules son sus rasgos.

Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifco, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se le diferencia por una lnea negra vertical. Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habra 3 Keyframes. Uno para cada posicin distinta de la pelota. Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris. El ltimo fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es prolongar la duracin de un fotograma clave o keyframe. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la pelcula. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos. Fotograma Vaco: Son fotogramas sin contenido, Su color es blanco.

En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas vacos. No debemos confundirlos con los fotogramas contenedor, pues estos ltimos vienen delimitados por lneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrar una imagen en blanco. (no dar por terminada la animacin). De modo que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer" y volver a aparecer. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel "Frame". Si la duracin del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una accin asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la pelcula. En la imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y s las tiene el 5.

Fot. Etiquetado.

Fot. con Acciones

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

Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representar el movimiento entre ambas posiciones en la pelcula final) y del 6 al 11. Otro movimiento. Fot. de Anim de Mov. 2) Fotogramas de animacin de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tena en el Keyframe inicial a la del final. Para representar esta animacin aparece una flecha entre estos Keyframes. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendra la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta. Fot. de Anim de Forma. Unidad 4. En esta ltima imagen aparecen casi todos los tipos de fotogramas, los reconoces?

Dibujar y Colorear (I)

El Dibujo en Flash MX
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.

La Barra de Herramientas. 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 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 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".

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). 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: Su misin es "Capturar" colores para que posteriormente podamos utilizarlos Unidad 4.

Dibujar y Colorear (II)

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

Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en ms rectilneos. Girar: Escalar: Permite girar un objeto. Modifica el tamao de un objeto manteniendo las proporciones.

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

Trabajar con Textos (I)

Comenzando
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 distigue entre 3 tipos de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), tambin se puede crear texto que soporte formato HTML etc...

Propiedades de los Textos

Para poder escribir, deberemos hacer clic en la Herramienta Texto y posteriormente en el punto del escenario 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 nu pelcula, de modo que si seleccionamos un texto, podremos ver en l todo lo que nos hace falta conocer sobre nu texto. Si tenemos experiencia usando Flash 5, notaremos que todas las propiedades que antes se encontraban e 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 podemo seleccionar el tipo de letra o "fuente" que ms nos guste.

Altura: Determina el espaciado entre los caracteres. til cuando la tipografa que empleamos muest letras muy juntas o para dar efectos concretos al texto. Ajuste automtico entre caracteres: caracteres se realice de modo automtico. Posicin: Activar esta casilla provoca que la separacin entre

Nos permite convertir nuestro texto en subndices o en superdices (o dejarlo nor

URL: Si queremos que al pulsar sobre nuestro texto, el usuario a una direccin web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en ese mo

Tipo de Lnea: Si el texto que vamos a incluir es dinmico (de lo contrario aparece sin acti esta opcin nos permite determinar cmo queremos que aparezcan las lneas (lnea nica, multilnea o multilnea ajuste).

Configuracin: Son las clsicas opciones que permiten convertir el texto en Negrita (B), Cu (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. Unidad 5. Trabajar

con Textos (II)

Tipos de Textos Como ya hemos comentado, Flash distingue entre diversos tipos de textos y les da un tratamiento especial, segn el tipo que sean.

Todos los tipos de textos responden a las propiedades comentadas en los puntos anteriores, y es en el Tipo de texto en lo que se diferencian. El tipo de texto se puede modificar desde el Panel Propiedades sin ms que haciendo clic sobre la pestaa "Tipo de texto": Texto Esttico El Texto Esttico se caracteriza por no presentar ningn cambio a lo largo de la animacin. Es importante que no confundamos la palabra "esttico" con que el texto no se mueva o malinterpretemos la frase "es el texto que no presenta cambios a lo largo de la animacin". Lo que queremos decir es que no cambia el contenido del recuadro de texto, es decir, que el texto puede estar animado (girar, cambiar de color...) y sin embargo ser esttico. As, un recuadro de texto en el que pone "Aprende Flash MX" durante toda la pelcula, es esttico, aunque dicho texto cambie de posicin, forma o color. Sin embargo, si en ese mismo recuadro de texto pasa a poner "Con este Curso", este recuadro de texto NO es esttico. Se insistir en este punto en los ejercicios de evaluacin. Los textos estticos slo tienen 2 propiedades extras: Usar Fuentes del Dispositivo: Esta opcin permite que la pelcula Flash emplee las Fuentes que tenga instaladas el usuario que ve la pelcula en su ordenador. Si dicho usuario dispone de las fuentes que hemos utilizado en la pelcula, la ver exactamente como queremos que la vea, pero si no las tiene, Flash emplear la fuente que ms se le parezca. Esto muchas veces lleva a que el resultado final (el que ve el usuario) no se parezca al que pretendamos, por lo que suele ser conveniente mantener esta opcin sin seleccionar, aunque esto conlleve un mayor tamao de la pelcula final. Seleccionable: Con esta opcin activada el usuario podr seleccionar los textos que aparezcan en la pelcula (cortarlos, copiarlos...) Actvala si lo crees conveniente. Texto Dinmico El Texto Dinmico en contraposicin al esttico s que puede cambiar su contenido (adems de estar animado). Su uso es bastante ms complejo que el del Texto Esttico, ya que cada recuadro de texto Dinmico puede ser una variable modificable mediante ActionScript, esto quiere decir que los valores y propiedades de este tipo de textos se pueden modificar mediante programacin, lo que nos saca del objetivo de este curso. Un uso comn que suelen tener es el de representar los textos introducidos mediante Textos de Entrada (ver siguiente punto). Tienen multitud de propiedades, accesibles desde el Panel Propiedades, se puede decidir el nmero de lneas que van a tener, se puede introducir texto HTML, se puede aadir fcilmente un borde al texto o dar nombre a la variable que represente al texto Dinmico. Texto de Entrada

El Texto de Entrada tiene bsicamente las mismas propiedades que el Texto Dinmico, junto con algunas propias de un tipo de texto orientado a la introduccin de datos por parte de usuario, como por ejemplo el nmero mximo de lneas que puede introducir en ese campo de texto o si queremos que lo que el usuario escriba en dicho campo aparezca como asteriscos (para las contraseas). Evidentemente este tipo de texto se reflejar en nuestra pelcula como un recuadro de texto SIN contenido, ya que lo deber introducir el usuario. Como hemos mencionado antes, este tipo de texto se puede combinar con el Texto Dinmico. En esta animacin (avanzada) podeis ver cmo: Y este es el resultado final: Para aprender a cambiar el tipo de texto, te aconsejamos realizar Ejercicio Cambiar tipo de texto Flash permite crear animaciones de texto tan interactivas como las que pueden crear con imgenes (ya hemos visto lo sencillo que es convertir un texto en un enlace a otra pgina web). An as, crear animaciones con textos, que sobrepasen a las que Flash incorpora por defecto (colores, transparencias, brillos, rotaciones, movimientos o combinaciones de estos) puede resultar un trabajo de muchsimas horas y mucha paciencia. Los resultados son increbles, pero puede resultar recomendable en estos casos usar algunos programas diseados con este objetivo. Entre otros destacan el Swish, el FlaX o el MiXFx, con ellos podrs crear efectos de texto asombrosos en pocos minutos, aunque no podrs gozar del entorno de Flash MX ni podrs emplear el resto de herramientas de que dispone Macromedia Flash MX.
Unidad 5. Avanzado.

Escribiendo Textos

Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos aparecer algo as: El recuadro que vemos es el recuadro que contendr al texto. En la pelcula final NO se ver, pero nos servir para localizar ms fcilmente el texto y para moverlo o cambiar su tamao. Finalmente, el crculo que hay arriba a la derecha significa que el recuadro del texto se expandir segn vayamos escribiendo y tambin el texto. Esto es, todo lo que escribamos, estar en la misma lnea. Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene. Para cambiar de lnea, sera necesario pulsar la tecla Enter (Intro).

Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante comn, acercaremos el cursor del ratn al borde del recuadro de texto, segn donde lo acerquemos, se transformar en un smbolo o en otro.

Si lo acercamos al borde del recuadro, se le aadir debajo de la flecha una flecha pequea de 4 direcciones como la que muestra la figura y que nos indica que podemos mover el texto: Si lo acercamos al crculo que est en el margen superior derecha, el cursor se convierte en un flecha de "ensanchamiento", como la que muestra la figura: Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los lmites del recuadro de texto, y adems, el crculo que apareca en el margen superior derecho, se convierte en un cuadrado. Este cuadrado significa que los lmites del recuadro de texto han quedado fijados, y que al insertar ms texto, se producir un salto de lnea en lugar de ensanchar el recuadro de texto. Este sera su comportamiento al introducir texto:

Si quisiramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con hacer doble clic sobre el cuadrado que est en el margen superior derecho del recuadro de texto. Tras hacerlo, se convertir en un crculo y su comportamiento ser el descrito al principio de esta pgina. Unidad 6.

Trabajar con Sonidos (I)

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

Importar Sonidos

Si alguna vez habeis intentado aadir un sonido a vuestra animacin Flash probablemente os hayais llevado una gran decepcin, no conseguirlo. 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 nuestra pelcula, deberemos importarlo previamente. Una vez est importado, podremos usarlo con total libertad.

Propiedades de los Sonidos

En Flash MX, a diferencia de lo que suceda en Flash 5 ya no existe el Panel sonido, ahora todo lo referente a lo podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario para insertar, modificar y editar acabamos de importar. Si no hemos importado ningn sonido, nos daremos cuenta de que no podemos seleccion 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 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 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 d izquierdo al derecho (esto crea la sensacin de que el sonido te envuelve ya que lo oyes por un sitio y luego por o queda muy lejos de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si dese complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algn programa creado especficame 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 la que tenemos:

Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defecto y provoca que el sonid a reproducir al pasar la pelcula por el fotograma en el que est situado. Tambin se puede sincronizar el sonido los dems tipos de smbolos.

Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si est seleccionado Inicio en vez se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" del sonido actual. Puede ser un efecto mu 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

lenta y las imgenes no fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto p sensacin de que la pelcula se corta de un modo muy brusco (pensar en que se considera normal que una imag cargarse, pero si se detiene un sonido mientras se reproduce, produce una reaccin muy negativa en los que pue viendo nuestra pelcula). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje una pelcula. En esta situacin, es muy recomendable que el sonido y las imgenes estn sincronizadas.

Bucle: Determinan el nmero de veces que se reproducir el sonido. Para que se reproduzca indefinidamen tiempo que puede durar la pelcula y el tiempo que dura tu sonido y reptelo tantas veces como sea necesario (es que escribir 99999 veces).

Por ejemplo: Si tu pelcula dura 2 minutos (120 segundos) y tu sonido dura 16 segundos, entonces 120 / 16 = 7 Debers escribir 8 veces, ya que no tiene sentido reproducir un sonido 7 veces y media (adems quedara una pa pelcula sin sonido).

No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Bucle, ya que al estar sincronizados los las imgenes, provocaramos que las imgenes (y los fotogramas que las contengan) se dupliquen tambin, aum considerablemente el tamao de la pelcula. Unidad 6.

Trabajar con Sonidos (II)

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 Bucle y el sonido sonar aunque el fotograma en el que est no sea el que se 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 Sonido. En esta animacin, vers como:

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. 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). Unidad 6.

Trabajar con Sonidos (III)

Mp3 o Wav?

Como ya se ha comentado, los sonidos que Flash MX puede importar deben tener las extensiones .wav o .m no sabes las diferencias entre estos tipos de archivos, puedes consultar nuestro tema bsico .

Por tanto, cuando queramos aadir un sonido a nuestra pelcula, deberemos decantarnos por uno de estos 2 formatos. Lo normal es que el sonido que pretendamos insertar ya est en uno de ellos, pero no debemos olvidar existen multitud de programas que convierten un sonido con extensin .mp3 a uno .wav y viceversa, por lo que no ser inconveniente el formato que tenga el sonido en un principio. La pregunta surge en seguida Cul es mejor? ...

Esta pregunta es ms importante de lo que parece, ya que si decidimos que nuestra pelcula tenga sonidos, deberemos asumir una carga muy importante en cuanto a tamao de la pelcula y en consecuencia en cuanto a t de descarga. Lo habitual es que los sonidos ocupen ms de la mitad del espacio total y muchas veces no valdr l insertarlos...

Una vez decididos a insertar el sonido, la lgica nos dice que insertemos el sonido que ocupe un espacio meno disco duro, ya que este espacio es el que ocupar en nuestra pelcula. Esto es una aproximacin, ya que Flash comprime todo aquello que insertamos en nuestras pelculas.

Como ya sabemos, los sonidos .mp3 ocupan un espacio mucho menor que los sonidos .wav (10 veces menos por lo que parece recomendable insertar .mp3 en lugar de .wav, ahora bien Puede Flash comprimir un sonido ya comprimido? Es decir, si un sonido .wav ha sido comprimido y ahora tiene extensin .mp3, podr Flash volver a comprimirlo? La respuesta es NO. Flash comprime los sonidos que insertamos en nuestras pelculas, pero si el s resulta estar ya comprimido, no podr volver a comprimirlo (en realidad si que consigue comprimirlo, pero el sonid es el mismo que el inicial).

Ahora que ya sabemos esto, nos falta saber si Flash comprime un archivo .wav ms de lo que comprime el for .mp3, para ver bien este aspecto, hemos preparado varios ejemplos... Ejemplo:

Contamos con una pelcula con un nico frame que est vaco. Esta pelcula, una vez lista para ser vista (.swf) 1KB. Tenemos 1 sonido .wav que ocupa 1596 KB

Comprimimos dicho sonido con un programa compresor de audio y obtenemos el mismo sonido en formato .m ocupa 145 KB. (La calidad de sonido es prcticamente idntica). Ahora insertamos el sonido .wav en la pelcula original y la exportamos (esto se trata en el ltimo tema). Resultado: Una pelcula con sonido (pelcula 1) que ocupa 37KB. Insertamos despus el sonido .mp3 en la pelcula original. Resultado: Una pelcula con sonido (pelcula 2) que ocupa 145 KB

Conclusin: La pelcula con un sonido .wav ocupa casi 5 veces menos que la que tiene el mismo sonido en .m tanto parece recomendable insertar sonidos .wav (la compresin de audio que logra Flash es muy grande). Como contrapartida, podra apreciarse prdida de calidad en el sonido que se escucha en la pelcula 1. Esta prdida se importante segn el tipo de sonido que sea. Si es una voz, por ejemplo, deberamos insertar .mp3 ya que necesariamente deber escucharse bien, si es msica de fondo, es probable que aunque se pierda calidad, el res final sea aceptable y sea conveniente quedarnos con la pelcula de menor tamao. Lo mejor es probar ambas ver y evaluar el resultado. unidad 6.

Nivel Bsico. Formatos de Sonido

Sonidos WAV

Los sonidos con extensin WAV (.wav) son sonidos con una calidad muy buena, concretamente, su calidad es unas 13 veces inferior a un sonido original, cantidad ms que aceptable si tenemos en cuenta que, por ejemplo, el sonido de una llamada telefnica es 100 veces peor que el sonido original y un sonido que escuchamos por la radio (FM), es unas 24 veces peor que el original. Partiendo de ah, comprenderemos que el espacio que ocupa en el disco duro sea muy grande. Es necesaria tanta calidad? Es necesario siempre que el sonido sea completamente limpio? Evidentemente no, y es por esto que surgen otros formatos de audio, otros formatos que sin perder mucha calidad, consigan ahorrar espacio en el disco duro (y en nuestras pelculas Flash) y den flexibilidad a estos sonidos que antes era imposible manejar dado su tamao. (Una cancin de 4 minutos de duracin ocupa 50 MBytes en formato WAV). El formato de audio que ha adquirido mayor popularidad es el formato MP3. Veamos por qu.

Sonidos MP3
El MP3 (.mp3) es una tecnologa de compresin de archivos de audio. Su nombre completo es MPEG-1 Audio Layer 3 y surgi hace unos 15 aos con el objeto de reducir el enorme tamao que ocupaban hasta entonces los archivos de audio (por ejemplo, los WAV). MP3 consigue combinar calidad de sonido con un tamao de archivo pequeo, convirtindose en un standard de audio en Internet. Su clave se encuentra en que un sonido MP3 no contiene todos los detalles del audio que no son captables por el odo humano y que s que estn en los sonidos originales. Es decir, si un detalle del sonido no puede ser escuchado por el odo humano, por qu no eliminarlo? Y as se hace, el resultado es un sonido prcticamente idntico (muchas veces completamente idntico, depende del grado de compresin aplicado) al sonido original. A este sonido sin informacin innecesaria, se le aplican unos mtodos de compresin muy potentes y el resultado final es un archivo de audio MP3, con una calidad buena y un tamao muy reducido (la cancin de 4 minutos del ejemplo anterior pasa a ocupar slo 3,9 MBytes), lo que nos permite almacenar un nmero casi ilimitado de canciones en nuestro ordenador, en CDs o trabajar con ellas en Internet... Unidad 7.

Trabajar con Objetos (I)

Los Objetos. Iniciacin


Independientemente de si estamos trabajando en una animacin, en una pgina web, en un catlogo para un CDRom o en cualquier otra cosa, tendremos que trabajar con objetos. A grandes rasgos, podremos considerar un objeto todo aquello que aparezca en nuestra pelcula y sea visible, de modo que podamos trabajar con l,un objeto sera, por ejemplo, cualquier imagen que creemos o importemos, un botn, un dibujo creado por nosotros mismos etc... Los objetos as considerados tienen 2 partes fundamentales: El Borde: Consiste en una delgada lnea que separa el objeto del exterior del escenario. Puede existir o no, segn nos convenga. Cuando creamos un objeto, el borde se crea siempre y su color ser el indicado en el Color de Trazo (dentro del Panel Mezclador de Colores). Si queremos dibujar creando Bordes deberemos emplear las Herramientas Lpiz, Lnea o Pluma y si queremos que nuestro dibujo no tenga borde, bastar con seleccionar el borde y suprimirlo (ver siguiente punto). El Relleno: El relleno no es ms que el propio objeto sin borde. Es, por tanto, la parte interna del objeto. Su existencia tambin es arbitraria, ya que podemos crear un objeto cuyo color de relleno sea transparente, como ya se vi en el tema de Dibujar, y por tanto, parecer que dicho objeto no tiene relleno, aunque en realidad s que exista pero sea de color transparente. Para dibujar Rellenos (sin borde) podemos usar herramientas tales

como la Brocha o el Cubo de Pintura

Seleccionar
Para poder trabajar con objetos, es fundamental saber seleccionar la parte del objeto que queramos modificar (mover, girar, cambiar de color...). Podremos observar que las partes de un objeto seleccionadas toman una apariencia con textura para indicar que estn seleccionadas.

Objeto SIN seleccionar

Objeto con el BORDE seleccionado

Objeto con el RELLENO seleccionado

Veamos cmo seleccionar las diferentes partes de un objeto: Seleccionar un Relleno o un Borde: Basta hacer clic 1 vez en el Relleno o en el Borde que queramos seleccionar. Seleccionar el Relleno y el Borde de un objeto: Hacer doble clic en el Relleno. Seleccionar todos los bordes (o lneas) de un mismo color que estn en contacto: Hacer doble clic sobre una de las lneas que tenga el color que pretendamos seleccionar. Seleccionar un Smbolo, un texto, o un grupo: Clic en el Smbolo, en el texto o en el grupo. Estos tipos de objetos mostrarn un borde de color azul (por defecto) al estar seleccionados. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT mientras seleccionamos los objetos que queramos. Seleccionar los objetos que se encuentran en una determinada zona: Para ello usaremos la Herramienta Flecha. Haremos clic en una parte del escenario y arrastraremos el cursor hasta delimitar el rea que contenga los objetos que queremos seleccionar. Si esta rea corta algn objeto, slo quedar seleccionada la parte del objeto que est dentro del rea que hemos delimitado. Si quisiramos incluir dicho objeto, bastara con usar la tecla SHIFT y seleccionar la parte del objeto que falta por seleccionar. Este modo de seleccionar objetos permite seleccionar muchos objetos rpidamente, adems de permitirnos seleccionar determinadas zonas de los objetos, para cortarlas, pegarlas ... Adems de la Herramienta Flecha, tambin podemos usar la Herramienta Lazo, ms til an si cabe. Nos permite seleccionar cualquier zona de cualquier forma (la forma la

determinamos nosotros) del objeto que sea. Al contrario que la Herramienta Flecha, las reas seleccionadas no tienen porque ser rectngulares. Seleccionar a partir de la Lnea de Tiempo: Si seleccionamos un determinado fotograma en la lnea de tiempo, se seleccionan automticamente todos los objetos que estn en dicho fotograma. Esto es til para modificar de un modo rpido todos los elementos del fotograma. Seleccionar Todo: La forma ms natural de seleccionar todo, consiste en hacer clic en el men Editar -> Seleccionar Todo. Unidad 7.

Trabajar con Objetos (II)

Colocando Objetos. Panel Alineamiento


Ahora que ya sabemos seleccionar los objetos o las partes de estos que consideremos oportunas, veamos cmo colocarlos en el Escenario. Para colocarlos de un modo preciso (por no decir exacto), Flash pone a nuestra disposicin el Panel Alineamiento. Este Panel lo podemos encontrar en el Men Ventana -> Alinear. As funciona:

El Panel Alineamiento permite colocar los objetos tal y cmo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapi en la opcin En Escena. Esta opcin nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es seleccionar En Escena , para que los objetos se coloquen segn los lmites de la pelcula, en el centro del fotograma etc... Conozcamos un poco mejor el Panel Alineamiento y sus posibilidades:

Alineamiento: Sita los objetos en una determinada posicin del fotograma (si est seleccionado En Escena). Las distintas opciones afectan a todos los elementos seleccionados y se emplean muy a menudo para situar los objetos en determinados sitios predefinidos. Por ejemplo: Si quisieramos situar un objeto en la esquina inferior izquierda, bastara pulsar el primer y el sexto botn consecutivamente.

Distribuir: Sita los objetos en el escenario en funcin de unos ejes imaginarios que pasan por cada uno de ellos, de modo que la distribucin de los mismos sea uniforme. Por ejemplo, si tenemos 2 cuadrados y pulsamos el primer botn de la izquierda. Cada uno de los 2 cuadrados se situar en un extremo de la pelcula (uno arriba y otro abajo).

Coincidir Tamao: Hace coincidir los tamaos de los objetos. Si est activo "En Escena" estirar los objetos hasta que coincidan con el ancho y el largo de la pelcula. Si no est activo, la referencia ser el resto de objetos. Por ejemplo, si tenemos 2 cuadrados distintos y la opcin "En Escena" no est activada, al hacer clic en el primer botn de "Coincidir Tamao", el cuadrado ms estrecho pasar a tener la anchura del

cuadrado ms ancho. Si "En Escena" hubiera estado activo ambos cuadrados hubieran pasado a tener el ancho del fotograma.

Espacio:

Espacia los objetos de un modo uniforme.

Para ver ejemplos de uso de estos comandos, podeis ver la animacin situada arriba al principio del captulo.

Panel Info
Adems de controlar la posicin de los objetos desde el Panel Alineamiento, tambin podemos hacerlo, de un modo ms exacto (ms matemtico) desde otro panel, el Panel Info. A este Panel se puede acceder desde el Men Ventana -> Info. Las posibilidades de este Panel son limitadas, pero si buscamos exactitud en las medidas o no nos fiamos de las distribuciones de objetos que crea Flash, debemos acudir a l. Medidas del Objeto: Aqu introduciremos un nmero que represente el tamao de nuestro objeto en la medida seleccionada en las Propiedades del documento. An: hace referencia a la anchura y Al: a la altura. Situacin del objeto: Desde aqu controlamos la posicin del objeto en el escenario. La X y la Y representan el eje de coordenadas (La X es el eje Horizontal y la Y el eje vertical). Las medidas tambin van en funcin de las medidas elegidas para la pelcula. Color Actual: Indica el color actual en funcin de la cantidad de Rojo (R), Verde (V), Azul (A) y efecto Alfa (Alfa) que contenga. Este indicador puede ser engaoso, el motivo es que indica el color que tiene el objeto por el que en ese momento pasamos el cursor del ratn. Por tanto, podemos tener seleccionado un objeto (haciendo clic en l) y ver en el Panel Info su tamao y su posicin, pero al desplazar el ratn, el valor del color cambiar y ya no indicar el color del objeto seleccionado, sino el del objeto por el que pase el cursor. Tened esto en cuenta para no cometer errores o perder tiempo innecesario. Posicin del Cursor: Indica la posicin del cursor. Es til por si queremos que suceda algo en la pelcula al pasar el cursor justo por una posicin determinada o para situar partes del objeto en lugares especficos.

Los Grupos
Un Grupo no es ms que un conjunto de objetos. Si bien no cualquier conjunto de objetos forman un grupo, ya que para crear un grupo, debemos indicarle a Flash que as lo queremos. Para ello, basta seleccionar los objetos que queremos que formen parte de un grupo y despus hacer clic en el Men Modificar -> Agrupar. Tras hacer esto observaremos que desaparecen las texturas que indicaban que los objetos estaban seleccionados y observamos que el grupo pasa a ser un "todo", ya que resulta imposible seleccionar a uno de sus miembros sin que se seleccionen a su vez los dems. Adems, aparece el rectngulo azul (por defecto) que rodea al grupo, definindolo como tal.

Crear grupos es muy til, ya que nos permite, como ya hemos dicho, tratar al conjunto de objetos como un todo y por tanto, podemos aplicar efectos al conjunto, ahorrndonos la labor de hacerlo de objeto en objeto. Por ejemplo, supongamos que tenemos un dibujo que representa un conjunto de coches. Tras dibujarlos todos, nos damos cuenta de que queremos aumentar el tamao de los coches. Podemos aumentar el tamao de los coches de uno en uno, corriendo el riesgo de aumentar unos ms que otros y perdiendo las proporciones entre ellos, o podemos formar un grupo con los coches y aumentar el tamao del grupo, de modo que aumenten todos de tamao a la vez y en la misma proporcin. De igual modo, podemos mover al grupo de posicin, hacer que gire... Al crear un grupo, simplemente estamos dando unas propiedades comunes a un conjunto de objetos y, en ningn caso perdemos nuestro objeto. En cualquier momento podemos deshacer el grupo, mediante el Men Modificar -> Desagrupar. Adems, Flash nos permite modificar los elementos de un grupo sin tener que desagruparlo. Para ello, seleccionamos el Grupo de elementos y hacemos clic en el Men Editar -> Edit Seleccionado. Podremos editar los objetos que componen el grupo por separado teniendo en cuenta que, como es lgico, los cambios realizados afectarn al grupo adems de al elemento en cuestin. Unidad 8.

Capas (I)

Las Capas. Entendmoslas


Todo el mundo ha visto alguna vez cmo trabajan los dibujantes de dibujos animados. Y todos hemos visto cmo colocan una hoja semitransparente 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. 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 Tiempos y por tanto, sus distintos fotogramas se reproducirn simultneamente.

Clarifiquemos esto con un ejemplo:

Supongam os 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 standard de una capa es la que muestra la imagen. Veamos para qu sirven los distintos botones y cmo usarlos. Insertar Capas : Como su nombre indica, sirve para Insertar capas en la escena actual. Inserta capas normales (en el siguiente punto se vern los distintos tipos de capas). Aadir Capa Gua : Inserta una capa de tipo gua. Se tratan en profundidad el siguiente punto. Borrar Capa : Borra la capa seleccionada.

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 en el icono , 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. Unidad 8.

Capas (II)

Trabajar con Capas. Opciones Avanzadas


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 negro. 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 podeis ver cmo queda un objeto en funcin de tener activada o no la opcin contorno:

Reorganizar las Capas


Hemos dedicado un tema entero a cmo colocar objetos, sabemos ya cmo conseguir que un objeto aparezca delante de otro en una pelcula, como hacer que formen grupos y muchas cosas ms. Pero nos habremos dado cuenta de que, si trabajamos con distintas capas, todo esto no sirve de mucho... Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas con otras. Lo primero y principal es la Lnea de tiempos, 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. Unidad 8.

Capas (III)

Tipos de Capas
Como habreis 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 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. Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada capa gua le corresponde una y slo una capa guiada. 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...

Unidad 9.

Smbolos (I)

Qu son los smbolos


Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash MX. 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, ya sea en la misma o en otra pelcula.

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 objeto que queramos convertir en smbolo. Abrimos el panel de Propiedades del Smbolo, accediendo al men Insertar -> Convertir en Smbolo o simplemente pulsando F8.

Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen. Introducimos el nombre del smbolo que vamos a crear. Esto al principio y mientras tengamos poco smbolos no ser muy importante, pero ms adelante nos servir para hacer referencia al objeto. Slo nos queda seleccionar el tipo de smbolo o comportamiento en 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. Bastar con pulsar Aceptar para tener nuestro smbolo creado. Para practicar estas operaciones te aconsejamos realizar Ejercicio Crear Smbolo.

Las Bibliotecas
En Flash MX 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 la Barra de Mens, 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 los ejemplos de pelculas completas de Flash MX debemos acceder a Ayuda -> Muestras. Para acceder a la lbrera 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 anterior (Ejercicio Crear Smbolo) 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 Para utilizar un smbolo de una biblioteca basta con pulsar en el nombre de dicho smbolo y arrastrarlo a cualquier lugar del rea de trabajo. Observa cmo podemos hacerlo.

Diferencia entre smbolo e instancia


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. Aunque parece que sean lo mismo, la importancia de esta distincin es que cuando utilicemos un smbolo que hayamos creado previamente en una pelcula, al modificarlo se modificar la 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. A la derecha tenis un ejemplo de una biblioteca, en este caso una biblioteca estndar de Flash. Cada elemento de la biblioteca es un smbolo. Para entender mejor este concepto te aconsejamos realizar Ejercicio Modificar Instancia.

Unidad 9.

Smbolos (II)

Modificar una Instancia


Hemos visto anteriormente que podemos modificar una instancia de un smbolo sin modificar el smbolo original en cuestin. Sin embargo, al no tratarse de un grfico vectorial (veremos que significa esto ms adelante), no podemos modificar las instancias con las herramientas de dibujo de Flash MX, pero s mediante el Panel de Propiedades, que permite la manipulacin "externa" de la instancia. As, este panel, que como hemos visto resulta sumamente til, no nos permite modificar la estructura bsica de la instancia, pero s otras propiedades, esto es, podremos hacer que la instancia tenga ms brillo, pero no transformar una estrella en un crculo).

Panel Propiedades de Instancia


Para acceder al panel de propiedades de instancia, debemos seleccionar en primer lugar la instancia que queramos modificar y posteriormente abrir el Panel Propiedades. Si seleccionamos un objeto Flash que no se trate de un smbolo, el Panel Propiedades mostrar las propiedades del objeto en cuestin, pero no las caractersticas propias de los smbolos (cambios de color, intercambios etc...) En el momento que seleccionemos un smbolo aparecern una serie de propiedades y opciones que

comentamos a continuacin:

Nombre del Smbolo y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la pelcula. El icono asociado nos permite saber qu tipo de smbolo es de un vistazo rpido. Tipo de Smbolo o Comportamiento de la instancia. Por defecto se nos muestra el tipo al que perteneca el smbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es "Clip de Pelcula"). Nombre de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el smbolo raz del que proviene la instancia que estamos modificando. Este smbolo se encuentra en la biblioteca y cada cambio que sufra afecta a todas las instancias que de l se derivan. Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos ahorrar mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar un smbolo cualquiera por otro que tengamos en nuestra Biblioteca. Puede parecer simple, pero durante el desarrollo de un trabajo profesional rpidamente surge la necesidad de probar situaciones y los diseos grficos definitivos no suelen estar disponibles hasta bien avanzado el proyecto. Gracias a esta opcin podemos trabajar tranquilamente con un "boceto" y sustituirlo de un modo efectivo (el nuevo smbolo hereda las propiedades del antiguo smbolo, incluido el nombre de instancia, las acciones que le afectarn, efectos grficos etc...) cuando llegue el momento. En la imagen se puede observar el panel Intercambiar Smbolo.

Este panel adems, incorpora el botn Duplicar Smbolo cuya funcionalidad es la que nos podemos imaginar. Es muy til cuando queremos hacer pruebas con un smbolo y no queremos perderlo. Lo duplicamos y trabajamos tranquilamente con la copia.

Efectos sobre Instancias (I)


Para acceder a los efectos aplicables sobre una instancia determinada, debemos acudir nuevamente al Panel Propiedades, desde aqu podremos acceder a todos los efectos que Flash nos proporciona. En el grfico de la derecha se puede observar la pestaa Color: del Panel Propiedades.

Hay varios tipos de efectos. Si el smbolo se acaba de crear o si no tiene efecto asignado aparecer en la pestaa Ninguno. En el siguiente apartado comentamos los distintos efectos aplicables a una instancia. Unidad 9.

Smbolos (III)

Efectos sobre Instancias (II)


A continuacin mostraremos los tipos de efectos. Para ello partiremos de la siguiente imagen original:

Brillo. Se puede modificar su valor desde -100% al 100%, esto es, completamente oscuro (negro) y completamente brillante (blanco). Puedes mover la barra deslizante o introducir su valor directamente en la casilla.

Efecto Brillo del 50 %

Tinta. Esta opcin permite cambiar el color de la instancia, pero puesto que, como dijimos, no podemos modificar la instancia internamente, al variar el color en la pestaa Tinta o bien mediante los valores RGB (cantidad de rojo, verde y azul), se cambiar el color de toda la instancia como si la estuviramos tiendo o poniendo una capa imaginaria de un color determinado. El grosor o intensidad de esta "capa" la podemos modificar en porcentaje mediante la primera pestaa que aparece a la derecha.

Efecto Tinta del 50 % con el color verde (0 255 0)

Alfa. Representa el grado de visibilidad o transparencia que se tendr de la instancia en cuestin. Tambin se puede modificar mediante valor directo o con la barra deslizante y es muy til para animaciones de aparicin y desaparicin de objetos. Si aplicamos un efecto alpha sobre una instancia que est encima de otro objeto, el objeto que antes estaba tapado se podr ver a travs de la instancia.

Efecto Alfa del 65 % sobre el pez naranja

Avanzado. Aqu podemos aplicar todos los efectos anteriores al mismo tiempo de manera ms precisa, con la ventaja de que aqu podemos ponerle un poco de cada uno, dando lugar a efectos de gran vistosidad.

Sobre el pez superior. Hemos aplicado un efecto Alfa del 65 % y hemos reducido al 45 % la cantidad de verde a la vez que hemos multiplicado la cantidad de azul por 111, obteniendo el tinte rosa translucido que se observa

Mientras modifiquemos los efectos sobre las instancias podremos ir viendo el resultado sobre el propio escenario

Unidad 10.

Grficos (I)

Qu es un grfico?
Los Grficos son smbolos que nos permiten representar objetos estticos y animaciones sencillas. En caso de que utilicemos un smbolo grfico para realizar una animacin, debemos tener en cuenta que sta estar ligada a la lnea de tiempo de la pelcula en la que se encuentre. Es decir, la animacin se reproducir siempre y cuando la pelcula original tambin se est reproduciendo. Esto hace que, pese a tener su propia lnea de tiempo, no puedan contener sonidos, controles ni otros smbolos grficos. As pues, normalmente utilizaremos los grficos para imgenes estticas o para cuando nos convenga que una animacin se reproduzca slo cuando determinado frame de la lnea de tiempo de la pelcula est en marcha, ya que para los casos que hemos comentado anteriormente en los que un grfico no nos es til, Flash nos ofrece otro tipo de smbolos como veremos en temas posteriores.

Tipos de Grficos
Los grficos pueden ser:

a) Estticos: estos grficos se mantienen sin cambios cuando pasa el tiempo. Estos grficos son los tpicos en los fondos y en los objetos que no desempean ninguna funcin especial. Su tamao y por tanto, el tiempo de carga de este tipo de grficos, aunque siempre depender de la resolucin, de sus dimensiones y de la forma en la que estn creados *, ser en general reducido.

ESTO ES UN GRFICO ESTTICO

b) Animaciones: este tipo de grfico vara su forma, posicin u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar varios grficos ms adems del original o bien realizar determinadas acciones que modifiquen el estado inicial, el tamao de esta clase de grficos, para las mismas dimensiones y forma de creacin, ser mucho mayor que uno esttico.

ESTO ES UNA ANIMACIN

Por esto, aunque las animaciones dan a nuestra web un aspecto ms bonito y espectacular tienen dos inconvenientes: 1) Si se trata de un Mapa de Bits (ahora veremos que significa esto) la web puede llegar a tener un tamao

excesivamente grande. 2) Aunque no se traten de mapas de bits, por ejemplo, si son animaciones tpicas de Flash, cuyo tamao no es excesivo, el hecho de poner muchas animaciones puede llegar a "marear" un poco al visitante de nuestro sitio y desviar su atencin de lo que realmente importa, su contenido.

(*) Los tipos de grfico anteriores pueden ser, a su vez de dos tipos, segn la forma en la que estn creados: Grfico Vectorial o Mapa de Bits. Para saber ms acerca de estos dos tipos de grfico, chale un vistazo a nuestro tema bsico. .

Creando un grfico y comprobando sus propiedades


Como explicar tericamente las propiedades de un grfico resulta un tanto confuso, vamos a ver de manera prctica lo que queremos explicar. Vamos a crear un grfico en Flash y a comprobar las propiedades que hemos comentado en el primer apartado del tema. Para ello, abre una nueva pelcula Flash Archivo -> Nuevo). Ahora tenemos que crear el objeto que queremos convertir en un smbolo Grfico. Dibujemos, por ejemplo, un valo en cualquier lugar del rea de trabajo con la herramienta valo de la barra de herramientas de dibujo y dmosle un color de relleno que ser lo que despus animemos (Selecciona el fondo del valo y dale el color azul mediante la herramienta relleno de color. ).

Ya hemos creado nuestro objeto, vamos a convertirlo en un smbolo grfico lo recuerdas ? Selecciona el objeto, ves al Men Insertar -> Convertir en Smbolo y convirtelo en un smbolo como ya habamos visto y dndole el nombre "GrficoAnimado"y seleccionando el Comportamiento Grafico

Ahora vamos a crear la animacin del grfico. Puesto que todava no hemos visto a fondo las animaciones, la vamos a realizar de una forma que quiz no sera la ms apropiada la mayora de las veces, pero nos servir muy bien para este ejemplo. Para ello selecciona nuestro grfico y pulsa el botn derecho del ratn. Se desplegar un men, en el que seleccionaremos la opcin Editar para modificar el grfico y acceder a su lnea de tiempos. Comprueba que ests en la lnea de tiempos del grfico (justo encima del escenario existe una secuencia que nos indica en qu nivel nos encontramos. En la imagen inferior, se puede apreciar que nos encontramos en "Escena1 - Grfico Animado" y, por tanto estamos DENTRO del grfico (y la lnea de tiempos que vemos es la del grfico, y no la de la pelcula principal)

Crearemos a continuacin nuevos fotogramas clave seleccionando uno a uno los frames nmero 2, 3 y 4 y pulsando F6 cuando los seleccionemos. Pulsa sobre el frame 2 y cmbiale el color de fondo al valo como hicimos antes. Haz lo mismo en los dos siguientes frames.

Tu lnea de tiempos debera tener este aspecto:

Pulsa donde pone Escena 1 justo encima del escenario y de este modo volveremos al nivel inicial (Pelcula principal) y podremos ver nuestro grfico "desde fuera".

Ahora ya tenemos completo nuestro grfico animado. Qu crees que suceder si reproducimos la pelcula? Comprobmoslo pulsando Control + Intro, se visualizar la pelcula.

Y bien? Nada. Nada en absoluto. El valo sigue tal cual. Por qu? La respuesta est en las caractersticas de los grficos que habamos explicado: la lnea de tiempos del grfico est ligada a la de la pelcula. En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su animacin; slo ha reproducido un frame, el primero. Cmo podemos solucionarlo? Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6. Ahora tenemos 5 fotogramas en la pelcula principal. Pulsa de nuevo Control + Intro. Unidad 10.

Grficos (II)

Introducir un Mapa de Bits


Los grficos de tipo Mapa de Bits pueden crearse con muchos programas. Si deseas que en tus pelculas hayan mapas de bits lo ms seguro es que prefieras crearlos y hacerlos ms espectaculares en otro programa ms apropiado que Flash para el manejo de Bitmaps: Photoshop, Fireworks o Photopaint. Flash MX permite importar mapas de bits de otros programas, cuando han sido guardados en formatos grfico GIF, JPG, TIFF y muchos ms. Tambin nos permite modificarlos en cierto modo. Podemos cambiarle el tamao y convertirlo en un smbolo para aprovechar las opciones que nos ofrece Flash aunque, teniendo en cuenta qu es un

bitmap, no podremos modificarlo "internamente" pero podremos usarlo como un smbolo ms. Aqu tienes una muestra de como hacerlo.

Introducir un archivo vectorial

Al igual que los mapas de bits, hay otros programas que trabajan con grficos vectoriales como tambin hace Flash MX. Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand, podemos hacerlo de manera muy sencilla. Simplemente accedemos al men Archivo -> Importar... A continuacin, seleccionamos el tipo de archivo correspondiente al grfico vectorial que queramos importar. Por ejemplo FH9 del Freehand 9. Pulsamos Abrir, y ya tenemos nuestro archivo vectorial. Este archivo s lo podremos modificar internamente ya que Flash es capaz de hacer grficos de este tipo.

Concretamente, el Freehand pertenece tambin a Macromedia, al igual que Flash, con lo que la compatibilidad en este caso es total.

Exportar un objeto Flash como mapa de bits


La interfaz de dibujo de Flash, como hemos visto, resulta muy cmoda en determinadas ocasiones para realizar dibujos. As podra interesarnos utilizar Flash MX para crear un dibujo y despus utilizarlo en otros programas o para cualquier otro uso. Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash como

un bitmap. Eso s, debemos tener en cuenta, como vimos en el tema bsico, que la mayora de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos no debera contener animacin ya que sta no se guardar. Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al men Archivo -> Exportar Imagen ... Luego introducimos en el campo Nombre el nombre que queremos que tenga nuestro nuevo bitmap. Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar.

Ahora ya podemos usar nuestro objeto Flash como un bitmap.

Para entender mejor cmo te aconsejamos realizar el Ejercicio Exportar Bitmap.

Exportar un objeto Flash como animacin


Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash tambin podemos crear una animacin y exportarla como un GIF animado. Sin embargo, como vimos, el GIF animado consiste en una secuencia de imgenes mostradas secuencialmente y es por esto que para exportar un objeto Flash MX como GIF animado es necesario que todos los fotogramas de esta animacin sean clave, ya que el GIF no lo reconocer en caso contrario y no veremos el efecto deseado. Si queris saber cmo hacerlo no tenis ms que seguir los pasos de este clip (Nota: se utilizar como base el grfico animado que creamos en el apartado de creacin de grficos, ya que dicho grfico est hecho fotograma a fotograma): A la derecha vemos el GIF Animado que resulta de exportar nuestro grfico Flash. Unidad 11.

Clips de Pelcula (I)

Qu es un Clip de Pelcula?
Un Clip de Pelcula o simplemente Clip, es una pelcula en si misma, como cualquiera de las que podamos haber creado hasta el momento en este curso, pero que est incluida dentro de otra pelcula y, a su vez puede contener tambin pelculas insertadas en l. Al igual que los otros tipos de smbolos de Flash, los clips de pelcula tienen su propia lnea de tiempo. Sin embargo, y a diferencia de los Grficos (como veremos a continuacin), esta lnea temporal no est ligada a la lnea de tiempos del documento que lo contiene, de tal forma que su ejecucin es independiente. Este tipo de smbolos puede contener cualquier otro tipo de smbolo: grfico, clip o botn, as como cualquier objeto creado con Flash, ya que un clip es realmente una pelcula. Otra de las ventajas de los Clips la encontramos cuando realizamos pelculas de gran complejidad y tamao, en la que intervienen un nmero muy elevado de fotogramas, debido a que en la vista general del documento, nosotros slo veremos un fotograma por clip, el cual puede estar compuesto por muchos frames, lo que nos permitir tener una mejor visin de cmo se desarrolla nuestra animacin, y una barra de tiempos ms clara y "limpia".

Los Clips son una de las herramientas que dan mayor potencia a Flash MX, permitindonos crear pelculas de gran complejidad y multiplicar los efectos visuales, ya que se pueden crear mltiples movimientos independientes entre s y crear conexiones entre los diferentes Clips de un documento. Todas aquellas cosas que no podamos hacer con un smbolo de tipo Grfico, lo podemos hacer con un Clip, adems de poder realizar tambin todo aquello que nos permita dicho smbolo. Por esto, normalmente se utilizan los clips para cualquier tipo de animacin debido a su gran flexibilidad, dejando los grficos slo para imgenes estticas.

Comprobar las propiedades de un Clip


Como hicimos con los grficos, vamos a ver como la lnea de tiempo de un clip no est ligada a la lnea de tiempo del documento que lo contiene y, a la vez, veremos la diferencia entre los clips y los smbolos Grficos, que supone una de las razones de la mayor utilizacin de los primeros en lo que se refiere a la creacin de animaciones. Para ello abriremos una nueva pelcula Flash ( Archivo -> Nuevo ). Despus importaremos una imagen cualquiera o bien crearemos una. La convertimos en Smbolo (Insertar -> Convertir en Smbolo) y seleccionamos en Comportamiento "Clip de Pelcula" Arrastramos al escenario (si no est ya all) nuestro clip de pelcula. Ahora tenemos nuestro Clip, insertado en nuestro nuevo documento Flash. Es decir, tenemos dos pelculas, cada una con su lnea de tiempos. Ahora veamos que son independientes, siguiendo un proceso similar al que utilizamos con los smbolos de tipo Grfico. Observa la lnea de tiempos de la pelcula principal y comprueba que slo tiene un fotograma.

Editemos el Clip que insertamos en el documento (doble click sobre el pez) y examinemos su

lnea de tiempos. Aparecer un nico movieclip. Podemos realizar algo similar a lo realizado con los grficos, s vamos a crear una Animacin de Movimiento (que se ver en el Tema 13). Nos quedar as
:

Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula nueva que lo contiene. Si el pez fuera un grfico ya hemos visto que si intentramos reproducir la pelcula no ocurrira nada. Veamos qu sucede siendo en este caso un Clip (esto tambin es vlido si la animacin se ha creado del modo visto con los grficos). (Control + Intro). En este caso s que vemos la animacin porque en el momento en que el reproductor ha pasado por el fotograma que contena el clip, ste ha empezado a reproducirse y, puesto que su lnea de tiempos es independiente, ha seguido reproducindose a pesar de que la lnea de tiempos principal haya terminado, y lo continuar haciendo hasta que acabe su lnea temporal propia. Unidad 11.

Clips de Pelcula (II)

Crear un nuevo Clip


Como hemos comentado, utilizaremos normalmente Clips para hacer animaciones. Aunque no lo hayamos comentado antes, se puede crear un smbolo Flash de la nada, de forma que se quede en la biblioteca y podamos editarlo cuando nos convenga. Esto puede ser interesante en los clips, ya que a diferencia de los grficos, su finalidad suele ser el movimiento y, en animaciones complejas, en ocasiones se les asignan acciones especiales en las cuales, bien no es necesario crearlo en ese momento, bien conviene dejar el clip vaco. Por esto, es interesante aprender cmo crear un smbolo, en este caso un clip, de la nada para despus modificarlo. Observa cmo hacerlo Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de pelcula y veremos el potencial real de este tipo de smbolos.

Importar y Exportar Movie Clips de Biblioteca

Como para todos los smbolos los Clips se almacenan en la biblioteca del documento cuando son creados. Esto es muy importante en muchos casos ya que habitualmente los clips son muy reutilizables. Para importar clips de pelcula debemos abrir primero la biblioteca en la que est contenido. Hemos visto en el tema de Smbolos, dos tipos de bibliotecas: las que estn asociadas a documentos u otras pelculas y las que nos proporciona Flash MX. Pues bien, no slo podemos utilizar smbolos del mismo documento en el que estamos sino que podemos Importarlos de otros documentos de nuestro disco duro, lo que, en el caso que nos ocupa, puede resultar de gran utilidad. Obviamente la exportacin mediante biblioteca se hace automticamente ya que Flash deja los objetos creados en la biblioteca para que puedan ser reutilizados. Para importar un Clip de un archivo del disco duro debemos ir al men Archivo -> Abrir como Biblioteca, seleccionar el Archivo Flash (.fla) del que queremos importar sus smbolos de biblioteca y pulsar Abrir. Aparecer la biblioteca con la lista de los smbolos correspondientes a los grficos, botones y clips del documento en cuestin. Es importante destacar que cuando insertemos un clip de una biblioteca, se insertarn a su vez todos los smbolos que contenga, incluidos los clips. A continuacin mostramos un ejemplo en el que veremos cmo importar clips de esta forma adems de comprobar las propiedades de los clips y sus lneas de tiempo independientes mediante la reproduccin simultnea de dos pelculas, creando un efecto bastante vistoso utilizando "aparentemente" un slo frame. Ver ejemplo animado: Y el resultado del proceso anterior es el siguiente:

Para ver cmo exportar e importar una pelcula completa como un slo movie clip y poder usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros usos de los Movie Clips Unidad 11. Avanzado.

Otros usos de los Movie Clips

Hemos visto cmo importar y exportar clips desde libreras procedentes de archivos .fla. Ahora veremos otra forma de importar y exportar Clips de tal forma que nos permita una mayor flexibilidad en el uso de Flash y adems nos proporcione una eficaz interaccin con otros programas que se complementan con Flash y que nos permiten potenciar sus caractersticas. Si queremos coger el grueso de una pelcula, de la cual no tenemos su archivo .fla y hacer que se comporte en nuestro documento como si de un Clip de Pelcula propio se tratase, no es tan sencillo como si tuviramos dicho fuente .fla, ya que al importar la pelcula "pblica" que viene en formato .swf la animacin se importa fotograma a fotograma. Por esto, si importramos el archivo sobre la pelcula principal nos encontraramos con un gran nmero de fotogramas claves consecutivos que entre otras cosas, estropearan la apariencia y la claridad de nuestra lnea de tiempos, y nos impedira tratar la pelcula como un todo. Esto representa una especie de mecanismo de seguridad. Debido a la importacin fotograma a fotograma, tambin aumenta el tamao de nuestro archivo y por tanto su tiempo de descarga, sin embargo habitualmente este aumento no es tan importante y puede que nos convenga tener esa pelcula para utilizarla como si de un Movie Clip propio se tratara. Para conseguir esto debemos seguir los siguientes pasos:

1) Crear el smbolo de tipo Clip que va a contener la pelcula. Accediendo al men Insertar -> Nuevo Smbolo...

Automticamente Flash nos colocar dentro del Clip como si lo hubiramos editado nosotros mismos.

2) En esta situacin iremos al men Archivo ->

Importar. 3) Seleccionamos el tipo de archivo swf y buscamos la pelcula que queramos importar. 4) Pulsamos Aceptar y ya tenemos la pelcula insertada en el Clip.

Si volvemos a la lnea de tiempos principal veremos nuestra pelcula ocupando un simple frame y si ejecutamos la pelcula el efecto que veremos ser el mismo que el que tena la pelcula que habamos importado. De esta forma ya podemos aplicarle todas las propiedades de los Clips. Como vemos este "mecanismo de seguridad" de las pelculas swf no es suficiente. Si creamos una pelcula y la distribuimos, pero queremos impedir que alguien la modifique y la redistribuya, es decir, impedir que sea importada con Flash MX por otro usuario como acabamos de hacer nosotros, se nos brinda la oportunidad de proteger la pelcula que hemos creado. Para ello, podemos editar, como veremos ms adelante, el formato de exportacin de nuestras pelculas (ver imagen superior). De modo que para dar una proteccin extra a nuestras pelculas debemos exportar el archivo como swf y activar en Opciones, la opcin Proteger Frente a Importacin e introducir una contrasea. Con esto se le reclamar dicha contrasea al que intente importar nuestra pelcula. Si no introduce dicha contrasea, simplemente no podr importar la pelcula.

Tambin podemos exportar nuestros clips y utilizarlos en programas del estilo de Swish, para aprovechar la capacidad de Flash para la animacin grfica y el dominio de la animacin de textos de Swish. Esto lo podemos conseguir simplemente exportando nuestro clip de la manera habitual y dndole siempre el formato swf de Flash MX. Es de vital importancia el hecho de poder combinar las utilidades de varios programas y en esto Flash es especialmente bueno ya que permite interactuar de manera bastante fiable con programas de tratamiento de

imgenes, programas de dibujo vectorial, reproductores de vdeo, etc. Unidad 12.

Botones (I)

Qu es un Botn?
Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas Flash con aquel que la est visualizando. Un botn, en Flash, es igual que cualquier botn de cualquier entorno informtico, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. Tambin es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratn por encima o cuando se les est pulsando, por ejemplo. Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente bastante grande ya que el uso de los botones es una prctica muy habitual en el diseo en Internet. Sin embargo, en Flash no ocurre as. Su interfaz est diseada de manera especial para la creacin de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros smbolos de Flash MX, los botones tienen su propia lnea de tiempos. Esta es independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado posible del botn.

Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado sobre l. Sobre. Aspecto del botn cuando situamos el puntero sobre l. Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado. Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es importante sobre todo en botones compuestos slo por texto como veremos ms adelante. Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de espectacularidad y utilidad de estos smbolos, pero no es as. Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap). La unin de las posibilidades de todos los smbolos dota a los botones de gran espectacularidad.

Creacin de un Botn
En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estructura. Primeramente crearemos el objeto que representar el aspecto por defecto de nuestro botn con las herramientas que nos ofrece Flash MX. Seleccionaremos el objeto y accederemos al men Insertar-> Convertir en Smbolo, le

daremos el comportamiento Botn y asignaremos un nombre a nuestro nuevo smbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completaremos internamente. Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar. Cuando tengamos delante la lnea de tiempos del botn (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentir aludido" nuestro botn.

Aqu podemos ver una muestra de creacin de un botn ovalado. obtenemos el botn que continuacin mostramos.

Como resultado

Este es un botn muy bsico, como veremos se pueden complicar mucho, pero para empezar nos servir con este. Si una vez creado el botn queremos observar sus distintos estados y todava no hemos terminado la pelcula entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra pelcula y seleccionando el botn creado. Para ver lo que comentbamos bastar con pulsar la tecla situada a la derecha de la vista previa del smbolo.

Formas en los Botones


Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual es ver botones rectangulares, cuadrados y circulares, cuya creacin es inmediata como vimos en el punto anterior, tambin hay otros muchos tipos de botones que, pese a

ser menos utilizados, es muy habitual verlos en multitud de pginas web. Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar ms vistosidad ya que algunos resultan ms expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creacin de botones que sus herramientas de dibujo nos ofrece. Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo o los botones en forma de pldora. Puesto que existen muchas formas de conseguir estos efectos, a continuacin tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botn rectangular. Unidad 12.

Botones (II)

Botones de texto. La importancia de la zona activa

Los botones, como hemos visto, poseen un fotograma en el que indicamos la zona activa. En los ejemplos v poco til, ya que es comn pensar que obviamente la zona activa que queremos que tenga nuestro botn es el dicho botn.

Aunque parezcan iguales, la diferencia est en el momento en el que situamos el ratn en uno de los huecos que existe entre letra y letra o, en general, todos aquellos lugares que no pertenezcan al texto propiamente dicho. En el texto de la izquierda el botn se activa slo cuando situamos el puntero del ratn sobre la letra. Esto puede ser incmodo y puede llevar a confusin, ya que aquel que navegue por nuestras pginas simplemente querr hacer uso del botn y no tener que intentar apuntar concretamente a unas letras que quiz sean muy estrechas. Esto es debido al mal uso de la zona activa. En el botn de la derecha est solucionado este problema como podemos comprobar de nuevo

Incluir un clip en un botn


La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin extra o una animacin para ir ms all de un cambio de color. Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo.

Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que empieza algo, pero quiz no tengamos claro qu. Si nosotros en determinado momento no queremos que esto ocurra en nuestras pginas web, podemos recurrir a la introduccin de un Clip en el botn, que explique un poco ms acerca de lo que pasar si pulsamos.

Bitmaps y Botones
Adems de clips, los botones tambin pueden contener smbolos de tipo Grfico. Puesto que, como ya hemos visto, todo lo que se puede hacer con un grfico se puede hacer con un clip, vamos a centrarnos en los Bitmaps que Flash nos permite importar, ya que estn muy extendidos como forma de expresin grfica a lo largo y ancho de la Red. Si consideramos las limitaciones que ya conocemos sobre los mapas de bits puede parecer poco interesante hacer uso de ellos en la creacin de botones, pero no es as. Bsicamente podemos hacer dos cosas: 1) Incluir en cada uno de los fotogramas del botn un bitmap distinto, obteniendo un efecto como el que se consigue con lenguajes como javascript (siempre considerando la mayor sencillez de Flash). 2) Aprovechar las propiedades de los Grficos en Flash. Para esto, deberamos importar primero el Bitmap y despus convertirlo a smbolo botn. Posteriormente lo editaramos y, despus de insertar cada fotograma clave, convertiramos su contenido a smbolo Grfico. Una vez hecho esto, variando los efectos de las instancias en Flash (Alfa, Tinta, Brillo) podremos conseguir efectos bastante buenos. He aqu una pequea muestra en la que slo hemos utilizado un Bitmap de tipo GIF, sacado de la Red y lo hemos convertido en un botn grfico aplicndole un efecto Alfa (Transparencia) al estado de reposo, lo que da la sensacin de estar apagado (tambin podramos haber aplicado brillo). En el fotograma Sobre hemos dejado el GIF original para que al pasar sobre el botn de la sensacin de encenderse. Finalmente le hemos aumentado la cantidad de rojo en el fotograma Presionado para que parezca estar incandescente. Unidad 12.

Botones (III)

Acciones en los botones


Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash MX vamos a comentar dos de las ms comunes: 1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una pelcula Flash), lo que nos servir para irnos desplazando por webs que contengan ms de una pgina, o permitir al usuario descargarse archivos entre otras cosas.

2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda ... Por ejemplo, para detener una pelcula en curso simplemente debemos hacer que nuestro botn en cuestin aparezca en el escenario de dicha pelcula, seleccionarlo, y abrir el panel de acciones, activando posteriormente la funcin Stop().

Tras hacer esto, deberamos cambiar como hicimos en la animacin anterior el momento en el que se debe ejecutar la funcin, seleccionando el evento Presionar. Arriba mostramos cmo debera quedar el panel de acciones del botn. Ahora cada vez que presionemos este botn se detendr la pelcula en la que est incluido. De forma muy parecida actuaramos para otras acciones de control.

Incluir sonido en un botn


Si nuestras pginas van a tener sonido, el sonido en los botones es una parte fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botn. Para ello, simplemente debemos editar nuestro botn y seleccionar el fotograma Presionado. Ahora debemos insertar el sonido. Por ejemplo podramos insertar uno de la biblioteca comn Ventana -> Bibliotecas Comunes -> Sonidos. Elegimos uno de los que nos ofrece Flash, y lo arrastramos hasta cualquier lugar del escenario. Unidad 13.

Animaciones de Movimiento (I)

La animacin en Flash
Flash MX 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, sobretodo, mucha prctica. 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 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. 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. 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.

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, "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, anteriormente. pero esto no cambiar lo que hemos comentado

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. Aqu puedes ver como realizar una interpolacin de movimiento 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. 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. Para entender mejor este concepto recomendamos hacer el Ejercicio Encadenar Interpolaciones.

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 MX, 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:

Unidad 13.

Animaciones de Movimiento (II)

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

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.

Interpolacin mediante Gua de Movimiento


Anteriormente hemos visto como las interpolaciones de movimiento desplazaban smbolos Flash en lnea recta. Puesto que esto supone una cierta limitacin Flash MX 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.

Unidad 14.

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 po 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:

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

Animacin por Forma (II)

Consejos de Forma
Como ocurra en el tema anterior, a veces no nos viene bien el tipo de accin que hace Flash por defecto. En las interpolaciones de movimiento lo solucionbamos mediante la gua de movimiento. En el caso de la interpolacin por forma, es posible que Flash realice la transformacin de los objetos de una forma que no es la que esperbamos y que no nos conviene para llevar a cabo nuestro propsito. Pues bien, para estos casos Flash MX nos ofrece una herramienta para solucionarlo: los consejos de forma. Los consejos de forma son marcas que indican a Flash qu puntos de la imagen inicial son los que deben corresponderse con otros tantos puntos en la figura final. Al indicar esto, estamos controlando las formas intermedias que se generarn. Para aadir un consejo de forma a una interpolacin nos situaremos en el fotograma inicial y pulsaremos Control + Shift + H (o bien ir al men Modificar -> Forma -> Aadir Pista de Forma). Aparecer un crculo de color con una letra dentro en el centro de la figura. Su color ser rojo mientras no sea colocado en el contorno del objeto (los extremos, si es que no hay contorno), que es donde tiene efecto. Cuando estn colocados sobre una curva (vector) que forma un contorno son amarillos para el objeto inicial y verdes para el final. Dicho crculo debemos colocarlo en un punto del contorno de la figura inicial. Automticamente aparecer un punto con la misma letra dentro en la figura final (este punto ser el que se deba corresponder con el punto del objeto de origen) y deberemos colocarlo en el punto que deseemos del contorno.

El primer consejo de forma est marcado con la letra "a". Si creamos ms de uno sern marcados con las letras "b", "c", "d" ... hasta la z, que es el lmite (26 como mximo). Vamos a insertar un consejo de forma en el punto indicado en los grficos situados un poco ms abajo: Fijmonos en las posiciones inicial y final del Consejo de Forma y en el seguimiento del mismo, posteriormente comprobaremos que Flash realiza lo que le pedimos:

Punto Inicial

Punto Final

Unidad 15.

Efectos sobre Animaciones (I)

Introduccin
Si no te parecen suficientes las interpolaciones de forma y de movimiento, y quieres realizar animaciones ms complejas, puedes combinar las interpolaciones de movimiento con los efectos y transformaciones que se pueden realizar sobre los smbolos que las componen y aplicar efectos sobre las mismas interpolaciones. Una vez comprendidas todas las tcnicas de este tema, estaremos en disposicin de realizar todo tipo de animaciones en Flash. Slo tendremos que poner un poco de imaginacin porque, como hemos visto y veremos, el programa nos facilitar enormemente el trabajo.

Efectos sobre la Interpolacin de Movimiento


Para describir todos los efectos que podemos aplicar sobre una interpolacin de movimiento previamente creada, sin necesidad de tocar ningn smbolo, nos centraremos en el Panel Propiedades, cuando seleccionemos un Fotograma que presente animaciones de Movimiento, los atributos de la animacin a modificar aparecern en este Panel.

En el campo <Etiqueta de fotograma> podemos darle un nombre a la interpolacin que nos ayudar a identificarla en la barra de tiempos. Aparecer a lo largo de todos los fotogramas que la componen. Escalar : Esta casilla, al activarla, permite un incremento/decremento progresivo del tamao del objeto inicial cuando sus dimensiones son distintas a las del objeto que est en la posicin final de la animacin. Todas las interpolaciones de movimiento que hemos hecho hasta ahora tenan esta opcin activada aunque no lo hayamos indicado expresamente. Flash la activa por defecto, ya que es lo ms normal. De no ser as podramos encontrarnos con una animacin como la siguiente.

Borrar : (Aceleracin en Flash 5) Esta barra deslizante nos permite determinar la aceleracin del primer tramo de la animacin. Podemos elegir valores entre -100 y 100. Si el valor de aceleracin es negativo el smbolo se mover despacio primero e ir acelerando de manera progresiva. Si dicho valor es positivo provocar un efecto opuesto. Podemos por ejemplo dar la impresin de que un objeto, por ejemplo un coche, arranca, va cogiendo velocidad poco a poco (valor -100) y despus va frenando y disminuyendo su velocidad hasta pararse. Como esta, existen muchas otras aplicaciones. Para comprenderlo mejor recomendamos hacer el Ejercicio Acelerar Movimiento.

Girar : Esta opcin es muy interesante ya que nos da la posibilidad de aplicar una rotacin al objeto mientras se produce el movimiento. Para que surta efecto debemos seleccionar el primer fotograma de la interpolacin. Se nos presenta un submen con cuatro opciones: Ninguna. Con esto le indicamos a Flash que no aplique rotacin alguna sobre el smbolo en movimiento. Automtica. Marcando esta opcin hacemos que se produzca la rotacin en aquella direccin que necesite menos movimientos. Si cuesta lo mismo hacerlo por un lado o y por el otro, es decir, cuando la imagen inicial y final est en la misma posicin (en cuanto a rotacin se refiere), el hecho de activar esta opcin no tendr ningn efecto.

Esta opcin es la que est marcada por defecto y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones. Para que hubiera tenido efecto deberamos haber rotado la ltima imagen de la interpolacin. Aqu podemos ver cmo aplicar esta tcnica. Este es el resultado que hemos obtenido, como podemos comprobar, ha recorrido el camino ms corto, ya que el 6 ha pasado progresivamente de su posicin anterior a la que ocupaba el 1 de la otra forma el 6 habra pasado por las posiciones anteriores del 5, 4, 3, 2 y 1, siendo la longitud del movimiento mucho mayor.

A la izquierda (CCMR). Permite realizar el nmero de rotaciones completas en la direccin contraria a la de las agujas del reloj, que le indiquemos en la casilla de la derecha. Tanto si la ltima imagen tiene rotacin como si no.

En caso de que tuviera rotacin la imagen final, esta se le aadira. A la derecha (CMR). Realiza lo mismo que la opcin anterior pero en la direccin de las agujas del reloj (hacia la derecha). Orientar segn trazado: Si activamos esta casilla, cuando la interpolacin sobre la que actuamos es una interpolacin por gua de movimiento, Flash har que el smbolo tome la direccin de la gua, rotando para orientarse en la misma posicin que adopta la lnea. Para entender mejor este concepto, recordemos la ltima animacin del tema 13, en la que el avin haca una especie de "looping". Resultaba un poco extrao ver la animacin porque los aviones no van marcha atrs y, en esta ocasin y en muchas otras, no es conveniente que los objetos se muevan solo en el escenario quedando el mismo smbolo inmvil, como si levitara. Sincronizar (Sinc): Con esto evitamos que no se reproduzca el ltimo bucle de un smbolo grfico incluido en nuestra pelcula con una animacin en su lnea de tiempos interna, cuando el nmero de fotogramas que ocupa en la lnea principal no es mltiplo de los fotogramas que contiene la instancia. Ajustar: Si activamos esta opcin, el centro de la instancia (identificado con una cruz) se ajustar forzosamente a la gua que hemos marcado en la correspondiente capa. De hecho si intentamos mover la instancia en un fotograma de la animacin, Flash la volver a colocar sobre la gua de manera automtica. Unidad 15.

Efectos sobre Animaciones (II)

Efectos sobre el Smbolo Interpolado

Ya vimos en temas pasados cmo aplicar efectos sobre smbolos y vimos que se poda lograr efectos vistosos. No obstante, cuando los efectos muestran su verdadera potencia es cuando el smbolo forma parte de una animacin. Para explicar y demostrar las posibilidades de estos efectos vamos a abrir el Panel Propiedades, que nos mostrar, en la pestaa "Color" los posibles efectos a aplicar si seleccionamos una instancia de un smbolo cualquiera de nuestra pelcula. Podemos aplicar los efectos sobre cualquier smbolo de cualquier fotograma de la animacin, tanto sobre el fotograma inicial o el final como en los intermedios. En este ltimo caso, deberemos convertir a fotograma clave aquel que contenga la instancia y despus aplicar el efecto.. Para entender bien lo que sigue, es necesario controlar la aplicacin de efectos sobre instancias. Esto lo vimos en el Tema 9 y por eso omitiremos detalles sobre cmo aplicar efectos concretos sobre smbolos.

Efecto Brillo
El efecto de brillo, como su propio nombre indica, nos viene muy bien para simular el hecho de que algn objeto se encienda o brille, o por el contrario se apague o pierda brillo. En el ejemplo que tenemos a la izquierda, hemos intentado simular este efecto. Para ello hemos creado un semforo de luces intermitentes de color mbar. Como se puede ver, las luces se encienden y apagan progresivamente de manera alternada. Para conseguir esto hemos creado una interpolacin para cada luz, formada por tres fotogramas claves. El tercero lo hemos colocado justo en el medio de la secuencia de fotogramas. A la primera luz y a la ltima le hemos dado el mismo valor de brillo, y en la del medio le hemos dado un valor ms alto o ms bajo segn fuera el smbolo de abajo o el de arriba. Como los movimientos de las luces son distintos e independientes los hemos colocado en distintas capas. Para la luz superior los valores de brillo fueron: 0 para el primer fot. clave, -46 para el central y 0 para el del medio. Y en la luz inferior al contrario: 0 para el primer fot. clave, -46 para el central y 0 para el del medio.

Efecto Tinta

El efecto de Tinta, tiene un amplio marco de posibilidades de uso. Es muy usado en textos y en botones, por ejemplo haciendo que cambien progresivamente de color al pasarles el ratn por encima o simplemente efectos de cambio de color en presentaciones. El tintar colores supone un toque alegre y muy vistos en las presentaciones y si se usan varios efectos, combinados adecuadamente, dota de un ritmo rpido a la animacin, como una explosin de color que sorprenda al receptor de la pelcula. Otro interesante uso de este efecto es simular la proyeccin de una luz de color sobre un objeto que se va acercando al foco. Veamos un ejemplo de esto.

Vemos como al acercarse el avin a la luz roja del Sol, ste lo ilumina con una luz roja. Hemos aplicado a la instancia del avin del ltimo fotograma de su interpolacin de movimiento un efecto de tinte rojo con una intensidad del 60%. Lo mismo hemos hecho en el centro del Sol pero con dos fases, poniendo en el fotograma central un efecto de tinte granate del 25%. La corona solar es simplemente una interpolacin de forma en cuatro fases.

Efecto Transparencia (Alfa)


Este es probablemente el efecto ms utilizado debido a la versatilidad del hecho de controlar el grado de visibilidad de los objetos. Podemos, por ejemplo, simular un foco apuntando a un escenario o, lo ms comn, hacer aparecer objetos de la nada y tambin hacer que se desvanezcan poco a poco. Unidad 16.

Generar y Publicar Pelculas (I)

Consideraciones sobre el tamao de las pelculas


Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobretodo si la vamos a publicar en una pgina web, donde el tamao de descarga es de vital importancia, debemos tener en cuenta los siguientes aspectos:

CONSIDERACIONES EN EL DIBUJO: Aunque los degradados queden muy vistosos, tambin requieren ms memoria, por lo que debemos evitar su uso excesivo, en la medida de lo posible. La herramienta pincel gasta ms memoria que el resto de herramientas de dibujo, por lo que deberamos elegir estas ltimas en la medida de lo posible. Hemos visto que la animacin de lneas es bastante til. Sin embargo el uso de lneas que no sean las definidas por defecto y que usamos en el captulo que hemos comentado, har que el tamao de la descarga aumente. Por tanto evitemos las lneas discontinuas, de puntos ... Dibujar las curvas con el menor nmero de nodos posible.

CONSIDERACIONES EN LA ORGANIZACIN: Agrupar los objetos que estn relacionados con el comando Modificar -> Agrupar. Si hemos creado un objeto que va a aparecer varias veces, deberamos convertirlo a smbolo, ya que como hemos visto, Flash lo colocar en la biblioteca y cada vez que quiera mostrarlo, har referencia a una nica posicin de memoria. Ya hemos comentado el mayor tamao de los mapas de bits, lo que hace que debamos minimizar el nmero de apariciones de stos en nuestra pelcula.

CONSIDERACIONES EN LOS TEXTOS: Hemos podido observar, cuando manejbamos textos, que cuando abrimos el men de tipos de letras, las tres primeras son siempre "_sans", "_serif" y "_typewriter". Esto no es una casualidad. Estn colocadas ah para resaltar que estas fuentes ocupan un mnimo de memoria, por lo que se recomienda su uso.

CONSIDERACIONES EN LA ANIMACIN: Utilizar lo ms que podamos las interpolaciones de movimiento y las guas para reducir el nmero de fotogramas clave y el tamao de la pelcula. Evitar el uso de la interpolacin por forma para animaciones de cambio de color, cuando sea posible. Independientemente de la optimizacin que hagamos, a veces no se puede evitar que el tamao de la pelcula aumente. Es recomendable entonces hacer un preloader (precarga) cuando la pelcula que queramos publicar sea de tamao superior a unos 80KB.

Preloader. Cargar la Pelcula entera antes de reproducirla


Un preloader se usa principalmente para evitar la carga parcial de la pelcula, mientras esta se est reproduciendo, lo que, en ocasiones en las que la pelcula es de un tamao considerable, hace que la pelcula se vea entrecortada. Normalmente, los preloaders se hacen vistosos para que el observador no se aburra y deje de lado la opcin de visitar nuestra web. Suelen llevar alguna animacin sencilla que se va reproduciendo mientras se est cargando simultneamente la pelcula principal, mucho ms grande. Se pueden complicar mucho ms, pero nosotros haremos uno sencillo que nos sirva para entender bien el concepto, y la manera de hacerlo. Partimos de que ya tenemos nuestra pelcula terminada. Si queremos saber su tamao podemos ir a Archivo ->Configuracin de publicacin seleccionar la pestaa Flash, y marcar la casilla Generar Informe de Tamao. Si pulsamos el botn Publicar, aparecer en nuestro directorio un archivo de texto donde se explica con detalle el tamao de nuestra pelcula.

Ahora insertaremos una nueva escena (Insertar -> Escena). Deber ser la primera que se ejecute. Para asegurarnos de ello accedemos a Modificar -> Escena, y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que est la primera. En la escena recin creada insertaremos otra capa, de manera que nos queden dos capas a las que llamaremos, "Accin" y "Cargando". En la capa "Cargando" crearemos una animacin sencilla. Por ejemplo, hagmosle honor al ttulo y escribamos "Cargando ..."; puedes aplicarle la animacin que prefieras, siempre que no sea muy compleja. En la capa "Accin" disearemos el "corazn" del preloader. Vamos a hacer que la animacin de nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la escena que contiene la pelcula principal, mediante las acciones ActionScript de Flash MX. Para ello abrimos el panel de Acciones. Vamos a seleccionar el ltimo fotograma e introducimos la accin GoTo, que por defecto nos escribir "gotoandPlay(1)" (ir al fotograma uno y reproducir). En la casilla Escena dejamos la escena del preloader, y en la casilla Fotograma introducimos el nmero del primer fotograma de dicha pelcula (por ejemplo, el 1). Ahora seleccionamos el penltimo fotograma, que es el que impedir que se llegue al ltimo (o sea, que repetir el bucle que muestra la animacin "cargando") cuando se haya cargado la pelcula principal por completo. Para hacer esto, elegimos la accin IfFrameLoaded (si se ha cargado el fotograma) e indicamos en sus casillas la escena principal y el ltimo fotograma de sta. Acto seguido introducimos la accin "Goto" de nuevo indicando esta vez la escena principal y su primer fotograma.

Con esto, hacemos que aparezca en la pantalla el texto "cargando" y mientras se reproduce su animacin, iremos comprobando peridicamente si la pelcula principal est cargada por completo, si no lo est seguiremos mostrando el texto "cargando" hasta que la comprobacin que hacemos en el ltimo fotograma nos indique que nuestra pelcula se ha cargado. En ese momento, dejaremos que la animacin del preloader llegue a su ltimo fotograma, que contiene la accin que nos llevar a reproducir la pelcula. Y esto es todo lo que hay que hacer para crear un preloader (aunque por supuesto

se puede hacer ms sofisticado), con lo que los visitantes ya no huirn de nuestra web.

Distribucin como archivo swf en un reproductor autnomo


Para poder distribuir pelculas creadas en Flash que la gente pueda ver, son necesarias dos cosas: crear un archivo SWF y que el que la quiera visualizar tenga instalado el Reproductor de Flash. Flash nos ofrece varias opciones y funcionalidades para la creacin de un archivo SWF. Estas opciones se pueden ver en el panel de Configuracin de Publicacin, al que podemos acceder mediante el men Archivo -> Configuracin de Publicacin (Pestaa Flash).

Veamos cules son estas opciones: Versin: Si queremos publicar nuestra pelcula para que sea vista con versiones anteriores de Flash, debemos seleccionar aqu la versin deseada. Orden de Carga: Aqu indicamos el orden en que queremos que se cargue el documento. Si seleccionamos De abajo a arriba se cargar primero el contenido de la capa inferior (de la capa 1 hasta la ltima capa que tengamos en el documento). Por el contrario, si seleccionamos De arriba a abajo se cargar primero el contenido de la capa superior (de la ltima capa que tengamos en el documento hasta la capa 1). Este comando es importante debido a la propiedad de Flash de ir reproduciendo la pelcula conforme los objetos son cargados. As, en caso de que nos interese que aparezcan antes unos objetos que otros seleccionaremos uno o el otro. Generar Informe de tamao: Esta opcin la hemos usado en el apartado anterior. Si la activamos, se crear un archivo de texto con una relacin detallada del tamao del documento. Proteger Frente a Importacin: Activando est casilla conseguiremos que cuando otro

usuario (o nosotros mismos) queramos importarla no podamos o tengamos que introducir una contrasea si se ha escogido alguna. Omitir acciones de Trace: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la pelcula durante la creacin de esta (durante las pruebas). Tambin se consideran trazas los comentarios que insertemos en el cdigo Action Script. Si activamos esta seal, la pelcula creada no los incluir, ocupar menos tamao y ahorraremos tiempo innecesario. Es recomendable cuando se publique la pelcula de un modo definitivo. Depuracin Permitida: Permite que se pueda depurar el archivo SWF. Tambin exige la introduccin de una contrasea ya que se debe tener permiso del creador para Importar el archivo y depurarlo. Comprimir pelcula: Comprime la pelcula al mximo posible. Calidad JPEG: Si en el panel de propiedades del mapa de bits no hemos indicado una compresin concreta, aqu podremos determinar su grado de compresin, que determinar a su vez el espacio ocupado en memoria por este tipo de imgenes. A mayor compresin, menos espacio en memoria ocupar la imagen, pero tambin su calidad ser menor. Suplantar configuracin de sonido: Con esto se suplantarn los niveles de compresin seleccionados para cada archivo de sonido de nuestro documento Unidad 16.

Generar y Publicar Pelculas (II)

Distribucin para Pginas Web


Esta es una parte importante, ya que normalmente las pelculas de Flash estn orientadas a la publicacin va Web. Para publicar una pelcula Flash en Internet de manera que forme parte de una pgina web deberemos insertarla en un archivo tpico de pginas web cuyo lenguaje de programacin sea del estilo del HTML. Para ello debemos atender a las opciones de publicacin HTML que nos ofrece Flash, y que nos ayudarn a que nuestra pelcula se visualice como realmente queremos. Las opciones de este tipo de publicacin estn en Archivo -> Configuracin de Publicacin... (Pestaa HTML).

Plantilla: Para incrustar una pelcula Flash en un documento HTML, hay que escribir una serie de cdigos de programa algo complejos y laboriosos de hacer a mano. Para facilitarnos esta tarea Flash hace esto automticamente pero, puesto que cada web es distinta y nuestras necesidades van a ser muy distintas, los codigos tambin sern muchos y distintos, por esto Flash incluye Plantillas, que crean este cdigo automticamente segn el tipo de publicacin que deseemos: En el botn "Informacin..." que est a la derecha de la pestaa "Plantilla" se nos muestra informacin muy til sobre cada tipo de plantilla. Estas son las plantillas ms comunes: Slo Flash: Esta es la opcin predeterminada y utiliza el reproductor Flash MX. Flash with FSCommands: Imprescindible cuando se usen FSCommands. Mapa de Imgenes: Si hemos incluido una Image Map (imgenes completas que ejecutan distintas acciones segn la coordenada que se pulse) debemos activar esta opcin. Pocket PC 2002: Especialmente diseado para Pocket Internet Explorer en Pocket PC 2002. QuickTime: Permite incluir una pelcula QuickTime.

Dimensiones: Especifica la unidad en la que mediremos las dimensiones del Documento. Anchura X Altura: Aqu introduciremos la anchura y altura, teniendo en cuenta que a veces un objeto ms grande que estas dimensiones provocar un cambio en stas.

Reproduccin: Permite realizar determinados cambios en cuanto a la reproduccin de la pelcula:

Pausa al Comienzo: Permite que sea el usuario quien haga que se inicie la reproduccin, que inicialmente aparecer detenida. Reproduccin Indefinida: Cuando la pelcula termine, volver a empezar desde el principio. Esto lo har infinitamente. Visualizar Men: Permite que al hacer el usuario clic con el botn derecho del ratn sobre la pelcula, el men emergente tenga todas las opciones por defecto. Si la desactivamos slo aparecer la opcin "Acerca de Flash". Fuentes de Dispositivo: Sustituye las fuentes utilizadas en los textos sin animacin de la pelcula por las fuentes predeterminadas en la mquina de quien la visualice.

Calidad: Aqu podemos modificar la calidad de visualizacin de la pelcula, que depende del suavizado de la imagen y el tiempo de reproduccin. Las opciones son: Baja No hay suavizado. El tiempo de reproduccin es el de mxima velocidad. Baja Automtica: El reproductor detecta si la mquina soporta en cada instante un ligero suavizado, si lo soporta, lo aplica. El tiempo sigue siendo muy rpido. Alta Automtica: Pone al mismo nivel el tiempo y el suavizado, pero si hay alguna limitacin, siempre dar preferencia a la velocidad. Media: Valores intermedios de velocidad y suavizado. No suaviza los bitmaps. Alta: Usa siempre el suavizado, los mapas de bits se suavizan slo si no hay animacin. Da preferencia a la buena visualizacin. ptima: Se suaviza todo, incluidos los mapas de bits en cualquier caso. Total preferencia de la apariencia frente a la velocidad.

Modo de Ventana: Opciones para la reproduccin dentro de las ventanas de Windows: Ventana: Se reproduce la pelcula en la ventana de la web en la que est insertada. Opaco sin Ventanas: Hace que los objetos situados en capas situadas detrs de la pelcula no se vean (en pginas DHTML). Transparente sin Ventanas: Es el opuesto al anterior. Permite que los objetos situados detrs se vean.

Alineacin HTML: Posicin relativa de la pelcula dentro de la pgina web HTML. Tenemos varias opciones: Predeterminada: Centra la pelcula en la pgina. Si no cabe se cortan los extremos. Izquierda: Alineacin a la izquierda. Tambin se recortan los bordes si no cabe. Derecha: Alineacin a la derecha. Superior: Alineacin en el borde superior de la pgina. Inferior: Alineacin en el borde inferior de la pgina.

Escala: Si hemos especificado el tamao en pxeles o en tanto por ciento, podemos decirle a Flash cmo distribuir la pelcula en el rectngulo que hemos decidido que la contenga: Predeterminada: Se ve toda la pelcula guardando las proporciones originales. Sin Borde: Recorta (en caso de que la pelcula sea ms grande que el rectngulo) todo lo que sobre con el fin de mantener las proporciones.

Ajuste Exacto: Distorsiona las proporciones si es necesario para conseguir que la pelcula ocupe el rectngulo completo.

Alineacin Flash: Se hace necesario alinear la pelcula cuando esta no tiene las mismas dimensiones que el rectngulo definido. Las opciones son: Alineacin Horizontal: Podemos escoger entre Centro, Izquierda o Derecha. Alineacin Vertical: Podemos escoger entre Centro, Superior o Inferior.

Mostrar Mensajes de advertencia: Permite que se muestren los posibles mensajes de error de cdigo Action Script Unidad 17.

Introduccin a ActionScript (I)

Qu es el ActionScript?
El ActionScript es el lenguaje de programacin que ha utilizado Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash MX. A grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash MX todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una pelcula Flash. Absolutamente de todo. Sin embargo, en estos dos temas slo vamos a ver una pequea introduccin a ActionScript que servir para sentar las bases que permitirn empezar a trabajar con ActionScript. Ensear a programar con ActionScript requerira otro curso completo.Profundizar en el conocimiento de este lenguaje queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda incluida en FlashMX.

Caractersticas generales del ActionScript Como ya hemos comentado, el ActionScript es el lenguaje de programacin propio de Flash, tal y como el Lingo lo es de Macromedia Director, por ejemplo. El ActionScript est basado en la especificacin ECMA-262. El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no har falta crear un programa completo para conseguir resultados, normalmente la aplicacin de fragmentos de cdigo ActionScript a los objetos existentes en nuestras pelculas nos permiten alcanzar nuestros objetivos. El ActionScript es un lenguaje de programacin orientado a objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc... aunque, evidentemente no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores... El ActionScript presenta muchsimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarn muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaa al Flash MX. En la mayor parte de las ocasiones, no ser necesario "programar" realmente, Flash MX pone a nuestra disposicin una impresionante coleccin de "funciones" (de momento entenderemos "funciones" como "cdigo ActionScript que realiza una funcin determinada") ya implementadas que realizan lo que buscamos, bastar con colocarlas en el lugar adecuado.

Vamos a ver muchas de estas funciones en este curso, pero antes recomendamos tener claros ciertos conceptos relacionados con la programacin. Para ello, chadle un vistazo a

nuestro tema bsico.

El Panel Acciones
En Flash MX, el Panel Acciones sirve para programar scripts con ActionScript. Esto es, que todo lo que introzcamos en dicho Panel se ver reflejado despus en nuestra pelcula. Debemos tener claro desde un principio que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de modo que el cdigo ActionScript introducido afectar tan slo a aquello a lo que referencia el Panel. Por ejemplo, en la imagen inferior, se puede distinguir que el Panel Acciones hace referencia al Fotograma 1 de la Capa 'Acciones'. El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda facilitada por Flash que nos da acceso de un modo rpido y muy cmodo a todas las acciones, objetos, propiedades etc... que Flash tiene predefinidos. Estos elementos estn divididos en carpetas, que contienen a su vez ms carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra disposicin. Para insertarlos en nuestro script bastar con un doble clic sobre el elemento elegido. Posteriormente veremos con detalle los distintos elementos de este Panel.

A la parte derecha tenemos el espacio para colocar nuestro script, aqu aparecer lo que vayamos insertando. Tambin incluye herramientas de utilidad, como la bsqueda de palabras, la posibilidad de insertar puntos de corte, el cambio modo normal / experto y la ayuda de Flash para ActionScript. El Panel Acciones tiene 2 modos de edicin: Modo Normal: que nos permitir insertar las Acciones situadas a la izquierda del Panel. Cuando un script requiera de parmetros, Flash MX nos los pedir mediante una casilla de introduccin de texto. Simplemente deberemos introducir los datos que queramos en las casillas correspondientes. Con el Modo Normal activo no es posible cometer errores de Sintaxis, debemos tener muy en cuenta, que un script con errores de sintaxis NO PROVOCAR NINGUNA ACCIN Modo Experto: El modo experto es el idneo cuando ya tenemos experiencia programando con ActionScript, tpicamente cuando ya no comentamos errores de Sintaxis y conozcamos bien las Acciones y Opciones que nos suministra Flash. La libertad de este modo es total y por tanto, tambin lo es la posibilidad de comenter fallos, para asegurarnos de que nuestro script es correcto, al entrar en Modo Experto nos aparecer un icono con el siguiente aspecto: Al pulsarlo Flash revisa nuestro cdigo en busca de posibles errores, indicndonos, en su caso, la lnea que presente el error y en qu consiste ste. Es un fallo comn pasarse horas buscando porqu nuestra pelcula no funciona

correctamente y que el motivo sea que un error de sintaxis ha invalidado todo el cdigo existente en un fotograma, que actua como si no hubiera NADA DE CDIGO en l. Pongamos pues, mucha atencin en esto y revisemos el cdigo concienzudamente. Para pasar del Modo Normal al Modo Experto hacer clic en la esquina superior derecha del panel, en el icono con tres lineas y un tringulo, se abrir un deplegable donde podremos elegir Modo Experto.

Unidad 17.

Introduccin a ActionScript (II)

Los operadores
Entrando un poco ms a fondo en la sintaxis y el manejo del ActionScript, vamos a comenzar hablando de los operadores, por ser la parte ms elemental de una accin de ActionScript (y de muchsimos otros lenguajes de programacin).

Un operador es un tipo de carcter que realiza una accin especial dentro de una expresin de ActionScript. Una expresin no es ms que un conjunto de operadores, variables y constantes relacionados entre s de un cierto modo. Flash MX sacar un resultado de toda expresin que encuentre en nuestra pelcula. Por ejemplo: x = 3 ; --> Es una expresin cuyo resultado ser asignarle a la variable ' x ' el valor 3 (que es una constante) y = 5 + x ; --> Es una expresin cuyo resultado ser asignarle a la variable ' y ' la suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque le hemos asignado este valor antes). Por tanto, el resultado de esta expresin es asignarle a ' y ' el valor 8 (3 + 5).

Flash nos permite usar multitud de operadores, vamos a comentar los ms comunes. El lector puede acceder a los dems (y a estos) desde el Panel Acciones en la carpeta Operadores. Vamos a clasificar los operadores tal y cmo lo hace Flash MX.

Operadores Aritmticos + : Suma. Este operador sirve, como es de esperar, para sumar 2 valores. - : Resta. Realiza la operacin esperada de restar 2 valores.

* : Multiplicacin. Realiza el producto de 2 valores / : Divisin. Es la clsica operacin de dividir. Al contrario que en algunos lenguajes de programacin, este operador s que realiza la divisin completa (incluyendo decimales) % : Operador Resto. Este operador, no muy conocido en matemtica, es un clsico de la programacin. Devuelve el resto entre 2 nmeros. Ejemplo: 4 % 3 = 1, 4 % 2 = 0.

Operadores de Asignacin = : Igual. Este es el operador ms importante de esta categora y sin duda, uno de los ms usados. Almacena el valor situado en la parte derecha de una expresin en la variable situada en la parte izquierda. Ej: x = 2 + 3. Almacena en la variable x el valor de (2 + 3). El resto de operadores de esta categora son en realidad formas de realizar varias operaciones de una vez, describiremos uno a modo de ejemplo, el resto funcionan exactamente igual. += : MsIgual. Este operador asigna a la expresin situada a la izquierda del operador el valor resultante de sumar la expresin situada a la parte derecha con la expresin de la parte izquierda. Ejemplo: (Suponemos que x = 4 e y = 3) entonces, la expresin x += y provocara que x pasase a valer el resultado de sumar ( 3 + 4 ). Por tanto, la expresin x += y es equivalente a hacer: x = x + y.

Operadores de Comparacin == : Probar Igualdad. Este operador sirve para comprobar si 2 expresiones son iguales. Si lo son, el valor de la expresin de comparacin es 'true', que significa 'verdadero'. Por motivos semnticos, decir que una expresin es true es equivalente a decir que vale 1. Si no son iguales, devuelve 'false' (falso) o el valor 0. Esta posibilidad de comprobar si una expresin es igual a otra, nos ser muy til para comprobar muchas cosas durante nuestra pelcula y en funcin de ellas, hacer unas cosas u otras. Pondremos un ejemplo, imaginemos que le pedimos a un usuario que introduzca su edad en un campo de texto de nuestra pelcula flash. A ese campo le llamamos "edad_usuario". Le hacemos pulsar un botn "Continuar" y en ese momento comprobamos su edad, si tiene 20 aos, le decimos una cosa, de lo contrario, le decimos otra distinta. Bastara con hacer algo as:

if ( edad_usuario == 20 ) { dar_mensaje_1; } else { dar_mensaje_2; }

Aqu lo que estamos diciendo es lo siguiente: "Si edad_usuario es igual a 20, entonces damos el mensaje 1, sino lo es, damos el mensaje 2. El significado de 'if' y 'else' lo veremos ms adelante, de modo que no nos preocupemos por no entender perfectamente el cdigo escrito arriba. Tambin faltara, lgicamente, crear las funciones "dar_mensaje_1" y "dar_mensaje_2".

> : Mayor que. Devuelve como resultado verdadero (1) si la expresin de la izquierda es mayor que la de la derecha. De lo contrario, devuelve false (0). < : Menor que. Devuelve como resultado verdadero (1) si la expresin de la izquierda es

menor que la de la derecha. De lo contrario, devuelve false (0). >= : Mayor o igual que. Devuelve como resultado verdadero (1) si la expresin de la izquierda es mayor o igual que la de la derecha. De lo contrario, devuelve false (0). <= : Menor o igual que. Devuelve como resultado verdadero (1) si la expresin de la izquierda es menor o igual que la de la derecha. De lo contrario, devuelve false (0). != : Probar Desigualdad. Devuelve como resultado verdadero (1) si la expresin de la izquierda es diferente a la de la derecha. De lo contrario, devuelve false (0). Ejemplo: 3 != 4 provocara que la expresin total valdra 1 (true o verdadero). Pues 3 es, efectivamente, distinto de 4.

Otros Operadores ( ) : Parntesis. Sirven, como es de esperar, para agrupar trminos y dar preferencias en las operaciones (al igual que en las matemticas). Tambin se usa, como ya vimos, para pasar parmetros a funciones o acciones. (stos deben ir entre parntesis) " " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de caracteres, por lo que las funciones y acciones que afectan exclusivamente a las cadenas de caracteres pasan a afectar tambin al elemento entre comillas. As por ejemplo, mientras que x representa una variable con un valor determinado, si escribimos "x", estamos escribiendo en realidad el carcter o la letra "x". Por tanto, podremos aadirlo a una palabra, compararlo con otras letras, escribirlo por pantalla etc.. pero ya no ser una variable.

El resto de operadores no se usan tanto, su funcionalidad y definicin puede consultarse en la propia ayuda de Flash MX Unidad 17.

Introduccin a ActionScript (III)

Las Acciones
Las Acciones son funciones predefinidas de ActionScript, es decir: Flash MX las crea, y nosotros slo tenemos que usarlas de la manera que se nos indica. No tenemos que definir las funciones ni nada por el estilo, ni siquiera necesitamos saber cmo estn hechas... Lo importante es que estn listas para usar, lo que facilita el uso de este lenguaje de programacin y sobre todo, haga muy rpido comenzar a programar. Al igual que en el caso anterior, explicaremos las Acciones ms importantes. Para una referencia ms completa, recomendamos mirar la ayuda del programa.

Definiremos las acciones escribiendo su cabecera (nombre + parmetros con un nombre genrico) para despus explicar qu es cada parmetro.

Acciones - Control de Pelcula Estas acciones se emplean, como su nombre indica, para controlar el flujo de nuestra pelcula, esto es, para indicar a Flash en todo momento qu fotograma tiene que mostrar, cundo tiene que parar, dnde seguir etc... Vemoslas y lo entenderemos mejor: gotoAndPlay / goto: Esta accin ser, probablemente la que ms useis durante la realizacin de vuestras pelculas. La accin que realiza consiste en mover la cabeza lectora al fotograma que le indiquemos. La cabeza lectora es lo que determina qu fotograma de nuestra pelcula se est reproduciendo en cada momento. Si, por ejemplo, lo movemos del fotograma 1 al 25, lo que veremos instantneamente ser el fotograma 25 y la pelcula continuar reproducindose a partir de ah.

Uso: gotoAndPlay(escena, fotograma): escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles. fotograma: Nmero o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre, debe ir entre comillas dobles, si es un nmero, NO. Ejemplo: gotoAndPlay("Escena2", 7); --> Esta accin lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2".

Play: Da comienzo a la reproduccin de la pelcula, generalmente porque algo la ha detenido. Uso: Play(); No tiene Parmetros.

Stop: Detiene la reproduccin de la pelcula. Se puede usar en un fotograma, cuando queramos detenernos en l (porque es un men, por ejemplo), en un botn, (para que detenga la pelcula) etc... Uso: Stop(); No tiene Parmetros.

Acciones - Navegador / Red Estas acciones tiene diversas funciones, describimos las ms importantes: fscommand: Esta accin, es capaz de ejecutar ciertos comandos muy potentes. Lo ms cmodo es pasar a Modo Bsico (sino estbamos ya) e insertarla, nos aparecer una pestaa con los posibles comandos que admite: - fullscreen : Si se activa pone nuestra pelcula a pantalla completa. Muy til para presentaciones en CD-Rom, por ejemplo. - allowscale: Controla el redimensionamiento de los objetos insertados en la pelcula cuando el usuario estira los bordes de la misma (o de la pgina web en la que se encuentre) Queremos mantener las proporciones? Este comando nos permite controlarlo. - showmen: Si has visto el men que aparece al pulsar el botn derecho del ratn sobre una pelcula Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese que los usuarios puedan moverse a sus anchas por nuestra pelcula. Ejecutando esta sentencia del modo adecuado (false), podremos ocultarlo. - trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproduccin de nuestras pelculas.

Todas estas alternativas, comparten modo de uso, vemoslo: Uso: fscommand("comando","true / false")

comando: El comando a ejecutar (fullscreen, allowscale, etc...) true / false: Aqu debemos escribir true o false, segn queramos desactivar la opcin o activarla. Ejemplo: fscommand("fullscreen", "true"); -> Activa la pantalla completa.

getURL: Esta accin se emplea para abrir el navegador web y abrir la pgina web que deseemos. Uso: getURL(url , ventana , "variables") url: Direccin web a la que queremos acceder (se abrir una ventana). ventana: Parmetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...) variables: Parmetro OPCIONAL, puede haber varios. Si la pgina lo permite (es ASP, PHP etc...) podemos enviarle variables. Ejemplo: getURL("http://www.aulaclic.com", "_blank"); loadMovie / loadMovieNum: Esta accin permite cargar nuevas pelculas Flash o imgenes en nuestra pelcula de forma dinmica (la pelcula se cargar cuando se lo indiquemos, y no antes). Uso: loadMovieNum(url , nivel / destino, variables) url: Direccin absoluta donde est situada la pelcula SWF o la imagen JPEG nivel / destino: Nivel donde cargaremos la pelcula, teniendo en cuenta que el nivel bsico es el 0, luego va el 1 y as sucesivamente. Cada nivel superior se sita delante del anterior y toma el control. Si lo usamos como destino, aqu deberemos introducir el nombre del movieclip donde cargaremos la pelcula o el nombre del marco si estamos cargando un fichero SWF en una pgina HTML con marcos. variables: Parmetro OPCIONAL. Podemos enviar variables. Ejemplo: loadMovieNum("MiPeli2.swf", 0) --> Cargamos la pelcula "MiPeli2.swf" en el nivel principal. No enviamos variables.

Acciones - Condiciones Estas acciones sirven para controlar la lgica de la pelcula. Se puede decir que nos permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas situaciones. Por ejemplo, ahora que conocemos muchas Acciones, Cmo indicarle a Flash que "si la variable x = 3, entonces vaya al fotograma 5, y sino, vaya al fotograma 10"?. Sabemos comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto, haz una cosa, y sino, haz la otra...". Veamos cmo decrselo: if ... else: Si partimos de que la traduccin literal de if es "si..." y la de else es "sino ...", nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa una condicion) {haz esto} sino {haz lo otro}" Veamos antes que nada su Uso para comprenderlo mejor:

Uso: if (condicin) {sentencias1 ... } else {sentencias2 ... } if: Indica que accin que viene a continuacin es una condicional condicion: Indica una condicion que DEBE cumplirse para que sucedan las acciones indicadas en "sentencias1". Si stas no se cumplen, entonces lo que sucede es lo especificado en las acciones indicadas en "sentencias2". Para que una condicin se cumpla, debe tener como resultado true, o lo que es lo mismo, verdadero, o lo que es lo mismo, 1. De ah la importancia de los operadores de comparacin y el valor que devuelven. sentencias1: Conjunto de acciones que sucedern si la condicin se evala como verdadera. Si hay ms de 1, deben incluirse todas ENTRE LLAVES else: Especifica la alternativa si condicion se evala a falso. Es OPTATIVO. Sino existe, y no se cumple la condicin, no se har nada, pues no lo hemos especificado. sentencias2: Conjunto de acciones que sucedern si la condicin se evala como falsa. Si hay ms de 1, deben incluirse todas ENTRE LLAVES Ejemplo: if (x == 2) {gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 2, sino, no hacemos nada if (y > 7) { Stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos la pelcula, sino, volvemos al fotograma 1. Unidad 17.

Introduccin a ActionScript (IV)

Los Objetos

Las Objetos, como ya hemos visto en el tema bsico, son instancias de una determinada clase. Esto es, son representantes de una clase ya definida. As, son objetos, por ejemplo, un botn, un clip de pelcula, un grfico o un sonido ... es decir, que prcticamente TODO es un OBJETO en Flash MX Vamos a ver los objetos ms usados en Flash y una breve descripcin de cada uno de ellos. Como ya se ha explicado en el tema bsico, cada objeto tiene una serie de Propiedades (que veremos despus) y unos Mtodos y eventos, que dan funcionalidad a los objetos. Cuando un componente de Flash pasa a ser un objeto, automticamente pasa a tener todas las propiedades definidas por Flash para ese objeto y pasa a reaccionar ante los Mtodos y eventos que tiene definidos. Podeis encontrar una lista con todas las propiedades, mtodos y eventos de los objetos en el Panel Acciones.

Objeto "Button" (Botn) Los objetos de tipo Botn tienen 4 estados, como ya se ha visto en el captulo correspondiente y reaccionan ante mtodos especiales como "OnRollOver", "OnPress" ... que permitirn que sucedan cosas cuando el usuario haga clic sobre estos botones, pase el ratn por encima etc... Cuando nos interese que una imagen que hayamos diseado se comporte como un botn, bastar convertirla a botn (del modo visto en el captulo correspondiente) y ya podremos usar los eventos tpicos de un botn. Objeto "MovieClip" (Clip de Pelcula) Cuando necesitemos crear una pelcula Flash dentro de otra pelcula, pero no queramos tener 2 ficheros separados ni molestarnos en cargar una pelcula u otra, deberemos crear un objeto movieclip. Entre sus propiedades especiales destaca que los objetos "clip de pelcula" tienen, internamente, una lnea de tiempos que corre INDEPENDIENTEMENTE de la lnea de tiempos de la pelcula principal de Flash, lo que nos permite crear animaciones tan complejas e independientes como queramos (podemos crear tantos clips de pelcula dentro de otros como queramos, por ejemplo). Objeto "Sound" (Sonido) Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en los fotogramas, al igual que haramos con un botn o un clip de pelcula. Deberemos controlarlos, por tanto, desde el Panel Acciones y usando ActionScript. Tienen multitud de mtodos especiales, muy potentes y tiles, podemos parar un sonido, crear un bucle, darle efectos sonoros etc... Podramos, por ejemplo, crear un objeto de tipo sonido y despus hacer que al pulsar un botn suene. (En el tema siguiente se ver algn ejemplo de uso de sonidos). Objeto "Mouse" (Ratn) El objeto mouse es uno de los objetos de Flash que ya est definido por Flash, pues hace referencia al ratn de Windows (al que manejar el usuario que vea nuestra pelcula). Si lo usamos, podremos acceder a las propiedades del ratn de Windows, tipo de cursos, efectos asociados, deteccin de su posicin etc... Vale la pena insistir en que su manejo NO es anlogo al de otros objetos como el botn, pues podemos crear tantos botones como queramos y hacer con ellos lo que decidamos, pero el objeto Mouse es nico y acta sobre el ratn del PC del usuario que vea nuestra pelcula. Se puede decir que es un objeto "externo" que permite que otras partes del Sistema Operativo interacten con nuestra pelcula Flash. Por tanto, es muy potente. Objeto "Math" (Matemticas)

Es uno de los mltiples objetos "abstractos" de Flash, ni es visual, ni parece que corresponda a nada existente en el sistema (como el objeto "Mouse"). Su funcin es muy importante, pues nos permite usar frmulas matmticas de modo muy sencillo. En el tema siguiente veremos algn ejemplo de su uso. Objeto "String" (Cadena) Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas son secuencias de caracteres. Si definimos una secuencia de caracteres como objeto de tipo String, podremos usar los mtodos que Flash implementa sobre ellas: Seleccionar subcadenas de letras, buscar una determinada letra en una palabra, convertir la palabra a letras maysculas y un largo etc...

Las Propiedades

Los Mtodos suelen ser especficos de cada objeto, y su estudio requerira un nuevo curso completo, (recomendamos consultar la ayuda incorporada en el Flash MX cuando surjan dudas), pero hay bastantes propie de los objetos que son comunes a muchos de ellos. Vamos a ver cules son las ms usadas y qu representan.

Para usar las propiedades, se debe colocar el nombre del objeto seguido de un punto ( . ) y despus la propied valor. Las propiedades siempre comienzan con un guin abajo ( _ ). Algunas propiedades se pueden escribir sin nombre del objeto al que hacen referencia delante, en ese caso, harn referencia a la pelcula principal. _alpha

Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir como la no-transparencia. modo que un 100% de transparencia equivale a un 0 de opacidad, o a un 0 de alpha. _framesloaded

Son los fotogramas de un clip de pelcula o de la pelcula principal que el sistema lleva cargados en memoria. ( usa sin nombre de objeto delante obtenemos los fotogramas cargados de la pelcula principal). Muy til para crea cargadores o "preloaders" _totalframes

Devuelve la cantidad de fotogramas que contiene el clip de pelcula al que hace referencia. Si se emplea sin ni nombre delante, nos devuelve la cantidad de fotogramas de la pelcula Flash actual. Tambin usado en la creaci cargadores (en el tema siguiente veremos cmo estas propiedades) _height

Devuelve la altura del objeto en pxeles. Por ejemplo, si tenemos un clip de pelcula llamado "Clip1" y escribimo

"Clip1._height" obtendremos la altura de Clip1. Del mismo modo, podemos cambiarla sin ms que hacer: Clip1._h 100; (la altura del Clip1 pasara a ser de 100 pxeles) _width Propiedad idntica a la anterior, pero devuelve la anchura. _visible

Determina si el objeto est o no visible en nuestra pelcula. Cuando vale 1, lo est, cuando vale 0, pasa a ser in Es muy til para hacer desaparecer partes de una pelcula en un momento determinado. Por ejemplo, si queremo al pulsar un botn desaparezca el clip de pelcula llamado "Clip2", haremos esto: .... ... Clip2._visible = 0; ... .... _x

Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las X. Sirve para averiguar la po o para asignarla de forma dinmica (durante la ejecucin de nuestra pelcula Flash) _y

Con esta propiedad obtenemos las coordenadas del objeto respecto del eje de las X. Sirve para averiguar la po o para asignarla de forma dinmica (durante la ejecucin de nuestra pelcula Flash) unidad 17.

Nivel Bsico. Conceptos Iniciales de Programacin

Introduccin a la Programacin con ActionScript


Si bien hemos catalogado este tema como "bsico", la palabra adecuada sera "necesario". pues si bien el objetivo de este tema NO es ensear programacin, no podemos pasar por alto que ciertos conceptos relacionados con ella deben conocerse para poder llegar a entender el ActionScript. Vamos pues a explicar algunos conceptos fundamentales, necesarios para abordar la programacin mediante ActionScript. Script: Cdigo escrito en cualquier lenguaje de programacin que realiza una tarea determinada. As por ejemplo, el cdigo ActionScript necesario para que al pulsar un botn de Flash pasemos al fotograma siguiente es un script. Variable: Vamos a explicar la interpretacin del trmino variable en programacin mediante un ejemplo sencillo. Si tenemos la expresin: x = 3;

Tenemos que x es una variable que toma el valor 3. Se llama variable precisamente porque puede cambiar de valor en cualquier momento durante la ejecucin de nuestra pelcula Flash. Todos los datos que se manejan normalmente son variables (salvo aquellos constantes, por ejemplo el nmero 3). As, en un formulario, el nombre es una variable (de tipo cadena de caracteres o string), el apellido tambin, la direccin, el telfono etc... Expresin / Sentencia: Conjunto de operadores, constantes, variables o acciones. Provocan un resultado o una accin determinada y SIEMPRE deben ir terminados por ' ; ' (punto y coma). Funcin: Una funcin es una porcin de cdigo (ActionScript en nuestro caso) que tiene un nombre determinado y que realiza una labor concreta. Ejemplo, la siguiente definicin de funcin: function IncrementaX(x) { x = x + 1; } Realiza la funcin de tomar la variable "x" y sumarle uno a su valor. Si quisiramos ejecutarla en algn lugar de nuestra pelcula, bastara con escribir: "IncrementaX(x)", siempre y cuando la definicin de la funcin (que es el cdigo mostrado arriba) est en cualquier parte de la pelcula que se ejecute ANTES que la llamada a la funcin.

Accin: Flash llama Accin a funciones que l mismo ha implementado y que no requieren ser definidas para ser usadas. Basta por tanto, con escribir la llamada a la funcin. Estas acciones son lo que usaremos la mayora de las veces, pues resultan sumamente fciles de usar y muy potentes. Las acciones aparecen en el Panel Acciones y se pueden insertar en nuestro cdigo con un simple clic de ratn. Por ejemplo "gotoAndPlay(3)" es una accin que provoca que Flash pase a ejecutar el fotograma 3. Ahora que entendemos qu son las funciones, deberemos comprender tambin, que en alguna parte, Flash ha definido la funcin "gotoAndPlay" (tal y como hemos hecho nosotros anteriormente con la funcin "IncrementaX") y ha escrito un cdigo que provoca el efecto ya comentado. Por suerte todo esto no nos debe preocupar, Flash MX se encarga de todo. Nos basta con conocer las acciones y saber cmo usarlas. Parmetro: Un parmetro es una variable que entra o sale de una accin o de una funcin. Ponemos un ejemplo para clarificar esta definicin: Tenemos la siguiente definicin de funcin:

function Suma5(p_entrada, p_salida) { p_salida = p_entrada + 5; }

Imaginemos que tenemos una variable x que vale 7 y otra variable y que queremos que valga 7 + 5. Ejecutaramos la funcin "Suma5" del siguiente modo: Suma5( x , y ). Vamos a ver qu hace exactamente la funcin con los parmetros x e y. Al ejecutar "Suma5( x , y)", Flash busca definiciones de funciones que se llamen Suma5, enseguida encontrar la definicin que hemos escrito arriba, (que deber estar escrita en alguna parte de nuestra pelcula ANTES de ejecutar "Suma5( x, y )"). Cuando lo hace, comprueba que la funcin que ejecutamos COINCIDE con la cabecera de la definicin, esta cabecera abarca el nombre de la funcin y todo lo que venga a continuacin hasta que se cierre el parntesis. En nuestro caso, la cabecera sera "Suma5(p_entrada, p_salida)" Aqu viene la pregunta inminente, Coinciden?. La respuesta es S, para que coincidan DEBE coincidir el NOMBRE de la funcin y el nmero de parmetros, que sern variables o valores separados por comas. Como tenemos 2 parmetros en cada parte, todo coincide y pasa a ejecutarse la funcin. La funcin ejecutada es "Suma(x , y)", por lo que lo que en realidad se ejecutar ser:

function Suma5(x, y) { y = x + 5; }

Tras ejecutarse esta funcin, y valdr lo que valiese x mas 5. Es lo que queramos. La variable 'x' ha actuado como parmetro de entrada, pues aporta un dato a la funcin, el valor 'y' comienza entrando en la funcin, pero es un parmetro de salida porque ha sido modificado DENTRO de la funcin. Programacin Orientada a Objetos (POO): ActionScript es un lenguaje orientado a objetos, esto quiere decir que la informacin se organiza en grupos denominados clases. Cuando queremos emplear una clase en nuestra pelcula, usamos una instancia de ella, denominada OBJETO. Los objetos, y por tanto, las clases, tiene Propiedades

(caractersticas) y Mtodos (comportamientos). Pongamos 2 ejemplos para clarificar esto: - El objeto Persona tiene: - Propiedades: Nombre, edad, altura ... - Comportamientos: hablar, correr, saltar ... - El objeto Clip de Pelcula tiene: - Propiedades: color, anchura, altura ... - Comportamientos: gotoAndPlay, Stop, Play, LoadMovie ... Evidentemente el primer objeto es meramente didctico, el segundo objeto es un objeto de Flash (salvo que las propieades estn definidas en ingls), y probablemente el ms importante...

Los objetos los podemos encontrar tambin en el Panel Acciones, su uso es sencillo. Veamos un ejemplo: Tenemos el objeto Clip1, que es una instancia de la Clase MovieClip y por tanto, tiene sus mismas Propiedades y Mtodos. - Clip1._height = 20; Con la lnea anterior, estamos diciendo a Flash que el objeto Clip1 tiene una altura de 20 (inmediatamente Flash la modificar en el fotograma en el que se encuentre). La sintaxis de Flash establece que debe existir el separador "._" , no vale la pena entrar a describir el porqu. Siempre ser as, no lo olvidemos. - Clip1.Play(); Esta accin ejecutar el mtodo Play, que pertenece a los Clips de Pelcula, provocar que se comience a ejecutar la lnea de tiempos del Clip1. Ntese que aqu no hay "_" como separador, slo un "." Ya conocemos los conceptos "bsicos" de Flash MX. Si pensamos en que, con slo 1 lnea podemos modificar la altura de un objeto de nuestra pelcula DURANTE LA EJECUCIN DE LA MISMA (y no mientras la crebamos como hasta ahora), podremos hacernos una idea de lo que nos permitir el ActionScript ... Podremos dar vida a nuestras animaciones y conseguir una interactividad total con el usuario. Podremos conseguir una pelcula completamente multimedia.

El conocimiento y comprensin de estos conceptos no es un requisito para comenzar a programar con ActionScript, programar por intuicin es una prctica muy comn en este tipo de lenguajes. En este curso recomendamos saber lo que se est haciendo en todo momento y conocer bien qu es cada cosa, y pensamos que hacer un esfuerzo inicial nos gratificar constantemente durante nuestro aprendizaje de ActionScript, pues con todo lo anterior claro y un poco de trabajo, pronto pasaremos a ser programadores expertos y en ese momento la intuicin deja de ser til...