Unidad 1.

Introduccin a Flash 8

(I) Qu es FLASH? Flash 8 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 8 en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash 8. Desde la web de Macromedia te puedes descargar una versin de evaluacion de Flash 8 vlida para 30 das. Los logotipos de Flash son propiedad de Macromedia. Por qu usar FLASH 8? Las posibilidades de Flash son extraordinarias, cada nueva versin ha mejorado a la anterior, y el actual Flash 8 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 MX 2004 a Flash 8 Hay compaas que lanzan mejoras en sus productos por pura necesidad econmica; Cuando sucede esto, los usuarios lo notamos rpidamente por las pocas mejoras ofrecidas por las nuevas versiones. No es este el caso de Flash 8, que continua con la costumbre de Macromedia de aplicar considerables mejoras a las nuevas versiones de sus productos ...

Si pensabais que Flash MX 2004 era ya insuperable, no os perdais las mejoras que aporta Flash 8: Mejoras en cuanto a facilidad de manejo, mayor potencia grfica y de integracin con programas de edicin de imgenes, facilidad para importar vdeo, posibilidad de emular tus pelculas dirigidas a dispositivos mviles y para los menos avanzados, se recupera el asistente de ActioScript que haba desaparecido en la versin

anterior... Analicemos estas ventajas y otras muchas con un poco ms de detalle:

Diseos ms atractivos: Flash 8 permite el uso de efectos visuales que nos facilitarn la creacin de animaciones, presentaciones y formularios ms atractivos y profesionales, as mismo, pone a nuestra disposicin mecanismos para hacer este trabajo ms cmodo y rpido, tales como la existencia de filtros y modos de mezcla aadidos en esta versin. Optimizacin de fuentes: Incorpora tambin opciones de legibilidad para fuentes pequeas, haciendo la lectura de nuestros textos ms agradables y de alta legibilidad. Adems de poder modificar la optimizacin, Flash permite tambin la seleccin de configuraciones preestablecidas para textos dinmicos y estticos. Bibliotecas integradas: Ahora podemos buscar rpidamente cualquier objeto existente en nuestras pelculas, navegando por las bibliotecas de todos los archivos abiertos desde un nico panel. Mayor potencia de animacin: Flash 8 permite un mayor control de las interpolaciones habilitando un modo de edicin desde el que se podr modificar independientemente la velocidad en la que se apliquen los diferentes cambios de rotacin, forma, color, movimiento, etc, de nuestras interpolaciones. Mayor potencia grfica: Evita la repeticin innecesaria de la representacin de objetos vectoriales simplemente sealando un objeto como mapa de bits. Aunque el objeto se convierta al formato de mapa de bits, los datos vectoriales se mantienen tal cual, con el fin de que, en todo momento, el objeto pueda convertirse de nuevo al formato vectorial. Mejoras en la importacin de vdeo: Para facilitar el resultado con formatos de vdeo, Flash 8 incluye un cdec independiente de calidad superior capaz de competir con los mejores cdecs de vdeo actuales con un tamao de archivo mucho ms pequeo. Adems de una gran posibilidad de revestimientos para los controles de ste en nuestra pelcula. Compatiblidad Metadatos: Incluye tus SWF en buscadores de internet con la nueva caracterstica de definicin de archivo con un ttulo, una descripcin y/o palabras clave para que los motores de bsqueda reflejen con ms precisin el contenido representado por el archivo. Emulador para dispositivos mviles: Prueba tus pelculas destinadas a dispositivos mviles compatibles con Flash Lite con el nuevo emulador que incorpora Flash 8. Podrs probar tus pelculas de un modo eficiente antes de publicarlas. Asistente de ActionScript: El Asistente de ActionScript ha vuelto. Fue eliminado en la versin anterior, pero se ha vuelto a recuperar, y de forma mejorada, en esta ltima. Ahora ActionScript al alcance de tu mano. Las alternativas a Flash 8. 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 8. Para ver unos ejemplos de usos de Javascript y sus cdigos, visita nuestra Pgina Avanzada Las alternativas a Flash 8. 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.

Por qu no usarlas dentro de Flash? Pues porque esto no estaba contemplado en las anteriores versiones de Flash. Desde la versin 2004 (Flash 8) las hojas de estilo son perfectamente compatibles con Macromedia Flash, simplemente porque pueden asociarse con textos empleados dentro de nuestra pelcula sin ms que asignar la hoja de estilo que queramos a la propiedad StyleSheet del objeto texto al que queramos aplicar la hoja de estilo. Por tanto, las CSS han dejado de ser una alternativa al uso de Flash y han pasado a quedar integradas dentro del mismo. Otra ventaja de usar Flash. Las alternativas a Flash 8. DHTML. AJAX. 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... Asynchronous JavaScript and XML, o Ajax, es una nueva tcnica de programacin para crear interactividad en la web formada por la combinacin de varias tecnologas ya conocidas: - XHTML (o HTML y CSS para dar formato y estilos). - DOM ( Document Object Model) para manipular la informacin presentada de forma dinmica e interactiva a travs de JavaScript. - El objeto XMLHttpRequest para intercambiar datos de forma asncrona con el servidor web. 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 dos 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
2Advanced Studios NRG Ikea

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 8 (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 2.

Mi primera Animacin

Flash Comenzando Una de las caractersticas principales de Flash 8 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 8 Flash 8 cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva. Adems, tiene la venta 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 8 por primera vez:

A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash 8 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. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edicin) que hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o ejecutar los que ya tengamos. Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula. Reproducir, Rebobinar, Probar Pelcula .... Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos directos a TODOS los Paneles. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Macromedia, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc... Ejercicio. Unidad 3. Crear Gua de Dibujo. Cuadrculas

Objetivo. Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no saldr en la pelcula) y que nos servir como gua para poder dibujar objetos de forma exacta y precisa. Ejercicio paso a paso. 1 Pulsa en el men Archivo. 2 Selecciona la opcin Nuevo. 3 Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una pelcula ya empezada, sltate los 2 primeros pasos. 4 Selecciona la opcin Cuadrcula del men Ver. 5 Se desplegar un submen como el de la figura. 6 Selecciona la opcin Mostrar Cuadrcula para hacerlo visible. 7 Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula a tu gusto (tamao, color de fondo...) 8 Selecciona la opcin Ajustes Ajustar a Cuadrcula del men Ver para que los objetos que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlos de un modo fcil. 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

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

color de fondo de toda la pelcula.

Veloc. Fotogramas: O nmero de fotogramas por segundo que aparecern en la pelcula. Unidades de Regla: Unidad que se emplear para medir las cantidades. Transformar en predeterminado: Este botn, propio de la nueva versin de Flash, permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. Estas propiedades por supuesto podrn ser alteradas desde este panel cuando se desee. 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 las funciones de la mayora de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til. Panel Mezclador de Colores: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras de Color: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones). Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy til para alineaciones exactas. Panel Escena: Modifica los atributos de las escenas que usemos. Si an no sabes lo que son las Escenas, te lo explicamos en nuestro tema bsico Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula. Panel Comportamientos: Permiten asignar a determinados objetos una serie de caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a otros objetos de forma rpida y eficaz. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash 8 aporta soporte multi-idioma a nuestras pelculas. Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlo de vista nunca. Panel Explorador de Pelculas: Nos permite acceder a todo el contenido de nuestra pelcula de forma fcil y rpida Ejercicios Tema 3: El Entorno de Flash 8

Ejercicio 1: Crear una Pelcula a nuestro gusto Crea una pelcula que tenga las siguientes propiedades: 1 Un tamao de 300 x 100 px 2 Un color de fondo rojo 3 Un Velocidad de los Fotogramas de 14 fps Ejercicio 2: Estructurar una Pelcula 1 Abre una nueva pelcula 2 Crea 2 Escenas y llmalas E1 y E2 3 Crea 2 capas en cada una. 4 Llmalas E1_1, E1_2 y E2_1, E2_2 Ejercicio 3: Creando Fotogramas 1 Crea en una pelcula nueva 3 fotogramas clave 2 Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto Ejercicio 4: Identificando Fotogramas 1 Dada la siguiente pelcula

Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuerdas para qu sirve cada uno? Ejercicio 5: Paneles 1 Abre el Panel Mezclador de Color. 2 Abre el Panel Acciones. 3 Abre el Panel Alinear. 4 Cierra el Programa Flash 8 5 Vuelve a abrirlo. Qu notas?
nidad 4. Dibujar

y Colorear (I)

El Dibujo en Flash 8 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 Seleccin (flecha): . Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos. permite seleccionar los bordes de los objetos, los rellenos (con un slo clic), los bordes (con doble clic), zonas a nuestra eleccin... Adems, su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar sin ms que seleccionar situar el 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. 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 (semitransparente), 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.
Ejercicios Tema 4: Dibujando

Ejercicio 1: Bandera Olmpica 1 Dibuja 5 aros.

2 Cmbiales los colores. Por ejemplo, los colores de la bandera olmpica (Azul, negro, rojo, amarillo y verde) 3 nelos de modo que parezcan los aros olmpicos. Ejercicio 2: Saturno 1 Dibuja un valo 2 Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo). 3 Crea el aro que le rodea. 4 ne los 2 objetos para que parezca el planeta Saturno Si no tienes muy claro cmo realizarlo, Aqu te ayudamos Ejerecicio explicado Ejercicio 1: Los Aros Olmpicos Vamos a dibujar los aros olmpicos. 1 Seleccionamos la Herramienta valo. 2 Trazamos 5 valos, para que sean perfectamente circulares, mantenemos pulsada la tecla Shift. 3 Una vez estn dibujados, seleccionamos el relleno de cada valo y pulsamos la tecla Suprimir para eliminarlo. (Igualmente podamos haber seleccionado el color "ninguno" y posteriormente creado los valos que hubieran aparecido sin color de fondo) 4 Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionndolo en el Panel Mezclador de Colores. 5 Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona la Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo. Ejercicio 2: Saturno Vamos a dibujar un planeta parecido a Saturno 1 Seleccionamos la Herramienta valo. 2 Creamos un valo 3 Eliminamos el borde, para ello, hacemos clic en l y pulsamos la tecla Suprimir. 4 Seleccionamos el Relleno del valo y abrimos el Panel Relleno.

5 Seleccionamos la opcin Degradado Radial. 6 Pulsamos en y seleccionamos los colores que deseemos, (podemos aadir tantos colores como queramos y probar su efecto). 7 Dibujamos el anillo de saturno, por ejemplo creando otro valo con la forma adecuada. 8 Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por ejemplo, borramos parte del planeta como en la imagen. 9 Solapamos los 2 objetos dibujados, de modo que formen el dibujo que queramos.
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 en el que queramos empezar a escribir. Para saber ms acerca de Cmo escribir textos visita nuestra Pgina Avanzada El Panel Propiedades contiene las principales propiedades de todos los objetos que empleemos durante nuestra pelcula, de modo que si seleccionamos un texto, podremos ver en l todo lo que nos hace falta conocer sobre nuestro texto. Si tenemos experiencia usando Flash 5, notaremos que todas las propiedades que antes se encontraban en los Paneles Carcter y Prrafo, se encuentran agrupadas ahora en el Panel Propiedades.

Panel Propiedades

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

Activar esta casilla provoca que la separacin entre

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

URL: Si queremos que al pulsar sobre nuestro texto, el usuario vaya a una direccin web, nada ms fcil que escribirla ah. Flash la asociar al texto que ests escribiendo en ese momento. Destino: Determina si la URL a la que el texto hace referencia se cargar en la misma ventana del navegador, en una nueva ...

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

Configuracin: Son las clsicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamao.

Otras Propiedades: Dado que Flash trata los textos como objetos, stos tambin tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que lo 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 8" 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 8 ni podrs emplear el resto de herramientas de que dispone. Podeis poner a prueba vuestros conocimientos realizando la:
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.

Para importar un sonido haz clic en el men Archivo Importar Importar a biblioteca.

Se abrir el cuadro de dilogo de Importar a biblioteca. All debers seleccionar en Tipo

de archivo Todos los formatos de sonido. Navega por las carpetas hasta encontrar el archivo de audio que quieras incluir en tu pelcula. Seleccionalo haciendo clic sobre l y haz pulsa el botn Aceptar. El sonido estar listo para usarlo donde quieras, podrs encontrarlo en la Biblioteca (men Ventana Biblioteca).

Propiedades de los Sonidos En Flash 8, al igual que en Flash 8 todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningn sonido, nos daremos cuenta de que no podemos seleccionar nada dicho panel, basta insertarlo para que esto cambie.

Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en algn fotograma de nues pelcula, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:

Veamos las partes que tiene este panel.

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

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

Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si est seleccionado Inicio en vez de Evento y se reproduce otra vez el mismo sonido u otro distinto, lo hace "encima" d sonido actual. Puede ser un efecto muy atractivo, o puede provocar que se forme "ruido" en nuestra pelcula.

Detener: Detiene el sonido seleccionado. Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado, por tanto, si carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de que la pelcula se corta de un modo m brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una pelcula. En esta situacin, es muy recomendable que el sonido y las imgenes estn sincronizadas.

Repetir: Determina el nmero de veces que se reproducir el sonido segn lo que escribas en la caja de t de la derecha. Tambin puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca e bluce hasta llegar al siguiente fotograma clave.

No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que al estar sincronizado los sonidos con las imgenes, provocaramos que las imgenes (y los fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el tamao de la pelcula. 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 As representa Flash los son en Fotograma 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). De este modo insertamos un sonido, pero suena tal y cmo queremos que suene? ... Depende de lo que bu

Por defecto Flash entiende que quieres reproducir el sonido en su totalidad, sino para qu insertarlo entero que Flash reproducir el sonido todas las veces que le hayas indicado en Repetir y el sonido sonar aunque fotograma en el que est no sea el que se est ejecutando en ese instante. Si quisiramos que el sonido pare entremos en otro fotograma, lo podemos hacer de 2 formas distintas, ambas combinando las opciones que n Panel Propiedades.

La primera de ellas es seleccionarlo en la Biblioteca y arrastrarlo directamente sobre el escenario. El sonido al fotograma en el que nos encontramos.

Otra opcin sera la de seleccionar el sonido (ya importado a nuestra biblioteca) desde el panel Propiedades

fotograma seleccionado:

En la opcin Sonido seleccionaramos el audio que queremos aadir al fotograma. Luego modificaramos l Sinc. del siguiente modo:

Si seleccionamos Flujo, el sonido se reproducir hasta llegar al primer fotograma que no lo conteng Podemos seleccionar Stop para marcar un fotograma de modo que el sonido se detenga al llegar a

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).
nidad 6. Trabajar

con Sonidos

(III) Mp3 o Wav?

Como ya se ha comentado, los sonidos que Flash 8 puede importar deben tener las extensiones .wav o .mp3. Si 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 que existen multitud de programas que convierten un sonido con extensin .mp3 a uno .wav y viceversa, por lo que no debe 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 tiempo de descarga. Lo habitual es que los sonidos ocupen ms de la mitad del espacio total y muchas veces no valdr la pena insertarlos... Una vez decididos a insertar el sonido, la lgica nos dice que insertemos el sonido que ocupe un espacio menor en el 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 o ms), 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 sonido resulta estar ya comprimido, no podr volver a comprimirlo (en realidad si que consigue comprimirlo, pero el sonido final 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 formato .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) ocupa 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 .mp3, 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 .mp3, por 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 ser 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 resultado final sea aceptable y sea conveniente quedarnos con la pelcula de menor tamao. Lo mejor es probar ambas versiones y evaluar el resultado. Podeis ver varias pruebas en estas pelculas:

Ejercicios Tema 6: Sonidos

Ejercicio 1: Importar Sonidos 1 Crea una pelcula con 1 fotograma. 2 Localiza un sonido en tu disco duro. 3 Imprtalo a tu pelcula.

4 Comprueba que est disponible en la Biblioteca. Ejercicio 2: Insertar Sonidos 1 Partiendo del ejercicio anterior, inserta el sonido importado en el fotograma 1. 2 Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa CTRL+ ENTER (Esta combinacin de teclas te permite "probar" la pelcula). Ejercicio 3: Trabajar con Sonidos 1 Consigue que el sonido del ejercicio 2 deje de escucharse al llegar la pelcula al fotograma 5. 2 Consigue que vuelva a escucharse en el fotograma 10. Ejercicio 4: Editar Sonidos 1 Modifica tu sonido (usando Flash) de modo que en un principio no se oiga y poco a poco vaya aumentando de volumen. 2 Modifica tu sonido de modo que al final del mismo, parezca que el sonido pasa de un altavoz al otro. Explicacin del ejerecicio
Ayuda Ejercicios Tema 6: Sonidos

Ejercicio 1: Importar Sonidos 1 Creamos la pelcula mediante Archivo Nuevo (por defecto tendremos un nico fotograma). 2 Seleccionamos Importar Importar a Biblioteca, que se encuentra en el Men Archivo. 3 Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos uno archivo vlido de sonido y pulsamos Abrir. 4 El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana Biblioteca) y comprobamos que se encuentra all. 5 Si no se encuentra all, revisaremos los pasos dados, pues algo no hemos hecho bien. Ejercicio 2: Insertar Sonidos 1 Seleccionamos el fotograma en el que queramos insertar el sonido. 2 Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el escenario (hasta el fotograma actual). 2 Pulsamos CTRL + ENTER y el sonido deber escucharse. Ejercicio 3: Trabajar con Sonidos 1 Alargamos el fotograma actual hasta el nmero 4 (insertando fotogramas normales desde el Men Insertar Lnea de Tiempo Fotograma).

2 Insertamos un nuevo fotograma en la lnea de tiempo. En la posicin 5 (desde el Men Insertar Lnea de Tiempo Fotograma Clave). 3 Abrimos el Panel Propiedades y seleccionamos los fotogramas del 1 al 4. 4 En la opcin Sinc seleccionamos Flujo. 5 Acabamos de conseguir que el sonido slo se reproduzca cuando est en los fotogramas indicados. 6 Ahora prolongamos la duracin del fotograma 5 hasta que ocupe 5 fotogramas ms (insertando fotogramas normales). 7 Insertamos un nuevo Fotograma Clave en la posicin 10. 8 Insertamos el sonido en el fotograma 10 del mismo modo que en el ejercicio 2. 9 Debe quedar parecido al grfico: Ejercicio 4: Editar Sonidos 1 Seleccionamos Aumento Progresivo dentro de la pestaa Efecto que se encuentra en el Panel Sonidos. 2 Seleccionamos Personalizar dentro de la pestaa Efecto que se encuentra en el Panel Sonidos. 3 Nos dirigimos al final del sonido y hacemos clic en el canal que queramos modificar (el izquierdo est en la parte superior y el derecho en la inferior). Aparecer un recuadro blanco, lo situamos en su parte ms baja para quitarle el sonido y en su parte ms alta para drselo. Jugamos con los volmenes de ambos canales hasta obtener el efecto deseado. Podemos ir probando cmo queda pulsando el PLAY que acompaa este Panel.
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 el Pincel 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 Seleccin (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 Edicin 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 Alinear. Este Panel lo podemos encontrar en el Men Ventana Alinear. As funciona:

El Panel Alinear permite colocar los objetos tal y cmo le indiquemos. Antes de ver las posibilidades, debemos hacer hincapi en la opcin En Escenario (En Escenar). 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 Escenario, para que los objetos se coloquen segn los lmites de la pelcula, en el centro del fotograma etc... Conozcamos un poco mejor el Panel Alinear 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 Informacin 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 Informacin. A este Panel se puede acceder desde el Men Ventana

 Informacin. 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 Informacin 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 Edicin Editar 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.
Ejercicios Tema 7: Objetos

Ejercicio 1: Rellenos y Bordes 1 Crea dos rectngulos con el interior de color verde y el borde negro. 2 En uno de ellos elimina el Relleno. 3 En el otro, elimina el borde. Ejercicio 2: Selecciones 1 Dibuja 5 valos. Dales el color de relleno y borde que quieras (elige un relleno que no sea transparente )

2 Selecciona 3 de ellos usando la tecla SHIFT. 3 Selecciona 3 de ellos usando la Herramienta Seleccin (Flecha). 4 Selecciona 3 nicamente los bordes de 3 de ellos.

Ejercicio 3: Alinear Objetos 1 Dibuja 4 objetos (crculos, rectngulos...). 2 Coloca uno en cada esquina usando el Panel Alinear. Ejercicio 4: Grupos 1 Agrupa los 4 objetos del ejercicio anterior en un nico grupo. 2 Cambia su posicin (colcalos, por ejemplo, en el centro de la pelcula). 3 Desagrpalos. Si no tienes muy claro cmo realizarlo, Aqu te ayudamos. Explicacin del ejercicio Ejercicio 1: Rellenos y Bordes Se nos pide crear 2 rectngulos y eliminar el relleno de uno de ellos y el borde del otro. Procedemos del siguiente modo: 1 Seleccionamos los colores en el Panel Muestras de Color o en el Panel Mezclador de Colores, hacemos clic en la Herramienta Rectngulo y dibujamos 2 rectngulos. 2 Hacemos clic en el interior del primer rectngulo y pulsamos la tecla Suprimir (Supr). 3 Hacemos doble clic en el borde del otro rectngulo y volvemos a pulsar la tecla Suprimir.

Los 2 rectngulos originales

Rectngulo sin Relleno y Rectngulo sin Borde

Ejercicio 2: Selecciones El primer apartado nos pide crear 5 valos y seleccionar 3 de ellos con la tecla SHIFT. 1 Seleccionamos los colores que queramos en el Panel Muestras de Color o en el Panel Mezclador de colores, hacemos clic en la Herramienta valo y dibujamos 5 valos. 2 Hacemos doble clic en el relleno del primer crculo (doble clic para seleccionar tanto el Relleno como el borde). 3 Ahora pulsamos la tecla SHIFT y sin soltarla, hacemos doble clic en otros 2 crculos cualesquiera. Ahora hacemos lo mismo usando la Herramienta Seleccin (Flecha), como pide el segundo apartado. 1 Hacemos clic en una zona del escenario que nos permita capturar 3 crculos. 2 Arrastramos el ratn hasta crear un rea que envuelva completamente a 3 de los 5

crculos. 3 Si quedara alguna parte del crculo fuera de la seleccin, basta con usar la tecla SHIFT para aadirlo a la seleccin actual. Ahora se nos pide seleccionar nicamente los bordes de 3 de ellos. 1 Hacemos clic en el borde del primer valo (si hiciramos 2 clics se seleccionaran todos los bordes del mismo color que estn en contacto con el borde sobre el que hacemos clic). 2 Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 valos ms. Nota: Si en vez de valos hubieran sido rectngulos, hubiera hecho falta hacer 2 clics en el borde de cada rectngulo para que este quede totalmente seleccionado. Comprubalo tu mismo. Ejercicio 3: Alinear Objetos Se nos pide dibujar 4 objetos y colocarlos en las esquinas. 1 Dibujamos los 4 objetos pedidos, por ejemplo, 4 rectngulos. 2 Abrimos el Panel Alinear. desde el men Ventana Alinear. 3 Hacemos clic en "En Escenario" para que las distribuciones de los objetos se hagan en funcin del tamao del fotograma. 4 Seleccionamos el primer objeto y hacemos clic en extremos izquierdo de la pelcula. para alinear el objeto en el

5 Hacemos clic en para situarlo en el borde superior de la pelcula. Como el objeto est en el extremo superior izquierdo, est en la esquina superior izquierda. 6 Para alinear el segundo objeto en la esquina superior derecha hacemos clic en . 7 Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en . 8 Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en y . Ejercicio 4: Grupos La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que ya tenemos). y y

1 Los seleccionamos todos del modo que prefiramos. 2 Hacemos clic en el Men Modificar Agrupar La segunda parte del ejercicio nos pide Desagrupar el conjunto de elementos que acabamos de agrupar. 1 Seleccionamos el Grupo haciendo clic en l. 2 Hacemos clic en el Men Modificar Desagrupar
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:

Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante

estn vacos). Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas del 5 al 10) mostrar la portera sin portero. De este modo la portera es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada. Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarn parte de la animacin. Si queremos que un objeto NO forme parte de una animacin, deberemos quitarlo de la capa en la que se produce dicha animacin. Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera en la misma capa que el portero, entonces AMBOS objetos se moveran hacia dicho lado, con lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos en 2 capas, como ya hemos hecho. Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos interese). Trabajar con Capas

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

Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. Tambin puedes bloquearla u ocultarla. Pero haremos especial hincapi en la opcin Tipo cuyas opciones, Gua y Mscara, veremos ms adelante en el curso. 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. Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos. Aprende a hacerlo realizando el Ejercicio Cambiar Objetos de Capa
Ejercicio. Unidad 8.

Cambiar un objeto de

Capa Objetivo. Mover un objeto situado en una capa a otra Ejercicio paso a paso. 1 Partimos de una pelcula con ms de una Capa.

2 Seleccionamos la Capa donde est el objeto que queramos cambiar de capa. 3 Hacemos doble clic en el objeto a mover, para seleccionarlo en su totalidad (relleno y borde). 4 Pulsamos el boton derecho del ratn. Se abrir un men como el de la imagen. 5 Seleccionamos Cortar. El objeto desaparecer. 6 Seleccionamos el fotograma en el que queramos colocar el objeto (situado en una capa distinta a la actual, aunque esto es vlido en ambos casos). 7 Hacemos clic con el botn derecho sobre el escenario de este fotograma de destino. 8 Hacemos clic en Pegar para colocar el objeto en este fotograma o hacemos clic en Pegar in Situ para pegar el objeto en la misma posicin en la que estaba al cortarlo

Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. Tambin se puede Copiar el fotograma y luego pegarlo en la capa de destino.
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 corresponden una serie de capas guiadas. Al asociar una capa gua con una capa guiada, el

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

Unidad 9.

Smbolos (I)

Qu son los smbolos Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash 8. 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 Nuevo Smbolo o simplemente pulsando Ctrl + F8 o F8.

Una vez hecho esto nos aparecer una ventana como la mostrada en la imagen. Introducimos el nombre del smbolo que vamos a crear. 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.

Ejercicio. Unidad 9.

Crear Smbolo.

Objetivo. Crear un smbolo de grfico que nos permitir coger destreza en una accin que ser bsica en la creacin de animaciones. Ejercicio paso a paso. 1 Pulsamos en la barra de herramientas y selecciona la Herramienta valo. 2 Dibujamos un valo en cualquier lugar del escritorio. 3 Seleccionamos la figura creada. 4 Abrimos el men Insertar Nuevo Smbolo... de la barra de mens. Se desplegar una ventana como la de la figura. 5 En el campo Nombre introducimos el nombre de nuestro grfico, por ejemplo "Mi Primer Smbolo". 6 Seleccionamos la opcin Grfico en el apartado Comportamiento. Con esto le decimos a Flash que el nuevo smbolo ser un grfico. 7 Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico creado.

Las Bibliotecas

En Flash 8 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 la lbrera de smbolos de la pelcula que estamos Los smbolos contenidos en las bibliotecas estn identificados creando de nuevo por su nombre y por un icono que representa el tipo de smbolo vamos a la Barra de que representan: Mens, Ventana Biblioteca. En esta Clip Botn Grfico 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.

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.
Ejercicio. Unidad 9.

Modificar una instancia de un smbolo. Objetivo. Comprender la diferencia entre un smbolo y una instancia de este smbolo. Ejercicio paso a paso.

1 Vamos al men Ventana Bibliotecas Comunes. 2 Seleccionamos la primera opcin del submen que aparecer (Botones). Aparecer la librera de botones predefinidos de Flash 8. 3 Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera carpeta que aparece en la lista (Arcade buttons). Se abrir una lista con todos los smbolos contenidos en la carpeta. 4 Arrastramos el primer smbolo (arcade button blue) a nuestra rea de trabajo. Aparecer en el papel el smbolo que habamos arrastrado. Esto es una instancia del smbolo llamado arcade button - blue. Comprobmoslo. 5 Seleccionamos nuestra nueva

instancia. 6 Seleccionamos la herramienta Transformacin Libre y modificamos el tamao de la instancia arrastrando los extremos del objeto. 7 Bien, ahora hemos modificado la instancia. Comprobemos que el smbolo sigue intacto. Repitamos lo que hicimos en el paso 5. Como vemos, el botn ha aparecido de nuevo, pero no con el tamao que le acabamos de dar, sino con su tamao original. Esto sucede porque lo que hemos reducido de tamao era tan slo una instancia del smbolo, no el smbolo mismo, y esto es lo que se ha modificado. Por tanto podemos seguir insertando y modificando ese smbolo y cualquier otro en

esta u otra pelcula ya que estaremos insertando instancias.

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 8, 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 smbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seg 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 q 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.
Ejercicios Tema 9: Smbolos

