CUADERNO DE EJERCICIOS FLASH 8 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 1

Contenido Ejercicio 1. Crear Gua de Dibujo. Cuadrculas ..................................... .................................. 4 Ejercicio 2. Cambiar Propiedades de la Pelcu la ..................................................................... 5 Ejerc icio 3. Abrir Paneles .......................................................... .............................................. 6 PRACTICA 1: Crear una pelicula a nuestro gusto................................................................. ... 7 PRACTICA 2: Estructurar una Pelcula........................................ ............................................. 7 PRACTICA 3: Creando Fotogramas . ................................................................................ ........ 7 PRACTICA 4: Paneles.................................................. ............................................................. 8 Ejercicio 4.Crea r un valo ....................................................................... ............................... 8 Ejercicio 5.Dando Color a un valo ............. ........................................................................... 9 Ej ercicio 6.Creando un color transparente......................................... .................................. 10 PRACTICA 5: Bandera Olmpica ............... ............................................................................. 11 PRACTICA 6: Saturno ........................................................... ................................................. 11 Ejercicio 7.Cambiar el Tipo de Texto ...................................................................... .............. 11 PRACTICA 7: Objetos. Rellenos y Bordes ....................... ....................................................... 12 PRACTICA 8: Seleccion es ............................................................................. ......................... 12 PRACTICA 9: Alinear Objetos ....................... ......................................................................... 13 PRA CTICA 10: Grupos ............................................................... ............................................ 13 Ejercicio 8.Cambiar un objeto de Capa .......................................................................... ...... 13 Ejercicio 9.Crear Smbolo. ............................................. ....................................................... 14 Ejercicio 10.Modifica r una instancia de un smbolo..................................................... ........ 15 PRACTICA 11: Crear Smbolo ........................................... .................................................... 16 PRACTICA 12: Insertar In stancia ........................................................................ ................... 17 PRACTICA 13: Duplicar Instancia ......................... ................................................................. 17 PRACTICA 14 : Efectos sobre Instancias ..................................................... ........................... 17 Ejercicio 11.Carga y Modificacin de Filtros....... .................................................................. 18 PRACTICA 1 5: Selector de Filtros ......................................................... ................................. 20 Ejercicio 12.Encadenar Interpolaciones .... ........................................................................... 21 E jercicio 13. Animar Texto por Bloques .......................................... ..................................... 23 PRACTICA 16: Crear un Clip a modo de cu enta atras ........................................................... 26 PRACTI CA 17: Crear un clip vaco y editarlo despus ...................................... ..................... 26 PRACTICA 18: Exportar una pelcula con proteccin.......... .................................................. 26 Ejercicio 14.Crear un Botn con Relieve .................................................................... .......... 27 PRACTICA 19: Crear un boton en forma de pildora .................. ........................................... 28 PRACTICA 20: Ajustar el rea Activa ............................................................................... ..... 29 PRACTICA 21: Botn con Sonido ........................................... ............................................... 29 PRACTICA 22: Detener una Pelcu la ............................................................................. ........ 30 PRACTICA 23: Animacion por forma Babosa arrastransose .............. ................................ 30 PRACTICA 24: Cambio de Forma y Tamao......... ................................................................. 31 PRACTICA 25 : Cambiar la Forma de un Texto .................................................

..................... 31 PRACTICA 26: Consejos de Forma ........................ ................................................................ 31 Ejercicio 15 .Exportar objeto como Bitmap.................................................... ....................... 32 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 2

Ejercicio 16.Acelerar Movimiento ............................................... ......................................... 34 PRACTICA 27: Efecto sobre animacion es - Rotacion ............................................................ 35 PR ACTICA 28: Efecto Aceleracin .................................................... ..................................... 36 PRACTICA 29: Orientar segn el Trazo .... ............................................................................. 36 PRACTICA 30: Efecto Alpha...................................................... ............................................. 36 Ejercicio 17.Publicar SWF ..... ................................................................................ ................ 37 PRACTICA 31: Codigo para incrustar Flash en HTML ........... ................................................. 38 PRACTICA 32: Importar Sonid os ............................................................................. .............. 39 PRACTICA 33: Insertar Sonidos ................................ ............................................................. 39 PRACTICA 34: Tr abajar con Sonidos ............................................................. ........................ 39 PRACTICA 35: Editar Sonidos ........................ ........................................................................ 39 Ejer cicio 18. Importando Vdeo con Puntos de Referencia .............................. .................... 40 PRACTICA 36: Mi Video................................... ...................................................................... 42 Ejerci cio 19.Crear una Pelcula con Niveles ............................................ .............................. 42 PRACTICA 37: Navegacion ActionScript Periodico Digital ................................................. 46 PRACTICA 38: Actio nScript - Formulario ........................................................... ................... 47 Ejercicio 20.Rotacin ..................................... ....................................................................... 48 Ejerc icio 21.Carga de Objetos ....................................................... ....................................... 49 Ejercicio 22.Arrastre y Orientacin de Objetos .................................................................... 51 Ejercicio 23.Colisin y Movimiento ............................................... ....................................... 52 PRACTICA 39: Juegos Proyectiles...... ................................................................................ . 55 Ejercicio 24.Movimiento en Espiral ........................................ .............................................. 57 PRACTICA 40: Animaciones avanz adas - Nieve ................................................................... . 59 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 3

Ejercicio 1. Crear Gua de Dibujo. Cuadrculas Objetivo. Crear una cuadrcula que quedar visible al fondo del fotograma (posterior mente no saldr en la pelcula) y que nos servir como gua para poder dibujar objetos d e forma exacta y precisa. Ejercicio paso a paso. 1 Pulsa en el men Archivo. 2 Sel ecciona la opcin Nuevo. 3 Aparecer una nueva pelcula. Si deseas crear la cuadrcula s obre una pelcula ya empezada, sltate los 2 primeros pasos. 4 Selecciona la opcin Cu adrcula del men Ver. 5 Se desplegar un submen como el de la figura. 6 Selecciona la opcin Mostrar Cuadrcula para hacerlo visible. 7 Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula a tu gusto (tamao, color de fondo...) 8 Selecciona la opcin Ajustes Ajustar a Cuadrcu la del men Ver para que los objetos que crees se acomoden a las lneas de la cuadrcu la, consiguiendo alinearlos de un modo fcil. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 4

