49270170 Cuaderno de Ejercicios Flash

CUADERNO DE EJERCICIOS FLASH 8 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 1

Contenido Ejercicio 1. Crear Guía de Dibujo. Cuadrículas ..................................... ..................................... .................................. ...................... ............ 4 Ejercicio 2. Cambiar Propiedades de la Pelícu la ....................... ............................................... .............................................. ...................... 5 Ejerc icio 3. Abrir Paneles ........................ ................................................. .................................. ......... .............................................. ...................... ........................ 6 PRACTICA 1: Crear una pelicula a nuestro gusto................... gusto........................................... .............................................. ...................... ... 7 PRACTICA 2: Estructurar una Película........................................ Película........................................ ............................................. ...................... ....................... 7 PRACTICA 3: Creando Fotogramas . .............................................. ...................... ................................................. .................................. ......... ........ 7 PRACTICA 4: Paneles................ Paneles......................................... .................................. ......... .............................................. ...................... ....................................... ............... 8 Ejercicio 4.Crea r un Óvalo ....................... ............................................... ................................................ ........................ ............................... ...................... ......... 8 Ejercicio 5.Dando Color a un Óvalo ............. .............................................. ...................... ................................................. ............................. .... 9 Ej ercicio 6.Creando un color transparente......................................... transparente......................................... .................................. ...................... ............ 10 PRACTICA 5: Bandera Olímpica ............... .............................................. ...................... ................................................. ............................... ...... 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 Símbolo. ............................................. ............................................. .............................................. ...................... ................................. ......... 14 Ejercicio 10.Modifica r una instancia de un símbolo................. símbolo.......................................... .................................... ........... ........ 15 PRACTICA 11: Crear Símbolo ....................... ........................................... .................... .............................................. ...................... .............................. ...... 16 PRACTICA 12: Insertar In stancia ...................... .............................................. ................................................. ........................... ................... 17 PRACTICA 13: Duplicar Instancia ......................... .............................................. ...................... ........................................... ................... 17 PRACTICA 14 : Efectos sobre Instancias ....................... ................................................ .............................. ..... ........................... ...................... ..... 17 Ejercicio 11.Carga y Modificación 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 vacío y editarlo después ...................................... ...................................... ..................... 26 PRACTICA 18: Exportar una película con protección.......... .............................................. ...................... ............................ .... 26 Ejercicio 14.Crear un Botón con Relieve ...................... .............................................. .............................................. ...................... .......... 27 PRACTICA 19: Crear un boton en forma de pildora .................. ........................................... ...................... ..................... 28 PRACTICA 20: Ajustar el Área Activa ................................................. ......................... ................................................. .............................. ..... ..... 29 PRACTICA 21: Botón con Sonido ........................................... .............................................. ...................... .......................... 29 PRACTICA 22: Detener una Pelícu la ....................... ............................................... ................................................. .............................. ..... ........ 30 PRACTICA 23: Animacion por forma – Babosa arrastransose .............. ................................ ...................... .......... 30 PRACTICA 24: Cambio de Forma y Tamaño......... .............................................. ...................... ........................................... ................... 31 PRACTICA 25 : Cambiar la Forma de un Texto ....................... ................................................ ...........................

Contenido Ejercicio 1. Crear Guía de Dibujo. Cuadrículas ..................................... ..................................... .................................. ...................... ............ 4 Ejercicio 2. Cambiar Propiedades de la Pelícu la ....................... ............................................... .............................................. ...................... 5 Ejerc icio 3. Abrir Paneles ........................ ................................................. .................................. ......... .............................................. ...................... ........................ 6 PRACTICA 1: Crear una pelicula a nuestro gusto................... gusto........................................... .............................................. ...................... ... 7 PRACTICA 2: Estructurar una Película........................................ Película........................................ ............................................. ...................... ....................... 7 PRACTICA 3: Creando Fotogramas . .............................................. ...................... ................................................. .................................. ......... ........ 7 PRACTICA 4: Paneles................ Paneles......................................... .................................. ......... .............................................. ...................... ....................................... ............... 8 Ejercicio 4.Crea r un Óvalo ....................... ............................................... ................................................ ........................ ............................... ...................... ......... 8 Ejercicio 5.Dando Color a un Óvalo ............. .............................................. ...................... ................................................. ............................. .... 9 Ej ercicio 6.Creando un color transparente......................................... transparente......................................... .................................. ...................... ............ 10 PRACTICA 5: Bandera Olímpica ............... .............................................. ...................... ................................................. ............................... ...... 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 Símbolo. ............................................. ............................................. .............................................. ...................... ................................. ......... 14 Ejercicio 10.Modifica r una instancia de un símbolo................. símbolo.......................................... .................................... ........... ........ 15 PRACTICA 11: Crear Símbolo ....................... ........................................... .................... .............................................. ...................... .............................. ...... 16 PRACTICA 12: Insertar In stancia ...................... .............................................. ................................................. ........................... ................... 17 PRACTICA 13: Duplicar Instancia ......................... .............................................. ...................... ........................................... ................... 17 PRACTICA 14 : Efectos sobre Instancias ....................... ................................................ .............................. ..... ........................... ...................... ..... 17 Ejercicio 11.Carga y Modificación 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 vacío y editarlo después ...................................... ...................................... ..................... 26 PRACTICA 18: Exportar una película con protección.......... .............................................. ...................... ............................ .... 26 Ejercicio 14.Crear un Botón con Relieve ...................... .............................................. .............................................. ...................... .......... 27 PRACTICA 19: Crear un boton en forma de pildora .................. ........................................... ...................... ..................... 28 PRACTICA 20: Ajustar el Área Activa ................................................. ......................... ................................................. .............................. ..... ..... 29 PRACTICA 21: Botón con Sonido ........................................... .............................................. ...................... .......................... 29 PRACTICA 22: Detener una Pelícu la ....................... ............................................... ................................................. .............................. ..... ........ 30 PRACTICA 23: Animacion por forma – Babosa arrastransose .............. ................................ ...................... .......... 30 PRACTICA 24: Cambio de Forma y Tamaño......... .............................................. ...................... ........................................... ................... 31 PRACTICA 25 : Cambiar la Forma de un Texto ....................... ................................................ ...........................

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