Ejercicio 1: Crear Smbolo 1 Crea una pelcula con 1 fotograma. 2 Dibuja un crculo perfecto. 3 Convirtelo a smbolo de tipo Clip. 4 Comprueba que est disponible en la Biblioteca. Ejercicio 2: Insertar Instancia 1 Crea una nueva pelcula. 2 Inserta el Grfico de un botn cualquiera de las Bibliotecas comunes de Flash 8. 3 Modifica su tamao. 4 Vuelve a realizar el paso 2 y comprueba que el botn se inserta en su tamao original. Ejercicio 3: Duplicar Instancia 1 Sobre el ejercicio anterior, duplica la instancia del botn que has cambiado de tamao. 2 Comprueba que se ha duplicado en la Biblioteca. Ejercicio 4: Efectos sobre Instancias 1 Teniendo el botn ampliado del ejercicio 2 en el escenario, inserta el duplicado que hemos creado de tal forma que se superpongan parcialmente.

2 Dale al botn que est tapando al otro un efecto Alfa del 40%. 3 Comprueba que ahora podemos ver los dos claramente. Ejercicio explicado
Ejercicios Tema 9: Smbolos

Ejercicio 1: Crear Smbolo 1 Crea una pelcula con 1 fotograma. 2 Dibuja un crculo perfecto. 3 Convirtelo a smbolo de tipo Clip. 4 Comprueba que est disponible en la Biblioteca. Ejercicio 2: Insertar Instancia 1 Crea una nueva pelcula. 2 Inserta el Grfico de un botn cualquiera de las Bibliotecas comunes de Flash 8.

3 Modifica su tamao. 4 Vuelve a realizar el paso 2 y comprueba que el botn se inserta en su tamao original. Ejercicio 3: Duplicar Instancia 1 Sobre el ejercicio anterior, duplica la instancia del botn que has cambiado de tamao. 2 Comprueba que se ha duplicado en la Biblioteca. Ejercicio 4: Efectos sobre Instancias 1 Teniendo el botn ampliado del ejercicio 2 en el escenario, inserta el duplicado que hemos creado de tal forma que se superpongan parcialmente. 2 Dale al botn que est tapando al otro un efecto Alfa del 40%. 3 Comprueba que ahora podemos ver los dos claramente.
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, ESTO ES UNA posicin u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar ANIMACIN 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.

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

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. Ahora s que se ve la animacin. Guarda este archivo porque lo utilizaremos ms adelante.
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 8 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.

Para importar un archivo de Mapa de Bits al escenario haz clic en el men Archivo Importar Importar a escenario.

Se abrir el cuadro de dilogo de Importar, all debers seleccionar el formato de imagen que quieres importar seleccionndolo en el desplegable Tipo. Luego navega por las carpetas hasta encontrarlo. Seleccinalo haciendo clic sobre l y pulsa el botn Abrir. La imagen se incluir en el escenario y estar lista para trabajar con ella.

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

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 Importar a escenario. A continuacin, seleccionamos el tipo de archivo correspondiente al grfico vectorial que queramos importar. Por ejemplo FH11 del Freehand MX (11). 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 r Flash 8 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 en el tema bsico, que la mayora de mapas de bits no permiten animaciones, por esto el objeto flash que e que sta no se guardar.

Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al men Archivo Exportar 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.

Ejercicio. Unidad 10.

Exportar objeto como Bitmap.

Objetivo.

Exportar un objeto Flash 8 como un grfico de tipo mapa de bits. En este caso, lo exportaremos como JP Ejercicio paso a paso.

1 Seleccionamos el objeto a exportar. 2 Vamos al men Archivo Exportar Exportar Imagen...

Ahora estaremos delante de una ventana similar a la que se muestra a la derecha.

3 Buscamos en la pestaa Guardar en la carpeta en la que quieras guardar el archivo. 4 En el apartado Nombre de Archivo introducimos el nombre que queramos que tenga nuestra nueva imagen. 5 Abrimos la pestaa de Tipos de archivo. 6 Buscamos entre todos los tipos el formato JPG o JPEG. 7 Pulsamos Guardar.

Y ya est exportado. Para comprobarlo accede a la carpeta en la que lo guardaste y vers un archivo con el

Exportar un objeto Flash como animacin Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan animaciones, como podemos crear una animacin y exportarla como un GIF animado. Sin embargo, como vimos, el GIF anim mostradas secuencialmente y es por esto que para exportar un objeto Flash 8 como GIF animado es ne animacin sean clave, ya que el GIF no lo reconocer en caso contrario y no veremos el efecto deseado.

Para exportar un smbolo y guardarlo como una imagen deberemos antes que nada seleccionarlo con la her

Una vez seleccionado deberemos hacer clic en el men Archivo Exportar Exportar imagen... y se abr

En este cuadro de dilogo deberemos introducir el nombre del archivo que crearemos y seleccionar en el d que queremos guardarlo.

Una vez rellenados todos los campos y elegida la carpeta donde se guardar el archivo pulsa el botn Guar listo si quieres incluirlo en una pgina web esttica o modificarlo con cualquier programa de imagen.

Podis seguir los pasos de este clip (Nota: se utilizar como base el grfico animado que creamos en el a 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 8, 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 Nuevo 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 clic sobre el avin) y examinemos su lnea de tiempos. Aparecer un nico movieclip. Podemos realizar algo similar a lo realizado con los grficos, si bien 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.

Para insertar un clip vaco haz clic en Insertar Nuevo smbolo y se abrir el cuadro de dilogo de Crear un nuevo smbolo. All debers darle un Nombre para identificarlo ms tarde en la Biblioteca y seleccionar la opcin Clip de Pelcula en el marco Tipo. A partir de este momento tendremos un nuevo clip (vaco) al cual podremos acceder desde nuestra Biblioteca (men Ventana Biblioteca), si hacemos clic derecho sobre l y seleccionamos Edicin, podremos editarlo y trabajar con l.

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 8. 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 Importar Abrir biblioteca externa..., 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 e 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 ot Clips de tal forma que nos permita una mayor flexibilidad en el uso de Flash y adems nos proporcione un 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 un Clip de Pelcula propio se tratase, no es tan sencillo como si tuviramos dicho fuente .fla, ya que al imp en formato .swf la animacin se importa fotograma a fotograma. Por esto, si importramos el archivo sobre encontraramos con un gran nmero de fotogramas claves consecutivos que entre otras cosas, estropearan nuestra lnea de tiempos, y nos impedira tratar la pelcula como un todo. Esto representa una especie de m

Debido a la importacin fotograma a fotograma, tambin aumenta el tamao de nuestro archivo y por tanto embargo habitualmente este aumento no es tan importante y puede que nos convenga tener esa pelcula par 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 Importar a escenario. 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 impedir que alguien la modifique y la redistribuya, es decir, impedir que sea importada con Flash 8 por otr 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 (v para dar una proteccin extra a nuestras pelculas debemos exportar el archivo como swf y activar en Opci Importacin e introducir una contrasea. Con esto se le reclamar dicha contrasea al que intente importa dicha contrasea, simplemente no podr importar la pelcula.

Tambin podemos exportar nuestros clips y utilizarlos en programas del estilo de Swish, para aprovechar l animacin grfica y el dominio de la animacin de textos de Swish. Esto lo podemos conseguir simplemen manera habitual y dndole siempre el formato swf de Flash 8.

Es de vital importancia el hecho de poder combinar las utilidades de varios programas y en esto Flash es e interactuar de manera bastante fiable con programas de tratamiento de imgenes, programas de dibujo vec
Ejercicios Tema 11: Clips

de Pelcula

Ejercicio 1: Crear un Clip a modo de Cuenta Atrs 1 Crea una pelcula con slo 1 fotograma. 2 Escribe un nmero cualquiera, por ejemplo un 3. 3 Convirtelo a smbolo de tipo Clip. 4 Crea una animacin fotograma a fotograma en la que se vea una cuenta atrs hasta el cero.

5 Comprueba que pese a tener la pelcula original un frame y el clip cinco, la animacin se ve completame

6 Gurdalo como cuenta.fla Ejercicio 2: Crear un clip vaco y editarlo despus 1 Crea una nueva pelcula. 2 Crea un nuevo smbolo de tipo Movie Clip vaco. 3 Sal a la lnea de tiempos principal. 4 Vuelve a editar el smbolo. Ejercicio 3: Exportar una pelcula con proteccin 1 Partimos del Clip del ejercicio 1, brelo. 2 Exporta la pelcula swf de forma que nadie la pueda importar despus
Ejercicios Tema 11: Clips

de Pelcula

Ejercicio 1: Crear un Clip a modo de Cuenta Atrs 1 Crea una pelcula con 1 fotograma con Archivo Nuevo 2 Mediante la Herramienta Texto marcada en la barra de herramientas con una A escribe el 3. 3 Accede a Insertar Nuevo Smbolo... o bien pulsa F8.

4 Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego borra el 3 que aparecer en en su lugar. 5 Puedes reproducir la pelcula con Control + Enter. 6 Men Archivo Guardar Como... Ejercicio 2: Crear un clip vaco y editarlo despus 1 Archivo Nuevo 2 Accede a Insertar Nuevo Smbolo o bien pulsa Control + F8

3 Pulsa en el icono de la escena principal, en este caso ser Escena 1, que est encima de la lnea de tiempo 4 Abre la Biblioteca del documento mediante Ventana Biblioteca, pulsa con el botn derecho sobre el opcin Editar del men emergente Ejercicio 3: Exportar una pelcula con proteccin 1 Abre mediante Archivo Nuevo

2 Exporta con Archivo Exportar Exportar Pelcula, selecciona el tipo de archivo SWF y dale un marca la opcin Proteger frente a Importacin, y en el campo Contrasea escribe la clave que quieras.
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 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 accione este tipo de elementos reaccionan cuando se les pasa el ratn por encima o cuando se les est pulsando, po

Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientado ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente bastante grande ya que e muy habitual en el diseo en Internet. Sin embargo, en Flash no ocurre as. Su interfaz est diseada de ma botones, lo que nos permite crear todos estos efectos de una manera muy sencilla.

Al igual que los otros smbolos de Flash 8, los botones tienen su propia lnea de tiempos. Esta es independi 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 impor compuestos slo por texto como veremos ms adelante. Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de espectacularidad no es as.

Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap). La u 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 obje posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estruc Primeramente crearemos el objeto que representar el aspecto por defecto de nuestro botn con las herram

Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le daremos el compor nombre a nuestro nuevo smbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completa Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciend 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 cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma

Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo es importante la for otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "s Aqu podemos ver una muestra de creacin de un botn ovalado.

Como resultado obtenemos el bot

Este es un botn muy bsico, como veremos se pueden complicar mucho, pero para empezar nos servir co

Si una vez creado el botn queremos observar sus distintos estados y todava no hemos terminado la pelcu tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra pelcula y seleccionando 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 circulares, cuya creacin es inmediata como vimos en el punto anterior, tambin hay otros muchos tipos d utilizados, es muy habitual verlos en multitud de pginas web.

Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto nicame etc. Es interesante su uso para dar ms vistosidad ya que algunos resultan ms expresivos, y en esto Flash 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 f existen muchas formas de conseguir estos efectos, a continuacin tienes un ejercicio paso a paso que mues relieve en un botn rectangular. Ejercicio Botn en Relieve.
Ejercicio. Unidad 12.

Crear un Botn con Relieve

Objetivo. Crear un botn con efecto relieve de forma rectangular tipo formulario de manera rpida y sencilla. Ejercicio paso a paso. 1 Dibujamos un rectngulo en el rea de trabajo. 2 Seleccionamos el fondo. 3 Cambiamos el color de fondo del rectngulo. Por ejemplo a gris. 4 Con la herramienta texto escribimos el texto que queramos en el interior del rectngulo. Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve. 5 Seleccionamos los bordes izquierda y superior. 6 Modificamos el color de dichos bordes. Le damos el color blanco. 7 Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro. Ya va tomando relieve, ahora vamos a crear los diferentes estados.

8 Seleccionamo

9 Activamos la o Smbolo...

10 Marcamos e damos un nomb

11 Hacemos dob

12 Mediante F6 uno de los fotog estados del bot 13 Seleccionamos el fotograma Presionado. 14 Modifiquemos ahora el borde inferior y el derecho del botn aplicndole el color blanco. 15 Finalmente seleccionemos los bordes superior e izquierdo y dmosle el color negro. Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como estn puesto que no deseamos pulsemos el botn y el rea de accin es la que comprende nuestro rectngulo. El resultado obtenido es el siguiente. Podemos pinchar sobre l y comprobar el efecto.

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 ejemplo pareca poco til, ya que es comn pensar que obviamente la zona activa que queremos que tenga nuestro b lmites de dicho botn.

Veamos como esto no es siempre tan trivial. Aqu se muestran dos botones creados en Flash 8. Comprobem por encima de uno y de otro.

Aunque parezcan iguales, la diferencia est en el momento en el que situamos el ratn en uno de los hueco 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 p confusin, ya que aquel que navegue por nuestras pginas simplemente querr hacer uso del botn y no ten concretamente a unas letras que quiz sean muy estrechas. Esto es debido al mal uso de la zona activa. Para solucionar este problema sigue los siguientes pasos:

1. Haz doble clic sobre el botn para entrar en su modo de edicin. 2. Haz clic sobre el fotograma de Zona Activa, si no hubiese ningn fotograma clave creado haz clic s crear uno. 3. Una vez en el estado Zona Activa seleccionamos la herramienta Rectngulo y dibujamos un rectng totalidad. As definiremos toda el rea del rectngulo como zona activa al ratn. 4. Vuelve al modo de edicin normal pulsando el enlace a Escena 1 sobre la Lnea de tiempos. Aqu tienes un ejemplo de cmo hacerlo correctamente. 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. Veamos por ejemplo el botn siguiente:

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.

Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, slo tendrs que, primero, hacer doble clic sobre el botn para entrar en su modo de edicin. Haz clic en el estado Sobre para modificarlo. Selecciona el texto y pulsa la tecla SUPRIMIR para eliminarlo. Ahora abre la Biblioteca desde el men Ventana Biblioteca donde se encontrar el clip que habremos creado previamente. Seleccinalo y arrstralo sobre el botn. Ya esta listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a reproducirse.

Aqu puedes seguir el proceso que acabamos de comentar Y este es el resultado.

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 elemento ms comunes:

1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una pelcula desplazando por webs que contengan ms de una pgina, o permitir al usuario descargarse archivos entre o

Para aadir una accin a un botn es necesario el uso de ActionScript (en el tema 17 se tratar con mayor p Por lo tanto, los pasos a seguir sern los siguientes:

1. 2. 3. 4. 5.

Selecciona el botn haciendo clic sobre l, pues es a l al que ir asociada la accin. Abre el panel Acciones haciendo clic en su pestaa o desde el men Ventana Acciones. Haz clic en el botn Asistente de script. En el marco de la izquierda haz clic sobre Funciones globales Navegador/Red getURL. Al seleccionar el comando getURL (que se encarga de crear un link a una pgina web) se mostrarn panel. Rellena los campos URL con la pgina a la cual quieres vincular el botn y selecciona en qu desplegable Ventana (_blank abrir el link en una pgina nueva). 6. Cierra el panel de Acciones y el botn estar listo. Has aadido una accin a tu botn. Aqu tienes una muestra de cmo hacerlo. Y este es el resultado:

2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y queremos permitir que avance, retroceda ...

Por ejemplo, para detener una pelcula en curso simplemente debemos hacer que nuestro botn en cuesti 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 deb 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 importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca. El resultado podra ser algo as:

Ejercicios Tema 12: Botones

Ejercicio 1: Crear un Botn en forma de Pldora 1 Abre un documento nuevo 2 En el primer fotograma dibuja un objeto con forma de pldora como el de la derecha y escribe "STOP" sobre l 3 Convirtelo a smbolo de tipo Botn 4 Crea distintas apariencias para distintos estados 5 Gurdalo como stop.fla Ejercicio 2: Ajustar el rea Activa 1 Crea una nueva pelcula 2 Escribe el texto: "VmOnoS" respetando las maysculas y minsculas como se muestran 3 Convirtelo a Botn 4 Haz que slo funcione al pasar por la "O" central Ejercicio 3: Botn con Sonido 1 Partimos del Botn del ejercicio 1. brelo 2 Haz que emita un sonido de la Biblioteca Comn de Sonidos al pasar el ratn por encima de l 3 Haz que emita otro sonido de la Biblioteca Comn de Sonidos distinto al pulsarlo Ejercicio 4: Detener una Pelcula

1 Abre un nuevo documento. 2 En el primer fotograma inserta algn smbolo que se comporte como clip de pelcula y que contenta una animacin de ms de 1 fotograma 3 Ahora inserta en el clip el botn del ejercicio 1 de manera que se vea a lo largo de toda su reproduccin 4 Haz que se detenga el Clip al pulsar el Botn Explicacin
Ejercicios Tema 12: Botones

Ejercicio 1: Crear un Botn en forma de Pldora 1 Hazlo con Archivo Nuevo. 2 Para dibujar la forma de pldora dibuja primero un crculo. Selecciona la herramienta Cubo de Pintura y elige un degradado de blanco a azul, colocando los marcadores como se muestra a la derecha y aplcalo como relleno. Una vez hecho esto dibuja dos lneas paralelas en el centro del crculo. Separa los dos semicrculos. Elimina las lneas y ensancha el rectngulo que haba entre ellas hasta tocar los semicrculos.

a)

b)

c)

d)

e) 3 Mediante Insertar Nuevo Smbolo... o bien pulsando F8 4 Crea fotogramas clave en todos los fotogramas mediante F6 y modifcalos para crear el efecto 5 Archivo Guardar Como... y llmalo stop.

Ejercicio 2: Ajustar el rea Activa 1 Hazlo tambin con Archivo Nuevo 2 Mediante la Herramienta Texto marcada en la barra de Herramientas con una A y escribe el texto: VmOnoS. 3 Haz clic en la Herramienta Seleccin y selecciona el texto que acabas de crear. 4 Mediante Modificar Convertir en Smbolo... o bien pulsando F8 5 Selecciona el fotograma Zona Activa, dibuja un valo de tal forma que tape por completo la "O" y tenga el mismo tamao y forma. Luego borra el texto. Ejercicio 3: Botn con Sonido 1 Mediante Archivo Nuevo. 2 Selecciona el fotograma Sobre accede a Ventana Biblioteca y arrastra uno de los sonidos al escenario de que dispongas al escenario, sino dispones de ninguno, importalo desde tu disco duro... 3 Selecciona el fotograma Presionado, accede a Ventana Biblioteca y arrastra uno de los sonidos al escenario de que dispongas al escenario, sino dispones de ninguno, importalo desde tu disco duro... Ejercicio 4: Detener una Pelcula 1 Hazlo con Archivo Nuevo 2 Crea un clip de pelcula animado o importa uno como se vi en el tema anterior. Djalo en el escritorio. 3 Hacemos doble clic sobre el clip insertado para editarlo, crea una nueva capa, y en el primer fotograma de esta capa insertaremos el botn. Para ello accedemos a Archivo Importar Abrir Biblioteca Externa y seleccionamos "stop.fla" para abrir la biblioteca del archivo. Una vez hecho, arrastramos el botn al escenario. 4 Hacemos clic con el botn derecho sobre el botn y elegimos la opcin Acciones o bien directamente abrimos el Panel Acciones y seleccionamos el botn. En la parte izquierda del Panel Acciones hacemos doble clic en Funciones Globales Control de la lnea de tiempo, (si es que no estaban abiertos ya) y luego hacemos doble clic sobre la accin Stop. Por ltimo editamos nuestra rea de trabajo para que el cdigo quede as: on(release) { stop(); }
Unidad

Animaciones de Movimiento (I)

13.

La animacin en Flash Flash 8 es un programa bsicamente orientado a la animacin, de ah la gran importancia de este tema. No obstante, para ir creando animaciones cada vez ms complicadas se necesita, 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, pero esto no cambiar lo que hemos comentado anteriormente. La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor ms velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animacin como queremos.

En la animacin del tema 1 podrs ver como realizar una interpolacin de movimiento. Mantn en mente que cuando realices una interpolacin de movimiento el fotograma inicial y final debern ser diferentes, en caso contrario no se crear ningn tipo de animacin. Observa en las siguientes imgenes dnde est situada la pelota en el primer fotograma de la animacin y su posicin final en el ltimo fotograma:

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 8, basta con modificar la instancia del smbolo en el ltimo fotograma de la interpolacin de movimiento, pero esta vez cambindole el tamao. Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamao se producir mientras el objeto se desplaza. Tambin podemos hacer el cambio de tamao en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes. El ejemplo siguiente incorpora estas tres caractersticas de la Interpolacin de Movimiento de Flash 8.

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 iconos, y es aqu donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animaci 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 vis hasta ahora se pueden obtener efectos interesantes. Una de las opciones ms utilizadas es separar las letras textos y animarlas independientemente Aqu tienes un ejemplo de una presentacin sencilla mediante texto utilizando esta tcnica.

Si no tienes claro cmo realizar una animacin te recomendamos que realices el Ejercicio Animar Texto Bloques.
Ejercicio. Unidad 13.

Animar Texto por Bloques

Objetivo. Crear una animacin sobre un texto separndolo en bloques de letras cuyo movimiento ser tratado de manera independiente, dando al texto un efecto vistoso que pudiera servir como presentacin de entrada a web u otro tipo de pelcula. Ejercicio paso a paso. Vamos a basarnos en el ejemplo que acabamos de ver, para tener claro nuestro objetivo. Luego podremos extrapolarlo a cualquier otro texto. Veamos cmo conseguir esos efectos combinando las tcnicas vistas hasta el momento. 1 Escribimos el texto en cuestin, en nuestro caso "aulaClic". 2 Abrimos el Panel Propiedades (tras seleccionar el texto) y seleccionamos el tipo de letra. Nosotros hemos elegido "Ruach Let", pero cualquiera es vlida. 3 Seleccionamos el texto recin escrito. 4 Accedemos al men Modificar Separar. Con esto separamos cada letra ya que de no hacerlo Flash tratara todo el texto como un bloque y no podramos dar el efecto a las letras. Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic".

Podramos cambiar los bloques si quisieramos dar otro efecto en concreto. 5 Seleccionamos dichos bloques y los convertimos a smbolos, dndoles un nombre identificativo y el Comportamiento grfico, ya que no los animaremos "internamente".

6 Creamos 5 nuevas capas, una por cada bloque que hemos creado. Esto ltimo es necesario ya que si no lo hiciramos Flash apli el movimiento a todo aquello que encontrara en dicha capa, ya como hemos comentado anteriormente, lo convertira todo a smbolo automticamente.

7 Nombramos cada una de las capas segn el bloque de texto vaya a contener, pero en orden inverso en el que vaya a produ la animacin, para que el objeto en movimiento se superponga los que no lo estn. Esto es, la capa de ms arriba se llamar " la siguiente "la" y as sucesivamente. 8 Hacemos clic con el botn derecho sobre el nico fotogram que tenemos en la lnea de tiempos y en el men emergente seleccionamos Copiar Fotogramas. A continuacin vamos peg los fotogramas (botn derecho Pegar Fotogramas) en toda capas.

9 Seleccionamos cada capa y vamos borrando las partes del t que no corresponden con la parte del texto que debe contener. recomendable bloquear el resto de capas cuando se haga esto asegurarnos de que borramos las letras de esa capa (hay que te en cuenta que al principio todas las capas contienen lo mismo superpuesto). 10 Situamos (arrastrando) el fotograma de cada capa a los siguientes frames: "A" : Fotograma 1. "U" : Fotograma 6. "LA" : Fotograma 12. "Clic" : Fotograma 18. 11 Seleccionamos el fotograma que ocupa cinco posiciones despus del fotograma de cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa tambin F6. 12 Hacemos clic con el botn derecho en los fotogramas centrales que hay entre los fotogramas claves y seleccionamos cada vez Crear

Interpolacin de Movimiento. 13 Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el fotograma 30 (Botn derecho Insertar Fotrograma Clave).

14 Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolacin y aumentamos tamao del bloque que contiene. 15 Movemos ahora fuera del escenario el bloque "Clic". 16 An en esta capa, hacemos clic con el botn derecho sobre el fotograma 24 y seleccionamos Insertar Fotograma Clave. 17 En este fotograma recin creado reducimos el ancho del bloque de texto y lo colocamos junto a la ltima "a". Y ya tenemos la animacin creada. Como vemos hemos utilizado todo tipo de tcnicas de interpolacin, aunque todava puede complicarse ms como veremos ms adelante.
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 mane progresiva (o ambas cosas a la vez), Flash 8 nos ofrece la tcnica de la Interpolacin por Forma, que consis 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 com hacamos en el tema anterior, slo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma 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 Fl transformar todos los objetos vectoriales del primer fotograma en aquello que haya en el ltimo fotogram 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 Flas

Si hay algn fallo en los parmetros necesarios para que la interpolacin se ejecute bien, como por ejem que uno de los objetos en capa sea un smbolo, se mostrar algo as en la lnea de tiempos:

Para crear una interpolacin de forma debers actuar de forma similar que para crear una de movimiento. U vez tengas los fotogramas de inicio y fin de la animacin debers seleccionar todos los fotogramas que participen en ella y abrir el panel Propiedades.

All debers seleccionar la opcin Forma en el desplegable Animar. Y ya habrs terminado. Fcil, verdad? Podemos observar como realizar una interpolacin por forma pulsando aqu.

A la derecha podemos ver el resultado del proceso anterior.

Tambin podemos realizar interpolaciones de forma en varias fases de manera anloga a como lo hac en el tema anterior. De esta forma podemos hacer que un determinado objeto de convierta en otro antes de adoptar su forma definitiva. Ahora, a la derecha podemos ver el ejemplo anterior pero haciendo que se transforme previamente en un tringulo antes de pasar a ser cuadrado.

Lo hemos conseguido simplemente haciendo clic con el botn derecho sobre el fotograma 10 y creando 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 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 vectoria 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 previame 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 llev confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarno dar suficientes fotogramas de margen para que se note la transicin. Tambi 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 hace corremos el riesgo de que la animacin parezca slo un garabato revolvind

Una de las posibilidades es "deletrear" una palabra de manera tan vistosa vemos a la izquierda. Podemos comprobar como simplemente cambiando e color del objeto final, se produce una transicin tambin en el color. Observ 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 transic de forma a texto.

Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y una vez tengamos la animacin creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolacin aparece como incorrecta. Deberemos, entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo. Haremos clic en el men Modificar Separar para convertir el texto en un conjunto de puntos que creen una forma. Y la interpolacin ya estar lista. Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separar la palabra en letras inidividuales. Debers ejecutar de nuevo el comando para que estas letras se separen y creen una forma.

Aqu mostramos como realizar una animacin de este tipo.

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

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

Para crear esta animacin debers crear tantas capas como animaciones de lneas vayas a crear, en el ejemplo hemos creado 4 capas. Una para el movimiento de lneas de abajo a arriba, otra para el movimiento de arriba a abajo, otra para izquierda a derecha y finalmente una ltima para el movimiento de derecha a

izquierda. Tambin crearemos una capa que situaremos en la posicin superior donde colocaremos las imgenes que formarn el mensaje de bienvenida. El funcionamiento de la animacin es claro, deberemos crear interpolaciones de movimiento para cada una de las capas de lneas que en su posicin final emplazaremos en su lado contrario de la pantalla, por ejemplo, las lneas situadas en un principio en la parte inferior al final de la animacin se encontrarn en la parte superior. Realizaremos esto con las 4 capas de lneas. En la capa Imgenes crearemos animaciones que harn aparecer las imgenes que forman el mensaje de bienvenida de forma secuencial, es decir, del fotograma 5 al 10 se mostrar una imagen, del 11 al 16 otra y la ltima la mostraremos del fotograma 17 al 22. De esta forma, habiendo creado los fotogramas claves en cada uno de los fotogramas de inicio (5, 11 y 17), arrastraremos desde la Biblioteca (men Ventana Biblioteca) las imgenes para colocarlas en su lugar en el fotograma. Estas imgenes se mostrarn nicamente durante el tiempo que dure el fotograma para desaparecer ms tarde dando paso a la otra imagen. Consejo: Si quieres aadir un fondo debers hacerlo en una nueva capa y colocar sta debajo de todas las existentes.

Aqu mostramos la forma de crear una

animacin de este tipo.

Interpolacin mediante Gua de Movimiento Anteriormente hemos visto como las interpolaciones de movimiento desplazaban smbolos Flash en ln Puesto que esto supone una cierta limitacin Flash 8 incluye la Gua de movimiento.