Ejercicio 2. Cambiar Propiedades 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 Propieda des del Documento. 3 En Unidades de Reglas selecciona Centimetros. 4 A continuac in 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 a la s standard 640 x 480 px. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 5

Ejercicio 3. Abrir Paneles Objetivo. Abrir los Paneles de Carcter y el de Trazo y seleccionar uno. Ejercicio paso a paso. 1 Pulsa en el men Ventana. 2 Selecciona la opcin Muestras de Color, si ya tuviera una seal junto al nombre del Panel, significa que ya est abierto. Sino, haz clic s obre l. 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 selecci onar un color). 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 tra zo) CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 6

PRACTICA 1: Crear una pelicula 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 PRACTICA 2: Estructurar una Pelcula 1 Abre una nueva pelcula 2 Crea 2 Escenas y llmalas E1 y E2 3 Crea 2 capas en cada una. 4 Llmalas E1_1, E1_2 y E2_1, E2_2 PRACTICA 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 Fotograma s 1 Dada la siguiente pelcula Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuer das para qu sirve cada uno? CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 7

PRACTICA 4: Paneles 1 Abre el Panel Mezclador de Color. 2 Abre el Panel Acciones. 3 Abre el Panel Al inear. 4 Cierra el Programa Flash 8 5 Vuelve a abrirlo. Qu notas? Ejercicio 4.Crear un valo Objetivo. Crear una 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 Herramie ntas. 2 Situa el cursor del ratn en el Escenario (dentro del fotograma actual). 3 Haz c lic y arrastra el ratn hacia el lugar que desees. Observars que el movimiento de t u ratn provoca la creacin de un valo (figura 1). Cuando el valo tenga la forma desea da, suelta el ratn. El resultado ser similar al de la 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) CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 8

Ejercicio 5.Dando Color a un valo Objetivo. Dar color a un valo. Tanto a su interior como a su exterior Ejercicio p aso a paso. 1 Partimos de la existencia de un valo creado mediante la Herramienta valo encuentra en la Barra de Herramientas. que se 2 Hacemos clic en el interior del valo o en su borde. Depender de la zona cuyo col or queramos modificar. Obtendremos algo similar a la figura 1 o a la 2. 3 Una ve z hecho esto, nos fijamos en el Panel de Colores, que se encuentra dentro de la Barra de Herramientas. Y seleccionamos el color que nos guste. Seleccionamos el Interior del valo Seleccionamos el Borde del valo Para modificar el color del Interior del valo debemos seleccionar un color hacien do clic sobre el Panel de Colores existente junto a la imagen del "Bote de Pintu ra". Si deseamos modificar el borde, sobre el Panel existente junto al "Lpiz". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 9

Ejercicio 6.Creando un color transparente Objetivo. Crear un objeto cuyo color sea transparente, de modo que se vean los o bjetos que haya detrs Ejercicio paso a paso. 1 Creamos un rectngulo con la Herrami enta Rectngulo. 2 El Color de relleno del rectngulo creado ser el que est en ese mom ento seleccionado en el Panel Mezclador de Colores. Por ejemplo, el azul. 3 Una vez creado, seleccionamos el relleno del Rectngulo y modificamos el valor Alfa. P or ejemplo, escribimos un valor de 45%. Rectngulo Azul Ahora con Transparencia Si situamos otra imagen detrs de nuestro rectngulo (en otra capa), podemos ver cmo queda el efecto de la transparencia sobre nuestro relleno CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 10