Ejercicio 16.Acelerar Movimiento ............................................... ......................................... 34 PRACTICA 27: Efecto sobre animacion es - Rotacion ............................................................ 35 PR ACTICA 28: Efecto Aceleración .................................................... ..................................... 36 PRACTICA 29: Orientar según 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 Vídeo con Puntos de Referencia .............................. .................... 40 PRACTICA 36: Mi Video................................... ...................................................................... 42 Ejerci cio 19.Crear una Película con Niveles ............................................ .............................. 42 PRACTICA 37: Navegacion ActionScript – Periodico Digital ................................................. 46 PRACTICA 38: Actio nScript - Formulario ........................................................... ................... 47 Ejercicio 20.Rotación ..................................... ....................................................................... 48 Ejerc icio 21.Carga de Objetos ....................................................... ....................................... 49 Ejercicio 22.Arrastre y Orientación de Objetos .................................................................... 51 Ejercicio 23.Colisión 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 Página 3

Ejercicio 1. Crear Guía de Dibujo. Cuadrículas Objetivo. Crear una cuadrícula que quedará visible al fondo del fotograma (posterior mente no saldrá en la película) y que nos servirá como guía para poder dibujar objetos d e forma exacta y precisa. Ejercicio paso a paso. 1 Pulsa en el menú Archivo. 2 Sel ecciona la opción Nuevo. 3 Aparecerá una nueva película. Si deseas crear la cuadrícula s obre una película ya empezada, sáltate los 2 primeros pasos. 4 Selecciona la opción Cu adrícula del menú Ver. 5 Se desplegará un submenú como el de la figura. 6 Selecciona la opción Mostrar Cuadrícula para hacerlo visible. 7 Selecciona la opción Editar Cuadrícula para ajustar los parámetros de la cuadrícula a tu gusto (tamaño, color de fondo...) 8 Selecciona la opción Ajustes → Ajustar a Cuadrícu la del menú Ver para que los objetos que crees se acomoden a las líneas de la cuadrícu la, consiguiendo alinearlos de un modo fácil. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 4

Ejercicio 2. Cambiar Propiedades de la Película Objetivo. Practicar cómo se pueden cambiar algunos atributos fundamentales de las películas. Ejercicio paso a paso. 1 Haz clic con el botón derecho sobre el fondo de la película. 2 Selecciona Propieda des del Documento. 3 En Unidades de Reglas selecciona Centimetros. 4 A continuac ión selecciona Dimensiones y escribe en las casillas Anchura 22.46 y en Altura 16. 84. 5 Pulsa en Aceptar y observa cómo cambia el tamaño. Estas medidas equivalen a la s standard 640 x 480 px. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 5

Ejercicio 3. Abrir Paneles Objetivo. Abrir los Paneles de Carácter y el de Trazo y seleccionar uno. Ejercicio paso a paso. 1 Pulsa en el menú Ventana. 2 Selecciona la opción Muestras de Color, si ya tuviera una señal 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 servía 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 Página 6

PRACTICA 1: Crear una pelicula a nuestro gusto Crea una película que tenga las siguientes propiedades: 1 Un tamaño de 300 x 100 px 2 Un color de fondo rojo 3 Un Velocidad de los Fotogramas de 14 fps PRACTICA 2: Estructurar una Película 1 Abre una nueva película 2 Crea 2 Escenas y llámalas E1 y E2 3 Crea 2 capas en cada una. 4 Llámalas E1_1, E1_2 y E2_1, E2_2 PRACTICA 3: Creando Fotogramas 1 Crea en una película 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 película 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 Página 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 ratón en el Escenario (dentro del fotograma actual). 3 Haz c lic y arrastra el ratón hacia el lugar que desees. Observarás que el movimiento de t u ratón provoca la creación de un óvalo (figura 1). Cuando el óvalo tenga la forma desea da, suelta el ratón. El resultado será similar al de la figura 2. Truco: Si quieres crear un círculo perfecto, mantén pulsada la tecla SHIFT mientras das forma al óvalo. (Sucede igual con la Herramienta Rectángulo) CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 "Lápiz". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 detrás Ejercicio paso a paso. 1 Creamos un rectángulo con la Herrami enta Rectángulo. 2 El Color de relleno del rectángulo 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 Rectángulo y modificamos el valor Alfa. P or ejemplo, escribimos un valor de 45%. Rectángulo Azul Ahora con Transparencia Si situamos otra imagen detrás de nuestro rectángulo (en otra capa), podemos ver cómo queda el efecto de la transparencia sobre nuestro relleno CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 10