Una gua de movimiento es una capa especial que marca una trayectoria para los smbolos de la capa a l afecta, para que dichos smbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproduc permite dibujar cualquier tipo de dibujo vectorial, que nos permitir crear un movimiento no forzosame 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 otr y colocar el smbolo del ltimo fotograma al final del trazado que realizaremos previamente en la capa de l No es necesario colocarlos al principio del trazado ya que Flash lo hace automticamente. Vemos como la capa a la que se asocia la gua aparece debajo y alineada a la derecha.

Crear interpolaciones de movimiento guiadas es muy sencillo, Lo primero que debers hacer es crear una animacin de movimiento, para ello:

1. Crea un fotograma clave pulsando F6 e inserta en l el smbolo que quieres que realice el movimien 2. Crea un nuevo fotograma clave para marcar la duracin de la animacin, por ejemplo, si creaste el p fotograma en la posicin 5, crea el nuevo en la posicin 25, as tendrs una animacin que durar 2 fotogramas. 3. Selecciona todos los fotogramas que intervengan en la animacin y haz clic derecho sobre uno de e la Lnea de tiempos. Selecciona la opcin Crear interpolacin de movimiento. Una vez creada la interpolacin y con la capa seleccionada pulsa el botn

Aadir gua de movimiento. S

una nueva capa asociada a aquella donde tienes creada la animacin.

Ahora el procedimiento es fcil, selecciona la herramienta Lpiz y dibuja en la capa gua el recorrido que d seguir el smbolo.

Cuando lo hayas creado selecciona el ltimo fotograma de la animacin y coloca el smbolo en su punto fin Recuerda que el smbolo debe estar siempre en contacto con la lnea de gua tanto en el primer como ltim fotogramas.

Aqu se puede ver cmo realizarlo.

Podemos ver un efecto ms vistoso que el que realizamos con la interpolacin sencilla del principio del

Podeis poner a prueba vuestros conocimientos realizando la:

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 8 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 Consejo 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). Pulsa aqu para comprender mejor qu es un consejo o pista de forma y ver un ejemplo de la creacin y usos de los consejos de forma. Ahora realicemos el seguimiento de otro ejemplo, tenemos la siguiente animacin (sin consejos de forma):

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

Seguimiento

Como vemos el punto que hemos marcado en el objeto inicial se acaba correspondiendo con con el punto que marcamos en el final, con lo que hemos conseguido forzar la transformacin que nosotros queramos.

El resultado del ejemplo anterior es este.

Ejercicios Tema 14: Animacin

por Forma

Ejercicio 1: Babosa arrastrndose 1 Abre un documento nuevo 2 En el primer fotograma dibuja una especie de babosa como la de la derecha. 3 Haz que cambie de forma y vaya de un lado a otro del escenario, dando la sensacin de que est reptando.

4 Gurdalo como "babosa.fla". Ejercicio 2: Cambio de Forma y Tamao 1 Abre el archivo "babosa.fla" 2 Cambia el movimiento de forma para que a mitad del trayecto de la impresin de que se est acercando a nosotros. 3 Cambia el color de la babosa cuando est ms cerca de nosotros. Ejercicio 3: Cambiar la Forma de un Texto 1 Escribe en distintas capas las letras de tu nombre. 2 Crea una animacin de forma que pase de una letra a la siguiente. 3 Cambia los colores y el tamao de cada letra. Ejercicio 4: Consejos de Forma 1 Dibuja una Flecha. 2 Crea una animacin de forma de manera que al final, la flecha quede con el mismo aspecto pero apuntando en direccin contraria. 3 Hazlo de manera que parezca que se apoya en la punta y se abate como la bisagra de una puerta. Tiene que quedarte algo como lo de la derecha. Explicacin del ejercicio
Ejercicios Tema 14: Animacin

por Forma

Ejercicio 1: Babosa arrastrndose 1 Hazlo con Archivo Nuevo. 2 Utiliza la Herramienta Lpiz. 3 Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Propiedades (o bien abre el panel propiedades y sitate en el primer fotograma). En el desplegable Animar del Panel Propiedades selecciona la opcin Forma. Ve ahora al fotograma 20 y pulsa F6. En ese mismo fotograma, arrastra la babosa al otro lado del escenario y mediante la Herramienta de Subseleccin modifica su forma. 4 Gurdalo con Archivo Guardar Como y llmalo babosa.fla. Ejercicio 2: Cambio de Forma y Tamao 1 Abre el archivo con Archivo Abrir. 2 Selecciona el fotograma 10. Mueve el objeto hasta la parte inferior del escenario y

aumenta su tamao. La parte inferior siempre da sensacin de proximidad. 3 Selecciona la Herramienta Cubo de Pintura, elige un nuevo color y pincha sobre el relleno anterior. Ejercicio 3: Cambiar la Forma de un Texto 1 Crea mediante F6 un fotograma clave en el introduce en el centro del escenario una letra de tu nombre. 2 Selecciona la letra creada y activa la opcin Modificar Separar. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Propiedades (o bien abre el panel propiedades y sitate en el primer fotograma). En el desplegable Animar del Panel Propiedades selecciona la opcin Forma. Ve cinco fotogramas en adelante y pulsa F6. Borra la letra y escribe la siguiente. Repite el paso 2 hasta que hayas escrito todas las letras. 3 Hazlo mediante el Cubo de Pintura y la Herramienta Transformacin libre (para Escalar). Ejercicio 4: Consejos de Forma 1 Utiliza la Herramienta Lpiz. 2 Pulsa con el botn derecho sobre el fotograma que contiene la flecha y elige la opcin Propiedades (o bien abre el panel propiedades y sitate en el fotograma que contiene la flecha). En el desplegable Animar del Panel Propiedades selecciona la opcin Forma. Ve al fotograma 20 y pulsa F6. Invierte la imagen del fotograma 20 para que adopte su posicin final mediante Modificar Transformar Voltear Horizontalmente y colcalo de manera que su punta y la de la flecha original coincidan. Si ejecutramos la animacin ahora no conseguiramos el efecto deseado. 3 En el fotograma 1, activa la opcin Modificar Forma Aadir Pista de forma para aadir una nueva pista de forma. Colcalo en una de las esquinas de la flecha y ve al fotograma 20 para colocar la pista creada en la esquina que se corresponda con la anterior. Haz esto ltimo para todas las esquinas. De manera que quede como la figura de arriba.
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.

Como vemos Flash hace el desplazamiento de posicin, pero el cambio de tamao se produce bruscamente en el ltimo fotograma.

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

Antihorario (antes 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. Horario (antes CMR). Realiza lo mismo que la opcin anterior pero en la direccin de las agujas del reloj (hacia la derecha). Veamos un ejemplo de rotacin a derechas en una interpolacin de movimiento. A la derecha vemos el resultado. 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. Con este comando solucionaremos esto, y el resultado sera este.

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.

Este ejemplo podra representar la entrada a cualquier web o portal de Internet, de hecho es bastante tpico. Para ver como realizar una animacin como la anterior pulsa aqu.
Ejercicios Tema 15: Efectos

sobre Animaciones

Ejercicio 1: Efecto Rotacin 1 Abre un documento nuevo. 2 Dibuja una rueda y haz que se desplace de un lado al otro del escenario. 3 Haz que ruede mientras hace el deplazamiento. 4 Gurdalo como "rueda.fla". Ejercicio 2: Efecto Aceleracin 1 Abre el archivo "rueda.fla" 2 Haz que vaya frenando en su movimiento hasta pararse. Ejercicio 3: Orientar segn el Trazo

1 Abre el archivo "babosa.fla" que creamos en el tema anterior. 2 Dibuja una gua con forma de montaas para que sea recorrida por nuestra babosa. 3 Puesto que as parecer que la babosa est volando, haz que se arrastre por el borde de la montaa. Ejercicio 4: Efecto Alpha 1 Escribe tu nombre. 2 En una nueva capa escribe tu apellido. 3 Haz que el nombre vaya desapareciendo y que ANTES de que lo haga aparezca poco a poco el apellido por detrs suyo.

Ejercicios Tema 15: Efectos

sobre Animaciones

Explicacin del ejercicio Ejercicio 1: Efecto Rotacin 1 Hazlo con Archivo Nuevo. 2 Haz clic con el botn derecho sobre el primer fotograma y selecciona Crear Interpolacin de Movimiento. Pulsa F6 en el fotograma 20 y pon la rueda en el otro extremo del escenario. 3 Haz clic con el botn derecho sobre el Fotograma 1 y elige la opcin del submen Propiedades (si no est activada ya). En la ventana que aparece selecciona el valor Horario de la opcin de Rotacin para girar hacia la derecha y dar la sensacin de avance. Introduce el valor 1 de nmero de vueltas. 4 Archivo Guardar Como. Ejercicio 2: Efecto Aceleracin 1 Archivo Abrir. 2 Haz clic de nuevo con el botn derecho sobre el Fotograma 1 y elige la opcin del submen Propiedades (si no est activada ya). En la ventana que aparece selecciona el valor 100 de la opcin de Aceleracin (Fuera). Ejercicio 3: Orientar segn el Trazo 1 Archivo Abrir. 2 Crea una nueva capa Gua mediante el botn azul correspondiente situado bajo los nombres de las capas. Dibuja con la Herramienta Lpiz un par de montculos. Coloca como vimos en el tema 13 la instancia del primer y el ltimo fotograma al

principio y al final de la gua respectivamente. 3 Ahora haz clic con el botn derecho sobre el Fotograma 1 y elige la opcin del submen Propiedades (si no est activada ya). En la ventana de propiedades de Fotograma que aparece marca la casilla Orientar segn trazado. Ejercicio 4: Efecto Alfa 1 Utiliza la Herramienta Texto y escribe en el primer fotograma tu nombre. 2 Cralo con el botn blanco situado al lado del icono de Crear Gua de Movimiento. 3 Crea una interpolacin de movimiento de 15 fotogramas para el nombre. Selecciona el objeto y convirtelo a smbolo. Haz clic ahora con el botn izquierdo sobre el texto (que ahora es un smbolo) y selecciona el ltimo fotograma de la interpolacin y elige del desplegable del panel Color la opcin Alfa y en la casilla contigua pon el valor 0. Mueve el fotograma que tiene el apellido hasta el fotograma 12 y haz lo mismo que en el caso anterior pero dndole el valor Alfa de 0 al primer fotograma en vez de al ltimo.
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 Ventana Otros Paneles Escena, y en la ventana que aparece arrastramos la escena que acabamos de crear hasta que est la primera. En nuestro ejemplo le hemos llamado "Preloader" y hemos supuesto que la Escena con la pelcula se llama "Pelicula" (lgicamente). Deber quedar algo similar a lo que muestra la imagen. 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 anim nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la escena que c pelcula principal, mediante las acciones ActionScript 2 de Flash 8. Para ello abrimos el panel de

Vamos a seleccionar el ltimo fotograma e introducimos la accin gotoAndPlay, que por escribir "gotoAndPlay()" y nos situar el cursor en el interior del parntesis para que introduzcam y el fotograma al que se deber ir al ejecutar dicha accin. En nuestro caso queremos ir al fotogr escena "Pelicula", con lo que escribiremos lo siguiente: gotoAndPlay("Pelicula", 1);

Ahora seleccionamos el penltimo fotograma, que es el que impedir que se llegue al l que repetir el bucle que muestra la animacin "cargando") cuando an no se haya cargado la p completo. Para hacer esto, elegimos la accin _framesloaded (fotogramas cargados) y la accin (fotogramas totales) e indicamos en el panel acciones lo que queremos hacer. Sera algo como " nmero de fotogramas cargados sea mayor o igual al nmero de fotogramas totales, entonces c reproducir la pelcula" (aunque sea tericamente imposible que el nmero de fotogramas cargad que el de fotogramas totales, nunca est de ms incluir esta condicin por si acaso Flash contab internamente los fotogramas de un modo diferente). Podramos escribir algo como lo que muestr

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. Versin de ActionScript: El uso de ActionScript 2 nos permitir usar las novedades relativas a objetos, clases etc... Si nuestra pelcula slo usa acciones sencillas podemos dejar en esta pestaa la opcin

ActionScript 1.0 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 Trazado: 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. Establecer Flujo de Audio o Evento de Audio: Esta opcin nos permite acceder al

Panel "Configuracin de Sonido" desde donde podemos configurar, para cada tipo de sonidos, sus caractersticas. 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 8.

Flash con FSCommand: 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 2003: Especialmente diseado para Pocket Internet Explorer en Pocket PC 2003. QuickTime: Permite incluir una pelcula QuickTime. etc ... Detectar Versin de Flash: Desde aqu podemos seleccionar si queremos que nuestra pelcula detecte la existencia o no existencia del plugin de Flash en el ordenador del usuario, as como las pginas web donde se insertar el cdigo encargado de comprobarlo y

las pginas web a las que se ir en caso de disponer del Plugin o no disponer de l. 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.
Ejercicios Tema 16: Efectos

sobre Animaciones

Ejercicio 1: Cdigo para incrustar Flash en HTML Cuando exportamos una pelcula Flash para publicarla en una pgina web, Flash introduce entre las lneas HTML un cdigo de etiquetas (como el HTML) que muestra al navegador qu pelcula tienen que reproducir y cmo. Intenta deducir e identificar del siguiente cdigo, resultante de la exportacin de una pelcula, aquellos elementos que podamos haber indicado nosotros en las propiedades de exportacin, y que estn estrechamente relacionados con la visualizacin que tendr de ella la gente en el navegador.

<EMBED SRC="aulaClic.swf" quality=high bgcolor=#FFFFFF WIDTH="640" HEIGHT="480" NAME="aulaClic" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashpla yer"> </EMBED>

Solucin.

EMBED: Literalmente significa "clavar" o "incrustar". Esta etiqueta indica que se va a insertar un objeto, cuyo lenguaje de programacin es distinto al propio HTML y cuyo formato es el de un archivo ejecutable. SRC: Aqu se est indicando la ruta donde est y el nombre del archivo SWF que hemos exportado y que queremos que se reproduzca en nuestra pgina. QUALITY: indica la calidad de reproduccin de la pelcula (como hemos visto en este tema, esta viene determinada por la velocidad y el suavizado o calidad de imagen) y sus posibles valores pueden ser los all mencionados. BGCOLOR: Indica el color de fondo que hayamos definido en las Propiedades. WIDTH: Ancho que tendr el espacio de reproduccin de la pelcula (en pixels). HEIGHT: Altura que tendr el espacio de reproduccin de la pelcula (en pixels). NAME: Es el nombre de la pelcula que hemos publicado. ALIGN: Indica el lugar en el que hayamos alineado la pelcula en la pgina

web. TYPE: Informa al navegador del tipo de archivo que se va a incrustar para prepararse correctamente para su reproduccin. PLUGINSPAGE: Aqu se indica la pgina desde la que se puede descargar el plug-in necesario para poder visualizar el archivo incrustado. </EMBED> Esto indica al intrprete de HTML que hemos terminado de especificar el archivo incrustado. nidad 17. Introduccin a ActionScript 2 (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 8. A grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash 8 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 Flash 8. Todo lo referente a este captulo hace referencia a la versin 2 de ActionScript, ltima versin de este lenguaje de programacin lanzada por Macromedia e incorporada en Flash MX 2004.

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, al igual que otros lenguajes como Javascript. 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... y aunque, evidentemente, no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores, cada versin se acerca ms a un lenguaje de este tipo. As, la versin 2.0 estrenada en Flash

MX 2004 es mucho ms potente y mucho ms "orientada a objetos" que su anterior versin 1.0 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 8. En la mayor parte de las ocasiones, no ser necesario "programar" realmente, Flash 8 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 8, 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 1. 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, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript. El Panel Acciones de Flash 8, al contrario que el de Flash MX 2004, no tiene nicamente un modo de edicin, por lo que tiene mucho ms en comn con el mod en el que se trabajaba con Flash MX que con la anterior versin Flash MX 2004. La libertad del modo "Experto" 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.

El uso del modo en asistente es mucho ms sencillo para ello pulsa el botn Asistente de Script y seleccion que quieras incluir, apareceran las opciones que deberas rellenar para que estos comandos funcionen correc cdigo se generar automaticamente. Esta es una muy buena utilidad recuperada que permitira a los usuario empezar el uso de este lenguaje.

Aun as es recomendable siempre repasar el cdigo y as irnos familiarizando con l y de este modo poder crear nuestro propio cdigo en modo Experto, lo que nos dar myor flexibilidad a la hora de crear nuestras
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 8 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 8.

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 8.
Unidad 17. Introduccin

a ActionScript (III) Las Acciones Las Acciones son funciones predefinidas de ActionScript, es decir: Flash 8 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

Los 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 8. 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 8 cuando surjan dudas), pero hay bastantes propiedades 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 propiedad y su valor. Las propiedades siempre comienzan con un guin abajo ( _ ). Algunas propiedades se pueden escribir sin el 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 notransparencia. De 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. (Si se usa sin nombre de objeto delante obtenemos los fotogramas cargados de la pelcula

principal). Muy til para crear cargadores o "preloaders" _totalframes Devuelve la cantidad de fotogramas que contiene el clip de pelcula al que hace referencia. Si se emplea sin ningn nombre delante, nos devuelve la cantidad de fotogramas de la pelcula Flash actual. Tambin usado en la creacin de 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 escribimos "Clip1._height" obtendremos la altura de Clip1. Del mismo modo, podemos cambiarla sin ms que hacer: Clip1._height = 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 invisible. Es muy til para hacer desaparecer partes de una pelcula en un momento determinado. Por ejemplo, si queremos que 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 posicin 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 posicin o para asignarla de forma dinmica (durante la ejecucin de nuestra pelcula Flash)

Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los smbolos de nuestras pelculas. Lo primero que debemos hacer es darles un nombre de instancia (al cual nos referiremos cuando escribamos el cdigo). Para ello, y con el smbolo seleccionado abrimos el panel Propiedades.

Remplazamos el texto <nombre de instancia> por un nombre cualquiera que queramos. El objeto estar listo para tratarlo. En el supuesto de que tengamos un rectngulo al que hayamos llamado r1 escribiremos el siguiente cdigo asocindolo a un botn (creado anteriormente) en el panel Acciones para cambiar la anchura del primero:
on (release) { r1._width=350; }

Donde r1 ser la llamada al objeto al cual hemos modificado su nombre de instancia, _width indicar la propiedad que queremos cambiar y 350 determinar el valor que vamos a asignarle a dicha propiedad.
Unidad 18. Ejemplos

ActionScript

(I) Ejemplos de uso del cdigo ActionScript

Vamos a mostrar los usos ms caractersticos de cdigo ActionScript en los diferentes objetos existentes comprenderemos mejor y porqu no, nos ahorraremos trabajo al tener ya hechos aqu muchos de los cdigo pelculas (y con garanta de que funcionan). Mostraremos el cdigo y a continuacin, una explicacin del m Cdigo ActionScript en BOTONES Los Botones (objeto Button para Flash 8) tienen mucha utilidad siempre que queramos que nuestra pelcula interacte con el usuario. Dado que esto va a ser prcticamente siempre, es conveniente estudiar y entender bien algunos cdigos tpicos que tendremos que usar para conseguir nuestros propsitos. Todos los cdigos que mostramos en este apartado DEBEN insertarse dentro del objeto de tipo Botn (Button) con el que estemos trabajando. Para ello, seleccionaremos el botn en cuestin y despus abriremos y editaremos el Panel Acciones, asegurndonos de que ste hace referencia a nuestro botn (lo indicar la cabecera de este Panel). Veamos algunos de ellos:

on (release) { gotoAndPlay(15); } Esta accin provoca que al pulsar un botn vayamos directamente al Fotograma nmero 15 de nuestra pelcula. La primera lnea indica a Flash 8 que "al pulsar el botn" haga lo que est entre las llaves " { ... } ". Este cdigo es caracterstico de los botones y nos permite controlar el pulsado del mismo. Dependiendo de lo que coloquemos entre los parentsis, la accin asociada al botn se producir en un momento o en otro. En este caso, hemos escrito "release" que significa que la accin se producir cuando, tras pulsar nuestro botn, el usuario deje de hacer clic con el ratn. La segunda lnea es la accin que se producir. En este caso, movemos la cabeza lectora de Flash al fotograma 15. on (release) { getURL("http://www.aulaclic.com", "_blank"); }

Ejemplo del c Partimos de u y una accin ellos. Hemos "Ir al Fotogr

Esta accin provoca que al pulsar un botn se abra una nueva pgin defecto y nos muestre la pgina www.aulaclic.com La primera lnea tiene la misma funcin que en el caso anterior

La segunda lnea es la llamada al navegador web propiamente dicha. direccin URL que queremos mostrar y el modo de ventana que conte se abrir una nueva ventana independiente de la actual. on (release) { r1._width=350; } Esta accin provoca que al pulsar un botn se modifiquen las propiedades del objeto cuyo nombre de instancia aparece delante de la propiedad. La primera lnea tiene la misma funcin que en el caso anterior

En la segunda lnea podemos ver la propiedad ._width (anchura), luego esta llamada va a acceder a esta propiedad. Vemos que hay un operador asignacin ( = ), luego deducimos que vamos a asignar una anchur determinada a un objeto. Qu anchura? Pues 350, que es la cantidad que aparece en la parte derecha de la expresin. Y a qu objeto? Al que va delante del ".", o lo que es lo mismo, al afectado por la propiedad. Por tanto, al pulsar el botn vamos a modificar la anchura del objeto r1, que pasar a ser de 350 px. Cdigo ActionScript en CLIPS DE PELCULA Los Clips de Pelcula (objeto MovieClip) son pelculas dentro de pelculas. Pueden tener cdigo AS dentro de s mismos (al igual que los botones), aunque suele ser ms comn que algn otro cdigo externo (situado en fotogramas) les haga referencia. Para que el cdigo que contengan los clips de pelcula sea vlido,

stos deben tener algun evento de clip asociado (Load, KeyDown etc) que determine cundo se ejecutar este cdigo (al cargarse el clip, al pulsar alguna tecla ...) Veamos algunos de estos cdigos:

loadMovieNum("aulaClic.swf", 0); Este cdigo AS situado dentro de un fotograma, provoca que nuestra pelcula Flash busque una pelcula llamada "aulaClic.swf" EN LA CARPETA RAZ y la cargue en el nivel 0, es decir, en el mismo nivel que la pelcula actual. La carpeta raz es la carpeta en la que est la pelcula principal (la que tiene este cdigo).

loadMovieNum("mifoto.jpeg", 0); Este cdigo nos permite cargar en un fotograma una imagen existente en nuestra carpeta raz con extensin .JPEG de un modo dinmico. Por dinmico entendemos en tiempo de ejecucin, lo que significa que el tamao de la pelcula no lo notar, ni tampoco la velocidad de descarga de nuestra pelcula. Slo cuando haga falta ver la imagen y se acceda al fotograma que realice esta llamada, se cargar la imagen y se podr ver en la pelcula. La cargamos en el nivel 0. Si tuviramos la imagen en una carpeta llamada "Imgenes" que se encuentra dentro de nuestro directorio raz, podramos acceder a ella del siguiente modo: loadMovieNum("Imagenes/mifoto.jpeg", 0);

Es conveniente remarcar tambin, que la imagen debe estar en formato .JPEG, no sirve el formato .JPG. La siguiente accin debe incluirse Partimos de una pelcula con 2 fotogramas distintos. dentro de un botn, pues suceder al hacer clic sobre l (de este En el primer fotograma estn el botn y el clip de pelcula (r1) cor modo el ejemplo es ms prctico) pelcula tiene en su lnea de tiempos una animacin, inicialmente se accede a su fotograma 2. on (release) { r1.gotoAndPlay(2); En el segundo fotograma no nos importa lo que haya porque la a } nos llevar hasta all. La cabeza lectora de la pelcula principal es Esta accin provoca que al pulsar un botn vayamos al fotograma 2 de un Clip de Pelcula determinado. El

fotograma de la pelcula principal NO VARIAR. La primera lnea es la comentada anteriormente La segunda lnea es la accin que se producir. Flash busca un objeto llamado r1 de tipo clip de pelcula (movieclip) y mueve su cabeza lectora hasta el fotograma 2. La cabeza lectora de la pelcula principal es completamente INDEPENDIENTE de la cabeza lectora de los clips de pelcula y no se ver alterada. Unidad 18. Ejemplos ActionScript (II) Ejemplos de manejo de Sonidos con ActionScript Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash 8 los sonidos tambin son objetos y podemos manejarlos usando adecuadamente ActionScript. Veamos unos cuntos cdigos muy comunes y un completo ejemplo de cmo usarlos: /* Cdigo 1 */ musica = new Sound(); musica.loadSound("sonido.mp3",false); Estas 2 lneas cargan un sonido y le dan nombre. La primera lnea le dice a Flash que vamos a crear un nuevo objeto de tipo Sonido y que se va a llamar "musica". La segunda lnea carga un sonido de nuestro disco duro llamado "sonido.mp3" y lo carga dentro del objeto musica. El segundo parmetro "false" indica que es un sonido de "evento", y que, por tanto, se cargar completamente antes de comenzar a reproducirse.

/* Cdigo 2 */ musica.stop(); Este cdigo detiene el sonido "musica" al instante.

/* Cdigo 3 */

musica.stop(); musica.start(0,99); La primera lnea como ya hemos visto, detiene el sonido "musica". La segunda lnea provoca que el sonido "musica" comience a reproducirse (start) a partir de su posicin inicial (el 0 indica los segundos transcurridos desde el comienzo) y lo haga 99 veces. (esto se llama loop o bucle)

/* Cdigo 4 */ musica.stop(); musica.start(0,0); Este cdigo detiene el sonido "musica" y a continuacin lo reinicia, reproducindolo slo 1 vez. Ahora que ya sabemos controlar los sonidos mediante ActionScript, veamos un ejemplo que reune todo lo visto anteriormente. En este ejemplo: - Tenemos un nico fotograma con 3 botones. En este fotograma tenemos insertado el Cdigo 1. - Los 3 botones tienen distintas funcionalidades: - En el botn rojo, est insertado el Cdigo 2 - En el botn azul, est insertado el Cdigo 3 - En el botn verde, est insertado el Cdigo 4 Ejemplos de ActionScript en objetos abstractos. El objeto MATH Como ya sabemos, los objetos no visibles tambin se controlan con ActionScript. Vamos a ver algunos ejemplos del funcionamiento del objeto Math y como sacarle partido.

x = Math.random(); El Mtodo "random" del objeto Math genera un nmero aleatorio entre 0 y 1. En este caso, el resultado lo almacenamos en la variable x, para poder usarlo despus... Las utilidades de este mtodos son muchas, generar claves secretas, passwords, nmeros de loteria etc...

x = Math.round(4,3); El Mtodo "round" REDONDEA el parmetro introducido eliminando la parte decimal del mismo. En el ejemplo, x pasara a valer 4.

x = Math.max(5 , 2); El Mtodo "max" obtiene el valor mximo entre 2 nmeros. En el ejemplo, x pasara a valer 5.

El objeto Math es muy til y nos ahorra mucho trabajo, pues hay multitud de operaciones que responden a alguno de sus mtodos y no tenemos porqu implementar. Basta buscarlos en el manual y usarlos. Creacin de un cargador o preloader Vamos a analizar el cdigo de un cargador o preloader para acabar de afianzar nuestros conocimientos de ActionScript: Los cargadores o preloaders slo son necesarios cuando las pelculas adquieren un tamao considerable y resulta inviable visionar la pelcula sin tenerla toda cargada (porque se atasca, aparecen partes incompletas etc...). Vamos a suponer pues, que tenemos una pelcula con 150 fotogramas. Los 3 primeros los reservaremos para crear nuestro cargador. En el Fotograma 4 comienza la pelcula... NOTA: Junto a cada lnea insertaremos comentarios (texto entre los smbolos /* y */) que son lneas que Flash reconoce como tales y que no tiene en cuenta a la hora de ejecutar el cdigo (es como si no existieran). Se usan para clarificar y esplicar el cdigo que escribamos y para eso lo usaremos a continuacin. Les cambiaremos el color para que resalten an ms. Evidentemente no son necesarios en el cdigo que finalmente insertemos en nuestra pelcula.

Este es el cdigo que insertaremos: ----------------------------------------------------------------------------/* Fotograma 1 */ bytes_totales = getBytesTotal(); /* Hallamos el tamao de nuestra pelcula con la Accin "getBytesTotal()" y lo almacenamos en la variable bytes_totales. */ -----------------------------------------------------------------------------