PRACTICA 5: Bandera Olmpica 1 Dibuja 5 aros. 2 Cmbiales los colores. Por ejemplo, los colores de la bandera o lmpica (Azul, negro, rojo, amarillo y verde) 3 nelos de modo que parezcan los aros olmpicos. PRACTICA 6: Saturno 1 Dibuja un valo 2 Convierte su color de relleno un degradado de verde oscuro a v erde claro (por ejemplo). 3 Crea el aro que le rodea. 4 ne los 2 objetos para que parezca el planeta Saturno Ejercicio 7.Cambiar el Tipo de Texto Objetivo. Crear un texto cualquiera y asignarle el Tipo que ms nos interese. Ejer cicio paso a paso. 1 Hacemos clic en la Herramienta Texto y despus en el escenario. 2 Veremos esta imagen Si deseamos crear texto Esttico, basta con escribir dentro, de lo contrario, deberemos seguir los siguientes pasos: 3 Hacemos clic en el Pr opiedades, si es que tenamos minimizado este Panel. 4 Una vez podamos ver el Pane l seleccionamos la Pestaa en la que pondr el tipo de texto y elegimos el tipo de t exto que queramos. Veremos que, al hacer clic fuera del texto, cambia la lnea que rodea al recuadro de texto, pasando a ser discontnua y no desapareciendo aunque no escribamos nada dentro. (Los textos estticos CUADERNO DE EJERCICIOS Y PRACTICA S FLASH 8 Pgina 11

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 PRACTICA 7: Objetos. Rellenos y Bordes 1 Crea dos rectngulos con el interior de color verde y el borde negro. 2 En uno d e ellos elimina el Relleno. 3 En el otro, elimina el borde. PRACTICA 8: 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. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 12

PRACTICA 9: Alinear Objetos 1 Dibuja 4 objetos (crculos, rectngulos...). 2 Coloca uno en cada esquina usando e l Panel Alinear. PRACTICA 10: Grupos 1 Agrupa los 4 objetos del ejercicio anterior en un nico grupo. 2 Cambia su posic in (colcalos, por ejemplo, en el centro de la pelcula). 3 Desagrpalos. Ejercicio 8.Cambiar un objeto de Capa Objetivo. Mover un objeto situado en una capa a otra Ejercicio paso a paso. 1 Pa rtimos de una pelcula con ms de una Capa. 2 Seleccionamos la Capa donde est el obje to que queramos cambiar de capa. 3 Hacemos doble clic en el objeto a mover, para seleccionarlo en su totalidad (relleno y borde). 4 Pulsamos el boton derecho de l ratn. Se abrir un men como el de la imagen. 5 Seleccionamos Cortar. El objeto des aparecer. 6 Seleccionamos el fotograma en el que queramos colocar el objeto (situ ado en una capa distinta a la actual, aunque esto es vlido en ambos casos). 7 Hac emos clic con el botn derecho sobre el escenario de este fotograma de destino. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 13

8 Hacemos clic en Pegar para colocar el objeto en este fotograma o hacemos clic en Pegar in Situ para pegar el objeto en la misma posicin en la que estaba al cor tarlo Ejercicio 9.Crear Smbolo. Objetivo. Crear un smbolo de grfico que nos permitir coger destreza en una accin que ser bsica en la creacin de animaciones. Ejercicio paso a paso. 1 Pulsamos en la barra de herramientas y selecciona la Herramienta valo. 2 Dibuja mos un valo en cualquier lugar del escritorio. 3 Seleccionamos la figura creada. 4 Abrimos el men Insertar Nuevo Smbolo... de la barra de mens. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 14

Se desplegar una ventana como la de la figura. 5 En el campo Nombre introducimos el nombre de nuestro grfico, por ejemplo "Mi Primer Smbolo". 6 Seleccionamos la opcin Grfico en el apartado Comportamiento. Con esto le decimos a Flash que el nuevo smbolo ser un grfico. 7 Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico creado. Ejercicio 10.Modificar una instancia de un smbolo. Objetivo. Comprender la diferencia entre un smbolo y una instancia de este smbolo. Ejercicio paso a paso. 1 Vamos al men Ventana Bibliotecas Comunes. 2 Seleccionamos la primera opcin del s ubmen que aparecer (Botones). Aparecer la librera de botones predefinidos de Flash 8 . 3 Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera carpeta que aparece en la lista (Arcade buttons). Se abrir una lista con todos l os smbolos contenidos en la carpeta. 4 Arrastramos el primer smbolo (arcade button - blue) a nuestra rea de trabajo. Aparecer en el papel el smbolo que habamos arrast rado. Esto es una instancia del smbolo llamado arcade button - blue. Comprobmoslo. 5 Seleccionamos nuestra nueva instancia. CUADERNO DE EJERCICIOS Y PRACTICAS FLA SH 8 Pgina 15

6 Seleccionamos la herramienta Transformacin Libre instancia arrastrando los extr emos del objeto. y modificamos el tamao de la 7 Bien, ahora hemos modificado la instancia. Comprobemos que el smbolo sigue inta cto. Repitamos lo que hicimos en el paso 5. Como vemos, el botn ha aparecido de nuevo, pero no con el tamao que le acabamos de dar, sino con su tamao original. Esto suc ede 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 inse rtando y modificando ese smbolo y cualquier otro en esta u otra pelcula ya que est aremos insertando instancias. PRACTICA 11: Crear Smbolo 1 Crea una pelcula con 1 fotograma. 2 Dibuja un crculo perfecto. 3 Convirtelo a smbo lo de tipo Clip. 4 Comprueba que est disponible en la Biblioteca. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 16

PRACTICA 12: Insertar Instancia 1 Crea una nueva pelcula. 2 Inserta el Grfico de un botn cualquiera de las Bibliote cas comunes de Flash 8. 3 Modifica su tamao. 4 Vuelve a realizar el paso 2 y comp rueba que el botn se inserta en su tamao original. PRACTICA 13: Duplicar Instancia 1 Sobre el ejercicio anterior, duplica la instancia del botn que has cambiado de tamao. 2 Comprueba que se ha duplicado en la Biblioteca. PRACTICA 14: 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 qu e est tapando al otro un efecto Alfa del 40%. 3 Comprueba que ahora podemos ver l os dos claramente. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 17

Ejercicio 11.Carga y Modificacin de Filtros Objetivo. Cargar filtros mediante ActionScript dndoles las propiedades que queram os. Al final conseguiremos una pelcula como este ejemplo: Ejercicio paso a paso. 1. Abre el archivo pez.fla que encontrars en la carpeta ej ercicios/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.Dr opShadowFilter; Esto har que el filtro se importe a la pelcula y podamos utilizarl o. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 18

4. Despues de esto escribe: var sombra:DropShadowFilter = new DropShadowFilter() ; Hemos creado una variable llamada sombra que es un filtro de Sombra. 5. Luego accederemos a las propiedades de sombra y le daremos los valores que hay en los campos del formulario: sombra.distance = distance_stp.value; sombra.angle = angl e_stp.value; sombra.color = 0x000000; sombra.alpha = alpha_stp.value; sombra.blu rX = blur_stp.value; sombra.blurY = blur_stp.value; sombra.strength = strength_s tp.value; sombra.quality = quality_cmb.selectedItem.data; sombra.inner = inner_c hk.value; sombra.knockout = knockout_chk.value; sombra.hideObject = hideObject_c hk.value; 6. Finalmente asociamos el filtro sombra que hemos creado a la propied ad filters del clip: pez.filters = [sombra]; Hemos creado una pelcula donde podem os cambiar las propiedades de un filtro dinmicamente. Fcil verdad?. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 19

PRACTICA 15: Selector de Filtros Debers reproducir la siguiente pelcula Flash: Utiliza el archivo fuente filtros.fla que encontraras en la carpeta ejercicios/f iltros del curso. Como ya hemos visto, averiguar los filtros que afectan a un cl ip es realmente complicado, debers idear una forma para poder gestionarlos y mant ener los que estn activos cada vez que se pulse uno de los botones. No debers repr oducir el aspecto de los filtros, puedes personalizarlos como ms te guste. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 20

Ejercicio 12.Encadenar Interpolaciones Objetivo. Crear un movimiento multidireccional encadenando interpolaciones de mo vimiento. Ejercicio paso a paso. 1 Importamos un Clip de Pelcula. 2 Tambin podemos dibujarlo y convertir nuestro di bujo en un Clip de Pelcula. 3 Situamos el Clip en el lado izquierdo del rea de tra bajo. 4 Hacemos clic con el botn derecho sobre el nico fotograma existente en este momento. 5 Seleccionamos la opcin Crear Interpolacin de Movimiento. 6 Vamos al fo tograma nmero 20 y pulsamos F6. 7 Observaremos que se crea la Animacin de 20 fotog ramas de duracin. En ese mismo fotograma (el 20) desplazamos el smbolo al extremo derecho del escenario. Ahora ya tenemos la interpolacin base, en ella hemos marca do nicamente la posicin inicial y final del movimiento. Si lo dejramos as, el clip s eguira una lnea recta. Vamos a hacer que llegue a su origen haciendo zig-zag con u n par de acciones muy sencillas, aprovechando el hecho de tener la interpolacin y a creada. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 21

Comprobemos que la lnea de tiempos est de la siguiente forma: 8 Hacemos clic con el botn derecho 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 Des placemos nuestro clip hacia arriba. 10 Hacemos ahora clip con el botn derecho del ratn sobre el fotograma 10. 11 Desplacemos nuestro clip hacia abajo. Repite esto s dos ltimos pasos para los fotogramas 15 y 20 y prueba la pelcula. Como podemos c omprobar, el clip se desplaza ahora en lnea recta pero en varias direcciones dist intas. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 22

Ejercicio 13. Animar Texto por Bloques Objetivo. Crear una animacin sobre un texto separndolo en bloques de letras cuyo m ovimiento ser tratado de manera independiente, dando al texto un efecto vistoso q ue 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 Abrimos el Pane l Propiedades (tras seleccionar el texto) y seleccionamos el tipo de letra. Noso tros hemos elegido "Ruach Let", pero cualquiera es vlida. 3 Seleccionamos el text o recin escrito. 4 Accedemos al men Modificar Separar. Con esto separamos cada let ra ya que de no hacerlo Flash tratara todo el texto como un bloque y no podramos d ar el efecto a las letras. Vamos a separar el texto en los siguientes bloques: " a", "u", "la" y "Clic". Podramos cambiar los bloques si quisieramos dar otro efec to en concreto. 5 Seleccionamos dichos bloques y los convertimos a smbolos, dndole s un nombre identificativo y el Comportamiento grfico, ya que no los animaremos " internamente". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 23

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 to do aquello que encontrara en dicha capa, ya que como hemos comentado anteriormen te, lo convertira todo a smbolo automticamente. 7 Nombramos cada una de las capas s egn 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 qu e no lo estn. Esto es, la capa de ms arriba se llamar "Clic", la siguiente "la" y a s sucesivamente. 8 Hacemos clic con el botn derecho sobre el nico fotograma que tenemos en la lnea d e tiempos y en el men emergente seleccionamos Copiar Fotogramas. A continuacin vam os pegando los fotogramas (botn derecho Pegar Fotogramas) en todas las capas. CUA DERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 24

9 Seleccionamos cada capa y vamos borrando las partes del texto que no correspon den 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 mism o y superpuesto). 10 Situamos (arrastrando) el fotograma de cada capa a los sigu ientes frames: "A" : Fotograma 1. "U" : Fotograma 6. "LA" : Fotograma 12. "Clic" : Fotograma 18. 11 Seleccionamos el fotograma que ocupa cinco posiciones despus del fotograma de cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa tambin F6. 12 Hacemos clic con el botn derecho en los foto gramas centrales que hay entre los fotogramas claves y seleccionamos cada vez Cr ear Interpolacin de Movimiento. 13 Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el fo tograma 30 (Botn derecho Insertar Fotrograma 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 seleccio namos Insertar Fotograma Clave. 17 En este fotograma recin creado reducimos el an cho del bloque de texto y lo colocamos junto a la ltima "a". Y ya tenemos la anim acin creada. Como vemos hemos utilizado todo tipo de tcnicas de interpolacin, aunqu e todava puede complicarse ms como veremos ms adelante. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 25

PRACTICA 16: Crear un Clip a modo de cuenta 1 Crea una pelcula con slo 1 fotograma. 2 un 3. 3 Convirtelo a smbolo de tipo Clip. en la que se vea una cuenta atrs hasta el pelcula original un frame y el clip cinco, lo como cuenta.fla

atras Escribe un nmero cualquiera, por ejemplo 4 Crea una animacin fotograma a fotograma cero. 5 Comprueba que pese a tener la la animacin se ve completamente. 6 Gurda

PRACTICA 17: 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 l a lnea de tiempos principal. 4 Vuelve a editar el smbolo. PRACTICA 18: 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. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 26

Ejercicio 14.Crear un Botn con Relieve Objetivo. Crear un botn con efecto relieve de forma rectangular tipo formulario d e manera rpida y sencilla. Ejercicio paso a paso. 1 Dibujamos un rectngulo en el rea de trabajo. 2 Seleccionamos el fondo. 3 Cambiam os el color de fondo del rectngulo. Por ejemplo a gris. 4 Con la herramienta text o escribimos el texto que queramos en el interior del rectngulo. Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve. 5Sel eccionamos los bordes izquierda y superior. 6Modificamos el color de dichos bord es. Le damos el color blanco. 7Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro. Ya va tomando relieve, ahora vamos a crear los diferentes estados. 8 Seleccionamos el botn. 9 Activamos la opcin de men Insertar Nuevo Smbolo... 10 Mar camos el comportamiento de botn y le damos un nombre. Pulsa Aceptar. 11 Hacemos d oble clic sobre el botn para editarlo. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 27

12 Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspond ientes a los estados del botn. 13 Seleccionamos el fotograma Presionado. 14 Modifiquemos ahora el borde inferio r y el derecho del botn aplicndole el color blanco. 15 Finalmente seleccionemos lo s 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 hag a nada mientras no pulsemos el botn y el rea de accin es la que comprende nuestro r ectngulo. El resultado obtenido es el siguiente. Podemos pinchar sobre l y comprob ar el efecto. PRACTICA 19: Crear un boton en forma de pildora 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 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 28

5 Gurdalo como stop.fla PRACTICA 20: Ajustar el rea Activa 1 Crea una nueva pelcula 2 Escribe el texto: "VmOnoS" respetando las maysculas y mi nsculas como se muestran 3 Convirtelo a Botn 4 Haz que slo funcione al pasar por la "O" central PRACTICA 21: Botn con Sonido 1 Partimos del Botn del ejercicio 1. brelo 2 Haz que emita un sonido de la Bibliot eca 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 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 29

PRACTICA 22: Detener una Pelcula 1 Abre un nuevo documento. 2 En el primer fotograma inserta algn smbolo que se com porte como clip de pelcula y que contenta una animacin de ms de 1 fotograma 3 Ahora inserta en el clip el botn del ejercicio 1 de manera que se vea a lo largo de to da su reproduccin 4 Haz que se detenga el Clip al pulsar el Botn PRACTICA 23: Animacion por forma Babosa arrastransose 1 Abre un documento nuevo 2 En el primer fotograma dibuja una especie de babosa como la de la derecha. 3 Haz que cambie de forma y vaya de un lado a otro del es cenario, dando la sensacin de que est reptando. 4 Gurdalo como "babosa.fla". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 30

PRACTICA 24: 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. PRACTICA 25: Cambiar la Forma de un Texto 1 Escribe en distintas capas las letras de tu nombre. 2 Crea una animacin de form a que pase de una letra a la siguiente. 3 Cambia los colores y el tamao de cada l etra. PRACTICA 26: Consejos de Forma 1 Dibuja una Flecha. 2 Crea una animacin de forma de manera que al final, la flec ha quede con el mismo aspecto pero apuntando en direccin contraria. 3 Hazlo de ma nera que parezca que se apoya en la punta y se abate como la bisagra de una puer ta. Tiene que quedarte algo asi: CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 31

Ejercicio 15.Exportar objeto como Bitmap. Objetivo. Exportar un objeto Flash 8 como un grfico de tipo mapa de bits. En este caso, lo exportaremos como JPG. Ejercicio paso a paso. 1Seleccionamos el objeto a exportar. 2 Vamos al men Archivo Exportar Exportar Ima gen... Ahora estaremos delante de una ventana similar a la que se muestra a la d erecha. 3 Buscamos en la pestaa Guardar en la carpeta en la que quieras guardar e l archivo. 4 En el apartado Nombre de Archivo introducimos el nombre que queramo s que tenga nuestra nueva imagen. 5 Abrimos la pestaa de Tipos de archivo. 6 Busc amos entre todos los tipos el formato JPG o JPEG. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 32

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 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 33

Ejercicio 16.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. Vamos a basarnos en un Clip de Pelcula cualquiera. 1 Importa un Clip de Pelcula ya creado o bien lo creas t mismo (creas un dibujo y lo conviertes en Clip de Pelcula). 2 L o situas en el escenario si no lo est ya. 3 Pulsa el botn derecho del ratn sobre el fotograma que contiene el clip de pelcula 4 Selecciona Crear interpolacin de Movi miento 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 In tro para ver la animacin sin salir del entorno de trabajo. Ahora tenemos esto: 8 Ahora selecciona el fotograma 1 con el botn derecho y selecciona Propiedades pa ra abrir el panel Propiedades del fotograma. (si no est ya abierto) 9 Intoduce un 100 en la casilla Aceleracin (fuera), para hacer que acelere al principio y vaya frenando poco a poco. Comprueba que el resultado es como este: CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 34

10 Intoduce ahora un -100 en la casilla Aceleracin (dentro), para hacer que aumen te progresivamente su velocidad. El resultado sera el siguiente: Ahora ya hemos comprobado los distintos efectos de aceleracin. Comprueba el mismo ejercicio con otros valores de aceleracin para observar su efecto. PRACTICA 27: Efecto sobre animaciones - Rotacion 1 Abre un documento nuevo. 2 Dibuja una rueda y haz que se desplace de un lado a l otro del escenario. 3 Haz que ruede mientras hace el deplazamiento. 4 Gurdalo c omo "rueda.fla". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 35

PRACTICA 28: Efecto Aceleracin 1 Abre el archivo "rueda.fla" 2 Haz que vaya frenando en su movimiento hasta par arse. PRACTICA 29: 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 pa recer que la babosa est volando, haz que se arrastre por el borde de la montaa. PRACTICA 30: Efecto Alpha 1 Escribe tu nombre. 2 En una nueva capa escribe tu apellido. 3 Haz que el nombr e vaya desapareciendo y que ANTES de que lo haga aparezca poco a poco el apellid o por detrs suyo. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 36

Ejercicio 17.Publicar SWF Objetivo. Aprender a publicar una pelcula Flash como archivo SWF independiente, a s como configurar las opciones de publicacin. Ejercicio paso a paso. Partiremos de un documento ya creado. Escojamos uno que contenga Mapas de Bits de tipo JPG. 1 Accedemos al men Archivo Abriry abrimos el archivo en cuestin. 2 Abrimos la bibli oteca del documento mediante Ventana Biblioteca. Reduciremos la calidad de los m apas de bits. 3 Seleccionamos cada archivo JPG que tengamos con el botn derecho, y elegimos la opcin Propiedades. 4 Vamos al men Archivo Configuracin de publicacin p ara abrir la ventana Configuracin de Publicacin. 5 Abre la pestaa Formatos y desact iva la casilla HTML, porque no vamos a utilizar la pelcula va web. 6 Abre la pestaa Flash. 7 En la primera opcin, Orden de Carga, vamos a dejar el valor por defecto : De abajo a arriba, para que cargue primero las primeras capas. 8 En la barra d eslizante Calidad JPEG ponemos el valor 0 para reducir la calidad al mnimo. Vamos a protegerlo para que nadie lo pueda importar. 9 Marcamos la casilla de verific acin Proteger frente a Importacin e introducimos en el campo Contrasea la palabra d e paso que deseemos. 10 Pulsamos el botn Publicar. 11 Accede al directorio de Fla sh donde se ha exportado el archivo SWF y ejectalo. Comprueba que la calidad de l as imgenes no es buena. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 37

12 Abrimos ahora el men Archivo Importary seleccionamos el archivo que acabamos d e publicar. Comprueba que nos pide la clave para poder hacerlo. Ahora tenemos un a pelcula que no podrn importar y cuyo espacio en memoria ser menor debido al menor tamao de sus bitmaps. PRACTICA 31: Codigo para incrustar Flash en HTML Cuando exportamos una pelcula Flash para publicarla en una pgina web, Flash introd uce entre las lneas HTML un cdigo de etiquetas (como el HTML) que muestra al naveg ador qu pelcula tienen que reproducir y cmo. Intenta deducir e identificar del sigu iente cdigo, resultante de la exportacin de una pelcula, aquellos elementos que pod amos haber indicado nosotros en las propiedades de exportacin, y que estn estrecha mente relacionados con la visualizacin que tendr de ella la gente en el navegador. <EMBED SRC="aulaClic.swf" quality=high bgcolor=#FFFFFF WIDTH="640" HEIGHT="480" NAME="aulaClic" ALIGN="" TYPE="application/x-shockwaveflash" PLUGINSPAGE="http: //www.macromedia.com/go/getflashplayer"> </EMBED> INSTRUCCION EMBED SRC QUALITY BGCOLOR WIDTH ALIGN TYPE PLUGINSPACE </EMBED> DESCRIPCION CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 38

PRACTICA 32: Importar Sonidos 1 Crea una pelcula con 1 fotograma. 2 Localiza un sonido en tu disco duro. 3 Imprt alo a tu pelcula. 4 Comprueba que est disponible en la Biblioteca. PRACTICA 33: Insertar Sonidos 1 Partiendo del ejercicio anterior, inserta el sonido importado en el fotograma 1. 2 Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa C TRL+ ENTER (Esta combinacin de teclas te permite "probar" la pelcula). PRACTICA 34: Trabajar con Sonidos 1 Consigue que el sonido del ejercicio 2 deje de escucharse al llegar la pelcula al fotograma 5. 2 Consigue que vuelva a escucharse en el fotograma 10. PRACTICA 35: Editar Sonidos 1 Modifica tu sonido (usando Flash) de modo que en un principio no se oiga y poc o a poco vaya aumentando de volumen. 2 Modifica tu sonido de modo que al final d el mismo, parezca que el sonido pasa de un altavoz al otro. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 39

Ejercicio 18. Importando Vdeo con Puntos de Referencia Objetivo. Importar una pelcula creando los puntos de referencia que hemos utiliza do en el ejemplo de la teora. Ejercicio paso a paso. 1. Haz clic en Archivo Impor tar Importar vdeo. 2. En la pantalla que aparecer pulsa el botn Examinar y busca el archivo tux.avi dentro de la carpeta ejercicios/puntosreferencia del curso. 3. Seleccinalo y pulsa Abrir. 4. Haz clic en el botn Siguiente. 5. En la nueva pantal la, asegrate de que la opcin Descarga progresiva desde un servidor web est marcada y pulsa Siguiente. 6. Ahora pulsa el botn Mostrar configuracin avanzada y haz clic sobre la pestaa Puntos de referencia. 7. Aadiremos un punto de referencia al prin cipio del vdeo. Haz clic en el botn 8. Dale el nombre de inicio y selecciona Naveg acin en el desplegable Tipo. 9. Ahora arrastraremos el cabezal hasta el principio de la primera carrera: . Ser en el segundo 07.359, puedes utilizar las flechas izquierda y derecha para CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 40

ajustar el tiempo. de nuevo para crear otro punto de referencia, le daremos el 1 0. Pulsa el botn nombre de carrera1 y seleccionaremos Navegacin. 11. Desplaza el c abezal al segundo 07.360. 12. Crea un punto de referencia pulsando el botn carrer a1inicio y selecciona Evento en Tipo. y dale el nombre de 13. Ahora aadiremos un parmetro, haz clic en el botn (Parmetros). 14. Dale el nombre de fotograma y el valor ready. de la lista de la derecha 15. Desplzate hasta el segundo 42.280 y crea otro punto de referencia llamado car rera1fin de Tipo Evento. 16. Dale un parmetro pulsando el botn fotograma y el valo r win. en la lista de la derecha, dale el nombre 17. Desplzate hasta el segundo 58.159 e inserta otro punto de referencia. Llmalo c arrera2 y dale Tipo Navegacin. 18. Cambia el cabezal a la posicin 58.160 y crea un punto de referencia llamado carrera2inicio de Tipo Evento. 19. Dale un parmetro llamado fotograma y con valor ready. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 41

20. Desplaza el cabezal al segundo 1:34.600, crea all un ltimo punto de referencia . 21. Dale el nombre carrera2fin y el Tipo Evento. 22. Crea un parmetro para este punto de referencia (pulsando el botn fotograma y dale el valor lose. ), llmalo 23. Ya hemos terminado, haz clic en el botn Siguiente hasta que llegue al final y empiece la importacin. Hemos importado un vdeo preparado para navegar por l y que nos pasar parmetros en determinados puntos. Fcil verdad?. PRACTICA 36: Mi Video Debers reproducir la siguiente pelcula Flash: Utiliza el archivo fuente video.fla que encontraras en la carpeta ejercicios/video del curso. Tu tarea consistir en i mportar 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 aadirle funcionali dad a los botones mediante ActionScript. Ejercicio 19.Crear una Pelcula con Niveles Objetivo. Crearemos una pelcula parecida a esta: Ejercicio paso a paso. Para cada uno de los elementos que mostraremos en la pelcula principal seguiremos los sigu ientes pasos: 1. Haz clic en el botn Nuevo Smbolo al pie de la Biblioteca. 2. Dale un nombre y selecciona Clip de pelcula. 3. Dibuja la forma que quieras mo strar en el escenario. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 42

4. Con ayuda de la herramienta Seleccin al punto de referencia (mira el ejemplo). sita la forma centrada con respecto 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. 8. Aade la siguiente lnea en el Panel Acciones para el fotograma 1 de la pelcula principal: this._visib le = false; De esta forma la pelcula ser invisible nada ms abrirla. La haremos visi ble ms tarde a travs del cdigo. 9. Selecciona el smbolo y en el Panel Acciones escri be: on (press) { startDrag(this); } on (release) { stopDrag(); } Esto har que pue das arrastrarlo con el ratn. 10. Publica la pelcula desde Archivo Publicar, guarda el documento y cirralo. 11. Repite estos pasos para cada una de las formas que q uieras 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 Pa nel 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 q ue utilizaremos. Nosotros hemos importado la biblioteca de los elementos anterio res para utilizar las mismas formas. Para ello haz clic en Archivo Importar Abri r biblioteca externa. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 43

4. Seleccionar el .fla que quieras abrir y arrastra el smbolo al Escenario. 5. Re dimensinalo con la herramienta Transformacin Libre 6. Selecciona Botn en el despleg able del Panel Propiedades: . 7. Arrastra otro smbolo y colcalo al pie del Escenario (este ser el que har que rote el elemento). 8. Redimensinalo, y selecciona tambin Botn. 9. Repite estos pasos pa ra cada una de las formas que hayas creado. 10. Una vez ya estn todos los botones en el Escenario pasaremos a escribir el cdigo asociado. 11. Crea una nueva capa pulsando el botn Insertar Capa . 12. En el fotograma 1 de la nueva capa aade el siguiente cdigo: loadMovieNum("cuad rado.swf", 1); loadMovieNum("triangulo.swf", 2); loadMovieNum("estrella.swf", 3) ; loadMovieNum("circulo.swf", 4); loadMovieNum("pentagono.swf", 5); loadMovieNum ("rectangulo.swf", 6); Este cdigo es el que hemos utilizado nosotros, hemos carga do cada pelcula en un nivel diferente. Simplemente escribe la ruta del archivo SW F y el nmero de nivel (que debers recordar) donde quieras cargarla. 13. Luego sele cciona el botn que har que se muestre el elemento y escribe lo siguiente en el Pan el Acciones: on (release) { if (_level1._visible) { _level1._visible = false; } else { _level1._visible = true; } CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgin a 44

} Debers indicar en que nivel estaba cargado el SWF que contiene el elemento, en este caso era _level1. Esto har que la propiedad visible del SWF se cambie a true si se encontraba a false y al revs. 14. Tambin podemos acceder a las propiedades de los smbolos del SWF. Vers cmo. Selecciona el botn que realizar el giro y escribe e sto: on (release) { if (_level1._visible) { _level1.cuadrado._rotation = _level1 .cuadrado._rotation - 15; } } Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto en cuestin slo es necesario escribir el nivel en el que se encuentra seguido del nombre de instancia que le dimos en su momento. 15 . Repite estos pasos para cada uno de los botones. Recuerda escribir bien las ru tas de nivel y los nombres de instancia. 16. Una vez terminado prueba la pelcula desde Control Probar pelcula. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 45

PRACTICA 37: Navegacion ActionScript Periodico Digital Debers reproducir la siguiente pelcula Flash: Para ello debers crear un movieclip que reproduzca el movimiento de la pgina, esta pelcula tiene que llamarse hoja_movimiento y deber estar incluida directamente so bre la pelcula principal (_root.hoja_movimiento), pues los botones incluidos en l as hojas SWF que cargars apuntan a ese clip de pelcula para avanzar o retroceder. Adems, debers marcar con etiquetas de fotogramas ambos movimientos (el de avance y retroceso) como siguiente y anterior. Podrs encontrar las hojas a cargar en la c arpeta /ejercicios/periodico del curso. El resto queda a tu disposicin, utiliza t odos los recursos que necesites. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 46

PRACTICA 38: ActionScript - Formulario Debers reproducir el siguiente formulario Flash: Tamben debers establecer el orden de tabulacin de los objetos y el botn por defecto. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 47

Adems, debers darle funcionalidad al botn Reset y Enviar. El primero limipando los datos del formulario y el segundo recogiendolos validndolos y enviandolos a un ar chivo php. El validador del email deber comprobar que la direccin esta correctamen te escrita (para ello utiliza funcin indexOf y lastIndexOf). Ejercicio 20.Rotacin Objetivo. Reproduciremos la pelcula que vimos en la teora pero en vez de utilizar diferentes fotogramas de movieclips utilizaremos la propiedad _rotation. Ejercic io paso a paso. 1. Abre el archivo movimiento_rotacion.fla que encontrars en la c arpeta ejercicios/movimiento_rotacion. 2. Observa que al clip le hemos dado el n ombre de instancia miClip. Ahora abre el Panel Acciones (Ventana Acciones o puls ando la tecla F9). 3. Escribe el siguiente fragmento de cdigo: var izquierda:Bool ean = false; var derecha:Boolean = false; miClip._x = 30; miClip.onPress = funct ion() { if (miClip._x <= 30) { miClip._rotation = 10; derecha = true; } if (miCl ip._x >= 515) { miClip._rotation = -10; izquierda = true; } } onEnterFrame = fun ction() { if (derecha) { if (miClip._x < 515) { miClip._x = miClip._x + 6; } els e { CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 48

miClip._rotation = 0; derecha = false; } } if (izquierda) { if (miClip._x > 30) { miClip._x = miClip._x - 6; } else { miClip._rotation = 0; izquierda = false; } } } 4. Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter. Como pued es observar el cdigo es idntico al anterior pero cambiando las sentencias de salto de fotograma por cambios de rotacin en el clip. Ejercicio 21.Carga de Objetos Objetivo. Reproduciremos la pelcula de ejemplo que vimos en la teora: Ejercicio pa so 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 der echo sobre l. 3. Selecciona Vinculacin. 4. Se abrir una ventana donde debers hacer c lic en la opcin Exportar para ActionScript. 5. Escribe estrella en el campo nombr e y pulsa OK. 6. Selecciona el primer fotograma de la Capa 3 y escribe el siguie nte fragmento de cdigo en el Panel Acciones (tecla F9): _global.numEstrellas = 0; _global.ultimaX = 0; CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 49

_global.ultimaY = 0; Utilizaremos estas variables para saber en cada momento cua ntas estrellas hay en el Escenario y la posicin de la ltima de ellas. 7. Seleccion a el botn aadir y escribe el siguiente fragmenteo de cdigo en el Panel Acciones: on (release) { if (numEstrellas<30) { numEstrellas++; var miEstrella:MovieClip = a ttachMovie("estrella", "estrella_"+ultimaX+"_"+ultimaY, numEstrellas); miEstrell a._x = ultimaX; miEstrella._y = ultimaY; if (ultimaX>=Stage.width-50) { ultimaY += 50; ultimaX = 0; } else { ultimaX += 50; } } } Observa los que hemos hecho. S i podemos aadir ms estrellas (entonces se cumple la condicin) aumentamos en 1 el co ntador de estrellas. Aadimos un nuevo clip de pelcula y le damos un nombre de inst ancia compuesto por el nombre estrella seguido por las coordenadas de posicin par a poder eliminarlo ms tarde. Aumentamos las variables de coordenadas teniendo en cuenta si la fila de estrellas ha superado ya la anchura de la pantalla. 8. Sele cciona el botn quitar y escribe el siguiente fragmento de cdigo en el Panel Accion es: on (release) { if (numEstrellas>0) { numEstrellas--; if (ultimaX==0) { ultim aY -= 50; ultimaX = Stage.width-50; } else { ultimaX -= 50; } removeMovieClip("e strella_"+ultimaX+"_"+ultimaY); CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 50

} } En este caso hemos avaluado si hay estrellas que quitar (el contador debe se r mayor que 0 para eso), y disminuimos el contador de estrellas en 1. Devolvemos las coordenadas a su posicin inmediatamente anterior y eliminamos la estrella qu e se encuentra en esa posicin llamndola por el nombre que hemos creado para tal fi n. Ya hemos creado una pelcula que aade un nmero concreto de elementos automatizada mente. Fcil verdad?. Ejercicio 22.Arrastre y Orientacin de Objetos Objetivo. Reproduciremos la pelcula que vimos en la teora: Ejercicio paso a paso. 1. Abre el archivo trigonometria.fla que encontrars en la carpeta ejercicios/trig onometria del curso. 2. Aadiremos primero el cdigo para hacer que la pelota se pue da arrastrar y colocar con el ratn. Selecciona la pelota y abre el Panel Acciones (tecla F9), escribe el siguiente fragmento de cdigo: on (press) { startDrag(this ); } on (release) { stopDrag(); } 3. Ahora haremos que la nave se oriente hacia la pelota en cada momento (relamen te lo que haremos ser asociar el cdigo al evento onEnterFrame para que se refresqu e a cada vuelta al fotograma). Selecciona el fotograma 1, abre el Panel Acciones y escribe los siguiente: nave.onEnterFrame = function() { var coordenadaX:Numbe r = pelota._x; var coordenadaY:Number = pelota._y; var miX:Number = nave._x; var miY:Number = nave._y; CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 51

var radianes:Number = Math.atan2((coordenadaY-miY), (coordenadaX-miX)); var grad os:Number = Math.round(radianes*180/Math.PI); nave._rotation = grados; }; Lo que hemos hecho en un principio es almacenar las cuatro coordenadas que nos interes an, las de la nave y las de la pelota. Luego calculamos el ngulo de la pelota res pecto a la nave y asociamos ese ngulo a la propiedad _rotation de esta ltima (pasnd ola antes a grados). Nota: Observa que inicialmente la nave est orientada a la de recha, as que no har falta solventar el desfase de ngulo. Y ya estamos listos. Tamp oco era muy dificil, verdad? Ejercicio 23.Colisin y Movimiento Objetivo. Reproduciremos la pelcula que vimos en la teora: Ejercicio paso a paso. 1. Abre el archivo colision.fla que encontrars en la carpeta ejercicios/colision del curso. 2. Selecciona el primer fotograma y abre el Panel Acciones, escribe e n l lo siguiente: onEnterFrame = function() { var velocidad:Number = 1; if (Key.i sDown(Key.DOWN)) { if (!(fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getB ounds(_root).yMax+velocidad, true) || fondo.hitTest(miClip.getBounds(_root).xMax , miClip.getBounds(_root).yMax+velocidad, true))) { miClip._y += velocidad; } } if (Key.isDown(Key.UP)) { if CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 52

(!(fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMin-velo cidad, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_ro ot).yMin-velocidad, true))) { miClip._y -= velocidad; } } if (Key.isDown(Key.LEF T)) { if (!(fondo.hitTest(miClip.getBounds(_root).xMin-velocidad, miClip.getBoun ds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMin-velocidad, m iClip.getBounds(_root).yMax, true))) { miClip._x -= velocidad; } } if (Key.isDow n(Key.RIGHT)) { if (!(fondo.hitTest(miClip.getBounds(_root).xMax+velocidad, miCl ip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMax+ve locidad, miClip.getBounds(_root).yMax, true))) { miClip._x += velocidad; } } } P arece un poco complicado pero en esencia es ms sencillo. Para cada uno de los mov imiento (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 un a 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 se r la de la esquina inferior izquierda y la otra de la esquina inferior derecha. S i por ejemplo, no evaluasemos el choque con la esquina inferior izquierda e inte ntsemos realizar un movimiento hacia abajo, ste se realizara! Y en definitiva es lo que queremos evitar. Observa tambin que para realizar el hitTest hemos tenido en cuenta la posicin que adoptar el objeto despus del movimiento (sumndole la velocidad , o lo que CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 53

es lo mismo, el nmero de pxeles que se desplaza el objeto a cada pulsacin). CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 54

PRACTICA 39: Juegos Proyectiles NOTA: Te recomendamos ver el Videotutorial 41 Debers reproducir el siguiente jueg o Flash: 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 funci one. Debers seguir las siguientes instrucciones: CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 55

 Crear un cursor personalizado. Generar el arma importndola a travs de cdigo desde l a Biblioteca. Generar, tambin con ActionScript, los bloques que la rodearn. Hacer que el arma siga al ratn. Crear un bloque de bonus cada vez que se destruyan 4 pr oyectiles. Crear un rayo con el arma cada vez que se pulsa la tecla Espacio. Gen erar mediante ActionScript las estadsticas del juego incluyendo el nivel en el qu e nos encontramos y el nmero de proyectiles destruidos. Crear proyectiles aleator iamente. Debers controlar si chocan contra un bloque, un rayo o el arma. Si salen de la pantalla debers eliminarlos! CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 56

Ejercicio 24.Movimiento en Espiral Objetivo. Reproduciremos la pelcula que puedes ver a continuacin: Ejercicio paso a paso. 1. Abre el archivo espiral.fla que encontrars en la carpet a ejercicios/espiral del curso. 2. Haz clic en el fotograma 2 de la capa accione s. 3. Abre el Panel Acciones pulsando la tecla F9. 4. Escribe lo siguiente: _glo bal.velocidad = 0.2; _global.distancia = 5; _global.recorrido = 30; 5. Cierra el Panel Acciones y selecciona la bola. 6. Vuelve a abrir el Panel Acciones y escr ibe lo siguiente: onClipEvent (enterFrame) { if (recorrido>0) { CUADERNO DE EJER CICIOS Y PRACTICAS FLASH 8 Pgina 57

var i:Number = distancia*recorrido; this._x = Math.round(i*Math.cos(recorrido)) + Stage.width/2; this._y = Math.round(i*Math.sin(recorrido)) + Stage.height/2; r ecorrido -= velocidad; var radianes:Number = Math.atan2((this._xStage.width/2), (this._y-Stage.height/2)); var grados:Number = Math.round(radianes*180/Math.PI); this._rotation = -grados+5; this._xscale = recorrido * 5; this._yscale = this._ xscale; } } 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 cuant o 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. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 58

PRACTICA 40: Animaciones avanzadas - Nieve Debers reproducir la siguiente animacin Flash:

Utiliza un documento en blanco. No podrs crear ningn elemento. Lo debers hacer todo mediante ActionScript. Tendrs cumplir los siguientes requisitos: Dibujar un fon o. Dibujar una estrella. Que la estrella tenga un brillo dinmico. Que la estrella se pueda arrastrar. Dibujar los copos aleatoriamente. Que los copos desaparezca n (se derritan) al cabo de un tiempo. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 59