PRACTICA 5: Bandera Olímpica 1 Dibuja 5 aros. 2 Cámbiales los colores. Por ejemplo, los colores de la bandera o límpica (Azul, negro, rojo, amarillo y verde) 3 Únelos de modo que parezcan los aros olímpicos. 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 más nos interese. Ejer cicio paso a paso. 1 Hacemos clic en la Herramienta Texto y después en el escenario. 2 Veremos esta imagen Si deseamos crear texto Estático, basta con escribir dentro, de lo contrario, deberemos seguir los siguientes pasos: 3 Hacemos clic en el Pr opiedades, si es que teníamos minimizado este Panel. 4 Una vez podamos ver el Pane l seleccionamos la Pestaña 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 línea que rodea al recuadro de texto, pasando a ser discontínua y no desapareciendo aunque no escribamos nada dentro. (Los textos estáticos CUADERNO DE EJERCICIOS Y PRACTICA S FLASH 8 Página 11

desaparecen si no escribes nada y haces clic en cualquier lugar del escenario). Esto es lógico, ya que los textos Dinámicos y los de entrada no tienen porque tener "contenido" Panel Propiedades PRACTICA 7: Objetos. Rellenos y Bordes 1 Crea dos rectángulos 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 Selección (Flecha). 4 Selecciona 3 únicamente los bordes de 3 de ellos. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 12

PRACTICA 9: Alinear Objetos 1 Dibuja 4 objetos (círculos, rectángulos...). 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 ión (colócalos, por ejemplo, en el centro de la película). 3 Desagrúpalos. 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 película con más 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 ratón. 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 válido en ambos casos). 7 Hac emos clic con el botón derecho sobre el escenario de este fotograma de destino. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 posición en la que estaba al cor tarlo Ejercicio 9.Crear Símbolo. Objetivo. Crear un símbolo de gráfico que nos permitirá coger destreza en una acción que será básica en la creación 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 Símbolo... de la barra de menús. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 14

Se desplegará una ventana como la de la figura. 5 En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi Primer Símbolo". 6 Seleccionamos la opción Gráfico en el apartado Comportamiento. Con esto le decimos a Flash que el nuevo símbolo será un gráfico. 7 Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado. Ejercicio 10.Modificar una instancia de un símbolo. Objetivo. Comprender la diferencia entre un símbolo y una instancia de este símbolo. Ejercicio paso a paso. 1 Vamos al menú Ventana → Bibliotecas Comunes. 2 Seleccionamos la primera opción del s ubmenú que aparecerá (Botones). Aparecerá la librería 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 símbolos contenidos en la carpeta. 4 Arrastramos el primer símbolo (arcade button - blue) a nuestra área de trabajo. Aparecerá en el papel el símbolo que habíamos arrast rado. Esto es una instancia del símbolo llamado arcade button - blue. Comprobémoslo. 5 Seleccionamos nuestra nueva instancia. CUADERNO DE EJERCICIOS Y PRACTICAS FLA SH 8 Página 15

6 Seleccionamos la herramienta Transformación Libre instancia arrastrando los extr emos del objeto. y modificamos el tamaño de la 7 Bien, ahora hemos modificado la instancia. Comprobemos que el símbolo sigue inta cto. Repitamos lo que hicimos en el paso 5. Como vemos, el botón ha aparecido de nuevo, pero no con el tamaño que le acabamos de dar, sino con su tamaño original. Esto suc ede porque lo que hemos reducido de tamaño era tan sólo una instancia del símbolo, no el símbolo mismo, y esto es lo que se ha modificado. Por tanto podemos seguir inse rtando y modificando ese símbolo y cualquier otro en esta u otra película ya que est aremos insertando instancias. PRACTICA 11: Crear Símbolo 1 Crea una película con 1 fotograma. 2 Dibuja un círculo perfecto. 3 Conviértelo a símbo lo de tipo Clip. 4 Comprueba que está disponible en la Biblioteca. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 16

PRACTICA 12: Insertar Instancia 1 Crea una nueva película. 2 Inserta el Gráfico de un botón cualquiera de las Bibliote cas comunes de Flash 8. 3 Modifica su tamaño. 4 Vuelve a realizar el paso 2 y comp rueba que el botón se inserta en su tamaño original. PRACTICA 13: Duplicar Instancia 1 Sobre el ejercicio anterior, duplica la instancia del botón que has cambiado de tamaño. 2 Comprueba que se ha duplicado en la Biblioteca. PRACTICA 14: Efectos sobre Instancias 1 Teniendo el botón ampliado del ejercicio 2 en el escenario, inserta el duplicado que hemos creado de tal forma que se superpongan parcialmente. 2 Dale al botón 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 Página 17

