1.1. Qu es FLASH? Flash CS4 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores. Flash fue creado con el objeto de realizar animaciones y diseos vistosos para la web, as como para crear Los motivos que han convertido a Flash CS4 en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Veamos pues, porque es interesante Flash CS4. Desde la web de http://www.adobe.com/es/products/flash/ te puedes descargar una versin de evaluacin de Flash CS4 vlida para 30 das. Los logotipos de Flash son propiedad de Adobe, as como las marcas registradas Flash y Adobe. EDI no tiene ninguna relacin con Adobe.
1.2. Por qu usar Flash CS4? Las posibilidades de Flash son extraordinarias, cada nueva versin ha mejorado a la anterior, y el actual Flash CS4 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, desde un botn a un complejo juego.
Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de programacin Flash. A cada versin se mejora y ofrece un abanico de posibilidades cada vez mayor, por lo que adems de dinamismo, Flash nos ofrece la posibilidad de ser la plataforma para aplicaciones web de un modo real. 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? 1.3. De Flash CS3 a Flash CS4
Adobe suele integrar todos sus productos en una suite nica en la que prima sobre todo la compatibilidad entre ellos. As la compaa se desmarca del resto ofreciendo un paquete de aplicaciones muy completas como hemos ido viendo ao tras ao que son capaces de interactuar entre ellas y nos ofrecen la posibilidad de rehusar proyectos de un programa en otro. Vamos a ver las opciones ms destacadas que encontramos en esta ltima versin: Mejora del trabajo con objetos. Las interpolaciones de movimiento se aplican sobre los objetos, y no sobre los fotogramas, permitindonos un mayor control, ya que slo tenemos que modificar el objeto, y Flash se encargara de crear los fotogramas clave necesarios. Adems podemos emplear el panel Editor de movimiento para afinar ms an el comportamiento de la interpolacin fotograma a fotograma, y regular sus valores de forma visual.
Adems de lo que podremos lograr con este panel, Flash incluye ahora una serie de movimientos predefinidos que podremos utilizar, adems de permitirnos guardar nuestros movimientos favoritos. El uso del panel y las animaciones prediseadas nos ahorrarn mucho tiempo.
Las herramientas Pincel rociador y Deco nos permiten utilizar nuestros smbolos para crear patrones y rellenos, llegando a conseguir efectos vistosos pero sencillos de aplicar. La herramienta Hueso, y la tcnica de trabajo cinemtica inversa, nos permiten crear animaciones naturales con sorprendente facilidad. Creando un esqueleto interno que determina cmo se relacionan nuestros smbolos, nos permite definir cmo pueden moverse entre ellos, formando cadenas que slo se doblan por las articulaciones. Las herramientas de rotacin en 3D nos permitirn ahora girar nuestros smbolos en los tres ejes (X, Y, Z). Como en el resto de productos de Adobe, en esta ltima versin el interfaz ha cambiado para mejorar la experiencia del usuario, hacindolo ms accesible, pero sobre todo ms personalizable.
Unidad 1. Introduccin a Flash CS4 (II) 1.4. Flash, ventajas y desventajas El principal uso de Flash se da en el mundo de la web. Desde la creacin de pequeos botones o banners publicitarios, hasta webs totalmente basadas en esta tecnologa, Internet est repleta de animaciones Flash. Como todo, Flash presenta tanto ventajas como inconvenientes: El tiempo de carga. Mientras que una pgina HTML puede ocupar unos 10-20 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. Los buscadores. Son capaces de indexar el contenido de nuestra pgina, el texto, pero no el contenido del Flash, ya que no lo pueden leer, lo que afectar negativamente al posicionamiento de la pgina. Y hoy en da es crucial para una web encontrarse bien posicionada. No obstante, los buscadores trabajan para solucionar este problema, pero de momento al mejor forma de solucionarlo es crear un diseo paralelo sin Flash, lo que aumenta el trabajo. Flash requiere de plugins para poder visualizarse, y el hecho de no tenerlos instalados, o de que un navegador tenga los scripts deshabilitados por seguridad, impedirn la visualizacin del Flash. Este plugin lo suelen incorporar la mayora de navegadores, es gratuito y se puede instalar de forma muy intuitiva, pero siempre habr usuarios que prefieran salir de nuestra pgina si tienen que instalar "algo raro". Compatibilidad con distintos dispositivos. Cada vez es ms frecuente acceder a la web con telfonos mviles y PDAs, y muchos de ellos no soportan Flash. Flash es una tecnologa propietaria de Adobe, por lo que su futuro depende de lo que esta compaa quiera hacer con l. Otro aspecto a tener en cuenta es la usabilidad de las pginas Flash, a veces se cae en la tentacin de dar demasiada importancia al diseo y olvidarse de que la pgina debe ser fcil de usar, aunque es ms un error de diseo que del propio Flash. Por supuesto su fuerte uso en la web se debe a que tambin aporta ventajas: La web se vuelve muy vistosa y atractiva, adems de aadirle ms interactividad. El aspecto visual es muy importante para la web, ya que al visitante, sobre todo al principio, "le entra por los ojos". Con un poco de prctica, el desarrollo con Flash se vuelve rpido. Flash permite comportamientos que de otra forma no podramos lograr. Compatibilidad con navegadores. Uno de los principales problemas en el diseo web es que el resultado no tiene por qu verse igual en todos los navegadores. Con Flash, nos aseguramos de que lo que hemos creado es exactamente lo que se ver. Por tanto, se hace necesario cuando lo que se necesita es que el usuario pueda interactuar completamente con el contenido.
Resumiendo, insertar o no contenido Flash en una pgina web puede ser cuestionable, aunque depende de muchas cosas. An as, no hemos de olvidar que Flash tiene muchsimas aplicaciones ms (hecho que ha provocado que otras compaas traten de sacar a la venta "clnicos" del Flash). Por ejemplo, se puede usar Flash para la creacin de DVDs interactivos (como los que incluyen las revistas de informtica, entre otras), la creacin de banners publicitarios o lo que ms est de moda ahora: la creacin de dibujos animados (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 dejis de aprender a manejar el programa con ms futuro... (al menos en cuanto a diseo web) Nuestro consejo es emplear Flash nicamente en lo imprescindible en nuestra web dejando el contenido principal de la web y los elementos de navegacin como HTML, que la web pueda funcionar si un usuario no puede ver los elementos en Flash y no se pierda nada realmente importante, a no ser que sea una web la que su valor es justamente su contenido interactivo o visual en Flash.
Unidad 1. Introduccin a Flash CS4 (III) 1.5. Mi Primera Animacin Flash Una de las caractersticas principales de Flash 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. 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?
Prueba evaluativa unidad 1: Introduccin a Flash CS4 Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. 1. Flash CS4 fue creado por Adobe, de ah su perfecta integracin con Photoshop. a) Verdadero. b) Falso. 2. Flash comenz siendo un programa para crear animaciones web sencillas, gifs animados ... y con el paso de los aos se ha convertido en el software referente de creacin de aplicaciones web interactivas. a) Verdadero. b) Falso. 3. Flash CS4 resulta un poco ms incmodo de manejar que su versin anterior, pues contiene nuevas funcionalidades que complican su manejo. a) Verdadero b) Falso. 4. Flash CS4 dispone de un corrector sintctico-semntico que facilita el trabajo con textos. a) Verdadero. b) Falso. 5. Flash CS4 soporta trabajar con nuevos formatos de ficheros, tales como ficheros EPS y PDF. a) Verdadero. b) Falso. 6. El nuevo Flash incluye un buscador web, que nos permite localizar objetos, textos, animaciones etc por toda la web. a) Verdadero. b) Falso. 7. Las animaciones o pelculas generadas por Flash CS4 tendrn un rendimiento generalmente mayor que las creadas con Flash 8. a) Verdadero.
b) Falso. 8. El lenguaje de programacin de Flash, ha sido mejorado en la nueva versin, Flash CS4, y ahora se llama ActionScript 3. a) Verdadero. b) Falso. 9. Las Hojas de Estilo en Cascada son una gran innovacin para la edicin de texto y Flash CS4 no es capaz de competir con su capacidad para trabajar con ellos. a) Verdadero. b) Falso. 10. El anterior ActionScript 2 no es capaz de trabajar con Javascript, pues se ha quedado desfasado. a) Verdadero. b) Falso. 11. Realizar una animacin en Flash es un proceso largo pero mecanizable. a) Verdadero. b) Falso. 12. Una animacin en Flash exige al autor representar todos los estados de la misma, si la animacin consiste en botar una pelota hasta una altura de 20 cm., el autor deber representar dicha pelota en todas sus posiciones posibles (unas 200 aproximadamente). a) Verdadero. b) Falso. 13. Realizar una animacin con Flash slo exige indicar a Flash los estados lmite de la misma, entendiendo por estado lmite aquel que marca un cambio en la animacin (en nuestro ejemplo seran los instantes en los que la pelota deja de subir y comienza a bajar o viceversa). a) Verdadero. b) Falso. 14. Una vez tenemos dibujados los fotogramas que queremos que formen parte de la animacin, nos falta indicar explcitamente a Flash que dichos fotogramas formarn una animacin, pues Flash no es capaz de saber esto a priori. a) Verdadero. b) Falso.
Unidad 2. El entorno de Flash CS4 (I) 2.1. La interfaz de Flash CS4 Flash CS4 cuenta con un entorno o interfaz de trabajo renovada de lo ms manejable e intuitiva. Adems, tiene la ventaja de que es similar a la de otros programas de Adobe (Photoshop, Dreamweaver, Illustrator...), todo esto hace ms fcil aprender Flash y ms rpido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS4
A lo largo de todo el curso trabajaremos con la versin de evaluacin de Flash CS4 en castellano. 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:
Unidad 2. El entorno de Flash CS4 (II) 2.2. 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: Permite insertar objetos en la pelcula, as como nuevos fotogramas, capas, acciones, escenas... Modificar: La opcin Transformar permite modificar los grficos existentes en la pelcula, y la opcin Trazar Mapa de Bits convierte los grficos en mapas vectoriales (este tema se tratar ms adelante). El resto de opciones permite modificar caractersticas de los elementos de la animacin Suavizar, Optimizar o de la propia pelcula (Capa, Escena ...). Texto: Sus contenidos afectan a la edicin de texto. Ms adelante se tratar en profundidad. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edicin) que
hayamos almacenado en nuestra animacin, obtener otros nuevos de la pgina de Macromedia o ejecutar los que ya tengamos. Control: Desde aqu se modifican las propiedades de reproduccin de la pelcula. Reproducir, Rebobinar, Probar Pelcula.... Depurar: Aqu encontraremos las opciones de depuracin de la pelcula que te ayudarn a encontrar errores de programacin en ActionScrit, entre ellos se encuentran Entrar, Pasar, Salir, Continuar... Ventana: Este men, adems de las opciones clsicas acerca de cmo distribuir las ventanas, incluye accesos directos a todos los paneles y tambin la posibilidad de crear tus propios Espacios de Trabajo, guardarlos, cargarlos, etc. Ayuda: Desde aqu podemos acceder a toda la ayuda que nos ofrece Adobe, desde el manual existente, hasta el diccionario de Action Script, pasando por tutoriales, lecciones guiadas etc... Veamos un ejemplo prctico del uso de mens Unidad 2. Ejercicio paso a paso: Utilizar la cuadrcula 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. Elige Archivo de Flash (ActionScript 3.0). 4. Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una pelcula ya empezada, sltate los 2 primeros pasos. 5. Selecciona la opcin Mostrar cuadrcula del men Ver. 6. Se desplegar un submen como el de la figura. 7. Selecciona la opcin Mostrar Cuadrcula para hacerlo visible.
8. Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula a tu gusto (tamao, color de fondo...)
9. 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 2. El entorno de Flash CS4 (III) 2.3. 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 (24.0 en la imagen) y el Tiempo de pelcula transcurrido (0.0s en la imagen). A nivel conceptual, la Lnea de Tiempo representa la sucesin de Fotogramas en el tiempo. Es decir, la pelcula Flash no ser nada ms que los fotogramas que aparecen en la Lnea de tiempo uno detrs de otro, en el orden que establece la misma Lnea de tiempo. Para saber ms acerca de la Lnea de Tiempo y de los distintos tipos de fotogramas : Unidad 2. Avanzado: La Lnea de Tiempo - Fotogramas Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. Veamos qu tipos de fotogramas hay y cules son sus rasgos.
Fot. Clave Fotograma Clave (KeyFrame) : Son fotogramas con un contenido especifico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se le diferencia por una lnea negra vertical. Por ejemplo, en el ejemplo de la "pelota" que rebotaba en el suelo habra 3 Keyframes. Uno para cada posicin distinta de la pelota. Fot. Normal Fotograma Normal (Normal Frame) : Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris. El ltimo fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 4 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es prolongar la duracin de un fotograma clave o keyframe. Fotograma Contenedor: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la pelcula. En la imagen anterior, son fotogramas contenedores todos los fotogramas a partir del 11 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos. Fot. vaco Fotograma Vaco: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 10 (incluidos) son fotogramas vacos. No debemos confundirlos con los fotogramas contenedor, pues estos ltimos vienen
delimitados por lneas verticales grises (no negras). Si se inserta algo en estos fotogramas, pasan a ser Keyframes. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrar una imagen en blanco. (No dar por terminada la animacin). De modo que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer" y volver a aparecer. Fot. Etiquetado. Fotograma Etiquetado (Label Frame): Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel Propiedades. Si la duracin del frame es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas. Fot.con Acciones Fotograma con Acciones asociadas: Contienen en la parte superior una "a" que indica que tienen una accin asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" (para verlas hay que acceder al Panel Acciones) pueden cambiar el comportamiento de la pelcula. En la imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser fotogramas normales). El fotograma 4 no tiene acciones y s las tiene el 5. Fotogramas Animados: Pueden ser de 2 tipos: Fot. de Anim de Mov. 1) Fotogramas de Animacin de Movimiento: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posicin del Keyframe inicial al final. Para representar esta animacin aparece una flecha entre estos Keyframes.
Esta imagen representa el ejemplo de la pelota. Del frame 1 se pasa al 6, (Flash representar el movimiento entre ambas posiciones en la pelcula final) y del 6 al 11. Otro movimiento. Fot. de Anim de Forma. 2) Fotogramas de animacin de Forma: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tena en el Keyframe inicial a la del final. Para representar esta animacin aparece una flecha entre estos Keyframes. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el frame 1 tendra la forma original, en el frame 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta. En esta ltima imagen aparecen casi todos los tipos de fotogramas, los reconoces?
2.4. Las Capas El concepto de Capa es fundamental para manejar Flash de forma eficiente. Dada la importancia de estas, se le dedicar un tema completo. An as, veamos a grandes rasgos qu son las capas. Una Capa se puede definir como una pelcula independiente de un nico nivel. Es decir, una capa contiene su propia Lnea de Tiempo (con infinitos fotogramas). Los objetos que estn en una determinada capa comparten fotograma y por tanto, pueden "mezclarse" entre s. Esto es interesante a menudo, pero otras veces es conveniente separar los objetos de modo que no interfieran entre s. Para ello, crearemos tantas capas como sea necesario. El uso de mltiples capas adems, da lugar a pelculas bien ordenadas y de fcil manejo (es conveniente colocar los el cdigo ActionScript en una capa independiente llamada "acciones", por ejemplo). Las ventajas y desventajas de usar capas se vern en la unidad referente a Capas.
2.5. El Escenario A continuacin veremos las diferentes partes que conforman el rea de trabajo empezaremos con la ms importante: el Escenario. Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la pelcula que estemos realizando. El escenario tiene unas propiedades muy importantes, ya que coinciden con las Propiedades del documento. Para acceder a ellas, hagamos clic con el botn derecho sobre cualquier parte del escenario en la que no haya ningn objeto y despus sobre Propiedades del documento: Aade metadatos a tus archivos para una mejor inclusin de estos en los motores de bsqueda 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. Para practicar estas operaciones te aconsejamos realizar el ejercicio paso a paso Cambiar las dimensiones de la pelcula Unidad 2. Ejercicio paso a paso: Cambiar las dimensiones de la pelcula Objetivo. Practicar cmo se pueden cambiar algunos atributos fundamentales de las pelculas. Ejercicio paso a paso. 1. Haz clic con el botn derecho sobre el fondo de la pelcula. 2. Selecciona Propiedades del Documento. 3. En Unidades de Reglas selecciona Centmetros. 4. A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22.46 y en Altura 16.84. 5. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen aproximadamente a las estndar 640 x 480 px.
Unidad 2. El entorno de Flash CS4 (IV) 2.6. Las Vistas o Zooms
La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto, permitiendo abarcar ms o menos zona del Entorno de Trabajo. Cada vez que hagamos clic en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms.
Panel Zooms: Son un conjunto de accesos directos a Submens existentes en el Men Ver. Son muy tiles y ayudan a acelerar el trabajo cuando se emplean correctamente. Para saber ms acerca de los Zooms pgina Bsica Unidad 2. Bsico: Zooms El efecto Zoom consiste en acercar o alejar la "mirada" de un determinado lugar. En realidad, lo que se hace es aumentar o reducir el tamao de un objeto, de modo que parece que nos hayamos acercado o alejado de l. Es muy til para poder ver con ms detalle ciertos puntos de la animacin (grficos principalmente) y para poder retocar algunas partes que no son visibles desde lejos. Igualmente, resulta til ver la animacin desde lejos para tener una visin global de ella. Veamos cmo trabaja Flash con los Zooms. Panel Zoom
Se puede acceder a todas las funciones de los Zooms desde el Men Ver. En cualquier caso, Flash incluye un submen de acceso rpido para dichos comandos. Veamos en qu consisten: Mostrar Fotograma: Muestra el contenido del Fotograma actual en su totalidad. Es decir, amplia el tamao del fotograma hasta ocupar todo el rea de Trabajo. si hay objetos fuera del rea de Trabajo, no se vern. Mostrar Todo: Muestra en el rea de Trabajo todos los objetos que haya en la pelcula, adaptando el tamao del fotograma al espacio necesario para que quepan. Si todos los objetos estn en la parte izquierda de un fotograma, la parte derecha no se ver. Como podemos ver, ambas selecciones son tiles, pero tienen sus desventajas. Para darnos libertad total, Flash nos permite elegir el tamao del Escenario. 25%, 50%...: Muestra el fotograma con el tamao que indiquemos en % teniendo en cuenta que el 100% es el tamao de referencia. Es decir, el 100% es el tamao original de la pelcula (ocupa lo que se ver al publicar la pelcula), todo lo dems depende de cunto sea el 100 %. Es decir, si el 100% son 640 x 480 px. El 50% ser justo la mitad de esta cantidad y el 200% ser el doble de 640 x 480 px.
2.7. Los Paneles Los Paneles son conjuntos de comandos agrupados segn su funcin (por ejemplo, todo lo que haga referencia a las acciones, ir en el Panel Acciones). Su misin es simplificar y facilitar el uso de los comandos. Estos paneles o ventanas se encuentran organizados en el lateral derecho del rea de trabajo. Pudindose expandir o minimizar con un clic de ratn. Si no estn visibles en el lateral derecho, puedes visualizarlos desplegando el men Ventana y haciendo clic sobre el nombre del panel que quieras mostrar. Para mejorar la experiencia del usuario, Flash permite cargar y guardar tus propias disposiciones de paneles, para que si en algn momento el entorno se vuelve un poco catico puedas recuperar tu configuracin elegida desde el men Ventana. Para ello debers acceder a la opcin Ventana Espacio de trabajo Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio.
Ahora slo bastar darle un nombre a la disposicin y ser accesible desde el mismo elemento de men Espacio de trabajo en cualquier momento. Todos los paneles se estudiarn en profundidad a lo largo del curso. An as, vamos a nombrarlos y a resumir las funciones de la mayora de ellos. Panel Alinear: Coloca los objetos del modo que le indiquemos. Muy til. Panel Color: Mediante este panel creamos los colores que ms nos gusten. Panel Muestras: Nos permite seleccionar un color de modo rpido y grfico. (Incluidas nuestras creaciones). Panel Informacin: Muestra el tamao y las coordenadas de los objetos seleccionados, permitindonos modificarlas. Muy 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 (Unidad 2. Bsico: Escenas Escenas Una Escena no es ms que una porcin de la Lnea de Tiempo, con todo lo que sta incluya (capas, fotogramas...). Su finalidad principal es la de organizar la pelcula, de modo que las partes de la pelcula que no tengan relacin entre s o no estn una a continuacin de la otra (seguida en la lnea de tiempo). De este modo, separando una pelcula en 3 escenas, conseguimos tener 3 lneas de tiempo, 3 conjuntos de capas y 3 conjuntos de fotogramas, que veremos y editaremos como si de 3 pelculas diferentes se tratara. No debemos olvidar que aunque en apariencia sean pelculas distintas, la Lnea de Tiempo es la misma y que al acabar la primera escena se reproducir la segunda y as sucesivamente... Las Escenas se pueden aadir, eliminar, editar... desde el Men Escena al que se accede desde Ventanas Escena. )
Panel Transformar: Ensancha, encoge, gira ... los objetos seleccionados. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra pelcula. Panel Comportamientos: Permiten asignar a determinados objetos una serie de caractersticas (comportamientos) que despus podrn almacenarse para aplicarse a otros objetos de forma rpida y eficaz.
Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Los componentes son objetos "inteligentes" con propiedades caractersticas y muchas utilidades (calendarios, scrolls etc...) Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras pelculas. Panel Respuestas: Macromedia pone a nuestra disposicin ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda, el panel ms usado y ms importante. Nos muestra las propiedades del objeto seleccionado en ese instante, color de borde, de fondo, tipo de trazo, tamao de los caracteres, tipografa, propiedades de los objetos (si hay interpolaciones etc...), coordenadas, tamao etc... Es fundamental, no debeis perderlo de vista nunca. Panel Explorador de Pelculas: Nos permite acceder a todo el contenido de nuestra pelcula de forma fcil y rpida Para practicar estas operaciones te aconsejamos realizar Ejercicio Acceder a los Paneles Unidad 2. Ejercicio paso a paso: Accediendo a Paneles Objetivo Abrir los Panel de Muestras y seleccionar una muestra de color. Ejercicio paso a paso. 1. 1 Pulsa en el men Ventana. 2. 2 Selecciona la opcin Muestras, si ya tuviera una seal junto al nombre del Panel, significa que ya est abierto. Si no, haz clic sobre l. 3. 3 Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor, ste tomar la forma de la herramienta cuentagotas (que serva para seleccionar un color). 4. 4 Todo lo que dibujemos de ahora en adelante, ser de color verde (podemos usar este mecanismo para cambiar el color de relleno o el color del trazo)
Ejercicios unidad 2: El entorno de Flash CS4 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 Escena 1 y Escena 2 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 Color. 2. Abre el Panel Acciones. 3. Abre el Panel Alinear. 4. Cierra el Programa Flash CS4 5. Vuelve a abrirlo. Qu notas?
Ayuda ejercicios unidad 2: El entorno de Flash CS4 Ejercicio 1: Crear una Pelcula a nuestro gusto El apartado 1 nos propone cambiar las dimensiones del Escenario: 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento. 2. Pulsamos sobre la pestaa Unidades de Regla y seleccionamos Pxeles (px) 3. Introducimos las medidas pedidas (300 x 100) en Dimensiones. El apartado 2 nos propone cambiar el color de fondo del Escenario: 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento 2. Pulsamos sobre la pestaa Color de fondo, el puntero se convertir en un "cuentagotas". 3. Seleccionamos el color pedido. El apartado 3 nos propone aumentar la velocidad de reproduccin de la pelcula 1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento. 2. En Veloc. Fotogramas escribe 14 fps. El resultado debe ser un rectngulo rojo con las medidas propuestas. Ejercicio 2: Estructurar una Pelcula Vamos a crear la pelcula pedida y a estructurarla tal y como piden 1. Abrimos una nueva Pelcula desde el men Archivo Nuevo 2. Accedemos al Panel Escena desde Ventana Otros Paneles Escena 3. Creamos una nueva Escena pulsando sobre el signo . 4. Les cambiamos los nombres haciendo doble clic en sus nombres actuales Ahora falta crear el nmero de capas pedido. 1. Seleccionamos la Escena E1 en el Panel Escena 2. Creamos otra capa ms, pulsando el signo en la linea de tiempo. 3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres actuales (por defecto Capa 1 y Capa 2) Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2 al 3. El Panel Escena debera quedar as:
Y as las Capas:
Ejercicio 3: Creando Fotogramas Vamos a crear los fotogramas pedidos: 1. Abrimos una nueva pelcula 2. Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe 3. Vamos al men Insertar y seleccionamos Fotograma Clave 4. Hacemos clic sobre el fotograma 3 y seleccionamos Insertar Lnea de Tiempo Fotograma Clave Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales 1. Seleccionamos el fotograma 1 y hacemos clic en el men Insertar Lnea de Tiempo y seleccionamos Fotograma. 2. Ahora el fotograma 2 ser un fotograma normal y el 3 y el 4 sern Fotogramas Clave. Seleccionamos el fotograma 3 y repetimos el proceso anterior. 3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto ser lo que obtengamos:
Fijmonos en que no estn los puntos negros en los Fotogramas Clave ni los cuadrados blancos en lo fotogramas normales. Esto se debe a que no hay nada dibujado en dichos fotogramas. si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:
Ejercicio 4: Identificando Fotogramas Vamos a identificar los diferentes tipos de fotogramas:
1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros representan una animacin de Movimiento. (probablemente contendrn al mismo objeto pero cambiado de lugar). El tercero es un Fotogramas Clave normal. 2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos) son fotogramas normales. Simplemente determinan la duracin de los Keyframes a los que van asociados. 3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas Contenedor. Existen y en la pelcula se vern como fotogramas en blanco (o con el color de fondo que hayamos seleccionado). 4. Los fotogramas del 16 en adelante son fotogramas vacos y no se vern en la pelcula. Ejercicio 5: Paneles 1. Abrimos el Men Ventana. 2. Hacemos clic en Color. Se abrir el Panel correspondiente.
3. Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear. 4. Cerramos el programa y lo volvemos a abrir. 5. Observamos que los Paneles siguen donde los dejamos. Flash CS4 adapta su entorno a nuestras preferencias.
Prueba evaluativa unidad 2: El entorno de Flash CS4 Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Flash CS4 fue concebido para crear pginas web estndares. a) Verdadero b) Falso 2. El manejo de Flash requiere unos amplios conocimientos de programacin, necesarios para crear animaciones vistosas. a) Verdadero b) Falso 3. Los fotogramas de la imagen podran intercambiarse sin que se notase. a) Verdadero b) Falso 4. Flash no puede trabajar con textos, slo trabaja con grficos. a) Verdadero b) Falso 5. Cul de estas 3 afirmaciones es correcta?. a) Para cambiar el color de fondo de la pelcula hay que hacerlo fotograma a fotograma. b) Para cambiar el fondo de la pelcula basta modificar el valor Color de Fondo en el Panel Propiedades de Pelcula. c) Para cambiar el color de fondo se pinta cada fotograma con el pincel y luego se hace todo lo dems encima.
6. Cul de las siguientes afirmaciones es falsa?. a) Desde el Panel Info se puede cambiar el color de relleno de un objeto. b) Para girar un objeto 90, debera ir al Panel Transformar. c) Los Zooms permiten acercar o alejar los objetos. 7. Si creo una pelcula Flash y aado la Escena 2 y luego la Escena 3. El orden de ejecucin de las escenas ser el mismo que se emple para crearlas. a) Verdadero b) Falso 8. Si en el Panel Zoom pone 50%, quiere decir que lo veo todo ms grande que cuando pone 75%. a) Verdadero b) Falso 9. Los fotogramas de las dos imgenes se diferencian en que en unos hay objetos y en los otros no. a) Verdadero b) Falso 10. Los fotogramas de la imagen tienen asociadas acciones, por eso se les marca con una bandera roja. a) Verdadero b) Falso
Unidad 3. Dibujar y colorear (I) 3.1. El dibujo en Flash CS4 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 estos programas. Vamos a ver cmo emplear cada herramienta de dibujo para sacarle el mximo partido. 3.2. La barra de Herramientas. Herramientas bsicas La Barra de Herramientas contiene todas las Herramientas necesarias para el dibujo. Algunas herramientas llevan asociados modificadores de herramientas, que permiten cambiar algunas propiedades de la herramienta, y que aparecen al final del panel de herramientas. Veamos las herramientas ms importantes: Herramienta Seleccin (flecha): . Es la herramienta ms usada de todas. Su uso principal es para seleccionar objetos, permite seleccionar los bordes de los objetos (con doble clic), los rellenos (con un slo clic), zonas a nuestra eleccin... Su uso adecuado puede ahorrarnos tiempo en el trabajo. Herramienta Texto: Crea un texto en el lugar en el que hagamos clic. Sus propiedades se vern en el tema siguiente. Herramienta Lnea: Permite crear lneas rectas de un modo rpido. Las lneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la lnea recta. Una vez creada la podemos modificar situando el cursor encima de los extremos para estirarlos y en cualquier otra parte cercana a la recta para curvarla. Herramienta de forma: Permite dibujar formas predefinidas como las que aparecen en la imagen, la ltima herramienta utilizada es la que aparece como icono en la barra de herramientas. Manteniendo pulsado el icono podremos acceder a las diferentes herramientas de forma. Por ejemplo:
La herramienta valo permite dibujar crculos o elipses de manera rpida y sencilla.
Para practicar el manejo de esta Herramienta, te aconsejamos realizar. (Unidad 3. Ejercicio paso a paso: Crear un valo Objetivo. Crear un valo con las medidas y la forma que queramos Ejercicio paso a paso. 1 Pulsa sobre la Herramienta valo que se encuentra en la Barra de Herramientas. 2 Situa el cursor del ratn en el Escenario (dentro del fotograma actual). 3 Haz clic y arrastra el ratn hacia el lugar que desees. Observars que el movimiento de tu ratn provoca la creacin de un valo (figura 1). Cuando el valo tenga la forma deseada, suelta el ratn. El resultado ser similar al de la figura 2. 4 Guarda el archivo como trabajo.fla. Lo volveremos a utilizar ms adelante. Figura 1 Figura 2 Truco: Si quieres crear un crculo perfecto, mantn pulsada la tecla SHIFT mientras das forma al valo. (Sucede igual con la Herramienta Rectngulo) ) Herramienta Lpiz: Es la primera herramienta de dibujo propiamente dicho. Permite dibujar lneas con la forma que decidamos, modificando la forma de estas a nuestro gusto. El color que aplicar esta herramienta se puede modificar, bien desde el Panel Mezclador de Colores o bien desde el subpanel Colores que hay en la Barra de Herramientas. Herramienta Pincel: Su funcionalidad es parecida a la del lpiz, pero por defecto su trazo es ms grueso e irregular. Se suele emplear para aplicar rellenos. Se puede modificar sus herramientas. Herramienta Cubo de pintura: Permite aplicar rellenos a los objetos que hayamos creado. Al contrario que muchos otros programas de dibujo, no permite aplicar rellenos si la zona no est delimitada por un borde. El color que aplicar esta herramienta se puede modificar, bien desde el Panel Color o bien desde el subpanel Relleno que hay en la Barra de Herramientas.
Herramienta Borrador: Su funcionamiento es anlogo a la Herramienta Pincel. Pero su funcin es la de eliminar todo aquello que "dibuje".
Unidad 3. Dibujar y colorear (II) 3.3. 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 de Herramientas aparecen estos botones: . Esto es la herramienta Varita Mgica, tan popular en otros programas de dibujo. Permite hacer selecciones segn los colores de los objetos. El tercer dibujo que aparece es este: para seleccionar Poligono. Herramienta Pluma: Crea polgonos (y por tanto rectas, rectngulos...) de un modo sencillo. Mucha gente encuentra esta herramienta complicada, aunque es una de las ms potentes que ofrece Flash. Su empleo consiste en hacer clic en los lugares que queramos definir como vrtices de los polgonos, lo que nos asegura una gran precisin. Para crear curvas, hay que sealar los puntos que la delimitan y posteriormente trazar las tangentes a ellas. Con un poco de prctica se acaba dominando. Herramienta 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. 3.4. 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 sino que adems debemos hacer clic en la lnea o en el objeto que has dibujado. Entonces aparecer (o se iluminar si ya estaba presente) un submen como este: Ajustar a Objetos : Se usa para obligar a los objetos a "encajar" unos con otros, es decir, para que en caso de ser posible, sus bordes se superpongan, dando la sensacin de estar "unidos". Suavizar: Convierte los trazos rectos en lneas menos rgidas. Enderezar: Realiza la labor inversa. Convierte los trazos redondeados en ms rectilneos. Unidad 3. Dibujar y colorear (III) 3.5. El panel Color
El Panel Color, 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 el color que est junto al lpiz
y si queremos modificar un relleno, haremos clic en el color que est junto al 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 estndar As mismo 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 relleno: Slido: Consiste en un relleno formado por un solo color. Degradado Lineal: Es un tipo especial de relleno, de modo que un color se degrada hasta convertirse en otro. Puede ir de arriba abajo o de un lado al otro Degradado Radial: Es igual que el anterior, pero los degradados tiene forma circular. Mapa de Bits: Permite colocar como relleno alguna imagen existente en la pelcula (O ajena a ella si antes se "importa") Para aprender a crear un color transparente (semi-transparente), realiza el ejercicio paso a paso . Unidad 3. Ejercicio paso a paso: Crear un color transparente Objetivo Crear un objeto cuyo color sea transparente, de modo que se vean los objetos de detrs. Ejercicio paso a paso. 1 Abre el archivo transparencia.fla que encontrars en la carpeta de ejercicios. 2 Seleccionamos el relleno del Rectngulo y modificamos el valor Alfa desde el Panel de Herramientas o desde el panel Propiedades. Por ejemplo, escribimos un valor de 45%.
Rectngulo Azul
Ahora con Transparencia El efecto alfa trabaja de forma que si situamos cualquier objeto o imagen detrs de l, podemos ver como un efecto de transparencia que mostrar parte de lo que se encuentre detrs de nuestro relleno.
3.6. El panel Muestras
El Panel Muestras 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 Color, podremos agregarlo a nuestro conjunto de muestras mediante Agregar Muestra (que se encuentra en un men desplegable en la parte superior derecha del panel Color). 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. Para practicar el manejo de este panel, te aconsejamos realizar el ejercicio paso a paso. Unidad 3. Ejercicio paso a paso: Colorear un valo Objetivo
Dar color a un valo. Tanto a su interior como a su exterior Ejercicio paso a paso 1 Abre el archivo que creamos en el primer ejercicio de la unidad, trabajo.fla. 2 Hacemos clic en el interior del valo o en su borde. Depender de la zona cuyo color queramos modificar. Obtendremos algo similar a la figura 1 o a la 2.
Seleccionamos el Interior del valo
Seleccionamos el Borde del valo 3 Una vez hecho esto, nos fijamos en el Panel de Muestras, que se encuentra en el lateral derecho del rea de herramientas y seleccionamos el color que nos guste.
Para modificar el color del interior del valo tambin podemos seleccionar un color directamente haciendo clic sobre el Panel de Colores existente en el Panel de herramientas junto a la imagen del "Bote de Pintura". O si deseamos modificar el borde, sobre el Panel existente junto al "Lpiz". Ejercicios unidad 3: Dibujar y colorear Ejercicio 1: Bandera Olmpica 1. Dibuja 5 aros. 2. Cmbiale 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
Ayuda ejercicios unidad 3: Dibujar y colorear Ejercicio 1: Los Aros Olmpicos Vamos a dibujar los aros olmpicos. Como siempre, partiremos de un nuevo Documento de Flash (Action Script 3.0), a travs del men Archivo Nuevo. 1. Seleccionamos la Herramienta valo. 2. Trazamos un valo, y para que sen perfectamente circulare, mantenemos pulsada la tecla Shift. 3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la herramienta Seleccin, copiarlos desde el men Edicin y pegarlos. 4. 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) 5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos seleccionndolo en el Panel Color. 6. 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 la opcin 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. No lo dibujes sobre el planeta. 8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por ejemplo, borramos parte del planeta seleccionndola de forma rectangular y pulsando la tecla Suprimir tal y como vimos en el paso 3.
9. Separa los dos hemisferios del planeta. 10. Pon el anillo sobre el hemisferio inferior, y despus, arrastra sobre el anillo la otra parte del planeta. 11. Prueba evaluativa unidad 3: Dibujar y colorear 13. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. El panel que contiene las utilidades necesarias para dibujar, pintar, etc se llama Barra de Herramientas. a) Verdadero b) Falso 2. Flash CS4 trabaja con colores puros de alta definicin, lo que imposibilita su mezcla y por tanto el uso de ms de 256 colores. a) Verdadero
b) Falso 3. Flash dispone del efecto Alfa, que aade transparencia a los colores. Efecto muy atractivo y vistoso. a) Verdadero b) Falso 4. Las herramientas y tienen la misma funcin, salvo que la primera se emplea para objetos coloreados y la segunda para objetos sin color. a) Verdadero b) Falso 5. La herramienta Lazo es capaz de seleccionar formas y trazados no posibles con la herramienta Seleccin. a) Verdadero b) Falso 6. La herramienta Cubo de pintura se emplea nicamente para dar color al fondo de las pelculas. a) Verdadero b) Falso 7. El Panel de colores se emplea para crear nuestros propios colores, mezclarlos a nuestro gusto y aadirles efectos tales como el Alfa. a) Verdadero b) Falso 8. La herramienta Cuentagotas sirve para contar el nmero de colores diferentes que contiene una imagen. a) Verdadero b) Falso 9. Las herramientas y se diferencian en que el lpiz dibuja ms fino que el pincel. a) Verdadero b) Falso 10. Es posible en Flash CS4 crear un color de relleno a partir de una imagen de mapa de bits previamente importada a nuestra pelcula. a) Verdadero
b) Falso
Unidad 4. Textos (I) 4.1. 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 distingue entre 3 tipos de texto, texto esttico o normal, texto dinmico y texto de entrada (para que el usuario introduzca sus datos, por ejemplo), tambin se puede crear texto que soporte formato HTML etc... 4.2. 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 (Unidad 4. Avanzado: Escribir texto Tras hacer clic con la Herramienta Texto en cualquier parte del fotograma actual, nos aparecer algo as: El recuadro que vemos es el recuadro que contendr al texto. En la pelcula final no se ver, pero nos servir para localizar ms fcilmente el texto y para
moverlo o cambiar su tamao. Finalmente, el crculo que hay arriba a la derecha significa que el recuadro del texto se expandir segn vayamos escribiendo y tambin el texto. Esto es, todo lo que escribamos, estar en la misma lnea. Si escribimos en el recuadro creado por defecto vemos como se alarga el recuadro que lo contiene. Para cambiar de lnea, sera necesario pulsar la tecla Enter (Intro).
Si por otra parte, queremos delimitar lo que va a ocupar nuestro texto (cosa bastante comn, acercaremos el cursor del ratn al borde del recuadro de texto, segn donde lo acerquemos, se transformar en un smbolo o en otro. Si lo acercamos al borde del recuadro, se le aadir debajo de la flecha una flecha pequea de 4 direcciones como la que muestra la figura y que nos indica que podemos mover el texto:
Si lo acercamos al crculo que est en el margen superior derecho, el cursor se convierte en un flecha de "ensanchamiento", como la que muestra la figura:
Con el cursor convertido en flecha de "ensanchamiento", podemos estirar los lmites del recuadro de texto, y adems, el crculo que apareca en el margen superior derecho, se convierte en un cuadrado. Este cuadrado significa que los lmites del recuadro de texto han quedado fijados, y que al insertar ms texto, se producir un salto de lnea en lugar de ensanchar el recuadro de texto. Este sera su comportamiento al introducir texto:
Si quisiramos, (una vez definido el recuadro de texto) volver al modo anterior, basta con hacer doble clic sobre el cuadrado que est en el margen superior derecho del recuadro de texto. Tras hacerlo, se convertir en un crculo y su comportamiento ser el descrito al principio de esta pgina.)
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, respecto a la anterior versin la interfaz de las propiedades de texto a cambiado considerablemente.
Panel Propiedades
Veamos a fondo el Panel Propiedades: Posicin y Tamao: Dado que Flash trata los textos como objetos, stos tambin tienen anchura, altura y coordenadas. Podemos modificarlos a nuestro gusto, pero debemos tener en cuenta que los caracteres no deben estirarse sin motivo, pues las tipografas son una parte muy importante y deben respetarse. Familia: Desde aqu, al igual que en los editores de texto ms comunes podemos seleccionar el tipo de letra o "fuente" que ms nos guste. Espaciado entre letras: Determina el espaciado entre los caracteres. til cuando la tipografa que empleamos muestra las letras muy juntas o para dar efectos concretos al texto. Ajuste automtico: Activar esta casilla provoca que la separacin entre caracteres se realice de modo automtico. Configuracin: Son las clsicas opciones que permiten convertir el texto en Negrita (B), Cursiva (I), cambiar el color del texto y el tamao.
Suavizado: Las opciones de suavizado resultan importantes a la hora de mostrar nuestro texto. Encontramos estas opciones: o Utilizar fuentes de dispositivo: Se emplean las fuentes de la impresora, lo que hace ms liviano el archivo SWF al no incluir la fuente. Aunque nos exponemos a que la fuente no est instalada, por lo que se emplear otra. Slo deberamos de utilizar esta opcin para las ms comunes. o Texto de mapa de bits, no realiza suavizado, ocupando ms tamao y perdindose resolucin al redimensionar. o Suavizado para animacin, es la mejor opcin cuando pretendemos animar texto. o Suavizado para legibilidad, favorece la legibilidad, pero no debemos de emplearla en textos animados. o Suavizado personalizado, nos permite ajustarlo manualmente.
Orientacin: Cambia la orientacin del texto de horizontal a vertical, tanto de izquierda a derecha como de derecha a izquierda. Seleccionable: Determina si el usuario pordr seleccionar el texto. Posicin: Nos permite convertir nuestro texto en subndices o en superdices. Vnculo: 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 ... Comportamiento: Si el texto que vamos a incluir es dinmico (de lo contrario aparece sin activar), esta opcin nos permite determinar cmo queremos que aparezcan las lneas (lnea nica, multilnea o multilnea sin ajuste).
Un Prrafo no es ms que un conjunto de caracteres con propiedades comunes a todos ellos. Estos prrafos admiten ciertas opciones que nos permiten trabajar con bloques de texto. El Panel Propiedades nos proporciona las siguientes opciones para trabajar con prrafos (entre otras). A la Izquierda: Todas las lneas empezarn tan a la izquierda como sea posible (dentro del recuadro de texto que hayamos definido). Centrar: Las lneas se distribuyen a la derecha y a la izquierda del punto medio del prrafo. A la derecha: Todas las lneas empezarn tan a la derecha como sea posible dentro del recuadro de texto que hayamos definido). Justificado: El texto se ensancha si es necesario con tal de que no quede "dentado" por ninguno de sus lmites. El resto de opciones nos permiten determinar los mrgenes (izquierdo y derecho), los sangrados de prrafo y el espacio interlineal.
Para practicar estas propiedades te aconsejamos realizar
Unidad 4. Ejercicio paso a paso: Propiedades del texto Objetivo. Crear un texto cualquiera y asignarlelas propiedades que ms nos interesen. Ejercicio paso a paso. 1 Abre el archivo trabajo.fla, creado en la unidad anterior. 2 Creamos una nueva capa (ya veremos ms adelante para que sirven) haciendo clic en el botn en la lnea de tiempo. 3 Hacemos clic en la Herramienta Texto y despus en el escenario. 4 Veremos esta imagen . Escribe dentro el texto Esto es un texto de prueba. 5 Hacemos clic en el Propiedades, si es que tenamos minimizado este Panel. 6 Haz que el texto se encuentre centrado haciendo clic en 7 Cambia la fuente del texto a Verdana seleccionndola en el desplegable . 8 Cambia el espaciado entre caracteres del texto a 2 escribindolo en la opcin . 9 Por ltimo cambia el tamao del texto a 30 y ponlo en Negrita utilizando estos controles: Unidad 4. Textos (II) 4.3. 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: . 4.4. 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 CS4" 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. 4.5. 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. Una opcin interesante es el botn , que nos permite indicar qu caracteres incluir en el archivo SWF. Aqu debemos de indicar los carcteres que esperamos que muestre el texto dinmico.
Al editar nuestra pelcula, distinguieremos los textos dinmicos por aparecer enmarcados en una lnea discontinua. 4.6. Introduccin de texto El Texto de Entrada o Introduccin de texto 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. Para aprender a cambiar el tipo de texto, te aconsejamos realizar el ejercicio . Unidad 4. Ejercicio paso a paso: Cambiar el tipo de texto Objetivo. Crear un texto cualquiera y asignarle el Tipo que ms nos interese. Ejercicio paso a paso. 1. Abre el archivo trabajo.fla, utilizado en ele ejercicio anterior. 2. Selecciona el texto que creamos en el ejercicio anterior. 3. Hacemos clic en el Panel Propiedades, si es que tenamos minimizado este Panel. 4. Una vez podamos ver el panel seleccionamos el desplegable en la que pondr el tipo de texto y elegimos el tipo de texto que queramos. Veremos que, al hacer clic fuera del texto, cambia la lnea que rodea al recuadro de texto, pasando a ser discontinua y no desapareciendo aunque no escribamos nada dentro. (Los textos estticos desaparecen si no escribes nada y haces clic en cualquier lugar del escenario). Esto es lgico, ya que los textos Dinmicos y los de entrada no tienen porque tener "contenido".
Panel Propiedades
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 MiX-Fx, con ellos podrs crear efectos de texto asombrosos en pocos minutos, aunque no podrs gozar del entorno de Flash CS4 ni podrs emplear el resto de herramientas de que dispone. 4.7. Incorporar Fuentes Al crear un archivo de flash, y utilizar texto dinmico o textos de entrada, tenemos que tener presente que si hemos elegido una fuente que no est disponible en el sistema que se reproduce la pelcula, se sustituir por otra fuente disponible. Esto es un problema, ya que puede alterar bastante nuestro diseo. Para evitar esto, podemos incluir las fuentes que hemos empleado en nuestro proyecto. Esto garantiza que el texto se vea tal y como lo creamos, independientemente de las fuentes del sistema. Esto slo ser necesario hacerlo para los textos dinmicos, ya que el texto esttico se guarda como un grfico vectorial, y no habr problemas. Para incorporar una fuente en la pelcula hacemos clic derecho en alguna parte vaca de la Biblioteca, y seleccionamos Nueva fuente. Se abrir el siguiente cuadro de dilogo:
En el desplegable Fuente seleccionamos la fuente que deseamos utilizar. Seleccionamos los estilos que vamos a utilizar (Negrita, Cursiva y Tamao). El nombre que le demos se mostrar en la Biblioteca y estar lista para utilizarse. Cuando creemos un campo de texto dinmico o de entrada, seleccionamos nuestra fuente, que aparecer sealada con un asterisco (*).
De esta forma nos aseguramos que nuestro proyecto se ver tal cual lo creamos. Ejercicios unidad 4: Textos Ejercicio 1: Crear Textos Estticos 1. Crea una pelcula con 1 fotograma. 2. Crea un objeto de tipo texto esttico que diga: Bienvenido a mi pgina web. 3. Utiliza la fuente Verdana a un tamao de 45. Ayuda ejercicios unidad 4: Textos Ejercicio 1: Crear Textos Estticos 1. Creamos la pelcula mediante Archivo Nuevo, eligiendo Achivo de Flash (AS 3.0) (por defecto tendremos un nico fotograma). 2. Selecciona la herramienta Texto del Panel de Herramientas. 3. Haz clic sobre el escenario. 4. Veremos esta imagen . Escribe dentro el texto Bienvenido a mi pgina web. 5. Centra el texto haciendo clic en en el Panel de Propiedades. 6. Cambia la fuente del texto a Verdana seleccionndola en el desplegable .
7. Por ltimo cambia el tamao del texto a 45 este controles:
8. Prueba evaluativa unidad 4: Textos 10. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Flash CS4 no puede trabajar con textos, ya que es un programa para realizar animaciones grficas. a) Verdadero b) Falso 2. Flash nos permite escribir nuestros textos empleando cualquier fuente que tengamos instalada en nuestro ordenador. a) Verdadero b) Falso 3. Flash incluye opciones para sus textos ms propias de CSS que de HTML, como por ejemplo, sangrados de prrafo, espacios entre caracteres... a) Verdadero b) Falso 4. Flash es el nico programa que crea animaciones de texto fcilmente. a) Verdadero b) Falso 5. Cul de estas 3 afirmaciones es correcta?. a) Un texto esttico no puede cambiar de posicin durante toda la pelcula. b) Un texto esttico no puede cambiar de posicin mientras duren los fotogramas en los que est incluido. c) Un texto esttico puede cambiar de posicin sin que por ello deje de ser esttico. 6. Cul de las siguientes afirmaciones es falsa?. a) Los textos Dinmicos sirven, entre otras cosas, para mostrar datos al usuario introducidos desde otros campos de texto.
b) A los textos de entrada se les debe desactivar la opcin Borde, sino, pasan a ser textos Dinmicos. c) Los textos de entrada leen cadenas de caracteres introducidas por el usuario y pueden almacenarlas en variables que podremos usar despus. 7. Es posible modificar el tamao de la caja de texto de entrada "tirando" de cualquiera de los cuadrados que podemos encontrar en las cuatro esquinas del objeto. a) Verdadero b) Falso 8. Los textos introducin de texto y los dinmicos pueden ser modificados a voluntad por el usuario siempre. a) Verdadero b) Falso 9. Los textos de Entrada no comparten propiedades con los textos estticos o dinmicos. a) Verdadero b) Falso 10. Este botn sirve para cambiar el texto a subndice o superndice a) Verdadero b) Falso
Unidad 5. Sonidos (I) 5.1. 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, .mp3, etc...) 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. 5.2. Importar Sonidos
Si alguna vez habis intentado aadir un sonido a vuestra animacin Flash probablemente os hayis llevado una gran decepcin al 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. Seleccinalo haciendo clic sobre l y haz pulsa el botn Aceptar. El sonido estar listo para usarlo donde quieras, podrs encontrarlo en la Biblioteca (men Ventana Biblioteca). Unidad 5. Sonidos (II) 5.3. Propiedades de los Sonidos En Flash CS4, al igual que en versiones anteriores, todo lo referente a los sonidos lo podemos editar desde el Panel Propiedades. Aqu tenemos todo lo necesario para insertar, modificar y editar el sonido que acabamos de importar. Si no hemos importado ningn sonido, nos daremos cuenta de que no podemos seleccionar nada en dicho panel, basta insertarlo para que esto cambie. Para que aparezca la posibilidad de trabajar con sonidos, deberemos hacer clic en seleccionar el fotograma en el que queremos reproducir el sonido, tras hacer esto, el Panel Propiedades toma el siguiente aspecto:
Veamos las partes que tiene este Panel de Propiedades Nombre: En este desplegable nos aparecern las canciones que tenemos importadas, deberemos seleccionar la cancin que pretendamos aadir a nuestra pelcula (en el siguiente punto veremos cmo insertarlo). Si no queremos reproducir sonido, seleccionamos Ninguno. Efecto: Desde aqu podremos aadir algn efecto a nuestro sonido, como por ejemplo que el sonido pase del canal izquierdo al derecho (esto crea la sensacin de que el sonido te envuelve ya que lo oyes por un sitio y luego por otro, aunque queda muy lejos
de los verdaderos sonidos envolventes), que el volumen aumente progresivamente etc... Si deseamos aadir complejos efectos sonoros, deberemos tratar adecuadamente el sonido con algn programa creado especficamente para este propsito antes de importarlo. En el punto Editar Sonidos se tratar en ms profundidad estos efectos. Sinc: Esta opcin nos permite determinar en qu momento comenzar a actuar nuestro sonido, estas son las opciones que tenemos: Evento: Sincroniza nuestro sonido con un evento determinado. Es la opcin por defecto y provoca que el sonido se empiece a reproducir al pasar la pelcula por el fotograma en el que est situado. Tambin se puede sincronizar el sonido con botones y los dems tipos de smbolos. El sonido se repetir completamente, y si lo ejecutamos varias veces, se reproducir de nuevo, aunque no hubiese acabado, provocando que el sonido se solape. Inicio: Su funcionamiento es equivalente al de "Evento", se diferencian en que si ya se est reproduciendo, no se reproduce de nuevo. Detener: Detiene el sonido seleccionado. Flujo: Esta opcin sincroniza el sonido con el o los objetos con los que est asociado, por tanto, si la carga de la pelcula es lenta y las imgenes no fluyen adecuadamente, el sonido se detendr para sincronizarse con ellas. Este efecto puede dar la sensacin de que la pelcula se corta de un modo muy brusco (pensar en que se considera normal que una imagen tarde en cargarse, pero si se detiene un sonido mientras se reproduce, produce una reaccin muy negativa en los que pueden estar viendo nuestra pelcula). Por otra parte, es un efecto muy adecuado para algunas situaciones, por ejemplo, el efecto de que un personaje hable durante una pelcula. En esta situacin, es muy recomendable que el sonido y las imgenes estn sincronizadas. Repetir: Determina el nmero de veces que se reproducir el sonido segn lo que escribas en la caja de texto de la derecha. Tambin puedes seleccionar Reproducir indefinidamente para que el sonido se reproduzca en un bluce hasta llegar al siguiente fotograma clave. No recomendamos insertar sonidos con la opcin Flujo y a la vez la de Repetir, ya que al estar sincronizados los sonidos con las imgenes, provocaramos que las imgenes (y los fotogramas que las contengan) se dupliquen tambin, aumentando considerablemente el tamao de la pelcula.
Unidad 5. Sonidos (III) 5.4. Insertar un Sonido
Una vez importado el sonido, vamos a configurarlo para que se reproduzca como queramos: Sonido en la lnea de tiempo. Veamos cmo hacer que el sonido se reproduzca con nuestra pelcula. Lo mejor ser crear una nueva capa para cada sonido. As lo controlaremos fcilmente. Despus, arrastramos el sonido de la biblioteca al escenario, sobre la nueva capa. Con el primer fotograma de la nueva capa seleccionado, accedemos a sus propiedades, a la seccin de Sonido. Seleccionamos el Nombre del archivo, los efectos deseados, y las veces que lo queremos Repetir. En el men Sinc. Seleccionamos la opcin de sincronizacin deseada. Por ejemplo, si queremos que cada vez que se pase por ah, se lance un sonido breve, porque por ejemplo se mueve un objeto, seleccionaremos evento. En cambio, si queremos iniciar la reproduccin del sonido a partir de ah, marcamos Inicio. Si queremos inciar el sonido en un fotograma ms adelante, seleccionamos Detenido, y lo iniciamos creando un fotograma clave, seleccionado el mismo sonido.
As representa Flash los sonidos insertados en Fotogramas Por defecto, Flash entiende que queremos reproducir el sonido completo, si no por que importarlo todo cuando genera un archivo ms grande? Por supuesto, podemos ahcer que el sonido se detenga en un fotograma determinado. Para ello, creamos un fotograma clave, y con el mismo sonido seleccionado, elegimos Detener en el desplegable Sinc. Otra sera utilizar la opcin Flujo.
Al seleccionar esta opcin, el sonido se reproducir hasta que se acabe o llegue a un fotograma clave, siguiendo la pelcula. Slo es aconsejable esta opcin si realmente la necesitamos. En esta animacin, veremos cmo: Para practicar la insercin de sonidos realiza: Unidad 5. Ejercicio paso a paso: Trabajar con Sonidos Objetivo. Insertar un sonido que reproduzca desde el fotograma 5 al 15. Ejercicio paso a paso. 1. Creamos la pelcula mediante Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0) (por defecto tendremos un nico fotograma). 2. Creamos una nueva capa (icono Nueva capa de la lnea de tiempo) y la seleccionamos. 3. Insertamos un nuevo fotograma clave en la lnea de tiempo en el fotograma 5 y 15 (desde el Men Insertar Lnea de Tiempo Fotograma Clave, o pulsando F6). 4. Seleccionamos Archivo Importar Importar a Biblioteca, que se encuentra en el Men Archivo. 5. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el archivo sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.
6. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana Biblioteca) y comprobamos que se encuentra all. 7. Seleccionamos el fotograma 5 (donde queremos insertar el sonido). 8. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el escenario (hasta el fotograma actual). 9. Por defecto, en propiedades, la opcin Sinc. est marcada como Evento. Prueba la pelcula (tecla Intro) y comprobars que el sonido se reproduce hasta al final. Pulsa varias veces Intro y comprobars que el sonido se reproduce varias veces solapndose. 10. En el despegable Sinc de las Propiedades, cambia el valor a Iniciar. Repite el paso anterior y comprueba que el sonido no se vuelve a iniciar si an no ha acabado. 11. Selecciona el fotograma clave 15. 12. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos utilizando. 13. En la opcin Sinc selecciona Detener. 14. Prueba la pelcula y comprobars que ahora se detiene al llegar la fotograma 15.
Sonidos en objetos. Como clips de pelcula y botones tienen lneas de tiempo propias, como ya veremos, podemos insertar ah los sonidos como hemos visto hasta ahora, por ejemplo, para hacer que al pulsar un botn se reproduzca un clic.
Unidad 5. Sonidos (IV) 5.5. 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 cuadro de dilogo Personalizar Sonido. La parte superior representa el canal izquierdo y la parte inferior el canal derecho. Entre las 2 partes hay una lnea de tiempo que nos indica el tiempo de sonido transcurrido en cada punto. Las lneas grises representan el volumen del sonido y haciendo clic en ellas podemos configurar este volumen.
En el ejemplo, el canal izquierdo se reproduce normalmente (pues el volumen est al mximo), pero el canal derecho empieza en silencio, para poco a poco alcanzar el volumen normal (este efecto equivaldra a un Aumento Progresivo en el canal derecho). Unidad 5. Sonidos (V) 5.6. Mp3 o Wav? Como ya se ha comentado, los sonidos que Flash CS4 puede importar casi cualquier tipo de sonido, aunque los ms empelados son MP3 y WAV. Si no sabes las diferencias entre estos tipos de archivos, puedes consultar nuestro tema bsico (Unidad 5. Bsico: Sonidos MP3 y WAV Sonidos WAV Los sonidos con extensin WAV (.wav) son sonidos con una calidad muy buena, concretamente, su calidad es unas 13 veces inferior a un sonido original, cantidad ms que aceptable si tenemos en cuenta que, por ejemplo, el sonido de una llamada telefnica es 100 veces peor que el sonido original y un sonido que escuchamos por la radio (FM), es unas 24 veces peor que el original. Partiendo de ah, comprenderemos que el espacio que ocupa en el disco duro sea muy grande. Es necesaria tanta calidad? Es necesario siempre que el sonido sea completamente limpio? Evidentemente no, y es por esto que surgen otros formatos de audio, otros formatos que sin perder mucha calidad, consigan ahorrar espacio en el disco duro (y en nuestras pelculas Flash) y den flexibilidad a estos sonidos que antes era imposible manejar dado su tamao. (Una cancin de 4 minutos de duracin ocupa 50 MBytes en formato WAV). El formato de audio que ha adquirido mayor popularidad es el formato MP3. Veamos por qu. Sonidos MP3 El MP3 (.mp3) es una tecnologa de compresin de archivos de audio. Su nombre completo es MPEG-1 Audio Layer 3 y surgi hace unos 15 aos con el objeto de reducir el enorme tamao que ocupaban hasta entonces los archivos de audio (por ejemplo, los WAV). MP3 consigue combinar calidad de sonido con un tamao de archivo pequeo, convirtindose en un standard de audio en Internet. Su clave se encuentra en que un
sonido MP3 no contiene todos los detalles del audio que no son captables por el odo humano y que s que estn en los sonidos originales. Es decir, si un detalle del sonido no puede ser escuchado por el odo humano, por qu no eliminarlo? Y as se hace, el resultado es un sonido prcticamente idntico (muchas veces completamente idntico, depende del grado de compresin aplicado) al sonido original. A este sonido sin informacin innecesaria, se le aplican unos mtodos de compresin muy potentes y el resultado final es un archivo de audio MP3, con una calidad buena y un tamao muy reducido (la cancin de 4 minutos del ejemplo anterior pasa a ocupar slo 3,9 MBytes), lo que nos permite almacenar un nmero casi ilimitado de canciones en nuestro ordenador, en CDs, en nuestro reproductor MP3 o trabajar con ellas en Internet...)
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. Por ltimo, comentar que Flash no puede importar sonidos en formato MIDI (.mid). An as, si estamos empeados en que en nuestra animacin el sonido sea un MIDI y no queremos o podemos conseguir un programa que convierta el sonido MIDI a WAV o MP3 existe una forma de hacerlo consistente en el uso combinado de Flash y Java script. Igualmente, como se coment en el Tema 1, Flash CS4 permite cargar sonidos de un modo dinmico (sin que ocupen espacio), esto se tratar en el Tema 17 "Action Script".
Ejercicios unidad 5: Sonidos Ejercicio 1: Importar Sonidos 1. Crea una pelcula con 1 fotograma. 2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios. 3. Imprtalo a tu pelcula. 4. Comprueba que est disponible en la Biblioteca. 5. Inserta el sonido importado en el fotograma 1. 6. Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa CTRL+ ENTER (Esta combinacin de teclas te permite "probar" la pelcula). 7. Consigue que el sonido deje de escucharse al llegar la pelcula al fotograma 5. 8. Consigue que vuelva a escucharse en el fotograma 10, y se reproduzca todo el sonido. Ejercicio 2: Editar Sonidos 1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco a poco vaya aumentando de volumen. 2. Modifica el sonido de modo que al final del mismo, parezca que el sonido pasa de un altavoz al otro. Ayuda ejercicios unidad 5: Sonidos 1. Creamos la pelcula mediante Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0) (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 el archivo 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. 6. Creamos una nueva capa y la seleccionamos. 7. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el escenario (hasta el fotograma actual). 8. Pulsamos Enter y el sonido deber escucharse. 9. Alargamos el fotograma actual hasta el nmero 4 (insertando fotogramas normales desde el Men Insertar Lnea de Tiempo Fotograma).
10. Insertamos un nuevo fotograma en la lnea de tiempo. En la posicin 5 (desde el Men Insertar Lnea de Tiempo Fotograma Clave). 11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4. 12. En la opcin Sinc seleccionamos Flujo. 13. Acabamos de conseguir que el sonido slo se reproduzca cuando est en los fotogramas indicados. 14. Insertamos un nuevo Fotograma Clave en la posicin 10. 15. Con el fotograma 10 seleccionado, vamos al panel Propiedades, y en las opciones de Sonido, elegimos el Nombre del archivo que estamos utilizando. 16. En la opcin Sinc seleccionamos Inicio Debe quedar parecido al grfico:
Ejercicio 2: Editar Sonidos 1. Utilizando el archivo anterior, nos situamos en el ltimo fotograma, donde se reproduce todo el sonido. 2. Seleccionamos Aumento Progresivo dentro de la pestaa Efecto que se encuentra en el Panel Sonidos. 3. Seleccionamos Personalizar dentro de la pestaa Efecto que se encuentra en el Panel Sonidos. 4. 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. 5. Prueba evaluativa unidad 5: Sonidos 7. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Desde un principio podemos trabajar con cualquier sonido que se encuentre en nuestro disco duro. a) Verdadero b) Falso 2. Importar un sonido es lo mismo que insertarlo en un fotograma. a) Verdadero
b) Falso 3. Desde el Panel Propiedades, si tenemos seleccionado un fotograma se puede seleccionar qu sonido queremos reproducir, cuntas veces y qu efectos queremos darle. a) Verdadero b) Falso 4. La calidad del sonido es importante a la hora de importarlo en nuestra pelcula. a) Verdadero b) Falso 5. Cul de estas 3 afirmaciones es correcta?. a) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, importaremos y usaremos siempre el MP3. b) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, importaremos y usaremos siempre el WAV. c) Si tenemos un sonido con formato MP3 y el mismo sonido en formato WAV, usaremos uno u otro en funcin de ciertos parmetros tales como el tamao, la calidad y el tipo de sonido que sea. 6. El efecto Canal Izquierdo aumenta la calidad del sonido, ya que lo concentra todo en un nico altavoz, evitando la prdida de calidad. a) Verdadero b) Falso 7. Si configuramos un sonido para que se reproduzca 9999 veces... a) Se reproducir indefinidamente. b) La respuesta anterior es falsa. 8. Para efectos de voz en nuestras pelculas es mejor utilizar el mtodo... a) Flujo. b) Inicio - Detener. 9. El efecto Aumento Progresivo puede ser una buena forma de introducir un sonido, ya que provoca que el sonido aumente de volumen progresivamente. a) Verdadero b) Falso
10. El efecto Desvanecimiento de izquierda a derecha crea una sensacin de movimiento, ya que el sonido pasa de un altavoz a otro. a) Verdadero b) Falso
Unidad 6. Trabajar con objetos (I) 6.1. Los objetos. Iniciacin En los primeros temas vimos las herramientas para dibujar elementos en nuestra pelcula, obteniendo formas. En este tema profundizaremos en cmo trabajar con estas formas u objetos, para ajustarlos a nuestras necesidades.
Independientemente de si estamos trabajando en una animacin, en una pgina web, en un catlogo para un DVD 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, 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 vio 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.
6.2. 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, depende de la capa) al estar seleccionados. Seleccionar Varios elementos: Mantendremos pulsada la tecla SHIFT (Maysculas) 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 una forma, 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 rectangulares. 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 6. Trabajar con objetos (II) 6.3. Colocando Objetos. Panel Alinear
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 Escena. Esta opcin nos permite decir a Flash que todas las posiciones que indiquemos para nuestros objetos tomen como referencia el escenario.
Si esta opcin no est seleccionada, los objetos toman como referencia al conjunto de objetos en el que se encuentran, y se colocan en funcin de ellos. Lo ms habitual es seleccionar En 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 quisiramos 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, podis ver la animacin situada arriba al principio del captulo.
Para practicar la alineacin te aconsejamos realizar:
(Unidad 6. Ejercicio paso a paso: Alineacin de objetos Objetivo Crear un texto cualquiera y asignarle las propiedades que ms nos interesen. Ejercicio paso a paso 1. Abre un archivo nuevo. 2. Dibuja 4 rectngulos de diferentes colores situados en diferentes puntos del escenario. 3. Haz clic en la herramienta Seleccin. 4. Vamos a seleccionar todos los elementos que se encuentran en el escenario, para ello hacemos clic en la esquina superior izquierda y sin soltar el botn del ratn arrastramos hasta la esquina inferior derecha y soltamos (asegrate de que todos los elementos se encuentran en el rea de seleccin). 5. Abrimos el panel de Alineacin, esta vez lo haremos pulsando la combinacin de teclas CTRL + K (aunque tambin podras abrirlo desde el men Ventana). 6. Marca la opcin En escena . 7. Alineamos todos los objetos a la derecha del escenario haciendo clic en . Observa como todos los objetos se han movido para tener su borde derecho pegado al borde derecho del escenario. 8. Alineamos todos los objeto (aun selecionados) a la izquierda del escenario haciendo clic en . Fjate que los objetos ahora se han movido al lado contrario. Alinendose su borde izquierdo con el borde izquierdo del escenario.)
6.4. 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. 6.5. 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 (Ctrl + G). 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 unidad 6: Trabajar con 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 (rectngulo de la izquierda en la imagen). 3. En el otro, elimina el borde (rectngulo de la derecha en la imagen).
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. Ayuda ejercicios unidad 6: Trabajar con objetos 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 o en el Panel Color, hacemos clic en la Herramienta Rectngulo y dibujamos 2 rectngulos.
Los 2 rectngulos originales 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 Supr.
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 o en el Panel Color, hacemos clic en la Herramienta valo (que aparece agrupada con la herramienta rectngulo) 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 para alinear el objeto en el extremos izquierdo de la pelcula. 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 y . 7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en y . 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). 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
Prueba evaluativa unidad 6: Trabajar con objetos Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Todos los objetos tienen, en principio, borde y relleno. a) Verdadero b) Falso 2. Cuando seleccionamos un relleno, ste adquiere una textura para indicar que est seleccionado. a) Verdadero b) Falso 3. No existe ningn panel en Flash para alinear objetos, hay que hacerlo "a mano". a) Verdadero b) Falso 4. Un grupo es un conjunto de objetos con propiedades comunes. a) Verdadero b) Falso 5. Para seleccionar un borde, debemos hacer doble clic sobre l, de lo contrario, no lo seleccionaremos. a) Verdadero b) Falso 6. Para seleccionar un relleno, haremos doble clic sobre l. a) Verdadero b) Falso 7. preguntaCon la Herramienta Seleccin (Flecha) podemos seleccionar reas de cualquier forma y tamao (y los objetos que se encuentren en ellas). a) Verdadero b) Falso 8. Si hacemos clic en la Lnea de Tiempo, se seleccionan todos los objetos existentes en el fotograma seleccionado.
a) Verdadero b) Falso 9. Cul de estas 3 afirmaciones es correcta?. a) La tecla SHIFT selecciona objetos nicos en la pelcula. b) Si seleccionamos un objeto y pulsamos la tecla SHIFT, este objeto queda agrupado con todos los contiguos. c) Si seleccionamos un objeto y pulsamos la tecla SHIFT , podremos aadir ms objetos a nuestra seleccin actual. 10. Cul de las siguientes afirmaciones es falsa?. a) Los Grupos permiten tratar a todos los objetos que los forman como a uno slo. b) Los objetos agrupados pierden cualquier propiedad que tuvieran antes de quedar agrupados. c) Agrupar objetos sirve, por ejemplo, para mover varios objetos de una sla vez manteniendo la distancia entre ellos. 11. El Panel Informacin muestra informacin acerca de los objetos que tenemos seleccionados. a) Verdadero b) Falso 12. La opcin En Escena del Panel Alinear no tiene importancia, pues se usa para centrar el objeto seleccionado en el escenario. a) Verdadero b) Falso 13. El Panel Informacin muestra, entre otros datos, la anchura, la altura o las coordenadas del objeto seleccionado. a) Verdadero b) Falso 14. En Flash es posible colocar los objetos en lugares determinados, segn la referencia del escenario o la de otros objetos. a) Verdadero b) Falso Unidad 7. Las Capas (I)
7.1. 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 (lminas de acetato) con dibujos sobre otras y la superposicin de todas forman el dibujo final. Por qu no dibujan todo en una misma hoja? Por qu trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash, y la mayora de programas de dibujo o retoque, como Photoshop. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con independencia del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Lnea de Tiempo y por tanto, sus distintos fotogramas se reproducirn simultneamente. Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portera de ftbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante estn vacos). Pues bien, esta pelcula nos mostrar inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portera con el portero, para despus (durante los fotogramas del 5 al 10) mostrar la portera sin portero. De este modo la portera es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada.
Otra razn para separar los objetos en capas, es que Flash nos obliga a colocar cada animacin distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarn parte de la animacin. Si queremos que un objeto no forme parte de una animacin, deberemos quitarlo de la capa en la que se produce dicha animacin. Siguiendo con el ejemplo del portero, si quisiramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningn inconveniente, pero si la portera estuviera en la misma capa que el portero, entonces ambos objetos se moveran hacia dicho lado, con lo que resultara imposible que slo se moviera el portero. La solucin es separar los objetos en 2 capas, como ya hemos hecho. Las capas adems, tienen otras utilidades, nos permiten ordenar nuestra pelcula de forma lgica, y nos ayudan en la edicin de dibujos (evitando que se "fundan" en uno slo, o bloqueando el resto de capas de modo que slo podamos seleccionar la capa que nos interese). Otro motivo es para organizar mejor nuestro contendio. Igual que crebamos una capa para los elementos de audio, crearemos capas para otros elementos, como el cdigo ActionScript.
Unidad 7. Las Capas (II) 7.2. Trabajar con Capas
La vista estndar de una capa es la que muestra la imagen. Veamos para qu sirven los distintos botones y cmo usarlos.
Nueva capa : Como su nombre indica, sirve para Insertar una nueva capa en la escena actual. Crea capas normales (en el siguiente punto se vern los distintos tipos de capas). Crear carpeta : Nos sirve para crear carpetas, que nos ayudarn a organizar nuestras capas. Borrar Capa : 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 junto al nombre de la capa, podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna ms de menor importancia.
Aqu puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. Tambin puedes bloquearla u ocultarla. Pero haremos especial hincapi en la opcin Tipo cuyas opciones, Gua y Mscara, veremos ms adelante en el curso. Unidad 7. Las Capas (III) 7.3. 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. Este punto significa que no est activada esta opcin, lo mismo sucede con el botn Bloquear capas. En la columna Mostrar capas como contornos aparece un cuadrado con relleno, lo que simboliza que los objetos se mostrarn completos y no slo sus contornos. En la segunda imagen aparece una cruz situada bajo la columna Mostrar Capas, lo que indica que dicha capa no es visible en el escenario. Aparece un cerrojo bajo la columna "bloquear capas", lo que simboliza que la capa est bloqueada. Y en la columna "Mostrar capas como contornos" NO aparece relleno. La capa se est mostrando en este modo y no podremos ver los rellenos hasta deseleccionar esta opcin. Adems, el color de los contornos ser diferente para cada capa, de modo que podamos distinguirlas mejor. El color del contorno, coincidir con el indicado en cada capa. En este ejemplo podis ver cmo queda un objeto en funcin de tener activada o no la opcin contorno:
7.4. Reorganizar las Capas
Como ya se ha comentado, las distintas capas tienen muchas cosas en comn unas con otras. Lo primero y principal es la Lnea de tiempo, todas las capas de una misma escena comparten la misma lnea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se vern al mismo tiempo en la pelcula superpuestos unos sobre otros. y qu objeto est delante de los dems? Pues este criterio viene dado por la colocacin de las Capas en la pelcula. Los objetos que se mostrarn delante de todos los dems sern aquellos que se encuentren en la capa situada ms arriba. Es decir, si nos fijamos en el ejemplo anterior: El portero aparece delante de la portera, porque la capa "Portero" est situada encima de la capa "Portera", como puede apreciarse en la imagen. Si quisiramos cambiar esta distribucin, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posicin deseada. Veremos como los objetos se colocan delante o detrs de los de la capa seleccionada segn su capa se encuentre por encima o por debajo de la nuestra.
Para mover un objeto de una capa a otra, deberemos seguir unos sencillos pasos. Aprende a hacerlo realizando el ejercicio paso a paso Mover objetos entre capas. 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 7. Las Capas (IV) 7.5. Tipos de Capas Como habris podido comprobar al ver las propiedades generales de una capa o al hacer clic con el botn derecho del ratn sobre el icono de una capa cualquiera, existen varios tipos de capas.
Capas normales : Son las capas por defecto de Flash y tienen todas las propiedades descritas en los puntos anteriores. Son las ms usadas y se emplean para todo, colocar objetos, sonidos, acciones, ayudas... Capas animacin movimiento : Son las capas que continenen una animacin por interpolacin de movimiento. Capas Gua / : Son capas especiales de contenido especfico. Se emplean en las animaciones de movimiento de objetos y su nico fin es marcar la trayectoria que debe seguir dicho objeto. Debido a que su misin es representar la trayectoria de un objeto animado, su contenido suele ser una lnea (recta, curva o con cualquier forma). En esta imagen podemos ver el contenido de 2 capas. La primera de ellas contiene la bola azul y la segunda contiene la lnea curva. La segunda capa la hemos definido como Capa Gua, para que al realizar la animacin de movimiento (esto lo veremos en un tema posterior) su contenido no se vea en la pelcula, sino que sirva de recorrido para la bola azul. Es importante recordar que el contenido de las Capas Gua no se ver en la pelcula final. Su efecto har que la pelota azul se desplace de un extremo de la lnea al otro siguiendo esa ruta.
Capas guiadas (Guided Layers) : Definir una capa como gua no tiene sentido hasta que definamos tambin una capa guiada. Esto es, una capa que quedar afectada por la gua definida en la Capa gua.
Si no definimos una capa guiada, la capa gua no tendr ningn efecto y si bien no se ver en la pelcula (por ser una capa gua) tampoco provocar ningn efecto en las dems capas. En la imagen anterior, la bola azul se deber encontrar en una capa Guiada, de lo contrario no seguir la ruta marcada por la capa gua. Las capas gua y las capas guiadas se relacionan entre s de un modo evidente. A cada capa gua le corresponden una serie de capas guiadas. Al asociar una capa gua con una capa guiada, el icono que representa a la capa gua cambia, indicndonos que est realizando correctamente su labor. En la imagen podemos ver un ejemplo de capa gua y capa guiada correctamente asociadas entre s. (La capa llamada inferior es, evidentemente, la capa con Gua)
El funcionamiento de las Capas Gua y sus utilidades lo veremos a fondo en el tema de las Animaciones Capas Mscara : Estas capas se pueden ver como plantillas que tapan a las capas enmascaradas (las veremos enseguida). El funcionamiento de estas capas es algo complejo (tampoco demasiado) y se analizar en temas posteriores. Basta con decir que estas capas se colocan "encima" de las capas a las que enmascaran y slo dejan que se vea la parte de stas que tapan los objetos situados en las capas mscara (son como filtros). Al igual que las capas gua, los objetos existentes en este tipo de capas tampoco se ven en la pelcula final. S se vern los objetos de su correspondiente capa enmascarada a los que estn "tapando". Capas Enmascaradas : Estas capas funcionan conjuntamente con las anteriores, ya que son las capas que estn bajo las mscaras y a las que afectan. Al igual que las capas gua y las capas guiadas deben ir asociadas unas a otras para que su efecto sea correcto. Sus objetos s que son visibles en la pelcula final, pero slo cuando algn objeto de la capa Mscara est sobre ellos.
Veamos el funcionamiento de estas capas con un ejemplo. En este ejemplo, los rectngulos azules forman parte de la Capa Enmascarada y por tanto se vern en la
pelcula final (pero slo lo que tape la capa mscara). El valo rojo est situado en la capa Mscara y no se ver en la pelcula, pero slo se ver lo que l "tape", que es lo que se ve en la imagen de la derecha. As se emplean las mscaras...
Podis poner a prueba vuestros conocimientos realizando:
Ejercicios unidad 7: Las Capas Ejercicio 1: Orden de Capas 1. Abre el archivo capas.fla que encontrars en la carpeta ejercicios del curso. 2. Modifica el orden de las capas para que se muestre como el siguiente dibujo:
Ejercicio 2: Planeta Saturno (II) 1. Abre un archivo nuevo e intenta reproducir el planeta Saturno (como hicimos en los primeros temas).
3. En este caso debers utilizar capas de tipo Mscara.
Ayuda ejercicios unidad 7: Las Capas Ejercicio 1: Orden de Capas 1. Abre el archivo capas.fla que encontrars en la carpeta de ejercicios. 2. Haz clic en la capa Texto para seleccionarla. 3. Arrstrala hasta tenerla en la posicin superior (por encima de la capa Forma2). 4. Haz clic en la capa Forma que ahora se encuentra en la parte inferior para seleccionarla. 5. Arrstrala hasta tenerla en la posicin superior (ahora por encima de la capa Texto). Observa que la capa Texto es visible porque la pintura de relleno de la capa Forma tiene el valor alfa al 50%. Ejercicio 2: Planeta Saturno (II) Como siempre. Partimos de un nuevo Archivo de Flash (AS 3.0). 1. Crea tres capas utilizando el botn que encontrars en la lnea de tiempo. 2. Haz doble clic sobre el nombre de la capa que se encuentre ms abajo. Cmbialo por Planeta. 3. Haz doble clic sobre el smbolo de la que se encuentra en la parte superior. Llmala Mscara y dale el tipo Mscara. 4. Finalmente haz doble clic sobre el smbolo de la capa que se encuentra en medio. Llmala Aros y dale el tipo con Mscara. En estos momentos debers tener algo como esto:
5. Selecciona la capa Planeta y dibuja un crculo (puedes aplicarle un relleno degradado y quitarle el borde). 6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un degradado con varias paradas (profundizaremos en los degradados ms adelante). 7. Selecciona el crculo que har de aro, y con la herramienta Transformacin libre (debajo de las flechas), dale la forma deseada. 8. Utiliza el panel Alinear para centrar el planeta y el aro vertical y horizontalmente, y queden perfectamente alineados. 9. Ahora selecciona la capa Mscara y con la herramienta pincel pinta sobre el Escenario para tapar la forma ovalada de los aros de modo que slo pintes lo que quieras que se muestre. Es decir, bastara con no pintar la parte que quedara detrs del planeta. Aqu puedes ver un ejemplo de cmo quedara:
El planeta est en gris, los aros en rojo y la mscara en verde. 10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionndolo todo (clic en la esquina superior izquierda y sin soltar hasta la esquina inferior derecha) y seleccionando la herramienta Transformacin libre para rotar el dibujo en su totalidad unos grados hacia la izquierda. 11. Para probar el efecto de la mscara pulsa las teclas Ctrl + Enter en tu teclado.
Prueba evaluativa unidad 7: Las Capas Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. El objetivo principal de las capas es aislar los objetos que contenga del resto de la pelcula para conseguir independencia frente a estos. a) Verdadero b) Falso 2. Los objetos creados en una capa no pueden moverse a otra, pues cada capa est ntimamente ligada a sus objetos. a) Verdadero b) Falso 3. Si activamos la opcin Mostrar contornos de una capa, podremos ver los bordes de todos los objetos de dicha capa como si fuesen 3 veces ms grandes, ayudndonos a distinguirlos entre el resto de capas (suponiendo que dicha opcin est inicialmente desactivada). a) Verdadero b) Falso 4. Si activamos la opcin Bloquear capas de una capa, se nos garantiza que ningn objeto de los que estn situados en dicha capa podr sufrir alteracin alguna (suponiendo que dicha opcin est inicialmente desactivada). a) Verdadero b) Falso 5. Cmo deberamos organizar las capas de nuestra pelcula si queremos que dos objetos se muevan sincronizadamente realizando el mismo movimiento? a) Separando los objetos en dos capas diferentes. b) Situndolos en la misma capa conseguiramos nuestro propsito de manera rpida y eficaz. c) Ambas respuestas son correctas. d) Ninguna de las anteriores. 6. Qu sucedera si creamos una capa gua, pero ninguna capa guiada asociada a la misma. a) Que no habra ningn problema, pues una misma capa puede servir como gua
para diversas capas guiadas. b) Que la capa Gua no tendra ningn efecto ni se vera durante la animacin. c) Que no podra realizarse, pues una capa slo puede estar guiada por una Gua en cada instante de tiempo. 7. Si tenemos una capa A que es mscara de otra capa B, entonces la capa B queda enmascarada por la capa A ... Son visibles todos los objetos de la capa B? a) Si. b) No. 8. Qu sucedera si quisiramos asociar una capa gua con varias capas guiadas a) Que no habra ningn problema, pues una misma capa puede servir como gua para diversas capas guiadas. b) Que la capa Gua no tendra ningn efecto ni se vera durante la animacin. c) Que no podra realizarse, pues una capa slo puede estar guiada por una Gua en cada instante de tiempo. 9. Qu sucedera si quisiramos asociar a una capa guiada varias capas gua. a) Que no habra ningn problema, pues una misma capa puede servir como gua para diversas capas guiadas. b) Que la capa Gua no tendra ningn efecto ni se vera durante la animacin. c) Que no podra realizarse, pues una capa slo puede estar guiada por una Gua en cada instante de tiempo. 10. Cmo deberamos organizar las capas de nuestra pelcula si queremos que dos objetos presenten animaciones diferentes. a) Situndolos en la misma capa conseguiramos nuestro propsito de manera rpida y eficaz. b) Si las animaciones deben producirse en instantes de tiempo comunes, sera necesaria separar los objetos en dos capas diferentes. Si las animaciones pueden producirse en instantes de tiempo disjuntos (que no coincidan en ningn instante) entonces podran estar ambos objetos en la misma capa. c) Deberamos separar los dos objetos en capas diferentes, pues de lo contrario sera imposible que los objetos realizasen movimientos distintos durante los mismos instantes de tiempo. Para sincronizar los movimientos podramos convertir un objeto en un grfico o en un clip de pelcula, en funcin de nuestras necesidades.
Unidad 8. Smbolos (I) 8.1. Qu son los smbolos Los Smbolos provienen de objetos que hemos creado utilizando las herramientas que nos proporciona Flash CS4. 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. Los smbolos nos resultarn fundamentales a la hora de crear nuestras animaciones. 8.2. Cmo crear un smbolo La accin de crear un nuevo smbolo es una de las ms usadas en Flash ya que es uno de los primeros pasos para crear una animacin, como veremos ms adelante. El procedimiento es el siguiente: 1. Seleccionamos el o los objetos que queramos convertir en un smbolo smbolo. Lo ms habitual es partir de una forma. 2. Abrimos a la ventana Convertir en smbolo, accediendo al men Insertar Nuevo Smbolo, desde le men contextual eligiendo Convertir en smbolo, o directamente con las teclas Ctrl + F8 o F8. 3. Una vez hecho esto nos aparecer una ventana. Introducimos el nombre del smbolo que vamos a crear, y que nos permitir identificarlo en la biblioteca, lo que se har imprescindible cuando tengamos muchos smbolos. 4. Slo nos queda seleccionar el tipo de smbolo (desplegable Tipo) al que queremos convertir nuestro objeto. Podemos elegir entre Clip de Pelcula, Botn y Grfico. Sus caractersticas y las diferencias entre ellos las veremos en temas posteriores. Lo ms habitual es Clips de pelcula para los objetos que queremos mostrar en el escenario, y Botn si queremos que acte como tal. 5. Bastar con pulsar Aceptar para tener nuestro smbolo creado.
Para practicar estas operaciones te aconsejamos realizar
Unidad 8. Ejercicio paso a paso: Crear un 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. Abre el archivo trabajo.fla con el que venimos probando cosas a lolargo del curso. 2. Seleccionamos el valo haciendo doble clic sobre l. 3. Abrimos el men Insertar Nuevo Smbolo... de la barra de mens. Se desplegar una ventana como la de la figura. 4. En el campo Nombre introducimos el nombre de nuestro grfico, por ejemplo "Mi Primer Smbolo".
5. Seleccionamos la opcin Grfico en el apartado Tipo. Con esto le decimos a Flash que el nuevo smbolo ser un grfico. 6. Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico creado. Unidad 8. Smbolos (II) 8.3. Las Bibliotecas En Flash CS4 podemos encontrar dos tipos de bibliotecas, las bibliotecas comunes y de ejemplos y aquellas asociadas a las pelculas que hemos creado. Todas ellas las tenemos a nuestra disposicin para utilizar los smbolos que contienen. Para acceder a las bibliotecas comunes que nos ofrece Flash simplemente tenemos que ir a al men Ventana Bibliotecas Comunes y seleccionar alguna de las que se nos ofrecen. Las hay de todo tipo de smbolos: botones, clips o grficos.
Para acceder a la biblioteca de smbolos de la pelcula que estamos creando, de nuevo vamos a la Barra de Mens, Ventana Biblioteca. En esta biblioteca aparecern todos los smbolos que hemos creado hasta el momento. Podemos comprobar cmo el nuevo smbolo que hemos creado en el ejercicio paso a paso de la unidad anterior se ha aadido a nuestra biblioteca accediendo a ella como acabamos de indicar. Los smbolos contenidos en las bibliotecas estn identificados por su nombre y por un icono que representa el tipo de smbolo que representan: Clip Botn Grfico 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. 8.4. 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 del smbolo.
Por tanto, podemos crear muchas instancias de un smbolo, pero a una instancia solo le corresponder un smbolo. Aunque parece que sean lo mismo, la importancia de esta distincin es que cuando utilicemos un smbolo que hayamos creado previamente en una pelcula y lo modifiquemos, solo alteraremos sa instancia, mientras que el objeto seguir intacto, tal y como era en el momento de su creacin, de manera que podremos volverlo a utilizar en otro momento. En cambio, si modificamos el smbolo de la biblioteca, alteraremos todas sus instancias. A la derecha tenemos un ejemplo de una biblioteca. Cada elemento de la biblioteca es un smbolo.
Para entender mejor este concepto te aconsejamos realizar:
Unidad 8. Ejercicio paso a paso: Modificar una instancia 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 CS4. 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 escenario 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. Accedemos a la biblioteca de nuestro documento (Ctrl + L), ya que ahora tambin aparece aqu el smbolo 8. Arrastramos el smbolo al escenario, creando as una segunda instancia. 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 8. Smbolos (III) 8.5. Modificar una instancia Hemos visto en el ejercicio anterior 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 CS4, 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). Esos cambios debemos de hacerlos directamente sobre el smbolo. Aunque s podremos crear un smbolo a partir de una instancia, lo que desvincular la instancia del smbolo original. 8.6. 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 y su icono correspondiente: El nombre de la instancia es muy importante, pues permite identificarla durante la pelcula, y veremos ms adelante que resulta imprescindible para acceder mediante ActionScript. El nombre, se introduce en el recuadro donde pone por defecto <Nombre de instancia>, y debe de ser nico. El icono asociado nos permite saber qu tipo de smbolo es de un vistazo rpido. Tipo de la instancia. Por defecto se nos muestra el tipo al que perteneca el smbolo original pero nosotros podemos cambiarlo para que cambie su comportamiento, aunque pueda seguir manteniendo su estructura inicial (en la imagen es Botn). Smbolo de la Instancia seleccionada (Instancia de:). Esta opcin nos muestra el smbolo raz del que proviene la instancia que estamos modificando.
Intercambiar: Esta opcin merece especial atencin, pues es muy til y nos ahorrar mucho trabajo cuando sea necesaria emplearla. Su funcin consiste en cambiar el smbolo de la instancia por cualquier otro que tengamos en nuestra Biblioteca, por lo que la instancia tomar el aspecto del nuevo smbolo. 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.
Unidad 8. Smbolos (IV) 8.7. Efectos sobre Instancias
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 Estilo: 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.
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 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 translcido que se observa. A medida que modifiquemos los efectos sobre las instancias, podremos ir viendo el resultado sobre el propio escenario. Ejercicios unidad 8: Smbolos Ejercicio 1: Crear Smbolo 1. Crea una pelcula con 1 fotograma. 2. Dibuja un crculo perfecto. 3. Convirtelo a smbolo de tipo Clip de pelcula. 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 CS4. 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. Dersde esa instancia, suplica el smbolo. 3. 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.
Ayuda ejercicios unidad 8: Smbolos Ejercicio 1: Crear Smbolo 1. Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0). 2. Para que el crculo no salga ovalado, selecciona la herramienta valo y mientras lo dibujas, mantn pulsada la tecla Shift. 3. Accede a Insertar Nuevo Smbolo... o bien pulsa F8. 4. Accede a Ventana Biblioteca y busca el nombre que le diste al crearlo. Ejercicio 2: Insertar Instancia 1. Selecciona la opcin Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0). 2. Ve a Ventana Bibliotecas Comunes Botones y selecciona un botn cualquiera (para expandir las carpetas, haz clic con el botn derecho sobre una de ellas y selecciona "Expandir Carpeta"). Arrastra el botn elegido hasta el escenario 3. Selecciona el smbolo, luego la herramienta Transformacin libre y arrastra alguno de los puntos que aparecern alrededor del botn. 4. Debes ver que has modificado slo una instancia del smbolo, y no el smbolo en s. Ejercicio 3: Duplicar Instancia 1. Selecciona la isntancia a duplicar, y en el men Edicin elige Duplicar. Apareecer una copioa en el escenario. 2. Haz clic con el botn derecho sobre la instancia que quieras duplicar y selecciona Duplicar Smbolo. 3. Accede a Ventana Biblioteca y busca el nombre que le diste al duplicarlo. Ejercicio 4: Efectos sobre Instancias 1. Ve a Ventana Biblioteca para abrir la Biblioteca y busca el nombre del duplicado. Arrstralo al escenario. 2. Abre el Panel Propiedades y selecciona en la pestaa Color Alfa e introduce en la casilla donde pone 100% un 40% 3. Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botn situado bajo l se vea.
Prueba evaluativa unidad 8: Smbolos Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Darle un nombre concreto a los smbolos no es importante. a) Verdadero b) Falso 2. Las Bibliotecas Comunes de Flash aparecen desde la primera vez que abrimos el programa. a) Verdadero b) Falso 3. Para insertar un smbolo de biblioteca en una pelcula abrimos la biblioteca y hacemos doble clic sobre el smbolo. a) Verdadero b) Falso 4. Para cambiar el tamao de un smbolo, lo insertamos en nuestro documento y utilizamos la herramienta "escalar". a) Verdadero b) Falso 5. Cul es cierta?. a) La Biblioteca nos permite guardar copias de todas las instancias que tengamos, lo que nos ayuda en la organizacin de nuestra pelcula. b) Con el panel Propiedades podemos modificar internamente la instancia seleccionada. c) Con el panel Propiedades podemos modificar externamente la instancia seleccionada. 6. El efecto Alfa permite ver objetos situados en capas inferiores cuando su valor es distinto del 100%. a) Verdadero b) Falso
7. Por razones de copyright no podemos utilizar ms de un smbolo de las bibliotecas comunes por pelcula. a) Verdadero b) Falso 8. Todos los smbolos que incluyamos o podamos encontrar en nuestras pelculas sern de estos tres tipos: Clip de pelcula, Grfico y Botn. a) Verdadero b) Falso 9. El efecto Tinta permite modificar uno a uno los colores presentes en la instancia. a) Verdadero b) Falso 10. El efecto Avanzado combina varios de los efectos sobre instancias que ofrece Flash. a) Verdadero b) Falso
Unidad 9. Grficos (I) 9.1. 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. 9.2. Tipos de grficos Los grficos pueden ser:
Grfico esttico 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.
Animacin b) Animaciones: este tipo de grfico vara su forma, posicin u otras propiedades a medida que va pasando el tiempo. Puesto que para realizar la animacin se deben usar varios grficos ms adems del original o bien realizar determinadas acciones que
modifiquen el estado inicial, el tamao de esta clase de grficos, para las mismas dimensiones y forma de creacin, ser mucho mayor que uno esttico. 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 :
Unidad 9. Bsico: Grficos vectoriales y mapas de bits Cmo representar un grfico? Probablemente hayas visto multitud de grficos con muchas extensiones distintas cada uno: JPG, GIF, FLA, SWF, PNG ... Las extensiones nos indican el tipo de archivo o formato en que se guard el grfico. Existen muchsimos programas en el mercado que permiten visualizar, crear y modificar grficos, y cada fabricante decide representar los grficos como mejor le conviene, o simplemente da una extensin determinada a los grficos creados con su programa para restringir su uso a programas de la misma compaa. Pese a todo, la multitud de formatos en que se puede encontrar almacenado un grfico, se pueden englobar en dos tipos bsicos: los grficos vectoriales y los mapas de bits o bitmaps. Diferencia entre Grfico Vectorial y Mapa de Bits La principal diferencia entre los Bitmaps y los Grficos Vectoriales est en su tamao. Los grficos vectoriales tienen una ventaja de gran importancia: ocupan mucho menos
espacio en disco o en memoria y, por tanto, necesitan mucho menos tiempo para descargarlos desde una aplicacin o pgina web. La explicacin de este hecho se puede ver en la forma en la que estn creados y representados cada uno de los dos tipos de grficos: Los bitmaps o mapas de bits estn formados por grandes "rectngulos de datos" (matrices) que contienen informacin sobre cada uno de los puntos (pixel) por los que est formado el grfico, y que se corresponde aproximadamente con la percepcin que nosotros vemos de ellos en nuestra pantalla. A simple vista no apreciamos los pixel debido al pequeo tamao que tienen en general, pero si ampliamos mucho un Bitmap los podemos observar como cuadrados de color, y apreciamos un aspecto dentado en las curvas.
La informacin que almacenan estas matrices son las caractersticas de cada pixel. Las caractersticas que se almacenan sobre los pixels son sus coordenadas dentro del grfico y su color. As, nuestro PC procesa esa informacin, y genera la imagen en el monitor u otro dispositivo de salida, indicando qu color se debe poner en cada coordenada de la imagen. Los pixels (cuadraditos), o unidades ms pequeas que forman una imagen, no son apreciables a simple vista en una imagen de calidad, pero s con una ampliacin.
Los pixels no tienen siempre el mismo tamao ni se tienen porque encontrar en mismo nmero en imgenes de las mismas dimensiones. La calidad de una imagen viene dada por nmero de pixel en que dividamos una imagen (normalmente esto se mide en puntos por pulgada o dpi, de hecho una cmara digital tiene mayor resolucin cuantos ms megapxel puede capturar) y el nmero de colores que puedan tener y, evidentemente, ocuparn ms espacio en disco en la medida que dicha calidad aumente. Como consecuencia de esto aquellos grficos con ms calidad y nmero de pixels sern mucho ms costosos de reproducir y transformar para nuestra aplicacin o reproductor grfico y ms lentos en la descarga va web. Entre los tipos de archivo de mapa de bits ms comunes tenemos: JPG, PCX, PNG, TIFF, GIF, BMP, ... Podmeos encontrar formatos comprimidos, como GIF o JPG o no comprimidos, como BMP. Como hemos visto, para generar un grfico de mapa de bits, nuestro PC tiene que almacenar y trabajar con una gran cantidad de informacin por la necesidad de mantener los datos de cada pixel. Sin embargo, para representar una imagen vectorial se considera que el grfico est formado por un conjunto de vectores o lneas. Esto es una gran ventaja, ya que una lnea, que en el caso de un bitmap estara compuesta por muchos pixels, en una imagen vectorial solo se necesita almacenar informacin sobre su principio, su final y su aspecto. Esto es as con las lneas y con cualquier figura ms compleja. Por ejemplo, podramos representar un crculo simplemente guardando la informacin de su centro y su radio, adems de indicar el color de contorno y el de fondo. Aqu reside el secreto del reducido tamao de los grficos de este tipo. Adems, si aumentamos el tamao de la imagen, slo hay que volver a generarla a partir de sus coordenadas, lo que la mostrar perfectamente ntida por mucho que la aumentemos. Cmo trabaja Flash CS4? Flash CS4, aunque permite trabajar tambin con bitmaps, utiliza grficos vectoriales para realizar sus animaciones. Esto permite que se generen animaciones de muy alta calidad y dimensiones, reduciendo mucho su tiempo de carga cuando intentamos visualizarlas en nuestro navegador web. Adems los ficheros Flash CS4 no necesitan ser
descargados completamente para visualizarse. En cuanto existe una informacin mnima suficiente el fichero se puede mostrar mientras continua su descarga al mismo tiempo. Unidad 9. Grficos (II) 9.3. 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, Archivo de Flash (AS 3.0)). 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, haz clic derecho sobre el o haz clic en el men modificar y selecciona Convertir en Smbolo, lo convertimos en un smbolo como ya habamos visto y dndole el nombre GrficoAnimado y seleccionando el Tipo 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 Edicin 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 va ligada a la de la pelcula. En este caso la lnea de tiempos de la pelcula tena un solo frame, mientras que la del grfico tena 4, por tanto, no le hemos dado tiempo al grfico a desarrollar su animacin; slo ha reproducido un frame, el primero. Cmo podemos solucionarlo? Muy sencillo. Basta con recordar lo que hemos comentado, Cierra la ventana del reproductor de Flash, selecciona el fotograma 5 de la pelcula principal y pulsa F6. Ahora tenemos 5 fotogramas en la pelcula principal. Pulsa de nuevo Control + Intro.
Unidad 9. Grficos (III) 9.4. 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, GIMP, etc... Flash CS4 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. 9.5. Introducir un archivo vectorial
Al igual que los mapas de bits, hay otros programas que trabajan con grficos vectoriales como tambin hace Flash CS4. Si queremos traer un archivo vectorial creado en otro programa, por ejemplo Freehand o Illustrator, 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 AI de Illustrator.
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, Illustrator pertenece tambin a Adobe, igual que Flash, con lo que la compatibilidad en este caso es total. Si quieres saber ms sobre compatibilidad de archivos en Flash lee lo siguiente:
Unidad 9. Avanzado: Compatibilidad de archivos Como vimos en la introduccin del curso, Adobe ha hecho grandes esfuerzos para integrar Flash en el mismo paquete donde se incluyen el resto de programas que ao tras ao vienen ofreciendo. Esto ha resultado en una compatibilidad casi perfecta entre los archivos de todos los paquetes que integran la suite. De esta forma ahora es muy sencillo incluir, por ejemplo, archivos de Photoshop en un proyecto de Flash. Para ello simplemente deberemos hacer clic en el men Archivo y seleccionar la opcin Importar Importar a biblioteca Como hemos visto en el apartado anterior bastar con seleccionar el archivo PSD que queremos aadir a la biblioteca. Una vez hecho se abrir un cuadro de dilogo: Aqu Flash nos proporciona diferentes opciones. Como puedes ver en la imagen, se muestra el archivo desglosado en las diferentes capas que componen el archivo. Seleccionando una de ellas podremos ver las diferentes opciones de importacin para cada una de ellas. Si pulssemos Aceptar directamente aadiramos a nuestro proyecto las capas una a una como mapa de bits. Pero podemos configurar de un modo ms preciso la forma en la que se tratar cada capa. Para ello selecciona una de las capas para ver sus opciones. Observa que es posible importar una capa como Imagen de mapa de bits con estilos de capa editables. Esta opcin nos ser muy til si la capa en cuestin tiene estilos creados en Photoshop y queremos que sean importados de forma separada para que ms tarde puedan ser editados. Tambin podremos decidir el grado de compresin, es decir, la calidad con la que la capa se aadir al proyecto. Ten en cuenta que a mayor calidad mayor ser el peso del archivo final de Flash. Por lo que para conseguir una descarga rpida del archivo no deberemos abusar demasiado de esta caracterstica. Una vez terminado pulsamos Aceptar y el archivo PSD se mostrar en nuestra biblioteca.
Podemos arrastrar directamente el objeto terminado en .psd al escenario para insertar en la pelcula el proyecto completo de Photoshop como un mapa de bits. De esta forma la imagen ser completamente editable, pudiendo entrar en cada una de las capas haciendo doble clic sobre ella. Aunque quizs una de las caractersticas ms interesantes de este mtodo sea la posibilidad de poder acceder una a una las capas (ahora tratadas como objetos) para editarlas por separado. Del mismo modo tambin ser posible aadir nicamente una de ellas simplemente arrastrndola sobre el escenario. De esta forma hemos conseguido importar un archivo de Photoshop y trabajar con las distintas capas por separado gracias a la integracin de Flash en la suite de Adobe.
Unidad 9. Grficos (IV) 9.6. Exportar un objeto Flash como mapa de bits La interfaz de dibujo de Flash, como hemos visto, resulta muy cmoda en determinadas ocasiones para realizar dibujos. As podra interesarnos utilizar Flash CS4 para crear un dibujo y despus utilizarlo en otros programas o para cualquier otro uso. Esto es perfectamente posible con Flash, ya que nos permite exportar un objeto de flash como un bitmap. Eso s, debemos tener en cuenta, como vimos en el tema bsico, que la mayora de mapas de bits no permiten animaciones, por esto el objeto flash que exportemos no debera contener animacin ya que sta no se guardar. Para realizarlo seleccionamos el objeto que vamos a exportar y accedemos al men Archivo Exportar Exportar Imagen... Luego introducimos en el campo Nombre el nombre que queremos que tenga nuestro nuevo bitmap. Seleccionamos el tipo de mapa de bits en que deseemos convertir nuestro objeto y pulsamos Guardar. Ahora ya podemos usar nuestro objeto Flash como un bitmap. Para entender mejor cmo te aconsejamos realizar: Unidad 9. Ejercicio paso a paso: Exportar un objeto como mapa de bits Objetivo Exportar un objeto Flash CS4 como un grfico de tipo mapa de bits. En este caso, lo exportaremos como JPG. Ejercicio paso a paso 1 Abre el archivo trabajo.fla y selecciona el rectngulo que vamos a exportar. 2 Vamos al men Archivo Exportar Exportar Imagen... Ahora estaremos delante de una ventana:
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 nombre que le diste y la extensin .jpg
9.7. Exportar un objeto Flash como animacin Como vimos en el tema bsico hay tipos de archivo de mapa de bits que soportan animaciones, como los GIF. Pues bien, con Flash tambin podemos crear una animacin y exportarla como un GIF animado. Sin embargo, como vimos, el GIF animado consiste en una secuencia de imgenes mostradas secuencialmente y es por esto que para exportar un objeto Flash CS4 como GIF animado es necesario que todos los fotogramas de esta animacin sean clave, ya que el GIF no lo reconocer en caso contrario y no veremos el efecto deseado. Para exportar un smbolo y guardarlo como una imagen deberemos antes que nada seleccionarlo con la herramienta Seleccin. Una vez seleccionado deberemos hacer clic en el men Archivo Exportar Exportar imagen... y se abrir un cuadro de dilogo.
En este cuadro de dilogo deberemos introducir el nombre del archivo que crearemos y seleccionar en el desplegable Tipo el formato de imagen con el que queremos guardarlo. Una vez rellenados todos los campos y elegida la carpeta donde se guardar el archivo pulsa el botn Guardar y el archivo de imagen se crear y estar listo si quieres incluirlo en una pgina web esttica o modificarlo con cualquier programa de imagen. Podis poner a prueba vuestros conocimientos realizando:
Ejercicios unidad 9: Grficos Ejercicio 1: Exportar a Grfico animado 1. Abre el archivo exportar.fla que se encuentra en la carpeta de ejercicios del curso. 2. Exporta la pelcula como un archivo GIF transparente para que muestre la animacin. 3. Deber quedarte algo as:
Observa que esta animacin se trata de una imagen, no de un archivo FLASH.
Ayuda ejercicios unidad 9: Grficos Ejercicio 1: Exportar a Grfico animado 1. Abre el archivo exportar.fla de la carpeta ejercicios. 2. Abre el men Archivo, selecciona la opcin Exportar y finalmente Exportar pelcula. Se abrir un cuadro de dilogo. 3. Selecciona la carpeta donde quieres guardar el archivo y selecciona el tipo GIF animado. 4. Haz clic en el botn Guardar. Se abrir el siguiente cuadro de dilogo:
5. Marca la casilla Transparente para que el fondo de la pelcula quede transparente. El resto de las opciones puedes dejarlas como estn. 6. Pulsa el botn Aceptar y lo tendrs listo.
Prueba evaluativa unidad 9: Grficos Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Los grficos poseen lnea de tiempos propia.
a) Verdadero b) Falso 2. Los grficos pueden ser estticos o dinmicos. a) Verdadero b) Falso 3. La lnea de tiempos de un grfico es independiente de la lnea de tiempos de la pelcula. a) Verdadero b) Falso 4. Flash admite importacin de archivos vectoriales. a) Verdadero b) Falso 5. Cul de estas 3 afirmaciones es correcta?. a) La opcin "Importar" determina lo importante que es un grfico dentro de nuestra pelcula. b) Mediante la opcin "Exportar" podemos publicar imgenes Flash directamente en la web. c) Flash puede incluir en sus pelculas imgenes creadas con otros programas, mediante la utilidad "Importacin". 6. Los grficos vectoriales que importemos podremos modificarlos usando Flash CS4, pues este tipo de imgenes est soportado. a) Verdadero b) Falso 7. En un grfico no es posible incluir sonidos, controles ni otros smbolos grficos. a) Verdadero b) Falso 8. Es indiferente el uso de grficos y clips de pelcula, pues sus funciones son muy parecidas. a) Verdadero b) Falso
9. Flash permite exportar imgenes como tales o como animaciones. a) Verdadero b) Falso 10. La opcin exportar es prcticamente equivalente a la opcin Publicar y pueden usarse indistintamente en casi todas las ocasiones. a) Verdadero b) Falso
Unidad 10. Clips de Pelcula (I) 10.1. Qu es un clip de pelcula? Un Clip de Pelcula, simplemente Clip o MovieClip es una pelcula en s misma, como cualquiera de las que podamos haber creado hasta el momento en este curso. Normalmente nos referimos a ellas como clips cuando las inclumos en otra pelcula,
formando un smbolo. Por tanto, cualquier clip siempre podr estar comueto por otros clips insertados en l, que a su vez estn formados por otros, etc. 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 tiempo del documento que lo contiene, de tal forma que su ejecucin es independiente, y en un fotograma de la palcula principl se puede estar reproduciendo repetidamente un clip. 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 lnea de tiempo ms clara y "limpia" Los Clips son una de las herramientas que dan mayor potencia a Flash CS4, 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. 10.2. 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, Archivo de Flash (AS 3.0)). Despus importaremos una imagen cualquiera o bien crearemos una. La convertimos en Smbolo (botn derecho, Convertir en smbolo...) y seleccionamos en Tipo "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 tiempo de la pelcula principal y comprueba que slo tiene un fotograma. Editemos el Clip que insertamos en el documento, haciendo doble clic sobre l y examinemos su lnea de tiempos. Aparecer un nico MovieClip. Podemos realizar algo similar a lo realizado con los grficos. SI cresemos una animacin de movimiento, como veremos ms adelante, nos quedara as:
Como vemos, la duracin del clip que hemos insertado es mucho mayor que la pelcula nueva que lo contiene. Si el smbolo fuera un grfico ya hemos visto que al reproducir la pelcula no ocurrira nada, porque slo se reproducira el primer fotograma de su lnea de tiempo. En cambio, al tratarse de un clip, comienza a reproducirse al pasar por el primer fotograma, y como la lnea de tiempo es independiente, sigue reproducindose aunque la lnea de tiempo principal haya acabado.
Unidad 10. Clips de Pelcula (II) 10.3. 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, igual que creamos un nuevo archivo, 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 puede que no sea necesario crearlo en ese momento o convenga 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 desplegable 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. Cuando estudiemos las animaciones haremos ejemplos de animaciones mediante clips de pelcula y veremos el potencial real de este tipo de smbolos. 10.4. 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 cula 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 CS4. 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. Para ver cmo exportar e importar una pelcula completa como un slo movie clip poder usar esto para el desarrollo en programas como Swish, revisa nuestro tema avanzado: Otros usos de los Movie Clips
Unidad 10. Avanzado: Otros usos de los Movie Clips Hemos visto cmo importar y exportar clips desde libreras procedentes de archivos .fla. Ahora veremos otra forma de importar y exportar Clips de tal forma que nos permita una mayor flexibilidad en el uso de Flash y adems nos proporcione una eficaz interaccin con otros programas que se complementan con Flash y que nos permiten potenciar sus caractersticas. Si queremos coger el grueso de una pelcula, de la cual no tenemos su archivo .fla y hacer que se comporte en nuestro documento como si de un Clip de Pelcula propio se tratase, no es tan sencillo como si tuviramos dicho fuente .fla, ya que al importar la pelcula "pblica" que viene en formato .swf la animacin se importa fotograma a fotograma. Por esto, si importramos el archivo sobre la pelcula principal nos encontraramos con un gran nmero de fotogramas claves consecutivos que entre otras cosas, estropearan la apariencia y la claridad de nuestra lnea de tiempos, y nos impedira tratar la pelcula como un todo. Esto representa una especie de mecanismo de seguridad. Debido a la importacin fotograma a fotograma, tambin aumenta el tamao de nuestro archivo y por tanto su tiempo de descarga, sin embargo habitualmente este aumento no es tan importante y puede que nos convenga tener esa pelcula para utilizarla como si de un Movie Clip propio se tratara. Para conseguir esto debemos seguir los siguientes pasos: 1) Crear el smbolo de tipo Clip que va a contener la pelcula. Accediendo al men Insertar Nuevo Smbolo...
Automticamente Flash nos colocar dentro del Clip como si lo hubiramos editado nosotros mismos. 2) En esta situacin iremos al men Archivo Importar 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 tiempo principal veremos nuestra pelcula ocupando un simple frame y si ejecutamos la pelcula el efecto que veremos ser el mismo que el que tena la pelcula que habamos importado. De esta forma ya podemos aplicarle todas las propiedades de los Clips. Como vemos este "mecanismo de seguridad" de las pelculas swf no es suficiente. Si creamos una pelcula y la distribuimos, pero queremos impedir que alguien la modifique y la redistribuya, es decir, impedir que sea importada con Flash CS4 por otro usuario como acabamos de hacer nosotros, se nos brinda la oportunidad de proteger la pelcula que hemos creado. Para ello, podemos editar, como veremos ms adelante, el formato de exportacin de nuestras pelculas (ver imagen superior). De modo que para dar una proteccin extra a nuestras pelculas debemos exportar el archivo como swf y activar en Opciones, la opcin Proteger Frente a Importacin e introducir una contrasea. Con esto se le reclamar
dicha contrasea al que intente importar nuestra pelcula. Si no introduce dicha contrasea, simplemente no podr importar la pelcula. Tambin podemos exportar nuestros clips y utilizarlos en programas del estilo de Swish, para aprovechar la capacidad de Flash para la animacin grfica y el dominio de la animacin de textos de Swish. Esto lo podemos conseguir simplemente exportando nuestro clip de la manera habitual y dndole siempre el formato swf de Flash CS4. Es de vital importancia el hecho de poder combinar las utilidades de varios programas y en esto Flash es especialmente bueno ya que permite interactuar de manera bastante fiable con programas de tratamiento de imgenes, programas de dibujo vectorial, reproductores de vdeo, etc. Ejercicios unidad 10: 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 completamente. 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. Ayuda ejercicios unidad 10: Clips de Pelcula Ejercicio 1: Crear un Clip a modo de Cuenta Atrs 1. Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo un Archivo de Flash (AS 3.0).
2. Mediante la Herramienta Texto marcada en la barra de herramientas con una T escribe el 3. 3. Accede a Insertar Nuevo Smbolo... o bien pulsa las teclas Control + F8. 4. Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego borra el 3 que aparecer en ellos y escribe un 2, un 1 y un 0 en su lugar. 5. Puedes reproducir la pelcula con Control + Enter. 6. Elige men Archivo Guardar Como... y dale el nombre cuenta.fla. Ejercicio 2: Crear un clip vaco y editarlo despus 1. Crea un nuevo Archivo de Flash (AS 3.0), desde el men 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 cerca de la lnea de tiempo.. 4. Abre la Biblioteca del documento mediante Ventana Biblioteca, pulsa con el botn derecho sobre el nombre del clip y selecciona la opcin Editar del men emergente. Ejercicio 3: Exportar una pelcula con proteccin 1. Abre mediante Archivo Abrir y selecciona el archivo cuenta.fla. 2. Exporta con Archivo Exportar Exportar Pelcula, selecciona el tipo de archivo SWF y dale un nombre. En la ventana que aparece marca la opcin Proteger frente a Importacin, y en el campo Contrasea escribe la clave que quieras.
Prueba evaluativa unidad 10: Clips de Pelcula Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin.
1. Un clip de pelcula puede contener una imagen esttica. a) Verdadero b) Falso 2. Un clip de pelcula puede contener una animacin. a) Verdadero b) Falso 3. Un clip de pelcula puede hacer las funciones de un Grfico. a) Verdadero b) Falso 4. Los Clips dan ms claridad a pelculas complejas. a) Verdadero b) Falso 5. Cul de estas afirmaciones es cierta?. a) Es imposible importar un archivo SWF que no es nuestro y usarlo como si fuera un clip propio. b) Si importamos un archivo SWF ajeno, la animacin se importa como una secuencia, toda ella de fotogramas clave. c) Es imposible impedir que alguien importe un clip guardado como SWF y que hemos distribuido libremente. 6. La lnea temporal no est ligada a la lnea de tiempos del documento. a) Verdadero b) Falso 7. Un clip de pelcula puede contener cualquier otro tipo de smbolo. a) Verdadero b) Falso 8. Es posible proteger con contraseas los clips de pelcula para que no puedan ser importados y utilizados por terceros. a) Verdadero b) Falso 9. Los smbolos de tipo Clip de Pelcula tienen una lnea de tiempos propia ligada a la de
la escena principal. a) Verdadero b) Falso 10. La pelcula principal e sun MovieClip. a) Verdadero b) Falso
Unidad 11. Botones (I) 11.1. Qu es un Botn? Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas Flash con aquel que la est visualizando. Un botn, en Flash, es igual que cualquier botn de cualquier entorno informtico, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. Tambin es habitual ver cmo este tipo de elementos reaccionan cuando se les pasa el ratn por encima o cuando estn pulsados. Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente ya que el uso de los botones es una prctica muy habitual en el diseo en Internet. Sin embargo, en Flash no ocurre as. Su interfaz est diseada de manera especial para la creacin de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros smbolos de Flash CS4, los botones tienen su propia lnea de tiempo. Esta es independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado posible del botn.
Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado sobre l. Sobre. Aspecto del botn cuando situamos el puntero sobre l. Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado. Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es importante sobre todo en botones compuestos slo por texto como veremos ms adelante. Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de espectacularidad y utilidad de estos smbolos, pero no es as. Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap). La unin de las posibilidades de todos los smbolos pueden dotar a los botones de efectos asombrosos. Unidad 11. Botones (II) 11.2. Creacin de un Botn
En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estructura. Comenzamos creando el objeto que representar el aspecto por defecto de nuestro botn con las herramientas que nos ofrece Flash CS4. Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le daremos el Tipo Botn y asignaremos un nombre a nuestro nuevo smbolo. De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completaremos internamente. Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar. Cuando tengamos delante la lnea de tiempo del botn (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.
Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentir aludido" nuestro botn. Este es un botn muy bsico, como veremos se pueden complicar mucho, pero para empezar nos servir con este. Observa como cambian los estados de reposo (rojo plido), sobre (rojo) y pulsado (azul). Si una vez creado el botn queremos observar sus distintos estados y todava no hemos terminado la pelcula entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra pelcula y seleccionando el botn creado. Para ver lo que comentbamos bastar con pulsar el icono situado a la derecha de la vista previa del smbolo.
Unidad 11. Botones (III) 11.3. Formas en los Botones Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual es ver botones rectangulares, cuadrados y circulares, cuya creacin es inmediata como vimos en el punto anterior, tambin hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de pginas web. Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar ms vistosidad ya que algunos resultan ms expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creacin de botones que sus herramientas de dibujo nos ofrece. Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo o los botones en forma de pldora. Puesto que existen muchas formas de conseguir estos efectos, a continuacin tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botn rectangular. Ejercicio paso a paso Unidad 11. Ejercicio paso a paso: 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 EDI 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. EDI
Ya va tomando relieve, ahora vamos a crear los diferentes estados. 8. Seleccionamos el botn. 9. Hacemos clic derecho sobre l y elegimos Convertir en smbolo... 10. Marcamos el Tipo botn y le damos un nombre. Pulsamos Aceptar. 11. Hacemos doble clic sobre el botn para editarlo. 12. Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspondientes a los estados del botn. 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 que haga nada mientras no pulsemos el botn y el rea de accin es la que comprende nuestro rectngulo.
Unidad 11. Botones (IV) 11.4. 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. Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos textos como clips en la biblioteca, slo tendremos que: - Hacer doble clic sobre el botn para entrar en su modo de edicin. - Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto. Ahora tenemos dos opciones:
- Pulsa la tecla SUPRIMIR para eliminarlo. - Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo texto, para crear una instancia. O la opcin ms prctica: - En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto. - Por ltimo, centramos el nuevo texto en el botn, si es necesario. Ya est listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a reproducirse. Unidad 11. Botones (V) 11.5. 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. Unidad 11. Botones (VI) 11.6. Acciones en los botones
Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash CS4 vamos a comentar dos de las ms comunes. Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de ActionScript (AS 3.0, AS 2.0...). Esto se refiere al lenguaje de programacin que podemos empelar en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se podan agregar comportamientos directamente en las propiedades de los botones. Pero nosotros venimos empleando las versin 3.0 a lo largo del curso, por ser la ms actual y potente. Esta versin nos obliga a escribir el cdigo ActionScript. Veremos cosas bsicas, y entraremos un poco ms en ActionScript a partir del tema 16. Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitir acceder a l desde el cdigo. Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa exclusivamente para el cdigo, por tenero todo mejor organizado. Ahora, abrimos en el panel Acciones (men Ventana Acciones). Se mostrar un rea en blanco en la que podemos escribir:
Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el cdigo que debemos de escribir para asociar acciones a un botn: miBoton.addEventListener('click', accionesMiBoton);
function accionesMiBoton(event):void{ //Acciones } Donde miBoton ser el nombre de la instancia del botn. accionesMiBoton contiene las acciones a realizar. Observa que aparece en dos sitios. El nombre que le hemos dado es el que queramos. Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es nico. Tambin tenemos que dar un nombre nico a accionesMiBoton para cada uno, si no todos realizaran las mismas acciones. Ahora, cambiamos donde pone //Acciones por lo que queramos que haga. Veamos las ms comunes: 1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una pelcula Flash), lo que nos servir para irnos desplazando por webs que contengan ms de una pgina, o permitir al usuario descargarse archivos entre otras cosas. La instruccin en ActionScript que nos permite hacerlo es navigateToURL(new URLRequest("http://www.mipagina.es"), "_blank");. "http://www.mipagina.es" se refiere a la pgina que queremos abrir, y "_blank" indica que se abrir en una pgina nueva. Por lo tanto, si tenemos un botn cuyo nombre de instancia es btnVisitarAulaclic que queremos que abra la web http://www.aulaclic.es, escribiramos: btnVisitarAulaclic.addEventListener('click', visitarAulaclic); function visitarAulaclic(event):void{ navigateToURL(new URLRequest("http://www.aulaclic.es"), "_blank"); } Unidad 11. Botones (VII) 2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda ...
Para ello podemos emplear las acciones: stop(); para detener. play(); para reproducir. gotoAndPlay(numeroFotograma); para ir a un fotograma determinado. Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn btnContinuar para reproducirla: btnPausar.addEventListener('click', pausar); function pausar(event):void{ stop(); } btnContinuar.addEventListener('click', continuar); function continuar(event):void{ play(); } Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o reproducir es un clip determinado, habra que escribirlo delante de la accin, separado por un punto. Por ejemplo miClip.stop();. 11.7. 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, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso, el tipo de sincronizacin ms conveniente suele ser Evento. Por ejemplo podramos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca. Ejercicios unidad 11: 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 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 el documento exportar.fla. Lo encontrars en la carpeta de ejercicios. 2. En el primer fotograma tenemos un clip de pelcula que contiene una animacin que dura 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.
Ayuda ejercicios unidad 11: Botones Ejercicio 1: Crear un Botn en forma de Pldora
1. Crea el nuevo documento con con Archivo Nuevo, y elige Archivo de Flash (AS 3.0). 2. Para dibujar la forma de pldora dibuja primero un crculo perfecto (con la herramienta valo y la tecla Shift). Brrale el borde. 3. Con la forma seleccionada, selecciona la herramienta Cubo de Pintura y elige un degradado radial de tonos azules, colocando los marcadores como se muestra en la imagen de la derecha. 4. Con el Cubo de pintura, haz clic y arrastra sobre la forma. Vers como te permite regular la direccin del degradado. Puedes hacerlo tantas veces como sea necesario hasta lograr el degradado deseado. 5. Ahora, vamos a crear la pldora. Fuera del crculo, dibuja dos lneas paralelas (Herramienta Lnea y tecla Shift). Agrpalas (Ctrl + G). 6. Utilizando el panel alinear, centra horizontalmente el crculo y las lneas (fig. b). 7. Desagrupa las lneas (Ctrl + Shift + G) y deseleccinalas. 8. Ahora podrs seleccionar independientemente los lados de la esfera. Sepralos (fig. c). Puedes hacerlo con las teclas Shift + derecha o Shift + izquierda. 9. Con la herramiena Transformacin libre, estira la seccin que estaba entre las lneas hasta completar la figura (fig. d). 10. Borra las lenas negras.
11. Selecciona la pldora, y convirtela en un botn, haciendo clic derecho y eligiendo Convertir en smbolo... o bien pulsando F8. Elige el tipo Botn. 12. Haz doble clic sobre l para acceder a su lnea de tiempo. 13. Crea fotogramas clave los estados que quieras modificar pulsando F6 y modifcalos para crear el efecto que prefieras. 14. Crea una nueva capa encima de sa, e introduce ah el texto. A no ser que quieras variar el texto segn el estado. 15. Gurdalo, pulsando Archivo Guardar Como... y llmalo stop. Ejercicio 2: Ajustar el rea Activa 1. Hazlo tambin con Archivo Nuevo, eligiendo Archivo de Flash (AS 3.0). 2. Utilizando la Herramienta Texto (marcada en la barra de Herramientas con una T) escribe el texto: VmOnoS. 3. Haz clic en la Herramienta Seleccin y selecciona el texto que acabas de crear. 4. Convirtelo en un botn mediante Modificar Convertir en Smbolo... o bien pulsando F8, y eligiendo el tipo Botn. 5. Haz doble clic sobre l para editar su lnea de tiempo. 6. 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. Abre el archivo stop.fla, creado en el primer ejercicio. 2. Haz doble clic sobre el botn con forma de pldora. 3. Crea una nueva capa para los sonidos. 4. Haz clic en el men Ventana Bibliotecas comunes Sonidos. 5. Arrastra al escenario los sonidos que quieres emplear. 6. En la nueva capa, crea fotogramas clave en Sobre y Presionado. 7. Selecciona el fotograma Sobre de la nueva capa, y en el panel Propiedades, elige el sonido correspondiente en Nombre dentro de Sonido. En Sinc. elige Evento. 8. Repite el paso anterior, pero en el fotograma Presionado. 9. Gurdalo y cirralo. Ejercicio 4: Detener una Pelcula 1. Abre el archivo exportar.fla, que encontrars en la carpeta de ejercicios. 2. En el men Archivo, selecciona Importar Abrir biblioteca externa, e importa el archivo stop.fla creado en los primeros ejercicios. 3. De la biblioteca de stop.fla, arrastra el botn al escenario para crear una instancia. 4. Selecciona el botn, y en el panel Propiedades, escribe botonStop como nombre de la instancia. 5. Selecciona la estrella, y en el panel Propiedades, escribe estrella como nombre de la instancia.
6. Organiza la estrella y el botn en el escenario. 7. Crea una nueva capa para introducir el cdigo ActionScript. 8. Selecciona el fotograma de la nueva capa y abre el panel Acciones (tecla F9). 9. Ahora, escribe el siguiente cdigo que har que al hacer clic en el botn se detenga la estrella: 10. botonStop.addEventListener("click", pararEstrella); 11. function pararEstrella(event):void { 12. estrella.stop(); } 13. Prueba la pelcula (Ctrl + Intro) y comprueba que funciona.
Prueba evaluativa unidad 11: Botones Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Crear un botn en Flash es ms complicado que crearlo en lenguajes como Javascript. a) Verdadero b) Falso 2. Es posible determinar en qu zona del botn queremos que sean aplicables las acciones.
a) Verdadero b) Falso 3. Los botones pueden contener cualquier otro smbolo en su interior. a) Verdadero b) Falso 4. La lnea de tiempos de un botn slo puede tener una capa y cuatro fotogramas. a) Verdadero b) Falso 5. Un botn es capaz de controlar la reproduccin de toda una pelcula. a) Verdadero b) Falso 6. Cul de estas afirmaciones es cierta?. a) Flash crea los botones sustituyendo siempre para cada estado del botn su aspecto por un nuevo mapa de bits, al contrario de lo que hace Javascript. Por esto, un botn creado en Javascript, ocupa menos espacio en disco y tarda menos en ser cargado b) Javascript crea los botones sustituyendo siempre para cada estado del botn su aspecto por un nuevo mapa de bits, al contrario de lo que hace Flash. Por esto, un botn creado en Flash, ocupa menos espacio en disco y tarda menos en ser cargado. 7. Podemos asociar acciones a un botn para que, por ejemplo, abra una ventana nueva y la direccione a aulaclic.es. a) Verdadero b) Falso 8. Para asociar un comportamiento a un botn en un archivo de Flash AS 3.0, tenemos que... a) Escribir las acciones a realizar en lenguaje ActionScript. b) Elegir las acciones a realizar en el panel de Propiedades. 9. Si en un botn no definimos la Zona Activa el no reaccionar ante ninguna accin. a) Verdadero b) Falso 10. Los botones contribuyen a la interactividad de Flash.
a) Verdadero b) Falso
Unidad 12. Animaciones de movimiento (I) 12.1. La animacin en Flash Flash es un programa bsicamente orientado a la animacin, de ah la gran importancia de este tema. No obstante, para ir creando animaciones cada vez ms complicadas se necesita, sobre todo, mucha prctica, aparte de conocer bien las herramientas. En este tema y los sucesivos mostraremos las tcnicas bsicas de animacin en Flash. La unin de estas tcnicas ser la que nos permita crear las ms variadas y vistosas animaciones. En el tema de la animacin, Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento
para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programacin como Java Script, 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 leer nuestro tema bsico: Unidad 12. Bsico: Animaciones fotograma a fotograma La Animacin en Flash Una animacin no es ms que una secuencia de fotogramas reproducidos a una velocidad tan alta que el ojo humano no es capaz de darse cuenta del cambio de una imagen a otra. Aunque el lmite en el que el ojo humano detecta estos cambios en el monitor de un ordenador ronda los 18 fotogramas por segundo, Flash coloca por defecto sus lneas de tiempo a 24 fps. Por esto, aunque Flash CS4 incorpore tcnicas que aparentemente no utilicen secuencias sucesivas de fotogramas, como las interpolaciones de movimiento, esto no es as. En estos casos, simplemente no vemos los fotogramas "fsicamente", esto es, si la animacin ocupa 20 fotogramas en la lnea de tiempos, el hecho de que no todos sean fotogramas clave indica simplemente una mejora en la capacidad de almacenamiento porque Flash no necesita saber cules son los pasos intermedios de la animacin. Si todos fueran claves, el tamao del archivo aumentara considerablemente. Esto ltimo sucede, por ejemplo con los GIFs animados, muy comunes sobre todo en el mundo de la web. No slo estn compuestos por bitmaps (ya comentamos el mayor tamao de estos grficos), sino que cada fotograma es un mapa de bits completo, lo que aumenta mucho su espacio de almacenamiento en memoria y disco. Crear una animacin Fotograma a Fotograma Aunque Flash incorpora tcnicas mucho mejores que estas, tambin permite "simular" la forma de animacin de los GIF animados, ya que en ocasiones la animacin es muy brusca o el cambio no es realizable "automticamente" con Flash o simplemente nuestro objetivo es exportar el grfico creado como este tipo de mapa de bits.
Para crear una animacin fotograma a fotograma basta introducir la apariencia inicial del objeto en el primer fotograma, hacer claves todos aquellos fotogramas que vayan a intervenir en ella, e ir modificndolos uno a uno, progresivamente, ya que una diferencia muy grande de un fotograma al siguiente creara un golpe brusco para el que la visualiza. Una vez completada la animacin tendremos algo como lo que mostramos a continuacin en nuestra lnea de tiempos:
Veamos la diferencia de tamaos de las diferentes tcnicas de animacin para una misma pelcula: Tenemos la siguiente animacin. La apariencia se mantendr prcticamente igual en todos estos casos, pero cabe la posibilidad de que al hacerlo fotograma a fotograma, se cometan pequeos errores de posicionamiento en la trayectoria que Flash no cometera: Y tenemos estas tres formas de crearlo con sus respectivos tamaos: 1. Interpolacin de movimiento. sta es su lnea de tiempo:
Tamao: 961 Bytes (0,93 KB) 2. Fotograma a Fotograma exportado como pelcula Flash (SWF): La lnea de tiempos como vemos tiene todos los fotogramas como fotogramas clave:
Tamao: 1 Kbyte 3. Fotograma a Fotograma exportado GIF Animado La lnea de tiempos igual que en el caso anterior:
Tamao: 2 Kbytes Aunque las diferencias se observaran mejor en pelculas ms complejas, en este ejemplo ya podemos ver como es menor el tamao utilizando la tcnica de Flash Interpolacin de Movimiento, es sensiblemente mayor en la animacin fotograma a fotograma y es el doble para el caso del GIF animado.
A continuacin veremos distintos tipos de animaciones que el creador de pelculas Flash deber tomar como gua inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocndolas en distintas capas. Con esto es con lo que conseguiremos los efectos ms espectaculares a la par que tiles. Desde el punto de vista del diseo general de una pgina web es muy importante tener claro un concepto: no se debe crear animaciones en pginas que no lo necesitan ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje. En esta versin de Flash CS4 ha habido un cambio importante en las animaciones, lo que hasta ahora se llamaba interpolacin de movimiento, pasa a llamarse interpolacin clsica y la interpolacin de movimiento actual es totalmente nueva, ms potente y verstil. 12.2. Interpolacin de movimiento Es la accin bsica de las animaciones en Flash. Permite desplazar un smbolo Flash de un lugar a otro del escenario, siendo necesarios nicamente dos fotogramas, lo que optimiza mucho el rendimiento de la pelcula. Es importante destacar que para que una Interpolacin de movimiento se ejecute correctamente aquellos objetos que intervengan debern haber sido previamente convertidos a smbolos. Los grficos, clips de pelcula, textos y botones son algunos de los smbolos que se pueden interpolar. Tambin se debe tener cuidado al realizar una interpolacin con dos smbolos que se encuentren en la misma capa, ya que el motor de animacin los agrupar como uno slo y el resultado no ser el esperado. Por esto es conveniente asegurarse de dos cosas:
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). Crearla es tan simple como hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolacin de movimiento. Por defecto, se aadirn unos cuantos fotogramas, rellenos de un color azulado. Ahora vamos al fotograma final, o creamos uno clave donde nos plazca. Y desplazamos el smbolo. Veremos que aparece una lnea punteada, por defecto recta, que representa el trazado de la animacin. 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 24, utilizando precisamente 24 fotogramas. El nmero de fotogramas que se usen en la interpolacin indicar las subetapas de que constar la animacin. Cuantas ms subetapas ms sensacin de "continuidad" (menos saltos bruscos) pero a la vez menos velocidad en el movimiento. La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su parmetro en la lnea de tiempo, pero esto no cambiar lo que hemos comentado anteriormente respecto al nmero de fotogramas.
La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la lnea de tiempo. A mayor valor ms velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animacin como queremos. El trazado recto generado por defecto podemos modificarlo directamente haciendo clic y arrastrndolo, una vez seleccionada previamente la herramienta Seleccin .
En cualquier fotograma de la interpolacin podemos cambiar la posicin del smbolo (o cualquier otra propiedad), creando ah un fotograma clave de propiedad, que se representa por un pequeo rombo en la lnea de tiempo. La interpolacin de movimiento permite modificar muchos parmetros del movimiento mediante el Editor de movimiento, que veremos a continuacin.
Unidad 12. Animaciones de movimiento (II) 12.3. El editor de movimiento En la versin de Flash, CS4, encontramos un nuevo panel llamado Editor de movimiento. Para acceder a l basta tener seleccionada una interpolacin de
movimiento y hacer clic en la pestaa Editor de movimiento que aparece junto a la lnea de tiempo. Como cualquier panel, tambin es accesible desde el men Ventanas. Este panel nos permite controlar multitud de propiedades y efectos que afectan a una animacin con total precisin, fotograma a fotograma. Podemos ver, a la izquierda una columna con las propiedades que podemos modificar, divididas en Movimiento bsico, Transformacin, Efectos de Color, Filtros y Suavizados. Junto a estas propiedades, aparece una columna con los valores que toma esa propiedad en el momento seleccionado de la lnea de tiempo. En la siguiente columna podemos establecer si el valor se aplica con aceleracin o no. En la columna Fotogramas, podemos recorrer o eliminar los distintos fotogramas clave. Tambin los controles - y + que nos permiten aadir efectos. Y a la derecha del todo encontramos la grfica. Podemos ver que cada propiedad tiene una grfica especfica, que indica los fotogramas en horizontal y los valores de la propiedad en vertical. Si hacemos clic sobre una propiedad, veremos que su grfica se expande para editarla con facilidad. En la grfica encontramos los fotogramas clave marcados como un cuadrado negro, o verde cuando est seleccionado. Estirando de ellos, o de la lnea de la grfica podemos alterar los valores. En la grfica, vemos que los puntos suelen formar un vrtice. Una opcin muy interesante es poder transformarlos en puntos suavizados (desde el men contextual del fotograma), creando una curva Bezier, lo que formar transiciones ms suaves entre los picos de valor. Esto no es aplicable a las propiedades X,Y, Z. A lo largo de los siguientes temas veremos cmo utilizarlo de forma concreta, ahora vamos a ver en un video tutorial, cmo podemos utilizar el editor de movimiento para realizar la animacin del bote de la pelota del tema 2, utilizando una interpolacin de movimiento, en lugar de una interpolacin clsica como se hizo en ese tema.
12.4. Interpolacin clsica En la versin anterior Flash CS3 slo haba una interpolacin de movimiento disponible, y se llamaba precisamente as, interpolacin de movimiento, en la versin Flash CS4 esa interpolacin de movimiento se llama interpolacin clsica. Por lo tanto, si utilizamos
archivos creados con la versin CS3 las interpolaciones de movimiento existentes ahora sern mostradas como interpolaciones clsicas. Una interpolacin clsica, igual que una interpolacin de movimiento, es el desplazamiento de un smbolo de uno a otro punto del escenario, muchos de los conceptos vistos en las interpolaciones de movimiento son los mismos para las interpolaciones clsicas. Por ejemplo, las animaciones tambin han de ser sobre smbolos y deben estar en una capa. Los Fotogramas Por Segundo (fps) tienen el mismo significado. Para crear una interpolacin clsica hay que hacer clic derecho sobre el fotograma que contiene los elementos y elegir Crear interpolacin clsica. Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo.
Vemos que la animacin va desde el fotograma 1 hasta el fotograma 20. Aparece una flecha que no aparece en la interpolacin de movimiento y el icono que hay a la derecha del nombre de la capa es distinto.
Unidad 12. Animaciones de movimiento (III) Por supuesto, al realizar una interpolacin clsica el fotograma inicial y final debern ser diferentes, en caso contrario no se crear ningn tipo de animacin. Observa en las siguientes imgenes dnde est situada la pelota en el primer fotograma de la animacin y su posicin final en el ltimo fotograma:
Si el objeto con el que queremos hacer la interpolacin clsica no est convertido a smbolo nos encontraremos con algo as...
... y la animacin no funcionar. Tambin podemos realizar la interpolacin de otra forma, sin convertir previamente el objeto a smbolo, ya que Flash lo convierte a smbolo automticamente si no lo hacemos, dndole el nombre "Animar" ms un nmero. Esto quiz no sea lo ms conveniente en pelculas grandes, debido a lo que ya comentamos de la gran cantidad de smbolos que pueden aparecer y la confusin que crean muchos smbolos con nombres parecidos. Para crear una interpolacin de este tipo, basta con tener un fotograma clave. Hacemos clic con el botn derecho sobre el fotograma en la lnea de tiempo, y seleccionamos Crear Interpolacin Clsica. Ahora, creamos un nuevo fotograma clave donde queremos que finalice la interpolacin, y modificamos los smbolos en los fotogramas clave. Veremos que si seleccionamos uno intermedio, se muestran los smbolos en su transicin al fotograma final. Podemos decidir cmo mostrar el smbolo en ese fotograma, por ejemplo movindolo. Al hacerlo automticamente se crea un fotograma clave. Esto hace que el movimiento ya no sea recto, y pueda ser en zig-zag. Si hacemos esto varias veces sobre varios fotogramas obtendremos varias trayectorias consecutivas ms. Para entender mejor este concepto recomendamos hacer :
Unidad 12. Ejercicio paso a paso: Encadenar interpolaciones Objetivo Crear un movimiento multidireccional encadenando interpolaciones de movimiento. Ejercicio paso a paso
1. Abre un nuevo Archivo de Flash (AS 3.0) y dibuja un valo en el fotograma 1. 2. Seleccinalo y convertrtelo en un Clip de Pelcula pulsando F8. 3. Situamos el Clip en el lado izquierdo del escenario. 4. Hacemos clic con el botn derecho sobre el nico fotograma existente en este momento. 5. Seleccionamos la opcin Crear Interpolacin Clsica. 6. Vamos al fotograma nmero 20 y pulsamos F6 para crear un fotograma clave. Observaremos que se crea la Animacin de 20 fotogramas de duracin. En ese mismo fotograma (el 20). 7. Desplazamos el smbolo al extremo derecho del escenario.
Ahora ya tenemos la interpolacin base, en ella hemos marcado nicamente la posicin inicial y final del movimiento. Si lo dejramos as, el clip seguira una lnea recta. Vamos a hacer que llegue a su origen haciendo zig-zag con un par de acciones muy sencillas, aprovechando el hecho de tener la interpolacin ya creada. Comprobemos que la lnea de tiempos est de la siguiente forma:
8. Hacemos clic del ratn sobre el fotograma 5. Comprobemos que el clip de pelcula ya no est en el origen si no que ya est "haciendo camino". 9. Desplacemos nuestro clip hacia arriba. 10. Hacemos sobre el fotograma 10. 11. Desplacemos nuestro clip hacia abajo. 12. Repite estos dos ltimos pasos para los fotogramas 15 y 20 y prueba la pelcula. 13. Como podemos comprobar, el clip se desplaza ahora en lnea recta pero en varias direcciones distintas, haciendo zig-zag.
Unidad 12. Animaciones de movimiento (IV) 12.5. Diferencias entre interpolacin de movimiento e interpolacin clsica En general las interpolaciones de movimiento son ms fciles de utilizar y ms potente, no obstante las interpolaciones clsicas tienen caractersticas que pueden hacerlas ms interesantes para determinados usuarios. Estas son algunas de las diferencias entre los dos tipos de interpolaciones: - Las interpolaciones de movimiento incluyen el trazado del movimiento, mientras que en una animacin clsica no existe el trazado, a menos que lo creemos expresamente. - Slo se permiten realizar interpolaciones con smbolos, si aplicamos una interpolacin de movimiento a un objeto que no es un smbolo, Flash lo convertir en un clip de pelcula, mientras que si se trata de una interpolacin clsica lo convertir en un smbolo grfico. - En las interpolaciones clsicas cuando cambia una propiedad se crea un fotograma clave y cambia la instancia del objeto, mientras que en las interpolaciones de movimiento slo hay una instancia de objeto y al cambiar una propiedad se crea un fotograma clave de propiedad. - La interpolaciones de movimiento pueden trabajar con texto sin tener que convertirlo en smbolo, como ocurre en las clsicas. - En un grupo de interpolacin de movimiento no est permitido usar scripts de fotograma, mientras que s es posible en las clsicas. - Los grupos de interpolaciones de movimiento se pueden cambiar de tamao en la lnea de tiempo. Se tratan como un objeto nico. Las interpolaciones clsicas estn formadas por grupos de fotogramas que se pueden seleccionar de forma independiente. - Las interpolaciones de movimiento slo pueden aplicar un efecto de color por interpolacin, mientras que las clsicas pueden aplicar ms de uno. - Los objetos 3D slo pueden animarse en interpolaciones de movimiento, no en clsicas. - Slo las interpolaciones de movimiento se pueden guardar como configuraciones predefinidas de movimiento.
12.6. Cambio de forma en una Interpolacin de movimiento Acabamos de ver las interpolaciones de movimiento y las interpolaciones clsicas como un mecanismo para desplazar un smbolo Flash de un lado a otro del escenario. Sin embargo, podemos aprovechar una interpolacin para realizar animaciones en las que nuestro objeto aumente o disminuya de manera progresiva su tamao. Esto es muy sencillo con Flash CS4, basta con modificar la instancia del smbolo en el ltimo fotograma de la interpolacin de movimiento o de la interpolacin clsica, pero esta vez cambindole el tamao. Podemos utilizar la herramienta Tranformacin libre para cambiar el tamao. Por supuesto, podemos aplicar ambos efectos a la vez, de manera que el cambio de tamao se producir mientras el objeto se desplaza. Tambin podemos hacer el cambio de tamao en varias fases o secuencias encadenadas como en las interpolaciones de movimiento comunes.
Y la lnea de tiempo que nos queda es algo tan sencillo como esto:
12.7. Animacin de textos Es indudable que para comunicar algn mensaje, en la mayora de las ocasiones, no basta con imgenes o iconos, y es aqu donde el texto cobra gran importancia. No obstante, se debe tener cuidado con la animacin de los textos, ya que resulta bastante complicado leer un texto que se desplaza o cambia de tamao. Por este motivo, un texto animado debera estar slo en las presentaciones o bien formar parte de una animacin corta y, lo que es ms importante no debera estar reproducindose infinitamente. En las presentaciones, se utilizan multitud de efectos que veremos ms adelante. Sin embargo, con lo visto hasta ahora se pueden obtener efectos interesantes. Una de las opciones ms utilizadas es separar las letras de los textos y animarlas independientemente
Si no tienes claro cmo realizar una animacin te recomendamos que realices:
Unidad 12. Ejercicio paso a paso: 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 una 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. Seleccionamos el texto recin escrito. 3. Abrimos el panel Propiedades (con el texto seleccionado) y seleccionamos el tipo de letra. Nosotros hemos elegido "Papyrus", pero cualquiera es vlida. 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 quisiramos dar otro efecto en concreto. 5. Seleccionamos dichos bloques y los convertimos a smbolos, dndoles un nombre identificativo y el Tipo 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 aplicara el movimiento a todo aquello que encontrara en dicha capa, ya que como hemos comentado anteriormente, lo convertira todo a smbolo automticamente. 7. Nombramos cada una de las capas segn el bloque de texto que vaya a contener, pero en orden inverso en el que vaya a producirse la animacin, para que el objeto en movimiento se superponga a los que no lo estn. Esto es, la capa de ms arriba se llamar "Clic", la siguiente "la" y as sucesivamente. 8. Hacemos clic con el botn derecho sobre el nico fotograma con elementos que tenemos en la lnea de tiempo y en el men emergente seleccionamos Copiar Fotogramas. A continuacin vamos pegando los fotogramas (botn derecho Pegar Fotogramas) en todas las capas. 9. Seleccionamos cada capa y vamos borrando las partes del texto que no corresponden con la parte del texto que debe contener. Es recomendable bloquear el resto de capas cuando se haga esto para asegurarnos de que borramos las letras de esa capa (hay que tener en cuenta que al principio todas las capas contienen lo mismo y superpuesto). 10. Situamos (arrastrando) el fotograma de cada capa a los siguientes frames: 1. "A" : Fotograma 1. 2. "U" : Fotograma 6. 3. "LA" : Fotograma 12. 4. "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 clave y seleccionamos cada vez Crear Interpolacin Clsica. 13. Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el fotograma 30 (Botn derecho Insertar Fotograma Clave). 14. Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolacin y aumentamos el 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.
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. 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.
Unidad 12. Animaciones de movimiento (VI) 12.9. Interpolacin guiada Anteriormente hemos visto como las interpolaciones de movimiento incluyen por defecto el trazado con la trayectoria del objeto, y que este trazado puede modificarse fcilmente, sin embargo las interpolaciones clsicas no lo incluyen. Si deseamos que el objeto siga una trayectoria no rectilnea en una animacin clsica hemos de crear una capa gua de movimiento. Una gua es una capa especial que marca una trayectoria para los smbolos de la capa a la que afecta, para que dichos smbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproduccin y permite dibujar cualquier tipo de dibujo vectorial, que nos permitir crear un movimiento no forzosamente rectilneo. Crear un movimiento mediante esta tcnica es bastante sencillo. Partimos de una capa con una interpolacin clsica: Sobre la capa en la lnea de tiempo, hacemos clic derecho y seleccionamos Aadir gua de movimiento clsica. Creamos el trazado de la gua en la nueva capa, por ejemplo dibujando con el Lpiz. Y para acabar, hacemos coincidir el fotograma final de la interpolacin con el final del trazado de la gua. Es importante que el smbolo est encontacto con la gua. No es necesario colocarlos al principio del trazado ya que Flash lo hace automticamente. Vemos como la capa a la que se asocia la gua aparece debajo y indentada a la derecha.
Podemos ver un efecto ms vistoso que el que realizamos con la interpolacin sencilla del principio del tema. Una opcin que puede resultar muy interesante es Orientar segn el trazado, la cual encontramos en el panel de Propiedades. Esta opcin har que el smbolo vaya girando para seguir la lnea del trazado, lo que en la animacin anterior habra puesto el avin boca abajo al hacer el "loop".
Tanto si el trazado es de una interpolacin de movimiento, como si es de una interpolacin clsica, podemos modificarlo de varias formas: - Seleccionando la herramienta Seleccin y haciendo clic sobre el trazado y arrastrndolo. - Seleccionando la herramienta Subseleccin y haciendo clic en el trazado, aparecern los controladores de curva, movindolos modificaremos el trazado. - Seleccionando la herramienta Transformacin libre y haciendo clic en el trazado, aparecern los controladores de transformacin libre, movindolos modificaremos el trazado. Si se trata de un trazado de una interpolacin de movimiento, adicionalmente disponemos de otros mtodos para modificar el trazado: - Moviendo la posicin del objeto en el escenario, esto hace que se cree automticamente un fotograma clave de propiedad y se modifique el trazado. Esta es, quizs, la forma ms fcil de modificar un trazado. - Utilizar el editor de movimiento para modificar los valores de X, Y, Z. Si estamos modificando el trazado de una interpolacin clsica, debemos tener cierto cuidado con no producir discontinuidades en el trazado, ya que esto hara que la animacin se detuviera en ese punto. En general es ms fcil y flexible utilizar los trazados con las interpolaciones de movimiento que con las interpolaciones clsicas.
Muchos movimientos complicados pueden ser duplicados fcilmente sobre otros objetos utilizando ActionScript 3
Ejercicios unidad 12: Animaciones de movimiento Ejercicio 1: Mscara en Movimiento 1 Abre un documento nuevo. 2 Crea los pasos necesarios para crear una animacin utilizando una mscara en movimiento.
Ayuda ejercicios unidad 12: Animaciones de movimiento Ejercicio 1: Mscara en Movimiento 1. Abre un nuevo Archivo de Flash (AS 3.0) desde el men Archivo Nuevo. 2. Crea una nueva capa haciendo clic en el botn . 3. Selecciona la capa superior y haz doble clic sobre su smbolo . 4. Llmala Mscara y selecciona el tipo Mscara. 5. Selecciona la capa inferior y haz doble clic sobre su smbolo . 6. Llmala Texto y selecciona el tipo Con mscara. 7. En la capa Texto escribe edi. 8. Selecciona el fotograma 1 de la capa Mscara, dibuja un circulo en l. 9. Selecciona el crculo y transfrmalo en un Clip de pelcula pulsando la tecla F8. 10. Selecciona el smbolo que acabamos de crear y muvelo a la izquierda del texto sin taparlo. 11. Selecciona el fotograma 20 de la capa Mscara y crea un nuevo fotograma clave pulsando la tecla F6. 12. Selecciona el fotograma 40 de la capa Mscara y crea un nueva fotograma clave pulsando la tecla F6. 13. Selecciona el fotograma 40 de la capa Texto y crea un nuevo fotograma pulsando la tecla F5. 14. Selecciona el fotograma 20 de la capa Mscara y desplaza el crculo hasta la derecha del texto (sin taparlo). 15. Haz clic derecho sobre cualquiera de los fotogramas entre el 1 y el 20 de la capa Mscara y selecciona Crear interpolacin Clsica 16. Repite lo mismo para los fotogramas situados entre el 20 y el 40. 17. Prueba la pelcula pulsando la combinacin de teclas CTRL + INTRO.
18.Prueba evaluativa unidad 12: Animaciones de movimiento 19. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Flash CS4 es capaz de realizar animaciones con texto de modo fcil y eficiente. a) Verdadero b) Falso 2. Las Guas de movimiento provocan que todos los objetos de su mismo fotograma realicen el movimiento que sta indica, independientemente de la relacin que exista entre las capas. a) Verdadero b) Falso 3. Una capa Gua es la mejor solucin para realizar un movimiento en lnea recta. a) Verdadero b) Falso 4. Una capa Gua es la mejor solucin para realizar un movimiento enrevesado con numerosos cambios de direccin. a) Verdadero b) Falso 5. Cul de estas 3 afirmaciones es correcta?. a) Para que las animaciones se realicen correctamente, los objetos que participen en ella debern convertirse previamente en smbolos. b) Dada la gran potencia de Flash CS4 para crear animaciones, debemos explotar esta cualidad al mximo y poner animaciones en todas las pginas webs que creemos. c) Las animaciones fotograma a fotograma son tan eficientes en cuanto a espacio y rapidez de ejecucin como las animaciones creadas con las utilidades de Flash (interpolaciones). 6. Flash necesita disponer de tantos fotogramas claves como duracin tenga la animacin de movimiento. a) Verdadero b) Falso
7. Crear animaciones fotograma a fotograma ocupa menos espacio en el archivo final que hacer una interpolacin de movimiento. a) Verdadero b) Falso 8. En las animaciones guiadas es necesario que el objeto este SIEMPRE en contacto con la lnea de gua en los fotogramas inicial y final. a) Verdadero b) Falso 9. Todos los objetos presentes en una misma capa y un mismo fotograma formarn parte de las animaciones que afecten a dicho fotograma. a) Verdadero b) Falso 10. Las interpolaciones de movimiento permiten aplicar otros efectos adems del propio movimiento, tales como cambios en los tamaos, colores etc... a) Verdadero b) Falso
Unidad 13. Animacin por Forma (I) 13.1. Interpolacin por forma Cuando lo que queramos no sea cambiar la posicin de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash CS4 nos ofrece la tcnica de la Interpolacin por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto. Realizar una interpolacin por forma, es muy semejante a crear una interpolacin de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. As como hacamos en el tema anterior, slo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el ltimo la apariencia final que queremos que tenga. Esta vez, es importante destacar que para que una Interpolacin por Forma funcione como es debido aquellos objetos que intervengan debern ser objetos vectoriales (no smbolos Flash). Debemos tener tambin dos aspectos en cuenta: 1) Separar en distintas capas los objetos fijos y los que estarn animados. 2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformar todos los objetos vectoriales del primer fotograma en aquello que haya en el ltimo fotograma de la interpolacin. Las consideraciones sobre la velocidad y el nmero de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar tambin a la interpolacin por forma y a cualquier animacin hecha con Flash. Para crear la interpolacin, una vez tengamos los fotogramas de inicio y fin de la animacin hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la opcin del men Crear interpolacin de forma. Recuerda que podemos alterar el fotograma final todo lo que queramos. Tambin podemos realizar interpolaciones de forma en varias fases de manera anloga a como lo hacamos en el tema anterior. De esta forma podemos hacer que un determinado objeto se convierta en otro antes de adoptar su forma definitiva.
Lo hemos conseguido simplemente haciendo clic con el botn derecho sobre el fotograma 10 y creando un fotograma clave (Insertar Fotograma Clave). Luego slo tenemos que borrar el objeto que aparece en el escenario y dibujar el tringulo.
Unidad 13. Animacin por Forma (II) 13.2. Transformar textos Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Aadimos as una posibilidad ms para realizar logotipos o presentaciones vistosas y transmitir informacin de manera espectacular. Recordemos que para realizar una interpolacin de forma es necesario que el objeto sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en funcin de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiramos repasado con la herramienta lpiz el contorno de cada letra. Posibilidades de esta tcnica en textos? Muchsimas, aunque puede llevar a confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transicin. Tambin es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la pelcula, porque si no lo hacemos corremos el riesgo de que la animacin parezca slo un garabato revolvindose. Una de las posibilidades es "deletrear" una palabra de manera tan vistosa como vemos arriba. Podemos comprobar como simplemente cambiando el color del objeto final, se produce una transicin tambin en el color. Observemos a su vez como cuando se forma cada letra, mantenemos su imagen el tiempo suficiente como habamos indicado que era necesario. 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 individuales. Debers ejecutar de nuevo el comando para que estas letras se separen y creen una forma.
Unidad 13. Animacin por Forma (III) 13.3. 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 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). 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. Para practicar estos conceptos realiza:
Unidad 13. Ejercicio paso a paso: Consejos de forma Ejercicio paso a paso. 1 Utiliza la Herramienta Lpiz para crear la flecha y luego el Bote de pintura para crear el degradado. 2 Pulsa con el botn derecho sobre el fotograma que contiene la flecha y elige la opcin Crear Interpolacin de 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 Consejo de forma para aadir un nuevo consejo de forma. Colcalo en una de las esquinas de la flecha y ve al fotograma 20 para colocar el consejo creado 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.
Ejercicios unidad 13: 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 abajo.
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. Nota: Utilizaremos este archivo en la siguiente unidad. 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.
Ayuda ejercicios unidad 13: Animacin por Forma Ejercicio 1: Babosa arrastrndose 1. Crea un nuevo Archivo de Flash (AS 3.0) desde el men Archivo Nuevo. 2. Utiliza la Herramienta Lpiz para crear la forma de la babosa.
3. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Crear Interpolacin de Forma. 4. 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. 5. Gurdalo con Archivo Guardar Como y llmalo babosa.fla. Ejercicio 2: Cambio de Forma y Tamao 1. Si lo has cerrado, 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. 3. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Crear Interpolacin de Forma. 4. Ve cinco fotogramas en adelante y pulsa F6. Borra la letra y escribe la siguiente. 5. Repite los pasos hasta que hayas escrito todas las letras. 6. Cambia los colores utilizando el Cubo de Pintura y la herramienta Transformacin libre para cambiar la forma. 7. Prueba evaluativa unidad 13: Animacin por Forma 9. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Para crear una Interpolacin por Forma slo necesitamos dos fotogramas clave. a) Verdadero b) Falso 2. No se puede aplicar una interpolacin de forma a un texto. a) Verdadero b) Falso 3. La forma de aplicar el cambio de forma la decide siempre Flash. a) Verdadero
b) Falso 4. Se pueden crear infinitos consejos de Forma. a) Verdadero b) Falso 5. Un objeto sin perfil no se puede Interpolar para cambiar su forma. a) Verdadero b) Falso 6. Para realizar una Interpolacin por Forma. Debemos convertir el objeto a Smbolo?. a) S, porque una Interpolacin de Forma es como una Interpolacin de Movimiento. b) No, porque slo se puede hacer con smbolos de tipo Clip. c) No, porque un smbolo no se puede modificar internamente, y la Interpolacin de Forma requiere modificar el perfil del objeto. 7. Es necesario convertir un texto en forma para poder hacer una animacin de forma sobre l. a) Verdadero b) Falso 8. Es posible aadir consejos de forma en otro sitio que no sea ni borde ni vrtice. a) Verdadero b) Falso 9. Un objeto con el perfil transparente se puede interpolar con normalidad para cambiar su forma. a) Verdadero b) Falso 10. Las pistas de forma nos permiten decidir cmo se realizar el cambio de forma. a) Verdadero b) Falso
Unidad 14. Efectos sobre animaciones (I) 14.1. 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. Con el panel de Propiedades podemos controlar los efectos y filtros, pero tambin podemos usar el Editor de movimiento para controlar gran parte de los efectos. 14.2. Efectos sobre la interpolacin 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. Si seleccionamos un fotograma y un objeto perteneciente a una interpolacin, y abrimos el panel Propiedades, desde el botn de la parte superior derecha, o bien desde el men Ventana, Propiedades, encontraremos las distintas propiedades aplicables a ese objeto en ese fotograma. Las propiedades variarn segn el tipo de interpolacin, segn puedes ver en las siguientes imgenes correspondientes a las propiedades de la interpolacin de movimiento, interpolacin guiada e interpolacin de forma:
En las interpolaciones de movimiento podemos darle un nombre de etiqueta, nos ayudar a identificarla en la barra de tiempo. Aparecer a lo largo de todos los fotogramas que la componen. Tamao: La propiedad tamao se representa por los valores W (anchura) y H (altura) y para modificarla basta colocar el cursor sobre el valor y aparecer un deslizador que
podemos mover a izquierda o derecha, tambin podemos hacer clic sobre el valor y teclear el nuevo valor.
Desde el Editor de movimiento tambin podemos modificar el tamao de un objeto desde las propiedades Escala X (anchura) y Escala Y (altura) que tienen valores en tanto por ciento.
Por ltimo, con el uso de la herramienta Tranformacin libre tambin podemos variar las dimensiones del objeto. Escala: En las interpolaciones guiadas, 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. En las interpolaciones de movimiento esta opcin est activada por defecto. 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 sta, existen muchas otras aplicaciones. Para comprenderlo mejor recomendamos hacer: Unidad 14. Ejercicio paso a paso: Acelerar movimiento Objetivo Comprender el efecto de aceleracin sobre una interpolacin de movimiento. Ejercicio paso a paso Primero vamos a crear la interpolacin sobre la que aplicaremos el efecto. 1. Crea un valo en el fotograma 1. 2. Convirtelo en un clip de pelcula pulsando la tecla F8. 3. Pulsa el botn derecho del ratn sobre el fotograma que contiene el clip de pelcula 4. Selecciona Crear interpolacin de Movimiento del men emergente. 5. Selecciona el fotograma 20 y pulsa F6. 6. Desplaza el Clip de Pelcula de ese fotograma a la parte derecha del rea de trabajo. 7. Pulsa Intro para ver la animacin sin salir del entorno de trabajo.
8. Ahora selecciona el fotograma 1 con el botn derecho y selecciona Propiedades para abrir el panel Propiedades del fotograma. (si no est ya abierto) 9. Introduce un 100 en la casilla Aceleracin (fuera), para hacer que acelere al principio y vaya frenando poco a poco. 10. Comprueba que el resultado se comporta bien. 11. Intoduce ahora un -100 en la casilla Aceleracin (dentro), para hacer que aumente progresivamente su velocidad. Ahora ya hemos comprobado los distintos efectos de aceleracin. Comprueba el mismo ejercicio con otros valores de aceleracin para observar su efecto.
Unidad 14. Efectos sobre animaciones (II) Rotacin: Esta opcin es muy interesante ya que nos da la posibilidad de aplicar una rotacin al objeto mientras se produce el movimiento. Podemos especificar el nmero de veces o vueltas que se produzca la rotacin durante los fotogramas que dure la interpolacin, o tambin podemos indicar los grados que queremos que rote el objeto.
Si se trata de una interpolacin de movimiento, nos presenta un submen Direccin, con tres opciones: Ninguno. Con esto le indicamos a Flash que no aplique rotacin alguna sobre el smbolo en movimiento. Es la opcin por defecto en las interpolaciones de movimiento. Antihorario (CCW). Permite realizar el nmero de rotaciones completas o el valor de grados en la direccin contraria a la de las agujas del reloj, Horario (CW). Realiza lo mismo que la opcin anterior pero en la direccin de las agujas del reloj (hacia la derecha). Si se trata de una interpolacin clsica, nos presenta un submen Direccin, con una opcin ms: Auto. 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 en las interpolaciones clsicas y por eso no hemos visto hasta ahora un objeto rotar en nuestras interpolaciones clsicas. Para que hubiera tenido efecto deberamos haber rotado la ltima imagen de la interpolacin. Desde el Editor de movimiento, tambin podemos especificar los grados de una rotacin.
Orientar segn trazado: Si activamos esta casilla, tanto si la interpolacin sobre la que actuamos es una interpolacin guiada, como si es de movimiento, Flash har que el smbolo tome la direccin de la gua, rotando para orientarse en la misma posicin que adopta la lnea. 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 tiempo 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 14. Efectos sobre animaciones (III) 14.3. Efectos sobre el smbolo interpolado Ya vimos en temas pasados cmo aplicar efectos sobre instancias de 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 el desplegable 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, si se trata de una interpolacin clsica, deberemos convertir a fotograma clave aquel que contenga la instancia y despus aplicar el efecto. El efecto se ir aplicando de forma gradual. De hecho, es frecuente utilizar interpolaciones clsicas nicamente para aplicar efectos.
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. 14.4. 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. 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: -46 para el primer fot. clave, 0 para el central y -46 para el del medio.
Unidad 14. Efectos sobre animaciones (IV) 14.5. 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 vistoso 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.
14.6. 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.
Ejercicios unidad 14: Efectos sobre animaciones Ejercicio 1: Efecto Rotacin
1. Crea un nuevo archivo. 2. Dibuja una rueda y haz que se desplace de un lado al otro del escenario. 3. Haz que ruede mientras hace el desplazamiento. 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 de l. 4.
1. Crea un nuevo Archivo de Flash (AS 3.0) desde el men Archivo Nuevo. 2. Dibuja la rueda con las herramientas de dibujo de Flash, y convirtela en un smbolo. 3. Haz clic con el botn derecho sobre el primer fotograma y selecciona Crear Interpolacin Clsica Pulsa F6 en el fotograma 20 y pon la rueda en el otro extremo del escenario. 4. Haz clic sobre el Fotograma 1 para seleccionarlo y ve al panel de Propiedades. En El panel que aparece selecciona el valor CW de la opcin de Rotacin para girar hacia la derecha y dar la sensacin de avance. Deja el valor por defecto de una vuelta.. 5. Ve al men Archivo Guardar Como y guarda el archivo como rueda.fla.
Ejercicio 2: Efecto Aceleracin 1. Si los has cerrado, abre el archivo rueda.fla creado en el ejercicio anterior. 2. En la lnea de tiempo, selecciona alguno de los fotogramas de la interpolacin. 3. En el panel Propiedades, introduce el valor 100 de la opcin de Aceleracin. Ejercicio 3: Orientar segn el Trazo 1. Utiliza Archivo Abrir para abrir el archivo babosa.fla. 2. Haz clic derecho sobre la capa de la interpolacin, y elige la opcin Aadir gua de movimiento clsica. 3. Crea la gua con la forma de las montaas. 4. Coloca la instancia del primer y el ltimo fotograma al principio y al final de la gua respectivamente. 5. Ahora haz clic sobre el un fotograma de la interpolacin, y en el panel Propiedades marca la casilla Orientar segn trazado. Ejercicio 4: Efecto Alfa 1. Utiliza la Herramienta Texto y escribe en el primer fotograma tu nombre. 2. Crea una nueva capa, e introduce un texto con tu apellido. 3. Convierte ambos textos en smbolos. 4. En ambas capas, crea fotogramas clave en los fotogramas 10, 20, 30 y 40. 5. En la primera capa, para el smbolo del nombre, pon a 0 el valor para el efecto Alfa de la instancia en los fotogramas 20 y 30. 6. En la segunda capa, para el smbolo del apellido, pon a 0 el valor para el efecto Alfa de la instancia en los fotogramas 1, 10 y 40.
7. Para la primera capa, haz clic derecho entre los fotogramas 10 y 19 y elige Crear interpolacin clsica. 8. Para la primera capa, haz clic derecho entre los fotogramas 30 y 39 y elige Crear interpolacin clsica. 9. Repite los pasos 8 y 9 con la segunda capa. 10. Prueba la animacin. 11. Prueba evaluativa unidad 14: Efectos sobre animaciones 13. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Se pueden aplicar efectos sobre la forma de hacer el movimiento y sobre los efectos que en l intervienen. a) Verdadero b) Falso 2. La opcin escalar permite un cambio progresivo de tamao durante el movimiento. a) Verdadero b) Falso 3. Para hacer que un objeto aparezca poco a poco ante nuestros ojos utilizaremos el efecto Tinta. a) Verdadero b) Falso 4. Un valor de Aceleracin (Borrar) de -100 hace que el objeto empiece rpido y vaya frenando poco a poco. a) Verdadero b) Falso 5. No podemos hacer que un objeto se oriente segn la direccin de la gua de movimiento que hemos creado. a) Verdadero b) Falso 6. Para hacer aparecer progesivamente un objeto podemos usar el efecto Alfa. a) Verdadero
b) Falso 7. El campo Etiqueta de fotograma ayuda a identificar la interpolacin en la barra de tiempos. a) Verdadero b) Falso 8. Para hacer aparecer progesivamente un objeto podemos usar el efecto Brillo. a) Verdadero b) Falso 9. Si en la propiedad Rotar del fotograma tenemos Auto... a) Hace que el objeto gire siempre en sentido contrario a las agujas de un reloj. b) Hace que el objeto gire en la direccin que necesite menos movimiento. c) Ninguna de las anteriores. 10. Para que una rotacin se produzca seguro... a) Debemos elegir la opcin Auto para que lo haga automticamente. b) Elegiremos CMR o CCMR. c) Elegiremos Ninguna.
Unidad 15. Generar y publicar pelculas (I) 15.1. Consideraciones sobre el tamao de las pelculas Antes de aventurarnos a publicar nuestra pelcula para que otros la vean, sobre todo 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.
Unidad 15. Generar y publicar pelculas (II) 15.2. Preloader. Cargar la Pelcula entera antes de reproducirla Un preloader se usa principalmente para evitar la carga parcial de la pelcula, mientras sta 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 "Pelcula" (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 nuestro ejemplo, esta capa tiene por lo menos dos fotogramas. En la capa "Accin" disearemos el "corazn" del preloader. Vamos a hacer que la animacin de nuestra escena de carga se ejecute repetidas veces, hasta que se haya cargado la escena que contiene la pelcula principal, mediante las acciones ActionScript 3 de Flash. Para ello abrimos el panel de Acciones. Vamos a emplear la funcin gotoAndPlay de ActionScript, que como ya comentamos nos permite ir a un fotograma determinado. Podemos escribirlo gotoAndPlay(1, "Escena") para ir al primer fotograma de la escena indicada. Podemos saber cuntos fotogramas se han cargado hasta ahora con la propiedad this.framesLoaded, y cuantos fotogramas hay en total con this. totalFrames. Conociendo estos datos, lo nico que tenemos que hacer es preguntar si los fotogramas cargados igualan a los totales . Si es que s, ya podemos avanzar hasta la siguiente escena. Y si no, podemos volver al principio de nuestro loader, lo que lo ir repitiendo en bucle. Para expresar esto en ActionScript, lo haramos as: if(this.framesLoaded==this.totalFrames) { gotoAndPlay(1, "Pelcula") } else { gotoAndPlay(1, "Cargador") } Si no entiendes exactamente el cdigo no te preocupes, lo veremos ms adelante. Lo importante ahora es el concepto. Por lo tanto, lo que har esta instruccin es reproducir la escena Cargador, y al final comprobar el estado de la carga. Si se no se ha completado, vuelve al principio del cargador, lo que har que vuelva a pasar por la instruccin. Cuando la carga est completa, iniciamos 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. En
los primeros temas de Java Script veremos como mostrar en el preloader el estado de la carga. Unidad 15. Generar y publicar pelculas (III) 15.3. 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:
Reproductor: Si queremos publicar nuestra pelcula para que sea vista con versiones anteriores de Flash, debemos seleccionar aqu la versin deseada. Versin de ActionScript: El uso de ActionScript 3 nos permitir usar las novedades relativas a objetos, clases etc... Si hemos introducido cdigo ActionScript debemos de respetar la versin elegida al crear el archivo, si no se pueden producir errores. 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. Comprimir pelcula: Comprime la pelcula al mximo posible. 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 hara que cuando otro usuario (o nosotros mismos) queramos importarla no podamos o tengamos que introducir una contrasea si se ha escogido alguna. Omitir acciones de trace: Las acciones de traza se emplean para comprobar el correcto funcionamiento de la pelcula durante la creacin de esta (durante las pruebas). Tambin se consideran trazas los comentarios que insertemos en el cdigo ActionScript. 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. Permitir depuracin: 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. Para entender mejor este concepto te recomendamos hacer el ejemplo siguiente: Unidad 15. Ejercicio paso a paso: Generar y publicar pelculas Objetivo Aprender a publicar una pelcula Flash como archivo SWF independiente, as como configurar las opciones de publicacin. Ejercicio paso a paso 1. Accedemos al men Archivo Abrir y abrimos el archivo publicacion.fla que se encuentra en la carpeta ejercicios . 2. Abrimos la biblioteca del documento mediante Ventana Biblioteca. 3. Vamos al men Archivo Configuracin de publicacin para abrir la ventana Configuracin de Publicacin. 4. Abre la pestaa Formatos y desactiva la casilla HTML, porque no vamos a utilizar la pelcula va web. 5. Abre la pestaa Flash. 6. En la barra deslizante Calidad JPEG ponemos el valor 0 para reducir la calidad al mnimo. 7. Vamos a protegerlo para que nadie lo pueda importar. Marcamos la casilla de verificacin Proteger frente a Importacin e introducimos en el campo Contrasea la palabra de paso que deseemos. 8. Pulsamos el botn Publicar. 9. Accede al directorio de Flash donde se ha exportado el archivo SWF y ejectalo.
Comprueba que la calidad de las imgenes no es buena.
10. Abrimos ahora el men Archivo Importar y seleccionamos el archivo que acabamos de publicar. 11. Comprueba que nos pide la clave para poder hacerlo. Ahora tenemos una pelcula que no podrn importar y cuyo espacio en memoria ser menor debido al menor tamao de sus bitmaps. Unidad 15. Generar y publicar pelculas (IV) 15.4. 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 cdigos 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 CS4. Flash con FSCommand: Imprescindible cuando se usen FSCommands. Permiten controilar el reproductor desde la pelcula. 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. 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.
. Unidad 15. Generar y publicar pelculas (V) 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 ActionScript.
Adems, Flash crear el cdigo Javas Script que detecte la versin de Flash y otras acciones.
De todas formas, lo ms habitual es utilizar un editor web, como Dreamweaver para crear la pgina web, y desde ah insertar el archivo SWF, por lo que ser el propio editor el que se encargue de generar este cdigo.
Ejercicios unidad 15: Generar y publicar pelculas 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. El cdigo se divide en dos partes: al principio un script que intenta reproducir el Flash utilizando Java Script. Despus entre las etiquetas <noscript></noscript> el cdigo necesario para mostrar el Flash en caso de que el script est desactivado. Cntrate en el cdigo que aparece entre AC_FL_RunContent( y ); //end AC. En cada lnea encontramos un parmetro y su valor. Intenta deducir e identificar 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. <script language="JavaScript" type="text/javascript"> AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=10,0,0,0', 'width', '550', 'height', '400', 'src', 'aulaClic', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/go/getflashplayer_es', 'align', 'middle', 'play', 'true', 'loop', 'false', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'pub', 'bgcolor', '#ffffff', 'name', 'aulaClic', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','sameDomain', 'movie', 'aulaClic', 'salign', '' ); //end AC code
Ayuda ejercicios unidad 15: Generar y publicar pelculas Solucin al ejercicio: AC_FL_RunContent( 'codebase', 'http://download...', 'width', '550', 'height', '400', 'src', 'aulaClic', 'quality', 'high', 'pluginspage', 'http://www.adobe...', 'align', 'middle', 'play', 'true', 'loop', 'false', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'pub', 'name', 'aulaClic', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','sameDomain', 'movie', 'aulaClic', 'salign', '' ); //end AC code codebase: Es la URL de la definicin del cdigo Flash. width y height son el ancho y alto de la pelcula.
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 pluginspace: Aqu se indica la pgina desde la que se puede descargar el plug-in necesario para ver la pelcula. align: Indica el lugar en el que hayamos alineado la pelcula pgina web. loop: Indica si se repetir en bucle. play : indica si se reproducir automticamente la pelcula scale: Indica si el tipo de escala. wmode: Indica el modo de ventana. devicefonts: Indica si la opcin fuente de dispositivo est activa. id: Atributo HTML que identifica el elemento. name: Es el nombre de la pelcula que hemos publicado.
Prueba evaluativa unidad 15: Generar y publicar pelculas Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Flash CS4 nos permite trabajar con total libertad, sin preocuparnos por el tamao de los objetos que dibujemos. a) Verdadero b) Falso 2. Agrupar los objetos o convertirlos en smbolos suelen conllevar un ahorro en espacio, pues Flash reutilizar los objetos en lugar de crear otros nuevos desde cero. a) Verdadero b) Falso 3. Los mapas de bits, al estar formados por bits individuales, consumen menos espacio que una imagen vectorial, con complejos clculos matemticos. a) Verdadero b) Falso 4. Si a pesar de todo, nuestra pelcula supera los 80 KB, situar un cargador o preloader puede ser una buena solucin para evitar los retardos y la mala reproduccin de la pelcula. a) Verdadero b) Falso 5. Flash permite publicar pelculas para sus distintas versiones desde la versin 1, pasando por la versin de Flash 5, hasta la actual Flash CS4. a) Verdadero b) Falso 6. Flash slo es capaz de utilizar las fuentes (tipografas) existentes en el servidor, pues no puede acceder a las del disco duro del usuario. a) Verdadero
b) Falso 7. Desde el cuadro de dilogo de Configuracin de Publicacin podemos determinar los metadatos del archivo. a) Verdadero b) Falso 8. Desde el cuadro de dilogo de Configuracin de Publicacin es posible Publicar directamente el archivo sin necesidad de ejecutar el comando Archivo Publicar. a) Verdadero b) Falso 9. Los ficheros de Flash son pblicos y resulta muy complejo evitar que otros puedan importar nuestras pelculas, ya que Flash no incluye ningn mecanismo de seguridad. a) Verdadero b) Falso 10. Las imgenes JPG insertadas en nuestra pelcula se insertan con una calidad determinada y sta no puede modificarse desde Flash. a) Verdadero b) Falso 11. Flash nos permite ocultar al usuario determinadas propiedades de la pelcula accesibles por los usuarios una vez est sta publicada, tales como la opcin de imprimir o modificar su calidad (accesibles mediante el botn derecho). a) Verdadero b) Falso 12. Flash CS4 nos ayuda considerablemente en la tarea de publicar nuestra pelcula, pues nos permite crear automticamente un fichero HTML en el que est contenida la pelcula. Tambin nos permite modificar distintas propiedades de esta publicacin, tales como la alineacin de la pelcula dentro de la pgina web, el tamao, la escala etc. a) Verdadero b) Falso
Unidad 16. Introduccin a ActionScript 3 (I) 16.1. Qu es el ActionScript? El ActionScript es el lenguaje de programacin que ha utilizado Flash desde sus comienzos, y que por supuesto, emplea Flash CS4. A grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash CS4 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 temas slo vamos a ver una pequea introduccin a ActionScript 3 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 CS4. Todo lo referente a este curso hace referencia a la versin 3 de ActionScript. Si buscas informacin sobre ActionScript 2.0, te recomendamos el curso de Flash CS3, en el que resolvemos los mismos ejemplos, pero con AS 2.0.
Caractersticas generales 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. 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. ActionScript 3 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 estos lenguajes, cada versin se acerca ms. As, la versin 3.0 utilizada en Flash CS4 es mucho ms potente y mucho ms "orientada a objetos" que su anterior versin 2.0. La sintaxis ActionScript presenta muchsimos parecidos con el Javascript o PHP; si estamos familiarizados con estos lenguajes, la sintaxis y el estilo de ActionScript nos
resultarn muy familiares. Las diferencias entre JavaScript y ActionScript las podemos encontrar en la ayuda que acompaa al Flash CS4. En la mayor parte de las ocasiones, ser necesario "programar". Flash CS4 pone a nuestra disposicin una biblioteca de funciones, clases y mtodos (de momento entenderemos esto 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, recomendamos echar un vistazo a nuestro tema bsico:
Unidad 16. Bsico: Conceptos iniciales de AS3 (I) Introduccin a la Programacin con ActionScript Si bien el objetivo de este tema NO es ensear programacin, no podemos pasar por alto que ciertos conceptos relacionados con ella deben conocerse para poder llegar a entender el ActionScript. Vamos pues a explicar algunos conceptos fundamentales, necesarios para abordar la programacin mediante ActionScript. Script: Cdigo escrito en cualquier lenguaje de programacin que realiza una tarea determinada. As por ejemplo, el cdigo ActionScript necesario para que al pulsar un botn de Flash pasemos al fotograma siguiente es un script. Variable: Vamos a explicar la interpretacin del trmino variable en programacin mediante un ejemplo sencillo. Si tenemos la expresin: x = 3; Tenemos que x es una variable que toma el valor 3. Se llama variable precisamente porque puede cambiar de valor en cualquier momento durante la ejecucin de nuestra pelcula Flash. Todos los datos que se manejan normalmente son variables (salvo aquellos constantes, por ejemplo el nmero 3). As, en un formulario de introduccin de datos personales, el nombre es una variable (de tipo cadena de caracteres o string), el apellido tambin, la direccin, el telfono etc... La primera vez que utilicemos una variable en nuestro cdigo, tenemos que definirla con la palabra reservada var, seguida del nombre que le queramos asignar, dos puntos y el tipo de datos que contendr. Y si queremos, tambin, podemos asignarle un valor inicial. Es decir, utilizaremos el siguiente formato:
var nombreVariable:TipoDato = valorInicial; El tipo de dato puede ser cualquier objeto, por ejemplo un MovieClip. Habitualmente utilizaremos el tipo String para cadenas de texto y el tipo Number para nmeros. Expresin: Conjunto de operadores, constantes, variables o acciones que permiten obtener un valor. Sentencia o instruccin: Provocan un resultado o una accin determinada y concreta. Por ejemplo, una asignacin, la llamada a una funcin, etc. Deben ir terminados por ' ; ' (punto y coma). Funcin: Una funcin es una porcin de cdigo (ActionScript en nuestro caso) que tiene un nombre determinado y que realiza una labor concreta generalmente devolviendo un determinado valor. Ejemplo, la siguiente definicin de funcin: function Incrementa(x) { return x + 1; } Realiza la funcin de tomar la variable "x" y devuelve su valor sumndole uno. Si quisiramos ejecutarla en algn lugar de nuestra pelcula, bastara con escribir: valor=Incrementa(3), siempre y cuando la definicin de la funcin (que es el cdigo mostrado arriba) est en cualquier parte de la pelcula. Esto provocara que la funcin calculase el valor 4 (3 + 1) y lo guardase en la variable valor. Accin: Flash llama Accin a funciones que l mismo ha implementado y que no requieren ser definidas para ser usadas. Basta por tanto, con escribir el nombre de la accin. Estas acciones son lo que usaremos la mayora de las veces, pues resultan sumamente fciles de usar y muy potentes. Las acciones aparecen en el Panel Acciones y se pueden insertar en nuestro cdigo con un simple clic de ratn. Por ejemplo gotoAndPlay(3); es una accin. Ahora que entendemos qu son las funciones, deberemos comprender tambin, que en alguna parte, Flash ha definido la funcin gotoAndPlay (tal y como hemos hecho nosotros anteriormente con la funcin Incrementa) y ha escrito un cdigo que provoca el efecto ya comentado. Por suerte todo esto no nos debe preocupar, Flash CS4 se encarga de todo. Nos basta con conocer cmo usarlas.
Parmetro o argumento: Un parmetro es una variable que entra o sale de una accin o funcin. Ponemos un ejemplo: Tenemos la siguiente definicin de funcin: function areaRectangulo(lado1, lado2) { return lado1*lado2; } Imaginemos que queremos calcular el rea de un rectngulo con un lado1 = 2 y un lado2 = 3, y guardarlo en la variable area. Ejecutaramos la funcin areaRectangulo del siguiente modo: area = areaRectangulo(2, 3);. Vamos a ver qu hace exactamente la funcin con los parmetros lado1 y lado2. Al ejecutar areaRectangulo(2, 3), Flash busca definiciones de funciones que se llamen areaRectangulo, enseguida encontrar la definicin que hemos escrito arriba, (que deber estar escrita en alguna parte de nuestra pelcula, en el mismo fotograma o en alguno anterior al que utilizamos). Cuando lo hace, comprueba que la funcin que ejecutamos COINCIDE con la cabecera de la definicin, esta cabecera abarca el nombre de la funcin y todo lo que venga a continuacin hasta que se cierre el parntesis. En nuestro caso, la cabecera sera areaRectangulo(lado1, lado2). Aqu viene la pregunta inminente, Coinciden?. La respuesta es S, para que coincidan DEBE coincidir el NOMBRE de la funcin y el nmero de parmetros, que sern variables o valores separados por comas. Como tenemos 2 parmetros en cada parte, todo coincide y pasa a ejecutarse la funcin. La funcin ejecutada es areaRectangulo(2, 3), por lo que lo que en realidad se ejecutar: function areaRectangulo(2, 3) { return 2*3; } Tras ejecutarse esta funcin, se calcula el rea y se devuelve (return) su valor. Como le asignbamos el valor a una variable (area = areaRectangulo(2, 3);), el valor devuelto queda almacenado en esa variable. Unidad 16. Bsico: Conceptos inciales de AS3 (II)
Programacin Orientada a Objetos (POO): ActionScript 3 es un lenguaje orientado a objetos, esto quiere decir que la informacin se organiza en grupos denominados clases. Cuando queremos emplear una clase en nuestra pelcula, usamos una instancia de ella, denominada objetos. Los objetos, y por tanto, las clases, tienen Propiedades (caractersticas, que a nivel interno son variables) y Mtodos (comportamientos, que a nivel interno son funciones). El objeto Persona tiene: o Propiedades:Nombre, edad, altura ... o Comportamientos: hablar, correr, saltar ... El objeto Clip de Pelcula tiene: o Propiedades: rotacin, anchura, altura ... o Comportamientos: reproducir, ir a un fotograma, parar, ... Evidentemente el primer objeto es meramente didctico, el segundo objeto es un objeto de Flash (salvo que las propiedades estn definidas en ingls), y probablemente el ms importante...
Los objetos los podemos encontrar tambin en el Panel Acciones, su uso es sencillo. Veamos un ejemplo: Tenemos el objeto Clip1, que es una instancia de la Clase MovieClip y por tanto, tiene sus mismas Propiedades y Mtodos. Clip1.height = 20; Con la lnea anterior, estamos diciendo a Flash que el objeto Clip1 tiene una altura de 20 (inmediatamente Flash la modificar en el fotograma en el que se encuentre). La sintaxis de Flash establece que debe existir el separador ".", no vale la pena entrar a describir el porqu. Siempre ser as, no lo olvidemos. Clip1.play(); Esta accin ejecutar el mtodo play, que pertenece a los Clips de Pelcula, provocar que se comience a ejecutar la lnea de tiempos del Clip1. Ntese que termina con (), ya que play es una funcin y todas las funciones deben llevar parntesis aunque no tengan parmetros..
Eventos. Con lo que hemos visto, ya podemos realizar algunos cambios o ejecutar instruciones en nuestras pelculas. Pero cundo? Flash suele interactuar mucho con el usuario, y est esperando que l haga algo (hacer clic, parar el ratn por encima, pulsar un botn) para ejecutar determinado cdigo. Este es el mecanismo de los eventos. Al utilizar los eventos, le decimos a nuestros objetos que estn a la escucha, para que cuando detecten determinada accin, ejecuten la funcin que le indiquemos. Por ejemplo, con el siguiente cdigo... miBoton.addEventListener(MouseEvent.MOUSE_CLICK, funcionAlHacerClick); function funcionAlHacerClick(event:MouseEvent):void { this.gotoAndPlay(15); } Le estamos diciendo al objeto miBoton que est a la escucha (.addEventListener), atento para detectar el evento MOUSE_CLICK, que se produce al hacer clic sobre l. Y le indicamos que cuando lo detecte, ejecute la funcin que hemos llamado funcionAlHacerClick, en la que hemos escrito las acciones que queremos que realice. Los eventos son fundamentales en la programacin con Action Script, y los iremos viendo en el curso.
Ya conocemos los conceptos bsicos de Flash CS4. Si pensamos en que, con slo 1 lnea podemos modificar la altura de un objeto de nuestra pelcula durante la ejecucin de la misma (y no mientras la crebamos como hasta ahora), podremos hacernos una idea de lo que nos permitir el ActionScript ... Podremos dar vida a nuestras animaciones y conseguir una interactividad total con el usuario. Podremos conseguir una pelcula completamente multimedia e interactiva.
El conocimiento y comprensin de estos conceptos no es un requisito obligado para comenzar a programar con ActionScript, programar por "copia y pega" es una prctica muy comn en este tipo de lenguajes. En este curso recomendamos saber lo que se est haciendo en todo momento y conocer bien qu es cada cosa, y pensamos que hacer un
esfuerzo inicial nos gratificar constantemente durante nuestro aprendizaje de ActionScript, pues con todo lo anterior claro y un poco de trabajo, pronto pasaremos a ser programadores expertos.
Unidad 16. Introduccin a ActionScript 3 (II) 16.2. El Panel Acciones
En Flash CS4, el Panel Acciones sirve para programar scripts con ActionScript, por tanto lo aqu introduzcamos le afectar de menor o mayor medida. 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 (en el nombre de la pestaa de la zona de la derecha y en la zona izquierda en el apartado Seleccin actual).
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. En la parte derecha tenemos el espacio para colocar nuestro script, el cdigo de ActionScript. El cdigo lo podemos insertar en cualquier fotograma clave, aunque lo ms "limpio" es crear una capa para el cdigo.
El Panel Acciones de Flash CS4, no tiene nicamente un modo de edicin. Podemos utilizar el , en el que en vez de escribir directamente, seleccionamos los distintos elementos desde listas. Puede resultar til al principio, cuando an no estamos familiarizados, pero nos limita mucho al escribir. Cuando ya tenemos cierta soltura nos encontraremos ms cmodos con el Asistente de escript desactivado, lo que nos permite escribir directamente el cdigo. Este ltimo modo nos dar ms libertad y agilidad si sabemos qu hacer, pero tambin es ms fcil que cometamos errores. En la parte superior encontramos herramientas que nos ayudarn. Veamos las ms tiles: Buscar: Busca un texto en el cdigo. til, por ejemplo, si queremos buscar en todos los sitios que empleamos un objeto. Revisar sintaxis. Comprobar errores en la sintaxis, normalmente que hayamos olvidado cerrar parntesis o corchetes. Si encuentra alguno, nos mostrar un mensaje como el siguiente:
En el panel ERRORES DE COMPILADOR se mostrarn los errores indicando la capa, fotograma y lnea. Podemos ir al lugar del error haciendo doble clic. Formato automtico. Al escribir en cualquier lenguaje, es muy importante hacerlo ordenadamente y con el formato adecuado. Este botn lo hace automticamente, siempre que no haya errores de sintaxis. Cuando tenemos mucho cdigo, nos resultar ms cmodo si contraemos ciertas partes. Con estos botones, podemos, de izquierda a derecha, contraer el espacio entre llaves, contraer la seleccin o expandir todo. Cuando estamos programando, es frecuente que queramos comentar un fragmento de cdigo apra que no se ejecute o que queramos aadir comentarios descriptivos. Con estos botones, podemos comentar el texto seleccionado, o descomentarlo.
Aunque la sintaxis sea correcta, puede que que al probar nuestra pelcula se sigan produciendo errores (errores de compilacin). Por ejemplo porque accedemos a una propiedad de un objeto que no existe, o nos hemos equivocado al escribir el nombre de una variable. Estos errores tambin nos aparecern en el panel Errores de compilador. En este caso, fjate en el nmero de lnea del error, ya que al hacer doble clic, a veces no va al lugar correcto si el cdigo tiene comentarios. Para entender mejor este concepto te recomendamos hacer el ejemplo siguiente: Unidad 16. Ejercicio paso a paso: Cdigo en el panel Acciones Ejercicio paso a paso. 1. Sobre un nuevo archivo de Flash AS 3 dibuja un rectngulo y convirtelo en un botn pulsando la tecla F8. 2. En el panel de propiedades, asgnale botonInicio como nombre de instancia. 3. Crea una nueva capa para poder insertar nuestro Cdigo de ActionScript. 4. Selecciona el fotograma 1 y abre el panel Acciones mediante Ventana Acciones. 5. Ahora escribe en el panel de ActionScript lo siguiente: 6. //Detenemos la pelcula 7. this.stop(); 8. //Definimos la funcin que reproduce la pelcula 9. function reproducirPelicula(event:MouseEvent):void { 10. this.play(); 11. } 12. //Indicamos que al hacer clic sobre el botn, se llame a la 13. //funcin anterior botonInicio.addEventListener(MouseEvent.CLICK, reproducirPelicula); (botonInicio es el nombre de instancia del botn y this es el nombre especial, que significa el objeto actual). 14. En este momento has hecho que la pelcula se detenga al llegar al fotograma 1, es decir, nada ms empezar, y comience cuando se pulse el botn.
15. Para verlo, en la capa del rectngulo crea un fotograma clave (F6) sobre el fotograma 2. 16. Mueve el rectngulo. 17. En el panel de acciones, sin tener el rectngulo seleccionado, escribe stop();. 18. Si pruebas la pelcula (Ctrl + Intro), vers que se detiene. Al hacer clic sobre el botn, avanzas hasta el fotograma 2 donde se vuelve a detener. Si vuelves a hacer clic, vuelves al fotograma 1 y se detiene de nuevo. 19. Unidad 16. Introduccin a ActionScript 3 (III) 20. 16.3. Los operadores y expresiones 21. Entrando un poco ms a fondo en la sintaxis y el manejo del ActionScript, vamos a comenzar hablando de los operadores y de las expresiones, por ser la parte ms elemental de una accin de ActionScript (y de cualquier otro lenguaje de programacin). 22. 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. 23. Por ejemplo: 24. x = 3 ; --> Es una expresin cuyo resultado ser asignarle a la variable ' x ' el valor 3 (que es una constante). A partir de este punto, la variable x vale 3. 25. 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 8 a y. Tambin se puede considerar como asignar a y el valor de la expresin 5 + x 26. 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 Elementos de lenguaje Operadores. Vamos a clasificar los operadores tal y cmo lo hace Flash. 27. Operadores Aritmticos 28. Son los operadores empleados en operaciones matemticas. Operador Descripcin Ejemplo + Suma 5 + 5 = 10 - Resta 5 - 5 = 0 * Multiplicacin 5 * 5 = 25 / Divisin 5 / 5 = 1 % Resto o Mdulo 10%8 = 2 ++ Incremento. Suma 1 al valor valor++ equivaldra a valor = valor + 1 -- Decremento. Resta 1 al valor valor-- equivaldra a valor = valor - 1
29. 30. Operadores de Asignacin 31. Asigna el valor de una variable. Operador Descripcin Ejemplo = Asigna a la variable de la izquierda el valor de la derecha variable vale 3; variable = 5; variable vale 5; += Suma con asignacin. Le aade a la variable el valor de la derecha. variable vale 3; variable += 5; variable vale 8; -= Resta con asignacin. Le resta el valor de la derecha. variable vale 3; variable -= 5; variable vale -2; *= Multiplicacin con asignacin. variable vale 3; variable *= 5; variable vale 15; /= Divisin con asignacin variable vale 15; variable /= 5; variable vale 3; 32. 33. Operadores de Comparacin 34. Empleados en expresiones decondicionales, devuelven un valor lgico, verdadero (TRUE o 1) si la comparacin es cierta, o falso (FALSE o 0) si no lo es. Operador Descripcin Ejemplo > Mayor que 6 > 5 es verdadero. < Menor que 6 < 5 es falso. >= Mayor o igual que 6 >= 5 es verdadero. <= Menor o igual que 6 >= 6 es verdadero. == Igual 'hola' == 'hola' es verdadero. != Distinto 'hola' != 'hola' es verdadero.
Unidad 16. Introduccin a ActionScript 3 (IV) Operadores lgicos. Evalan valores lgicos. Normalmente se emplean para comparar dos expresiones con operadores relacionales, y devuelve verdadero o falso.
Operador Descripcin Ejemplo && And (Y) Devuelve verdadero si los dos valores son verdaderos (6 > 5) && (1==1) devuelve verdadero (6 > 5) && (1==0) devuelve falso || Or (O) Devuelve verdadero si alguno de los valores es verdadero (6 > 5) || (1==1) devuelve verdadero (6 > 5) || (1==0) devuelve verdadero (6 > 6) || (1==0) devuelve falso ! Not (Negado) Devuelve verdadero si el valor era falso, y al revs. !(9 > 2) devuelve falso !(9 ==9) devuelve falso 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. 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 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". Orden de precedencia Cuando en una expresin se combinan varios operadores, el orden en que se ejecutan puede variar el resultado de la expresin, por eso es muy importante saber en qu orden
se ejecutarn. El orden no es aleatorio sino que sigue unas reglas de precedencia al igual que en una operacin matemtica. Primero se evalan los operadores de dentro de los parntesis. Cuando dos operadores estn al mismo nivel, unos operadores tienen preferencia con respecto a otros, y estos se calculan primero. En el caso de que tengan la misma preferencia, se calcularn de izquierda a derecha. En la siguiente tabla, vemos el orden de precedencia, de mayor a menor, se ejecutan primero los de mayor orden. Orden de precedencia Negacin (!) / Incremento (++) / Decremento (--) Multiplicacin (*) / Divisin (/) / Resto (%) Suma (+) / Resta (-) Relacionales mayor - menor (>, <, >=, <=) Igualdad (==) / Desigualdad (!=) And lgico (&&) Or lgico (||) Asignacin (=, +=, -=...) Otros Elementos del lenguaje ( ) : Parntesis. Sirven, como es de esperar, para agrupar trminos y dar preferencias en las operaciones (al igual que en matemticas). Tambin se usa, como ya vimos, para pasar parmetros a funciones o acciones. " " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de caracteres. 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. //: Comentario de lnea. Indica que el texto a partir de ah, y en esa lnea, es un comentario, y no se ejecutar como cdigo. /* ....... */: Comentario de bloque. Cualquier texto de una o ms lneas encerrado entre estos caracteres es un comentario, y no se ejecutar como cdigo. Unidad 16. Introduccin a ActionScript 3 (V)
16.4. Los Objetos Los Objetos, como ya hemos visto en el tema bsico, los objetos son instancias de una determinada clase. Esto es, son representantes de una clase ya definida. Cada objeto tiene las propiedades y mtodos propios de la clase, y normalmente son independientes unos de otros. 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 CS4. 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), 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. Podemos encontrar una lista con todas las propiedades, mtodos y eventos de un objeto en el panel Acciones. Objeto "Button" (Botn) Los objetos de tipo Botn es un tipo de MovieClip especialmente pensado para que el usuario interacte con l, permitindonos diferenciar entre sus estados, y crear una apariencia para cada uno. 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 independiente 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). Realmente, toda nuestra pelcula es un MovieClip. Objeto "DisplayObject" (Objeto de visualizacin) Esta clase engloba a todos los objetos que podemos ver en nuestra pelcula, como los Clips de pelcula y botones, y definde las propiedades y mtodos comunes para todos ellos. Objeto "Sound" (Sonido) y SoundChanel (Canal de 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... Utilizando el canal de sonido, podremos aprarlo, ajustar el volumen, etc. Podramos, por ejemplo, crear un objeto de tipo sonido y despus hacer que al pulsar un botn suene. (Ms adelante 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 matemticas 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... Objeto "Loader" (Cargador) y Objeto "URLLoader" (Cargador de informacin) Los objetos Loader nos permitirn cargar archivos para mostrarlos (imgenes, archivos swf, etc...) en nuestra pelcula, mientras que los objetos URLLoader nos permitirn cargar informacin de archivos (archivos de texto, XML, pginas web...).
Unidad 16. Introduccin a ActionScript 3 (VI) 16.5. Las Acciones - Mtodos comunes Flash CS4 llama acciones a lo referente al cdigo ActionScript, lo que nos permite dar comportamientos a los objetos. Estas acciones son funciones predefinidas de ActionScript, es decir: Flash CS4 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. Por supuesto, cuando tengamos ms conimientos, veremos que no es dificil completar estas acciones ya creadas con las nuestras propias.
Explicaremos las Acciones ms importantes, y a medida que avancemos en el curso, aadiremos algunas ms. Para una referencia ms completa, recomendamos mirar la ayuda del programa. Las acciones son mtodos de los objetos (funciones internas a estos), por lo que no todas estn disponibles para todos los objetos. 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... Estas acciones son mtodos de la clase MovieClip. Podemos aplicarlas a cualquier MovieClip de nuestra pelcula, siguiendo el siguiente formato: nombreMovieClip.accion();. Si escribimos la funcin directamente, es decir, si no indicamos el objeto, estamos haciendo referencia a la pelcula general. Veamos las ms importantes para entenderlas mejor: gotoAndPlay: Esta accin ser, probablemente la que ms usemos durante la realizacin de nuestras 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. Sintaxis: gotoAndPlay(escena, fotograma): o escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles. o fotograma: Nmero o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre (una etiqueta), debe ir entre comillas dobles, si es un nmero, no. Ejemplo: miClip.gotoAndPlay("Escena2", 7); Esta accin lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2" del MovieClip con el nombre de instancia miClip. play: Da comienzo a la reproduccin de la pelcula o la contina desde el punto detenido. Sintaxis: play(); No tiene Parmetros. Ejemplo: this.play(); Inicia la reproduccin del objeto actual.
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.. Sintaxis: stop(); No tiene Parmetros. Unidad 16. Introduccin a ActionScript 3 (VII) 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 Asistente de Script (sino estbamos ya) e insertarla, nos aparecer una pestaa con los posibles comandos que admite. Sirve para interactuar con la aplicacin que reproduce la pelcula, por ejemplo Flash Player o el navegador web, como IE o Firefox. Veamos esos comandos: fullscreen (true o false): Si se activa pone nuestra pelcula a pantalla completa. Muy til para presentaciones en CD-Rom, por ejemplo. allowscale (true o false): 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. showmenu (true o false): 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 (true o false): Sirve para detectar las pulsaciones de todas las teclas durante la reproduccin de nuestras pelculas. exec (ruta de la aplicacin): Ejecuta una aplicacin desde el reproductor. quit (ninguno): Cierra el reproductor Flash. Todas estas alternativas, comparten modo de uso, vemoslo: Sintaxis: fscommand(comando, [argumentos]) comando: El comando a ejecutar (fullscreen, allowscale, etc...) argumentos: En la mayora de los casos debemos escribir true o false, segn queramos desactivar la opcin o activarla. Por ejemplo, en el caso del comando quit lo dejaremos vaco. Ejemplo: fscommand("fullscreen", "true"); -> Activa la pantalla completa. navigateToURL() : Esta accin se emplea para abrir el navegador web e ir a la pgina indicada. Sintaxis: navigateToURL(url , [ventana]);
url: Direccin web a la que queremos acceder (se abrir una ventana). Este parmetro es un objeto del tipo URLRequest. Si queremos utilizar una direccin como cadena de texto, podemos hacerlo escribiendo new URLRequest("http://www.direccion.coms"). ventana: Parmetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...). Ejemplo: navigateToURL(new URLRequest("http://www.escueladeingenieros.com"), "_blank"); --> Abre la web de escueladeingenieros en una ventana nueva. load(): Este mtodo nos permite cargar nuevas pelculas Flash o imgenes en nuestra pelcula de forma dinmica (la pelcula se cargar cuando se lo indiquemos, y no antes), en un objeto de la clase Loader, o cargar informacin en un objeto URLLoader. Para utilizarlo, primero tenemos que crear un objeto de este tipo. Sintaxis: objetoCargador.load(direccion:URLRequest, [contexto]); direccion: Direccin absoluta o relativa donde est situada la pelcula SWF o la imagen a cargar. Es un objeto URLRequest, como en el caso de navigateToURL(). contexto: Es un parmetro opcional, en el que se indica algunas propiedades ms avanzadas que no veremos en este curso. Ejemplo: var cargadorPeli:Loader = new Loader(); -> Creamos un objeto Loader donde cargar el archivo. cargadorPeli:Loader.load(new URLRequest("archivo.swf"));-> LLamamos al mtodo load() para que cargue el archivo indicado. Nota: Cargamos el archivo en nuestra pelcula, pero no lo mostramos. Para verlo, tenemos que aadir el cargador a la lista de visualizacin, como ya veremos, por ejemplo con addChild(cargadorPeli);. 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 algunas Acciones, Cmo indicarle a Flash que "si la variable x = 3, entonces vaya al fotograma 5, y si no, 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 "si no ...", nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa una condicin) {haz esto} si no {haz lo otro}" Veamos antes que nada su sintaxis para comprenderlo mejor: Sintaxis: if (condicin) {sentencia_si_se_cumple; } else {sentencias_si_no; } if: Indica que accin que viene a continuacin entre parntesis es una condicin.
condicion: Indica una condicin que debe cumplirse, es decir, 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. La condicin siempre debe de ir entre parntesis. sentencia_si_se_cumple;: Conjunto de acciones que sucedern si la condicin se evala como verdadera. Estas sentencias deben de ir entre llaves. Podemos poner el bloque de cdigo que queramos: varias lenas, objetos, otros if... else: Especifica la alternativa si condicin se evala a falsa. Es optativo. Si no existe, y no se cumple la condicin, no se har nada, pues no lo hemos especificado. sentencias_si_no; Conjunto de acciones que sucedern si la condicin se evala como falsa. Deben incluirse entre llaves. Ejemplo: if (x == 2) {miClip.gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 6 de miClip, si no, 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.
Aunque if es la ms utilizada, existen otras estructuras de control, como bucles, que podemos emplear en nuestro cdigo. Puedes verlas en este avanzado:
Unidad 16. Avanzado: Estructuras de control (I) Sentencia IF [ELSE] La sentencia If evala una condicin, expresada entre parntesis ( ). Si esta se cumple, ejecuta el bloque de instrucciones que tiene entre llaves { }. if (condicin) { bloque de instrucciones; }
Tambin podemos indicar un bloque de instrucciones, con la palabra else, que se ejecutar si no se cumple la instruccin. if (condicin) { bloque de instrucciones si se cumple; } else { bloque de instrucciones si nos e cumple; } Podemos poner varios else, con otras condiciones entre parntesis. Se irn evaluando todas las condiciones hasta encontrar la primera cierta. Si una se cumple, se ejecutarn slo esas instrucciones, aunque hubiesen otras condiciones ciertas. Si no se ha cumplido ninguna, se ejecutar el ltimo else, si no tiene condicin. if (condicin1) { bloque de instrucciones si se cumple condicin1; } else if (condicin2) { bloque de instrucciones si se cumple condicin2; } else if (condicin3) { bloque de instrucciones si se cumple condicin3; } else { bloque de instrucciones si no se ha cumplido ninguna;
} Por ejemplo: if (nota >= 0 && nota < 5) { return 'Suspenso'; } else if (nota >= 5 && nota < 6) { return 'Suficiente'; } else if (nota >= 6 && nota < 7) { return 'Bien';
} else if (nota >= 7 && nota < 9) { return 'Notable'; } else if (nota >= 9 && nota <= 10) { return 'Sobresaliente'; } else { return 'La nota no es vlida. Tiene que estar entre 0 y 10';
} Las sentencias If se pueden anidar, siempre que una quede completamente dentro de otra. Por ejemplo: if (condicin1) { if (condicin2) { si se cumple condicin 1 y condicin2; } else { si se cumple condicin 1 pero no condicin2; } } else { si no se cumple condicin1 } Cuando se emplea la sentencia If para asignar un valor a una variable, se suele utilizar la siguiente estructura, ms compacta: variable = (condicin) ? valor_si_se_cumple : valor_si_no; Por ejemplo: calificacion = (nota < 5) ? 'Suspenso' : 'Aprobado'; La sentencia SWITCH
De forma parecida al If se comporta la sentencia Switch. Se indica entre parntesis una variable o expresin, y se compara su valor con cada valor de case. Se ejecutar el cdigo de la primera coincidencia encontrada. Si no encuentra ninguna, se ejecuta el cdigo de default. switch(expresion) { case valor1: instrucciones si coincide; break; case valor2: instrucciones si coincide; break; default: instrucciones si no coincide ninguna; } Por ejemplo: function paginaFlores(categoria){ switch(categoria) { case "silvestres": return "silvestres.html"; break; case "ornamentales": return "ornamentales.html"; break; case "exticas": return "exoticas.html"; break; case "plantas": return "palntas.html"; break;;
default: alert('No existe esa categora'); return "index.html"; }
} A la funcin anterior, se le pasa como parmetro el nombre de una categora, y busca en el Switch una coincidencia con el parmetro para devolver la pgina de la categora. Si no encunetra ninguna coincidencia, muestra un mensaje y devuelve la pgina de inicio. Unidad 16. Avanzado: Estructuras de control (II) El bucle WHILE Los bucles son estructuras fundamentales en programacin, ya que permiten repetir una instruccin un nmero determinado de veces, o hasta que se cumpla una determinada condicin (o deje de cumplirse). En bucle While, evala una condicin. Si se cumple, ejecuta su bloque de instrucciones, y vuelve a evaluar la condicin. Si se cumple, vuelve a ejecutar las instrucciones, y as sucesivamente mientras que la condicin se cumpla. while (condicin) {
bloque de sentencias; } Por ejemplo, el siguiente bucle mostrara 5 mensajes. La variable i inicialmente vale 0. En cada vuelta del bucle, se comprueba si es menor de 5. Si lo es, se incrementa en 1 en la primera instruccin (recuerda que i++ equivale a i+=1, que equivale a i=i+1), se muestra el mensaje en la segunda, y vuelve a comenzar el ciclo. Cuando i sea 5, mostrar el quinto mensaje, y en la siguiente comprobacin, la condicin ser falsa. var i:Number = 1; while (i <= 5) {
trace('Mensaje nmero ' + i); i++; } El bucle While se puede expresar al revs, para que primero ejecute las instruciones, y despus evale la condicin. Esto asegura que por lo menos se ejecuten las instrucciones una vez, y se repitan mientras se cumpla la condicin. Su sintaxis es: do { bloque de sentencias; } while (condicin) El bucle FOR El bucle FOR se emplea normalmente cuando necesitamos un contador que vaya tomando valores siguiendo una progresin, por ejemplo para realizar una repeticin un nmero determinado de veces. Se define con un valor inicial para la variable que acta como contador, la condicin que se ha de cumplir para que el bucle se repita, y la actualizacin de la variable (normalmente un incremento). Estos tres parmetros, se separan por punto y coma (;). for (valor_inicial; condicin; actualizacin) { bloque de sentencias; } El orden de ejecucin sera: asignar el valor inicial, evaluar la condicin, si se cumple, ejecutar las sentencias, actualizar la variable, evaluar la condcin, si se cumple ejecutar las sentencias, actualizar la variable, etc... El mismo ejemplo que hemos utilizado con el bucle While para mostrar 5 mensajes, lo podemos expresar con un For como: for (i=1; i<=5; i++) {
alert('Mensaje nmero ' + i); } Una variante del For es la estructura For .. In, que nos permite recorrer los elementos de un array o de un objeto. for (variable in objeto) { bloque de sentencias; } Si lo utilizamos con un array, lo que har el bucle, es que para cada vuelta, variable tomar el valor de un elemento del array, comenzando por el primero, y se repetir una vez para cada uno. Unidad 16. Introduccin a ActionScript 3 (VIII) 16.6. Propiedades de los objetos de visualizacin
Los Mtodos y Propiedades suelen ser especficos de cada objeto, y su estudio requerira un nuevo curso completo, (recomendamos consultar la ayuda incorporada en el Flash CS4 cuando surjan dudas), pero hay bastantes propiedades de los objetos que son comunes a muchos de ellos. Vamos a ver las ms utilizadas, que afectan a los objetos de visualizacin, que son con los que trabajaremos habitualmente. Hay que entender que las clases se heredan. Es decir, una clase genrica, tiene subclases ms concretas. Las sublaceses, tienen todos los mtodos y propiedades de la clase de la que heredan, y adems agregan sus propios mtodos y funciones. Los objetos que se visualizan en Flash, pertenecen a la clase DisplayObject. A su vez, los clips de pelcula pertenecen a la clase MovieClip, que es una subclase de la anterior. Por tanto, todos los MovieClip tendrn los mtodos y propiedades de DisplayObject, pero no al revs. Para usar las propiedades, se debe colocar el nombre de la instancia del objeto seguido de un punto (.) y despus la propiedad y su valor (objeto.propiedad = valor). Algunas propiedades se pueden escribir sin el nombre del objeto al que hacen referencia delante, en ese caso, harn referencia a la pelcula principal, que tambin es un MovieClip, aunque en este caso es recomendable utilizar la palabra reservada this.
Propiedades de DisplayObject, comunes a todos los objetos que se visualizan. alpha Hace referencia a la opacidad del objeto al que afecte. La opacidad se puede definir como la no-transparencia. De modo que un 100% de transparencia equivale a un 0 de opacidad, o a un 0 de alpha. height Devuelve o establece 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 o establece la anchura. visible Determina si el objeto est o no visible en nuestra pelcula. Cuando vale 1 o True, lo est, cuando vale 0 o False, 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 o establecemos las coordenadas del objeto respecto del eje de las X (horizontal). 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 Y (vertical). Sirve para averiguar la posicin o para asignarla de forma dinmica (durante la ejecucin de nuestra pelcula Flash). rotation Con esta propiedad obtenemos o establecemos el giro del objeto, su rotacin, expresado en grados. name Con esta propiedad obtenemos o establecemos el nombre de la instancia.
Unidad 16. Introduccin a ActionScript 3 (IX) Propiedades de MovieClip. framesloaded Slo lectura. 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
Slo lectura. 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 cmoutilizar estas propiedades). currentFrame Slo lectura. Indica el nmero de frame en el que se encuentra la cabeza de reproduccin del MovieClip.
Veremos un ejemplo para utilizar ActionScript y referirnos a las propiedades de los smbolos de nuestras pelculas. Creamos dos rectngulos, y los convertimos a smbolos, uno como botn y otro como clip de pelcula. 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 el nombre. Por ejemplo boton_reducir para el botn y rectngulo para el clip. Los objetos estarn listos para ser tratados. Vamos al panel de acciones, y escribimos el siguiente cdigo, para que al pulsar el botn, el clip del rectngulo reduzca su tamao a la mitad. boton_reducir.addEventListener(MouseEvent.CLICK, encogerRectangulo);
function encogerRectangulo(event):void { rectangulo.height = rectangulo.height/2; rectangulo.width = rectangulo.width/2;
} Como veremos ms adelante, indicamos al botn que cuando hagan clic, llame a la funcin encogerRectangulo. Esta funcin, lee el valor de las propiedades alto y ancho del clip, las divide entre dos, y se las vuelve a asignar. Con esto, reduce el tamao a la mitad.
Prueba evaluativa unidad 16: Introduccin a ActionScript 3 Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Para poder comenzar a programar con ActionScript, es necesario conocerlo en profundidad. a) Verdadero b) Falso 2. Todo el cdigo relacionado con la insercin de cdigo ActionScript se lleva a cabo desde el Panel Acciones. a) Verdadero
b) Falso 3. Dado que Flash CS4 ha eliminado el Modo Asistente de Script, ahora slo se puede programar a mano, sin la ayuda de las funciones que Flash ofreca en su versin anterior. a) Verdadero b) Falso 4. Flash pone a nuestra disposicin una enorme cantidad de Acciones, propiedades y mtodos predefinidos, que convierten la programacin con ActionScript en un trabajo rpido y cmodo. a) Verdadero b) Falso 5. Cul de estas Acciones NO tendra ningn efecto nunca?. a) miClip.gotoAndPlay(15); b) miClip.goto(15); c) miClip.play(); d) miClip.gotoAndPlay("Fotograma15"); 6. Suponiendo que tenemos 15 fotogramas con contenidos distintos y slo contiene cdigo ActionScript el fotograma 1 Qu suceder si el cdigo existente en el fotograma 1 es ste?. gotoAndPlay(15); goto("ae"2313"asd"); Nota: Sabemos que el cdigo de la segunda lnea es ERRNEO y que Flash va a detectar ese error. a) Que la pelcula ir del fotograma 1 al 15 directamente (tal y como indica la accin "gotoAndPlay(15)" ignorando la segunda lnea del cdigo, pues contiene un error. b) Que la pelcula se detendr en el fotograma 1, pues al encontrar un error en dicho fotograma no dejar que contine la pelcula. c) Que la pelcula ignorar todo el cdigo existente en el fotograma 1 (por haber un error en l) y pasar del fotograma 1 al 2, luego al 3 y as sucesivamente ... 7. El operador ms-igual (+=) es un operador... a) Aritmtico. b) De asignacin. c) Este operador no existe. 8. La versin 3 de ActionScript es una novedad de la versin CS4.
a) Falso b) Veradero 9. El smbolo = es un operador de comparacin que comprueba la igualdad. a) Verdadero b) Falso 10. En la accin if la condicin se tiene que escribir entre parntesis. a) Siempre b) Nunca c) Como se quiera, a no ser que tengamos varias condiciones y queramos cambiar el orden de evaluacin de las mismas.
Unidad 17. Ejemplos de ActionScript 3.0 (I) 17.1. Ejemplos de uso del cdigo ActionScript Vamos a mostrar los usos ms caractersticos de cdigo ActionScript en los diferentes objetos existentes en Flash CS4. De este modo lo comprenderemos mejor y porqu no, nos ahorraremos trabajo al tener ya hechos aqu muchos de los cdigos que usaremos en nuestras pelculas. Mostraremos el cdigo y a continuacin, una explicacin del mismo. Algunas cosas que debemos de tener en cuenta si estamos familiarizados con la programacin en ActionScript 2, es que con ActionScript 3.0 no podemos utilizar: 1. alert() 2. La forma de tratar eventos, como on (event){}, onClipEvent(event){}, object.onEvent = function(){} , addListener , etc. La forma de tratarlos ahora es agregando un escuchador al objeto, con el mtodo addEventListener, indicando el evento, y una nica funcin de escucha.
3. Guiones bajos ( _ ) antes del nombre de las propiedades. 4. Variables globales (_global). 5. _root y _parent para acceder a elementos superiores. 17.2. Cdigo ActionScript para Botones Los Botones (objeto Button para Flash CS4) 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. Para tener el cdigo organizado, es mejor crear una nueva capa e insertarlo ah. Veamos algunos de ellos: import flash.events.MouseEvent;
function funcionAlHacerClick(event:MouseEvent):void { this.gotoAndPlay(15); } Esta accin provoca que al hacer clic en el botn vayamos directamente al Fotograma nmero 15 de la pelcula. Utiliza la sentencia import para especificar el nombre completo de la clase, de modo que el compilador de ActionScript sepa dnde encontrarlo. En este momento queremos importar la clase MouseEvent, le especificamos la clase de flash que debe importar: import flash.events.MouseEvent; La segunda lnea indicamos qu tiene que suceder (el evento) para que se realice la funcin que indicamos "funcionAlHacerClick". En la tercera lnea ya indicamos nuestra funcin y dentro escribimos lo que queremos que pase al hacer clic en el botn. import flash.events.*;
import flash.net.*; miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion); var miURL:URLRequest = new URLRequest("http://www.escueladeingenieros.com"); function miFuncion(event:MouseEvent):void { navigateToURL(miURL, "_blank"); } Esta accin provoca que al pulsar un botn se abra una nueva pgina web en nuestro navegador por defecto y nos muestre la pgina www.escueladeingenieros.com La primera lnea, la segunda y la tercera tienen la misma funcin que en el caso anterior La cuarta lnea creamos una variable nueva para pasarle la web a la cual queremos que nos lleve al pulsar el botn. import flash.events.*; miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion); function miFuncion(event:MouseEvent):void { 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 y la segunda tienen la misma funcin que en el caso anterior En la tercera lnea definimos la funcin y podemos ver la propiedad .width (anchura), vemos que hay un operador de asignacin ( = ), luego deducimos que vamos a asignar una anchura 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.
Unidad 17. Ejemplos de ActionScript 3.0 (II) 17.3. Cdigo ActionScript para Clips de pelcula Los Clips de Pelcula (objeto MovieClip) son pelculas dentro de pelculas. Pueden tener cdigo AS dentro de s mismos, 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 algn evento de clip asociado (Load, KeyDown etc) que determine cundo se ejecutar este cdigo (al cargarse el clip, al pulsar alguna tecla ...) import flash.events.*; miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion); function miFuncion(event:MouseEvent):void { r1.gotoAndPlay(2); } 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. Las primeras lneas son las comentadas anteriormente. Partimos de una pelcula con 2 fotogramas distintos. En el primer fotograma estn el botn y el clip de pelcula (r1) correspondientes. El clip de pelcula tiene en su lnea de tiempos una animacin, inicialmente detenida. Veamos que pasa si se accede a su fotograma 2. En el segundo fotograma no nos importa lo que haya porque la accin situada a la izquierda no nos llevar hasta all. La cabeza lectora de la pelcula principal es independiente. 17.4. Sonidos con ActionScript 3 Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash CS4 los sonidos tambin son objetos y podemos manejarlos usando adecuadamente ActionScript. Veamos unos cuantos cdigos muy comunes y un completo ejemplo de cmo usarlos: //Cdigo 1
var req:URLRequest = new URLRequest("sonido.mp3"); var musica:Sound = new Sound(req); var canal:SoundChannel = new SoundChannel(); sonido.mp3 es el nombre del archivo de sonido que se va a cargar, seria aqu donde deberamos sustituir ste y poner el nombre del sonido que queramos nosotros, y deber encontrarse en el mismo directorio que se encuentre el archivo Flash que estamos creando, o indicar la ruta completa. En musica, que es un objeto Sound, almacenamos el sonido. Para controlarlo, utilizaremos canal, un objeto SoundChanel. // Cdigo 2
canal.stop(); Este cdigo detiene el sonido que se est reproduciendo por el canal de sonido canal. // Cdigo 3
canal.stop(); canal = musica.play(0,99); La primera lnea detiene el sonido, como hemos visto antes. La segunda, provoca que el sonido msica comience a reproducirse (play) 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). Si ponemos slo musica.play();, se reproducir desde el principio y slo una vez, como vemos en el siguiente cdigo: // Cdigo 4
canal.stop(); canal = musica.play();
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
Unidad 17. Ejemplos de ActionScript 3.0 (III) 17.5. 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 mtodo son muchas, generar claves secretas, passwords, nmeros de lotera etc...
x = Math.round(4.3); El Mtodo "round" REDONDEA el parmetro introducido eliminando la parte decimal del mismo. Aunque nuestra configuracin utilice la coma para separar los decimales, en Flash debemos utilizar el punto. 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 que no tenemos porqu implementar. Basta buscarlos en el manual y usarlos. 17.6. 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 hemos insertado 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 explicar el cdigo que escribamos y para eso lo usaremos a continuacin. Les cambiaremos el color para aclarar que es un comentario. Evidentemente no son necesarios en el cdigo que finalmente insertemos en nuestra pelcula. Este es el cdigo que insertaremos: /* FOTOGRAMA 1 */ var bytes_totales:Number; /*Estas son las variable que iremos utilizando*/ var bytes_cargados:Number; var porcentaje:Number;
bytes_totales = this.getBytesTotal(); /* Hallamos el tamao de nuestra pelcula
con la propiedad "getBytesTotal()" y lo almacenamos en la variable bytes_totales. */
//--------------------------------------------------------------- -------------- /* FOTOGRAMA 2 */ bytes_cargados = this.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 */ this.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.text = Math.floor(porcentaje)+"%"; /* Mostramos en el texto "txt_salida" el porcentaje que llevamos junto al smbolo "%",que nos mostrar el
porcentaje de pelcula que llevamos cargado en cada instante*/ }
//--------------------------------------------------------------- -------------- /* FOTOGRAMA 3 */ this.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). Abajo mostramos el resultado. La pelcula se comenzar a cargar al pulsar el botn. El cdigo insertado es 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 del ordenador o que estis viendo este curso desde el DVD o desde vuestro propio Disco Duro, donde la velocidad de descarga es tan rpida que sera necesaria una pelcula de varios MBytes para que hiciera falta un cargador. Podemos encontrar otro ejemplo de cargador en los videotutoriales del curso. Probad el cdigo en una pelcula que coloquis en un servidor web y podris ver los resultados sin problemas. Para poner a prueba lo aprendido, recomendamos realizar la:
Prueba evaluativa unidad 17: Ejemplos de ActionScript 3.0 Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. A pesar de la potencia de los clips de pelcula, es comn que el cdigo ActionScript que les afecte sean llamadas o modificaciones de sus propiedades realizadas desde otros objetos o desde la propia pelcula principal. a) Verdadero. b) Falso. 2. Qu indica esta instruccin miBoton.addEventListener(MouseEvent.MOUSE_CLICK, miFuncion);? a) Indica lo que se ejecutar cuando el usuario haga clic en la pelcula. b) Indica que cuando se haga clic en miBoton se ejecute la funcin miFuncion.
c) Indica qu har la funcin miFuncion. 3. Si asociamos la siguiente funcin al clic del ratn en un botn: function miFuncion () { r1.gotoAndPlay(2); } Al pulsarlo, iremos al fotograma 5 de la pelcula principal. a) Verdadero. b) Falso. 4. Es una buena costumbre buscar por Internet cdigo ActionScript hecho por otros expertos en Flash, estudiarlo, aprender de l y adaptarlo a nuestras necesidades si esto es posible. a) Verdadero b) Falso 5. El mtodo round del objeto Math nos genera un nmero redondeado y aleatorio entre 0 y 46550. a) Verdadero. b) Falso. 6. Cul de las siguientes sentencias nos devolvera el porcentaje de Bytes cargados hasta el momento en una pelcula Flash? a) porcentaje = getBytesTotal(); b) porcentaje = ((bytes_cargados / bytes_totales)*100); c) porcentaje = ((getBytesLoaded() / getBytesTotal())*100); d) porcentaje = getBytesLoaded() / 100; 7. Si definimos un objeto de sonido llamado miSonido y luego escribimos el mtodo miSonido.play(0,3);. a) El sonido se reproducir durante 3 segundos. b) El sonido se reproducir durante 3 fotogramas. c) El sonido se reproducir tres veces. d) El sonido no se reproducir al haber escrito un 0. 8. Cul de estas afirmaciones es correcta? a) height se refiere a la anchura del objeto. b) _width se refiere a la anchura del objeto . c) height se refiere a la altura del objeto .
d) Todas las anteriores son falsas. 9. funcin bytesTotales() nos devuelve los bytes totales que ocupa una pelcula. a) Verdadero . b) Falso. 10. La funcin max(5,2) nos devuelve el valor mximo entre 5 y 2, esto es, el nmero 5. a) Verdadero . b) Falso.
Unidad 18. Navegacin - ActionScript (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.
18.1. 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, creamos otra capa para poder insertar las acciones que necesitarn nuestros botones, abrimos el Panel Acciones y aadiremos el cdigo que deber realizar el botn. sta es la parte ms importante pues deberemos decidir a qu evento responder el botn. Existen varios eventos que son capturados en Flash, nombraremos los ms importantes: MouseEvent.MOUSE_DOWN: ejecuta la accin al presionarse el botn. MouseEvent.MOUSE_UP: ejecuta la accin al soltarse el botn (despus de haberlo presionado). MouseEvent.MOUSE_OVER: ejecuta la accin al desplazar el cursor dentro del botn MouseEvent.MOUSE_OUT: ejecuta la accin al desplazar el cursor fuera del botn.
Nota: ActionScript diferencia entre maysculas y minsculas, por lo que si escribes, por ejemplo, mouse_up no ser reconocido. Para capturar el evento tenemos que aadir un escuchador que se encargue de estar pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al botn. Adems del evento, debemos de indicar el nombre de una funcin, que ser el cdigo que se ejecute al producirse el evento. Por tanto, si no hemos creado ya esa funcin, la tenemos que definir, con el mismo nombre y pasndole como parmetro el evento. Como siempre, entre las llaves {} introduciremos el cdigo que queremos que ejecute la funcin. miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(e:MouseEvent):void { //cdigo de la funcin } Puedes ver los todos los eventos de ratn en la siguiente seccin Los eventos de ratn no slo afectan a botones, pueden ser capturados por cualquier objeto de visualizacin (MovieClips, controles de formulario, imgenes, etc...). Unidad 18. Avanzado: ActionScript 3. Eventos de ratn Cuando capturamos un evento, lo que realmente estamos utilizando es un string, una cadena de texto. Por ejemplo al escribir MouseEvent.CLICK, estamos accediendo a la propiedad CLICK de la calse MouseEvent, que nos devuelve un string cuyo valor es 'click'. Por tanto, nos daria lo mismo capturar este ecento utilizando: miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion); Que utilizar la cadena equivalente: miBoton.addEventListener('click', miFuncion); nicamente comentamos esto porque puede que a alguien le sea ms cmodo utilizarlo de una forma u otra, o que no se extrae si en algn ejemplo lo ve as.
Veamos todos los eventos que que porduce el ratn. Slo se se producirn cuando la accin se realize sobre el elemento que tiene el escuchador: MouseEvent.CLICK ("click") - Se procue al hacer clic (pulsar y soltar el botn ratn). MouseEvent.DOUBLE_CLICK ("doubleClick") - Se produce al hacer doble clic. MouseEvent.MOUSE_DOWN ("mouseDown") - Se produce al pulsar el botn del ratn (antes de soltarlo). MouseEvent.MOUSE_MOVE ("mouseMove") - Se produce cuando el ratn se mueve sobre el elemento. MouseEvent.MOUSE_OUT ("mouseOut") - Se produce cuando se saca el cursor de encima del elemento. MouseEvent.MOUSE_OVER ("mouseOver") - Se produce cuando el ratn se coloca sobre el objeto. MouseEvent.MOUSE_UP ("mouseUp") - Se produce cuando se suelta el botn del ratn. MouseEvent.MOUSE_WHEEL ("mouseWheel") - Se produce al presionar la rueda del cursor. MouseEvent.ROLL_OUT ("rollOut") - Se produce cuando se mueve el ratn fuera del elemeto. MouseEvent.ROLL_OVER ("rollOver") - Se produce cuandos e mueve el ratn sobre el elemento.
Por ejemplo, el flash que vemos a continuacin tiene el siguiente cdigo que hace que al producirse un evento, se muestre su nombre: texto.addEventListener(MouseEvent.CLICK, funcion); texto.addEventListener(MouseEvent.DOUBLE_CLICK, funcion); texto.addEventListener(MouseEvent.MOUSE_DOWN, funcion); texto.addEventListener(MouseEvent.MOUSE_MOVE, funcion); texto.addEventListener(MouseEvent.MOUSE_OUT, funcion); texto.addEventListener(MouseEvent.MOUSE_OVER, funcion); texto.addEventListener(MouseEvent.MOUSE_UP, funcion); texto.addEventListener(MouseEvent.MOUSE_WHEEL, funcion); texto.addEventListener(MouseEvent.ROLL_OUT, funcion); texto.addEventListener(MouseEvent.ROLL_OVER, funcion); function funcion (e:MouseEvent):void { texto.text="\n"+e.type;
} Observa que no vemos todos los eventos, porque algunos se producen a la vez o my seguidos. Por ejemplo, al abandonar el cuadro de texto se produce MOUSE_OUT y ROLL_OVER. Como este ltimo se produce despus, es el que aparece en la caja de texto.
Unidad 18. Navegacin - ActionScript (II) 18.2. 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 detenga a la 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:
De esta forma, al hacer clic sobre ese botn, el cabezal de reproduccin se desplazar hasta el fotograma que tiene la etiqueta "Encuentranos" 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:
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. 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 18. Navegacin - ActionScript (III) 18.3. 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 o duplicarla con el botn Duplicar escena . 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: import flash.events.*; miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void { 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.
Unidad 18. Navegacin - ActionScript (IV) 18.4. 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. 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. miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void { miClip.gotoAndPlay(20); } 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: miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void { 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: As haremos que la reproduccin de clipHijo se reanude.
clipPadre.clipHijo.play(); Unidad 18. Navegacin - ActionScript (V) 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: import flash.events.*;
function miFuncion(event:MouseEvent):void { 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 propiedad parent. De este modo si nos encontrsemos dentro de clipHijo y quisisemos avanzar al fotograma 20 de clipPadre podramos escribir: with (parent) { 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.
Podemos hacer que el elemento padre escuche eventos producidos dentro del hijo, con lo que denominamos propagacin en burbuja. Puedes ver cmo en este avanzado . Unidad 18. Avanzado: ActionScript 3 - Eventos de hijo a padre Crear nuestros propios eventos A parte de los eventos que tiene Flash, podemos producir los nuestros propios. Basta con utilizar el siguiente cdigo: objeto.dispatchEvent(new Event("miNombreDeEvento")); El mtodo dispatchEvent es el que hace que se produzca el evento indicado como parmetro. Podemos pasarle un evento existente, o crear uno propio utilizando new Event indicando el nombre que le queramos dar. En el ejemplo anterior, podemos capturar el evento como hemos visto hasta ahora: this.addEventListener("miNombreDeEvento", miFuncion); Propagacin de eventos Al crear un evento, podemos aadir un parmetro booleano ms, la propagacin. En resumen, cuando hay propagacin el evento se propaga fuera del MovieClip hacia los elementos padres, permitiendo as que estos puedan escuchar ese evento. Por ejemplo, podemos lanzar un evento personalizado con propagacin as: objeto.dispatchEvent(new Event("miNombreDeEvento", true)); Esto resulta muy til. Imaginemos que tenemos un MovieClip con varios botones, destinado a ser utilizado dentro de otro MovieClip para navegar por l. Podramos introducir el cdigo directamente utilizando parent, pero slo nos servira para una accin especfica. Pero y si queremos utilizar el mismo archivo en otros proyectos? Con lo que hemos visto, bastara con poner el siguiente cdigo en cada botn: botonAvanzar.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(event:MouseEvent):void
{ dispatchEvent(new Event("botonAvanzarPulsado", true)); } Luego, en la pelcula padre, bastara con capturar el evento botonAvanzarPulsado como hemos visto hasta ahora, y dar la funcionalidad que queramos al botn. Por ejemplo, esto es lo que hemos hecho en las pginas del peridico digital, ejercicio propuesto que encontrars al final del tema.
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 de eventos que nos permitirn ejecutar cdigo dependiendo de los eventos que se produzcan sobre ellos. Responden a los a todos los eventos de ratn que ya hemos visto, y cualquier evento que comparta con el resto de objetos de visualizacin (DisplayObject). Vamos a ver los eventos especficos del MovieClip: Event.ADDED ("added") - Se produce cuando el movieclip se aade a la lista de visualizacin de un contenedor (contenedor.addChild(miClip)). Event.ENTER_FRAME ("enterFrame") - Se produce cuando la cabeza lectora entra en un fotograma, pero tambin se produce constantemente si slo hay un fotograma o si la reproduccin est parada. En este caso, depende de la velocidad del MovieClip. Por ejemplo, un MovieClip que se reproduce a 24 FPS produce este evento 24 veces por segundo. Recuerda este evento porque es muy til. Event.EXIT_FRAME ("exitFrame") - Igual que el anterior, pero se produce al salir del fotograma. Event.REMOVED ("removed") - Se produce cuando el MovieClip se quita de la lista de visualizacin de un contenedor (contenedor.removeChild(miClip)).
Unidad 18. Navegacin - ActionScript (VI) 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.addEventListener(MouseEvent.MOUSE_UP,funcion_desapare ce);
function funcion_desaparece(event:MouseEvent):void { 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: 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. detalle.addEventListener(MouseEvent.MOUSE_UP,funcion_aparece);
function funcion_aparece(event:MouseEvent):void { estrella.gotoAndPlay("aparece"); detalle.gotoAndPlay("desaparece"); } Unidad 18. Navegacin - ActionScript (VII) 18.5. 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 muchos tipos diferentes de variables, de hecho en una variable podemos guardar cualquier tipo de objeto. Vamos a ver ahora los ms comunes, los que emplearemos para guardar texto, nmeros o valores booleanos (verdadero - falso): 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 ("cadena") o ('cadena'). Array: en los arrays o matrices podemos almacenar distintos valores en distintas posiciones. A estas posiciones accedemos con un ndice numrico (utilizando 0 para la primera posicin) que indicamos entre corchetes tras el nombre del array (nombreArray[3]=valor;). Puedes ver un ejemplo prctico de los arrays en este bsico. Unidad 18. Bsico: ActionScript 3. Arrays Crear un array Como siempre, comenzamos declarando el array, con la sintaxis var miArray:Array. Despus podemos asignarle los valores de varias formas: //Asignando el valor a cada posicin var miMatriz1:Array = new Array(); miMatriz1[0] = "Lunes"; miMatriz1[1] = "Martes"; miMatriz1[2] = "Mircoles"; miMatriz1[3] = "Jueves"; miMatriz1[4] = "Viernes"; miMatriz1[5] = "Sbado"; miMatriz1[6] = "Domingo";
//O asignndolos todos a la vez var miMatriz2:Array = new Array("Lunes","Martes","Mircoles","Jueves","Viernes","Sbado" ,"Domingo");
var miMatriz3:Array = ["Lunes","Martes","Mircoles","Jueves","Viernes","Sbado","Dom ingo"]; En cualquiera de los casos anteriores obtenemos un array de 7 posiciones con los das de la semana. Recorrer un array Una forma cmoda de recorrre una Array es con un bucle for, como en el siguiente ejemplo: var miMatriz:Array = ["Lunes","Martes","Mircoles", "Jueves","Viernes","Sbado","Domingo"];
for (var i:Number = 0; i < miMatriz.length(); i++) {
trace(miMatriz[i]);
} Lo que hacemos es declarar una variable i que har de contador. El array es un objeto con mtodos. En este caso, el mtodo length nos devuelve el nmero de elementos del array. Ten el cuenta que el primer elemento del array es el elemento 0. Por tanto, para un array de 2 elementos, debemos recorrer las posiciones 0 y 1. Por eso, iniciamos el contador en 0, y repetimos el bucle mientras el contador sea menor que el nmero de elementos. Como resultado, el se mostrar una vez cada elemento en el panel de salida.
Antes de utilizar una variable, tenemos que declararla. 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. Fjate en la primera lneas, se declaran la variable booleana, que dice si la estrella se encuentra activada. var estrella_activada:Boolean = true;
function funcion_desaparece(event:MouseEvent):void { if (estrella_activada==true) { estrella.gotoAndPlay("desaparece"); detalle.gotoAndPlay("aparece"); estrella_activada=false;
function funcion_aparece(event:MouseEvent):void { if (estrella_activada==false) { estrella.gotoAndPlay("aparece"); detalle.gotoAndPlay("desaparece"); estrella_activada=true; } } 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 click 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, lo que nos permitir ver el valor que va tomando. Puedes abrir este panel desde Ventana Salida. Unidad 18. Navegacin - ActionScript (VIII)
Existen 2 mbitos de variables: el local 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 Esta es mi variable, que es el texto que le hemos dado. 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: var miVariable:String = "Esta es mi variable"; var miVariable2:String = "Esta tambin lo es";
function miFuncion() { var miVariable:Number = 1; trace(miVariable); trace(miVariable2); miVariable2 = "La cambio"; var otraVariable:Number = 10; trace(otraVariable);
}
miFuncion();
trace(miVariable); trace(miVariable2); trace(otraVariable); Antes de la funcin, en la lnea de tiempo definimos dos variables miVariable y miVariable2. Despus definimos una funcindefinimos una funcin (hablaremos de ellas ms a fondo en el siguiente apartado). En esta funcin se declara una variable (miVariable). Tiene el mismo nombre que la variable de la lnea de tiempo, pero no es la misma variable, es local a la funcin. Si la enviamos al Panel Salida comprobaremos que muestra el valor asignado dentro de la funcin (1). En cambio, si dentro de la funcin mostramos el contenido de miVariable2, definida en la lnea de tiempo veremos Esta tambin lo es que es su valor inicial, ya que no la hemos reemplazado por otra local que se llame igual. Lo modificamos. Por ltimo, hemos declarado y mostrado una ltima variable local (otraVariable) con valor 10. Recuerda que la funcin no se ejecutar hasta que no la llamemos, y es lo que hacemos en la siguiente lnea despus de definirla. A continuacin, en la lnea de tiempo mostramos el contenido de miVariable, y comprobamos que muestra el valor inicial Esta es mi variable. La funcin no la ha alterado, ya que aunque compartan nombre, eran dos variables distintas. En cambio al mostrar el valor de miVariable2 comprobamos que si que ha cambiado, mostrando La cambio. Como esta variable no es local a la funcin, si la alteramos si que cambia. Por ltimo mostramos el contenido de otraVariable. Como esta haba sido definida dentro de la funcin, es una variable local, por lo que fuera de la funcin no existe, no est definida, por lo que muestra UNDEFINED.
Por tanto, las variables declaradas dentro de la funcin son locales, y slo existen dentro de sa funcin. Si dentro de una funcin queremos emplear una variable definida en la lnea de tiempo, no debemos de definir una variable local con el mismo nombre.
Las variables de mbito global seran aquellas accesibles indistintamente desde cualquier parte del proyecto, desde distintos MovieClips. En ActionScript 3 ya no se permite el uso de este tipo de variables, que en la versin anterior se haca precediendo el nombre de la variable con _global.. No obstante, podemos simular variables globales creando una clase, como se explica en este avanzado:
. Unidad 18. Avanzado: ActionScript 3 - Crear una clase para variables globales Una variable global es aquella a la que podemos acceder desde cualquier parte del proyecto. En ActionScript 2 podamos crear una variable global de la siguiente manera: //Cdigo ActionScript 2 _global.miVariable = "Esta es una variable global"; Esto ya no es vlido en ActionScript 3. Pero en su lugar podemos crear una clase y guardar en ella estas variables. La clase la escribimos en un archivo .as (Archivo Nuevo Archivo de ActionScript). Aunque no es obligatorio, lo habitual es crear un patrn de diseo Singleton. No vamos a detallar que s. A grandes rasgos, es una forma de escribir una clase de manera que no se creen objetos distintos, y se utilice una instancioa nica. Recordemos que si tenemos varios objetos, cada uno puede asignar valores distintos a sus variables. Su estrucura en el archivo as (al que llamaremos variablesGlobales.as, el mismo nombre que daremos a la clase)sera la siguiente:
package { public class variablesGlobales { // Aqu declaramos nuestras variables public var miVariableTexto:String = "Hola"; public var miVariableNumero:Number = 100; ///
private static var instancia:variablesGlobales; public function variablesGlobales() { } public static function variables():variablesGlobales { if (!instancia) { instancia = new variablesGlobales(); } return instancia; } } } Es importante declarar nuestras variables como public var para que puedan ser accedidas desde fuera. Guardamos el archivo en la misma carpeta en la que estamos trabajando. Ahora podemos acceder a enuestras variables con la siguiente sintaxis: variablesGlobales.variables().nombreVariable Por ejemplo: trace(variablesGlobales.variables().miVariableTexto); variablesGlobales.variables().miVariableNumero = 5;
Nota: en vez de variablesGlobales podemos emplear el nombre que queramos, cambindolo en todos los sitios donde corresponda. De igual manera, podemos cambiar el nombre del mtodo con el que accedemos a las variables (variables()). Lo habitual es llamarlo getInstance() porque lo que realmente hace es devolver la instancia nica del objeto.
Unidad 18. Navegacin - ActionScript (IX) 18.6. Las Funciones Como habrs visto en los ejemplos anteriores, una funcin es un bloque de cdigo que podemos utilizar en cualquier parte del archivo, siempre que haya sido definida en el mismo o en un fotograma anterior. Si definimos una funcin dentro de otra tendr un mbito local, como ocurra con las variables. Como ya hemos visto, las funciones se definen con la palabra function. El ejemplo sencillo sera: function saludar() { trace('Hola'); } Lo nico que hace es mostrar Hola en el panel de salida. Para que se ejecute la funcin, debemos de llamarla en alguna parte del cdigo: saludar(); Parmetros o argumentos
Como ves, crear funciones es bastante sencillo. Adems podemos crear funciones un poco ms complejas envindole parmetros: function saludar(nombre:String) { trace('Hola '+nombre); } Observa que en el parmetro hemos indicado el tipo de dato que ser, es este caso del tipo String. Ahora para llamarla usaramos por ejemplo: saludar("Bruno"); //Escribira: Hola Bruno Podemos envair varios parmetros separados por comas. Si al parmetro le damos un valor, este se convertir en un parmetro opcional, y podemos enviarlo al llamar a la funcin o no. Por ejemplo: function saludar(nombre:String, pregunta:String='qu tal?') { trace('Hola '+nombre+' '+pregunta); } Ahora podemos llamarla de dos formas: enviando todos los parmetros, o no enviando los parmetros opcionales, por lo que tomar el valor por defecto: saludar("Bruno"); //Escribira: Hola Bruno qu tal? saludar("Bruno", "cmo va?"); //Escribira: Hola Bruno cmo va? Habrs observado que cuando crebamos una funcin para tratar un evento siempre recogemos un parmetro: miBoton.addEventListener(MouseEvent.MOUSE_UP, miFuncion);
function miFuncion(e:MouseEvent):void { gotoAndPlay(1);
} El parmetro que recogemos es el evento. Cada evento tiene unos mtodos que podemos emplear si definimos su tipo. En el ejemplo anterior, declaramos el parmetro e que era del tipo MouseEvent. En las funciones activadas por eventos siempre debemos de recoger ese parmetro, aunque si no lo pensamos usar no es necesario especificar su tipo. Una propiedad muy til es event.target (en el ejemplo anterior se usara e.event.target) que nos indica el objeto que ha producido el evento. Esto nos permite utilizar la misma funcin para varios objetos, pero que la funcin slo modifique propiedades del elemento que la llama en cada momento.
Devolver valores. En vez de que la funcin realice una accin, tambin podemos utilizarla para que devuelva valores u objetos. Por ejemplo: function saludar(nombre:String):String { return 'Hola '+nombre; } Observa que hemos indicado detrs de la funcin el tipo de valor a devolver (en este caso devolver un String), tal como hacamos con las variables. En muchos ejemplos habrs visto que el tipo indicado es :void. Esto no es un tipo de datos, si no todo lo contrario. :void indica que esa funcin no devuelve ningn valor. El valor que devuelve es lo indicado la instruccin return. En el ejemplo anterior la funcin no realiza ninguna accin, slo devuelve un valor: saludar("amigo"); //No hara nada trace(saludar("amigo")); //Mostrara en alida: Hola amigo var saludo:String = saludar("amigo"); //Guarda en la variable saludo
//Lo que devuelve la funcin Unidad 18. Navegacin - ActionScript (X) 18.7. Contenedores y listas de visualizacin Con respecto a los elementos que vemos en nuestra pelcula con ActionScript 3, tenemos que tener claros un par de conceptos: Los objetos que vemos son llamados objetos visibles o de visualizacin, y todos pertenecen a la clase DisplayObject o a una subclase heredada de esta. Siempre han de estar dentro de un contenedor para que se vean. Los objetos estn agrupados dentro de un contenedor, que hace de elemento padre. A su vez, dentro de un contenedor podemos tener otros contenedores con sus respectivos elementos. Los contenedores pertenecen a la clase DisplayObjectContainer, y aunque pueda parecer lioso, a su vez un contenedor es un objeto de visualizacin, y se puede tratar como tal. La lista de visualizacin es cmo estn ordenados los objetos dentro del contenedor, y establece el orden de apilamiento de los objetos.
Los contenedores: En nuestra pelcula podemos tener cuatro tipos de contenedores: La escena (stage). Es el contenedor general de nuestra pelcula. Todo lo que se ve, est dentro de la escena. Loader. Nos permite cargar un archivo externo en l. Lo veremos en el siguiente apartado. MovieClip. Aunque normalmente no lo tratamos como tal, un MovieClip contiene un archivo SWF con una lnea de tiempo propia. Por ejemplo, dentro de l podemos acceder a los distintos smbolos que lo forman. Sprite. Es como una carpeta, a la que podemos ir aadiendo y quitando objetos. Podemos crear tantos sprites como queramos. El que ms utilizaremos como contenedor ser el Sprite, aunque en muchos casos lo hagamos directamente sobre la escena. Declararemos un Sprite como cualquier objeto: var miContenedor:Sprite = new Sprite;
Ahora tenemos un contenedor, pero vaco. Podemos adirle elementos que pasaran a ser elementos hijos del contenedor. Para ello podemos utilizar uno de los mtodos de los contenedores: miContenedor.addChild(miObjeto1); miContenedor.addChild(miObjeto2); Ahora tenemos el contenedor con dos objetos. Pero an no se ven, porque no hemos aadido el contenedor al elemento principal, a la escena. Vamos a hacerlo: addChild(miContenedor); Ahora ya vemos el contenedor. Bueno, realmente no vemos el contenedor, vemos los elementos de visualizacin que contiene. Nuestro contenedor tiene una lista de visualizacin con dos elementos.
Unidad 18. Navegacin - ActionScript (XI) Listas de visualizacin: Los elementos aadidos a un contenedor forman su lista de visualizacin. La posicin dentro de esta lista establece el orden de apilamiento. Es decir, los objetos con un ndice menor se vern por debajo de los elementos con un ndice mayor. Vamos a ver cmo accedemos y tratamos estos elementos con los mtodos y propiedades de DisplayObjectContainer. numChildren - Esta propiedad nos devuelve el nmero de elementos de la lista. En el ejemplo anterior, miContenedor.numChildren devuelve 2. getChildIndex(objeto) - Nos permite conocer el ndice de un elemento. addChild(objeto) - Aade el elemento al final de la lista, encima del resto. addChildAt(objeto, indice) - Aade un elemento y nos permite indicar en qu posicin colocarlo. Por ejemplo, si tenemos el la lista el objeto3, y queremos aadir el objeto7 justo antes que este para que quede debajo, podemos emplear: addChildAt(objeto7, getChildIndex(objeto3)); para saber el ndice del objeto3 y colocar ah el objeto7, desplazando el resto hacia el final.
setChildIndex(objeto, indice) - Nos permite cambiar el orden de un objeto dentro de la lista. getChildByName(nombre_instancia) - Nos permite obtener un objeto conociendo su nombre de instancia. getChildAt(ndice) - Nos permite obtener un objeto conociendo su ndice. contains(objeto) - Devuelve verdadero si el objeto ya est en la lista. removeChild(objeto) - Quita el objeto indicado de la lista. removeChildAt(objeto) - Quita de la lista el objeto con el ndice indicado. Nota: Antes de quitar un objeto de la lista, es recomendable borrar sus eventos si los tiene, ya que esto puede producir errores. Adems, si no los quitamos, el objeto sigue ocupando memoria. Para borrar un evento, utilizamos el mtodo removeEventListener, con los mismos parmetros que empleamos en addEventListener. Por ejemplo: objeto.removeEventListener(Event.ENTER_FRAME, miFuncion);
Unidad 18. Navegacin - ActionScript (XII) 18.8. Cargando Archivos Ahora veremos como 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. 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 es el siguiente: carga.addEventListener(MouseEvent.MOUSE_UP, abrir);
function abrir (e:Event): void{ var miCargador:Loader = new Loader(); miCargador.load(new URLRequest("mapa.swf"));
miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, insertMovie); function insertMovie(evt:Event):void{ addChild(miCargador); } } Vemos que empleamos un contenedor Loader para cargar el archivo, al que le indicamos el archivo a cargar en su mtodo load. var miCargador:Loader = new Loader(); miCargador.load(new URLRequest("mapa.swf")); Una vez cargado, lo aadimos a un contenedor o directamente a la escena, como en el ejemplo, para que se visualice. addChild(miCargador); Pero esto no lo hemos hecho directamente, si no que lo hemos hecho en el siguiente evento: miCargador.contentLoaderInfo.addEventListener(Event.COMPLETE, insertMovie); Por qu? Porque este evento se produce cuando el archivo est completamente cargado. Esto evita que intentemos mostrar un objeto que an no se ha cargado del todo.
Utilizaremos un nuevo cargador si queremos aadir otro archivo. Por ejemplo, si queremos ir mostrando imgenes en la misma posicin, cada vez que queramos cambiar la imagen slo habr que volver llamar al mtodo load(), que reemplazar el contenido actual del cargador por la nueva imagen.
Sigue el siguiente ejercicio paso a paso para ver cmo crear pelcula cargando archivos: Unidad 18. Ejercicio paso a paso: Crear una pelcula cargando archivos
Objetivo.
Crearemos una pelcula:
Ejercicio paso a paso.
Como siempre, utilizaremos el tipo de documento Archivo de flash (AS 3.0). Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos los mismos pasos: 1. Haz clic en el botn Nuevo Smbolo al pie de la Biblioteca. 2. Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de pelcula. 3. Dibuja la forma que quieras mostrar en el escenario. 4. Con ayuda del panel Alinear (Ctrl + K) coloca la forma centrada con respecto al punto de referencia (mira el ejemplo).
5. Haz clic en Escena 1 en la lnea de tiempo para volver a la pelcula principal. 6. Arrastra el smbolo que acabamos de crear y adelo al Escenario. 7. Dale un nombre de instancia significativo al cual nos referiremos ms tarde, en nuestro ejemplo hemos usado estrella. 8. Crea una nueva capa y aade la siguiente lnea en el Panel Acciones para el fotograma 1 de la pelcula principal: 9. estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar) ; 10. function arrastrar(event):void { //Nombre de la nuestra funcin 11. estrella.startDrag(); //Nombre del smbolo 12. } 13. 14. estrella.addEventListener(MouseEvent.MOUSE_UP,solta r); 15. function soltar(event):void { //Nombre de la nuestra funcin
16. estrella.stopDrag(); //Nombre del smbolo } Este cdigo hace que al pulsar el ratn, se comience a arrastrar el elemento, y al soltarlo deje de hacerlo. 17. Guarda el documento con el nombre estrella, publica la pelcula desde Archivo Publicar, y cirralo. 18. Repite estos pasos para cada una de las formas que quieras aadir. Ahora pasaremos a crear la pelcula principal. 1. Abre un documento en blanco. 2. Dibuja un rectngulo y dale las dimensiones del documento utilizando el botn del Panel Alinear. Puedes hacer que tome un mapa de bits como fondo seleccionando Mapa de bits en el desplegable Tipo del Panel Color. 3. Ahora aadiremos los botones que utilizaremos. Nosotros hemos importado la biblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz clic en Archivo Importar Abrir biblioteca externa. 4. Seleccionar los archivos que quieras abrir y arrastra el smbolo al Escenario. En nuestro caso, comenzamos por estrella.fla. 5. Redimensinalo con la herramienta Transformacin Libre . 6. En el panel de Propiedades, le damos el nombre a la instancia. En nuestro ejemplo la hemos llamado btn_mostrarEstrella por ser el botn que mostrar la estrella. 7. Tambin en el panel propiedades, especificamos el tipo Botn. Lo hacemos nicamente para que el cursor cambie a la mano al pasar sobre l.
8. Arrastra otro smbolo y colcalo al pie del Escenario (este ser el que har que rote el elemento). 9. Redimensinalo si lo crees necesario, dale un nombre de instancia y convirtelo a botn. Nosotros lo hemos llamado btn_rotarEstrella. 10. Repite estos pasos para cada una de las formas que hayas creado, utilizando los nombres de instancia apropiados.
11. Una vez ya estn todos los botones en el Escenario pasaremos a escribir el cdigo asociado. Para ver como hacerlo, vamos a cargarlo los archivos publicados (swf) desde el cdigo. 12. Crea una nueva capa pulsando el botn Insertar Capa . 13. En el fotograma 1 de la nueva capa escribe lo siguiente en el Panel Acciones, que afectar al smbolo estrella: 14. var estrella:Loader = new Loader();//Utilizamos un Loader para cargar archivos 15. estrella.load(new URLRequest("estrella.swf"));//Indicamos la ruta del archivo 16. var estrellaMC:MovieClip; //Un objeto MovieClip que ser la estrella 17. estrella.contentLoaderInfo.addEventListener(Event.C OMPLETE, insertarEstrella); 18. //Utilizamos este evento para asegurarnos de que se ha cargado completamente 19. //antes de agregarlo a la escena 20. function insertarEstrella(e:Event):void { 21. estrellaMC = e.target.content; //Almacenamos el elemento que produce el evento 22. //en nuestro movie clip 23. estrellaMC.visible = false; //Lo ocultamos para que no se vea por defecto 24. estrellaMC.x=100; 25. estrellaMC.y=80; //Le damos la posicin inicial que queramos 26. addChild(estrellaMC) as MovieClip;//Aadimos el archivo cargado a la escena 27. //An no se ver porque visible=false 28. } 29. 30. btn_mostrarEstrella.addEventListener(MouseEvent.MOU SE_UP, mostrarOcultarEstrella); 31. //Detectamos cuando se pulsa el botn para mostrar/ocultar el elemento 32. function mostrarOcultarEstrella(e:Event):void { 33. estrellaMC.visible=! estrellaMC.visible;
34. //Al negar una propiedad booleana como esta la invertimos. 35. //por lo que cada al puslar el botn se mostrar si est oculta o 36. //o se ocultar si est visible } 37. Guarda el proyecto y prubalo (Control Probar pelcula) para ver que funciona. 38. Ahora escribiremos el cdigo necesario para que al pulsar el otro botn (btn_rotarEstrella) el elemento gire: 39. btn_rotarEstrella.addEventListener(MouseEvent.CLICK , girarEstrella); 40. function girarEstrella(event):void { 41. //Para que gire, aumentamos la propiedad rotation 42. estrellaMC.getChildAt(0).rotation+=15; 43. //Utilizamos getChildAt porque en nuestro caso no queremos que rote todo 44. //el SWF, slo el elemento que pusimos dentro como un smbolo, que al ser 45. //el nico hijo, est en la posicin 0 } Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto en cuestin slo es necesario escribir delante de la propiedad la variable que lo contiene. Definimos la funcin que al hacer clic girar nuestro objeto.
46. Repite estos pasos para cada uno de los botones. Recuerda escribir bien los nombres de instancia y los nombre de funciones. 47. Una vez terminado prueba la pelcula desde Control Probar pelcula.
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.
As, cargaremos partes de la pelcula slo si el usuario accede a ellas. Unidad 18. Navegacin - ActionScript (XIII) 18.9. Cargando informacin
En este apartado veremos cmo utilizar un cargador para recoger informacin de un archivo y mostrarla en una pelcula Flash. Encontrars los archivos necesarios en la carpeta ejercicios/presentacion. Observa la lnea de tiempo:
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 cuando pulsemos el botn. Igualmente hemos aadido un stop() en el fotograma 11, el ltimo. para que se detenga la transicin y espere a que se pulse de nuevo el botn. 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, 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. Ahora que conocemos el funcionamiento veamos el cdigo que hemos aadido en el fotograma 1. // FOTOGRAMA 1
stop();
var total:Number=4; var imagenActual:Number=0; //Utilizamos un objeto Loader para cargar las imagenes var cargadorImagen = new Loader(); contenedor.addChild(cargadorImagen);
//Para cargar datos (texto), emplearemos un objeto URLLoader var cargadorTexto:URLLoader = new URLLoader(); //Indicamos el formato de los datos que leer cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES; //Y la ubicacin del archivo cargadorTexto.load(new URLRequest("diapositivas.txt")); cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);
function textoCargado(ev:Event):void { if (Event.COMPLETE) { gotoAndPlay(6); } else { textoDiapositiva.descripcion_txt.text="No se ha podido cargar el texto"; textoDiapositiva.titulo_txt.text="Error"; } }
boton.addEventListener(MouseEvent.MOUSE_UP, siguiente); function siguiente(event):void { gotoAndPlay(2);
} Las variables que vamos a utilizar son: La variable total almacena el nmero total de imgenes que vamos a mostrar. En nuestro caso, son 4. La variable imagenActual almacenar el nmero de la imagen que vamos a mostrar, la inicializamos a 1 para mostrar la primera imagen. Tenemos que ontener datos externos, para eso hemos empleados dos objetos: Un Loader llamado cargadorImagen, donde cargaremos los archivos de imagen. Un URLLoader, llamado cargadorTexto, que es un objeto que nos permite extraer datos de archivos. En nuestro caso, texto de un archivo de texto. El Loader ya lo conocemos, y de momento slo lo hemos aadido al MovieClip contenedor. Vamos a centrarnos en cmo utilizamamos el URLLoader. var cargadorTexto:URLLoader = new URLLoader(); cargadorTexto.dataFormat=URLLoaderDataFormat.VARIABLES; Tras declararlo, debemos indicar el formato de datos, con la propiedad cargadorTexto.dataFormat. Puede ser de tres valores: URLLoaderDataFormat.TEXT, si el archivo que queremos cargar es todo texto, y queremos cargarlo como tal. Esta es la opcin por defecto. URLLoaderDataFormat.BINARY, si los datos son binarios sin formato. URLLoaderDataFormat.VARIABLES, si los datos del archivo siguen el formato de las variables URL, cuya sintaxis sera variable1=valor&variable2=valor&variable3=valor&variable4=valor. Es decir separamos cada variable y su valor por el signo =. Y separamos cada par variable=valor por el signo &. Esta ltima es la opcin que hemos elegido, porque aunque queremos cargar texto, lo tenemos dividido en variables. Por lo tanto, escribimos en el archivo diapositivas.txt el texto que queremos mostrar con el siguiente formato: titulo1=Los mejores sndwiches &descripcion1=En sa cuina creamos los sndwiches mas originales y sabrosos de toda la ciudad. &titulo2=Calidad Superior &descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la mxima 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.
Unidad 18. Navegacin - ActionScript (XIV) Por tanto, lo siguiente ha sido indicar a nuestro URLLoader cul es el archivo que contendr esas variables. cargadorTexto.load(new URLRequest("diapositivas.txt")); cargadorTexto.addEventListener(Event.COMPLETE, textoCargado);
function textoCargado(ev:Event):void { if (Event.COMPLETE) { gotoAndPlay(6); } else { textoDiapositiva.descripcion_txt.text="No se ha podido cargar el texto"; textoDiapositiva.titulo_txt.text="Error"; } }
boton.addEventListener(MouseEvent.MOUSE_UP, siguiente); function siguiente(event):void { gotoAndPlay(2); }
Y como ya vimos con los cargadores, hemos utilizado el evento Event.COMPLETE para saber si se ha cargado correcta y completamente. Si no se ha cargado, mostramos un error. Si todo es correcto, pasamos al fotograma 6. Al final, hemos aadidio el cdigo necesario para que al pulsar en boton vayamos al fotograma 2.
Ahora, vamos al fotograma 6. Cada vez que se pase por aqu, cambiaremos la imagen y el texto. Hemos elegido este fotograma porque aqu habamos cambiado el valor de Alffa a 0. Es decir, aqu es donde ha acabado de desvancerse la imagen y donde empieza a cargarse la siguiente. Veamos el cdigo que hemos puesto: if (imagenActual==total) { imagenActual=0; } imagenActual++; //Cambiamos el texto textoDiapositiva.titulo_txt.text=cargadorTexto.data['titulo'+imag enActual]; textoDiapositiva.descripcion_txt.text=cargadorTexto.data['descrip cion'+imagenActual]; //Y cambiamos la imagen cargadorImagen.load(new URLRequest ("imagenes/imagen"+imagenActual+".jpg")); Lo primero que hacemos es comprobar si hemos llegado a la ltima imagen (total), y si es as, volvemos a la primera. Aumentamos el contador de imgenes (imagenActual++). Ahora, tenemos que extraer los valores correspondientes del cargadorTexto. Podemos acceder al contenido del archivo cargado con la propiedad .data. Si adems ese archivo lo forman variables, como en nuestro caso, podemos utilizar data como un array y acceder a una variable concreta escribiendo data['nombreVariable']. Tambin podramos hacerlo como una propiedad (data.nombreVariable). En nuestro caso hemos extrado las variables con el ttulo y la descripcin y las hemos mostrado en los textos textoDiapositiva.titulo_txt y textoDiapositiva.descripcion_txt. Y para acabar, hemos cargado la imagen con el mtodo load del cargadorImagen. Por tanto, cada vez que pasemos por aqu, el cargador reemplazar la imagen que contiene. Observa que hemos elegido unos nombres que contienen el nmero de imagen (tituloX y descripcionX para las variables, e imagenes/imagenX.jpg). Esto nos facilita el trabajo, ya que slo tenemos que cambiar la X por el nmero de imagen que corresponde.
Ejercicios unidad 18: Navegacin - ActionScript Ejercicio 1: Peridico Digital
1. Abre el programa Flash CS4. 2. Haz clic en Archivo Nuevo para crear un nuevo documento. 3. Selecciona Archivo de Flash (AS 3.0) en el dilogo que se abrir y pulsa Aceptar. 4. Se abrir un documento en blanco. Lo guardaremos para darle un nombre y poder guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo Guardar. Dale un nombre (por ejemplo periodico), selecciona una la carpeta donde tienes los swf de las pginas del peridico, que encontrars en la carpeta ejercicios/periodico y pulsa Guardar.
Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + S o haciendo clic en Archivo Guardar.
5. Empecemos a crear el documento. Primero cambiaremos su tamao. Haz clic derecho en cualquier parte del rea de trabajo y selecciona Propiedades del Documento.... 6. Introduce 600 en Anchura y 400 en Altura. Pulsa Aceptar para aplicar los cambios. 7. Inserta 3 nuevas capas utilizando el botn Insertar capa en la lnea de tiempo. 8. Nmbralas de arriba abajo: acciones, hoja, derecha e izquierda.
En la capa acciones introduciremos el cdigo que vamos a utilizar en la lnea de tiempo principal. La capa hoja contendr la animacin de la hoja pasndose.
En las capas derecha e izquierda introduciremos dos movieclips donde cargaremos las pginas que querremos visualizar en cada momento. 9. Nuestro prximo paso ser crear movieclips donde colocaremos las pginas derecha e izquierda. Abre la Biblioteca, si no est ya abierta, desde Ventana Biblioteca y pulsa el botn Nuevo Smbolo situado al pie de esta. 10. Dale el nombre de pagina y selecciona Clip de pelcula. Se crear el clip, pero como no queremos introducir nada en l lo dejaremos vaco y pulsaremos Escena 1 para volver a la Escena principal. 11. Ahora introduciremos instancias del clip pagina en las capas derecha e izquierda. Selecciona la capa derecha y arrastra el smbolo que acabamos de crear de la Biblioteca al Escenario. 12. En el Panel Propiedades cambiaremos las coordenadas de posicin, en X escribiremos 300 y en Y 0. As se colocar el clip en el medio del documento, que es donde se encontrar la esquina superior izquierda de la pgina derecha. 13. Dale el nombre de instancia pagina_derecha. 14. Ahora crearemos una instancia para la pgina izquierda. Selecciona la capa izquierda y arrastra el clip pagina sobre el Escenario. 15. En el Panel Propiedades dale las coordenadas de posicin X 0 e Y 0. 16. Cambia su nombre de instancia a pagina_izquierda.
17. Ahora crearemos el movimiento de la hoja. Para ello crearemos un clip de pelcula que representar la hoja. Haz clic en Nuevo Smbolo (al pie de la Biblioteca) y dale el nombre hoja. Selecciona Clip de pelcula y pulsa el botn Aceptar. 18. Selecciona la herramienta Rectngulo y dibuja un rectngulo en el Escenario. 19. Selecciona le herramienta Seleccin y haz doble clic sobre el rectngulo que acabas de crear para seleccionarlo completamente. 20. En el Panel Propiedades cambia su Ancho a 300 y su Alto a 400 . Colcalo en la posicin X 0 e Y 0. 21. Para que te sea ms cmodo, puedes darle un color de releno al rectngulo. 22. Ahora crearemos la animacin que recrear el movimiento de la hoja. Para ello creamos un nuevo clip, haz clic en el botn Nuevo Smbolo y llmalo hoja_movimiento, selecciona Clip de pelcula y pulsa Aceptar. 23. Entraremos en el modo de edicin del nuevo clip. Arrastra el smbolo hoja que acabamos de crear al Escenario. 24. Primero crearemos la animacin que se reproducir cuando pasemos a la hoja siguiente. As que la posicin inicial de la pgina ser en la parte de la derecha. Cambiamos la posicin desde el Panel Propiedades a X 0 e Y 0. 25. Y le damos al smbolo el nombre de instancia pagina. En este clip cargaremos las pginas para que de la sensacin de que estamos pasando las hojas. 26. Nos colocamos en el fotograma 2 y creamos un nuevo fotograma clave pulsando F6. Dejaremos el fotograma 1 libre para detener la pelcula ah y avanzar al fotograma 2 ms tarde para iniciar la animacin. 27. Nos colocamos en el fotograma 41 y creamos otro fotograma clave (F6), aqu terminar la animacin de la hoja. 28. En el fotograma 41 situaremos el smbolo pagina en las coordenadas X -300 e Y 0. Este sera el punto final de la animacin, con la hoja totalmente pasada. 29. Sobre la lnea de tiempo, hacemos clic derecho, y en el men contextual elegimos Crear interpolacin clsica. Hemos creado la interpolacin. 30. Ahora crearemos el punto intermedio. Nos colocamos en el fotograma 21 y creamos un fotograma clave (de nuevo F6). 31. En este fotograma, seleccionamos el smbolo pagina y modificamos las coordenadas del smbolo en el Panel Propiedades a X 0 e Y 0, y su ancho W a 1 px. 32. Ya tenemos la primera animacin de la hoja. Ahora crearemos la animacin de simular que pasamos a la hoja anterior. Para ello creamos un nuevo fotograma clave en la posicin 42 (que ser la posicin inicial de la hoja) y otro en el fotograma 82 (la posicin final). 33. Igual que antes, colocamos la hoja en su sitio en el fotograma 82, esto es, en la parte derecha. Para ello, selecciona el fotograma y en l haz clic en el smbolo. Modifica las coordenadas del Panel Propiedades a X 0 e Y 0. 34. En la lnea de tiempo, hacemos clic derecho en cualquier fotograma intermedio (por ejemplo, 60) y seleccionamos Crear interpolacin clsica. 35. Ahora crearemos un fotograma clave en el fotograma 62, donde crearemos la posicin intermedia. 36. Modifica las coordenadas a X 0 e Y 0 en el Panel Propiedades, y el ancho W a 1.
37. Ya tenemos la animacin creada. Mejormosla ajustando la aceleracin de sta. Para ello, selecciona un fotograma intermedio de la primera animacin (por ejemplo, 10) y en el Panel Propiedades escribe -100 en el campo Aceleracin. 38. Haz lo mismo para la tercera animacin (en el fotograma 50, por ejemplo). 39. Para la segunda y cuarta animacin (fotogramas 30 y 70, por ejemplo) escribe 100 en Aceleracin.
Ahora s hemos terminado. 40. Ahora crearemos una nueva capa donde introduciremos las acciones. Pulsa el botn Insertar capa y llmala acciones. 41. Crea fotogramas clave en las posiciones 1, 2, 21, 41, 42, 62 y 82. O lo que es lo mismo, en las mismas posiciones en las que encontraras fotogramas claves en la capa de la animacin. 42. Abre el Panel Acciones desde Ventana Acciones selecciona el fotograma 1 y escribe en el Panel Acciones stop();. Haz lo mismo en los fotogramas 41 y 82. Esto es para que la animacin se detenga en el principio del todo y despus de que realice la pasada de hoja. 43. Crearemos las etiquetas de fotograma que indicaba el enunciado. Selecciona el fotograma 2 de la capa donde tienes la animacin y escribe en el Panel Propiedades siguiente. 44. Le damos la etiqueta anterior al fotograma 42 del mismo modo. 45. Ahora slo faltar introducir el cdigo para que se carguen las pelculas. Pero antes colocaremos el clip que hemos creado en la pelcula principal. Haz clic en Escena 1. 46. Ahora selecciona la capa hoja y arrastra el clip de pelcula hoja_movimiento al Escenario. 47. Modifica sus coordenadas en el Panel Propiedades y colcalo en X 300 e Y 0. 48. Dale el nombre de instancia hoja_movimiento para poder referirnos a l desde el cdigo. 49. Ahora pasaremos a introducir el cdigo que necesitamos. Sitate en el fotograma 1 de la capa acciones en la pelcula principal y abre el Panel Acciones (F9). 50. Escribe lo siguiente: 51. stop(); 52. 53. addEventListener("irSiguiente",irSiguiente); 54. function irSiguiente(event) { 55. hoja_movimiento.gotoAndPlay('siguiente'); 56. } 57. 58. addEventListener("irAnterior",irAnterior); 59. function irAnterior(event) {
60. hoja_movimiento.gotoAndPlay('anterior'); } Como se comentaba en el enunciado, al pulsar en los botones de las pginas, se producen los eventos "irAnterior" e "irSiguiente", porque as lo hemos programado en las pginas. Lo que haremos ser escuchar esos eventos, y cuando se produzcan, ir a la etiqueta correspondiende de hoja_movimiento para simular el movimiento. 61. Haz doble clic sobre el smbolo hoja_movimiento para acceder a su lnea de tiempo. 62. En el primer fotograma de la capa acciones, introduce el siguiente cdigo: 63. stop(); 64. 65. var vista:Number=0; 66. var hojasIzquierda:Array=["","contenido_actualidad.swf","cont enido_deportes.swf", 67. "contenido_naturaleza.swf","contenido_ultima.swf"]; 68. var hojasDerecha:Array=["contenido_portada.swf","contenido_ci encia.swf",
"contenido_espectaculos.swf","contenido_politica.swf",""] ; Aqu hemos parado la pelcula y hemos definido las variables que utilizaremos en el resto de la pelcula.
En la variable vista almacenamos el momento en el que nos encontramos, y en los arrays hojasIzquierda y hojasDerecha introducimos los archivos SWF que deberemos cargar. Para ello hemos tenido en cuenta la siguiente tabla: vista hojasIzquierda hojasDerecha 0 portada 1 actualidad ciencia 2 deportes espectaculos 3 naturaleza politica
4 ultima
Acude a esta tabla para entender los siguientes fragmentos de cdigo. 69. Como el cdigo para cargar los archivos SWF va a ser repetitivo, lo simplificaremos creando la siguiente funcin: 70. function cargarSWF(enPagina:MovieClip, archivo:String) { 71. if(archivo!="") { 72. enPagina.visible = true; 73. var loader:Loader; 74. loader = new Loader(); 75. loader.load(new URLRequest(archivo)); 76. loader.contentLoaderInfo.addEventListener(Event.COM PLETE, insertar); 77. function insertar(event):void { 78. enPagina.addChild(loader); 79. } 80. } else { 81. enPagina.visible=false; 82. } } Lo que hace esta funcin es utilizar un objeto Loader para cargar un archivo que indicamos en el parmetro archivo y mostrarlo en la pgina que le indiquemos en enPagina. Adems, si archivo est vaco, oculta la pgina. 83. Por ltimo, en este mismo fotograma, cargamos la primer pgina para que no quede la pgina vaca. Lo ahcemos llamando a la funcin que hemos definido: cargarSWF(pagina, hojasDerecha[vista]); Con esto haremos que en el smbolo pagina (que se encuentra sobre los smbolos pagina_izquierda y pagina_derecha) se cargue la primera hoja del peridico. Recuerda que la variable vista todava tiene el valor 0.
84. Selecciona el fotograma 2 y escribe lo siguiente en el Panel Acciones: 85. with (parent) { 86. cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista+1]); 87. } cargarSWF(pagina, hojasDerecha[vista]); Observa el uso de parent para acceder al smbolo pagina_derecha. Lo empleamos porque este smbolo no est dentro del actual (hoja_movimento, a la que nos referimos como this), si no en el nivel superior, en la pelcula general, que es el elemento padre (parent).
Por tanto, lo que que hacemos es cargar el contenido de la hoja de peridico que se va a ver por detrs de hoja_movimiento en pagina_derecha cunado pasemos la pgina.
Tambin cargamos en el smbolo pagina la hoja actual. 88. Selecciona el fotograma 21 y escribe lo siguiente en el Panel Acciones: 89. cargarSWF(pagina, hojasIzquierda[vista+1]); vista++; En este punto el smbolo pagina se encuentra reducido tanto que es invisible. Aprovechamos y cambiamos el contenido con la siguiente hoja (que se encontrar almacenada en la posicin vista+1).
Aumentamos la variable vista en 1 con vista++; y listo. 90. Selecciona el fotograma 41 y escribe lo siguiente en el Panel Acciones despus de la lnea stop(); 91. stop(); 92. with (parent) { 93. cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista]); }
Aqu actualizamos el contenido del smbolo pagina_izquierda por si decidisemos retroceder en el peridico. As cuando le demos la vuelta a la pgina se ver el contenido correcto. 94. El cdigo en el resto de fotogramas claves es idntico al que hemos visto (pues la accin es similar) pero disminuyendo la variable vista a cada pasada de pgina y permutando las matrices hojasIzquierda y hojasDerecha.
El cdigo en el fotograma 42 es: 95. with (parent) { 96. cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista-1]); 97. } 98. cargarSWF(pagina, hojasIzquierda[vista]); El cdigo en el fotograma 62 es: cargarSWF(pagina, hojasDerecha[vista-1]); vista--; Y el cdigo en el fotograma 82 es: stop(); with (parent){ cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista]); } Prueba evaluativa unidad 18: Navegacin - ActionScript Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. El evento "click" al pulsar un botn se ejecuta nada ms apretar el botn .
a) Verdadero b) Falso 2. Las funciones gotoAndPlay() y gotoAndStop() actuarn del mismo modo si indicamos un nmero de fotograma o si, por el contrario, utilizamos una etiqueta de fotograma. a) Verdadero b) Falso 3. prevFrame() hace que el cabezal de reproduccin avance un fotograma. a) Verdadero b) Falso 4. Cuando estamos referenciando objetos, la propiedad parent nos inidica el contenedor al que pertenece. a) Verdadero b) Falso 5. Una variable de tipo Boolean puede almacenar: a) Cualquier tipo de nmero. b) Verdadero o Falso . c) Una cadena de caracteres alfanumricos. 6. Las variables declaradas en la lnea de tiempo pueden utilizarse en todo el documento. a) Verdadero b) Falso 7. Puedes crear funciones con tantos parmetros como quieras . a) Verdadero b) Falso 8. Todos los objetos que se muestran estn en un contenedor. a) Verdadero b) Falso 9. Para aadir un elemento hijo a un contenedor, podemmos emplear el mtodo... a) addChild() b) setChildIndex()
c) addChildrensAt() 10. Si queremos cargar y mostrar el contenido de un archivo de texto, utilizaremos un objeto del tipo... a) MovieClip b) Loader c) URLLoader
Unidad 19. Formularios - ActionScript (I) 19.1. 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 cmo utilizarlos y 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 hayamos aadido el componente a nuestra pelcula deberemos darle un nombre de instancia para poder acceder a l desde el cdigo y configurar sus opciones en el Panel Propiedades y en el panel Inspector de Componentes:
Unidad 19. Formularios - ActionScript (II) 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: Indica 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 deberemos crear un grfico o clip de pelcula y guardarlo en la Biblioteca. Una vez all lo seleccionamos y haciendo clic derecho sobre l, seleccionamos Vinculacin. Marcamos la casilla Exportar para ActionScript en el cuadro de dilogo que aparecer y le damos un nombre en Identificador. Este nombre es el que deberemos escribir en el campo icon del componente botn. Ni el botn ni el smbolo se ajustar al tamao del otro, as que deberemos 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. Podemos 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. Unidad 19. Formularios - ActionScript (III) 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. ComboBox (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 podemos 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 podremos 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 19. Formularios - ActionScript (IV) 19.2. Botones de Formulario En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar. Imagina que llamamos al componente botn de limpiar btn_borrar, su cdigo asociado sera sencillo: btn_borrar.addEventListener(MouseEvent.CLICK,boton);
function boton(event:MouseEvent):void{ nombre.text = ""; email.text = ""; mensaje.text = ""; } Como puedes ver, hemos creado un escuchador para btn_borrar. Cuando se activa simplemente vaciamos el contenido de los campos de texto que queramos. Tambin podramos iniciar los campos de otra forma: nombre.text = "Escribe aqu tu nombre"; email.text = "Escribe aqu tu e-mail"; mensaje.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 de validar los datos y enviarlos, que ser lo que veamos en el siguiente apartado. txt_aviso.text="Introduce tu nombre"; //Indicamso el error return false; //Devolvemos falso } else if (!chk_condiciones.selected) { //Comprobamos que la casilla est marcada chk_condiciones.stage.focus = chk_condiciones; txt_aviso.text="Debes aceptar las condiciones"; return false; } else { if (esNumero(txt_edad.text)) { //Comprobamos si es un nmero if (Number(txt_edad.text)<18) { //comprobamos si es mayor txt_edad.stage.focus=txt_edad; txt_aviso.text="Tienes que ser mayor de edad"; return false; } else { //Si llega hasta aqu, es que todo se ha validado //Devolvemos true return true; } } else { txt_edad.stage.focus=txt_edad; txt_aviso.text="Introduce tu edad"; return false; }
}
} Como se ve, comprobamos si el campo txt_nombre tiene texto, si la casilla chk_condiciones est marcada, y si txt_edad es un nmero mayor que 18. A esta funcin, la llamaramos al pulsar el botn de envo (btn_enviar). Lo que har ser validar, y si el resultado es correcto, llamar a la funcin que enva los datos (enviarDatos) que veremos en el prximo apartado. btn_enviar.addEventListener('click', validaryEnviar); function validaryEnviar(event):void { if (validarDatos()) { //validamos enviarDatos(); //Y si es True, enviamos } } Unidad 19. Formularios - ActionScript (VI) 19.4. Envo de formularios Vamos a crear el cdigo estndar que nos permite enviar el formulario. Antes de enviar los datos, hemos validado los datos como vimos en el punto anterior. Lo normal, tras rellenar un formulario en una pgina web, es que esta los enve a una pgina dinmica, en PHP o ASP. Esta pgina se encargar de recoger los datos, volverlos a validar, y hacer lo que corresponda con ellos, como guardarlos en una base de datos, o enviar un correo. Con Flash haremos lo mismo. En nuestro ejemplo, enviaremos los datos a enviarCorreo.php. Vamos a utilizar tres objetos: Un objeto URLVariables. Este objeto nos permite componer cmodamente variables de URL, con el formato var1=valor1&var2=valor2&var3=valor3... Un objeto URLRequest. Nos permite configurar la direccin web de envo, cmo se enviarn los datos y asignarle esos datos con un objeto URLVariables. Un objeto URLLoader. Aunque normalmente lo empleamos para obtener informacin de archivos, tambin nos sirve para enviar informacin al archivo indicado como un URLRequest. Veamos el cdigo: //Funcin que se ejecuta al presionar el botn botn de envo function enviarDatos(event:MouseEvent):void {
System.useCodepage = true;//Esta lnea coge la pgina de carcteres //del sistema, para mostrarlos correctamente //Utilizamos un objeto URLVariables para guardar los datos de nuestros campos. var datosFormulario:URLVariables = new URLVariables(); //Definimos los campos y les agregamos el valor de las cajas de texto. datosFormulario.nombre = txtNombre.text; datosFormulario.apellidos = txtApellidos.text; datosFormulario.email = txtEmail.text;
//Con un obj. URLRequest generamos la URL a la que se envand los datos var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php"); //Indicamos el mtodo de envo y le cargamos misVariables. paginaEnvio.method=URLRequestMethod.POST; paginaEnvio.data=misVariables;
//Utilizamos un obj. URLLoader para enviar info. a un archivo externo var cargador:URLLoader = new URLLoader(); //Como siempre, creamos un evento que nos indica si se ha completado //el envo de informacin, y x tanto se han enviado los datos cargador.addEventListener(Event.COMPLETE, envioCompleto); //Utilizamos el evneto IOErrorEvent.IO_ERROR que se lanza cuando ocurre //un error, por lo que los datos no se han enviado cargador.addEventListener( IOErrorEvent.IO_ERROR, errorEnvio ); //Y para acabar, enviamos los datos caragdor.load(paginaEnvio);
} function envioCompleto(event):void { //Si se completa, avisamos del envo y limpiamos campos aviso.text="Envo completo"; txtNombre.text=""; txtApellidos.text=""; txtEmail.text=""; } function errorEnvio(event):void { //Si hay un error, avisamos de ello aviso.text="Se produjo un error, no se ha completado el envo"; }
btn_enviar.addEventListener('click', validaryEnviar); function validaryEnviar(event):void { if (validarDatos()) { //validamos enviarDatos(); //Y si es True, enviamos } } Podemos ver que para crear las variables en el objeto URLVariables, no tenemos ms que escribir el nombre que le queremos dar como una propiedad, y asignarle el valor que queremos guardar en la variable: datosFormulario.nombre = txtNombre.text; datosFormulario.apellidos = txtApellidos.text; datosFormulario.email = txtEmail.text; Al objeto URLRequest, le indicamos el nombre de archivo (nuestra pgina), el mtodo de envio (method), como en los formularios HTML, y los datos (data) que hemos configurado en el objeto URLVariables. var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php");
paginaEnvio.method=URLRequestMethod.POST; paginaEnvio.data=misVariables; Y por ltimo utilizamos el objeto URLLoader para comunicarnos con el archivo cuya ubicacin se indica en el objeto URLRequest. Cargamos la informacin hacia l, y comprobamos si se ha completado el envo o se ha producido un error, para avisar al usuario. El script enviarCorreo.php se encargara de recibir los datos, generar el correo y enviarlo. Nota: Para poder ejecutar una pgina dinmica, como la que enva el correo en PHP, hay que tener instalado un servidor web en el equipo. Por lo que si no lo tienes, no se enviar el correo, aunque tampoco dar ningn error si se encuentra el archivo. Unidad 19. Formularios - ActionScript (VII) 19.5. 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 el botn predeterminado del formulario para que cuando se pulse la tecla Intro sea como si hicisemos clic en l. Escribe la siguiente lnea: //En este caso, debemos de importar la clase para que la reconozca
import fl.managers.FocusManager; var fm:FocusManager = new FocusManager(this); fm.defaultButton = submit_btn; De esta forma haremos que el botn predeterminado sea submit_btn. En este caso, this se refiere a la pelcula principal, pero podemos indicar el contenedor que contenga a nuestro formulario.
Estos conceptos son muy importantes de cara al usuario, ya que muchos estn acostumbrados a cambiar de un control a otro con el Tabulador y a pulsar Intro para enviarlo.
Unidad 19. Formularios - ActionScript (VIII) 19.6. Recuperando informacin XML En este apartado veremos cmo recuperar informacin de un archivo XML. XML es un lenguaje de marcas estructuradas, en el que la informacin se clasifica en elementos y sub elementos, con propiedades y atributos, utilizando etiquetas, de forma muy similar al HTML. De hecho, existe XHTML, que no es ms que HTML que cumple las reglas estrictas del XML. Por ejemplo, nosotros vamos a trabajar con las siguiente informacin XML que tenemos en un archivo, llamado comentarios.xml: <?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> En Flash tenemos el elemento XML. En l almacenamos la informacin con la estructura XML. Este objeto, nos permite recorrer esta informacin de forma organizada. A un elemento XML le podemos asignar directamente la informacin como si fuera un String, pero sin encerrarla entre comillas. Por ejemplo: var miXML:XML = <pedido> <articulo id='1' cantidad='1'> <nombre>Raqueta Tenis</nombre> <precio>33.95</precio> </articulo> <articulo id='2' cantidad='3'> <nombre>Pelota Tenis</nombre> <precio>4.45</precio> </articulo> </pedido>; Pero en nuestro ejemplo, la informacin XML la tenemos en un archivo. Como ya vimos, para cargar informacin de archivos externos necesitamos un elemento URLLoader. Unidad 19. Formularios - ActionScript (IX) Vamos a ver cmo hemos utilizado la informacin del archivo utilizando estos dos elementos: //Para trabajar con datos XML utilizamos un objeto XML var datosXML:XML = new XML(); datosXML.ignoreWhite = true; //Ignora elementos en blanco //Para obtener informacin de un archivo, utilizamos un URLLoader var cargadorXML:URLLoader = new URLLoader(); cargadorXML.load(new URLRequest('comentarios.xml')); //Utilizamos el evento complete para no trabajar hasta que //se haya cargado completamente cargadorXML.addEventListener("complete", archivoCargado); function archivoCargado(ev:Event):void { comentarios_text.text=""; //Convertimos la info leda a XML y se la asignamos al objeto XML
datosXML=XML(cargadorXML.data); var cadena:String; //Con este bucle, reccoremos todos los elementos for (var elemento:String in datosXML.comentario) { //Para cada elemento, cremos una cadena de texto y la mostramos cadena="<a href=\"mailto:"+datosXML.comentario.email[elemento]+"\">"+ datosXML.comentario.autor[elemento]+"</a>: <span class=\"mensaje\">"+
datosXML.comentario.mensaje[elemento]+"</span><br>\n"; comentarios_text.appendText(cadena); } } Comenzamos declarando el objeto XML, al que hemos llamado datosXML porque es lo que contendr. Como todo objeto, tiene una serie de propieades que no vamos a detallar. Hemos utilizado la propiedad ignoreWhitespace, que ignorar aquellos campos que estn en blanco y as no tendremos que preocuparnos por posibles errores. A continuacin, extraemos la informacin del archivo, para lo que hemos utilizado un objeto URLLoader, al que hemos llamado cargadorXML. En su mtodo load le indicamos el archivo a cargar. Adems, como venamos haciendo, para no continuar con el trabajando hasta que no se haya terminado de cargar, utilizamos el evento complete. En l, trataremos la informacin. Llegados a este punto, tenemos la informacin cargada en la propiedad .data del cargador. Como no hemos indicado otra cosa, se ha cargado todo el archivo como texto. Utilizamos la funcin XML() para convertirlo a informacin XML, y se la asignamos a nuestro objeto XML: datosXML = XML(cargadorXML.data); Ahora, ya tenemos datosXML con toda la informacin. Con este objeto es sencillo acceder a ella, listarla, etc. En nuestro ejemplo, si queremos acceder al primer email (posicin 0), lo podemos hacer escribiendo datosXML.comentario.email[0]. Basndonos en eso, hemos echo un bucle for para recorrer todos los elementos, e ir construyendo la cadena de texto que mostramos en la caja de texto. Esta forma requiere que conozcamos la estructura del archivo, saber que se divide en etiquetas <comentario>y que dentro de ella tenemos la etiqueta <email>. Utilizando los ndices, podemos acceder a los distintos elementos de la jerarqua. Por ejemplo:
trace ('datosXML: ',datosXML); //Escribe todo el archivo trace ('datosXML.comentario[1]: ',datosXML.comentario[1]); //Escribe el segundo comentario trace ('datosXML.comentario[1].email: ',datosXML.comentario[1].email); trace ('datosXML.comentario.email[1]: ',datosXML.comentario.email[1]); //Los dos anteriores escriben el email del segundo comentario. En el ejemplo hemos accedido a un archivo .xml, pero podemos hacerlo con cualquier archivo que contenga la informacin XML debidamente estructurada. Por ejemplo, es muy frecuente utilizarlo llamando a un archivo PHP que genera el XML de forma dinmica.
Haremos referencia a este mismo ejemplo al final del tema. Si quieres probarlo, encontrars el archivo XML en la carpeta ejercicios/cargarXMLyCSS. Recuerda, que para poder probarlo antes hay que guardarlo. Unidad 19. Formularios - ActionScript (X) 19.7. HTML y CSS en cajas de texto Si recordamos el ejemplo anterior, tras mostrar el contenido del XML, obtenamos el siguiente texto en comentarios_text, una caja de texto: <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>
Pero lo normal es que si escribimos cdigo HTML es porque queremos que se vea con un determinado formato, no las etiquetas HTML. Para que Flash tome el contenido como HTML, en vez de utilizar la propiedad comentarios_text.text empleamos comentarios_text.htmlText para establecer el texto. Pero no slo queremos ocultar las etiquetas, queremos formatear el texto debidamente utilizando la siguiente hoja de etilos, que tenemos en el archivo estilo_comentarios.css: .mensaje { font-style: italic; color: #2C578F; } a { font-weight: bold; color: #CF406E; } Podemos distinguir dos estilos: uno aplicado a los elementos con la clase mensaje (class="mensaje") y otro aplicado a lso enlaces (<a href...). Como siempre, e independientemente de para qu lo usemos, cargamos la informacin del archivo con un objeto URLLoader, y preparamos el evento complete, para utilizar los datos cuando estn listos: var cargadorCSS:URLLoader=new URLLoader(); cargadorCSS.load(new URLRequest('comentarios.css')); cargadorCSS.addEventListener('complete', estiloCargado) El objeto que nos permite utilizar las propiedades CSS es del tipo StyleSheet. Lo declaramos, y cuando el cargador tenga los datos listos es su propiedad .data, se los asignamos a la hoja de estilo con su mtodo parseCSS. Y para acabar, con la propiedad styleSheet de la caja de texto indicamos que usar nuestra hoja. var miHojaEstilo:StyleSheet = new StyleSheet(); function estiloCargado(event):void { //Convertimos los datos cargados miHojaEstilo.parseCSS(cargadorCSS.data); //E indicamos a la caja de texto que use esta hoja comentarios_text.styleSheet = miHojaEstilo; };
Esto debemos de realizarlo antes de rellenar la caja de texto con HTML, ya que flash no trata igual el HTML si no tiene una hoja de estilo asociada. Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo. O aprovechando las funciones y objetos defininidos, podemos crear un botn para que cargue una nueva hoja: btn.addEventListener('click', cambiarHoja); function cambiarHoja(event) { cargadorCSS.load(new URLRequest('comentarios2.css')); } Como el cargador ya tiene asociado el evento complete, se volver a ejecutar la funcn estiloCargado asignando el nuevo estilo. Ejercicios unidad 19: Formularios - ActionScript Ejercicio 1: Formulario Debers reproducir un formulario Flash: Tambin debers establecer el orden de tabulacin de los objetos y el botn por defecto. Adems, debers darle funcionalidad al botn Reset y Enviar. El primero limpiando los datos del formulario y el segundo recogindolos validndolos y envindolos a un archivo php. El validador del email deber comprobar que la direccin esta correctamente escrita (para ello utiliza funcin indexOf y lastIndexOf).
Ayuda ejercicios unidad 19: Formularios - ActionScript Ejercicio 1: Formulario 1. Abre el programa Flash CS4.
2. Crea un nuevo documento haciendo clic en Archivo Nuevo. 3. Selecciona Documento de Flash en el dilogo que se abrir y pulsa Aceptar. 4. Se abrir un documento en blanco. Lo guardaremos para darle un nombre y poder guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo Guardar. Dale un nombre, selecciona una carpeta y pulsa Guardar.
Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + S o haciendo clic en Archivo Guardar. 5. Primero insertaremos los elementos de formulario que vamos a utilizar, para ello antes tendremos que abrir el Panel Componentes desde Ventana Componentes. 6. Haz clic sobre el elemento User Inteface y arrastra a la Biblioteca los siguientes elementos: Button, CheckBox, ComboBox, Label, RadioButton y TextInput. 7. Ahora que ya tenemos los elementos que necesitaremos vamos a crear instancias de ellos en el Escenario. Arrastra un elemento TextInput y un Label al Escenario. 8. En el Panel Inspector de Componentes (Ventana -- Inspector de Componentes) modificaremos el campo text de Label a Nombre:. Le daremos a TextInput el nombre de instancia nombre_txt. 9. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de Componentes modificamos el campo text de Label a Apellidos: y le damos a TextInput el nombre de instancia apellidos_txt. 10. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de Componentes modificamos el campo text de Label a E-mail: y le damos a TextInput el nombre de instancia mail_txt. 11. Arrastramos un elemento ComboBox al Escenario, en el Inspector de Componentes modificamos el campo data y aadimos la siguiente lista de elementos: 12. word2007 13. excel2007 14. access2007 15. powerp2007 outlook2007 16. En el campo labels introduciremos la siguiente lista de elementos: 17. Microsoft Word 2007 18. Microsoft Excel 2007 19. Microsoft Access 2007 20. Microsoft PowerPoint 2007
Microsoft Outlook 2007 21. Le damos el nombre de instancia producto_cmb. 22. Arrastramos de la Biblioteca tres componentes RadioButton al Escenario, en el Panel Parmetros les daremos los siguientes valores: 23. Botn de opcin 1: 24. nombre de instancia: buscadores_rdo 25. groupName=encontrar 26. label= Buscadores 27. selected=true 28. value=buscadores 29. 30. Botn de opcin 2: 31. nombre de instancia: publicidad_rdo 32. groupName=encontrar 33. label= Publicidad 34. selected=false 35. value=publicidad 36. 37. Botn de opcin 3: 38. nombre de instancia: otros_rdo 39. groupName=encontrar 40. label= Otros: 41. selected=false value= 42. Arrastramos un componente TextInput que situaremos a la derecha del botn de opcin Otros, en el Inspector de Componentes le cambiaremos el campo editable a false y le daremos el nombre de instancia otros_txt. 43. Arrastramos un componente CheckBox al Escenario, en el Inspector de Componentes cambia el campo label a Desea recibir informacin de nuestras novedades, y el campo selected a true.
44. Dale el nombre de instancia info_chk. 45. Arrastra dos componentes Button al Escenario, en el Inspector de Componentes dale a uno el valor Reset en label y el nombre de instancia reset_btn. Al otro llmale enviar_btn y modifica el campo label a Enviar. 46. Ya tenemos todos los objetos de formulario en la pelcula. Selecciona la herramienta Transformacin Libre y modifica los anchos de aquellos elementos que, o bien no se puedan leer completamente, o necesiten ms espacio (como los campos apellidos, email y productos). 47. Una vez tengas el formulario entero haz clic sobre la herramienta Seleccin y emplaza los objetos de manera correcta. 48. Ahora pasaremos a crear las acciones. Para ello creamos una nueva capa haciendo clic en el botn Insertar capa en la lnea de tiempos y la llamamos acciones. 49. Seleccionamos el fotograma 1 de la capa acciones y abrimos el Panel Acciones (Ventana Acciones). 50. Al principio del todo escribimos: 51. stop(); System.useCodepage = true; Paramos la animacin en la primera lnea, no necesitamos que haga nada ms porque no existen ms fotogramas. Si no lo hicisemos estara reproducindose todo el rato el fotograma 1 una vez detrs de otra.
Con la segunda lnea hacemos que Flash utilice la pgina de cdigos tradicional del sistema operativo en el que se ejecuta el reproductor para que los acentos y ees que escribamos se enven correctamente al archivo php que enviar el formulario por mail. 52. Ahora escribe lo siguiente: 53. nombre_txt.tabIndex=1; 54. apellidos_txt.tabIndex=2; 55. mail_txt.tabIndex=3; 56. producto_cmb.tabIndex=4; 57. buscadores_rdo.tabIndex=5; 58. publicidad_rdo.tabIndex=6; 59. otros_rdo.tabIndex=7; 60. otros_txt.tabIndex=8; 61. info_chk.tabIndex=9;
62. reset_btn.tabIndex=10; 63. enviar_btn.tabIndex=11; 64. 65. import fl.managers.FocusManager; 66. var def:FocusManager = new FocusManager (this); 67. def.defaultButton = enviar_btn; 68. nombre_txt.stage.focus=nombre_txt; Esto har que se establezca el orden de tabulacin. Las ltimas lneas establecen el botn Enviar como el botn por defecto y colocan el foco en el campo Nombre. 69. Seguimos con: 70. reset_btn.addEventListener(MouseEvent.CLICK, escuchadorLimpiar); 71. function escuchadorLimpiar(event) { 72. nombre_txt.text=""; 73. apellidos_txt.text=""; 74. mail_txt.text=""; 75. producto_cmb.selectedIndex=0; 76. buscadores_rdo.selected=true; 77. otros_txt.text=""; 78. otros_txt.editable=false; 79. info_chk.selected=true; 80. salida_txt.text=""; } Para limpiar los campos cuando se pulse el botn Reset. Hemos creado un escuchador asociado al botn reset_btn. Dentro del evento click inicializamos todos los campos a sus estados iniciales. 81. Despus escribimos:
82. otros_rdo.addEventListener(Event.CHANGE, escuchadorOtros); 83. function escuchadorOtros(event) { 84. if (otros_rdo.selected) { 85. otros_txt.editable=true; 86. otros_txt.stage.focus = otros_txt; 87. } else { 88. otros_txt.text=""; 89. otros_txt.editable=false; 90. } } Aqu hemos configurado un escuchador para el boton otros_rdo, si este se ecuentra seleccionado otros_txt sera editable y el foco se pasara alli, si no se econtrara seleccionado, se vaca el contenido de otros_txt y deja de ser editable. 91. Ahora escribe la parte de envo: 92. enviar_btn.addEventListener("click", verificar); 93. function verificar(event) { 94. salida_txt.text=""; 95. if (nombre_txt.text.length==0) {//Verificacin del Nombre 96. salida_txt.text="No ha Introducido su nombre"; 97. nombre_txt.stage.focus=nombre_txt; 98. return false; 99. } else if (apellidos_txt.text.length == 0) {//Verificacin del Apellido 100. salida_txt.text="No ha Introducido sus apellidos"; 101. apellidos_txt.stage.focus=apellidos_txt; 102. return false;
103. } else if (!esMail(mail_txt.text)) {//Verificacin del correo 104. salida_txt.text="No ha Introducido un correo electrnico vlido"; 105. mail_txt.stage.focus=mail_txt; 106. return false; 107. } else if (otros_rdo.selected && otros_txt.text.length == 0) {//Verificacin de otros_txt 108. salida_txt.text="Indique dnde nos econtr"; 109. otros_txt.stage.focus=otros_txt; 110. return false; 111. } 112. 113. //Guardamos las variables para el envio 114. var envio:URLVariables = new URLVariables(); 115. envio.nombre=nombre_txt.text; 116. envio.apellidos=apellidos_txt.text; 117. envio.email=mail_txt.text; 118. envio.producto=producto_cmb.selectedItem; 119. if (buscadores_rdo.selected) { 120. envio.encontrar=buscadores_rdo.value; 121. } else if (publicidad_rdo.selected) { 122. envio.encontrar=publicidad_rdo.value; 123. } else if (otros_rdo.selected) { 124. envio.encontrar=otros_txt.text; 125. } 126. envio.masinfo=info_chk.selected; 127. //Envio a la pagina .php 128. var urlPhp:URLRequest=new URLRequest("enviarCorreo.php");
129. urlPhp.method=URLRequestMethod.POST; 130. urlPhp.data=envio; 131. 132. var enviar:URLLoader = new URLLoader(); 133. enviar.addEventListener( Event.COMPLETE, enviado );//Si es enviado, realizara la funcin enviado 134. enviar.addEventListener( IOErrorEvent.IO_ERROR, erroNoEnvio );//Si ocurre un error, realizara la funcin errorNoEnvio 135. enviar.load( urlPhp ); 136. 137. trace(envio); 138. 139. 140. } 141. //Funcin para vereificar el correo 142. function esMail(mail:String) { 143. if (mail.indexOf("@")>0&&mail.indexOf("@")==mail.lastIndexOf ("@")) { 144. if (mail.lastIndexOf(".")>mail.indexOf("@")+1&&mail.lastInde xOf(".")) { 145. return true; 146. } else { 147. return false; 148. } 149. } else { 150. return false; 151. } 152. } 153. 154. //Funcin si s enviado 155. function enviado( e:Event ):void {
156. escuchadorLimpiar(); 157. salida_txt.text="Mensaje enviado!"; 158. } 159. //Funcin si no s enviado 160. function erroNoEnvio( e:IOErrorEvent ):void { 161. salida_txt.text="Error intenta nuevamente."; } Hemos configurado un escuchador para el botn Enviar. Cuando se hace clic en l se ejecuta todo este cdigo.
Presta especial atencin a la validacin del email. 162. El archivo enviarCorreo.php podra tener esta estructura: 163. <?php 164. header("Cache-Control: no-cache, must-revalidate"); 165. $mensaje = $_POST['nombre'] . " " . $_POST['apellidos'] . " "; 166. $mensaje .= "(" . $_POST['email'] . ")\r\n\n"; 167. $mensaje .= "Quiere informacin sobre: " . $_POST['producto'] . "\r\n\n"; 168. $mensaje .= "Conoci la web a travs de " . $_POST['encontrar'] . "\r\n\n"; 169. $mensaje .= ($_POST['masinfo'] ? "S" : "No") . " quiere ms informacin.\r\n"; 170. $cabeceras = "From: webmaster@dominio.com" . "\r\n" . "Reply-To: webmaster@dominio.com" . "\r\n"; 171. mail('nombre@correo.com', 'Formulario', $mensaje, $cabeceras); 172. echo ("exito=true"); ?> Pero esto queda totalmente en tus manos.
Prueba evaluativa unidad 19: Formularios - ActionScript Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. En un mismo grupo de RadioButtons slo uno de ellos puede estar seleccionado. a) Verdadero b) Falso 2. En un mismo grupo de CheckBoxes slo uno de ellos puede estar seleccionado. a) Verdadero b) Falso 3. Podemos emplear el mtodo Alert() para lanzar un aviso al usuario. a) Verdadero b) Falso 4. En esencia, un comboBox y una lista son identicos, aunque en la lista es posible la seleccin de elementos mltiples. a) Verdadero b) Falso 5. Si quisiramos colocar el foco en el elemento miControl de un furmario, utilizaramos... a) miCintro.setFocus() b) miControl.stage.focus = miControl 6. Podemos acceder a los elementos de un objeto XML como propiedades, o utilizando ndices entre corechetes. a) Verdadero b) Falso 7. Es posible asignar un estilo CSS a un campo de texto que no admita HTML.
a) Verdadero b) Falso 8. Para que se muestre la fuente que utilizamos en los textos estticos, dinmicos y de entrada deberemos incorporarla a la Biblioteca. a) Verdadero b) Falso 9. Para mostrar un icono en el componente botn... a) Antes deberemos vincularlo b) Antes deberemos aadirlo al Escenario 10. Para enviar un correo con los datos recogidos en un formulario Flash... a) Debemos de utilizar los objetos de Flash preparados para enviar correos. b) Debemos de enviar los datos a una pgina HTML. c) Debemos de enviar los datos a una pgina PHP o ASP.
Unidad 20. Los Filtros (I) 20.1. Introduccin
Los filtros son una potente herramienta que abre nuevas posibilidades en nuestras animaciones Flash. Su uso aumentar la capacidad de mejorar el aspecto y funcionamiento de nuestros proyectos, aunque 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 el panel Propiedades, el Editor de movimiento y sobre todo 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). Nota: Antes de utilizar el filtro, observars que lo importamos con la sentecia import flash.filters.tipoFiltro;. Esto no es necesario si trabajamos en el panel Acciones, pero s si lo hacemos en otro archivo, por ejemplo, en una clase. 20.2. El Filtro Sombra Utilizando este filtro podremos aadirle una sombra a la imagen:
En la imagen de la derecha vemos la imagen original ms la sombra, en la imagen de la derecha slo se ve la sombra.
Puedes aplicar este filtro y todos los dems desde el panel Propiedades: Sus opciones son las siguientes: Desenfoque X: determina la cantidad de desenfoque horizontal en pixels. Desenfoque Y: determina la cantidad de desenfoque vertical en pixels. Intensidad: determina la intensidad de la sombra (de 0 a 100). Calidad: nmero de veces que se aplica el filtro. Puede tomar los valores baja, media y alta. ngulo: determina el ngulo de la sombra. Distancia: determina la distancia de la sombra al objeto en pixels. Extractor: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo. Sombra interior: booleano, hace que la sombra sea interior. Ocultar Objeto: booleano, esconde el objeto dejando slo la sombra. Color: determina el color de la sombra.
Como hemos dicho, tambin podemos aplicar los filtros desde el Editor de movimiento, tendramos las mismas opciones pero con las grficas propias del editor de movimiento:
Si aplicamos el filtro desde Action Script, los parmetros son los mismos pero el nombre hay que darlo en ingls, los valores correspondientes son los siguientes ( adems del valor alpha): .blurX: determina la cantidad de desenfoque horizontal. .blurY: determina la cantidad de desenfoque vertical. .strength: determina la intensidad de la sombra. .quality: nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente. .angle: determina el ngulo de la sombra. .distance: determina la distancia de la sombra al objeto. .knockout: booleano, activa el filtro extractor, hace que el objeto se vuelva del color del fondo. .inner: booleano, hace que la sombra sea interior.
.hideObject: booleano, esconde el objeto dejando slo la sombra (segunda imagen). .color: determina el color de la sombra (escrito 0xRRVVAA). .alpha: determina la transparencia de la sombra (de 0 a 1). Podremos 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 podriamos crear la sombra directamente con todas sus propiedades en el constructor de este modo: 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. Para practicar la carga y modificacin de filtros te aconsejamos realizar
Unidad 20. Ejercicio paso a paso: Carga y modificacin de filtros Objetivo Cargar filtros mediante ActionScript dndoles las propiedades que queramos. 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. Normalmente no es necesario porque trabajamos en el panel de acciones, pero si lo necesitamos si trabajamos, por ejempolo, en un archivo as externo. 4. Despues de esto escribe: var sombra:DropShadowFilter = new DropShadowFilter(); Hemos creado una variable llamada sombra que es un filtro de Sombra. 5. Como tenemos que asociar el cambio de efecto al botn aplicar, creamos la funcin que controla al evento: 6. btn_aplicar.addEventListener("click", cambiarSombra); 7. function cambiarSombra(event):void { 8.
} 9. Luego accederemos a las propiedades de sombra y le daremos los valores que hay en los campos del formulario. Todo esto, dentro de la funcin que se ejecutar al pusar el botn: 10. sombra.distance = distance_stp.value; 11. sombra.angle = angle_stp.value; 12. sombra.color = 0x000000; 13. sombra.alpha = alpha_stp.value; 14. sombra.blurX = blur_stp.value; 15. sombra.blurY = blur_stp.value; 16. sombra.strength = strength_stp.value; 17. sombra.quality = quality_cmb.selectedItem.data; 18. sombra.inner = inner_chk.selected; 19. sombra.knockout = knockout_chk.selected; sombra.hideObject = hideObject_chk.selected; 20. Finalmente asociamos el filtro sombra que hemos creado a la propiedad filters del clip, tambin dentro de la funcin: pez.filters = [sombra]; Hemos creado una pelcula donde podemos cambiar las propiedades de un filtro dinmicamente.
Unidad 20. Los Filtros (II) 20.3. El Filtro Desenfocar
Utilizando este filtro podremos hacer que la imagen se muestre desenfocada:
Sus opciones son las siguientes: .blurX (Desenfoque X): determina la cantidad de desenfoque horizontal. .blurY (Desenfoque Y): determina la cantidad de desenfoque vertical. .quality (Calidad): nmero de veces que se aplica el filtro. Puede tomar los valores 1, 2 3. Calidad baja, media y alta, respectivamente.
Podremos utilizar el filtro Desenfocar escribiendo el siguiente cdigo: import flash.filters.GlowFilter;
var desenfocar:BlurFilter = new BlurFilter (); desenfocar.blurX = 5; desenfocar.blurY = 5; desenfocar.quality= 3;
miClip.filters = [desenfocar]; Tambin podremos crear el desenfoque directamente con todas sus propiedades en el constructor, de este modo:
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.
Unidad 20. Los Filtros (III) 20.4. 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. Podremos utilizar el filtro Iluminado escribiendo el siguiente cdigo: import flash.filters.GlowFilter;
miClip.filters = [iluminado]; Tambin podramos crear la iluminacin directamente con todas sus propiedades en el constructor, de este modo: 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 20. Los Filtros (IV) 20.5. 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.
Unidad 20. Los Filtros (V) 20.6. 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.GradientGlowFilter;
var iluminado:GradientGlowFilter = new GradientGlowFilter();
miClip.filters = [iluminado]; Tambin podras crear la iluminacin directamente con todas sus propiedades en el constructor de este modo: 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 20. Los Filtros (VI) 20.7. 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. Podremos 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 podremos 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.
Unidad 20. Los Filtros (VII) 20.8. 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 ajustaColor:ColorMatrixFilter = new ColorMatrixFilter(miMatriz);
miClip.filters = [ajustaColor]; 20.9. 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;
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.
Ejercicios unidad 20: Los Filtros Ejercicio 1: Selector de Filtros Debers reproducir la pelcula Flash: Utiliza el archivo fuente filtros.fla que encontraras en la carpeta ejercicios/filtros del curso. Como ya hemos visto, averiguar los filtros que afectan a un clip es realmente complicado, debers idear una forma para poder gestionarlos y mantener los que estn activos cada vez que se pulse uno de los botones. No debers reproducir el aspecto de los filtros, puedes personalizarlos como ms te guste.
Ayuda ejercicios unidad 20: Los Filtros
Ejercicio 1: Selector de Filtros 1. Abre el archivo filtros.fla que encontrars en la carpeta ejercicios/filtros del curso. 2. Haz clic en el primer fotograma de la capa acciones, abre el Panel Acciones desde Ventana Acciones o pulsando la tecla F9. Aqu introduciremos el cdigo necesario para darle funcionalidad a la pelcula. 3. Ahora crearemos unas cuantas variables para saber en cada momento si un filtro se encuentra activo o no. Escribe lo siguiente a continuacin: var filtroSombra:Boolean = false; var filtroDesenfocar:Boolean = false; var filtroIluminado:Boolean = false; var filtroBisel:Boolean = false; var filtroIluminadoDeg:Boolean = false; var filtroBiselDeg:Boolean = false; var filtroAjustarColor:Boolean = false; 4. A continuacin, definimos cada uno de los filtros, ya que sus propiedades no cambian: 5. var sombra:DropShadowFilter=new DropShadowFilter(20,70,0x000000,0.5,5,5,10,3); 6. var desenfocar:BlurFilter=new BlurFilter(5,5,3); 7. var iluminado:GlowFilter=new GlowFilter(0xFFFF00,0.7,20,20,50,3); 8. var bisel:BevelFilter=new BevelFilter(1,45,0xFFFFFF,0.5,0x000000,0.5,5,5,10,3,"inne r"); 9. var iluminadoDeg:GradientGlowFilter=new GradientGlowFilter(0,45,[0xFFFFFF,0xFF0000],[0,1],[0,255] ,100,100,2,3,"outer"); 10. var biselDeg:GradientBevelFilter=new GradientBevelFilter(3,45,[0x0000FF,0xFF0000,0xFFFFFF],[1, 0,1],[0,128,255],20,20,3.4,3,"inner"); 11. var ajustarColor:ColorMatrixFilter=new ColorMatrixFilter([0.250807255506516,0.00463615544140339, 0.684556603431702,0,34.8300018310547,0.271924287080765,0. 806314527988434,-0.13823889195919,0,34.8300018310547,- 0.359950125217438,0.976227760314941,0.323722183704376,0,3 4.8299980163574,0,0,0,1,0]);
12. Ahora, para cada botn deberemos creamos la funcin que alterna la variable que indica si est activo. Para ello la negamos. Despus llamamos a la funcin mostrarFiltros, que es la que se encarga de aplicar los filtros al elemento. sombra_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarSomb ra); function aplicarSombra(event:MouseEvent):void { filtroSombra=! filtroSombra; mostrarFiltros(); }
desenfocar_btn.addEventListener(MouseEvent.MOUSE_UP,aplicar Desenfocar); function aplicarDesenfocar(event:MouseEvent):void { filtroDesenfocar=! filtroDesenfocar; mostrarFiltros(); }
iluminado_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarI luminado); function aplicarIluminado(event:MouseEvent):void { filtroIluminado=! filtroIluminado; mostrarFiltros(); }
bisel_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarBisel ); function aplicarBisel(event:MouseEvent):void { filtroBisel=! filtroBisel; mostrarFiltros(); }
iluminadoDeg_btn.addEventListener(MouseEvent.MOUSE_UP,aplic arIluminadodeg); function aplicarIluminadodeg(event:MouseEvent):void {
biselDeg_btn.addEventListener(MouseEvent.MOUSE_UP,aplicarBi seldeg); function aplicarBiseldeg(event:MouseEvent):void { filtroBiselDeg=! filtroBiselDeg; mostrarFiltros(); }
ajustarColor_btn.addEventListener(MouseEvent.MOUSE_UP,aplic arColor); function aplicarColor(event:MouseEvent):void { filtroAjustarColor=! filtroAjustarColor; mostrarFiltros(); } 13. Finalmente definiremos la funcin mostrarFiltros que se ejecutar cada vez que se pulse un botn. Evala cada variable apra decidir si aplica el filtro o no: 14. function mostrarFiltros() { 15. var matrizFiltros:Array=[]; 16. if (filtroSombra) { 17. matrizFiltros.push(sombra); 18. } 19. if (filtroDesenfocar) { 20. matrizFiltros.push(desenfocar); 21. } 22. if (filtroIluminado) { 23. matrizFiltros.push(iluminado); 24. } 25. if (filtroBisel) {
26. matrizFiltros.push(bisel); 27. } 28. if (filtroIluminadoDeg) { 29. matrizFiltros.push(iluminadoDeg); 30. } 31. if (filtroBiselDeg) { 32. matrizFiltros.push(biselDeg); 33. } 34. if (filtroAjustarColor) { 35. matrizFiltros.push(ajustarColor); 36. } 37. miClip.filters=matrizFiltros; } Al principio de la funcin creamos una variable de tipo Array que almacenar los filtros activos (los que se encuentren a true). Luego utilizando el condicional if vemos si el filtro se encuentra activado, en caso afirmativo, creamos el filtro (con las opciones que pusimos la principio) e introducimos el filtro en la matriz matrizFiltros.
Al final volcamos los filtros guardados en matrizFiltros en la propiedad filters de miClip.
Hemos conseguido que se puedan cargar y descargar los filtros con una simple variable que evala si el filtro se encuentra activo o no.
Prueba evaluativa unidad 20: Los Filtros Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. El color 0x00FF00 correspondera a: a) El color Rojo. b) El color Verde. c) El color Azul. 2. Es posible combinar ms de un efecto en un objeto. a) Verdadero b) Falso 3. Podemos asociar tantos filtros como queramos a un smbolo de tipo grfico. a) Verdadero b) Falso 4. La funcin push() introduce un elemento en una matriz en ltimo puesto. a) Verdadero b) Falso 5. La propiedad filters de un objeto no puede editarse directamente. a) Verdadero b) Falso 6. La propiedad filters de un objeto contiene una matriz de filtros aplicados a dicho objeto. a) Verdadero b) Falso 7. Al aplicar o modificar un filtro ste no se redibujar directamente sobre el objeto. a) Verdadero b) Falso 8. Para poder modificar un filtro deberemos recordar su posicin en la matriz de filtros.
a) Verdadero b) Falso 9. La propiedad knockout de los filtros hace que el objeto desaparezca y reste su silueta al filtro aplicado. a) Verdadero b) Falso
Unidad 21. Vdeo (I) 21.1. Introduccin
Con Flash cada vez es ms fcil aadir vdeos a nuestras presentaciones o webs. En particular Flash CS4 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 cules son las mejores alternativas.
21.2. 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 aspecto del reproductor:
La siguiente pantalla te mostrara la informacin del video que vamos a exportar, donde se importara, etc:
Ahora podremos aadir nuestros Puntos de referencia desde el panel Inspector de Componentes, en la opcin cuePoints.
Desde aqu podremos configurar puntos en nuestra pelcula.
Unidad 21. 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 vemos 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. 21.3. 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 FLVPlayback. Arrastra un componente FLVPlayBack al Escenario. Desde el Panel Inspector de componentes podrs configurarlo. All encontrars las siguientes opciones:
align: especifica el diseo del vdeo. Por ejemplo, lo podemos centrar con center. 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. 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. preview: Permite obtener una previsualizacin desde una imagen png. scaleMode: Indica si se altera la escala del vdeo: si muestra su tamao original, si se ajusta al tamao de la escena, etc... skin: desde aqu podemos 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.
skinBackgroundAlpha establece la transparencia del fondo del skin, y skinBackgroundColor su color. source es el archivo de vdeo que se mostrar en el reproductor. volume: de 0 a 100. Indica el volumen mximo del vdeo. A parte de las que se muestran en el panel, existen otras propiedades que pueden sernos tiles: autoRewind: puede tomar los valores true o false. Indica si el vdeo deber volver a la posicin inicial despus de haberse reproducido completamente, o tras hacer un stop. 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. totalTime: indica el tiempo total del vdeo. Recuerda que todas estas propiedades son accesibles desde ActionScript. 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 21. Vdeo (III) 21.4. 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 cules 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.bufferingBar = 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. 21.5. Crear Controles Propios
Crear controles propios no es muy complicado en Flash CS4. 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: miBoton.addEventListener(MouseEvent.MOUSE_UP,pararContinuar); function pararContinuar(event:MouseEvent) { 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: miBoton.addEventListener(MouseEvent.MOUSE_UP,reproducirInicio); function reproducirInicio(event:MouseEvent) { 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 21. Vdeo (IV) 21.6. 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: import fl.video.MetadataEvent; //Necesitamos el importar
miVideo.addEventListener(MetadataEvent.CUE_POINT,eventosVideo); function eventosVideo(puntoRef:MetadataEvent ) { if (puntoRef.info.parameters) {
mensaje.gotoAndPlay(puntoRef.info.parameters["fotograma"]); } } Lo que hacemos en la conidicin, es comprobar si hay informacin sobre los parmatros (.info.parameters). Si es as, sacamos la informacin del parmetro llamndolo por su nombre y actuamos en consecuencia. Lo que hemos hecho, es hacer que el parmetro fotograma nos indique la etiqueta a la que queremos desplazar el cabezal de mensaje. 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);
Ejercicios unidad 21: Vdeo Ejercicio 1: Mi Vdeo Utiliza el archivo fuente video.fla que encontrars en la carpeta ejercicios/video del curso. Tu tarea consistir en importar el video video.mov que encontrars en la misma carpeta y crear 6 puntos de navegacin, en los segundos 0, 10, 20, 30, 40 y 50. Luego debers aadirles funcionalidad a los botones mediante ActionScript.
Ayuda ejercicios unidad 21: Vdeo Ejercicio 1: Mi Vdeo 1. Abre el programa Flash CS4. 2. Crea un nuevo documento haciendo clic en Archivo Nuevo. 3. Selecciona Documento de Flash en el dilogo que se abrir y pulsa Aceptar. 4. Se abrir un documento en blanco. Lo guardaremos para darle un nombre y poder guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo Guardar. Dale un nombre, selecciona una carpeta y pulsa Guardar.
Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + S o haciendo clic en Archivo Guardar. 5. Haz clic en Archivo Importar Importar Vdeo para comenzar la importacin. 6. Pulsa el botn Examinar en la ventana que se abrir y busca el archivo video.mov, haz clic en Abrir cuando lo encuentres. 7. Ahora deberemos insertar los puntos de referencia, hacemos clic en Iniciar Adobe Media Encoder.
8. Aadiremos el video al que queremos insertar los puntos de referencia, el video tiene que estar en formato .flv o .f4v sino no lo reconocer, una vez aadido hacemos clic en la pestaa de ajustes preestablecidos y pulsamos Editar ajustes de exportacin.
9. Una vez hecho esto hacemos clic en mostrar avanzado.
10. Ahora ya podemos insertar nuestros puntos de referencia en el hueco que aparecio debajo de la previsualizacion del video.
11. Pulsa el botn para aadir un punto de referencia, llmalo 1 y dale el tipo Navegacin . 12. Sita el cabezal de reproduccin el el segundo 10 y pulsa el botn , llama al punto de referencia 2 y dale el tipo Navegacin. 13. Sita el cabezal de reproduccin el el segundo 20 y pulsa el botn , llama al punto de referencia 3 y dale el tipo Navegacin. 14. Sita el cabezal de reproduccin el el segundo 30 y pulsa el botn , llama al punto de referencia 4 y dale el tipo Navegacin. 15. Sita el cabezal de reproduccin el el segundo 40 y pulsa el botn , llama al punto de referencia 5 y dale el tipo Navegacin. 16. Sita el cabezal de reproduccin el el segundo 50 y pulsa el botn , llama al punto de referencia 6 y dale el tipo Navegacin. 17. Pulsa Aceptar cuando ya tengas los puntos de referencia insertados. 18. Una vez terminado pulsamos Inciar Cola, esto guardara nuestro video con los puntos de referencia ya insertados en el.
19. Ahora buscamos el video que acabamos de crear en nuestra pantalla de Flash y pulsamos siguiente.
20. Selecciona Ninguno en el desplegable Aspecto y pulsa Siguiente. 21. Haz clic en Finalizar y el vdeo comenzar a importarse. 22. Una vez importado se aadir al Escenario. Borrarlo, pues ya tenemos una instancia de FLVPlayback en el Escenario. Para ello, seleccinalo y pulsa la tecla Suprimir.
23. Selecciona el componente FLVPlayback que haba en el Escenario y accede a sus propiedades en el Inspector de Componentes. 24. Busca la propiedad source y haz clic sobre ella para introducir un valor. 25. Busca el archivo que se ha creado (video.flv) y seleccinalo.
Ya hemos asociado el video al componente. Observa que su nombre de instancia es miVideo Ahora pasaremos a darle funcionalidad a los botones. 26. Ahora le damos un nombre de instancia a cada boton e insertamos las acciones en otra capa llamada acciones: miVideo.autoRewind=true; //Para que al pulsar STOP vuelva //al principio //Boton retroceso << retro_rapido.addEventListener(MouseEvent.MOUSE_UP,retroce der); function retroceder(event:MouseEvent):void { miVideo.seekToPrevNavCuePoint(); } //Boton stop [] btnStop.addEventListener(MouseEvent.MOUSE_UP,detener); function detener(event:MouseEvent):void { miVideo.stop(); } //Boton play > btnPlay.addEventListener(MouseEvent.MOUSE_UP,reproducir); function reproducir(event:MouseEvent):void { miVideo.play(); } //Boton pausa || btnPause.addEventListener(MouseEvent.MOUSE_UP, pausar); function pausar(event:MouseEvent):void { miVideo.pause(); } //Boton avance >> avance_rapido.addEventListener(MouseEvent.MOUSE_UP, avanzar); function avanzar(event:MouseEvent):void { miVideo.seekToNextNavCuePoint(); } //Volumen //Subir + vol_mas.addEventListener(MouseEvent.MOUSE_UP, subirVolumen); function subirVolumen(event:MouseEvent):void { if (miVideo.volume<100) { miVideo.volume=miVideo.volume+10; } } //Bajer - vol_men.addEventListener(MouseEvent.MOUSE_UP, bajarVolumen); function bajarVolumen(event:MouseEvent):void { if (miVideo.volume>0) { miVideo.volume=miVideo.volume-10; } }
Prueba evaluativa unidad 21: Vdeo Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Flash puede importar los siguientes tipos de archivo: a) avi y mpeg. b) mov, wmv y dv. c) Todos los anteriores. 2. Podemos utilizar la funcin seekToNavCuePoint("puntoRef") para saltar a puntos de referencia de tipo... a) de Evento. b) de Navegacin. 3. A qu valor cambiaremos la propiedad autoPlay si queremos que se reproduzca el vdeo nada ms cargarse?. a) True . b) False . 4. Podemos utilizar la funcin seek() para saltar a un segundo determinado del vdeo. a) Verdadero. b) Falso. 5. Si el vdeo esta en estado de DISCONNECTED... a) Es que no se ha producido un error de conexin y no podr visualizarse. b) Es que aun no se le ha asignado una ruta a la propiedad contentPath . 6. La funcin seekToNavCuePoint("puntoREF") se sita en un punto de referencia ya definido y comienza la reproduccin a partir de ah. a) Verdadero. b) Falso. 7. Podemos asignar un nmero indeterminado de parmetros a los puntos de referencia para consultarlos ms tarde a travs de ActionScript. a) Verdadero. b) Falso.
8. El componente SeekBar muestra el porcentaje de vdeo almacenado en el buffer. a) Verdadero. b) Falso. 9. Adems de elegir el aspecto de los controles antes de importar el vdeo, tambin es posible editarlo cuando ya est importado y se encuentra en el Escenario . a) Verdadero. b) Falso. 10. La propiedad skinAutoHide sirve para: a) Esconder los controles del vdeo si no tiene el cursor sobre ellos. b) Hacer que los controles no puedan taparse por ningn otro objeto del escenario.
Unidad 22. Juegos (I) 22.1. 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. 22.2. 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, scaleX e scaleY. 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 scaleX e scaleY cambian el tamao, pero de forma porcentual, donde 1.0 equivale al 100%. Podemos utilizar estas propiedades para hacer un clip el doble de grande que era, por ejemplo: miClip.scaleX = 2; miClip.scaleY = 2; Har que su visualizacin sea del doble (200%). 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;
var posicionDeClipHorizontal:Number = miClip.x; var posicionDeClipVertical:Number = 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. Aqu hemos creado un clip de pelcula con tres posiciones, parada, 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.addEventListener(MouseEvent.MOUSE_UP,iniciarMovimiento); function iniciarMovimiento(event:MouseEvent):void{ if (miClip.x <= 10) { miClip.gotoAndStop("derecha"); derecha = true; } if (miClip.x >= 495) { miClip.gotoAndStop("izquierda"); izquierda = true; } }
function desplazar(event):void{ 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 el evento ENTER_FRAME. 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 a lo largo del tema. Nota: Recuerda que el evento ENTER_FRAME se produce de forma continua y constante, normalmente varias veces por segundo. Hemos utilizado las variables derecha e izquierda (de tipo booleano) para evaluar si el objeto debe desplazarse. En el evento ENTER_FRAME 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. Realiza el paso a paso de rotacin para ver mejor como funciona. Unidad 22. Ejercicio paso a paso: Rotacin
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. miClip.x = 30; 7. 8. 9. miClip.addEventListener(MouseEvent.MOUSE_UP,rot); 10. function rot(event:MouseEvent):void{ 11. if (miClip.x <= 30) { 12. miClip.rotation = 10; 13. derecha = true; 14. } 15. if (miClip.x >= 515) { 16. miClip.rotation = -10; 17. izquierda = true; 18. } 19. } 20. miClip.addEventListener(Event.ENTER_FRAME,para) 21. function para(event):void{ 22. if (derecha) { 23. if (miClip.x < 515) { 24. miClip.x = miClip.x + 6; 25. }
40. Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter. Como puedes observar el cdigo es idntico al anterior pero cambiando las sentencias de salto de fotograma por cambios de rotacin en el clip.
Unidad 22. 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:Number = Math.atan2(x, y); Nota: Hay que tener en cuenta que el ngulo calculado est expresado en radianes. 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:Number = Math.atan2(x 1 - x 2 , y 1 - y 2 ); 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 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.rotation = grados + 90; Desde luego la suma que hemos realizado es consecuencia directa de que el objeto este orientado inicialmente hacia 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 22. 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 addChild. Recordemos que esta funcin aade un elemento (hijo) a la lista de visualizacin de un contenedor (padre). Si omitimos el objeto, lo aadimos a la pelcula general. Tiene la siguiente sintaxis: miContenedor.addChild(objeto); Como ya vimos, esto lo empleabamos para cargar agregar archivos externos. Pero ahora queremos cargar elementos que ya tengamos en la biblioteca. Para poder incluir un clip desde la biblioteca, antes deberemos crear una clase para poder acceder a l desde ActionScript. Puedes hacerlo haciendo clic derecho sobre el elemento en la Biblioteca. Selecciona Propiedades (Botn Avanzado). Aqu, marcamos la opcin Exportar para ActionScript, y le damos el nombre de la clase en Clase:. Recuerda este nombre, porque es el que utilizaremos para crear los objetos. Con esto, hemos creado la una clase (en la imagen, la clase miClip). Como no hemos asociado nada de cdigo, esta clase se comportar exacatamente como un MovieClip, ya que es su clase base (caja de texto Clase base). Ahora, para agreagar estos elementos, slo tenemos que crear un nuevo objeto de la clase, y agregarlo al contenedor: var miObjetoClip:miClip = new miClip; miContenedor.addChild(miObjetoClip);
Para eliminar clips insertados mediante addChild puedes utilizar removeChild() o removeChildAt(), que comentamos al hablar de los contenedores. miContenedor.removeChild(miClip); Recuerda que antes de quitar un elemento, es recomendable borrar sus escuchadores de eventos. Realiza el ejercicio paso a paso Agregar objetos dinmicamente para practicar mejor estas funciones, y crear el ejemplo anterior. Unidad 22. Ejercicio paso a paso: Agregar objetos dinmicamente 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 Propiedades - botn Avanzado. 4. Se abrir una ventana donde debers hacer clic en la opcin Exportar para ActionScript. 5. Deja estrella en el campo clase y pulsa OK. 6. Selecciona el primer fotograma de la Capa 1 y escribe el siguiente fragmento de cdigo en el Panel Acciones (tecla F9): 7. var contenedor:Sprite=new Sprite; //Creamos un contenedor addChild(contenedor); //Y lo mostramos en la escena Con esto creamos una objeto contenedor Sprite para que este contenga las estrellas. Usaremos frecuentemente contenedor.numChildren para saber cuntas estrellas se muestran. 8. Ahora para el botn de aadir estrellas (btn_aadir), aadiremos el siguiente codigo: 9. btn_aadir.addEventListener(MouseEvent.CLICK, aadir); 10. function aadir(event):void { 11. if (contenedor.numChildren<30) { // si el contenedor contiene menos de 30 estrellas
12. //podemos aadir ms 13. var miEstrella:estrella=new estrella; // creamos una estrella en miEstrella 14. var posY:Number; //creamos una variable para calcular la posicion Y 15. var posX:Number; // creamos otra variable para calcular la posicion X 16. // calculamos la posicion "y" e "x" en funcirelacin con el nm. de estrellas 17. posY=Math.floor(contenedor.numChildren/6)*miEstrella.heig ht; 18. posX=(contenedor.numChildren%6)*miEstrella.width; 19. miEstrella.x=posX; // asignamos las variables de las posiciones a las coordenadas 20. miEstrella.y=posY; // de posicion de la estrella 21. contenedor.addChild(miEstrella); // por ultimo aadimos la estrella al contenedor 22. } 23. } Observa como calculamos las posiciones x e y: Para la posicin Y, dividimos contenedor.numChildren (nmero de hijos que contiene el contenedor) entre 6, que ser el nmero mximo de estrellas que ponemos en una fila, lo que nos indica en qu fila tendr que ir la nueva estrella. El resultado lo multiplicamos por miEstrella.height (alto de la estrella), y esa ser la distancia con la parte superior (.y). Para la posicin X, calculamos el resto (%) de numChildren entre 6, lo que nos indica las estrellas que hay en la fila. Lo multiplicamos por miEstrella.width (ancho de la estrella), para calcular la distancia con el lado izquierdo (.x). 24. Ahora para el botn de quitar estrellas aadimos el siguiente cdigo: 25. btn_quitar.addEventListener(MouseEvent.CLICK, quitar); 26. function quitar(event) {
27. if (contenedor.numChildren) { // si hay ms de 0 hijos devolvera el valor true 28. // quitamos siempre numChildren - 1, que es el ltimo elemento aadido 29. contenedor.removeChildAt(contenedor.numChildren-1); 30. } } El mtodo contenedor.removeChildAt borra el elemento con el ndice dado. Como queremos borrar el ltimo ndice, lo calculamos con contenedor.numChildren-1. Restamos uno, porque el nidice es en base 0. Es decir, si hay dos elementos (nidces 0 y 1), numChildren devolver 2. Ya hemos creado una pelcula que aade un nmero concreto de elementos automatizadamente.
Unidad 22. Juegos (IV) 22.3. Interaccin con el ratn 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, como vimos en el primer ejercicio paso a paso de la unidad 18, en el cual usabamos estas dos propiedades. La funcin startDrag permite varios parmetros: miObjeto.startDrag(bloqueaCentro, rectngulo); En bloqueaCentro podremnos pasarle un valor booleano (true o false) que indicar si el arrastre se realizar desde el centro del clip (true) o desde el punto donde hizo clic el usuario (false). El otro parmetro, rectngulo, nos permite definir los lmites de la zona donde podemos arrastrar. 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 objeto se ha soltado el objeto arrastrado: miObjeto.addEventListener('mouseDown', arrastrar); function arrastrar(event):void { miObjeto.startDrag(); }
miObjeto.addEventListener('moseUp', soltar); function soltar(event):void { miObjeto.stopDrag(); trace(miObjeto.dropTarget); } Este cdigo devolver al Panel Salida el tipo de objeto (podemos utilizar miObjeto.dropTarget.name si queremos saber el nombre de instancia) sobre el cual se ha soltado. Si no hay ningun objeto, devolver NULL.
Realiza el ejercicio paso a paso de Arrastre y Orientacin de objetos para practicar conceptos que hemos visto hasta ahora. Unidad 22. Ejercicio paso a paso: Arrastre y orientacin de objetos Ejercicio paso a paso. 1. Abre el archivo trigonometria.fla que encontrars en la carpeta ejercicios/trigonometra del curso. En l, tenemos dos objetos con los nombre de instancia pelota y nave. 2. Crea una nueva capa para aadir el cdigo. 3. Aadiremos primero el cdigo para hacer que la pelota se pueda arrastrar y colocar con el ratn. Selecciona el primer fotograma de la nueva capa y abre el Panel Acciones (tecla F9). Escribe el siguiente fragmento de cdigo: 4. pelota.addEventListener(MouseEvent.MOUSE_DOWN, arrastrarPelota); 5. function arrastrarPelota(event:MouseEvent):void { //al pulsar el botn 6. pelota.startDrag(); //Comenzamos a arrastrar 7. } 8. 9. pelota.addEventListener(MouseEvent.MOUSE_UP, soltarPelota); 10. function soltarPelota(event:MouseEvent):void { //Al soltarlo 11. pelota.stopDrag(); //Dejamos de arrastrar } 12. Ahora haremos que la nave se oriente hacia la pelota en cada momento (realmente lo que haremos ser asociar el cdigo al evento onEnterFrame para que se refresque a cada vuelta al fotograma). Abre el Panel Acciones y escribe los siguiente: 13. nave.addEventListener(Event.ENTER_FRAME, orientarHaciaPelota); 14. function orientarHaciaPelota(event):void { 15. //A partir de las coordenadas de cada objeto, calculamos el ngulo
16. var radianes:Number = Math.atan2((pelota.y- nave.y), (pelota.x-nave.x)); 17. //Lo convertimos se radianes a grados 18. var grados:Number=Math.round(radianes*180/Math.PI); 19. //Y rotamos la nave esos grados 20. nave.rotation=grados; } Lo que hemos hecho en un principio es, como vimos en la teora, es calcular el ngulo que hay entre las coordenadas de la pelota y las de la nave. El ngulo obtenido, convertido en grados, ser lo que hay que rotar (rotation) la nave para que apunte a la pelota. Nota: Observa que inicialmente la nave est orientada a la derecha, as que no har falta solventar el desfase de ngulo.
Otra cosa que nos ser de gran ayuda es 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 mouseX y mouseY: var coordenadaX:Number = mouseX; var coordenadaY:Number = mouseY;
Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratn normal por uno de nuestro agrado. Para ello tenemos que escribir muy pocas lneas: Mouse.hide(); //Ocultamos el cursor verdadero addEventListener(Event.ENTER_FRAME,cambiarCursor); function cambiarCursor(event):void { texto.contador_txt.text="("+mouseX+", "+mouseY+")";
texto.x = mouseX; //Asignamos las coordenadas texto.y = mouseY; //Al elemento de texto miCursor.x = mouseX; //Y al clip que har de cursor miCursor.y = mouseY; } Comenzamos ocultando el cursor verdadero, con el mtodo Mouse.hide();. En la bliblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como cursor, y texto, otro clip en el que mostramos las coordenadas. Como queremos que ambos objetos sigan al cursor real, en un evento repetitivo como enterFrame, les asignamos a ambos las coordenadas del ratn. Podemos volver a visualizar el ratn, por ejemplo, porque cambiamos de fotograma, con el cdigo: Mouse.show();
Unidad 22. Juegos (V) 22.4. Interaccin del Teclado
Podemos aadir a nuestras pelculas interaccin con las teclas pulsadas, el procedimiento es muy sencillo, basta con detectar los eventos que se producen al pulsar las teclas y saber qu tecla lo ha originado. Cuando recogemos un evento de teclado, disponemos del mtodo .keyCode, que nos indica la tecla que se ha pulsado. Dependiendo de la que sea, haremos una cosa u otra. Por ejemplo: addEventListener(KeyboardEvent.KEY_DOWN,direccion); function direccion(tecla:KeyboardEvent):void{ //Es importante especificar que es un vento del tipo KeyboardEvent //para poder emplear el mtodo .keyCode. switch (tecla.keyCode){ case Keyboard.RIGHT: //mover hacia la derecha break; case Keyboard.LEFT: //mover hacia la izquierda break; } } 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. Siempre precedido por Keyboard. Los eventos de teclado que podemos emplear son: KeyboardEvent.KEY_DOWN ("keyDown") - Cuando se pulsa una tecla. KeyboardEvent.KEY_UP ("keyDown") - Cuando se suelta.
Recordemos el ejemplo que vimos al principio del tema. Esta vez, lo vamos a cambiar para mover el objeto con las teclas en vez de con el ratn:
Nota: Si no responde al teclado, haz clic primero para que tome el foco. El codigo que hemos incluido es el siguiente: var izquierda:Boolean=false; var derecha:Boolean=false; miClip.gotoAndStop("parado");
//Detectamos el evento al pulsar tecla, y marcamos //La direccin del movimiento addEventListener(KeyboardEvent.KEY_DOWN,direccion); function direccion(tecla:KeyboardEvent):void { switch (tecla.keyCode) { //Dependiendo de la tecla, indicamos case Keyboard.RIGHT : //una direccin u otra derecha=true; break; case Keyboard.LEFT : izquierda=true; break; } }
//En el evento onEnterFrame, comprobamos si estn activas //Las variables que indican la direcin del movimeinto miClip.addEventListener(Event.ENTER_FRAME, movimiento); function movimiento(event):void { if (derecha) { miClip.gotoAndStop("derecha"); if (miClip.x<490) { miClip.x=miClip.x+7; }
} else if (izquierda) { miClip.gotoAndStop("izquierda"); if (miClip.x>7) { miClip.x=miClip.x-7; }
} } //Detectamos cundo se suelta la tecla addEventListener(KeyboardEvent.KEY_UP, parar); function parar(event):void { derecha=false; //Y paramos el movimiento izquierda=false; miClip.gotoAndStop("parado"); }
Unidad 22. Juegos (VI) 22.5. 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 los mtodos hitTestPoint(x, y) para detectar si una coordenada cae dentro del objeto, y hitTestObject(object) que nos indica si dos objetos se solapan (chocan). 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): miClip.addEventListener(MouseEvent.MOUSE_UP,miFuncion); function miFuncion(event:MouseEvent):void{ if (miClip.hitTestPoint(mouseX,mouseY) { //coincidencia } } Este cdigo evala la posicin del ratn a cada clic, si las coordenadas introducidas en el mtodo hitTestPoint coinciden con el rea de miClip se produce colisin. hitTestPoint admite un tercer parmetro booleano. ste inidca si la colisin se calcula con respecto a al forma del elemento (true) a al rectngulo delimitador del objeto (false). La opcin por defecto es esta ltima. Cuando queremos evaluar si un objeto "choca" con otro, empleamos el mtodo hitTestObject: miClip.hitTestObject(miOtroClip); En ambos casos, el valor devuelto es true, si hay colision, o false si no. 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. Si lo desplazamos antes los objetos pueden quedar solapados, y eso, dependiendo del caso, puede no ser adecuado para nuestro diseo. Esto complica un poco las cosas, pues deberemos calcular primero dnde estarn las corrdenadas del objeto tras moverlo y calcular la colisin antes de moverlo.
miPared.hitTestPoint(coorXfinal_Clip, coorYfinal_Clip); Pero, cmo conocemos las coordenadas de una forma?, cmo averiguo el punto mximo que alcanza en la esquina abajo derecha?. Como siempre, Flash nos soluciona esto incorporando un mtodo a los onjetos de visualizacin que nos devuelve sus medidas. El mtodo getBounds. Haz clic y utiliza las flechas para moverte. Su sintaxis es la siguiente: miClip.getBounds(objetoReferencia); En objetoReferencia indicaremos el objeto cuyo sistema de coordenadas utilizaremos como punto de referencia. Normalmente escribiremos stage, para que las coordenadas dadas sean respecto a la pelcula en general y no sobre un clip en particular. El mtodo nos devuleve un objeto Rectangule. Este tipo de objeto define un rea rectangular, y nos permite conocer la posicin de sus cuatro lados con las siguientes propiedades: .top : lado superior (sera lo mismo que y). .bottom : lado inferior (sera y + altura del objeto). .lef : lado izquierdo (sera lo mosmo que x). .right: lado derecho (sera x ms el ancho). miClip.getBounds(stage).left; miClip.getBounds(stage).right; miClip.getBounds(stage).top; miClip.getBounds(stage).bottom; Realiza el ejercicio paso a paso de Colisin y Movimiento para practicar este concepto. Unidad 22. Ejercicio paso a paso: Colisin y Movimiento Colisin y Movimiento 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. En l encontrars dos elementos: miClip que ser el cuadradito que se desplazar, y fondo, que delimita el rea por el que se puede desplazar. 2. Selecciona el primer fotograma y abre el Panel Acciones, escribe en l lo siguiente: 3. //definimos las variables que vamos a utilizar 4. //Variables que indican la direccin del movimiento 5. var izquierda:Boolean=false; 6. var derecha:Boolean=false; 7. var subir:Boolean=false; 8. var bajar:Boolean=false; 9. var velocidad:Number=1;//Espacio que se desplazar 10. 11. //Al pulsar una tecla... 12. stage.addEventListener(KeyboardEvent.KEY_DOWN,direc cion); 13. //Averiguamos la tecla pulsada para decidir la direccin 14. function direccion(tecla:KeyboardEvent):void { 15. switch (tecla.keyCode) { 16. case Keyboard.RIGHT : 17. derecha=true; 18. break; 19. case Keyboard.LEFT : 20. izquierda=true; 21. break; 22. case Keyboard.UP : 23. subir=true; 24. break; 25. case Keyboard.DOWN : 26. bajar=true; 27. break;
28. } 29. } 30. 31. //Al soltar una tecla 32. stage.addEventListener(KeyboardEvent.KEY_UP,parar); 33. //Anulamso el movimiento en direccin de la tecla 34. function parar(tecla:KeyboardEvent):void { 35. switch (tecla.keyCode) { 36. case Keyboard.RIGHT : 37. derecha=false; 38. break; 39. case Keyboard.LEFT : 40. izquierda=false; 41. break; 42. case Keyboard.UP : 43. subir=false; 44. break; 45. case Keyboard.DOWN : 46. bajar=false; 47. break; 48. } } Este cdigo se parece mucho al que vimos en la teora. Lo nico que hacemos es obtener qu tecla se ha pulsado y en funcin de la direccin, activamos una variable booleana que indica que se ha de mover el objeto en esa direccin. Cuandos e suelte la tecla, hacemos lo mismo para desactivar la variabe. 49. Vamos ahora con el movimiento. Lo haremos en el evento "enterFrame" del objeto que se mueve. Aade el siguiente cdigo: 50. //En el enterFrame del clip, comprobamos la posicin futura, y si no hay impacto, movemos
51. miClip.addEventListener(Event.ENTER_FRAME,mover); 52. function mover(event):void { 53. //Utilizamos un objeto rectngulo para que nos sea ms cmodo acceder a las propiedades 54. var rect:Rectangle= miClip.getBounds(stage); 55. if (bajar) { //Comprobamos la colisin abajo - izquierda y abajo - derecha, aumentando abajo 56. if (!(fondo.hitTestPoint(rect.left, rect.bottom+velocidad, true) || fondo.hitTestPoint(rect.right, rect.bottom+velocidad, true))) { 57. miClip.y+=velocidad; //Si no hay colisin, cambiamos la posicin del objeto. 58. } 59. } 60. if (subir) { //Comprobamos la colisin izquierda - arriba y derecha - arriba, aumentando arriba 61. if (!(fondo.hitTestPoint(rect.left, rect.top-velocidad, true) || fondo.hitTestPoint(rect.right, rect.top-velocidad, true))) { 62. miClip.y-=velocidad; 63. } 64. } 65. if (izquierda) { //Comprobamos la colisin izquierda - arriba e izquierda - abajo, aumentando izquierda 66. if (!(fondo.hitTestPoint(rect.left- velocidad, rect.top, true) || fondo.hitTestPoint(rect.left-velocidad, rect.bottom, true))) { 67. miClip.x-=velocidad; 68. } 69. } 70. if (derecha) {//Comprobamos la colisin derecha - arriba y derecha - abajo, aumentando derecha 71. if (!(fondo.hitTestPoint(rect.right+velocidad, rect.top,
true) || fondo.hitTestPoint(rect.right+velocidad, rect.bottom, true))) { 72. miClip.x+=velocidad; 73. } 74. } } Parece un poco complicado pero en esencia es ms largo, pero 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 evalusemos 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. Hemos empleado un objeto Rectngulo al que le hemos dados las medidas del objeto para que nos sea ms cmodo trabajar. Por ejemplo, para acceder a la parte superior, tendramos que escribir miClip.getBounds(fondo).top cada vez, mientras que as solo ponemos rect.top. Observa tambin que para realizar el hitTestPoint 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). Adems, le hemos enviado un tercer parmetro true para que tenga en cuenta la forma del objeto (del fondo). Unidad 22. Juegos (VII)
22.6. 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(); Puedes comprobarlo probando el siguiente ejemplo: trace(Math.random()); trace(Math.random()); trace(Math.random()); trace(Math.random()); 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 num_aleatorio (min:Number ,max:Number):Number { return (Math.floor(Math.random()*(max-min+1))+min); } Esta funcin te devuelve un nmero aleatorio dentro de un rango: var miNumero:Number = num_aleatorio(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 de froma aleatoria desde donde parten los proyectiles, dnde caen, y su escala. var escala:Number = num_aleatorio(0, 2); //escala influir en el tamao y la velocidad this.velocidad = velocidad_base+nivel*1.5+(2-escala);
this.width = this.width*((10-escala)/10); this.height = this.height*((10-escala)/10); var puntoSalida:Number = num_aleatorio(this.width/2, ancho- this.width/2); //Zona de salida this.x=puntoSalida; this.y = 0; var puntoImpacto:Number = num_aleatorio(ancho*(1/4), ancho*(3/4));//Zona de impacto Como ves tenemos randomizados muchos de los procesos. El primer num_aleatorio lo utilizamos para calcular la escala, un valor entre 2 y 0 que influir en el tamao del proyectil y su velocidad. El segundo num_aleatorio calcula la posicin desde la quer parte el proyectil, y el ltimo num_aleatorio calcula la posicin hacia donde se dirije. Adems, en el juego la hemos empleado ms veces, por ejemplo para decidir si se lanza el proyectil o de que tipo ser. De esta forma hemos logrado que en cada partida los proyectiles aparezcan de forma distina.
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: this.velocidad = velocidad_base+nivel*1.5+(2-escala); En la definicin de la clase Proyectil, hemos creado una propiedad velocidad que calculamos en funcin a una velocidad base a la que le sumamos la velocidad que depende del nivel y de la escala del proyectil. De hecho, esa velocidad va aumentando a medida que se van eliminando proyectiles y subiendod e nivel. De ah que cuando asignamos el movimiento del elemento: this.y += this.velocidad; 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. Definimos su aspecto y propiedades en el panel de Propiedades, y utilizando su nombre de instancia, podemos cambiar su contenido dinmicamente de la siguiente manera: estadisticas_txt.text = "Estas son las estadsticas del juego"; 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: //Creamos el formato var miFormato:TextFormat = new TextFormat(); //Definimos el formato; miFormato.bold = true; miFormato.font = "Arial"; miFormato.size = 12; miFormato.color = 0xFFFFFF; miFormato.align = "left";
//Creamos el campo de texto var estadisticas_txt:TextField = new TextField(); //Definimos la propiedades del campo de texto estadisticas_txt.name = "estadisticas_txt"; estadisticas_txt.defaultTextFormat = miFormato; //asignamos el formato estadisticas_txt.selectable = false; estadisticas_txt.x = 10; estadisticas_txt.y = 0; estadisticas_txt.width = 530; estadisticas_txt.height = 22;
estadisticas_txt.text = "Estas son las estadsticas del juego";
//Lo aadimos a la lista de visualizacin addChild(estadisticas_txt); En nuestro ejemplo, por comodidad no creamos todo el campo de texto desde el cdigo. Puedes ver que hemos creado un objeto llamado miFormato que es del tipo formato de texto, con unas caractersticas bsicas que podremos aplicar sobre cualquier texto de nuestra pelcula. Luego mediante hemso creado otro objeto estadisticas_txt del tipo campo de texto, que ser el que mostrar el texto.. Ahora slo har falta remitirse a la propiedad text del texto que hemos creado para darle un valor, y como gemos visto antes.
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 22. 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 (ej. "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". Antes de realizar los ejercicios finales, te recomendamos seguir el ejercicio paso a paso Crear una clase en ActionScript. Unidad 22. Ejercicio paso a paso: Crear una clase en ActionScript Ejercicio 1. Abre el archivo bolas.fla que encontrars en la carpeta ejercicios\bolas\. 2. Vamos a exportar el smbolo de la bola para AS. En la biblioteca, haz clic derecho sobre el smbolo bola y elige Propiedades. 3. Marca la opcin Exportar para ActionScript, y en el nombre de la Clase asgnale ClaseBola. 4. Vamos a aadir bolas con el botn btn_agregar_bolas. Las mostramos utilizando un contenedor. Escribe el siguiente cdigo en el primer fotograma, en el panel Acciones: 5. var miContenedor:Sprite=new Sprite;//Aqu mostraremos las bolas 6. addChild(miContenedor); // Lo agregamos a la escena 7. 8. btn_agregar_bola.addEventListener('click', agregarBola); 9. function agregarBola(event):void {//Funcin que aade bolas 10. var bola:ClaseBola=new ClaseBola(); //Creamos un nuevo objeto ClaseBola 11. miContenedor.addChild(bola); //Y lo agregamos al contenedor
} Puedes probar el cdigo. Comprobars que se agregan bolas, pero siempre en la esquina superior izquierda. 12. Vamos a aadir funcionalidad a la clase de las bolas. En el men Archivo, pulsa en Nuevo y elige Archivo de ActionScript. Pulsa Aceptar. 13. En el archivo, escribe el siguiente cdigo: 14. package { 15. //Aqu importaremos lo que nos haga falta 16. import flash.display.MovieClip; 17. public class ClaseBola extends flash.display.MovieClip { 18. 19. //Aqu ir el cdigo perteneciente a la clase 20. } } Observa que hemos dado a la clase el mismo nombre (ClaseBola) que indicamos al exportar el smbolo a AS. Adems hemos indicado que la nueva clase extender (extends) a la clase MovieClip. Esto quiere decir que nuestra clase tendr todos los mtodos y propiedades de los MovieClip, adems de los que nosotros creemos. Como emplearemos la clase MovieClip, debemos de importarla. 21. Guarda el archivo como ClaseBola.as, en la misma carpeta que el archivo .fla. Es muy importante guardarlo con el nombre de la clase. 22. Vamos a implementar el cdigo de la clase. Escribe el siguiente cdigo: 23. package { 24. import flash.display.MovieClip; 25. import flash.geom.Rectangle;//Como usaremos un Rectangle, hay 26. //que importarlo 27. public class ClaseBola extends flash.display.MovieClip { 28. //PROPIEDADES
29. var angulo:Number;//ngulo inicial, ser aleatorio 30. private var direccionX:Number=1;//Cambiendo el signo, podremos 31. private var direccionY:Number=1;//invertir la direccin 32. private var limites:Rectangle;//El rea en el que rebotan las pelotas 33. var velocidadMaxima:Number=45;//Mx. velocidad a la que podemos acelerar 34. public static var velocidadBase:Number=10;// Velocidad inicial 35. //MTODOS 36. public function ClaseBola(miFondo:MovieClip) { 37. //Mtodo constructor. Se ejecutar con el new 38. limites=miFondo.getBounds(stage);//Tomamos las dimensiones del fondo 39. angulo=num_aleatorio(0,180);//Calcualsmo un ngulo aleatorio 40. angulo=Math.PI/180*angulo;//Y lo pasamos a radianes 41. this.y=limites.top+limites.height/2;//Calculamos la posciin inicial 42. this.x=limites.left+limites.width/2;//centrada en el fondo 43. //Y utilizamos el evento 'enterFrame' para mover la pelota 44. this.addEventListener('enterFrame', moverPelota); 45. } 46. 47. public function moverPelota(event) {
48. //Impedimos que se pueda superar la velocidad mxima 49. if (velocidadBase>velocidadMaxima) { 50. velocidadBase=velocidadMaxima; 51. } 52. 53. var futuraPosicion:Number; 54. //Calculamos la posicin Y futura. Y si se sale por arriba o aabajo, 55. //lo invetimos 56. futuraPosicion=this.y+Math.sin(angulo)*direccionY*v elocidadBase; 57. if (futuraPosicion<limites.top+20||futuraPosicion>limites.bo ttom-20) { 58. direccionY*=-1; 59. } 60. //Calculamos la posicin Y futura. Y si se sale por arriba o aabajo, 61. //lo invetimos 62. futuraPosicion=this.x+Math.cos(angulo)*direccionX*v elocidadBase; 63. if (futuraPosicion<limites.left+20||futuraPosicion>limites.r ight-20) { 64. direccionX*=-1; 65. } 66. 67. //Movemos la pelota 68. this.y+=Math.sin(angulo)*velocidadBase*direccionY; 69. this.x+=Math.cos(angulo)*velocidadBase*direccionX; 70. }
71. function num_aleatorio(min:Number ,max:Number):Number { 72. return (Math.floor(Math.random()*(max-min+1))+min); 73. } 74. } } Hemos empleado tres mtodos: el llamado mtodo constructor, que para que sea tal debe de tener el mismo nombre que la clase, se encarga de inciar las propiedades: calcula de forma aleatoria el ngulo, y se encarga de asignar el movimiento en el evento enterFrame. El segundo mtodo, moverPelota, bsicamente se encarga de calcular si al mover la pelota, esta saldr de los lmites horizontales o verticales, y de ser as, invierte la direccin en ese eje. El ltimo mtodo ya lo conocemos. num_aleatorio se encarga de calcular un nmero aleatorio dentro de un rango. 75. Guarda el archivo antes de intentar probarlo. 76. Tenemos que realizar un cambio. Volvemos a la pelcula, al cdigo del fotograma 1. Cambia el cdigo que crea las bolas (var bola:ClaseBola=new ClaseBola();) por var bola:ClaseBola=new ClaseBola(fondo); ya que en la definicin de la calse hemos especificado que al crear el objeto le pasaremos como argumento el MovieClip que ahce de fondo, para que tome sus dimensiones. fondo es el nombre de la instancia del smbolo. 77. Prubalos pulsando Ctrl + Intro. Observa como puedes aadir bolas, y rebotan por las paredes. 78. Ahora vamos a eliminar las bolas. Crea el siguiente mtodo en la clase ClaseBola: 79. public function borrar() { 80. //Antes de borrar, quitamos sus eventos 81. this.removeEventListener('enterFrame', moverPelota); 82. //reproducimos la animacin 83. this.gotoAndPlay(2); 84. //al finalizar la animacin, lanzar el evento 'borrame' }
Lo que hace este mtodo es quitar el evento enterFrame, ya que es muy recomendable quitar sus eventos antes de eliminar un elemento. Despus, va al segundo fotograma de la bola, lo que inicia una animacin que la hace desaparecer. Cuando llegue al ltimo fotograma, lanzar el evento 'borrame', porque as est programado en el smbolo bola. 85. Ahora, slo tenemos que llamar a este mtodo al pulsar el botn btn_quitar_bola. Lo haremos sobre la ltima bola aadida al contenedor. En la pelcula, en la capa Acciones escribe el cdigo: 86. btn_quitar_bola.addEventListener('click', quitarBola); 87. function quitarBola(event):void { 88. if (miContenedor.numChildren) { //Si hay bolas quitamos una 89. //Convertimos el ltimo elemento en un objeto ClasBola y llamamos a su 90. //mtodo borrar() 91. ClaseBola(miContenedor.getChildAt(miContenedor.numC hildren-1)).borrar(); 92. } } Observa que empleamos ClaseBola(objeto) para convertir un objeto genrico a nuestra clase y que pueda utilizar sus mtodos. 93. Tenemos que estar a la escucha del evento borrame, y borrar el elemento que los produzca. Escribe el siguiente cdigo: 94. addEventListener('borrame', borrarBola); //Cuando se produzca 'borrame' 95. function borrarBola(e:Event):void { //Eliminamos el objeto que lo produzca 96. miContenedor.removeChild(ClaseBola(e.target )); } 97. Ahora, aadiremos el cdigo de los botones que nos permiten acelerar y decelerar las bolas:
98. btn_aumentar_velocidad.addEventListener('click', aumentarVelocidad); 99. function aumentarVelocidad(event):void { 100. ClaseBola.velocidadBase*=1.1; //Aumentamos la velocidad un 10% 101. } 102. 103. btn_reducir_velocidad.addEventListener('click', reducirVelocidad); 104. function reducirVelocidad(event):void { 105. ClaseBola.velocidadBase*=0.9; // Reducimos la velocidad un 10% } Al crear la clase, hemos declarado la propiedad velocidadBase como public static var velocidadBase:Number=10;. Declararla como public indica que podemos acceder a ella. En cambio, declararla como private limita su uso a slo dentro de la clase, no podemos acceder a ella poniendo objeto.propiedad. Normalmente las propiedades son independientes para cada objeto, salvo si, como en este caso, la declaramos como static. Esto hace que si la cambiamos, cambie para todos los objetos creados de la clase, y que podamos utilizarla directamente con en el nombre de la clase, sin tener que crear un objeto especfico. 106. Guarda los archivos y prubalo.
Utiliza el archivo fuente arma.fla que encontraras en la carpeta ejercicios/arma del curso. Tu tarea consistir en crear el cdigo necesario para que el juego funcione. Debers seguir las siguientes instrucciones: Crear un cursor personalizado. Generar el arma importndola a travs de cdigo desde la Biblioteca.
Generar, tambin con ActionScript, los bloques que la rodearn. Hacer que el arma siga al ratn, para que podamos apuntar con l. Crear un bloque de bonus cada vez que se destruyan 4 proyectiles. Subir de nivel cada vez que se destruyan 40 proyectiles. Disparar un rayo con el arma cada vez que se pulsa la tecla Espacio. Generar mediante ActionScript las estadsticas del juego incluyendo el nivel en el que nos encontramos y el nmero de proyectiles destruidos. Crear proyectiles aleatoriamente. Debers controlar si chocan contra un bloque, un rayo o el arma. Si salen de la pantalla debers eliminarlos! Ayuda ejercicios unidad 22: Juegos Ejercicio 1: Proyectiles 1. Abre el archivo arma.fla que encontrars en la carpeta ejercicios/arma del curso. 2. Selecciona el objeto arma de la Biblioteca, haz clic derecho sobre l y selecciona Propiedades 3. Si no se ven todas las propiedades, pulsa en Avanzadas. 4. Activa la opcin Exportar para ActionScript. 5. En Clase, dale el nombre Arma y pulsa Aceptar. 6. Nos aparecer un mensaje de aviso, pulsamso Aceptar. 7. Selecciona el objeto bloque de la Biblioteca, haz clic derecho sobre l y seleccionaPropiedades. 8. Activa la opcin Exportar para ActionScript, dale la clase Bloque y pulsa Aceptar. 9. Selecciona el objeto bonus de la Biblioteca, haz clic derecho sobre l y selecciona Propiedades. 10. Activa la opcin Exportar para ActionScript, dale la clase BloqueBonus y pulsa Aceptar. 11. Selecciona el objeto cursor de la Biblioteca, haz clic derecho sobre l y selecciona Propiedades. 12. Activa la opcin Exportar para ActionScript, dale la clase Cursor y pulsa Aceptar. 13. Selecciona el objeto proyectil1 de la Biblioteca, haz clic derecho sobre l y selecciona Propiedades. 14. Activa la opcin Exportar para ActionScript, dale la clase Proyectil1 y pulsa Aceptar. 15. Selecciona el objeto proyectil2 de la Biblioteca, haz clic derecho sobre l y seleccionaPropiedades. 16. Activa la opcin Exportar para ActionScript, dale la clase Proyectil2 y pulsa Aceptar. 17. Selecciona el objeto proyectil3 de la Biblioteca, haz clic derecho sobre l y seleccionaPropiedades. 18. Activa la opcin Exportar para ActionScript, dale la clase Proyectil3 y pulsa Aceptar.
19. Selecciona el objeto rayo de la Biblioteca, haz clic derecho sobre l y selecciona Propiedades. 20. Activa la opcin Exportar para ActionScript, dale la clase Disparo y pulsa Aceptar.
Ahora que hemos preparado todos los objetos para poder tratarlos desde ActionScript pasaremos a escribir el cdigo. Lo primero que haremos serla crear las clases que utilizaremos, en archivos ActionScript. 21. Haz clic en el men Archivo Nuevo, selecciona Archivo ActionScript y pulsa Aceptar. 22. Se abre un archivo en blanco. Escribe el siguiente cdigo para crear la clase que tendr los mtodos para los disparos: package { //Importamos las clases necesarias import flash.display.MovieClip; import flash.display.DisplayObject; //Y creamos nuestra clase como una subclacse (extends) de MovieClip, //para que disponga de sus mtodos public class Disparo extends flash.display.MovieClip { public function disparar(arma:Arma){ //Este mtodo asigna al disparo la rotacin y posicin del arma que lo disparar this.rotation= arma.rotation; this.x=arma.x; this.y=arma.y; } public function avanzar (){ //Este mtodo mueve el disparo por la pantalla, con el ngulo de rotacin var radianes:Number = Math.PI/180*this.rotation; this.x += Math.sin(radianes)*13; this.y -= Math.cos(radianes)*13; } public function esta_dentro (alto:Number, ancho:Number){ //Este mtodo indica si el disparo sigue dentro de la pantalla, //Si no se ha salido ni por arriba, ni abajo, ni por la izquierda o derecha return !(this.x < 0 || this.y < 0 || this.x > ancho || this.y > alto) } } } 23. Guarda el archivo junto a arma.fla, llamndolo Disparo.as. Es importante que el nombre sea el de la clase. 24. Crea otro nuevo archivo ActionScript para la clase que llevar los mtodos y propiedades de los proyectiles.
25. Escribe el siguiente cdigo: 26. package 27. { //Importamos las clases necesarias 28. import flash.display.MovieClip; 29. import flash.display.DisplayObject; 30. //Y creamos nuestra clase como una subclase (extends) de MovieClip, para que disponga de sus mtodos 31. public class Proyectil extends flash.display.MovieClip 32. { 33. private static var velocidad_base:Number = 3; //Velocidad base de los proyectiles 34. private var velocidad:Number; // Velocidad del proyectil 35. private var _explotando:Boolean = false; //Indica si ha comenzado a explotar 36. 37. public function disparar(nivel:Number, ancho:Number, alto:Number){ 38. //Le pasamos como argumentos el nivel actual del juego, y el ancho y alto del rea de disparo 39. //Crearemos, para cada tipo de proyectil, tres escalas posibles, de forma aleatoria. 40. var escala:Number = num_aleatorio(0, 2); //escala influir en el tamao y la velocidad 41. //Calculamos la velocidad, sumando la velocidad base + la parte que depende del nivel + la 42. // que depende de la escala 43. velocidad = velocidad_base+nivel*1.5+(2-escala); 44. //calculamos el nuevo tamao en funcin de la escala (0 = tamao original, 2= 80%) 45. this.width = this.width*((10-escala)/10);
46. this.height = this.height*((10-escala)/10); 47. //Calcualmos, de forma aleatoria el punto de salida del proyectil en la parte superior 48. //Dejamos la mitad del ancho del proyectil como margen para que no salga una parte fuera de la pantalla 49. var puntoSalida:Number = num_aleatorio(this.width/2, ancho-this.width/2); //Zona de salida 50. //Asignamos al proyectil su posicin inicial 51. this.x=puntoSalida; 52. this.y = 0; 53. //Calculamos, de forma aleatoria, el punto de impacto. Limitamos la zona de posible impacto, dejando 54. //1/4 del ancho de margen a cada lado, para que la mayora de proyectiles vayan hacia el arma 55. var puntoImpacto:Number = num_aleatorio(ancho*(1/4), ancho*(3/4)); 56. //Sabiendo las coordenadas de salida e impacto, podemos utilizar calcular el ngulo con Math.atan2 57. //Como el resultado es en radianes, lo convertimos a grados (radianes*180/Math.Pi) 58. //Esos grados son la rotacin que daremos al objeto 59. this.rotation= 270+(Math.atan2( alto - this.y,puntoImpacto- puntoSalida) * 180/Math.PI); 60. } 61. 62. public function avanzar (){ 63. //Este mtodo avanza el proyectil por la pantalla 64. //Convertimos el ngulo de rotacin a radianes
65. var radianes:Number = Math.PI/180*this.rotation; 66. //Y ayudndosnos de frmulas triginomtricas, sumamos la velocidad la posicin 67. this.x -= Math.sin(radianes)*(velocidad); 68. this.y += Math.cos(radianes)*(velocidad); 69. } 70. 71. public function esta_dentro (alto:Number){ 72. //averiguaremos si el proyectil sigue de la pantalla, si no ha llegado abajo 73. return (this.y < alto); 74. } 75. public function explotar (){ 76. //Este mtodo reproduce la animacin de la explosin del proyectil 77. if (!_explotando){ 78. this.gotoAndPlay("hit"); 79. //Cuando comienza a explotar, cambia _explotando 80. _explotando = true; 81. } 82. } 83. public function explotando():Boolean{ 84. //Devuelve True si el proyectil est explotando 85. return _explotando; 86. } 87. private function num_aleatorio (min:Number ,max:Number){ 88. //Genera un nmeor aleatorio dentro de un rango
89. max++; 90. max = max-min; 91. return min+(Math.floor((Math.random()*(max*10)))%max); 92. } 93. } } 94. Guarda el archivo llamndolo Proyectil.as, en la misma carpeta que arma.fla y Disparo.as. 95. En la biblioteca tenemos tres tipos de proyectil, proyectil1, proyectil2 y proyectil3, cada uno con una clase distinta. Vamos a hacer que todos compartan los mtodos de la clase Disparo. Para ello, accede a sus Propiedades haciendo clic derecho sobre proyectil1. 96. En el campo Clase base, cambia flash.display.MovieClip por Disparo y pulsa Aceptar.
97. Vamos a comenzar con el primer fotograma. En la capa fondo, selecciona el botn jugar, y en el panel de Propiedades dale btn_jugar como Nombre de instancia. 98. Haz clic sobre el primer fotograma de la capa acciones y abre el Panel Acciones (tecla F9). 99. Escribe el siguiente evento para que al pulsar el botn, comience la partida: 100. stop() 101. 102. btn_jugar.addEventListener(MouseEvent.MOUSE_UP,empe zar); 103. function empezar(event:MouseEvent):void{ 104. gotoAndStop("jugar"); } 105. Haz clic sobre el primer fotograma de la capa acciones y abre el Panel Acciones. 106. Escribe el siguiente bloque de cdigo para inicializar las variables que utilizaremos y declarar los objetos generales: 107. //Parmetros generales del juego
108. var hits:Number = 0; //Impactos, proyectiles destruidos 109. var level:Number = 1; // Nivel 110. var num_bonus:Number = 4; //Cada cuantos hits aparece el bonus 111. var num_bloques:Number = 12; //nmero de bloques iniciales 112. var numRayos:Number = 0; // nmero de rayos disparados 113. var maxRayos:Number = 3; //Nmero mximo de rayos a la vez 114. var fingame:Boolean = false; //Indica si ha acabado el juego 115. 116. var alto:Number = 580; //Alto del rea de juego 117. var ancho:Number = 550; //Ancho del rea de juego 118. 119. //Objetos generales 120. var arma:Arma = new Arma; // arma (objeto de la calse Arma) 121. var cursor:Cursor = new Cursor; //movieClip que se mostrar como cursor 122. 123. var zonaJuego:Sprite = new Sprite; //Contenedor en que mostraremos //Los elementos del juego 124. Escribe el siguiente bloque de cdigo para crear la funcin que inicia el proceso: 125. function comenzarPartida() { //Funcin que comienza la partida 126. Mouse.hide(); //Ocultamos el cursor 127. zonaJuego.addChild(cursor); 128. cursor.addEventListener(Event.ENTER_FRAME,s eguirCursor);
129. //Cada vez que cursor entre en un frame, hacemos que siga al ratn 130. 131. //Aadimos los objetos: 132. //Aadimos los bloques iniciales 133. //Lo hacemos los primeros para que queden por debajo del resto 134. bloques_iniciales(); 135. //Asignamos la posicin inical al arma y la generamos. 136. arma.x = ancho/2; 137. arma.y = alto-30; 138. zonaJuego.addChild(arma); 139. //Hacemos que cada vez que se mueva el cursor, el arpa apunte hacia l 140. addEventListener(MouseEvent.MOUSE_MOVE,apun tarCursor); 141. 142. //Agragamos a la escena el evnto que disparar cunado se pulse espacio 143. stage.addEventListener(KeyboardEvent.KEY_DO WN,disparar); 144. 145. //E iniciamos el lanzamiento de proyectiles 146. zonaJuego.addEventListener(Event.ENTER_FRAM E,lanzarProyectil); 147. //Utilizamos el evento Enter_Frame para que se repita constantemente 148. 149. //Aadimos el contenedor en el que se mostrarn los elementos de la partida. 150. //Lo hacemos en la posicin 1 para que quede enciam del fondo, pero debajo 151. //de la banda superior. 152. this.addChildAt(zonaJuego, 1); 153.
154. //Actualizamos las estadsticas para que se muestre el marcador a 0 155. actualizarEstadisticas(); } 156. Hemos asignado a ciertos eventos las funciones seguirCursor, y apuntarCursor, que harn que el cursor siga al ratn y que el arma apunte al cursor. Las definimos con este bloque de cdigo: 157. function seguirCursor(event):void{ 158. cursor.x=mouseX; //Nuestro cursor toma las coordenadas del ratn 159. cursor.y=mouseY; 160. } 161. function apuntarCursor(event:MouseEvent):void{ 162. //Calcula el ngulo de rotacin del arma para que apunte al cursor 163. var xdif:Number = mouseX - arma.x; 164. var ydif:Number = mouseY - arma.y; 165. var radianes:Number = Math.atan2(ydif, xdif); 166. //El resultado obtenido es en radianes. Lo convertimos a grados 167. var angulo:Number = radianes*180/Math.PI; 168. angulo = angulo + 90; 169. arma.rotation = angulo; } 170. Definimos la funcin que crea los bloques iniciales (bloques_iniciales(). Y de paso, por tener el cdigo ordenado, creamos tambin las que tratan los bloques bonus. Escribe el siguiente cdigo: 171. //Bloques 172. function aadir_bloque (x:Number, y:Number):void {
173. //Crea un nuevo bloque en las coordenadas dadas 174. var bloque:Bloque = new Bloque; 175. bloque.x = x; 176. bloque.y = y; 177. zonaJuego.addChild(bloque); 178. } 179. 180. function bloques_iniciales ():void{ 181. //Genera los bloques iniciales 182. var x:Number; 183. var y:Number; 184. for (var i:Number =0; i<num_bloques; i++) { 185. x =0; //calculamos x 186. y =0; //calculamos y 187. if (i<3) { 188. y = 550; 189. x = i*50+200; 190. } else if (i<7) { 191. y = 525; 192. x = (i-3)*50+175; 193. } else if (i<10) { 194. y = 500; 195. x = (i-7)*50+200; 196. } else if (i<=11) { 197. y = 475; 198. x = (i-10)*50+225; 199. } //Y lo aadimos 200. aadir_bloque(x, y); 201. } 202. }
203. 204. function bonus() { 205. //Crea un bloque Bonus en la esquina inferior izquierda de la pantalla 206. var bloque:BloqueBonus = new BloqueBonus; 207. bloque.x = 0; 208. bloque.y = 550; 209. bloque.addEventListener(MouseEvent.MOUSE_DO WN, arrastrar); 210. bloque.addEventListener(MouseEvent.MOUSE_UP , soltar); 211. zonaJuego.addChildAt(bloque,zonaJuego.getCh ildIndex(arma)); 212. } 213. 214. function arrastrar(event:Event):void { 215. //Al hacer clic sobre un BloqueBonus, comenzamos a arrastralo 216. event.target.startDrag() 217. } 218. 219. function soltar(event:Event):void { 220. //Al soltar el botn del ratn del BloqueBonus que estamos arrastrando 221. var bloque:BloqueBonus = BloqueBonus(event.target); 222. //Dejamos de arrastrar 223. bloque.stopDrag() 224. //Y corregimos su posicin para que queden alineados 225. var correccion_par:Number = 0; 226. if (bloque.y<487) { 227. bloque.y = 475; 228. correccion_par = 25;
229. } else if (bloque.y<=512) { 230. bloque.y = 500; 231. } else if (bloque.y<=538) { 232. bloque.y = 525; 233. correccion_par = 25; 234. } else { 235. bloque.y = 550; 236. } 237. var aux_coc:Number = Math.round(bloque.x/50); 238. 239. bloque.x = aux_coc*50-correccion_par; 240. } 241. 242. function quitar_bloqueBonus (bloque:BloqueBonus) { 243. //Quita los eventos del bloque bonus 244. bloque.removeEventListener(MouseEvent.MOUSE _DOWN, arrastrar); 245. bloque.removeEventListener(MouseEvent.MOUSE _UP, soltar); 246. if(contains(bloque)) { //Y lo quita 247. zonaJuego.removeChild(bloque); 248. } } 249. Escribe la funcin que actualizar las estadsticas : 250. //Estadsticas 251. function actualizarEstadisticas(){ 252. if (hits>0) { 253. if ((hits%40) == 0) {
254. level++; //aumentamos el nivel cada 40 aciertos 255. } 256. if ((hits%num_bonus) == 0) { 257. bonus(); //Creamos un bloque cada num_bonus aciertos 258. } 259. } 260. //Actualizamos el marcador de estadsticas 261. estadisticas_txt.text="Aciertos: "+hits+"\t"+"Nivel:"+level; } 262. Ahora escribe el cdigo que nos permitir disparar el arma, mover el disparo y quitarlo cuando sea necesario. 263. //DISPAROS DEL ARMA 264. function disparar(tecla:KeyboardEvent):void{ 265. //El evento capturado se produce al pulsar el teclado (cualquier tecla) 266. if (tecla.keyCode == Keyboard.SPACE) { //Comprobamos si la tecla es Espacio 267. if (numRayos < maxRayos) {//Si no hemos alcanzado el nmero max. de rayos 268. var miRayo:Disparo = new Disparo; //Creamos un Disparo 269. miRayo.disparar(arma); //Lo disparamos 270. //Y lo adimos a nuestro contenedor, para que se muestre 271. zonaJuego.addChildAt(miRayo, zonaJuego.getChildIndex(arma)); 272. numRayos++; //Aumentamos el nmero de rayos disparados 273. //Y en el evento ENTER_FRAME del rayo le asignamos la funcin que lo mover
274. miRayo.addEventListener(Event.ENTER_FRAME, mover_disparo); 275. } 276. } 277. } 278. function mover_disparo(event:Event):void{ 279. //Esta funcin se encarga de desplazar el rayo por la pantalla 280. //event.target es el objeto que ha producido el evento que llama a esta funcin 281. //Lo convertimos a un objeto Disparo para tratarlo como tal 282. var rayo:Disparo = Disparo(event.target); 283. //Comprobamos, con el mtodo esta_dentro(), si sique en la pantalla 284. if (rayo.esta_dentro(alto,ancho)){ 285. //Si est dentro, lo movemos 286. rayo.avanzar(); 287. } else { 288. //Si no, ha salido de la pantalla. Lo borramos con quitar_disparo(); 289. quitar_disparo(rayo); 290. } 291. } 292. function quitar_disparo (disparo:Disparo){ 293. //Esta funcin elimina el Disparo que le pasemos como argumento 294. //Quitamos sus eventos 295. disparo.removeEventListener(Event.ENTER_FRA ME, mover_disparo); 296. //Comprobamos que no se haya borrado ya, para evitar posibles errores 297. if (zonaJuego.contains(disparo)) { 298. zonaJuego.removeChild(disparo); //Y lo eliminamos de su contenedor
299. numRayos--; //Restamos 1 al nmero de rayos disparados 300. } } 301. Ahora, escribe el cdigo que lanzar de forma aleatoria los proyectiles. Recuerda que llambamos a esta funcin en el evento ENTER_FRAME del contenedor de los elementos del juego: 302. //PROYECTILES 303. function num_aleatorio (min:Number ,max:Number){ 304. //Esta funcin genera un nmero aleatorio dentro de un rango 305. return (Math.floor(Math.random()*(max- min+1))+min); 306. } 307. 308. function lanzarProyectil(event):void{ 309. //Se ejecuta en el evento ENTER_FRAME de zonaJuego. 310. // Comprobamos que el juego no haya acabado ya 311. if (!fingame){ //Si no ha acabado 312. //No vamos a lanzar un proyectil cada vez, seran demadiados 313. //Generamos un nmero aleatorio entre 0 y 20, y disparamos slo cuando sea 0 314. //As los proyectiles apareceran de forma irregular, unas veces ms y otras menos 315. if (num_aleatorio(0, 20) == 0){ 316. //Si disparamos, creamos un Proyectil 317. var miProyectil:Proyectil; 318. //Decidimos que tipo de los tres proyectiles ser. 319. //Lo hacemos aleatoriamente
320. switch (num_aleatorio(1, 3)){ 321. case 1: 322. miProyectil = new Proyectil1; 323. break; 324. case 2: 325. miProyectil = new Proyectil2; 326. break; 327. case 3: 328. miProyectil = new Proyectil3; 329. break; 330. } 331. //Lo configuramos con el mtodo dosparar() 332. miProyectil.disparar(level, ancho, alto); 333. //Y lo mosramso en zonaJuego 334. zonaJuego.addChild(miProyectil); 335. //Al nuevo proyectil, le asignamos la funcin que lo mover y 336. //comprobar si ha impactado contra algo en el evneto ENTER_FRAME. 337. miProyectil.addEventListener(Event.ENTER_FRAME, mover_proyectil); 338. 339. } 340. 341. } else { // Si es fin de juego (fingame==True) es porque el proyectil 342. // ha impactado contra el arma, y est est reproduciendo la animacin
343. //que la hace explotar. Comprobamos si ha acabado esa animacin, para 344. //que se vea completa. 345. if (arma.currentFrame == arma.totalFrames){ 346. //Si ha llegado al ltimo frame es que la animacin ha acabado 347. //Quitamos zonaJuego para borrar todos sus elementos hijos. 348. zonaJuego.removeEventListener(Event.ENTER_FRAME,lan zarProyectil) 349. stage.removeEventListener(KeyboardEvent.KEY_DOWN,di sparar); 350. this.removeChild(zonaJuego); 351. //Y mostramos la pantalla de fin de juego 352. gotoAndStop("fin"); 353. } 354. } } 355. Escribe el siguiente bloque de cdigo para crear la funcin mover_proyectil, que se encargar de mover el proyectil y de comprobar si ha impactado contra lago: function mover_proyectil(event:Event):void{ //Esta funcin mueve el proyectil y comprueba si ha impactado con algo //Se produce llama en el evento ENTER_FRAME del proyectil var proyectil:Proyectil = Proyectil(event.target); //Comprobamos si est explotando if (proyectil.explotando()){ // Nos aseguramos de que se haya reproducido completa //la animacin de la explosin if(proyectil.currentFrame == proyectil.totalFrames){ //Si ha llegado al ltimo frame, es que ha acabado //la animacin de la explosin. Lo
quitamos. quitar_proyectil(proyectil); } //Comprobamos si no ha explotado, y si sigue dentreo de la pantalla } else if (proyectil.esta_dentro(alto+proyectil.height)){ //Si el proyectil est dentro del rea del juego proyectil.avanzar(); //Lo avanzamos for (var i:Number = 0; i<zonaJuego.numChildren;i++){ //Recorremos todos los elementos que hemos agregado // a la zonaJuego, tomando el elemnto con getChildAt(i). //Comprobamos el tipo de objeto switch (zonaJuego.getChildAt(i).toString()){ case "[object Disparo]": //Si es un disparo del arma var disparo:Disparo = Disparo(zonaJuego.getChildAt(i)); //Comprobamos si ha impactado con el proyectil if (proyectil.hitTestObject(disparo)){ //Si es as, lo hacemos explotar y quitamos el disparo. proyectil.explotar(); quitar_disparo(disparo); //Al explotar, proyectil.explotando() = True //Lo comprobbamos al principio. No lo quitamos ya para //que se vea la animacin. hits++; //sumamos a los impactos actualizarEstadisticas() //Y actualizamos las estadsticas } break; case "[object BloqueBonus]": //Si es un BloqueBonus //Comprobamos si ha impactado con el proyectil if (proyectil.hitTestObject(zonaJuego.getChildAt(i))){ //Y si ha impactado, quitamos el bloque y el proyectil
quitar_bloqueBonus(BloqueBonus(zonaJuego.getChildAt (i))); //y quitamos el proyectil
quitar_proyectil(proyectil); } break; case "[object Bloque]": //Si es un Bloque //Comprobamos si ha impactado con el proyectil
if (proyectil.hitTestObject(zonaJuego.getChildAt(i))){ //Y si ha impactado, quitamos el bloque y el proyectil
zonaJuego.removeChild(zonaJuego.getChildAt(i)); //y quitamos el proyectil
quitar_proyectil(proyectil); } break; case "[object Arma]": //Si es el Arma //Comprobamos el impacto, y que no haya acabado ya el juego, para que //el arma no explote dos veces si impactan dos proyectiles a la vez if (proyectil.hitTestObject(zonaJuego.getChildAt(i)) && !fingame){ //Si impacta contra el arma, la hacemos explotar
Arma(zonaJuego.getChildAt(i)).gotoAndPlay("hit"); //Y marcamos el fin del juego
fingame = true; } break; } } } else{ //Si se ha salido de la pantalla (proyectil.esta_dentro()==False, lo quitamos quitar_proyectil(proyectil); } } function quitar_proyectil (proyectil:Proyectil){ //Esta funcin quita un proyectil de la pantalla, pasado como parmetro //Quita el escuchador del evento ENTER_FRAME proyectil.removeEventListener(Event.ENTER_FRAME, mover_proyectil); //Y borra el objeto, si no se ha eliminato ya. if (zonaJuego.contains(proyectil)) {
zonaJuego.removeChild(DisplayObject(proyectil));
} } 356. Para acabar con este fotograma, slo nos queda llamar a la funcin comenzarPartida();. Podemos hacerlo en cualquier parte del cdigo, despus de haber definido las variables iniciales. Por ejemplo, colca este cdigo al final: comenzarPartida();
357. Por ltimo, haz clic en la capa acciones del tercer fotograma, y en el panel Acciones introduce el siguiente cdigo: 358. //Mostramos las estadsticas 359. estadisticas_txt.text="Aciertos: "+hits+"\t"+"Nivel:"+level; 360. //Volvemos a mostrar el cursor normal 361. Mouse.show(); 362. //Y asociamos al botn la funcin empezar() del primer fotograma btn_volveraJugar.addEventListener(MouseEvent.MOUSE_UP,emp ezar); Prueba evaluativa unidad 22: Juegos Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. La propiedad scaleX permite... a) determinar la coordenada x del objeto. b) determinar la anchura del objeto absoluta. c) determinar la anchura del objeto respecto a su valor absoluto. 2. La propiedad rotation te permite rotar un objeto tomando como referencia la vertical de ste. a) Verdadero. b) Falso. 3. La funcin atan2 nos ayudar a encontrar ngulos de objetos respecto a un punto (0,0). a) Verdadero. b) Falso. 4. Podemos conocer el objeto sobre el que se slt un elemento que estaba arrastrndose con la propiedad... a) dragtarget.
b) droptarget. 5. Qu evento utilizaremos para la reproduccin continuada de determinadas funciones? a) Enter_Frame. b) onLoad. 6. Qu devolver la funcin hitTestPoint si la ejecutamos contra dos elementos que ocupan el mismo espacio? a) True. b) False. 7. La funcin getBounds() nos permite averiguar las X y las Y mximas y mnimas de posicin de un objeto. a) Verdadero. b) Falso. 8. La funcin random() devuelve... a) Un nmero aleatorio entre 0 y 1. b) Un nmero aleatorio entre 1 y 100. 9. La funcin del objeto TextFormat es... a) Poder darle el mismo formato a diferentes objetos de texto. b) Formatear un texto independientemente de el resto de propiedades que aadamos. c) Las dos anteriores son correctas.
Unidad 23. Animaciones avanzadas (I) 23.1. 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 el tope que 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 imagen, 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 estara representado por la lnea azul) y se incrementa la y con el valor incre_y (que estara 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 estara representado por la lnea azul) y se decrementa la y con el valor incre_y (que estara representado por la lnea roja)
Vamos a ver lo ms importante del cdigo ActionScript que tenemos un poco ms abajo. Hemos creado una bola azul y la hemos convertido en un movieclip, la instancia se llama bola_mc. Inicialmente la bola est 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 ir perdiendo fuerza y el bote sera ms bajo, la variable elasticidad determinar est 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 lnea naranja representa esa cantidad que le sumamos al tope 1 para pasar al tope 2.
Unidad 23. Animaciones avanzadas (II) 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 detiene la ejecucin (si todava no haba acabado) y se lanza una nueva ejecucin. Cuando el tope llega al suelo se detiene la ejecucin. btn_reproducir.addEventListener(MouseEvent.MOUSE_UP,playescena) function playescena (event:MouseEvent):void { var baja:Boolean = true; //Si la bola sube o baja var incre_x:Number = 3.5; //Incremento vertical var incre_y:Number = 8; //Incremento horizontal var suelo:Number = 280; //Distancia ala que est el suelo var tope:Number = 0; //Altura mxima del bote var elasticidad:Number = 3; //Corrector del tope bola_mc.y = 0; //Comienza en la esquina superior izquierda bola_mc.x = 0; tope += (suelo - bola_mc.y) / elasticidad; //calculamos el tope
var repeticion:Number; clearInterval(repeticion); repeticion = setInterval(botar, 35);//Repetimos botar cada 35 ms function botar() { if (baja) { // Si la bola baja... bola_mc.y += incre_y;//Aumentamos Y bola_mc.x += incre_x; if (bola_mc.y>=suelo) { baja = false; //Si ha llegado al suelo hacemos que suba } } else { // Si la bola sube... bola_mc.y -= incre_y;//Disminumos Y bola_mc.x += incre_x; if (bola_mc.y<=tope) { //Cuando alcance el tope baja = true; //La hacemos bajar... if (tope>=suelo) { //Cuando el tope est mas bajo que el suelo incre_y = 0; //Ya no rebota ms clearInterval(repeticion);//Fin de la repeticin } //Al llegar abajo, calculamos el nuevo tope tope += (suelo - bola_mc.y) / elasticidad; } } } } 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.
Y si queremos que quede perfecto, en vez de utilizar una velocidad constante, esta debera de depender de la altura, para que fuese decelerando al subir y acelerando al bajar. Si deseas probar suerte con las curvas y ActionScript realiza el ejercicio paso a paso Movimiento en espiral para empezar a familiarizarte con ellas.
Unidad 23. Ejercicio paso a paso: Movimiento en espiral
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, a continuacin del stop() que encontrars: var velocidad:Number = 0.2; var distancia:Number = 5; var recorrido:Number = 30; miBoton.addEventListener("click", coemnzar); function comenzar(event) { gotoAndPlay(1);
} bola.addEventListener(Event.ENTER_FRAME, movimientoEspiral); function movimientoEspiral(event) { if (recorrido>0) { var i:Number=distancia*recorrido;
var radianes:Number = Math.atan2((bola.x- 400/2), (bola.y-400/2)); var grados:Number = Math.round(radianes*180/Math.PI); bola.rotation=- grados+5;
bola.scaleX=recorrido/30; bola.scaleY=bola.scaleX; } } 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 23. Animaciones avanzadas (III) 23.2. Funcin setInterval y el evento ENTER_FRAME La funcin setInterval se utiliza cuando queremos que se repita la ejecucin de un cdigo ActionScript cada cierto nmero de milisegundos, y el evento ENTER_FRAME ("enterFrame") 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 ActionScript y no nos interesa utilizar los fotogramas como forma de control del tiempo. Por ejemplo, podemos generar un objeto y hacer que se mueva 5 pixels cada 30 ms. 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(queFuncion:Function, intervalo:Number, [param1:Object, param2, ..., paramN]); Donde, queFuncion es la funcin que se va a repetir. intervalo 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 indicada en queFuncion. retardo es una variable que identifica el intervalo y que nos permite emplear clearInterval() para detener la ejecucin. Por ejemplo, el cdigo 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);//Fin de la repeticin } } La funcin 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 setInterval para que la funcin botar se ejecute cada 35 milisegundos. Unidad 23. Animaciones avanzadas (IV) ENTER_FRAME ("enterFrame")
El controlador de eventos ENTER_FRAME, permite invocar a una funcin de forma repetida tantas veces como fotogramas por segundo tenga definida la pelcula. Este comportamiento ya lo hemos utilizado varias veces. Por ejemplo, en el movieClip bola_mc: var i:Number =0; bola_mc.addEventListener(Event.ENTER_FRAME, miFuncion) function miFuncion(event):void{ trace("ejecutando: "+ ++i); } 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 ... 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. Imagina que quieres que tu pelcula se detenga durante 2 segundos y luego contine. Esta es una forma de hacerlo utilizando la funcin setInterval.
Colocariamos este cdigo en el frame que deseemos, llamamos a setInterval con 1 s (1000 ms) y cuando se hayan 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++;
Unidad 23. Animaciones avanzadas (V) 23.3. 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 12, animacin mediante trazado o 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 trayectoria 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.
Hemos visto dos tcnicas diferentes para animar un objeto en Flash, mediante ActionScript y mediante gua de movimiento. Segn cada caso concreto resultar ms adecuado elegir 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 difcil 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 23. Animaciones avanzadas (VI) 23.4. 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 transformaciones 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 Lnea, 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 est seleccionada. Ahora acercamos el cursor a la lnea y cuando aparezca una pequea lnea curva debajo del cursor hacemos clic y arrastramos hacia abajo, as tendremos una boca sonriente. Vamos al fotograma 17 y hacemos lo mismo pero arrastrando hacia arriba para conseguir una boca enfadada. Esto lo tendremos que hacer con todos los elementos que queramos ver cambiar. 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.
Unidad 23. Animaciones avanzadas (VII) 23.5. Animaciones geomtricas en 3D
Vamos a ver cmo 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 ir haciendo visible segn avance el giro. Unidad 23. Animaciones avanzadas (VIII) 23.6. Cinemtica inversa El mtodo de animacin cinemtica inversa nos permite mover objetos de forma ms natural, a la vez que sencilla. La idea es unir los elementos con "huesos", de manera que estos queden unidos formando articulaciones. Pensemos en un brazo creado con tres huesos unidos por la mueca y codo. Al mover la mano, el antebrazo la seguira doblndose por la mueca y por el codo. Para crear los huesos, encontramos la herramienta Hueso . Podemos hacerlo de dos formas: creando un esqueleto dentro de una forma, o uniendo smbolos con huesos. Crear un esqueleto en una forma: Partimos de una forma, como pueden ser elipses, rectngulos, trazos del pincel, etc. Cualquier cosa que no se haya convertido en un smbolo. Con la herramienta Hueso,
vamos haciendo clic y arrastrando, dibujando los huesos. Debemos de comenzar por el hueso raz, y seguir por los que cuelgan de este. Por ejemplo, para dibujar un brazo, haramos clic sobre el hombro y arrastraramos hasta el codo. Volveramos a hacer clic sobre el el codo y arrastraramos hasta la mueca. En la siguiente imagen, partimos de un dibujo muy simple hecho con el Pincel, y le hemos creado un esqueleto.
Podemos crear tantos huesos como queramos dentro de la forma. Si ahora intentas arrastrar un brazo, vers que el resto del cuerpo le sigue. El inconveniente de la forma es que puede deformarse y no podremos controlarlo.
Crear un esqueleto con smbolos: Otra forma de trabajar es utilizando smbolos. Debemos de tener en cuenta que un smbolo slo puede tener un hueso. Por tanto, necesitamos una instancia de smbolo para cada seccin entre articulaciones. Antes de comenzar a crear el esqueleto, colocamos todos los smbolos en el escenario, colocados de la forma deseada. Despus, partiendo de la raz del esqueleto, del punto de que saldrn todos los huesos, vamos enlazando los distintos smbolos, del comienzo del primero al comienzo del siguiente.
Podemos mover los smbolos independientemente del esqueleto, si mantenemos pulsada la tecla Alt. Si hemos colocado mal un hueso, podemos seleccionarlo haciendo clic sobre l con la herramienta de seleccin, y eliminarlo con la tecla Supr. Unidad 23. Animaciones avanzadas (IX) Crear la animacin Tanto si hemos utilizado formas, como si hemos trabajado con smbolos, veremos que se ha creado una nueva capa, llamada Esqueleto donde se han movido todos los elementos. Creamos un nuevo fotograma en esa capa para tener una zona sobre la que trabajar. No es necesario que sea un fotograma clave, aunque es una buena idea si queremos que el ltimo movimiento coincida con el del primer fotograma. Veremos que los fotogramas con movimiento aparecen de color verde oscuro:
Mover ahora nuestro esqueleto es tan sencillo como hacer clic en un fotograma, y arrastrar los distintos elementos. No necesitamos crear fotogramas clave. Aunque s veremos que aparece un punto negro en los fotogramas en los que hemos movido el esqueleto. Lo que hemos creado ah es una Pose. Al mover un hueso, el hueso del que cuelga le seguir. Si queremos mover nicamente un hueso por la articulacin que lo une con el hueso del que cuelga, debemos hacerlo con la tecla Shift (Maysculas) pulsada. Seguimos creando poses. Si queremos duplicar una pose, podemos hacer clic derecho sobre ella en la lnea de tiempo, copiarla, y pegarla en el fotograma que queramos.
De esta forma, vamos creando todas las poses necesarias hasta que consigamos el efecto deseado.
Y reproducimos nuestra animacin: Los huesos nos permiten dar an ms realismo. Podemos seleccionar un hueso, y acceder a sus propiedades en el panel Propiedades.
Desde las propiedades podremos recorrer los huesos. Por defecto, los huesos tienen activada la Unin: Rotacin, que permiten que roten. Podemos Restringir el ngulo de rotacin, por ejemplo para hacer que una rodilla slo se pueda mover hacia atrs, hasta chocar con el muslo, y no hacia delante, con los valores Min y Max.
Por defecto, los huesos tienen un tamao fijo e invariable, pero podemos hacer que esto cambie con los valores de Traslacin.
Y como siempre, lo que est disponible en las propiedades es accesible a travs de ActionScript, por lo que incluso podramos crear un script que moviese nuestro esqueleto. Unidad 23. Avanzado: 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 podran 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 podramos 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 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.
Unidad 23. Animaciones avanzadas (X) 23.7. Rotoscopia La rotoscopia es una tcnica que utiliza un movimiento real como patrn para calcar las imgenes 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, recuerda que los videos que importes deben estar en formato FLV, si no fuera as puedes cambiarlos a este formato con la herramienta Adobe Media Encoder que incluye Flash, slo que en la pantalla de seleccin de mtodo de importacin deberemos seleccionar Incorporar vdeo FLV en SWF y reproducir en la lnea de tiempo.
Esto har que el vdeo se exporte de forma que lo podremos visualizar fotograma a fotograma. Sigue el resto de opciones hasta el final y el vdeo se colocar en la lnea de tiempo.
Luego crearemos una nueva capa por encima y crearemos tantos fotogramas claves como fotogramas de pelcula queramos copiar. El resto es sencillo, coge un pincel y a calcar. Cuanta ms precisin consigas, ms impresionantes sern los resultados.
Este proceso es muy laborioso, pero crea animaciones espectaculares.
Practica un poco y vers cmo no es nada complicado, te requerir bastante paciencia, pero la pelcula final te valdr la pena. El audio se insertara junto al vdeo, cuando elimines el vdeo este se eliminara tambin.
Unidad 23. Animaciones avanzadas (XI) 23.8. 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: var miClip:MovieClip = new MovieClip; Una vez creado el clip podemos pasar a dibujar sobre l. Hacerlo es muy fcil, slo debers inicializar el proceso de dibujo escribiendo: miClip.graphics.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.graphics.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 graphics.lineTo(): miClip.graphics.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.graphics.beginFill(0xFF0000);
miClip.graphics.moveTo(10, 10); miClip.graphics.lineTo(10, 100); miClip.graphics.lineTo(100, 100); miClip.graphics.lineTo(100, 10); miClip.graphics.lineTo(10, 10); miClip.graphics.endFill(); Terminamos la instruccin con graphics.endFill(). Este ejemplo dibujara un cuadrado en la posicin (10, 10). Sencillo, verdad? Unidad 23. Animaciones avanzadas (XII) Podemos establecer el tipo de lnea que rodear al dibujo escribiendo lo siguiente: miClip.graphics.lineStyle(thickness:Number, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false
scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3); Nota: Esta instruccin deber estar colocada antes de utilizar la funcin beginFill(), quedara de esta forma: miClip.graphics.lineStyle(10, 0xFF0000, 1, false, LineScaleMode.VERTICAL, CapsStyle.SQUARE, JointStyle.BEVEL, 10); miClip.graphics.beginFill(0xFF0000); miClip.graphics.moveTo(10, 10); miClip.graphics.lineTo(10, 100); miClip.graphics.lineTo(100, 100); miClip.graphics.lineTo(100, 10); miClip.graphics.lineTo(10, 10); miClip.graphics.endFill(); Ahora explicaremos en detalle los parmetros de esta instruccin: thickness (grosor): un nmero de 0 a 255 que indicar el grosor del borde, en puntos. color: en hexadecimal, el color del borde. alpha(alfa): nivel de transparencia del borde, de 0 a 100. pixelHinting(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). scaleMode(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. caps(extremos): define cmo se dibujarn los extremos de los bordes,
joints(uniones): establece el tipo de uniones que se establecern en el borde,
miterLimit(limiteEsquinas): un nmero entre 1 y 255, indica la distancia de la esquina al trazo real,
Ejercicios unidad 23: Animaciones avanzadas Ejercicio 1: Nieve Utiliza un documento en blanco. No podrs crear ningn elemento. Lo debers hacer todo mediante ActionScript. Tendrs cumplir los siguientes requisitos: Dibujar un fondo. Dibujar una estrella. Que la estrella tenga un brillo dinmico. Que la estrella se pueda arrastrar. Dibujar los copos aleatoriamente. Que los copos desaparezcan (se derritan) al cabo de un tiempo.
Ayuda ejercicios unidad 23: Animaciones avanzadas Ejercicio 1: Nieve 1. Abre un nuevo documento haciendo clic en Archivo Nuevo. 2. Selecciona Archivo de Flash (AS 3.0) y pulsa Aceptar. 3. Gurdalo como nieve.fla. 4. Selecciona el fotograma 1 y abre el Panel Acciones desde Ventana Acciones. 5. Escribe lo siguiente para dibujar el fondo e importar las clases necesarias: 6. // Importamos las clases necesarias 7. import flash.filters.BlurFilter; 8. 9. // Creamos el fondo de la pelicula 10. var fondo:MovieClip=new MovieClip ; 11. fondo.graphics.beginFill(0x993333); 12. fondo.graphics.moveTo(0,0); 13. fondo.graphics.lineTo(550, 0); 14. fondo.graphics.lineTo(550, 400); 15. fondo.graphics.lineTo(0, 400); 16. fondo.graphics.lineTo(0, 0); 17. fondo.graphics.endFill(); addChild(fondo); Si lo pruebas, vers que se rellena el fondo con un tono rojo. 18. Escribe lo siguiente para dibujar la estrella y situarla en el centro de la pantalla: 19. //Creamos la estrella 20. var estrella:MovieClip=new MovieClip ; 21. estrella.graphics.lineStyle(10, 0x000000, 100, true, "normal", "none", "miter", 0); 22. estrella.graphics.beginFill(0xCCFF33, 85); 23. estrella.graphics.moveTo(20+stage.width/2, - 91+stage.height/2);
24. estrella.graphics.lineTo(22+stage.width/2, - 21+stage.height/2); 25. estrella.graphics.lineTo(84+stage.width/2, 0+stage.height/2); 26. estrella.graphics.lineTo(22+stage.width/2, 21+stage.height/2); 27. estrella.graphics.lineTo(20+stage.width/2, 91+stage.height/2); 28. estrella.graphics.lineTo(-22+stage.width/2, 37+stage.height/2); 29. estrella.graphics.lineTo(-86+stage.width/2, 56+stage.height/2); 30. estrella.graphics.lineTo(-50+stage.width/2, 0+stage.height/2); 31. estrella.graphics.lineTo(-86+stage.width/2, - 56+stage.height/2); 32. estrella.graphics.lineTo(-22+stage.width/2, - 37+stage.height/2); 33. estrella.graphics.lineTo(20+stage.width/2, - 91+stage.height/2); 34. estrella.graphics.endFill(); addChild(estrella); Ahora, ya tenemos el fondo y la estrella en el centro. 35. Escribe lo siguiente para aadirle un brillo dinmico a la estrella: 36. var brilloMax:Boolean=false; 37. var miBrillo:Number=80; 38. 39. import flash.filters.GlowFilter; //Necesitamos importar el filtro 40. estrella.addEventListener(Event.ENTER_FRAME, cambiarBrillo); 41. function cambiarBrillo(event):void { 42. //Hacemos que el brillo se vaya intensificando y atenuando
43. var brillo:GlowFilter=new GlowFilter(0xCCCC88,100,miBrillo,miBrillo,1,1); 44. estrella.filters=[brillo]; 45. if (brilloMax) { 46. miBrillo+=3; 47. if (miBrillo>120) { 48. brilloMax=false; 49. } 50. } else { 51. miBrillo-=3; 52. if (miBrillo<80) { 53. brilloMax=true; 54. } 55. } } 56. Por ltimo, aademos las funciones que nos permitan arrastrar y soltar la estrella. 57. // Funciones para poder mover la estrella 58. estrella.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar); 59. function arrastrar(event:MouseEvent):void { 60. estrella.startDrag();// Al mantener pulsada la estrella podremos arrastrala 61. } 62. estrella.addEventListener(MouseEvent.MOUSE_UP, soltar); 63. function soltar(event:MouseEvent):void { 64. estrella.stopDrag();// Cuando soltemos, la estrella permanecera en el lugar que deseemos }
65. Como la estrella era un nico objeto, lo hemos creado directamente en el panel de acciones. En cambio, como los copos son muchos objetos iguales, es ms til que creemos una clase. Haz clic en el men Archivo Nuevo... y elige Archivo de ActionScript. 66. El siguiente cdigo lo introduciremos en la Clase (archivo .as) donde incluiremos todas las funciones y variables para un copo. Calcularemos las posiciones, los tamaos y las velocidades aleatorias. Mediante la variable vidaCopo controlaremos si el copo se derrite o no. 67. package {//Importamos las clases necesarias 68. import flash.display.MovieClip;//Necesitamos MovieClip que es lo que crearemos 69. import flash.filters.BlurFilter;//El filtro que emplearemos 70. import flash.events.Event; //Utilizaremos evento 71. import flash.events.EventDispatcher; //Y un generador de eventos 72. //Y creamos nuestra clase como una subclacse (extends) de MovieClip, para que disponga de sus mtodos 73. public class Copo extends flash.display.MovieClip { 74. private var velocidad:Number;// Velocidad de bcada del copo 75. private var estrella:MovieClip;// Objeto estrella que utilizaremos para saber si choca con ella 76. private var fondo:MovieClip;// Objeto sobre el que aparecern los copos 77. private var vidaCopo:Number=300;// La vida que tendr el copo antes de derretirse 78. 79. public function Copo(_estrella:MovieClip, _fondo:MovieClip) { 80. this.estrella=_estrella;//Asignamos los aprmetros a sus respectivas propiedades 81. this.fondo=_fondo; 82. //dibujamos el copo 83. this.graphics.beginFill(0xFFFFFF);
84. this.graphics.moveTo(20, - 91); 85. this.graphics.lineTo(22, - 21); 86. this.graphics.lineTo(84, 0); 87. this.graphics.lineTo(22, 21); 88. this.graphics.lineTo(20, 91); 89. this.graphics.lineTo(-22, 37); 90. this.graphics.lineTo(-86, 56); 91. this.graphics.lineTo(-50, 0); 92. this.graphics.lineTo(-86, - 56); 93. this.graphics.lineTo(-22, - 37); 94. this.graphics.lineTo(20, - 91); 95. this.graphics.endFill(); 96. // Inicializamos las variables, posicion del copo, el desenfoque y su velocidad 97. this.width=num_aleatorio(2,6); //Tamao aleatorio 98. this.height=this.width; 99. this.velocidad=num_aleatorio(2,5); //Velocidad aleatoria 100. var des:Number=num_aleatorio(3,5); //Desenfoque aleatorio 101. var desenfoque:BlurFilter=new BlurFilter(des,des); 102. this.filters=[desenfoque]; 103. //Posicin aleatoria, con respecto al fondo
104. this.x=num_aleatorio(fondo.x,fondo.width); 105. this.y=fondo.y; 106. //El evento added se produce al agregar el elemento a la escena o a un contenedor 107. //As, no comenzar a caer hasta que no se visualice. 108. this.addEventListener("added", iniciarCaida); 109. } 110. private function iniciarCaida(event):void { 111. this.addEventListener("enterFrame", caerCopo); 112. } 113. // Funcin para saber si choca contra la estrella o llega al suelo 114. private function parado():Boolean { //Comprobamos si ha llegado al fondo o chocado con la estrella 115. return this.y>=fondo.height- this.height/2 || estrella.hitTestPoint(this.x, this.y, true); 116. } 117. // Funcin que har caer o parar al copo 118. private function caerCopo(event) { 119. if (! parado()) {//Si est cayendo 120. this.y+=this.velocidad; //Aumentamos Y 121. } else { //Si est parado... 122. if (this.vidaCopo) { //Y le queda vida... 123. this.vidaCopo-=1; //Le quitamos vida 124. } else { //Si no le queda vida
125. this.alpha- =0.1; //Lo vamos haciendo transparente 126. if (this.alpha<=0) {//Cuando ya no se vea... 127. //Lo eliminamos, quitando sus eventos 128. this.removeEventListener("added", iniciarCaida); 129. this.removeEventListener("enterFrame", caerCopo); 130. // y lanzando un evento que diga a la pelcula que lo tiene que borrar 131. dispatchEvent(new Event("copoDerretido", true)); 132. } 133. } 134. } 135. } 136. 137. // Funcin para crear el numero aleatorio 138. private function num_aleatorio(min:Number ,max:Number) { 139. //Genera un nmero aleatorio dentro de un rango 140. max++; 141. max=max-min; 142. return min+(Math.floor((Math.random()*(max*10)))%max); 143. } 144. } } 145. Guara el archivo con el nombre de la clase, es decir, gurdalo como Copo.as.
146. Para acabar, aade a la pelcula principal (nieve.fla) las funciones que lanzarn el copo, y la que los borra cuando se produzca el evento copoDerretido. 147. addEventListener("enterFrame", nevar); 148. function nevar(event):void{ 149. addChild(new Copo(estrella, fondo));//Creamos un copo y lo agregamos a la escena 150. } 151. addEventListener("copoDerretido", borrarCopo); 152. function borrarCopo(e:Event):void{ 153. removeChild(Copo(e.target)); } 154. Prueba la pelcula. Nota: en nuestro ejemplo, funciona a 24fps. 155. Prueba evaluativa unidad 23: Animaciones avanzadas 157. Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin. Si pulsas Restablecer podrs repetir la evaluacin. 1. Si aumentamos las coordenadas de un objeto, hacia que lado se mover? a) Hacia arriba. b) Hacia la derecha. c) Hacia abajo. 2. La funcin clearInterval para la pelcula los milisegundos que le indiques. a) Verdadero. b) Falso. 3. La instruccin setInterval repite la ejecucin de la funcin que le indiques cada x milisegundos. a) Verdadero. b) Falso. 4. Los eventos vinculados al evento ENTER_FRAME se reproducirn cada segundo.
a) Verdadero. b) Verdadero slo si la velocidad de la pelcula es de 1 fps. c) Verdadero slo si la velocidad de la pelcula es de 12 fps. 5. En la tcnica de rotoscopia slo hace falta que dibujemos un fotograma, el resto se genererarn a partir de ste. a) Verdadero. b) Falso. 6. Cuando utilicemos la API de Flash para dibujar, podremos declarar la forma del borde en cualquier momento. a) Verdadero. b) Falso. 7. En una lnea de contorno, el borde ninguno y el cuadrado son iguales. a) Verdadero. b) Falso. 8. 1.000.000 milisegundos equivalen a: a) 10 segundos. b) 100 segundos. c) 1000 segundos. 9. En la repeticin de funciones con la instruccin setInterval es posible el envo de parmetros. a) Verdadero. b) Falso.