/* Fotograma 2 */ bytes_cargados = getBytesLoaded(); /* Hallamos los bytes que llevamos cargados en memoria hasta el momento. Este valor lo asignamos a la variable bytes_cargados */ if (bytes_cargados >= bytes_totales) { /* Esta es la lgica del cargador. Si llevamos cargados en memoria los mismos bytes o ms de los que ocupa la pelcula, ejecutamos la siguiente lnea */ gotoAndPlay(4); /* Si hemos llegado hasta aqu es porque toda la pelcula est cargada en memoria (bytes_cargados >= bytes_totales) y podemos comenzar a ver la pelcula. Ejecutamos gotoAndPlay(4) que nos llevar hasta al fotograma donde comienza la pelcula. */ } else { /* Si aun no hemos cargado toda la pelcula */ porcentaje = ((bytes_cargados/bytes_totales)*100); /* Averiguamos el porcentaje que llevamos cargado realizando la divisin entre los bytes_cargados y los bytes_totales y multiplicndolo por 100 */ txt_salida = Math.floor(porcentaje)+"%"; /* Almacenamos en la variable "txt_salida" el porcentaje que llevamos junto al smbolo "%". En la pelcula principal tendremos un campo de texto dinmico llamado "txt_salida" que nos mostrar el porcentaje de pelcula que llevamos cargado en cada instante */ } -----------------------------------------------------------------------------

/* Fotograma 3 */ gotoAndPlay(2); /* Si llegamos al fotograma 3 es porque no est cargada toda la pelcula, de lo contrario estaramos ya en el fotograma 4. Como an no est cargada,

volvemos al fotograma anterior para ver si ya lo est (mediante gotoAndPlay(2);). Esto lo haremos tantas veces como haga falta para dar tiempo al ordenador del usuario a ir cargando en memoria la pelcula. */ -----------------------------------------------------------------------------

Resumiendo: Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la pelcula. Despus pasamos al Fotograma 2. Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro cdigo ActionScript averigua los bytes que llevamos cargados en memoria y los compara con los totales (que se hallaron en el Fotograma 1 y no vuelven a averiguarse, pues no varan). Si ya est toda la pelcula cargada, vamos al fotograma 4 y comenzamos a reproducir la pelcula, sino, pasamos al fotograma 3 Fotograma 3: El Fotograma 3 volver a mandar la cabeza lectora al fotograma 2. Haciendo este ciclo, damos tiempo al ordenador a ir cargando poco a poco la pelcula, hasta que llegue un momento que est toda cargada y pasemos al Fotograma 4. El clculo del porcentaje es un "adorno" que nos permitimos, pues con un poco ms de esfuerzo averiguamos cunta pelcula llevamos cargada y la mostramos por pantalla de un modo elegante (en porcentaje) haciendo la espera del usuario menos aburrida. Fotograma 4: Aqu comienza la pelcula... (Ya no se volver nunca a ninguno de los fotogramas anteriores). A la derecha mostramos el resultado. La pelcula se comenzar a cargar al pulsar el botn. El cdigo insertado es EXACTAMENTE el que se muestra arriba, no hay NADA MS. Tan slo se han aadido unos textos y unas imgenes para aumentar el tamao de la pelcula, de lo contrario la carga sera demasiado rpida y no llegara a verse. Tambin se ha insertado el texto dinmico que muestra el porcentaje. Si el cargador no llega a verse, lo ms probable sea que ya est cargada en la memoria cach de vuestro ordenador o que esteis viendo este curso desde el CD-Rom o desde vuestro propio Disco Duro, donde la velocidad de descarga estan rpida que sera necesaria una pelcula de varios MBytes para que hiciera falta un cargador. Probad el cdigo en una pelcula que coloqueis en un servidor web y podreis ver los resultados sin problemas.
Unidad 19. Flash.

Navegacin (I).

En este tema veremos los puntos ms importantes en los que te podrs apoyar para realizar tus animaciones en Flash usando ActionScript.

Esta unidad, la de Navegacin, est especialmente orientada a la web, pues veremos cmo crear elementos que te ayudarn ms tarde a crear tus propias presentaciones, secciones, etc. Todo ello apoyado con animaciones y vinculadas entre s. A lo largo del tema utilizaremos este ejemplo para ilustrar la teora de forma guiada.

Los Botones Uno de los elementos que ms nos van a ayudar a la hora de aadir interactividad en el diseo son los botones. En el ejemplo nos hemos ayudado de los botones para crear la navegacin entre las diferentes secciones.

As que el primer paso, despus de haber creado la interfaz de la pelcula en una capa, ser crear e insertar los botones en una nueva capa para trabajar con mayor facilidad. Para asignarle una accin a un botn es necesario darle un nombre de instancia. Para ello (y como hemos visto en unidades anteriores) escribimos el nombre que queramos (al cual nos referiremos ms tarde para llamar al botn) en el Inspector de Propiedades, en este caso lo hemos llamado equipo.

Luego, con el botn seleccionado, abrimos el Panel Acciones y aadiremos el cdigo que deber realizar el botn. sta es la parte ms importante pues deberemos decidir a qu estmulo (o evento) responder el botn. Existen varios eventos que son capturados en Flash, nombraremos los ms importantes:

press: ejecuta la accin al presionarse el botn.

release: ejecuta la accin al soltarse el botn (despus de haberlo presionado).

rollOver: ejecuta la accin al desplazar el ratn dentro del botn.

rollOut: ejecuta la accin al desplazar el ratn fuera del botn.

Por ello, escribiremos en el panel acciones el siguiente cdigo para nuestros botones:
on (release) { }

Nota: ActionScript diferencia entre maysculas y minsculas, por lo que si escribes, por ejemplo, Release no ser reconocido.

Entre las llaves {} introduciremos el cdigo que queremos que se ejecute al producirse el evento seleccionado sobre el botn.

Existen ms manejadores de eventos que puedes revisar en este tema avanzado.

Unidad 19. Avanzado. Manejadores

de Botn

Puedes manejar otros eventos adems de los mencionados anteriormente (press, release, rollOver y rollOut), y son los siguientes:

dragOut: se ejecuta cuando se presiona el botn y, sin soltarlo, el ratn se desplaza fuera de l.

dragOver: se ejecuta cuando se presiona el botn y, sin soltarlo, el ratn se desplaza fuera de l para luego volver a situarse sobre ste.

releaseOutside: se ejecuta cuando se presiona el botn y, sin soltarlo, el ratn se desplaza fuera de l y luego se suelta el botn del ratn. Observa que antes de producirse este evento se han producido antes los eventos release y dragOut.

Siguiendo la misma sintaxis puedes aadir un manejador de eventos de teclado:

on (keyPress) { }

De este modo, si se pulsase una tecla determinada se ejecutara una accin:

on (keyPress) { if (Key.getCode() == Key.RIGHT) { // ejecutar cualquier accin } }

En este ejemplo, cuando se produce una pulsacin de tecla se evala en la segunda lnea. Si la tecla pulsada es la flecha Derecha se ejecutar la accin determinada.
Unidad 19. Flash.

Navegacin (II).

Controladores de la lnea de tiempo Una vez insertados los botones y definidos los eventos sobre los que deben actuar, tendremos que decidir qu queremos que hagan. De esta forma podremos crear dinamismo entre nuestras secciones. Imagina que tenemos la siguiente lnea de tiempo:

Observa la capa Contenido. En ella se encuentran todo el contenido de las secciones. De esta forma, si no aplicsemos ninguna accin sobre la lnea de tiempo, todas las secciones se ejecutaran una seguida de la otra. Lo que queremos conseguir es que se ejecute la primera (para mostrar la seccin principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda). Para ello utilizaremos la funcin stop(). Esta funcin sirve para parar el cabezal de la lnea de tiempo donde sea colocada. As que seleccionamos el ltimo fotograma de la seccin y abrimos el Panel Acciones. All deberemos escribir nicamente la lnea:
stop();

Esto har que cuando la animacin llegue a ese punto se detendr a espera de nueva orden. Nosotros hemos colocado las acciones en una capa aparte llamada Acciones para as poder acceder ms rpido a ella. El mtodo es el mismo, solamente habr que crear fotogramas claves en aquellos sitios en los que queramos insertar un stop().

Ya hemos conseguido detener la presentacin. Pero, cmo hacemos que se muestre la segunda? Muy sencillo. Los botones nos ayudarn a desplazar el cabezal por la lnea de tiempo. As que modificaremos el cdigo de uno de los botones donde habamos escrito:
on (release) { }

Para que se pueda leer lo siguiente:

on (release) { gotoAndPlay(21);

De esta forma, al hacer clic sobre ese botn, el cabezal de reproduccin se desplazar hasta el fotograma 21 y reproducir a partir de all. Si aadimos un stop() en el ltimo fotograma de la segunda seccin, cuando ste se reproduzca se parar y el contenido permanecer esttico en espera de una nueva orden.

Existe otra forma, muy til, para nombrar los fotogramas. Del mismo modo que dbamos un nombre de instancia a un botn lo haremos con un fotograma. Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a ste:

Por ejemplo:
on (release) { gotoAndPlay("encuentranos"); }

Adems de estos controladores podemos utilizar tambin:

gotoAndStop(fotograma), que situar el cabezal en el fotograma indicado y parar la reproduccin.

play(), que har que la reproduccin prosiga en el fotograma en el que se encuentre el cabezal.

prevFrame(), que har que el cabezal retroceda al fotograma anterior al que nos encontramos.

nextFrame(), que har que el cabezal avance al fotograma siguiente al que nos encontramos.

Es posible el uso del Panel Comportamiento para crear saltos a fotogramas de forma sencilla y sin tener que escribir ninguna lnea de cdigo, para ver cmo se hace visita este tema bsico.
Unidad 19 .

Nivel Bsico. Comportamientos

Comportamientos Es posible asignar un salto de fotograma a cualquier fotograma u objeto sin tener que acceder al Panel Acciones, para ello simplemente selecciona el objeto o fotograma y haz clic en Ventana Comportamientos. Se abrir el siguiente panel:

Desde aqu aadir acciones es muy sencillo. El nico inconveniente es que las opciones son bastante limitadas y no son tan verstiles como la escritura directa del cdigo ActionScript. Para crear un salto en la lnea de tiempo debers hacer clic en el botn comportamiento nuevo. para aadir un

Luego selecciona Clip de Pelcula y podrs elegir entre dos opciones que nos interesan:

Como hemos visto anteriormente la diferencia entre la opcin Ir y detener en fotograma o etiqueta e Ir y reproducir en fotograma o etiqueta es simple. La primera desplaza el cabezal hasta el fotograma indicado y lo detiene all. La segunda desplaza el cabezal y sigue reproduciendo a partir de all. Elijas la opcin que elijas, el cuadro de dilogo que se abrir ser similar:

En esta ventana debers especificar el fotograma al que quieres saltar. Podrs referirte a l como un nmero o como una etiqueta (si se le fue asignada una). El campo relativo/absoluto lo explicaremos ms adelante cuando veamos los movieclips. Pero, como adelanto, en principio no importa cul de los dos elijas si no vas a utilizar el smbolo asociado a la accin en otro sitio. De todas formas es recomendable el uso de la opcin Relativo, pues as el salto se har respecto al objeto en s y no al lugar en el que se encuentra. Pulsa el botn Aceptar y el cdigo ActionScript se generar solo. No tendrs que hacer nada ms.

Existen los controladores prevScene() y nextScene() que hacen avanzar el cabezal a escenas anteriores o siguientes. As que veremos qu son las escenas para poder utilizarlos tambin.
Unidad 19. Flash.

Navegacin

(III). Las Escenas Flash permite el uso de escenas para separar diferentes temas en una sola pelcula. Se suelen utilizar sobre todo en animaciones, donde una parte de la accin transcurre sobre un fondo y la siguiente sobre otro completamente diferente. De este modo podemos usar las escenas para representar diferentes secciones muy diferentes en nuestra pelcula, por ejemplo, crear una escena para el cargador, otra para la pelcula principal y una tercera para una seccin que se diferencie completamente del resto y nos sea ms cmodo trabajar con ella independientemente. A pesar del hecho de que las escenas se trabajan como lneas de tiempo diferentes, al crear el archivo SWF stas se alinean en orden reproducindose una detrs de otra. Por ello, al publicar el documento los fotogramas de las escenas se numerarn respecto a esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda escena comenzar en el fotograma 51. Todo esto hace que las escenas, en algunos casos estn desaconsejadas por las siguientes razones:

El uso de escenas obliga al usuario a descargar el documento en su totalidad, a pesar de que es posible que no navegue por todas las secciones. Existe la posibilidad, como veremos ms adelante, de cargar en cualquier momento archivos SWF para reproducirlos en la pantalla principal. De esta forma emularamos el uso de las escenas cargando diferentes documentos dependiendo de la seccin a mostrar.

Cuando aadimos ActionScript a nuestras escenas el resultado puede ser, a veces, imprevisible. Como hemos explicado anteriormente, al crearse un archivo con una lnea de tiempo continua las acciones a realizar pueden ser inesperadas.

En el Panel Escena (brelo desde Ventana Otros paneles Escena) podrs ver las escenas actuales de la pelcula.

En principio solamente encontrars una (Escena 1), es posible aadir ms escenas pulsando el botn Aadir escena . Para cambiar el nombre de una escena haz doble clic sobre su nombre en el panel y escribe el que quieras. Puedes eliminar una escena utilizando el botn Eliminar escena botn Duplicar escena . o duplicarla con el

Como hemos comentado antes (y si no existe cdigo ActionScript que modifique esto) las escenas se reproducen una despus de la otra en el orden en el que se encuentran en el Panel Escena. Puedes cambiar este orden con solo arrastrar y colocar la escena en cuestin en su lugar correspondiente. Trabajar con una escena es muy sencillo, basta con seleccionarla en el panel y su contenido se mostrar en el Escenario. Podrs trabajar con ella como si se tratase de una pelcula independiente. Pero veamos cmo podemos utilizar ActionScript para desplazarnos de escena a escena. Antes hemos mencionado las funciones prevScene() y nextScene(). Estos comandos hacen que el cabezal de reproduccin se desplace de una escena a otra en el orden en el que se encuentran en el Panel Escena. Pero existe otra posibilidad. Segn el ejemplo que estamos siguiendo creamos una nueva escena llamada escena_otros. En el botn Otros Restaurantes hemos aadido el siguiente cdigo:
on (release) { gotoAndPlay("escena_otros", 1); }

Con esto estamos indicando que al soltarse el botn el cabezal se desplace al fotograma 1 de la escena escena_otros y empiece a reproducirse a partir de all. Sencillo, verdad?
Unidad 19. Flash.

Navegacin

(IV).

Los MovieClips En el tema de Clips de Pelcula vimos que se tratan de objetos con lnea de tiempo propia. Podemos utilizarlos para incluir elementos en nuestra pelcula con una animacin independiente. De este modo aunque la pelcula principal est detenida el clip seguir actuando segn su propio cabezal de reproduccin. Existen mtodos para manejar la lnea de tiempo de los clips, idnticas a las anteriores, y que veremos a continuacin. Lo primero que deberemos aprender es a acceder a las propiedades y mtodos de los objetos. Esto es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con un ejemplo. Queremos que al pulsar un botn el movieclip avance en su lnea de tiempo hasta su fotograma 20. El cdigo que deberemos escribir en el botn ser el siguiente:
on (release) { miClip.gotoAndPlay(20); }

Fjate en cmo hemos escrito la funcin. Primero hemos sealado el clip sobre el que queremos actuar escribiendo su nombre de instancia:

Y despus de aadir un punto hemos indicado la funcin que se ejecutar. De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las propiedades del clip. Escribiendo esta lnea haremos que el clip se haga invisible:
on (release) { miClip._visible = false; }

Para hacerlo un poco ms complicado podramos encontrarnos en el siguiente supuesto. Imagina que tenemos un movieclip llamado clipPadre. Dentro de este clip de pelcula tendremos ms smbolos y uno de ellos puede ser otro movieclip llamado clipHijo.

Cmo accedemos a las propiedades y funciones de clipHijo? Muy fcil. Suponiendo que estamos trabajando desde la pelcula principal donde tenemos insertado el clipPadre, escribiremos lo siguiente:
clipPadre.clipHijo.play();

As haremos que la reproduccin de clipHijo se reaunde. Pero, qu pasa si queremos ejecutar la orden desde dentro de clipPadre? Imagina que dentro del movieclip hay un botn y el clip clipHijo. Queremos que al pulsar el botn se reproduzca el fotograma 20 de clipHijo, entonces deberamos escribir lo siguiente en las acciones del botn:
on (release) { clipHijo.gotoAndPlay(20); }

Como puedes ver esta vez no hemos mencionado a clipPadre en la lnea de cdigo. No es necesario porque ya nos encontramos dentro de l. Tambin podemos referenciarnos a elementos superiores utilizando la palabra reservada _parent. De este modo si nos encontrsemos dentro de clipHijo y quisisemos avanzar al fotograma 20 de clipPadre deberamos escribir:
this._parent.gotoAndPlay(20);

Donde this indica el clip donde nos encontramos y _parent hace que nos coloquemos en el nivel inmediatamente superior. De esta forma, slo deberemos escribir la ruta de contenedores o padres hasta llegar al objeto del cual queremos modificar o ejecutar un mtodo.

Por lo dems, el funcionamiento de un clip no se diferencia en nada a la lnea de tiempos de cualquier otra pelcula. Podemos etiquetar los fotogramas de igual modo para llamarlos directamente por su nombre:
miClip.gotoAndStop("etiqueta");

Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que nosotros queramos.

Igual que vimos antes con los botones, los movieclips tienen manejadores que nos permitirn ejecutar cdigo dependiendo de los eventos que se produzcan sobre ellos. Los que ms utilizaremos sern:

mouseMove: se ejecuta cuando el ratn se mueve sobre el fotograma. Puedes utilizar las propiedades _xmouse e _ymouse para averiguar la posicin del ratn en ese momento.

mouseDown: se ejecuta cuando se presiona el botn del ratn.

mouseUp: se ejecuta cuando se suelta el botn del ratn.

keyDown: se ejecuta cuando se presiona una tecla.

keyUp: se ejecuta cuando se suelta una tecla.

Estos manejadores de eventos se deben de utilizar con el controlador onClipEvent. Veamos un ejemplo:
onClipEvent (mouseUp) { this._visible = true; }

Este bloque de cdigo debe situarse en las acciones del movieclip (igual que hacemos con los botones). Es por ello que al referirnos a la propiedad _visible escribimos antes this para referenciar el clip en cuestion. this siempre har referencia al objeto donde se encuentre la variable. Nota: Estos manejadores son tan vlidos para movieclips como para la pelcula general en s, pues podramos considerar que una pelcula es un movieclip ms grande.

Tambin existen modos de capturar estos eventos sin tener que escribir el cdigo dentro del movieclip. Sera de la siguiente forma:
miClip.onPress = function() { miClip.play(); }

Estos eventos tienen que asociarse con una funcin (veremos este concepto en el punto siguiente). Pero de esta forma podemos escribir el cdigo directamente sobre el fotograma y controlar cuando se ejecuta una accin sobre el movieclip.

En el ejemplo, el clip comenzar a reproducirse en cuanto se haga clic sobre l. Veamos el conjunto de eventos ms importantes para los movieclips:

onPress = function() {}: se ejecuta cuando se presiona el botn del ratn sobre el movieclip.

onRelease = function() {}: se ejecuta cuando se suelta el botn del ratn sobre el movieclip.

onRollOver = function() {}: se ejecuta cuando se desplaza el ratn dentro del movieclip.

onRollOut = function() {}: se ejecuta cuando se desplaza el ratn fuera del movieclip.

onKeyDown = function() {}: se ejecuta cuando se presiona una tecla con el clip de pelcula resaltado.

onKeyUp = function() {}: se ejecuta cuando se suelta una tecla con el clip de pelcula resaltado.

Obviamente, existen muchos ms eventos que podrs aprender en este tema avanzado.

Veamos el ejemplo:

Si observas tenemos dos movieclips en la pelcula, uno de ellos llamado estrella, y el otro detalle. La lnea de tiempo de estos movieclips tendra este aspecto:

Como puedes ver tenemos una cuarta capa que se llama acciones. All colocaremos las acciones que se asociarn a este fotograma:
estrella.onPress = function() { estrella.gotoAndPlay("desaparece"); detalle.gotoAndPlay("aparece"); }

Este cdigo har que cuando se presione el clip estrella se desplacen los cabezales en los clips detalle y estrella a las etiquetas de fotogramas que se indican. Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de cdigo:
detalle.onPress = function() { estrella.gotoAndPlay("aparece"); detalle.gotoAndPlay("desaparece"); }

Esto har algo parecido a lo anterior, cuando se presione el clip detalle los cabezales de ambas pelculas se desplazarn a las respectivas etiquetas de fotograma.
Unidad 19. Flash.

Navegacin (V).

Las Variables Las variables son contenedores donde podremos almacenar informacin para trabajar con ella. Esta informacin puede ser modificada y leda. Aunque parece un concepto muy complejo su uso es bastante sencillo. En ActionScript existen 8 tipos diferentes de variables, los que ms utilizaremos sern los siguientes:

Boolean: o booleano, puede almacenar slo dos valores, o true (verdadero) o false (falso).

Number: puede almacenar nmeros enteros o decimales, positivos o negativos. El signo decimal en ActionScript es el punto (.). Podrs realizar operaciones matemticas con estas variables.

String: puede almacenar cadenas de caracteres, es decir, un conjunto de caracteres alfanumricos. Las variables de tipo String deben ir entre comillas dobles (").

Para declarar (crear) una variable slo tendrs que escribir la siguiente lnea:
var nombreVariable:tipoVariable = valorVariable;

Veamos el ejemplo para verlo ms claro. Haremos que el clic sobre el movieclip estrella slo se ejecute si el detalle no est an mostrado. Y al revs. Que slo se ejecute el cdigo al hacer clic en el detalle si ste se encuentra fuera.
var estrella_activada:Boolean = true; estrella.onPress = function() { if (estrella_activada == true) { estrella.gotoAndPlay("desaparece"); detalle.gotoAndPlay("aparece"); estrella_activada = false; } } detalle.onPress = function() { if (estrella_activada == false) { estrella.gotoAndPlay("aparece"); detalle.gotoAndPlay("desaparece");

estrella_activada = true; } }

Fjate en las dos primeras lneas, se declaran dos variables booleanas. Una dice que la estrella se encuentra activada y la otra que el detalle se encuentra desactivado. Al hacer clic en el movieclip estrella se evala la variable estrella_activada si sta es verdadera (true) entonces permite que se realicen las acciones. En caso contrario, sale de la condicin. Al entrar en la condicin se desplazan los cabezales y se modifica el valor de la variable a falso para que la prxima vez que intente entrar no puedan ejecutarse las acciones. En el onPress del clip detalle se evala de nuevo la variable. Esta vez debera estar en false porque si el detalle est fuera es porque ya se ha hecho clic sobre la estrella y ha pasado por el anterior bloque.

A medida que vayamos avanzando iremos usando otras variables de diferentes tipos. Vers que su uso no difiere mucho al que hemos explicado ahora. Antes de terminar con este tema deberamos ver algo muy importante: el mbito de las variables. Esto es, el sitio donde puedan utilizarse las variables. Nota: Para explicar el mbito de las variables utilizaremos la funcin trace(variable) que enva el contenido de la variable al Panel Salida. Puedes abrir este panel desde Ventana Salida.

Exiten 3 mbitos de variables: el local, el global y el de lnea de tiempo.

Las variables declaradas en la lnea de tiempo pueden utilizarse en cualquier fotograma posterior y su contenido se mantendr intacto. Por ejemplo, declaramos la siguiente variable en el fotograma 1:
var miVariable:String = "Esta es mi variable";

Y en el fotograma 15 colocamos las siguientes lneas en el Panel Acciones:

trace(miVariable); stop();

Vers como al probar la pelcula en el Panel de Salida aparece escrito el contenido de la variable. Ten en cuenta que si declaras la variable en el fotograma 2 no estar disponible en fotogramas anteriores, es decir en el 1.

Las variables declaradas en un mbito local sirven slo para un bloque de funcin. Veamos este ejemplo:
function miFuncion() { var miVariable:Number = 1; trace(miVariable); miVariable = 2; trace(miVariable); } miFuncion(); trace(miVariable);

En el primer bloque definimos una funcin (hablaremos de ellas ms a fondo en el siguiente apartado). En esta funcin se declara una variable y se enva su contenido al Panel Salida. Luego modificamos el contenido de la variable y volvemos a enviar el contenido a Salida. Observa que despus llamamos a la funcin, esto har que se ejecute su cdigo, por lo que en el Panel Salida se mostrar 1 y 2. Luego intentamos enviar el contenido de la variable a Salida y el resultado que obtenemos es undefined. Esto es porque la variable no est definida, pues solamente la habamos declarado para el bloque de la funcin. Utilizando las variables de esta forma slo podremos acceder a ellas desde el bloque de funcin donde estn declaradas. Una vez fuera de ste las variables dejan de existir.

Las variables de mbito global son mucho ms flexibles, estn disponibles en cualquier fotograma y funcin. Su modo de declaracin es la siguiente:
_global.miVariable = "Esta es una variable global";

Podrs acceder a ella en cualquier momento. Las variables globales no tienen tipo, y pueden tomar cualquier valor.

Nota: Si en algn sitio declaras una variable local con el mismo nombre que una variable global existente no podrs utilizar la global durante todo el mbito en el que exista la local.

Comentaremos tambin la existencia de las variables de tipo matriz (o array). stas pueden almacenar diferentes variables en un solo objeto. Veamos un ejemplo para verlo ms claro:
var miMatriz:Array = new Array(); miMatriz[0] = "Lunes"; miMatriz[1] = "Martes"; miMatriz[2] = "Mircoles"; miMatriz[3] = "Jueves"; miMatriz[4] = "Viernes"; miMatriz[5] = "Sbado"; miMatriz[6] = "Domingo";

As si escribimos:
Trace(miMatriz[5]);

Se mandar al Panel Salida el elemento 5 del array miMatriz en este caso Sbado. Los arrays empiezan por 0, as que es conveniente que te acostumbres a rellenar la matriz a partir de este elemento. Vers que con el tiempo te ayudar a realizar algunas funciones. Otras formas de declarar arrays son las siguientes:
var matriz2:Array = new Array("Lunes","Martes","Mircoles","Jueves","Viernes","Sbado","Doming o");

o
var matriz3:Array= ["Lunes","Martes","Mircoles","Jueves","Viernes","Sbado","Domingo"];

Puedes ver un ejemplo prctico de los arrays en este apartado bsico.

Las Funciones Como habrs visto en los ejemplos anteriores, una funcin es un bloque de cdigo que podemos utilizar en cualquier parte del archivo SWF con slo llamarla:
function miFuncion() {

var miVariable:Number = 1; trace(miVariable);

En este ejemplo hemos creado una funcin que enva el contenido de la variable miVariable al Panel Salida. Podemos escribir la siguiente lnea en cualquier momento despu de haber pasado la funcin y esta se ejecutar:
miFuncion();

Como ves, crear funciones es bastante sencillo. Adems podemos crear funciones un poco ms complejas envindole parmetros:
function enviaSalida(miVariable:String) { trace(miVariable); }

Si en cualquier momento escribimos:

enviaSalida("Hola!");

Se mostrar el mensaje en el Panel Salida. El modo de crear funciones con parmetros es bastante intuitivo. Al crear la funcin debers indicar que tipo de variable le vas a enviar. En nuestro ejemplo hemos definido el parmetro como de tipo String. De este modo podrs utilizar la variable miVariable dentro de la funcin y trabajar con ella como quieras. Para llamar a la funcin slo debers escribir su nombre y indicarle el parmetro que le quieres enviar. Puedes crear funciones con ms de un parmetro, para ello slo tendrs que separar stos por comas:
function miFuncion(parametro1:String, parametro2:Number, parametro3:Boolean) { // cdigo } miFuncion("hola", 2, false); Unidad 19. Flash. Navegacin

(VI). Cargando Archivos

Una vez vistos todos estos conceptos pasaremos a ver una funcin en concreto, la funcin LoadMovie. Esta funcin te permite modificar el contenido de un clip de pelcula y cargar en l otro archivo SWF o incluso una imagen con formato JPG, GIF o PNG. Su uso es el siguiente:
miMovieClip.loadMovie("pelis/clip.swf");

Con esto lo que hemos hecho es cambiar el contenido del clip miMovieClip y lo hemos sustituido por el archivo clip.swf que se encontraba en la carpeta pelis. Es sencillo, verdad?

Tambin puedes utilizarla de esta forma:

loadMovie("archivo.swf", miMovieClip);

Es una variacin de la anterior, aqu indicamos qu archivo queremos cargar y dnde. Si en vez de cargarlo en miMovieClip lo cargasemos en this se cargara en el clip en el que est contenida la funcin. Incluso si ste es el clip de pelcula principal.

Vamos al ejemplo. En la seccin Encuntranos hacemos clic en un botn de tipo texto y nos aparece el mapa donde localizar el restaurante:

El cdigo que hemos insertado en el botn es sencillo:

on (release) { loadMovie("mapa.swf", this); }

Los parmetros que le hemos pasado son el nombre de la pelcula a cargar y su destino (this, el propio clip donde estaba el botn).

Una lnea equivalente hubiese sido esta:

this.loadMovie("mapa.swf");

Para descargar archivos cargados con la funcin loadMovie utiliza unloadMovie. Esto nos servir para liberar a un movieclip de la pelcula o imagen que habamos cargado, dejndolo vaco. Su sintaxis es la siguiente:
miClip.unloadMovie();

o
unloadMovie(miClip);

Existe la posibilidad de cargar archivos de otra manera, en vez de indicando su destino indicaremos su nivel. Esto es, vamos a cargar varios archivos en un mismo sitio y los dispondremos uno encima de otro, de forma que los que se encuentren en capas superiores taparn a los de abajo. Para ello deberemos utilizar la funcin loadMovieNum:
loadMovieNum("primera.swf", 0); loadMovieNum("segunda.swf", 1); loadMovieNum("tercera.swf", 2);

En este ejemplo hemos cargado 3 archivos SWF en el mismo sitio. Los tres estarn disponibles a la vez, pero la pelcula tercera.swf ser la que se encuentre en el nivel superior. Como puedes ver, al no poder indicarse un destino, debers introducir esta funcin dentro del clip que quieres modificar. Si fuese escrita en el cdigo del fotograma actuara directamente sobre la pelcula principal. Nota: Las pelculas cargadas en el nivel 0 sern las que establezcan la velocidad y tamao de fotogramas y su color de fondo para el resto de los fotogramas aadidos en niveles superiores.

Podemos referirnos a pelculas cargadas en diferentes niveles y modificar sus propiedades utilizando la sintaxis:
_level1._visible = true;

E incluso llamar a objetos contenidos en esas pelculas aadiendo, simplemente, el nombre de instancia de ste:
_level1.miClip._visible = true;

Sigue el siguiente ejercicio paso a paso para ver cmo hacer una Pelcula con Niveles

Podemos descargar pelculas cargadas con la funcin loadMovieNum utilizando unloadMovieNum:

unloadMovieNum(2);

En esta funcin slo debemos indicar el nivel donde est situada la pelcula que queremos descargar y cada ms. El uso de estas funciones es bastante sencillo y te ayudarn mucho en la eficiencia de tus pelculas. Ten en cuenta lo que decamos antes de las escenas. Si creamos una pelcula con varas escenas se almacenarn todas en un solo archivo, y el usuario tendr que descargarse el archivo entero para poder ver aunque sea una parte mnima de la pelcula. Utilizando estas funciones podemos optimizar el tiempo de descarga, pues de este modo el usuario slo se descargar los archivos que desee visualizar.
Unidad 19. Flash.

Navegacin

(VII). Cargando Informacin En este apartado veremos cmo utilizar un cargador para recoger informacin de un archivo y mostrarla en una pelcula Flash. Nos basaremos en el siguiente ejemplo:

Observa la lnea de tiempos:

En la capa de acciones escribiremos todo el cdigo para que funcione la pelcula. La capa diapositivas contiene el efecto que hace que la imagen se desvanezca para volver a aparecer. Ahora explicaremos cmo lo hemos hecho. Antes que nada aadimos un stop() en el primer fotograma para detener la accin y reanudarla ms tarde con el botn al que le hemos aadido el siguiente cdigo:
on (release) { gotoAndPlay (2); }

Para que pase al fotograma dos y comience la transicin. Igualmente hemos aadido un stop() en el fotograma 11 para que se detenga la transicin y espere a que se pulse de nuevo el botn y vuelva al fotograma 2. La transicin es muy sencilla. En la capa diapositivas hemos aadido un clip de pelcula llamado contenedor del tamao de la pelcula, que ser donde carguemos las imgenes con la funcin loadMovie, y hemos incluido dos interpolaciones de movimiento. En el fotograma 6 bajaremos la propiedad Alfa al 0% en el Panel Propiedades. As conseguiremos el efecto de la transicin. Mientras en el fotograma 6 aadiremos el cdigo que har que se cargue la imagen en contenedor y se actualicen los campos de textos descripcion_txt y titulo_txt incluidos en la capa area_texto en un clip llamado textoDiapositiva.

Ahora que conocemos el funcionamiento veamos el cdigo que hemos aadido en los fotogramas 1 y 6. Fotograma 1:
stop(); var archivo:String = "diapositivas.txt"; var total:Number = 4; var imagenActual:Number = 1; var matrizImagenes:Array = ["imagenes/imagen1.jpg", "imagenes/imagen2.jpg", "imagenes/imagen3.jpg", "imagenes/imagen4.jpg"]; // cargador del archivo .txt

var cargador:LoadVars = new LoadVars(); cargador.onLoad = function(exito:Boolean) { if (exito) { textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual); //recupera la descripcin textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual); //recupera el ttulo } else { textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto"; textoDiapositiva.titulo_txt.text = "Error"; } } cargador.load(archivo); //carga del texto loadMovie(matrizImagenes[imagenActual-1], contenedor); imagen //carga de la

En las primeras lneas definimos las variables que vamos a utilizar.

En la variable archivo introducimos la ruta del archivo de tipo txt de donde sacaremos el texto asociado a las imgenes.

La variable total almacena el nmero total de imgenes que vamos a mostrar.

La variable imagenActual almacenar el nmero de la imagen que vamos a mostrar, la inicializamos a 1 para mostrar primero la primera imagen.

La variable matrizImagenes es una variable de tipo array y almacenar las rutas de las imgenes que vamos a mostrar.

Ahora declararemos el cargador que sacar la informacin del archivo txt y lo pasar a las cajas de texto. Para ello utilizaremos el objeto LoadVars, este objeto permite enviar o recoger variables en forma de URL. Expliquemos esto. El objeto LoadVars es capaz de recoger una cadena de texto en forma de URL como la siguiente:
var1=valor&var2=valor&var3=valor&var4=valor

Y sacar de all las variables y sus valores.

La forma en la que lo hace es sencilla, a cada smbolo & que encuentre entender que lo siguiente que encuentre ser el nombre de una variable (igualada a su valor). De esta forma escribiremos en el archivo de texto diapositivas.txt lo siguiente:
titulo1=Los mejores sandwiches &descripcion1=En sa cuina creamos los sandwiches mas originales y sabrosos de toda la ciudad. &titulo2=Calidad Superior &descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la maxima calidad. &titulo3=Productos seleccionados &descripcion3=Seleccionamos los productos uno a uno y de distribuidores de confianza. &titulo4=Nuestras especialidades &descripcion4=No olvides probar nuestras especialidades en ensaladas y postres.

De esta forma cuando el objeto LoadVars cargue el archivo ver que hay 8 variables, y cada una de ellas con su respectivo valor.

Veamos, pues, cmo leer y manejar estas variables. Para declarar el objeto slo hace falta escribir:
var cargador:LoadVars = new LoadVars();

Una vez declarado el objeto podemos trabajar con l. Lo primero que haremos ser establecer unas cuantas lneas que se ejecutarn cada vez que intentemos cargar el archivo. Para ello aprovechamos el mtodo onLoad del objeto:
cargador.onLoad = function(exito:Boolean) { if (exito) { textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual); //recupera la descripcin textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual); //recupera el ttulo } else { textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto"; textoDiapositiva.titulo_txt.text = "Error"; } }

Al invocar el mtodo onLoad nos devolver un valor (que nosotros hemos llamado exito). Esta variable de tipo booleano puede tomar dos valores, verdadero o falso.

Por tanto, si la carga se efecta correctamente el valor de exito ser true, y false si no pudo cargar el archivo. Por ello el cdigo que se ejecuta al cargar el archivo evala si la carga se realiz con xito.
if (exito) { } else { }

Si se pudo cargar, recuperamos las variables del archivo. Tendremos que acceder a ellas a travs del cargador. cargador.titulo1 nos dar el valor de la variable titulo1. Pero debemos de recuperar la variable correspondiente a la imagen que se est mostrando, cmo lo hacemos? Muy sencillo, deberemos construir el nombre de la variable a recuperar. Para el titulo el nombre de la variable es titulo ms el nmero de la imagen que se muestra. Por lo que nos quedara titulo+imagenActual. Pero, claro, no podemos escribir:
cargador.titulo+imagenActual //esto no es correcto

Para poder hacerlo deberemos utilizar la funcin eval(), que construir el nombre y luego lo recuperar:
eval("cargador.titulo"+imagenActual)

Una vez hemos averiguado cmo sacar la variable la adjudicamos al campo de texto:
textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual);

Y hacemos lo mismo para la descripcin:

textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual);

En principio habremos terminado. Optimizaremos el funcionamiento mostrando mensajes de error si el archivo no se pudo cargar:
textoDiapositiva.titulo_txt.text = "Error"; textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

Cerramos todas las llaves y el evaluador de la carga onLoad ya estar preparado. Ahora cada vez que intentemos cargar algn archivo con cargador se ejecutar todo este cdigo, y si la carga se efectu de forma correcta se asignarn las variables correspondientes a las cajas de texto. Para cargar un archivo solo tendremos que escribir:
cargador.load(archivo);

Y como en la variable archivo habamos guardado la ruta del txt donde estn las variables necesarias habremos terminado.

Como puedes ver las ltimas lneas que se ejecutan son:

cargador.load(archivo); loadMovie(matrizImagenes[imagenActual-1], contenedor);

Que cargarn por primera vez la imagen1 y el texto correspondiente. En el cargador deberemos decir que cargue el contenido del array matrizImagenes de la imagen correspondiente. Pero como las matrices empiezan por 0 la ruta de la primera imagen estar almacenada en matrizImagenes[0]. Es por esto que al cargar la imagen la ruta que damos es:
matrizImagenes[imagenActual-1]

Ahora veremos que hemos escrito en el fotograma 6 para que se carguen las imgenes y texto que correspondan:
if (imagenActual >= total) { imagenActual = 1; } else { imagenActual++; } cargador.load(archivo); //carga del texto loadMovie(matrizImagenes[imagenActual-1], contenedor); imagen

//carga de la

Este cdigo se ejecuta en el momento en el que el contenedor tiene la propiedad Alfa al 0% por lo que es totalmente invisible. Aprovecharemos este momento para cambiar la imagen y el texto.

Lo primero que evaluamos es si la imagenActual es mayor o igual que el nmero total de imgenes. Si no lo es aumentamos el valor de imagenActual en 1:
imagenActual++;

En el caso contrario (que imagenActual fuera mayor o igual al total de imgenes) significara que si aumentamos el valor de imagenActual en 1 nos pasaramos y no exitira ni imagen ni texto para esa posicin, por lo que iniciamos de nuevo el contador a 1 para que vuelva a empezar. Esta condicin har el efecto de que cuando se vea la ltima imagen y se pulse siguiente se visualice de nuevo la primera. Una vez actualizada la variable imagenActual pasamos a cargar la imagen:
loadMovie(matrizImagenes[imagenActual-1], contenedor);

Y a actualizar el texto utilizando el cargador:

cargador.load(archivo); Unidad 20. ActionScript -

Formularios (I). Los Elementos de Formulario

En el uso de formularios podremos utilizar muchos elementos. Pero los principales sern siempre los mismos: cajas de texto y botones. De vez en cuando utilizaremos otros elementos como los radioButtons, checkBoxes, comboBoxes o listBoxes. Veremos como utilizarlos y a sacarles el mayor partido. Flash ofrece estos objetos como componentes. Para acceder a ellos slo tendrs que abrir el Panel Componentes desde Ventana Componentes. Una vez abierto el panel haz clic en User Interface para desplegar sus elementos y vers todos los componentes que podrs utilizar.

Incluso para la introduccin de texto en formularios es aconsejable el uso de componentes, pues veremos que poseen propiedades que las simples cajas de texto no tienen. Para utilizar alguno de estos componentes basta con arrastrarlo del panel al escenario, o puedes arrastrarlo a la biblioteca para utilizarlo ms tarde. En cualquier caso, cuando hayas aadido el componente a tu pelcula debers darle un nombre de instancia para poder acceder a l en el cdigo y configurar sus opciones en el Panel Parmetros:

Veamos cuales son las opciones para los diferentes componentes: TextInput (Introduccin de texto):

editable: true o false. Permite que el texto se pueda editar o no.

password: true o false. Oculta el contenido del texto mostrndose un asterisco por carcter.

text: Indica el texto inicial de la caja.

TextArea (rea de texto):

editable: true o false. Permite que el texto se pueda editar o no.

html: true o false. Permite que se acepte contenido HTML dentro de la caja de texto. Propiedad muy til para incluir enlaces en el texto.

text: Idica el texto inicial de la caja.

wordWrap: true o false. Permite que se pueda realizar un desplazamiento del texto de arriba abajo. En caso de que no se permita (false) cuando el texto sobre pase el rea del componente aparecer una barra de desplazamiento que permitir mover el texto de izquierda a derecha.

Button (Botn):

icon: Aade un icono al botn. Para insertar un icono debers crear un grfico o clip de pelcula y guardarlo en la Biblioteca. Una vez all seleccinalo y haz clic derecho sobre l y selecciona Vinculacin. Marca la casilla Exportar para ActionScript en el cuadro de dilogo que aparecer y dale un nombre en Identificador. Este nombre es el que debers escribir en el campo icon del componente botn. Ni el botn ni el smbolo se ajustar al tamao del otro, as que debers modificar sus tamaos para que el icono no sobresalga del botn.

label: Texto que se leer en el botn.

labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto en caso de que se utilice junto a un icono. Respectivamente, izquierda, derecha, arriba y abajo.

selected: true o false. Indica si el botn se encuentra seleccionado.

toggle: true o false. Cuando se encuentra a true hace que el botn pueda tomar dos posiciones, presionado y no presionado.

RadioButton (Botn de opcin):

data: Especifica los datos que se asociarn al RadioButton. La propiedad data puede ser cualquier tipo de datos. Puedes acceder a esta propiedad a travs de cdigo para ver que contiene.

groupName: Nombre del grupo. En un grupo de botones de opcin slo uno de ello puede estar seleccionado. Definiremos este grupo mediante esta propiedad. Todos los botones que tengan el mismo nombre en groupName pertenecern al mismo grupo.

label: Texto que se leer al lado del botn.

labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto respecto al botn. Respectivamente, izquierda, derecha, arriba y abajo.

selected: true o false. Indica si el botn se haya seleccionado o no. De nuevo, en un mismo grupo slo un botn de opcin puede estar seleccionado.

CheckBox (Casilla de verificacin):

label: Texto que se leer al lado de la casilla.

labelPlacement: left, right, top o bottom. Indica la posicin de la etiqueta de texto respecto a la casilla. Respectivamente, izquierda, derecha, arriba y abajo.

selected: true o false. Indica si la casilla de verificacin se haya seleccionada.

ComoBox (Lista desplegable):

data: Matriz donde determinaremos el valor qu devolver el componente al seleccionar determinada posicin.

editable: true o false. Permite la edicin del campo. Mediante ActionScript puedes hacer que se aadan nuevos elementos a la lista.

labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos elementos se correspondern uno a uno a los valores de la matriz introducida en data. Para ambas propiedades se abrir el siguiente cuadro de dilogo:

Desde aqu podrs aadir o quitar elementos utilizando los botones y . O alterar el orden de stos subindolos o bajndolos en la lista con los botones y .

rowCount: Nmero mximo de elementos visibles en la lista. Si este nmero es superado por los elementos se aadir una barra de desplazamiento.

List (Lista):

data: Matriz donde determinaremos el valor qu devolver el componente al seleccionar determinada posicin.

labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos elementos se correspondern uno a uno a los valores de la matriz introducida en data. Para ambas propiedades se abrir el mismo cuadro de dilogo visto para el ComboBox.

multipleSelection: true o false. Permite la seleccin mltiple de elementos manteniendo la tecla Ctrl presionada. Tambin es posible seleccionar un rango de elementos seleccionando uno de ellos y pulsando la tecla Shift mientras

seleccionamos otro diferente, todos los elementos intermedios resultarn tambin seleccionados.

rowHeight: Nmero mximo de filas visibles en la lista. Si este nmero es superado por los elementos se aadir una barra de desplazamiento.

NumericStepper (Contador numrico):

maximum: Establece el nmero mximo del contador.

minimum: Establece el nmero mnimo del contador.

stepSize: Establece el intervalo en el que se aumenta o disminuye el nmero del campo al pulsar los botones del componente.

value: Valor inicial del campo.

Nota: Todas las propiedades mencionadas para cada uno de los componentes son accesibles a travs de ActionScript escribiendo el nombre de instancia del componente seguido de un punto y el nombre de la propiedad:
miBoton.label = "Haz clic aqu"; Unidad 20. ActionScript -

Formularios (II). El componente Alert El componente Alert es muy til pero se utiliza de forma diferente al resto de los anteriores. Este elemento nos permitir el uso de avisos en forma de pop-ups. Para utilizarlo debers seleccionarlo en el Panel Componentes y arrastrarlo hasta la Biblioteca. No lo arrastres sobre el escenario, pues no es necesario. Con que se halle presente en nuestra biblioteca podremos realizar llamadas al componente. Para ello slo deberemos escribir:
Import mx.controls.Alert; Alert.show("mensaje");

La primera lnea la insertamos para poder utilizar el componente y acceder a l mediante el cdigo. Luego, en el momento en el que la ejecucin llegue a la segunda lnea saltar un pop-up con el texto que se incluya en mensaje.

Hay que tener cuidado con este mtodo, pues mientras en otros lenguajes de programacin las alertas detienen la ejecucin del cdigo a espera de la aceptacin del mensaje, ActionScript sigue ejecutando el resto de lneas. Podremos aadir detectores para que se evalen las acciones realizadas sobre la alerta utilizando manejadores de eventos. En seguida veremos cmo. Tambin es posible configurar la alerta de muchas formas. La sintaxis completa del objeto es la siguiente:
Alert.show(mensaje, titulo, botones, padre, manejador, icono, botonDefecto);

mensaje: El texto del mensaje.

titulo: Ttulo del aviso.

botones: Botones que tendr el aviso. Puedes poner ms de dos, en ese caso debers separarlos por el smbolo "|". Los botones que puedes aadir son: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Podemos aadir tambin Alert.NONMODAL para hacer que el mensaje de alerta no bloquee el resto de la pelcula, y as, aunque el mensaje se muestre, podamos seguir interactuando con el resto de la ventana.

padre: Determina el movieclip sobre el que se abrir la alerta centrndose respecto a l. Para referenciar a la pelcula principal (_root) escribe null o undefined.

manejador: El nombre del manejador que se encargar de gestionar el clic sobre la alerta.

icono: El nombre del icono que queremos que aparezca a la izquierda del mensaje. Para incluir un icono deberemos vincularlo. Para ello haz clic derecho sobre el grfico o clip de pelcula en la Biblioteca y selecciona Vinculacin.

Luego marca la casilla Exportar para ActionScript y dale un nombre de Identificador. Ser a ste al que debers referenciar en el Alert.show().

botonDefecto: Determina el botn por defecto de la alerta. Utiliza la misma notacin que antes: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Se activar este botn cuando se pulsa la tecla Intro.

Un ejemplo de manejador y alerta sera esta:

import mx.controls.Alert; var miManejador:Function = function (miEvento:Object) { if (miEvento.detail == Alert.OK) { // acciones } else if (miEvento.detail == Alert.CANCEL) { // acciones } } Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null, miManejador, "icono", Alert.OK);

Nota: Observa como se han manejado las respuestas de la alerta.

Cuando utilices este mtodo para escribir los mensajes de alerta debers tener en cuenta que tienes que escribir todas las propiedades en orden y sin saltarte ninguna. Aunque puedes no escribir algunas, debers hacerlo de esta forma:
Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null, miManejador, "icono", Alert.OK);

o
Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null, miManejador, "icono");

o
Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null, miManejador);

o
Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL, null);

Alert.show("Mensaje de alerta.", "Ttulo", Alert.OK | Alert.CANCEL);

o
Alert.show("Mensaje de alerta.", "Ttulo);

Botones de Formulario En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar. Imagina que llamamos al componente botn de limpiar reset_btn, su cdigo asociado sera sencillo:
var escuchadorLimpiar:Object = new Object(); escuchadorLimpiar.click = function(evt:Object) { campo1_txt.text = ""; campo2_txt.text = ""; campo3_txt.text = ""; } reset_btn.addEventListener("click", escuchadorLimpiar);

Como puedes ver, hemos creado un escuchador para reset_btn. Cuando se activa simplemente vaciamos el contenido de los campos de texto que queramos. Tambin podramos iniciar los campos de otra forma:
nombre_txt.text = "Escribe aqu tu nombre"; email_txt.text = "Escribe aqu tu e-mail"; mensaje_txt.text = "Escribe aqu tu mensaje";

En definitiva, puedes tratar los campos como quieras. Para el botn de envo debers asociar un escuchador del mismo modo, pero el cdigo que ir incluido en l deber enviar los datos, que ser lo que veamos en el siguiente apartado.
Unidad 20. ActionScript

Formularios (III). Envo de formularios A partir de ahora veremos cmo afrontar el envo y la recepcin de datos con formularios. Lo haremos a travs de este ejemplo, donde encontraremos elementos de entrada (en los que tendremos que escribir datos para enviarlos) y de salida (donde tendremos que recoger datos de un archivo externo para mostrarlo). El envo de datos de formulario lo realizaremos utilizando el objeto LoadVars que ya

hemos visto. Pero en este caso, en vez de recabar informacin, lo usaremos para enviarla. Su uso es el siguiente:
var escuchadorEnvia:Object = new Object(); escuchadorEnvia.click = function(evt:Object) { var envio:LoadVars = new LoadVars(); // rellenamos envio.autor = envio.email = envio.mensaje las variables nombre_txt.text; mail_txt.text; = mensaje_txt.text;

envio.onLoad = function(exito:Boolean) { if (exito) { nombre_txt.text = ""; mail_txt.text = ""; mensaje_txt.text = ""; } else { Alert.show("Ha habido un error en el envo"); } } // enviamos las variables al archivo PHP envio.sendAndLoad("enviar_comentario.php", envio, "POST"); } submit_btn.addEventListener("click", escuchadorEnvia);

Hemos definido un escuchador que se ejecutar cuando se pulse el botn de enviar.

Dentro del cdigo de ste hemos declarado un objeto LoadVars llamado envio. Almacenar las variables en el objeto es tan fcil como escribir lo siguiente:
envio.autor = nombre_txt.text; envio.email = mail_txt.text; envio.mensaje = mensaje_txt.text;

Y slo quedara enviarlo con el mtodo send.

envio.send("enviar_comentario.php", "_blank", "POST");

Esta funcin enva las variables almacenadas en LoadVars utilizando el mtodo especificado en el tercer parmetro (puede ser POST o GET). Si quieres que el script que se ejecuta se abra en una ventana debers indicarlo en el segundo parmetro.

Estas dos ltimas funciones son opcionales y podramos escribir solamente:

envio.send("enviar_comentario.php");

En el ejemplo no hemos utilizado el mtodo send, sino el mtodo sendAndLoad.

envio.sendAndLoad("enviar_comentario.php", envio, "POST");

De este modo podemos aadir un controlador onLoad para evaluar si el envo se realiz correctamente. En el segundo parmetro deberemos indicar cul ser el objeto que se cargar (en nuestro caso el mismo objeto envio). Por lo que adems de realizar el envo hemos aadido las lneas:
envio.onLoad = function(exito:Boolean) { if (exito) { nombre_txt.text = ""; mail_txt.text = ""; mensaje_txt.text = ""; } else { Alert.show("Ha habido un error en el envo"); } }

Que vaca los campos si la carga del script se realiz correctamente o muestra una alerta en caso contrario.

Nosotros en el ejemplo hemos aadido algunos validadores para asegurar que todos los campos se han rellenado. As, antes de declarar el objeto LoadVars hemos introducido unas cuantas condiciones del tipo:
if (nombre_txt.text.length == 0) { Alert.show("Introduce tu nombre", "Error", Alert.OK); return false; }

Donde se evala la longitud del texto del campo nombre. Si llega a la lnea return false; se saldr de la funcin y no llegar a enviar los datos.

El script enviar_comentario.php se encargara de recibir los datos, tratarlos y luego almacenarlos o enviarlos por correo. Nosotros hemos almacenado la opcin en un archivo XML desde donde recuperaremos la informacin cada cierto tiempo utilizando un bucle en la lnea de tiempo.
Unidad 20. ActionScript

Formularios (IV). Recuperando informacin En puntos anteriores vimos cmo utilizar el objeto LoadVars para leer informacin de archivos externos. En este apartado veremos cmo recuperar informacin de un archivo XML. Para ello y el primer paso ser crear un objeto del tipo XML:
var comentarios:XML = new XML();

Hemos creado un objeto XML llamado comentarios. Ahora podremos utilizarlo para leer un archivo XML y tomar la informacin contenida en l.

Una propiedad muy til del objeto XML es la de ignoreWhite, que ignorar aquellos campos que estn en blanco y as no tendremos que preocuparnos por posibles errores:
comentarios.ignoreWhite = true;

El groso del cdigo que hemos aadido para cargar los datos es el siguiente:
comentarios.onLoad = function(exito:Boolean) { if (exito) { comentarios_txt.text = ""; var numeroEntradas = this.firstChild.childNodes.length; // hacemos un bucle para recorrer todos los elementos del archivo XML nodo for (var i = numeroEntradas-1; i>=0; i--) { // guardamos en la variable miXML la ruta del

var miXML:XMLNode = this.firstChild.childNodes[i]; // guardamos el contenido del nodo var autor:String = miXML.childNodes[0].firstChild.nodeValue; var email:String = miXML.childNodes[1].firstChild.nodeValue; var mensaje:String = miXML.childNodes[2].firstChild.nodeValue; // creamos la variable cadenaFinal donde insertaremos el contenido html que tendr salida en el cuadro de texto var cadenaFinal:String; // y cargamos el contenido del nodo en cadenaFinal cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: ";

cadenaFinal += "<span class=\"mensaje\">"+mensaje+"</span><br />"; caja de texto // aadimos el contenido de cadenaFinal en la comentarios_txt.text += cadenaFinal; // y repetimos el bucle } } else { comentarios_txt.text = "No se pudieron cargar los datos"; } comentarios.load("lee_comentarios.php"); }

Ahora explicaremos paso a paso qu hemos hecho. Como puedes ver en la ltima lnea cargamos un script php que genera un documento XML en el objeto comentarios. Al cargarlo se ejecuta el controlador onLoad que est definido al principio. Si la carga tuvo xito, procedemos a coger la informacin del archivo XML generado. Lo primero que hacemos es vaciar el contenido del rea de texto comentarios_txt.
comentarios_txt.text = "";

Luego pasamos a trabajar con el contenido del archivo XML. Un archivo XML tiene la estructura muy similar a un archivo HTML, ya que tambin est basado en etiquetas. El contenido de nuestro archivo es algo parecido a esto:
<?xml version="1.0" encoding="ISO-8859-1" ?> <listadoComentarios> <comentario> <autor>jos</autor> <email>jose@correo.com</email> <mensaje>estoy escribiendo un mensaje</mensaje> </comentario> <comentario> <autor>amparo</autor> <email>amparo@correo.com</email> <mensaje>este mensaje tambin se publicar</mensaje> </comentario> <comentario> <autor>miguel</autor> <email>miguel@correo.com</email> <mensaje>mensaje de prueba</mensaje> </comentario> <comentario>

<autor>cristina</autor> <email>cristina@correo.com</email> <mensaje>esto funciona!</mensaje> </comentario> </listadoComentarios>

A cada una de las etiquetas (sin contar la de xml) se le llama nodo.

Para navegar por los nodos a travs del objeto XML utilizaremos las propiedades firstChild (que referencia la etiqueta contenida inmediatamente despus de aquella en la que nos encontramos) y childNodes (que hace referencia al conjunto de nodos con el mismo nombre dentro de la etiqueta en la que nos encontramos). De esta forma XML.firstChild.nodeName nos devolvera el nombre del primer hijo dentro del archivo XML, listadoComentarios. As que almacenamos el nmero de comentarios en la variable numeroEntradas escribiendo:
var numeroEntradas = this.firstChild.childNodes.length;

Esto nos devolver el nmero de hijos de this.firstChild, o lo que es lo mismo de XML.firstChild. Una vez sepamos cuantas entradas tenemos almacenadas, haremos un bucle para sacarlas todas. Este bucle lo empezaremos desde el final para tener as las entradas ms recientes al principio y las ms antiguas al final.

Ahora crearemos una nueva variable llamada miXML que contendr la ruta completa del nodo comentario para cada una de las vueltas del bucle, as no tendremos que escribirla entera cada vez que queramos acceder a ella.
var miXML:XMLNode = this.firstChild.childNodes[i];

De esta forma estamos haciendo referencia al comentario nmero i del archivo. Ahora lo nico que debemos hacer es recuperar la informacin dentro del nodo comentario. Como este nodo tiene tres hijos con distinto nombre haremos referencia a ellos como miXML.childNodes[0], miXML.childNodes[1] y miXML.childNodes[2].

Una vez hallamos comprendido bien estos conceptos slo har falta verter el contenido de los nodos (utilizando la propiedad nodeValue) en variables que crearemos a su efecto:

var autor:String = miXML.childNodes[0].firstChild.nodeValue; var email:String = miXML.childNodes[1].firstChild.nodeValue; var mensaje:String = miXML.childNodes[2].firstChild.nodeValue;

Una vez tengamos la informacin podemos almacenarla y pasar al siguiente nodo comentario. As que le damos formato HTML, lo almacenamos en una variable, y metemos el contenido de esa variable en el rea de texto.
var cadenaFinal:String; cadenaFinal = "<a href=\"mailto:"+email+"\">"+autor+"</a>: "; cadenaFinal += "<span class=\"mensaje\">"+mensaje+"</span><br />"; comentarios_txt.text += cadenaFinal;

El bucle se repetir de este modo para cada uno de los nodos comentarios y cuando termine habremos acabado y toda la informacin contenida en el archivo XML estar (formateada como HTML) en el rea de texto.
Unidad 20. ActionScript

Formularios (V). Otras propiedades de los Formularios Adems de todo lo que hemos visto existen, tambin, otras propiedades bastante interesantes. Por ejemplo, el orden de tabulacin. Esta propiedad establece como acta el cursor a las repetidas pulsaciones de la tecla Tabulador. Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicar el orden en el que se desplazar el cursor cada vez que pulsemos el Tabulador:
nombre_txt.tabIndex = 1; mail_txt.tabIndex = 2; mensaje_txt.tabIndex = 3; reset_btn.tabIndex = 4; submit_btn.tabIndex = 5;

Tambin podemos establecer dnde colocar el cursor (o foco) escribiendo la siguiente lnea:
Selection.setFocus(nombre_txt);

Fcil verdad?

De este modo en las validaciones que vimos antes podemos hacer lo siguiente:
if (mail_txt.text.length == 0) {

Selection.setFocus(mail_txt); Alert.show("Introduce tu correo electrnico", "Error", Alert.OK); return false; }

As si no se ha rellenado algn campo el foco se sita directamente sobre l para que el usuario lo rellene sin tener que desplazarse.

Tambin podemos establecer el botn predeterminado del formulario para que cuando se pulse la tecla Intro sea como si hicisemos clic en l. Escribe la siguiente lnea:
focusManager.defaultPushButton = submit_btn;

De esta forma haremos que el botn predeterminado sea submit_btn.

Estilos CSS Podemos asignar estilos CSS al contenido de una caja de texto que acepte HTML. Por ejemplo, nosotros en el rea de texto comentarios_txt tenemos algo parecido a esto:
<a href="mailto:ana@correo.com">ana</a>: <span class="mensaje">si actualizo aqu se ver en otra ventana?</span> <br /> <a href="mailto:jesus@correo.com">jess</a>: <span class="mensaje">pues ya estamos todos</span> <br /> <a href="mailto:emilio@correo.com">emilio</a>: <span class="mensaje">yo tambin me apunto</span> <br /> <a href="mailto:david@correo.com">david</a>: <span class="mensaje">bien, pero trae algo para cenar, no tengo nada en la nevera</span> <br />

Obviamente, como el componente admite HTML no veremos el cdigo, sino directamente su salida. Pero podramos asignarle el siguiente estilo para mejorar la visualizacin:
a { } .mensaje { font-style: italic; } font-weight: bold;

Guardaremos este estilo en un archivo llamado estilo_comentarios.css. Pero, cmo hacemos para vincularlo al rea de texto? Fcil. Basta con declarar un nuevo objeto del tipo TextField.StyleSheet y asociarlo a comentarios_txt. Para hacer esto escribimos:
var miHojaEstilo:TextField.StyleSheet = new TextField.StyleSheet(); miHojaEstilo.onLoad = function(exito:Boolean) { if (exito) { comentarios_txt.styleSheet = miHojaEstilo; } } miHojaEstilo.load("estilo_comentarios.css");

Cuando se efecta la carga del archivo, si se realiza con xito, se asociar a la propiedad styleSheet de comentarios_txt. Y ya tendremos nuestro campo de texto formateado.

Podemos cambiar esta propiedad en cualquier momento, de modo que cuando se asocie una nueva hoja de estilo mediante la siguiente lnea, el contenido del rea de texto se redibujar para tomar el nuevo formato.
miHojaEstilo.load("estilo_alternativo.css");

Incorporar Fuentes Otro de los problemas con los que nos toparemos cuando trabajemos con flash sern las fuentes que utilicemos. Solamente debers incluir en tu proyecto aquellas fuentes que quieras utilizar para los textos dinmicos y de entrada, pues Flash se encargar de gestionar aquellas que utilices en los estticos. Para incorporar una fuente en tu pelcula debers hacer clic derecho en alguna parte vaca de la Biblioteca y seleccionar Nueva fuente. Se abrir el siguiente cuadro de dilogo:

En el desplegable Fuente selecciona la fuente que deseas utilizar. Debers seleccionar los estilos que vas a utilizar (Negrita, Cursiva y Tamao), de lo contrario la fuente no estar disponible. Dale un nombre, que se mostrar en la Biblioteca y estar lista para utilizarse.

Cuando crees un campo de texto dinmico o de entrada selecciona la fuente que aparecer sealada con un asterisco (*).

Y no tendrs ms problemas en visualizarlas en equipos en los que no se encuentren instaladas.

Unidad 21. Los

Filtros (I).

Introduccin Como comentamos al principio del curso podemos ver que Flash 8 incorpora una nueva caracterstica: los Filtros. Su uso aumentar la capacidad de mejorar el aspecto y funcionamiento de nuestros proyectos. El nico problema es que, en esta versin, slo estn disponibles para los clips de pelcula, los botones y el texto. En este tema veremos los filtros disponibles, su uso y como manejarlos mediante ActionScript. Para ilustrar su funcionamiento mostraremos ejemplos de cmo afectan los filtros a esta imagen:

Antes de empezar resaltaremos una cosa. En ActionScript los colores se indican mediante una cadena de 8 caracteres con un componente hexadecimal: 0xRRVVAA. Las dos primeras sern siempre las mismas 0x, las dos siguientes correspondern a la cantidad de color rojo, las dos siguientes de verde y las dos ltimas de azul. De este modo 0x000000 sera el color negro (la ausencia de color), y 0xFFFFFF el color blanco (con el rojo, azul y verde al mximo).

El Filtro Sombra Utilizando este filtro podremos aadirle una sombra a la imagen:

Sus opciones son las siguientes:

.alpha: determina la transparencia de la sombra (de 0 a 1).

.angle: determina el ngulo de la sombra.

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.color: determina el color de la sombra (escrito 0xRRVVAA).

.distance: determina la distancia de la sombra al objeto.

.hideObject: booleano, esconde el objeto dejando slo la sombra (segunda imagen).

.inner: booleano, hace que la sombra sea interior.

.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo.

.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.

.strength: determina la intensidad de la sombra.

Podrs utilizar el filtro Sombra escribiendo el siguiente cdigo:

import flash.filters.DropShadowFilter; var sombra:DropShadowFilter = new DropShadowFilter(); sombra.strength = 5; sombra.alpha = 0.50; sombra.color = 0x000000; ... miClip.filters = [sombra];

Tambin podras crear la sombra directamente con todas sus propiedades en el constructor de este modo:
import flash.filters.DropShadowFilter; var sombra:DropShadowFilter = new DropShadowFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject); miClip.filters = [sombra];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos darle. Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se interpretarn los valores que des en este orden hasta que no encuentre ms.
Ejercicio. Unidad 21.

Carga y Modificacin

de Filtros Objetivo. Cargar filtros mediante ActionScript dndoles las propiedades que queramos. Al final conseguiremos una pelcula como este ejemplo:

Ejercicio paso a paso. 1. Abre el archivo pez.fla que encontrars en la carpeta ejercicios/pez del curso, observa que tanto los campos del formulario como el clip de pelcula ya tienen un nombre de instancia asignado.

2. Abre el Panel Acciones desde Ventana Acciones o pulsando la tecla F9.

3. Elimina la lnea que dice

//cdigo para aadir el filtro

y escribe lo siguiente en su lugar:

import flash.filters.DropShadowFilter;

Esto har que el filtro se importe a la pelcula y podamos utilizarlo.

4. Despues de esto escribe:

var sombra:DropShadowFilter = new DropShadowFilter();

Hemos creado una variable llamada sombra que es un filtro de Sombra.

5. Luego accederemos a las propiedades de sombra y le daremos los valores que hay en los campos del formulario:
6. sombra.distance = distance_stp.value; 7. sombra.angle = angle_stp.value; 8. sombra.color = 0x000000; 9. sombra.alpha = alpha_stp.value; 10. sombra.blurX = blur_stp.value; 11. sombra.blurY = blur_stp.value; 12. sombra.strength = strength_stp.value; 13. sombra.quality = quality_cmb.selectedItem.data; 14. sombra.inner = inner_chk.value; 15. sombra.knockout = knockout_chk.value; sombra.hideObject = hideObject_chk.value;

16. Finalmente asociamos el filtro sombra que hemos creado a la propiedad filters del clip:
pez.filters = [sombra];

Hemos creado una pelcula donde podemos cambiar las propiedades de un filtro dinmicamente. Fcil verdad?
Unidad 21. Los

Filtros (II).

El Filtro Desenfocar Utilizando este filtro podremos hacer que la imagen se muestre desenfocada:

Sus opciones son las siguientes:

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.

Podrs utilizar el filtro Desenfocar escribiendo el siguiente cdigo:

import flash.filters.BlurFilter; var sombra:BlurFilter = new BlurFilter (); desenfocar.blurX = 5; desenfocar.blurY = 5; desenfocar.quality= 3; miClip.filters = [desenfocar];

Tambin podras crear el desenfoque directamente con todas sus propiedades en el constructor, de este modo:
import flash.filters.BlurFilter; var desenfocar:BlurFilter = new BlurFilter(blurX, blurY, quality); miClip.filters = [desenfocar];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos darle. Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se interpretarn los valores que des en este orden hasta que no encuentre ms.

El Filtro Iluminado Utilizando este filtro podremos aadirle un efecto de iluminacin a la imagen:

Sus opciones son las siguientes:

.alpha: determina la transparencia de la iluminacin (de 0 a 1).

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.color: determina el color de la iluminacin (escrito 0xRRVVAA).

.inner: booleano, hace que la iluminacin sea interior.

.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo.

.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.

.strength: determina la intensidad de la iluminacin.

Podrs utilizar el filtro Iluminado escribiendo el siguiente cdigo:

import flash.filters.GlowFilter; var iluminado:GlowFilter = new GlowFilter(); iluminado.quality = 3; iluminado.alpha = 0.50; iluminado.color = 0x000000; ... miClip.filters = [iluminado];

Tambin podras crear la iluminacin directamente con todas sus propiedades en el constructor, de este modo:
import flash.filters.GlowFilter; var iluminado:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout); miClip.filters = [iluminado];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos darle. Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se interpretarn los valores que des en este orden hasta que no encuentre ms.
Unidad 21. Los

Filtros (III).

El Filtro Bisel Utilizando este filtro podremos aadirle un bisel a la imagen:

Sus opciones son las siguientes:

.angle: determina el ngulo del bisel.

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.distance: determina la distancia que abarcar el bisel en el objeto.

.highlightAlpha: determina la transparencia del color de resaltado (bisel).

.hightlightColor: determina el color del resaltado (escrito 0xRRVVAA).

.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo.

.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.

.shadowAlpha: determina la transparencia del color de sombra del bisel.

.shadowColor: determina el color de la sombra del bisel (escrito 0xRRVVAA).

.strength: determina la intensidad del bisel.

.type: indica el tipo de bisel a aplicar. Puede tomar los valores inner, outer y full. Interior, exterior y completo, respectivamente.

Podrs utilizar el filtro Bisel escribiendo el siguiente cdigo:

import flash.filters.BevelFilter; var bisel:BevelFilter = new BevelFilter(); bisel.strength = 5; bisel.angle = 45; bisel.shadowColor = 0x000000; ... miClip.filters = [bisel];

Tambin podras crear el bisel directamente con todas sus propiedades en el constructor de este modo:
import flash.filters.BevelFilter; var bisel:BevelFilter = new BevelFilter(distance, angle, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);

miClip.filters = [bisel];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos darle. Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se interpretarn los valores que des en este orden hasta que no encuentre ms.

El Filtro Iluminado Degradado Utilizando este filtro podremos aadirle una iluminacin (como en el filtro anterior) a la imagen, pero con la caracterstica de que esta iluminacin estar compuesta por un degradado:

Sus opciones son las siguientes:

.alphas: determina matriz de valores de transparencia alfa (de 0 a 1) para los colores correspondientes de la matriz colors.

.angle: determina el ngulo de la iluminacin.

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).

.distance: determina la distancia de la iluminacin al objeto.

.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo.

.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.

.ratios: matriz de proporciones de distribucin de color para los colores correspondientes de la matriz colors (de 0 a 255).

.strength: determina la intensidad de la iluminacin.

.type: indica la colocacin de la iluminacin. Puede tomar los valores inner, outer y full. Interior, exterior y completo, respectivamente.

Podrs utilizar el filtro Iluminado Degradado escribiendo el siguiente cdigo:

import flash.filters.GradientGowFilter; var iluminado:GradientGowFilter = new GradientGowFilter(); iluminado.angle = 45; iluminado.colors = [0xFF0000, 0x00FF00, 0x0000FF]; iluminado.type = "inner"; ... miClip.filters = [iluminado];

Tambin podras crear la iluminacin directamente con todas sus propiedades en el constructor de este modo:
import flash.filters.GradientGowFilter; var iluminado:GradientGowFilter = new GradientGowFilter(distance, angle, colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout); miClip.filters = [iluminado];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos darle. Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se interpretarn los valores que des en este orden hasta que no encuentre ms.
Unidad 21. Los

Filtros (IV).

El Filtro Bisel Degradado Igual que el filtro que hemos visto anteriormente, este filtro es capaz de mostrar un bisel sobre el objeto, pero aadiendo un degradado a la forma de ste:

Sus opciones son las siguientes:

.alphas: determina matriz de valores de transparencia alfa (de 0 a 1) para los colores correspondientes de la matriz colors.

.angle: determina el ngulo del bisel.

.blurX: determina la cantidad de desenfoque horizontal.

.blurY: determina la cantidad de desenfoque vertical.

.colors: conjunto de colores que definen el degradado (escritos 0xRRVVAA).

.distance: determina la distancia que abarcar el bisel en el objeto.

.knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo.

.quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.

.ratios: matriz de proporciones de distribucin de color para los colores correspondientes de la matriz colors (de 0 a 255).

.strength: determina la intensidad del bisel.

.type: indica la colocacin del bisel. Puede tomar los valores inner, outer y full. Interior, exterior y completo, respectivamente.

Podrs utilizar el filtro Bisel Degradado escribiendo el siguiente cdigo:

import flash.filters.GradientBevelFilter; var bisel:GradientBevelFilter = new GradientBevelFilter(); bisel.angle = 90; bisel.colors = [0xFF0000, 0x00FF00, 0x0000FF]; bisel.type = "full"; ... miClip.filters = [bisel];

Tambin podras crear el bisel directamente con todas sus propiedades en el constructor de este modo:
import flash.filters.GradientBevelFilter; var bisel:GradientBevelFilter = new GradientBevelFilter(distance, angle, colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout); miClip.filters = [bisel];

As en el constructor deberemos sustituir cada parmetro por el valor que queremos darle. Puedes omitir los parmetros que quieras, pero ten en cuenta que siempre se interpretarn los valores que des en este orden hasta que no encuentre ms.

El Filtro Ajustar Color Utilizando este filtro podremos cambiar todas las caractersticas correspondientes al color de la imagen:

Slo tiene una opcin: .matrix. En ella escribiremos una matriz de 20 elementos (4x5) que indicarn la cantidad de cada color, su intensidad, brillo, saturacin y contraste.

Podrs modificar el filtro Ajustar Color escribiendo el siguiente cdigo:

import flash.filters.ColorMatrixFilter; var miMatriz:Array = [1, 0, 0, 0, 100, 0, 1, 0, 0, 100, 0, 0, 1, 0, 100, 0, 0, 0, 1, 0];

var ajustaColor:ColorMatrixFilter = new ColorMatrixFilter(miMatriz); miClip.filters = [ajustaColor];

Acceder a los Filtros de un Elemento Para modificar los filtros asociados a un objeto tendremos que acceder a su propiedad filters. Esta propiedad almacena una matriz que no puede ser editada directamente. As que si queremos modificar los filtros que afectan a un objeto tendremos que darle una nueva matriz a la propiedad y desechar la anterior.

As, si queremos aadirn nuevo filtro al objeto miClip deberemos escribir lo siguiente:
var sombra:DropShadowFilter = new DropShadowFilter(); var nuevaMatriz:Array = miClip.filters; nuevaMatriz.push(sombra); miClip.filters = nuevaMatriz;

Como puedes ver, lo que hacemos es guardar los filtros exitentes en una matriz nuevaMatriz, introducimos el nuevo filtro en ella con el mtodo push() y luego le asignamos los filtros que contiene miMatriz al clip miClip.

Como esta propiedad se trata de una matriz tambin podemos acceder a los filtros de esta forma:
var nuevaMatriz:Array = miClip.filters; nuevaMatriz[0].blurX = 15; nuevaMatriz[0].blurY = 15; miClip.filters = nuevaMatriz;

Descargamos los filtros en nuevaMatriz, y ahora accedemos al primer filtro almacenado y cambiamos sus propiedades blurX y blurY. Una vez modificadas, volvemos a volcar el contenido de nuevaMatriz en miClip.filters. Fcil, verdad? El nico problema que tiene este mtodo es que debers recordar el lugar que ocupa cada filtro en la matriz. Recuerda que el mtodo push() inserta un elemento en una matriz siempre en ltimo lugar.
Unidad 22. Vdeo

(I).

Introduccin Con Flash cada vez es ms fcil aadir vdeos a nuestras presentaciones o webs. En particular Flash 8 incorpora una serie de caractersticas que facilitan la tarea al mximo y permiten el uso de vdeos como si se tratase de cualquier otro objeto en pantalla. A continuacin explicaremos cmo hacerlo y cuales son las mejores alternativas. Utilizaremos el siguiente ejemplo para documentar algunos de los pasos que deberemos realizar.

Importando Vdeos Lo primero que deberemos hacer es transformar nuestro vdeo de formato avi, mpeg, mov, wmv o dv al formato que utiliza Flash: flv. Este formato, adems de crear archivos de vdeo de buena calidad muy comprimidos, te permitir introducir puntos de referencia desde donde controlaremos la interaccin del entorno de la pelcula con el vdeo. Haz clic en Archivo Importar Importar vdeo para empezar a configurar el archivo .flv que crearemos. Se abrir una pantalla como esta:

Aqu debers seleccionar el archivo que quieres importar para utilizarlo en tu pelcula. Haz clic en el botn Examinar y bscalo en tus carpetas. Cuando lo hayas encontrado pulsa el botn Aceptar y estars listo para seguir pulsando el botn Siguiente. Tambin es posible marcar la opcin Ya se ha implementado en un servidor Web, Flash Vdeo Streaming Service o Flash Communication Server. En este caso debers introducir la URL del archivo, que previamente habr sido preparado para poder utilizarlo en Flash. La siguiente pantalla te permitir seleccionar el modo en el que se implementar el vdeo:

Puedes elegir entre varias opciones, si seleccionas cualquiera de ellas vers su descripcin en la derecha de la pantalla. Te adelantamos que para la implementacin de vdeo para Streaming debers disponer de un servidor (de pago) que transmita tu vdeo al usuario de una forma ptima. La opcin Descarga progresiva, a pesar de no ser la ms aconsejada para conexiones de baja velocidad (sobre todo para archivos muy grandes) es la ms utilizada por aquellos que no disponen de los recursos necesarios para contratar los servicios de un servidor de vdeo en formato Stream. As que seleccionaremos la primera opcin y pulsaremos Siguiente.

Ahora es cuando realmente configuraremos el archivo de salida. Antes que nada pulsa el botn Mostrar configuracin avanzada. Vers 3 pestaas. La primera te servir para ajustar la compresin y calidad del vdeo. Puedes seleccionarla directamente en el desplegable de arriba del todo o cambiar alguna de las opciones que te aparecen en la pestaa Codificacin. Nosotros haremos hincapi en la pestaa Puntos de referencia.

Desde aqu podremos configurar puntos en nuestra pelcula.

Unidad 22. Vdeo

(II).

Existen dos tipos de puntos de referencia diferentes: el de Navegacin y el de Evento. Creando puntos de Navegacin podremos referenciarnos ms tarde a ellos para saltar en la pelcula. Sera algo as como crear captulos sobre los que podremos navegar utilizando botones y ActionScript. El punto de Referencia de Evento nos permitir crear interacciones con el resto de objetos en la pelcula. Estos puntos nos permitirn pasar parmetros que podremos recuperar mediante ActionScript. En el ejemplo hemos creado los siguientes puntos de referencia:

Como ves hay 3 de Navegacin, a los cuales acudiremos pulsando los botones para saltar entre los captulos de la pelcula. Luego hemos aadido 4 puntos de Evento desde los que pasaremos un parmetro que har que se muestre determinado fotograma de un clip que se encontrar en el Escenario.

Puedes realizar el ejercicio paso a paso de Puntos de Referencia para ver cmo lo hacerlo.

Desde la pestaa Recortar y Ajustar podrs modificar el tamao del vdeo y su duracin. Cuando hayas terminado pulsa el botn Siguiente.

Desde aqu podrs seleccionar un estilo de controles predeterminado, elige uno o selecciona Ninguno para crear t mismo los controles (como veremos a continuacin) y pulsa el botn Siguiente. El sistema te avisar de que el vdeo est debidamente configurado y pasar a importarlo. Cuando haya terminado lo aadir directamente sobre el Escenario.

El Componente FLVPlayback

Si ya tuvieses el archivo importado a flv no hara falta que realizases las acciones anteriores, slo debers insertar en el escenario un componente que incorpora Flash para la reproduccin de ste. Abre el Panel Componentes desde Ventana Componentes y haz clic sobre FLV Playback - Player 8. Arrastra un componente FLVPlayBack al Escenario. Desde el Panel Parmetros podrs configurarlo. All encontrars las siguientes opciones:

autoPlay: puede tomar los valores true o false. Indican si el vdeo debe reproducirse nada ms abrir el archivo o esperar a una orden para empezar a reproducirse.

autoRewind: puede tomar los valores true o false. Indica si el vdeo deber volver a la posicin inicial desps de haberse reproducido completamente.

autoSize: puede tomar los valores true o false. Indica si el control deber ajustarse al tamao del vdeo, o por el contrario deber ser el vdeo el que se ajuste al tamao del control.

bufferTime: especifica el nmero de segundos que se almacenarn en la memoria antes de que se inicie la reproduccin del vdeo.

contentPath: indica la ruta del archivo que se deber reproducir.

cuePoints: indica los puntos de referencia que estn incluidos en la pelcula. Una vez importada la pelcula a formato flv no pueden ser modificados.

isLive: puede tomar los valores true o false. Este campo se utilizar para la transmisin de vdeo en vivo y slo podr utilizarse a travs de un servidor de Streaming.

skin: desde aqu puedes modificar la apariencia de los controles de la pelcula y seleccionar uno entre los predefinidos.

skinAutoHide: puede tomar los valores true o false. Indicar si los controles se pueden esconder para volver a aprecer cuando el cursor se site sobre la pelcula.

totalTime: indica el tiempo total del vdeo.

volume: de 0 a 100. Indica el volumen mximo del vdeo.

Una vez insertada la pelcula mediante la adicin de este componente o por importacin deberemos darle un nombre de instancia para poder referirnos a l. Hazlo desde este mismo panel o desde el Panel Propiedades.
Unidad 22. Vdeo

(III).

Uso de Componentes para la Reproduccin Usar componentes para controlar la pelcula es muy sencillo, slo debers arrastrarlos desde el Panel Componentes al Escenario y escribir unas pocas lneas en el Panel Acciones. Para aadir estos componentes haz clic en el elemento FLV Playback Custom UI y arrastra el que tu quieras al Escenario, veamos cuales son sus funciones.

BackButton: retrocede el flujo del vdeo al punto de referencia inmediatamente anterior o en su defecto al inicio de ste.

BufferingBar: muestra el progreso de descarga del vdeo.

ForwardButton: avanza el flujo del vdeo al punto de referencia inmediatamente posterior o en su defecto al final de ste.

MuteButton: establece el volumen de la pelcula directamente a 0. Actuara de forma similar a la lnea:

miVideo.volume = 0;

PauseButton: pausa la pelcula en el momento en el que se pulse el botn.

PlayButton: reaunda (o comienza) la reproduccin a partir de donde se encuentre el cabezal de reproduccin de vdeo.

PlayPauseButton: una mezcla de los dos anteriores, es capaz de pausar y reanudar la reproduccin desde un mismo control.

SeekBar: desde esta barra avanzar y retroceder manualmente por la lnea de flujo de la pelcula.

StopButton: detiene la reproduccin y posiciona el cabezal de reproduccin al principio del vdeo.

VolumeBar: permite el aumento o disminucin del volumen del vdeo mediante una barra de volumen.

Una vez aadidos los componentes necesarios al Escenario tendrs que darle un nombrede instancia y luego escribir lo siguiente (dependiendo de los controles que hayas arrastrado) en el Panel Acciones del fotograma 1:
miVideo.playButton = miBotonPlay; miVideo.pauseButton = miBotonPausa; miVideo.playPauseButton = miBotonPausaPlay; miVideo.stopButton = miBotonStop; mVideo.backButton = miBotonAtras; miVideo.forwardButton = miBotonAdelante; miVideo.muteButton = miBotonSilencio; miVideo.volumeBar = miBarraVolumen; miVideo.seekBar = miBarraDeslizadora; miVideo.bufferinBar = miBarraProgreso;

El componente se asociar al vdeo y funcionar por s solo. Fcil, verdad? Puedes modificar los componentes que aadas al Escenario haciendo doble clic sobre ellos y cambiando su forma, tamao o color.

Crear Controles Propios Crear controles propios no es muy complicado en Flash 8. Slo tienes que crear los botones que consideres necesarios y utilizar las propiedades del componente FLVPlayback.

play(): reproduce el vdeo.

miVideo.play();

stop(): detiene el vdeo y vuelve al inicio.

miVideo.stop();

pause(): detiene el vdeo conservando su posicin actual.

miVideo.pause();

seek(segundo:Number): permite el avance o retroceso de la pelcula de vdeo.

miVideo.seek(5);

Esta lnea colocar la cabeza lectora en el segundo 5 y reproducir a partir de ah.

volume: define el volumen del vdeo. Puedes introducir un valor entre 0 y 100.
miVideo.volume = 50;

Un ejemplo de cmo crear un botn de Play/Pause sera asociando el cdigo siguiente a un botn:
on (release) { if (miVideo.state == miVideo.PAUSED) { miVideo.play(); } else {

miVideo.pause(); } }

La propiedad state devuelve el estado en el que se encuentra nuestro vdeo en el momento, puede tomar los siguientes valores:

miVideo.PAUSED: el vdeo se encuentra pausado.

miVideo.PLAYING: el vdeo se est reproduciendo.

miVideo.REWINDING: el vdeo est en estdo de rebobinado.

miVideo.SEEKING: el vdeo est en estado de bsqueda.

miVideo.STOPPED: el vdeo se encuentra detenido.

miVideo.BUFFERING: el vdeo todava se est almacenando en el buffer.

miVideo.CONNECTION_ERROR: se ha producido un error de conexin y el vdeo no podr visualizarse.

miVideo.DISCONNECTED: el vdeo est en estado de desconexin. Este estado se producir hasta que se le asigne una ruta a la propiedad contentPath.

miVideo.LOADING: el vdeo est en estado de carga.

Ahora veremos como interactuar con los puntos de referencia que hayamos creado.

En el ejemplo hemos creado 3 botones que debern saltar a los tres puntos diferentes que hemos creado: inicio, carrera1 y carrera2. El cdigo asociado al botn sera el siguiente:
on (release) { miVideo.seekToNavCuePoint("inicio"); miVideo.play(); }

Este trozo de cdigo utiliza la funcin seekToNavCuePoint para buscar el punto de referencia que se le indique, luego tendremos que decirle que reanude la reproduccin. Tambin puedes utilizar las funciones seekToNextNavCuePoint() y seekToPrevNavCuePoint() para avanzar y retroceder, respectivamente, por los diferentes puntos de referencia de navegacin creados.
miVideo.seekToNextNavCuePoint(); miVideo.seekToPrevNavCuePoint(); Unidad 22. Vdeo

(IV).

Interaccin de Vdeo y Elementos Externos Como vimos antes, podamos crear puntos de referencia de Eventos para pasar parmetros a nuestra pelcula desde la reproduccin del vdeo. Su uso no es muy complicado, deberemos crear un escuchador que est pendiente de los puntos de referencia que se vayan reproduciendo en el vdeo de la siguiente forma:
var eventosVideo:Object = new Object(); eventosVideo.cuePoint = function(puntoRef:Object):Void { if (puntoRef.info.parameters.length > 0) { mensaje.gotoAndPlay(puntoRef.info.parameters["fotograma"]); }

} miVideo.addEventListener("cuePoint", eventosVideo);

De esta forma cuando se encuentre con un punto de referencia evaluar si tiene parmetros con la propiedad:
puntoRef.info.parameters.length

Si es as, sacamos la informacin del parmetro llamndolo por su nombre y actuamos en consecuencia. En el ejemplo hemos creado un clip de pelcula que se llama mensaje. Cuando se van produciendo determinados eventos en el vdeo vamos moviendo el cabezal de

reproduccin de dicho clip y as creamos una vinculacin entre ambos, el clip y el vdeo. Si escribieses lo siguiente te devolvera al Panel Salida el nombre del punto de referencia.
trace(puntoRef.info.name); Unidad 23. Juegos

(I).

Introduccin En este tema veremos los elementos bsicos que necesitaras a la hora de crear juegos con Flash: el movimiento, los choques, la rotacin, creacin aleatoria de elementos, etc. A medida que avancemos en el tema iremos haciendo referencia a este juego que hemos creado como ejemplo. Pero, primero empezaremos por lo bsico.

Manejando Elementos Cuando trabajemos con objetos necesitaremos acceder a algunas caractersticas bsicas, como por ejemplo su anchura y altura o su posicin en el Escenario. Podemos modificar el tamao del objeto utilizando las propiedades _width, _height, _xscale e _yscale. Las dos primeras (_width y _height) modificarn o devolvern la anchura y altura, respectivamente, en pxeles del objeto referenciado, por tanto, podemos cambiar el tamao de un clip escribiendo lo siguiente:
miClip._width = 100; miClip._height = 200;

Las propiedades _xscale e _yscale cambian el tamao, pero de forma porcentual. Podemos utilizar estas propiedades para hacer un clip el doble de grande que era, por ejemplo:
miClip._width = 100; miClip._height = 100; miClip._xscale = 200; miClip._yscale = 200;

Har que el clip tome el tamao de 100px de alto y 100px de ancho, aunque su visualizacin sea del doble (200%). Podramos devolver sus dimensiones a su estado real escribiendo:

miClip._xscale = 100; miClip._yscale = 100;

Tambin podemos averiguar o modificar la posicin de un objeto, basta con trabajar con sus propiedades _x e _y:
miClip._x = 50; miClip._y = 150; posicionDeClipHorizontal = miClip._x; posicionDeClipVertical = miClip._y;

Recuerda que estas propiedades trabajan con pxeles. De esta forma podemos mover el objeto de una forma muy fcil, por ejemplo para hacer que se desplace hacia la derecha del Escenario debers escribir:
miClip._x = miClip._x + 1;

Utilizando estas propiedades y combinndola con las caractersticas de los Movieclips podemos recrear de forma ms natural el movimiento. Veamos este ejemplo:

Aqu hemos creado un clip de pelcula con tres posiciones, parado, izquierda y derecha:

As, podemos llamar mediante la instruccin gotoAndStop() a uno de los fotogramas del clip para que se muestre dicha posicin y d ms realismo al movimiento. El cdigo que hemos incluido en la pelcula es el siguiente:
var izquierda:Boolean = false; var derecha:Boolean = false; miClip.gotoAndStop("parado"); miClip._x = 10; miClip.onPress = function() { if (miClip._x <= 10) { miClip.gotoAndStop("derecha"); derecha = true; } if (miClip._x >= 495) { miClip.gotoAndStop("izquierda"); izquierda = true; } } _root.onEnterFrame = function() { if (derecha) { if (miClip._x < 495) { miClip._x = miClip._x + 6; } else { miClip.gotoAndStop("parado"); derecha = false; } } if (izquierda) { if (miClip._x > 10) { miClip._x = miClip._x - 6; } else { miClip.gotoAndStop("parado"); izquierda = false; } } }

Observa cmo hemos utilizado aqu la funcin onEnterFrame. Nos valemos de ella para crear el movimiento, de esta forma hacemos que la coordenada x del objeto se incremente cada vez que entre en el fotograma de nuevo. Veremos esta funcin con ms detalle en el tema 24. Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el objeto debe desplazarse. En el evento onEnterFrame chequeamos estas variables y si estn a true comenzamos el movimiento hasta la posicin que queramos. A medida que vayamos avanzando en el tema veremos ms funciones y mtodos que nos permitirn acciones ms verstiles y ajustadas a nuestras necesidades.

Otra forma de modificar la apariencia del objeto con el que trabajamos es utilizando la propiedad _rotation. Esta propiedad acta sobre el objeto rotndolo tantos grados como especifiques respecto a su posicin original. Por ejemplo:
miClip_rotation = 90;

Esta lnea har que el objeto rote 90 grados en el sentido de las agujas del reloj. Para rotar un objeto hacia el lado contrario basta con aadirle un signo menos (-) antes del ngulo:
miClip._rotation = -90;

Para devolver al objeto a su posicin original slo tendrs que escribir la siguiente lnea:
miClip._rotation = 0;

As la rotacin que acta sobre el objeto es nula y se muestra en su posicin original. Recuerda que para que las rotaciones parezcan reales debers posicionar el objeto dentro del clip en el centro absoluto, para que as la referencia del clip se encuentre en la posicin adecuada. Observa la diferencia entre estos dos clips:

En ambos la rotacin se aplicar respecto al punto de referencia, por lo que en la edicin de ste debers utilizar los botones y del Panel Alinear (Ventana Alinear) para centrar el objeto respecto al punto de referencia del clip. Ejercicio de rotacion
Ejercicio. Unidad 23.

Rotacin

Objetivo.

Reproduciremos la pelcula que vimos en la teora pero en vez de utilizar diferentes fotogramas de movieclips utilizaremos la propiedad _rotation. Ejercicio paso a paso. 1. Abre el archivo movimiento_rotacion.fla que encontrars en la carpeta ejercicios/movimiento_rotacion.

2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre el Panel Acciones (Ventana Acciones o pulsando la tecla F9).

3. Escribe el siguiente fragmento de cdigo:

4. var izquierda:Boolean = false; 5. var derecha:Boolean = false; 6. 7. miClip._x = 30; 8. 9. miClip.onPress = function() { 10. if (miClip._x <= 30) { 11. miClip._rotation = 10; 12. derecha = true; 13. } 14. if (miClip._x >= 515) { 15. miClip._rotation = -10; 16. izquierda = true; 17. } 18. } 19. 20. onEnterFrame = function() { 21. if (derecha) { 22. if (miClip._x < 515) { 23. miClip._x = miClip._x + 6; 24. } 25. else { 26. miClip._rotation = 0; 27. derecha = false; 28. } 29. } 30. if (izquierda) { 31. if (miClip._x > 30) { 32. miClip._x = miClip._x - 6; 33. } 34. else { 35. miClip._rotation = 0; 36. izquierda = false; 37. } 38. } }

39. Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter.

Unidad 23. Juegos

(II).

El problema ahora se nos plantea cuando queremos que el objeto se oriente hacia unas coordenadas en concreto. Cmo calculamos el ngulo necesario para que nuestro elemento se oriente hacia otro situado en las coordenadas 100, 200? La solucin no es muy complicada: deberemos echar mano de la trigonometra.

En Flash tenemos una funcin muy til que nos ayuda a encontrar ngulos rpidamente. Utilizando la funcin Math.atan2 recuperaremos el ngulo formado por unas coordenadas en el espacio respecto a un punto central. Veamos un ejemplo:

Escribiendo la siguiente lnea recuperaremos el ngulo que buscamos:

var angulo = Math.atan2(x, y);

Ahora veamos las tres consideraciones que tenemos que tener en cuenta. Observa este ejemplo:

Lo primero a tener en cuenta es que las coordenadas que tenemos del punto al que queremos orientar el objeto no estn en relacin ste. Podemos averiguarlas de forma muy fcil haciendo una pequea conversin restando las coordenadas entre s:

Ahora ya podemos emplear la funcin atan2:

var angulo = Math.atan2(x1 - x2, y1 - y2);

Lo segundo que tendremos que saber es que esta funcin devuelve un ngulo medido en el sentido contrario a las agujas del reloj, es decir:

Por tanto si decimos a nuestro objeto que se oriente -30 grados se colocar de esa forma:

Nuestro objeto se encuentra en otro cuadrante completamente diferente, pero si observamos con atencin, la diferencia siempre ser de 90:

Slo tenemos que sumarle 90 al ngulo resultante para que el objeto se oriente hacia el lugar correcto. As que podemos solventaremos esto son una sola lnea. Pero antes convertiremos el ngulo resultante en radianes a grados:
var grados:Number = Math.round(angulo*180/Math.PI); miClip._rotate = grados + 90;

Desde luego la suma que hemos realizado es consecuencia directa de que el objeto este orientado inicialmente haca arriba (y empiece a contar los grados desde ese punto en 0).

Si partisemos de un estado original horizontal como el desfase del objeto ya se encuentra a 90 grados no har falta realizarlo:

Observa que en este caso si giramos el objeto -30 grados se colocar orientado hacia la posicin que buscamos. O incluso, si al contrario, el objeto se encuentra orientado hacia la izquierda deberemos sumarle 180.

Como ves, todo depender de la posicin original del objetos (y de que vrtice quieras orientar). Lo ms aconsejable en este caso es que los objetos que vayan a rotar estn orientados hacia la derecha, as no tendrs que preocuparte del desfase del ngulo.
Unidad 23. Juegos

(III).

Otra de las tcnicas que nos ser muy til es la carga y descarga de elementos existentes en la biblioteca. Esto lo haremos con la funcin attachMovie. Tiene la siguiente sintaxis:
this.attachMovie(simbolo, nombreInstancia, nivel, opciones);

Para poder incluir un clip en el escenario antes debers vincularlo para poder acceder a l desde ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en la Biblioteca. Selecciona Vinculacin. En la ventana que se abrir haz clic sobre Exportar para ActionScript y dale un nombre al cual te podrs referir cuando lo cargues con attachMovie(). En la primera variable deberemos introducir el nombre del objeto tal y como lo escribimos en la vinculacin. La variable nombreInstancia almacenar el nombre de instancia al cual podremos referirnos ms tarde para acceder a las propiedades y mtodos del objeto creado. El nivel que indiquemos configurar el estado de profundidad del clip. De esta forma podrs colocar unos archivos encima de otros y decidir cual se encontrar en un nivel superior o inferior .

Si vas a aadir elementos aleatoriamente es aconsejable que utilices un contador de niveles (y vayas incrementndolo cada vez que aadas un elemento) para asociar cada elemento a un nivel, pues si cargas dos elementos en un mismo nivel se descargar el ya existente.

En la variable opciones podrs inicializar el objeto con las propiedades definidas desde un inicio, debers introducirlas entre llaves {} y separadas por comas. Este parmetro es opcional.
this.attachMovie("objeto", "miClip", 5, {_x:0, _y:0});

Para eliminar clips insertados mediante attachMovie puedes utilizar removeMovieClip() o unloadMovie():
miClip.removeMovieClip();

Tambin podemos utilizar otra funcin que incorpora Flash llamada duplicateMovieClip(). Esta funcin duplica un clip ya existente en el Escenario, creando un nuevo con un nombre de instancia personalizado. Su sintaxis es la siguiente:
duplicateMovieClip(objetoDuplicar, nuevoNombre, nivel);

Debers escribir el nombre del clip a duplicar en el primer parmentro, luego selecciona un nombre de instancia para el nuevo clip y escoge un nivel de carga. Los movieclips cargados con esta funcin tambin se podrn eliminar con las funciones removeMovieClip() y unloadMovie(). Ejemplo
Ejercicio. Unidad 23.

Carga de Objetos

Objetivo. Reproduciremos la pelcula de ejemplo que vimos en la teora:

Ejercicio paso a paso. 1. Abre el archivo attach.fla que encontrars en la carpeta ejercicios/attach del curso.

2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre l.

3. Selecciona Vinculacin.

4. Se abrir una ventana donde debers hacer clic en la opcin Exportar para ActionScript.

5. Escribe estrella en el campo nombre y pulsa OK.

6. Selecciona el primer fotograma de la Capa 3 y escribe el siguiente fragmento de cdigo en el Panel Acciones (tecla F9):
7. _global.numEstrellas = 0; 8. 9. _global.ultimaX = 0; 10. _global.ultimaY = 0;

Utilizaremos estas variables para saber en cada momento cuantas estrellas hay en el Escenario y la posicin de la ltima de ellas.

11. Selecciona el botn aadir y escribe el siguiente fragmenteo de cdigo en el Panel Acciones:
12. on (release) { 13. if (numEstrellas<30) { 14. numEstrellas++; 15. 16. var miEstrella:MovieClip = attachMovie("estrella", "estrella_"+ultimaX+"_"+ultimaY, numEstrellas); 17. miEstrella._x = ultimaX; 18. miEstrella._y = ultimaY; 19. 20. if (ultimaX>=Stage.width-50) { 21. ultimaY += 50; 22. ultimaX = 0; 23. } else { 24. ultimaX += 50; 25. } 26. } }

Observa los que hemos hecho. Si podemos aadir ms estrellas (entonces se cumple la condicin) aumentamos en 1 el contador de estrellas. Aadimos un nuevo clip de pelcula y le damos un nombre de instancia compuesto por el nombre estrella seguido por las coordenadas de posicin para

poder eliminarlo ms tarde. Aumentamos las variables de coordenadas teniendo en cuenta si la fila de estrellas ha superado ya la anchura de la pantalla.

27. Selecciona el botn quitar y escribe el siguiente fragmento de cdigo en el Panel Acciones:
28. on (release) { 29. if (numEstrellas>0) { 30. numEstrellas--; 31. 32. if (ultimaX==0) { 33. ultimaY -= 50; 34. ultimaX = Stage.width-50; 35. } else { 36. ultimaX -= 50; 37. } 38. 39. removeMovieClip("estrella_"+ultimaX+"_"+ultimaY); 40. } }

En este caso hemos avaluado si hay estrellas que quitar (el contador debe ser mayor que 0 para eso), y disminuimos el contador de estrellas en 1. Devolvemos las coordenadas a su posicin inmediatamente anterior y eliminamos la estrella que se encuentra en esa posicin llamndola por el nombre que hemos creado para tal fin.

Ya hemos creado una pelcula que aade un nmero concreto de elementos automatizadamente. Fcil verdad?.
Unidad 23. Juegos

(IV).

Interaccin del Mouse Veamos ahora cmo interactuar con el ratn y el Escenario y sus elementos. Empezaremos viendo una de las funciones ms tiles para el ratn: arrastrar y colocar. Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar objetos por el Escenario, para ello debers introducir slo dos eventos de clip en el objeto a arrastrar:

En el evento press (cuando an no se ha soltado el botn del ratn) comenzaremos el arrastre:

on (press) { startDrag(this); }

Ms tarde en el evento release (cuando se suelta el botn), detendremos el arrastre y el objeto quedar colocado en el sitio que defini el botn:
on (release) { stopDrag(); }

La funcin startDrag permite varios parmetros:

startDrag(objetoArrastar, bloqueaCentro, izquierda, arriba, derecha, abajo);

En bloqueCentro podrs pasarle un valor (true o false) que indicar si el arrastre se realizar desde el centro del clip o desde el punto donde hizo clic el usuario. El resto de variables te permitir definir mediante coordenadas un espacio activo donde se podr realizar el arrastre. Esta opcin es muy til cuando queremos que el arrastre slo se pueda realizar sobre una zona determinada, como por ejemplo las tizas de las barras de desplazamiento, que no se pueden arrastrar fuera de la zona rectangular que delimitan dichas barras.

Una propiedad muy til que tambin te ser de mucha ayuda es la de _droptarget. Te permitir averiguar sobre qu elemento se ha soltado el objeto arrastrado:
on (release) { stopDrag(); trace(this._droptarget); }

Este cdigo devolver al Panel Salida el nombre de instancia del objeto sobre el cual se ha soltado. Si el objeto no tuviese uno devolvera el nombre genrico instanciai, donde i es un nmero de orden de objetos aadidos al Escenario.

Realiza el paso a paso de Arrastre y Orientacin de objetos para practicar conceptos que hemos visto hasta ahora.

Ejercicio. Unidad 23.

Arrastre y Orientacin

de Objetos Objetivo. Reproduciremos la pelcula que vimos en la teora:

Ejercicio paso a paso. 1. Abre el archivo trigonometria.fla que encontrars en la carpeta ejercicios/trigonometria del curso.

2. Aadiremos primero el cdigo para hacer que la pelota se pueda arrastrar y colocar con el ratn. Selecciona la pelota y abre el Panel Acciones (tecla F9), escribe el siguiente fragmento de cdigo:
3. on (press) { 4. startDrag(this); 5. } 6. 7. on (release) { 8. stopDrag(); }

9. Ahora haremos que la nave se oriente hacia la pelota en cada momento (relamente lo que haremos ser asociar el cdigo al evento onEnterFrame para que se refresque a cada vuelta al fotograma). Selecciona el fotograma 1, abre el Panel Acciones y escribe los siguiente:
10. nave.onEnterFrame = function() { 11. var coordenadaX:Number = pelota._x; 12. var coordenadaY:Number = pelota._y; 13. 14. var miX:Number = nave._x;

15. 16. 17. 18. 19. 20. 21.

var miY:Number = nave._y; var radianes:Number = Math.atan2((coordenadaY-miY), (coordenadaX-miX)); var grados:Number = Math.round(radianes*180/Math.PI); }; nave._rotation = grados;

Lo que hemos hecho en un principio es almacenar las cuatro coordenadas que nos interesan, las de la nave y las de la pelota. Luego calculamos el ngulo de la pelota respecto a la nave y asociamos ese ngulo a la propiedad _rotation de esta ltima (pasndola antes a grados). Nota: Observa que inicialmente la nave est orientada a la derecha, as que no har falta solventar el desfase de ngulo.

Y ya estamos listos. Tampoco era muy dificil, verdad? Otra cosa que nos ser de gran ayuda ser poder localizar la posicin del ratn. De este modo podramos hacer que los objetos se desplacen u orienten hacia el ratn Para averiguar las coordenadas del ratn slo tendrs que recurrir a las propiedades _xmouse e _ymouse:
var coordenadaX:Number = _xmouse; var coordenadaY:Number = _ymouse;

Fcil, verdad? Con todo lo que hemos aprendido podemos ya sustituir el cursor del Mouse normal por uno de nuestro agrado. Para ello tienes que escribir muy pocas lneas:
this.attachMovie("cursor", "miCursor", 500); Mouse.hide(); var escuchador:Object = new Object(); escuchador.onMouseMove = function() { miCursor._x = _xmouse; miCursor._y = _ymouse; } Mouse.addListener(escuchador);

En el cdigo insertamos un objeto llamado miCursor que ser una instancia del clip cursor que habremos guardado en la Bilioteca. Escondemos el cursor. Y aadimos un escuchador que haga que el clip miCursor se posicione en el lugar del Mouse a cada movimiento de ste. Como ves una de las pocas cosas nuevas introducidas aqu es el uso de la funcin hide() del ratn. Invocndola haces que el Mouse desaparezca. Puedes volver a visualizar el ratn escribiendo:
Mouse.show(); Unidad 23. Juegos

(V).

Interaccin del Teclado Podemos aadir a nuestras pelculas interaccin con las teclas pulsadas, el procedimiento es muy sencillo, basta con utilizar la funcin isDown del objeto Key:
if Key.isDown(Key.UP) { //mover hacia arriba }

Como alternativa puedes utilizar un escuchador para el teclado y ver qu teclas son pulsadas en cada momento accediendo a ellas a travs de la funcin Key.getCode():
var escuchador:Object = new Object(); escuchador.onKeyDown = function() { switch (Key.getCode()) { case Key.SPACE : //disparar break; case Key.LEFT : //mover hacia la izquierda break; case Key.UP : //mover hacia arriba break; case Key.RIGHT : //mover hacia la derecha break; case Key.DOWN : //mover hacia abajo break; } } Key.addListener(escuchador);

Aunque depende siempre de la funcin que quieras que realicen tus teclas, a veces es ms til un mtodo que otro. Los cdigos de las teclas son bastante sencillos, las flechas UP, DOWN, RIGHT y LEFT; la barra espaciadora SPACE; y las teclas especiales SHIFT, CONTROL, TAB, CAPSLOCK, ESCAPE, ENTER, BACKSPACE, INSERT, DELETEKEY, HOME, END, PGDN y PGUP. En el ejemplo anterior utilizbamos el ratn para mover el clip, ahora podemos usar las teclas:

El cdigo que hemos incluido es muy parecido al anterior, solamente hemos cambiado los eventos por los cuales se dispara el desplazamiento:
onEnterFrame = function() { if (Key.isDown(Key.RIGHT)) { miClip._rotation = 10; if (miClip._x < 515) { miClip._x = miClip._x + 3; } else { miClip._rotation = 0; } } else if (Key.isDown(Key.LEFT)) { miClip._rotation = -10; if (miClip._x > 30) { miClip._x = miClip._x - 3; } else { miClip._rotation = 0; } } else { miClip._rotation = 0; } }

Como ves en el ejemplo se evala cada vez que entra en el fotograma, por lo que las funciones de la presin continuada de una tecla se ven cubiertas.
Unidad 23. Juegos

(VI).

Interaccin entre Elementos Una de las cosas que ms nos interesar realizar es el choque entre elementos en el Escenario, y ya no el choque fsico en s, sino la coincidencia de dos elementos en un mismo espacio. Esto lo podremos evaluar y tratar con la funcin hitTest(). Su uso tiene dos posibilidades, ambas muy sencillas. Puedes evaluar si en un punto en concreto se encuentra un objeto especfico (muy til para detectar los clics del ratn o donde se encuentra en cada momento):
var escuchador:Object = new Object(); escuchador.onMouseDown = function() { if (miClip.hitTest(_xmouse,_ymouse) { //coincidencia } } Mouse.addListener(escuchador);

Este cdigo evala la posicin del ratn a cada clic, si las coordenadas introducidas en la siguiente lnea coinciden con el rea de miClip se produce colisin:
miClip.hitTest(_xmouse, _ymouse);

Cuando utilizamos esta funcin pasndole unas coordenadas podremos aadirle un parmetro: formaObjeto. Este parmetro tomar valor true si queremos que se detecte la colisin con la forma de la instancia, o false si queremos que se evale con sus bordes rectngulares de objeto. La funcin, entonces, tomara la siguiente forma:
miClip.hitTest(coorX, coorY, formaObjeto);

Donde formaObjeto decidir si se toma o no la forma completa del clip miClip.

Tambin podemos ver si dos objetos chocan entre s dndole un target a la funcin en vez de unas coordenadas. En ese caso tendramos:
var colision:Boolean = miClip.hitTest(miClip2);

En este caso hemos almacenado en la variable colisin el valor de la evaluacin de solapamiento o corte entre la posicin de miClip y miClip2. Esta lnea tendra su homlogo en:

var colision:Boolean = miClip2.hitTest(miClip);

Pues ambas realizan la misma accin al buscar coincidencias entre los mismos objetos.

En desplazamientos utilizaremos mucho esta opcin para averiguar si el objeto que estamos moviendo choca con una pared u otro objeto. Ten en cuenta que la posicin que deberemos evaluar si hace colisin con la pared debe ser aquella que adoptara el objeto despus de desplazarse. Esto complica un poco las cosas, pues deberemos utilizar la primera sintaxis de la funcin:
miPared.hitTest(coorXfinal_Clip, coorYfinal_Clip);

Pero, cmo conocemos las coordenadas de una forma?, cmo averiguo el punto mximo que alcanza en la esquina abajo derecha?. La respuesta a esta segunda pregunta es bastante sencilla, debo averiguar la coordenada mxima de las x (para conocer su ancho mximo) y lo mismo para las y (para conocer su altura mxima). Utilizaremos para ello la funcin getBounds(). Esta funcin trabaja de la siguiente forma:
miClip.getBounds(movieclip);

Donde en movieclip escribiremos la ruta de destino de la lnea de tiempo cuyo sistema de coordenadas utilizaremos como punto de referencia. Normalmente escribiremos _root, para que las coordenadas dadas sean respecto a la pelcula en general y no sobre un clip en particular. Mediante esta funcin podremos acceder a las x mnimas y mximas, y lo mismo para las y. Slo debers escribir lo siguiente:
miClip.getBounds(_root).xMin; miClip.getBounds(_root).xMax; miClip.getBounds(_root).yMin; miClip.getBounds(_root).yMax;

Realiza el paso a paso de Colisin y Movimiento para practicar este concepto. Ejercicio. Unidad 23. Colisin y Movimiento Objetivo. Reproduciremos la pelcula que vimos en la teora:

Ejercicio paso a paso. 1. Abre el archivo colision.fla que encontrars en la carpeta ejercicios/colision del curso.

2. Selecciona el primer fotograma y abre el Panel Acciones, escribe en l lo siguiente:

3. onEnterFrame = function() { 4. var velocidad:Number = 1; 5. 6. if (Key.isDown(Key.DOWN)) { 7. if (!(fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMax+velocidad, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMax+velocidad, true))) { 8. miClip._y += velocidad; 9. } 10. } 11. if (Key.isDown(Key.UP)) { 12. if (! (fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMin-velocidad, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMin-velocidad, true))) { 13. miClip._y -= velocidad; 14. } 15. } 16. if (Key.isDown(Key.LEFT)) { 17. if (! (fondo.hitTest(miClip.getBounds(_root).xMin-velocidad, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMin-velocidad, miClip.getBounds(_root).yMax, true))) { 18. miClip._x -= velocidad; 19. } 20. } 21. if (Key.isDown(Key.RIGHT)) { 22. if (! (fondo.hitTest(miClip.getBounds(_root).xMax+velocidad, miClip.getBounds(_root).yMin, true) ||

fondo.hitTest(miClip.getBounds(_root).xMax+velocidad, miClip.getBounds(_root).yMax, true))) { 23. miClip._x += velocidad; 24. } 25. } }

Parece un poco complicado pero en esencia es ms sencillo. Para cada uno de los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce colisin con el objeto miClip y el clip fondo. Pero no bastar con hacerlo slo de una esquina, veamos un ejemplo para verlos con ms claridad:

Como ves en la imagen, deberemos ver si se producen dos colisiones. En el movimiento hacia abajo una ser la de la esquina inferior izquierda y la otra de la esquina inferior derecha. Si por ejemplo, no evaluasemos el choque con la esquina inferior izquierda e intentsemos realizar un movimiento hacia abajo, ste se realizara! Y en definitiva es lo que queremos evitar. Observa tambin que para realizar el hitTest hemos tenido en cuenta la posicin que adoptar el objeto despus del movimiento (sumndole la velocidad, o lo que es lo mismo, el nmero de pxeles que se desplaza el objeto a cada pulsacin).
Unidad 23. Juegos

(VII).

Funciones Avanzadas Tambin veremos otras opciones que nos ayudarn mucho a la hora de crear juegos. Una de ellas es la de la posibilidad de darle aleatoriedad a los componentes.

Podemos utilizar la funcin que incorpora Flash Math.random() que devuelve un nmero pseudo-aleatorio entre 1 y 0.

Su uso es simple slo debers escribir:

var miNumero:Number = Math.random();

Su uso es tan til que a raz de esta funcin se ha creado este trozo de cdigo que casi utilizars en la mayora de tus pelculas que contengan componentes aleatorios:
function randRange(minNum:Number, maxNum:Number):Number { return (Math.floor(Math.random()*(maxNum-minNum+1))+minNum); }

Esta funcin te devuelve un nmero aleatorio entre dos nmeros:

var miNumero:Number = randRange(1, 100);

En este ejemplo se almacenar un nmero de 1 a 100 en la variable miNumero. En el juego de ejemplo que estamos viendo hemos utilizado esta funcin para generar la cada de proyectiles:
var randomProyectil:Number = randRange(1, 3); var miProyectil:MovieClip = this.attachMovie("proyectil"+randomProyectil, "proyectil"+profundidad, profundidad); profundidad++; miProyectil._y = -miProyectil._width; var scale:Number = randRange(80, 100); miProyectil._xscale = scale; miProyectil._yscale = scale; miProyectil._alpha = scale; miProyectil.speed = velocidad+randRange(0, 3)+level; miProyectil._x = randRange(10, 540);

Como ves tenemos randomizados muchos de los procesos. El primer randRange decide qu tipo de proyectil se lanzar. El segundo nos da el tamao (_xscale e _yscale) y la transparencia que tendr. El trecer nmero aleatorio se lo asignaremos a la velocidad. Y por ultimo utilizamos un cuarto randRange para posicionar el proyectil en una coordenada x de la pantalla. De esta forma hemos logrado un abanico de posibilidades muy amplio en posibilidades de proyectiles.

Otra de las funciones que te vendrn muy bien es la de dotar de velocidad a los movimientos de los objetos.

Observa el cdigo que hemos introducido en el juego:

miProyectil.speed = velocidad+randRange(0, 3)+level;

Hemos creado una velocidad inicial y le hemos sumado una aleatoria para cada elemento, luego lo hemos asociado a una propiedad speed que hemos aadido al elemento. De hecho, a esa velocidad se le suma la que tiene el nivel del juego que va aumentando a medida que se van eliminando proyectiles. De ah que cuando asignamos el movimiento del elemento:
this._y += this.speed;

Lo hacemos refirindonos a la velocidad, as podemos variarla en cualquier momento aumentndola o reducindola segn nuestros propsitos.

Por ltimo veremos algo que nos permitir mostrar informacin a los usuarios para que ellos tengan conocimiento de cmo se est desarrollando la partida. Esto lo haremos con los textFields. Los textFields pueden ser elementos que hayamos creado antes de publicar la pelcula, as que no tendremos problemas con ellos. Simplemente los declararemos como texto dinmico e iremos modificando su contenido. Pero, Y si queremos crear un campo de texto mediante ActionScript? Muy sencillo, te bastarn unas pocas lneas para conseguirlo:
var miFormato:TextFormat = new TextFormat(); miFormato.bold = true; miFormato.font = "Arial"; miFormato.size = 12; miFormato.color = 0xFFFFFF; miFormato.align = "left"; this.createTextField("estadisticas_txt", 5000, 10, 0, 530, 22); estadisticas_txt.setNewTextFormat(miFormato); estadisticas_txt.selectable = false; estadisticas_txt.tabStops = [100, 200, 300, 400];

Este es el cdigo que hemos utilizado en el juego. Puedes ver que hemos creado un objeto llamado miFormato con unas caractersticas bsicas que podremos aplicar sobre cualquier texto de nuestra pelcula. Luego mediante la funcin createTextField hemos creado el campo. Veamos cual es su sintaxis:
createTextField(nombreInstancia, profundidad, coordenadaX, coordenadaY, anchura, altura);

Como puedes ver, otra vez nos encontramos con los niveles que utilizbamos con la funcin attahMovie. Simplemente asegrate de que no repites el nivel y todo ir bien. Ahora slo har falta remitirse a la propiedad text del texto que hemos creado para darle un valor, y el texto se mostrar en pantalla:
estadisticas_txt.text = "Estas son las estadsticas del juego";

Las propiedades de formato de texto que hemos utilizado son las ms comunes, si necesitas un listado completo de ellas puedes visitar nuestra seccin avanzada.
Unidad 23. Avanzado.Propiedades

del Formato de Texto

Aqu podrs encontrar una referencia a todas las propiedades del Objeto TextFormat:

align: indica el alineamiento del texto. Puede tomar los valores: "left", "right", "center" y "justify".

bold: puede tomar los valores true o false. Determina si el texto se mostrar en negrita.

italic: puede tomar los valores true o false. Indica si el texto se ver en cursiva.

underline: puede tomar los valores true o false. Determina si el texto aparecer subrayado.

color: determina el color del texto, debe estar escrito en hexadecimal, por ejemplo 0x000000.

font: indica el nombre de la fuente a utilizar (eg. "Courier", "New Times Roman", etc...).

size: determina el tamao del texto en puntos.

bullet: puede tomar los valores true o false. Si se activa esta opcin se mostrar el texto como una lista no ordenada. Cada prrafo ser un elemento de la lista.

indent: determina el espacio de sangra de la primera lnea del texto.

blockindent: determina el espacio de sangra de un bloque completo de texto.

kerning: indica el ajuste entre caracteres del texto.

leading: determina el interlineado. Introduce un valor en pxeles.

letterSpacing: indica el espacio entre las letras del texto.

leftMargin: determina la distancia en puntos del bloque de texto al margen izquierdo.

rightMargin: determina la distancia en puntos del bloque de texto al margen derecho .

tabStops: crea tabulaciones personalizadas en el texto. Debers introducir las tabulaciones como \t cuando escribas. Debers introducir una matriz de nmeros positivos, cada uno de ellos sera un punto de tabulacin.

url: indica el vnculo web que se le aplicar al texto.

target: determina el destino que tendra el vnculo en el campo url (si lo hubiese). Puede tomar los valores "_blank", "_self", "_parent" y "_top".

nidad 24. Animaciones

avanzadas

(I) Movimiento de objetos mediante ActionScript Para poder mover objetos con ActionScript debemos conocer el sistema de coordenadas utilizado por Flash. La esquina superior izquierda es la posicin x=0, y=0. (ver la imagen) Para mover un objeto debemos modificar su posicin definida por las propiedades objeto._x y objeto._y Por ejemplo, si hacemos objeto._x += 10 estamos desplazando el objeto 10 pxeles hacia la derecha. Vamos a ver como mover un objeto a partir de este ejemplo de una bola botando El algoritmo es muy sencillo, se trata de ir modificando la posicin de la bola desde una posicin inicial para que vaya bajando hasta que llegue al suelo, en ese momento invertimos el movimiento para que suba y calculamos hasta donde tiene que subir. As sucesivamente hasta que deje de botar. Para que la bola baje debemos sumar una cantidad a la coordenada y, y para que suba debemos restarle una cantidad. Si queremos que la bola se vaya desplazando hacia la derecha debemos sumar una cantidad a la coordenada x. Cuando la bola baja, segn el esquema de la derecha, pasa de la posicin (x1, y1) a la posicin (x2, y2), para ello se incrementa la x con el valor incre_x (que estaria representado por la lnea azul) y se incrementa la y con el valor incre_y (que estaria representado por la lnea roja). Cuando la bola sube, la nica diferencia es que la coordenada y va disminuyendo en lugar de aumentando, segn el esquema de la derecha, al subir se pasa de la posicin (x'1, y'1) a la posicin (x'2, y'2), para ello se incrementa la x con el valor incre_x (que estaria representado por la lnea azul) y se decrementa la y con el valor incre_y (que estaria representado por la lnea roja)

Vamos a ver lo ms importante del cdigo ActionScript que tenemos un poco ms abajo. Hemos definido creado una bola azul y la hemos convertido en un movieclip, la instancia se llama bola_mc. Inicialmente la bola esta en la posicin (bola_mc._x= 0,bola_mc._y= 0) Mediante la variable baja, sabremos si la bola esta bajando o subiendo. Cuando la coordenada y llega al suelo, la bola pasar a subir, cuando la coordenada y llegue al tope la bola comenzar a bajar. En cada bote la bola ira perdiendo fuerza y el bote sera ms bajo, la variable elasticidad determinar esta perdida de potencia. Cada vez que la bola llega al tope calculamos el nuevo tope, para ello calculamos la distancia de la bola al suelo, la dividimos por la elasticidad y esa cantidad se la sumamos al tope. En el esquema, la linea naranja representa esa cantidad que le sumamos al tope 1 para pasar al tope 2. Ya tenemos nuestro cdigo casi preparado, ahora slo falta hacer que el proceso se repita un nmero determinado de veces. Esta pelcula Flash slo tiene un fotograma. Cmo hacemos esto? Lo primero que se nos ocurre es incluir una instruccin while ... o una instruccin for ... , si lo hacemos veremos que no funcionar porque la repeticin es tan rpida que no da tiempo a ver nada. La solucin est en introducir una instruccin que haga que el proceso se repita cada 35 milisegundos. Esto lo vamos a ver en el punto siguiente. Hemos colocado un botn en la pelcula de forma que cada vez que se pulsa, se detine la ejecucin (si todava no haba acabado) y se lanza una nueva ejecucin. Cuando el tope llega al suelo se detine la ejecucin.

on (release) { var baja:Boolean = true; var incre_x:Number = 3.5; var incre_y:Number = 8; var suelo:Number = 280; var tope:Number = 0; var elasticidad:Number = 3; bola_mc._y = 0; bola_mc._x = 0; tope += (suelo - bola_mc._y) / elasticidad; var repeticion:Number; function botar() { if (baja) { // baja bola_mc._y += incre_y; bola_mc._x += incre_x; if (bola_mc._y>=suelo) { baja = false; } } else { // sube bola_mc._y -= incre_y; bola_mc._x += incre_x; if (bola_mc._y<=tope) { baja = true; if (tope>=suelo) { incre_y = 0; clearInterval(repeticion); } tope += (suelo - bola_mc._y) / elasticidad; } } } clearInterval(repeticion); repeticion = setInterval(botar, 35); }

En este sencillo ejemplo la trayectoria de la bola es rectilnea, para que fuese un movimiento ms real debera seguir una trayectora curva. Dibujar curvas es un poco ms complicado que dibujar rectas. Flash nos ofrece una opcin ms sencilla para hacer que un objeto siga una trayectoria curva: las guas de movimiento que veremos en este mismo tema aplicadas al bote de una pelota. De todas formas si deseas probar suerte con las curvas y ActionScript realiza el ejercicio Espiral para empezar a familiarizarte con ellas.
jercicio. Unidad 24.

Movimiento en Espiral

Objetivo. Reproduciremos la pelcula que puedes ver a continuacin:

Ejercicio paso a paso. 1. Abre el archivo espiral.fla que encontrars en la carpeta ejercicios/espiral del curso.

2. Haz clic en el fotograma 2 de la capa acciones.

3. Abre el Panel Acciones pulsando la tecla F9.

4. Escribe lo siguiente:

5. _global.velocidad = 0.2; 6. _global.distancia = 5; _global.recorrido = 30;

7. Cierra el Panel Acciones y selecciona la bola.

8. Vuelve a abrir el Panel Acciones y escribe lo siguiente:

9. onClipEvent (enterFrame) { 10. if (recorrido>0) { 11. var i:Number = distancia*recorrido; 12. this._x = Math.round(i*Math.cos(recorrido)) + Stage.width/2; 13. this._y = Math.round(i*Math.sin(recorrido)) + Stage.height/2; 14. recorrido -= velocidad; 15. 16. var radianes:Number = Math.atan2((this._xStage.width/2), (this._y-Stage.height/2)); 17. var grados:Number = Math.round(radianes*180/Math.PI); 18. this._rotation = -grados+5; 19. 20. this._xscale = recorrido * 5; 21. this._yscale = this._xscale; 22. } }

Como puedes ver calculamos el ngulo de la bola respecto al centro de la pantalla, le damos un desajuste de 5 grados para que parezca ms real. En cuanto a la escala puedes ver que va en relacin al recorrido. El movimiento de la bola lo hemos sacado de la frmula de la espiral de Arqumedes. Podrs encontrar informacin sobre ella en la red.
Unidad 24. Animaciones

avanzadas (II) Funcin setInterval y propiedad onEnterFrame La funcin setInterval se utiliza cuando queremos que se repita la ejecucin de un cdigo ActionScript cada cierto nmero de milisegundos, y la propiedad onEnterFrame se utiliza cuando queremos ejecutar un cdigo ActionScript en funcin de la velocidad de la pelcula Flash. Estas funciones se pueden utilizar para controlar el tiempo cuando utilizamos ActinScript y no nos interesa utilizar los fotogramas como forma de control del tiempo. Por ejemplo, podemos genera un objeto y hacer que se mueva un 5 pixels cada 30 msg. variando estos parmetros conseguiremos que el objeto se mueva ms o menos rpido. setInterval El formato de esta funcin es el siguiente:

var retardo:Number = setInterval(functionReference:Function, interval:Number, [param1:Object, param2, ..., paramN]);

Donde, functionReference es la funcin que se va a repetir. interval es el nmero de milisegundos que van a transcurrir entre cada llamada a la funcin. [param1:Object, param2, ..., paramN] es la lista opcional de parmetros que se pasan a la funcin. retardo es una variable que identifica el intervalo y que sirve para utilizarlo con clearInterval() para detener la ejecucin. Por ejemplo, el codigo siguiente escribe 10 veces el mensaje "contador" i , cada 2000 milisegundos (2 sg.).
var i:Number = 1; var repeticion:Number = setInterval(contar, 2000); function contar() { trace("contador: "+ i++); if (i>10) { clearInterval(repeticion); } }

La funcion clearInterval sirve para detener la ejecucin de la funcin llamada desde setInterval. Por lo tanto, conviene utilizar clearInterval siempre que usemos setInterval, para evitar que la ejecucin contine indefinidamente. En el ejemplo del punto anterior hemos definido la funcin gobal setInterval para que la funcin botar se ejecute cada 35 milisegundos.

onEnterFrame El controlador de eventos onEnterFrame, asociado al objeto MovieClip, permite invocar a una funcin de forma repetida tantas veces como fotogramas por segundo tenga definida la pelcula. Por ejemplo, en el movieClip bola_mc:
var i:Number =0; bola_mc.onEnterFrame = function() { trace("ejecutando: "+ ++i); if ( i > 30 ){ delete this.onEnterFrame; } }

Si la velocidad de la pelcula es de 12 fps, este cdigo escribira en la salida 12 lneas por segundo, de esta forma: ejecutando:1 ejecutando:2 ejecutando:3 ... Como puedes ver hemos aadido una condicin para que cuando el valor de i sea mayor de 30 acabe la ejecucin del controlador onEnterFrame y as evitar que se ejecute indefinidamente.

Aunque con este ejemplo no lo parezca, (slo pretende explicar la funcin) estas dos tipo de funciones que se ejecutan repetitivamente pueden ser muy tiles en determinadas ocasiones. A lo largo del cursos ya hemos visto algunos ejemplos de su utilidad, a continuacin veremos otro ejemplo que puede sernos til. Imagnate que quieres que tu pelicula se detenga durante 2 segundos y luego continue. Esta es una forma de hacerlo utilizando la funcin setInterval.

Colocariamos este cdigo en el frame que deseemos, llamamos a setInterval con 1 sg (1000 milisg) y cuando se hallan cumplido dos llamadas detenemos setInterval y continuamos con el siguiente frame de la pelcula.
var tope:Number = 1; var repeticion:Number = setInterval(parar, 1000); function parar() { tope++; if (tope > 2) { clearInterval(repeticion); nextFrame(); play(); } } stop();

Unidad 24. Animaciones

avanzadas (III) Movimiento de objetos mediante gua

En esta unidad ya hemos visto como hacer botar una bola mediante ActionScript, ahora vamos a recordar una tcnica que ya vimos en la unidad 9, animacin mediante gua de movimiento. En este caso, se trata de imitar el bote de una pelota, por lo tanto, dibujamos una curva que imite dicho bote. De esta forma conseguiremos una animacin que resulta ms natural que el bote con trayectora recta que vimos en el punto anterior.

En las imgenes podrs ver que proceso hemos seguido para dibujar el movimiento. La gua la hemos dibujando sucesivas curvas de modo que la pelota invite el movimiento que queremos crear. Para darle mayor realismo hemos insertado fotogramas claves en puntos crticos para achatar la pelota y dotarla de elasticidad.

Ahora podrs combinar muchas de las tcnicas que hemos aprendido para generar algo as: (Haz clic en la pelcula y luego usa las teclas de movimiento a derecha e izquierda)

Hemos visto dos tcnicas diferente para animar un objeto en Flash, mediante ActionScript y mediante gua de movimiento. Segn cada caso concreto resultar ms adecuado eligir una u otra tcnica. En general, resulta ms fcil y rpido utilizar guas de movimiento que ActionScript, sobre todo si el movimiento que tiene que seguir el objeto es sinuoso y dificil de definir en trminos de una ecuacin matemtica.

Hay casos en los que ser ms adecuado utilizar ActionScript y otros casos en los que slo ser posible crear el movimiento mediante ActionScript, por ejemplo, si queremos que un objeto se mueva de forma aleatoria por un escenario.
Unidad 24. Animaciones

avanzadas (IV) Animaciones de rostros Una de las bases para hacer animaciones de personajes es la animacin de rostros, en esta pequea introduccin aprenderemos cmo hacer que un rostro pase de la risa al enfado. Todos sabemos que un rostro sonriente tiene las cejas, los ojos y la boca en distinta posicin que un rostro enfadado. Vamos a ver como con unas sencillas tranformaciones de forma y de color obtenemos un buen resultado.

Lo primero que hay que tener en cuenta es dibujar los elementos que tienen que moverse en una capa propia, as crearemos una capa para la boca, cejas, etc. Dibujamos la boca con herramienta Linea, en el fotograma 1, y creamos un frame clave en el fotograma 17. Para convertir la lnea recta en una curva, volvemos al fotograma 1 y activamos la herramienta Seleccin y nos aseguramos de que la lnea de la boca NO este seleccionada. Ahora acercamos el cursor a la lnea y cuando aparezca una pequea lnea curva debajo del cursor hacemos clic y arrastramos hacia abajo, asi tendremos

una boca sonriente. Vamos al fotograma 17 y hacemos lo mismo pero arrastrando hacia arriba para conseguir una boca enfadada. Es importante que arrastres desde el centro de la lnea y en direccin perpendicular para que quede una curva simtrica. En el caso de las cejas, nos interesa que la curva no sea simtrica y deberemos arrastrar desde un lateral de la lnea en lugar de desde el centro.

Sencillo, verdad?
Unidad 24. Animaciones

avanzadas (V) Animaciones geomtricas en 3D

Vamos a ver como crear una animacin de una caja girando en tres dimensiones. Para abordar una animacin de este tipo, evidentemente, debemos conocer como dibujar objetos en tres dimensiones. Hay varios tipos de perspectiva que se pueden utilizar: a) perspectiva caballera b) perspectiva isonomtrica y c) perspectiva cnica.

Estudiar perspectiva no es el objeto de este curso por lo tanto no vamos a ser muy estrictos al hacer los dibujos y como consecuencia de ello el resultado final tampoco va a ser una animacin perfectamente realista, pero lo que tratamos de explicar es nicamente el proceso de animacin. Se trata de hacer girar una caja desde una posicin inicial hasta una posicin fila. Para hacer la animacin debemos dibujar la caja en varias posiciones intermedias. A continuacin crearemos animaciones de forma para cada una de las caras visibles de la caja.

Hay que tener en cuenta que inicialmente la cara de la derecha no es visible, pero se ira haciendo visible segn avance el giro. Luego deberemos introducir interpolaciones entre las diferentes posiciones para terminar con un resultado parecido a este:

Unidad 24. Animaciones

avanzadas (VI) Animaciones con movimientos complejos Existen multitud de movimientos complejos que se pueden imitar con animaciones Flash, es evidente que no podemos verlos todos, por lo tanto hemos elegido uno bastante comn y que nos puede servir como base para explicar unos cuantos conceptos. Se trata de imitar el movimiento de una persona corriendo. Esperamos que con estas explicaciones seas capaz de realizar variaciones ms complejas, como podrian ser hacer que el mueco practicase diferentes deportes.

Vamos a explicar cmo realizar la animacin que puedes ver en esta pgina. Para simplificar hemos dibujado una persona de forma esquemtica. A la hora de plantearnos cmo realizar una animacin de este tipo, lo primero que debemos hacer es analizar el movimiento para ver si est

compuesto por elementos que se repiten, o si se puede separar en distintos componentes o cualquier otra situacin que nos permita simplificar la animacin. En el caso que nos ocupa podemos separar el movimiento de las distintas partes del cuerpo, piernas, brazos, cabeza y tronco. Tambin podriamos aadir manos y pies pero no lo haremos para no complicar demasiado la explicacin. Hemos creado una capa para cada parte del cuerpo, como puedes ver en esta imagen.

Otra circunstancia que podemos observar es que el movimiento del brazo izquierdo y del brazo derecho son muy parecidos, se diferencian en la distinta posicin de partida. Por lo tanto bastar con realizar un movimiento que nos servir para ambos brazos. Lo mismo ocurre con las piernas. A su vez, podemos separar el movimiento del brazo en dos movimientos, uno cuando el brazo avanza (va desde la posicin ms atrasada hasta la posicin ms adelantada) , y otro cuando el brazo retrocede (va desde la posicin ms adelantada hasta la ms atrasada). De esta forma, con dos movieclips podremos representar el movimiento de ambos brazos. Los movieclips son idnticos salvo en el sentido del movimiento.

En esta imagen puedes ver el movie clip "brazo_adelante", hemos creado una capa para la parte superior del brazo y hemos hecho que gire sobre su extremo superior (hombro). Para el antebrazo henos creado otra capa con su capa gua, la capa gua sirve para que la parte superior del antebrazo siga la trayectoria que describe el extremo inferior (codo). Tambin hemos incluido un giro en el antebrazo.

En esta imagen intentamos explicar como estn colocados los dos movieclips que forman el movimiento de los brazos en la lnea del tiempo.. El brazo izquierdo comienza con el movie clip "brazo_adelante" y contina con el movie clip "brazo_atras", mientras que el brazo derecho comienza con el movie clip "brazo_atras" y contina con el movie clip "brazo_adelante", de esta forma cuando el brazo izquierdo avance el brazo derecho retroceder.

Slo nos queda ver un detalle interesante. Hemos considerado idnticos el movimiento del brazo hacia adelante y del brazo hacia atrs y la animacin queda bastante bien. Sin embargo Podemos decir lo mismo del movimiento de las piernas? Claramente no, ya que cuando la pierna va hacia atrs debe apoyarse en el suelo, mientras que cuando va hacia adelante no debe

tocar el suelo.

Si comparas las dos imgenes de la derecha podrs observar como hemos incluido un fotograma clave en la "pierna_adelante" para poder mantener la pantorrilla en posicin ms horizontal y que no toque el suelo.

Rotoscopia La rotoscopia es una tcnica que utiliza un movimiento real como patrn para calcar las imagenes de la animacin. Hace aos que se utiliza esta tcnica, por ejemplo, en las pelculas de dibujos animados para conseguir movimientos realistas al caminar. Hay varios mtodos para ejecutar esta tcnica, nosotros vamos a hablar del mas sencillo para utilizar en Flash. Un mtodo ms complejo sera colocar puntos blancos o luces en diferentes partes del cuerpo de una persona vestida de negro y realizar una pelcula sobre un fondo negro para luego generar el movimiento a partir de los puntos captados. Con una cmara de vdeo podemos grabar el efecto que

queremos reproducir, por ejemplo, una persona caminando, Luego importaremos el vdeo al formato de Flash, pero esta vez lo haremos de forma diferente a la que aprendimos en el tema Vdeos. Del mismo modo deberemos hacer clic en Archivo Importar Importar vdeo y seguir los pasos que aprendimos entonces, slo que en la pantalla de seleccin de mtodo de importacin deberemos seleccionar Incorporar vdeo en SWF y reproducir en la lnea de tiempo.

Esto har que el vdeo se exporte d forma que lo podremos visualizar fotograma a fotograma. Sigue el re de opciones hasta el final y el vdeo colocar en la lnea de tiempo.

Luego crearemos una nueva capa p encima y crearemos tantos fotogram claves como fotogramas de pelcul queramos copiar. El resto es sencil coje un pincel y a calcar. Cuanta m precisin consigas, ms impresiona sern los resultados.

Este proceso es muy laborioso, per crea animaciones espectaculares.

Practica un poco y vers como no e nada complicado, te requerir basta paciencia, pero la pelcula final te valdr la pena.

Si quieres mantener el audio, cuand importes el vdeo selecciona que qu mantener el audio y el vdeo separa As cuando elimines la capa de vd animacin mantendr el sonido de pelcula. Tus animaciones sern ca de hablar!
nidad 24. Animaciones

avanzadas (VIII)

API de dibujo. Creando dibujos con ActionScript En este apartado aprenderemos a manejar el API de dibujo de Flash. Su uso es muy claro y sencillo, bastar con que comprendas unas cuantas instrucciones. Antes de empezar a dibujar debers tener un clip donde hacerlo, para ello nos crearemos un clip vaco utilizando la funcin createEmptyMovieClip():
this.createEmptyMovieClip("miClip", this.getNextHighestDepth());

Como puedes ver, le pasamos dos parmetros, el primero ser el nombre de instancia al cual nos referiremos para modificar las propiedades del clip. El segundo parmetro indica el nivel de profundidad del clip. Hemos utilizado la funcin getNextHighestDepth() para averiguar cul es el nivel superior en este clip y as posicionar nuestro dibujo en la parte superior (as no lo tapar ningn otro objeto).

Una vez creado el clip podemos pasar a dibujar sobre l. Hacerlo es muy fcil, slo debers inicializar el proceso de dibujo escribiendo:
miClip.beginFill(color, alfa);

Donde color indicar el color de relleno que se le aplicar al dibujo. Deber estar en hexadecimal, por ejemplo: 0x000000. El parmetro alfa indicar la transparencia del relleno.

Luego nos valdremos de un par de funciones:

miClip.moveTo(x, y);

Esto hace que el punto de dibujo se coloque en las coordenadas especificadas. Podemos empezar a pintar a partir de la coordenada (100, 100), por ejemplo. Luego nos quedar solamente dibujar lneas en el espacio que contendrn el relleno de nuestro dibujo. Utiliza la instruccin lineTo():
miClip.lineTo(x, y);

Esto har que el punto de dibujo se desplace hasta la posicin (x, y), desde donde se crear el siguiente trazo de dibujo.
miClip.beginFill(0xFF0000); miClip.moveTo(10, 10); miClip.lineTo(10, 100); miClip.lineTo(100, 100); miClip.lineTo(100, 10); miClip.lineTo(10, 10); miClip.endFill();

Terminamos la instruccin con endFill(). Este ejemplo dibujara un cuadrado en la posicin (10, 10). Sencillo, verdad?

Podemos establecer el tipo de lnea que rodear al dibujo escribiendo lo siguiente:

miClip.lineStyle(grosor, color, alfa, trazos, escala, extremos, uniones, limiteEsquinas);

Nota: Esta instruccin deber estar colocada antes de utilizar la funcin beginFill(), quedara de esta forma:
miClip.lineStyle(1, 0x000000, 100); miClip.beginFill(0xFF0000); miClip.moveTo(10, 10); miClip.lineTo(10, 100); miClip.lineTo(100, 100); miClip.lineTo(100, 10); miClip.lineTo(10, 10); miClip.endFill();

Ahora explicaremos en detalle los parmetros de esta instruccin:

grosor: un nmero de 0 a 255 que indicar el grosor del borde.

color: en hexadecimal, el color del borde.

alfa: nivel de transparencia del borde, de 0 a 100.

trazos: valor booleano, har que los anclajes de las lneas y curvas se realicen de forma exacta. De este modo los trazos se dibujarn a pxeles exactos en cualquier grosor (as no se vern lneas imprecisas).

escala: especifica cmo se tendr que efectuar la escala del borde. Sus valores pueden ser "normal", que toma el modelo predeterminado; "none", que obliga a no cambiar nunca la escala del borde; "vertical", que no cambiar la escala si el objeto slo cambia su escala vertical; y "horizontal", que no cambiar la escala si el objeto slo cambia su escala horizontal.

extremos: define cmo se dibujarn los extremos de los bordes,

uniones: establece el tipo de uniones que se establecern en el borde,

limiteEsquinas: un nmero entre 1 y 255, indica la distancia de la esquina al trazo real,