Ejercicio 11.Carga y Modificación de Filtros Objetivo. Cargar filtros mediante ActionScript dándoles las propiedades que queram os. Al final conseguiremos una película como este ejemplo: Ejercicio paso a paso. 1. Abre el archivo pez.fla que encontrarás en la carpeta ej ercicios/pez del curso, observa que tanto los campos del formulario como el clip de película ya tienen un nombre de instancia asignado. 2. Abre el Panel Acciones desde Ventana → Acciones o pulsando la tecla F9. 3. Elimina la línea que dice //código para añadir el filtro y escribe lo siguiente en su lugar: import flash.filters.Dr opShadowFilter; Esto hará que el filtro se importe a la película y podamos utilizarl o. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 película donde podem os cambiar las propiedades de un filtro dinámicamente. Fácil ¿verdad?. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 19

PRACTICA 15: Selector de Filtros Deberás reproducir la siguiente película 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, deberás idear una forma para poder gestionarlos y mant ener los que estén activos cada vez que se pulse uno de los botones. No deberás repr oducir el aspecto de los filtros, puedes personalizarlos como más te guste. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 20

Ejercicio 12.Encadenar Interpolaciones Objetivo. Crear un movimiento multidireccional encadenando interpolaciones de mo vimiento. Ejercicio paso a paso. 1 Importamos un Clip de Película. 2 También podemos dibujarlo y convertir nuestro di bujo en un Clip de Película. 3 Situamos el Clip en el lado izquierdo del área de tra bajo. 4 Hacemos clic con el botón derecho sobre el único fotograma existente en este momento. 5 Seleccionamos la opción Crear Interpolación de Movimiento. 6 Vamos al fo tograma número 20 y pulsamos F6. 7 Observaremos que se crea la Animación de 20 fotog ramas de duración. En ese mismo fotograma (el 20) desplazamos el símbolo al extremo derecho del escenario. Ahora ya tenemos la interpolación base, en ella hemos marca do únicamente la posición inicial y final del movimiento. Si lo dejáramos así, el clip s eguiría una línea 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 interpolación y a creada. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 21

Comprobemos que la línea de tiempos está de la siguiente forma: 8 Hacemos clic con el botón derecho del ratón sobre el fotograma 5. Comprobemos que el clip de película 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 botón derecho del ratón 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 película. Como podemos c omprobar, el clip se desplaza ahora en línea recta pero en varias direcciones dist intas. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 22

Ejercicio 13. Animar Texto por Bloques Objetivo. Crear una animación sobre un texto separándolo en bloques de letras cuyo m ovimiento será tratado de manera independiente, dando al texto un efecto vistoso q ue pudiera servir como presentación de entrada a una web u otro tipo de película. 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 cómo conseguir esos efectos combinando las técnicas vistas hasta el momento . 1 Escribimos el texto en cuestión, 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 válida. 3 Seleccionamos el text o recién escrito. 4 Accedemos al menú Modificar → Separar. Con esto separamos cada let ra ya que de no hacerlo Flash trataría todo el texto como un bloque y no podríamos d ar el efecto a las letras. Vamos a separar el texto en los siguientes bloques: " a", "u", "la" y "Clic". Podríamos cambiar los bloques si quisieramos dar otro efec to en concreto. 5 Seleccionamos dichos bloques y los convertimos a símbolos, dándole s un nombre identificativo y el Comportamiento gráfico, ya que no los animaremos " internamente". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 23

6 Creamos 5 nuevas capas, una por cada bloque que hemos creado. Esto último es necesario ya que si no lo hiciéramos Flash aplicaría el movimiento a to do aquello que encontrara en dicha capa, ya que como hemos comentado anteriormen te, lo convertiría todo a símbolo automáticamente. 7 Nombramos cada una de las capas s egún el bloque de texto que vaya a contener, pero en orden inverso en el que vaya a producirse la animación, para que el objeto en movimiento se superponga a los qu e no lo están. Esto es, la capa de más arriba se llamará "Clic", la siguiente "la" y a sí sucesivamente. 8 Hacemos clic con el botón derecho sobre el único fotograma que tenemos en la línea d e tiempos y en el menú emergente seleccionamos Copiar Fotogramas. A continuación vam os pegando los fotogramas (botón derecho → Pegar Fotogramas) en todas las capas. CUA DERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 después del fotograma de cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa también F6. 12 Hacemos clic con el botón derecho en los foto gramas centrales que hay entre los fotogramas claves y seleccionamos cada vez Cr ear Interpolación de Movimiento. 13 Extendemos la imagen los últimos fotogramas de cada capa hasta que ocupen el fo tograma 30 (Botón derecho → Insertar Fotrograma Clave). 14 Exceptuando la capa "Clic " seleccionamos el primer fotograma de cada interpolación y aumentamos el tamaño del bloque que contiene. 15 Movemos ahora fuera del escenario el bloque "Clic". 16 Aún en esta capa, hacemos clic con el botón derecho sobre el fotograma 24 y seleccio namos Insertar Fotograma Clave. 17 En este fotograma recién creado reducimos el an cho del bloque de texto y lo colocamos junto a la última "a". Y ya tenemos la anim ación creada. Como vemos hemos utilizado todo tipo de técnicas de interpolación, aunqu e todavía puede complicarse más como veremos más adelante. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 25

PRACTICA 16: Crear un Clip a modo de cuenta 1 Crea una película con sólo 1 fotograma. 2 un 3. 3 Conviértelo a símbolo de tipo Clip. en la que se vea una cuenta atrás hasta el película original un frame y el clip cinco, lo como cuenta.fla

atras Escribe un número cualquiera, por ejemplo 4 Crea una animación fotograma a fotograma cero. 5 Comprueba que pese a tener la la animación se ve completamente. 6 Guárda

PRACTICA 17: Crear un clip vacío y editarlo después 1 Crea una nueva película. 2 Crea un nuevo símbolo de tipo Movie Clip vacío. 3 Sal a l a línea de tiempos principal. 4 Vuelve a editar el símbolo. PRACTICA 18: Exportar una película con protección 1 Partimos del Clip del ejercicio 1, ábrelo. 2 Exporta la película swf de forma que nadie la pueda importar después. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 26

Ejercicio 14.Crear un Botón con Relieve Objetivo. Crear un botón con efecto relieve de forma rectangular tipo formulario d e manera rápida y sencilla. Ejercicio paso a paso. 1 Dibujamos un rectángulo en el área de trabajo. 2 Seleccionamos el fondo. 3 Cambiam os el color de fondo del rectángulo. Por ejemplo a gris. 4 Con la herramienta text o escribimos el texto que queramos en el interior del rectángulo. 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 botón. 9 Activamos la opción de menú Insertar → Nuevo Símbolo... 10 Mar camos el comportamiento de botón y le damos un nombre. Pulsa Aceptar. 11 Hacemos d oble clic sobre el botón para editarlo. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 27

12 Mediante F6 creamos fotogramas clave en cada uno de los fotogramas correspond ientes a los estados del botón. 13 Seleccionamos el fotograma Presionado. 14 Modifiquemos ahora el borde inferio r y el derecho del botón aplicándole el color blanco. 15 Finalmente seleccionemos lo s bordes superior e izquierdo y démosle el color negro. Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como están puesto que no deseamos que hag a nada mientras no pulsemos el botón y el área de acción es la que comprende nuestro r ectángulo. 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 píldora como el de la derecha y escribe "STOP" sobre él 3 Conviértelo a símbolo de tipo Botón 4 Crea distintas apariencias para distintos estados CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 28

5 Guárdalo como stop.fla PRACTICA 20: Ajustar el Área Activa 1 Crea una nueva película 2 Escribe el texto: "VámOnoS" respetando las mayúsculas y mi núsculas como se muestran 3 Conviértelo a Botón 4 Haz que sólo funcione al pasar por la "O" central PRACTICA 21: Botón con Sonido 1 Partimos del Botón del ejercicio 1. Ábrelo 2 Haz que emita un sonido de la Bibliot eca Común de Sonidos al pasar el ratón por encima de él 3 Haz que emita otro sonido de la Biblioteca Común de Sonidos distinto al pulsarlo CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 29

PRACTICA 22: Detener una Película 1 Abre un nuevo documento. 2 En el primer fotograma inserta algún símbolo que se com porte como clip de película y que contenta una animación de más de 1 fotograma 3 Ahora inserta en el clip el botón del ejercicio 1 de manera que se vea a lo largo de to da su reproducción 4 Haz que se detenga el Clip al pulsar el Botón 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 sensación de que está reptando. 4 Guárdalo como "babosa.fla". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 30

PRACTICA 24: Cambio de Forma y Tamaño 1 Abre el archivo "babosa.fla" 2 Cambia el movimiento de forma para que a mitad del trayecto de la impresión de que se está acercando a nosotros. 3 Cambia el color de la babosa cuando está más cerca de nosotros. PRACTICA 25: Cambiar la Forma de un Texto 1 Escribe en distintas capas las letras de tu nombre. 2 Crea una animación de form a que pase de una letra a la siguiente. 3 Cambia los colores y el tamaño de cada l etra. PRACTICA 26: Consejos de Forma 1 Dibuja una Flecha. 2 Crea una animación de forma de manera que al final, la flec ha quede con el mismo aspecto pero apuntando en dirección 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 Página 31

Ejercicio 15.Exportar objeto como Bitmap. Objetivo. Exportar un objeto Flash 8 como un gráfico 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 pestaña 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 pestaña de Tipos de archivo. 6 Busc amos entre todos los tipos el formato JPG o JPEG. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 32

7 Pulsamos Guardar. Y ya está exportado. Para comprobarlo accede a la carpeta en la que lo guardaste y verás un archivo con el nombre que le diste y la extensión .jpg CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 33

Ejercicio 16.Acelerar Movimiento Objetivo. Comprender el efecto de aceleración sobre una interpolación de movimiento. Ejercicio paso a paso. Primero vamos a crear la interpolación sobre la que aplicaremos el efecto. Vamos a basarnos en un Clip de Película cualquiera. 1 Importa un Clip de Película ya creado o bien lo creas tú mismo (creas un dibujo y lo conviertes en Clip de Película). 2 L o situas en el escenario si no lo está ya. 3 Pulsa el botón derecho del ratón sobre el fotograma que contiene el clip de película 4 Selecciona Crear interpolación de Movi miento del menú emergente. 5 Selecciona el fotograma 20 y pulsa F6. 6 Desplaza el Clip de Película de ese fotograma a la parte derecha del área de trabajo. 7 Pulsa In tro para ver la animación sin salir del entorno de trabajo. Ahora tenemos esto: 8 Ahora selecciona el fotograma 1 con el botón derecho y selecciona Propiedades pa ra abrir el panel Propiedades del fotograma. (si no está ya abierto) 9 Intoduce un 100 en la casilla Aceleración (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 Página 34

10 Intoduce ahora un -100 en la casilla Aceleración (dentro), para hacer que aumen te progresivamente su velocidad. El resultado sería el siguiente: Ahora ya hemos comprobado los distintos efectos de aceleración. Comprueba el mismo ejercicio con otros valores de aceleración 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 Guárdalo c omo "rueda.fla". CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 35

PRACTICA 28: Efecto Aceleración 1 Abre el archivo "rueda.fla" 2 Haz que vaya frenando en su movimiento hasta par arse. PRACTICA 29: Orientar según el Trazo 1 Abre el archivo "babosa.fla" que creamos en el tema anterior. 2 Dibuja una guía con forma de montañas 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 montaña. 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 detrás suyo. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 36

Ejercicio 17.Publicar SWF Objetivo. Aprender a publicar una película Flash como archivo SWF independiente, a sí como configurar las opciones de publicación. 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 cuestión. 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 botón derecho, y elegimos la opción Propiedades. 4 Vamos al menú Archivo → Configuración de publicación p ara abrir la ventana Configuración de Publicación. 5 Abre la pestaña Formatos y desact iva la casilla HTML, porque no vamos a utilizar la película vía web. 6 Abre la pestaña Flash. 7 En la primera opción, 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 mínimo. Vamos a protegerlo para que nadie lo pueda importar. 9 Marcamos la casilla de verific ación Proteger frente a Importación e introducimos en el campo Contraseña la palabra d e paso que deseemos. 10 Pulsamos el botón Publicar. 11 Accede al directorio de Fla sh donde se ha exportado el archivo SWF y ejecútalo. Comprueba que la calidad de l as imágenes no es buena. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 película que no podrán importar y cuyo espacio en memoria será menor debido al menor tamaño de sus bitmaps. PRACTICA 31: Codigo para incrustar Flash en HTML Cuando exportamos una película Flash para publicarla en una página web, Flash introd uce entre las líneas HTML un código de etiquetas (como el HTML) que muestra al naveg ador qué película tienen que reproducir y cómo. Intenta deducir e identificar del sigu iente código, resultante de la exportación de una película, aquellos elementos que pod amos haber indicado nosotros en las propiedades de exportación, y que están estrecha mente relacionados con la visualización que tendrá de ella la gente en el navegador. //www.macromedia.com/g o/getflashplayer"> INSTRUCCION EMBED SRC QUALITY BGCOLOR WIDTH ALIGN TYPE PLUGINSPACE DESCRIPCION CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 38

PRACTICA 32: Importar Sonidos 1 Crea una película con 1 fotograma. 2 Localiza un sonido en tu disco duro. 3 Impórt alo a tu película. 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 combinación de teclas te permite "probar" la película). PRACTICA 34: Trabajar con Sonidos 1 Consigue que el sonido del ejercicio 2 deje de escucharse al llegar la película 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 Página 39

Ejercicio 18. Importando Vídeo con Puntos de Referencia Objetivo. Importar una película creando los puntos de referencia que hemos utiliza do en el ejemplo de la teoría. Ejercicio paso a paso. 1. Haz clic en Archivo → Impor tar → Importar vídeo. 2. En la pantalla que aparecerá pulsa el botón Examinar y busca el archivo tux.avi dentro de la carpeta ejercicios/puntosreferencia del curso. 3. Selecciónalo y pulsa Abrir. 4. Haz clic en el botón Siguiente. 5. En la nueva pantal la, asegúrate de que la opción Descarga progresiva desde un servidor web está marcada y pulsa Siguiente. 6. Ahora pulsa el botón Mostrar configuración avanzada y haz clic sobre la pestaña Puntos de referencia. 7. Añadiremos un punto de referencia al prin cipio del vídeo. Haz clic en el botón 8. Dale el nombre de inicio y selecciona Naveg ación 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 Página 40

ajustar el tiempo. de nuevo para crear otro punto de referencia, le daremos el 1 0. Pulsa el botón nombre de carrera1 y seleccionaremos Navegación. 11. Desplaza el c abezal al segundo 07.360. 12. Crea un punto de referencia pulsando el botón carrer a1inicio y selecciona Evento en Tipo. y dale el nombre de 13. Ahora añadiremos un parámetro, haz clic en el botón (Parámetros). 14. Dale el nombre de fotograma y el valor ready. de la lista de la derecha 15. Desplázate hasta el segundo 42.280 y crea otro punto de referencia llamado car rera1fin de Tipo Evento. 16. Dale un parámetro pulsando el botón fotograma y el valo r win. en la lista de la derecha, dale el nombre 17. Desplázate hasta el segundo 58.159 e inserta otro punto de referencia. Llámalo c arrera2 y dale Tipo Navegación. 18. Cambia el cabezal a la posición 58.160 y crea un punto de referencia llamado carrera2inicio de Tipo Evento. 19. Dale un parámetro llamado fotograma y con valor ready. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 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 parámetro para este punto de referencia (pulsando el botón fotograma y dale el valor lose. ), llámalo 23. Ya hemos terminado, haz clic en el botón Siguiente hasta que llegue al final y empiece la importación. Hemos importado un vídeo preparado para navegar por él y que nos pasará parámetros en determinados puntos. Fácil ¿verdad?. PRACTICA 36: Mi Video Deberás reproducir la siguiente película 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 encontrarás en la misma carpeta y crear 6 puntos de navegación, en los segundos 0, 10, 20, 30, 40 y 50. Luego deberás añadirle funcionali dad a los botones mediante ActionScript. Ejercicio 19.Crear una Película con Niveles Objetivo. Crearemos una película parecida a esta: Ejercicio paso a paso. Para cada uno de los elementos que mostraremos en la película principal seguiremos los sigu ientes pasos: 1. Haz clic en el botón Nuevo Símbolo al pie de la Biblioteca. 2. Dale un nombre y selecciona Clip de película. 3. Dibuja la forma que quieras mo strar en el escenario. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 42

4. Con ayuda de la herramienta Selección al punto de referencia (mira el ejemplo). sitúa la forma centrada con respecto 5. Haz clic en Escena 1 en la línea de tiempo para volver a la película principal. 6 . Arrastra el símbolo que acabamos de crear y añádelo al Escenario. 7. Dale un nombre de instancia significativo al cual nos referiremos más tarde. 8. Añade la siguiente línea en el Panel Acciones para el fotograma 1 de la película principal: this._visib le = false; De esta forma la película será invisible nada más abrirla. La haremos visi ble más tarde a través del código. 9. Selecciona el símbolo y en el Panel Acciones escri be: on (press) { startDrag(this); } on (release) { stopDrag(); } Esto hará que pue das arrastrarlo con el ratón. 10. Publica la película desde Archivo → Publicar, guarda el documento y ciérralo. 11. Repite estos pasos para cada una de las formas que q uieras añadir. Ahora pasaremos a crear la película principal. 1. Abre un documento en blanco. 2. Dibuja un rectángulo y dale las dimensiones del documento utilizando el botón 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 añadiremos 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 Página 43

4. Seleccionar el .fla que quieras abrir y arrastra el símbolo al Escenario. 5. Re dimensiónalo con la herramienta Transformación Libre 6. Selecciona Botón en el despleg able del Panel Propiedades: . 7. Arrastra otro símbolo y colócalo al pie del Escenario (este será el que hará que rote el elemento). 8. Redimensiónalo, y selecciona también Botón. 9. Repite estos pasos pa ra cada una de las formas que hayas creado. 10. Una vez ya estén todos los botones en el Escenario pasaremos a escribir el código asociado. 11. Crea una nueva capa pulsando el botón Insertar Capa . 12. En el fotograma 1 de la nueva capa añade el siguiente código: 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 código es el que hemos utilizado nosotros, hemos carga do cada película en un nivel diferente. Simplemente escribe la ruta del archivo SW F y el número de nivel (que deberás recordar) donde quieras cargarla. 13. Luego sele cciona el botón 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 Págin a 44

} Deberás 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 revés. 14. También podemos acceder a las propiedades de los símbolos del SWF. Verás cómo. Selecciona el botón 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 cuestión sólo 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 película desde Control → Probar película. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 45

PRACTICA 37: Navegacion ActionScript – Periodico Digital Deberás reproducir la siguiente película Flash: Para ello deberás crear un movieclip que reproduzca el movimiento de la página, esta película tiene que llamarse hoja_movimiento y deberá estar incluida directamente so bre la película principal (_root.hoja_movimiento), pues los botones incluidos en l as hojas SWF que cargarás apuntan a ese clip de película para avanzar o retroceder. Además, deberás marcar con etiquetas de fotogramas ambos movimientos (el de avance y retroceso) como siguiente y anterior. Podrás encontrar las hojas a cargar en la c arpeta /ejercicios/periodico del curso. El resto queda a tu disposición, utiliza t odos los recursos que necesites. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 46

PRACTICA 38: ActionScript - Formulario Deberás reproducir el siguiente formulario Flash: Tambíen deberás establecer el orden de tabulación de los objetos y el botón por defecto. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 47

Además, deberás darle funcionalidad al botón Reset y Enviar. El primero limipando los datos del formulario y el segundo recogiendolos validándolos y enviandolos a un ar chivo php. El validador del email deberá comprobar que la dirección esta correctamen te escrita (para ello utiliza función indexOf y lastIndexOf). Ejercicio 20.Rotación Objetivo. Reproduciremos la película que vimos en la teoría 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 encontrarás 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 código: 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 Página 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, podrás previsualizar la película pulsando Ctrl+Enter. Como pued es observar el código es idéntico al anterior pero cambiando las sentencias de salto de fotograma por cambios de rotación en el clip. Ejercicio 21.Carga de Objetos Objetivo. Reproduciremos la película de ejemplo que vimos en la teoría: Ejercicio pa so a paso. 1. Abre el archivo attach.fla que encontrarás en la carpeta ejercicios/ attach del curso. 2. Selecciona el clip estrella en la Biblioteca y haz clic der echo sobre él. 3. Selecciona Vinculación. 4. Se abrirá una ventana donde deberás hacer c lic en la opción 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 código en el Panel Acciones (tecla F9): _global.numEstrellas = 0; _global.ultimaX = 0; CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 49

 _global.ultimaY = 0; Utilizaremos estas variables para saber en cada momento cua ntas estrellas hay en el Escenario y la posición de la última de ellas. 7. Seleccion a el botón añadir y escribe el siguiente fragmenteo de código 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 añadir más estrellas (entonces se cumple la condición) aumentamos en 1 el co ntador de estrellas. Añadimos un nuevo clip de película y le damos un nombre de inst ancia compuesto por el nombre estrella seguido por las coordenadas de posición par a poder eliminarlo más 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 botón quitar y escribe el siguiente fragmento de código 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 Página 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 posición inmediatamente anterior y eliminamos la estrella qu e se encuentra en esa posición llamándola por el nombre que hemos creado para tal fi n. Ya hemos creado una película que añade un número concreto de elementos automatizada mente. Fácil ¿verdad?. Ejercicio 22.Arrastre y Orientación de Objetos Objetivo. Reproduciremos la película que vimos en la teoría: Ejercicio paso a paso. 1. Abre el archivo trigonometria.fla que encontrarás en la carpeta ejercicios/trig onometria del curso. 2. Añadiremos primero el código para hacer que la pelota se pue da arrastrar y colocar con el ratón. Selecciona la pelota y abre el Panel Acciones (tecla F9), escribe el siguiente fragmento de código: 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 código 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 Página 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 (pasánd 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.Colisión y Movimiento Objetivo. Reproduciremos la película que vimos en la teoría: Ejercicio paso a paso. 1. Abre el archivo colision.fla que encontrarás 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 Página 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 más sencillo. Para cada uno de los mov imiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce colisión con el objeto miClip y el clip fondo. Pero no bastará con hacerlo sólo de un a esquina, veamos un ejemplo para verlos con más 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 ntásemos realizar un movimiento hacia abajo, ¡éste se realizaría! Y en definitiva es lo que queremos evitar. Observa también que para realizar el hitTest hemos tenido en cuenta la posición que adoptará el objeto después del movimiento (sumándole la velocidad , o lo que CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 53

es lo mismo, el número de píxeles que se desplaza el objeto a cada pulsación). CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 54

PRACTICA 39: Juegos – Proyectiles NOTA: Te recomendamos ver el Videotutorial 41 Deberás 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 código necesario para que el juego funci one. Deberás seguir las siguientes instrucciones: CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 55

• • • • • • • • Crear un cursor personalizado. Generar el arma importándola a través de código desde l a Biblioteca. Generar, también con ActionScript, los bloques que la rodearán. Hacer que el arma siga al ratón. 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 estadísticas del juego incluyendo el nivel en el qu e nos encontramos y el número de proyectiles destruidos. Crear proyectiles aleator iamente. Deberás controlar si chocan contra un bloque, un rayo o el arma. Si salen de la pantalla deberás eliminarlos! CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 56

Ejercicio 24.Movimiento en Espiral Objetivo. Reproduciremos la película que puedes ver a continuación: Ejercicio paso a paso. 1. Abre el archivo espiral.fla que encontrarás 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 Página 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 más real. En cuant o a la escala puedes ver que va en relación al recorrido. El movimiento de la bola lo hemos sacado de la fórmula de la espiral de Arquímedes. Podrás encontrar información sobre ella en la red. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 58

PRACTICA 40: Animaciones avanzadas - Nieve Deberás reproducir la siguiente animación Flash: Utiliza un documento en blanco. No podrás crear ningún elemento. Lo deberás hacer todo mediante ActionScript. Tendrás cumplir los siguientes requisitos: • • • • • • Dibujar un fon o. Dibujar una estrella. Que la estrella tenga un brillo dinámico. 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 Página 59