Cuaderno de Ejercicios Flash

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 Pelcula ..................................................................... 5 Ejercicio 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.Crear un valo ...................................................................................................... 8 Ejercicio 5.Dando Color a un valo ........................................................................................ 9 Ejercicio 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: Selecciones ...................................................................................................... 12 PRACTICA 9: Alinear Objetos ................................................................................................ 13 PRACTICA 10: Grupos ........................................................................................................... 13 Ejercicio 8.Cambiar un objeto de Capa ................................................................................ 13 Ejercicio 9.Crear Smbolo. .................................................................................................... 14 Ejercicio 10.Modificar una instancia de un smbolo............................................................. 15 PRACTICA 11: Crear Smbolo ............................................................................................... 16 PRACTICA 12: Insertar Instancia ........................................................................................... 17 PRACTICA 13: Duplicar Instancia .......................................................................................... 17 PRACTICA 14: Efectos sobre Instancias ................................................................................ 17 Ejercicio 11.Carga y Modificacin de Filtros......................................................................... 18 PRACTICA 15: Selector de Filtros .......................................................................................... 20 Ejercicio 12.Encadenar Interpolaciones ............................................................................... 21 Ejercicio 13. Animar Texto por Bloques ............................................................................... 23 PRACTICA 16: Crear un Clip a modo de cuenta atras ........................................................... 26 PRACTICA 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 Pelcula ..................................................................................... 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 animaciones - Rotacion ............................................................ 35 PRACTICA 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 Sonidos ........................................................................................... 39 PRACTICA 33: Insertar Sonidos ............................................................................................. 39 PRACTICA 34: Trabajar con Sonidos ..................................................................................... 39 PRACTICA 35: Editar Sonidos ................................................................................................ 39 Ejercicio 18. Importando Vdeo con Puntos de Referencia .................................................. 40 PRACTICA 36: Mi Video......................................................................................................... 42 Ejercicio 19.Crear una Pelcula con Niveles .......................................................................... 42 PRACTICA 37: Navegacion ActionScript Periodico Digital ................................................. 46 PRACTICA 38: ActionScript - Formulario .............................................................................. 47 Ejercicio 20.Rotacin ............................................................................................................ 48 Ejercicio 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 avanzadas - Nieve .................................................................... 59
Pgina 3
Ejercicio 1. Crear Gua de Dibujo. Cuadrculas

Objetivo. Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no saldr en la pelcula) y que nos servir como gua para poder dibujar objetos de forma exacta y precisa. Ejercicio paso a paso. 1 Pulsa en el men Archivo. 2 Selecciona la opcin Nuevo. 3 Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una pelcula ya empezada, sltate los 2 primeros pasos. 4 Selecciona la opcin Cuadrcula del men Ver. 5 Se desplegar un submen como el de la figura. 6 Selecciona la opcin Mostrar Cuadrcula para hacerlo visible.
7 Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula a tu gusto (tamao, color de fondo...) 8 Selecciona la opcin Ajustes Ajustar a Cuadrcula del men Ver para que los objetos que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlos de un modo fcil.
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 Propiedades del Documento. 3 En Unidades de Reglas selecciona Centimetros. 4 A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22.46 y en Altura 16.84. 5 Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen a las standard 640 x 480 px.
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 sobre 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 seleccionar 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 trazo)
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 Fotogramas 1 Dada la siguiente pelcula
Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuerdas para qu sirve cada uno?
Pgina 7
PRACTICA 4: Paneles
1 Abre el Panel Mezclador de Color. 2 Abre el Panel Acciones. 3 Abre el Panel Alinear. 4 Cierra el Programa Flash 8 5 Vuelve a abrirlo. Qu notas?
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 Herramientas.
2 Situa el cursor del ratn en el Escenario (dentro del fotograma actual). 3 Haz clic y arrastra el ratn hacia el lugar que desees. Observars que el movimiento de tu ratn provoca la creacin de un valo (figura 1). Cuando el valo tenga la forma deseada, suelta el ratn. El resultado ser similar al de la figura 2.
Truco: Si quieres crear un crculo perfecto, mantn pulsada la tecla SHIFT mientras das forma al valo. (Sucede igual con la Herramienta Rectngulo)
Pgina 8
Ejercicio 5.Dando Color a un valo

Objetivo. Dar color a un valo. Tanto a su interior como a su exterior Ejercicio paso 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 color queramos modificar. Obtendremos algo similar a la figura 1 o a la 2. 3 Una vez 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 haciendo clic sobre el Panel de Colores existente junto a la imagen del "Bote de Pintura". Si deseamos modificar el borde, sobre el Panel existente junto al "Lpiz".
Pgina 9
Ejercicio 6.Creando un color transparente

Objetivo. Crear un objeto cuyo color sea transparente, de modo que se vean los objetos que haya detrs Ejercicio paso a paso. 1 Creamos un rectngulo con la Herramienta Rectngulo. 2 El Color de relleno del rectngulo creado ser el que est en ese momento 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. Por
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
Pgina 10
PRACTICA 5: Bandera Olmpica

1 Dibuja 5 aros. 2 Cmbiales los colores. Por ejemplo, los colores de la bandera olmpica (Azul, negro, rojo, amarillo y verde) 3 nelos de modo que parezcan los aros olmpicos.
PRACTICA 6: Saturno
1 Dibuja un valo 2 Convierte su color de relleno un degradado de verde oscuro a verde claro (por ejemplo). 3 Crea el aro que le rodea. 4 ne los 2 objetos para que parezca el planeta Saturno
Ejercicio 7.Cambiar el Tipo de Texto

Objetivo. Crear un texto cualquiera y asignarle el Tipo que ms nos interese. Ejercicio 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 Propiedades, si es que tenamos minimizado este Panel. 4 Una vez podamos ver el Panel seleccionamos la Pestaa en la que pondr el tipo de texto y elegimos el tipo de texto que queramos. Veremos que, al hacer clic fuera del texto, cambia la lnea que rodea al recuadro de texto, pasando a ser discontnua y no desapareciendo aunque no escribamos nada dentro. (Los textos estticos CUADERNO DE EJERCICIOS Y PRACTICAS 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 de 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.
Pgina 12
PRACTICA 9: Alinear Objetos

1 Dibuja 4 objetos (crculos, rectngulos...). 2 Coloca uno en cada esquina usando el Panel Alinear.
PRACTICA 10: Grupos

1 Agrupa los 4 objetos del ejercicio anterior en un nico grupo. 2 Cambia su posicin (colcalos, por ejemplo, en el centro de la pelcula). 3 Desagrpalos.
Ejercicio 8.Cambiar un objeto de Capa

Objetivo. Mover un objeto situado en una capa a otra Ejercicio paso a paso. 1 Partimos de una pelcula con ms de una Capa. 2 Seleccionamos la Capa donde est el objeto que queramos cambiar de capa. 3 Hacemos doble clic en el objeto a mover, para seleccionarlo en su totalidad (relleno y borde). 4 Pulsamos el boton derecho del ratn. Se abrir un men como el de la imagen. 5 Seleccionamos Cortar. El objeto desaparecer. 6 Seleccionamos el fotograma en el que queramos colocar el objeto (situado en una capa distinta a la actual, aunque esto es vlido en ambos casos). 7 Hacemos clic con el botn derecho sobre el escenario de este fotograma de destino.
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 cortarlo
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 Dibujamos un valo en cualquier lugar del escritorio. 3 Seleccionamos la figura creada. 4 Abrimos el men Insertar Nuevo Smbolo... de la barra de mens.
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 submen que aparecer (Botones). Aparecer la librera de botones predefinidos de Flash 8. 3 Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera carpeta que aparece en la lista (Arcade buttons). Se abrir una lista con todos los smbolos contenidos en la carpeta. 4 Arrastramos el primer smbolo (arcade button - blue) a nuestra rea de trabajo. Aparecer en el papel el smbolo que habamos arrastrado. Esto es una instancia del smbolo llamado arcade button - blue. Comprobmoslo. 5 Seleccionamos nuestra nueva instancia. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 15
6 Seleccionamos la herramienta Transformacin Libre instancia arrastrando los extremos del objeto.
y modificamos el tamao de la
7 Bien, ahora hemos modificado la instancia. Comprobemos que el smbolo sigue intacto.
Repitamos lo que hicimos en el paso 5. Como vemos, el botn ha aparecido de nuevo, pero no con el tamao que le acabamos de dar, sino con su tamao original. Esto sucede porque lo que hemos reducido de tamao era tan slo una instancia del smbolo, no el smbolo mismo, y esto es lo que se ha modificado. Por tanto podemos seguir insertando y modificando ese smbolo y cualquier otro en esta u otra pelcula ya que estaremos insertando instancias.
PRACTICA 11: Crear Smbolo

1 Crea una pelcula con 1 fotograma. 2 Dibuja un crculo perfecto. 3 Convirtelo a smbolo de tipo Clip. 4 Comprueba que est disponible en la Biblioteca.
Pgina 16
PRACTICA 12: Insertar Instancia

1 Crea una nueva pelcula. 2 Inserta el Grfico de un botn cualquiera de las Bibliotecas comunes de Flash 8. 3 Modifica su tamao. 4 Vuelve a realizar el paso 2 y comprueba que el botn se inserta en su tamao original.
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 que est tapando al otro un efecto Alfa del 40%. 3 Comprueba que ahora podemos ver los dos claramente.
Pgina 17
Ejercicio 11.Carga y Modificacin de Filtros

Objetivo. Cargar filtros mediante ActionScript dndoles las propiedades que queramos. Al final conseguiremos una pelcula como este ejemplo:
Ejercicio paso a paso. 1. Abre el archivo pez.fla que encontrars en la carpeta ejercicios/pez del curso, observa que tanto los campos del formulario como el clip de pelcula ya tienen un nombre de instancia asignado. 2. Abre el Panel Acciones desde Ventana Acciones o pulsando la tecla F9. 3. Elimina la lnea que dice //cdigo para aadir el filtro y escribe lo siguiente en su lugar: import flash.filters.DropShadowFilter; Esto har que el filtro se importe a la pelcula y podamos utilizarlo.
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 = angle_stp.value; sombra.color = 0x000000; sombra.alpha = alpha_stp.value; sombra.blurX = blur_stp.value; sombra.blurY = blur_stp.value; sombra.strength = strength_stp.value; sombra.quality = quality_cmb.selectedItem.data; sombra.inner = inner_chk.value; sombra.knockout = knockout_chk.value; sombra.hideObject = hideObject_chk.value; 6. Finalmente asociamos el filtro sombra que hemos creado a la propiedad filters del clip: pez.filters = [sombra]; Hemos creado una pelcula donde podemos cambiar las propiedades de un filtro dinmicamente. Fcil verdad?.
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/filtros del curso. Como ya hemos visto, averiguar los filtros que afectan a un clip es realmente complicado, debers idear una forma para poder gestionarlos y mantener los que estn activos cada vez que se pulse uno de los botones. No debers reproducir el aspecto de los filtros, puedes personalizarlos como ms te guste.
Pgina 20
Ejercicio 12.Encadenar Interpolaciones

Objetivo. Crear un movimiento multidireccional encadenando interpolaciones de movimiento. Ejercicio paso a paso.
1 Importamos un Clip de Pelcula. 2 Tambin podemos dibujarlo y convertir nuestro dibujo en un Clip de Pelcula. 3 Situamos el Clip en el lado izquierdo del rea de trabajo. 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 fotograma nmero 20 y pulsamos F6. 7 Observaremos que se crea la Animacin de 20 fotogramas 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 marcado nicamente la posicin inicial y final del movimiento. Si lo dejramos as, el clip seguira una lnea recta. Vamos a hacer que llegue a su origen haciendo zig-zag con un par de acciones muy sencillas, aprovechando el hecho de tener la interpolacin ya creada.
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 Desplacemos 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 estos dos ltimos pasos para los fotogramas 15 y 20 y prueba la pelcula. Como podemos comprobar, el clip se desplaza ahora en lnea recta pero en varias direcciones distintas.
Pgina 22
Ejercicio 13. Animar Texto por Bloques
Objetivo. Crear una animacin sobre un texto separndolo en bloques de letras cuyo movimiento ser tratado de manera independiente, dando al texto un efecto vistoso que pudiera servir como presentacin de entrada a 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 Panel Propiedades (tras seleccionar el texto) y seleccionamos el tipo de letra. Nosotros hemos elegido "Ruach Let", pero cualquiera es vlida. 3 Seleccionamos el texto recin escrito. 4 Accedemos al men Modificar Separar. Con esto separamos cada letra ya que de no hacerlo Flash tratara todo el texto como un bloque y no podramos dar el efecto a las letras. Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic". Podramos cambiar los bloques si quisieramos dar otro efecto en concreto. 5 Seleccionamos dichos bloques y los convertimos a smbolos, dndoles un nombre identificativo y el Comportamiento grfico, ya que no los animaremos "internamente".
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 todo aquello que encontrara en dicha capa, ya que como hemos comentado anteriormente, lo convertira todo a smbolo automticamente. 7 Nombramos cada una de las capas segn el bloque de texto que vaya a contener, pero en orden inverso en el que vaya a producirse la animacin, para que el objeto en movimiento se superponga a los que no lo estn. Esto es, la capa de ms arriba se llamar "Clic", la siguiente "la" y as sucesivamente.
8 Hacemos clic con el botn derecho sobre el nico fotograma que tenemos en la lnea de tiempos y en el men emergente seleccionamos Copiar Fotogramas. A continuacin vamos pegando los fotogramas (botn derecho Pegar Fotogramas) en todas las capas. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 24
9 Seleccionamos cada capa y vamos borrando las partes del texto que no corresponden con la parte del texto que debe contener. Es recomendable bloquear el resto de capas cuando se haga esto para asegurarnos de que borramos las letras de esa capa (hay que tener en cuenta que al principio todas las capas contienen lo mismo y superpuesto). 10 Situamos (arrastrando) el fotograma de cada capa a los siguientes frames: "A" : Fotograma 1. "U" : Fotograma 6. "LA" : Fotograma 12. "Clic" : Fotograma 18. 11 Seleccionamos el fotograma que ocupa cinco posiciones despus del fotograma de cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y pulsa tambin F6. 12 Hacemos clic con el botn derecho en los fotogramas centrales que hay entre los fotogramas claves y seleccionamos cada vez Crear Interpolacin de Movimiento.
13 Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el fotograma 30 (Botn derecho Insertar Fotrograma Clave). 14 Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada interpolacin y aumentamos el tamao del bloque que contiene. 15 Movemos ahora fuera del escenario el bloque "Clic". 16 An en esta capa, hacemos clic con el botn derecho sobre el fotograma 24 y seleccionamos Insertar Fotograma Clave. 17 En este fotograma recin creado reducimos el ancho del bloque de texto y lo colocamos junto a la ltima "a". Y ya tenemos la animacin creada. Como vemos hemos utilizado todo tipo de tcnicas de interpolacin, aunque todava puede complicarse ms como veremos ms adelante.
Pgina 25
PRACTICA 16: Crear un Clip a modo de cuenta atras

1 Crea una pelcula con slo 1 fotograma. 2 Escribe un nmero cualquiera, por ejemplo un 3. 3 Convirtelo a smbolo de tipo Clip. 4 Crea una animacin fotograma a fotograma en la que se vea una cuenta atrs hasta el cero. 5 Comprueba que pese a tener la pelcula original un frame y el clip cinco, la animacin se ve completamente. 6 Gurdalo como cuenta.fla
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 la 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.
Pgina 26
Ejercicio 14.Crear un Botn con Relieve

Objetivo. Crear un botn con efecto relieve de forma rectangular tipo formulario de manera rpida y sencilla. Ejercicio paso a paso.
1 Dibujamos un rectngulo en el rea de trabajo. 2 Seleccionamos el fondo. 3 Cambiamos el color de fondo del rectngulo. Por ejemplo a gris. 4 Con la herramienta texto escribimos el texto que queramos en el interior del rectngulo.
Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve. 5Seleccionamos los bordes izquierda y superior. 6Modificamos el color de dichos bordes. 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 Marcamos el comportamiento de botn y le damos un nombre. Pulsa Aceptar. 11 Hacemos doble 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 correspondientes a los estados del botn.
13 Seleccionamos el fotograma Presionado. 14 Modifiquemos ahora el borde inferior y el derecho del botn aplicndole el color blanco. 15 Finalmente seleccionemos los bordes superior e izquierdo y dmosle el color negro. Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como estn puesto que no deseamos que haga nada mientras no pulsemos el botn y el rea de accin es la que comprende nuestro rectngulo. El resultado obtenido es el siguiente. Podemos pinchar sobre l y comprobar 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
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 minsculas 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 Biblioteca Comn de Sonidos al pasar el ratn por encima de l 3 Haz que emita otro sonido de la Biblioteca Comn de Sonidos distinto al pulsarlo
Pgina 29
PRACTICA 22: Detener una Pelcula

1 Abre un nuevo documento. 2 En el primer fotograma inserta algn smbolo que se comporte como clip de pelcula y que contenta una animacin de ms de 1 fotograma 3 Ahora inserta en el clip el botn del ejercicio 1 de manera que se vea a lo largo de toda su reproduccin 4 Haz que se detenga el Clip al pulsar el Botn
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 escenario, dando la sensacin de que est reptando. 4 Gurdalo como "babosa.fla".
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 forma que pase de una letra a la siguiente. 3 Cambia los colores y el tamao de cada letra.
PRACTICA 26: Consejos de Forma

1 Dibuja una Flecha. 2 Crea una animacin de forma de manera que al final, la flecha quede con el mismo aspecto pero apuntando en direccin contraria. 3 Hazlo de manera que parezca que se apoya en la punta y se abate como la bisagra de una puerta. Tiene que quedarte algo asi:
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 Imagen... Ahora estaremos delante de una ventana similar a la que se muestra a la derecha. 3 Buscamos en la pestaa Guardar en la carpeta en la que quieras guardar el archivo. 4 En el apartado Nombre de Archivo introducimos el nombre que queramos que tenga nuestra nueva imagen. 5 Abrimos la pestaa de Tipos de archivo. 6 Buscamos entre todos los tipos el formato JPG o JPEG.
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
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 Lo 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 Movimiento del men emergente. 5 Selecciona el fotograma 20 y pulsa F6. 6 Desplaza el Clip de Pelcula de ese fotograma a la parte derecha del rea de trabajo. 7 Pulsa Intro para ver la animacin sin salir del entorno de trabajo. Ahora tenemos esto:
8 Ahora selecciona el fotograma 1 con el botn derecho y selecciona Propiedades para abrir el panel Propiedades del fotograma. (si no est ya abierto) 9 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:
Pgina 34
10 Intoduce ahora un -100 en la casilla Aceleracin (dentro), para hacer que aumente 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 al otro del escenario. 3 Haz que ruede mientras hace el deplazamiento. 4 Gurdalo como "rueda.fla".
Pgina 35
PRACTICA 28: Efecto Aceleracin

1 Abre el archivo "rueda.fla" 2 Haz que vaya frenando en su movimiento hasta pararse.
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 parecer 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 nombre vaya desapareciendo y que ANTES de que lo haga aparezca poco a poco el apellido por detrs suyo.
Pgina 36
Ejercicio 17.Publicar SWF

Objetivo. Aprender a publicar una pelcula Flash como archivo SWF independiente, as 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 biblioteca del documento mediante Ventana Biblioteca. Reduciremos la calidad de los mapas 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 para abrir la ventana Configuracin de Publicacin. 5 Abre la pestaa Formatos y desactiva 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 deslizante 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 verificacin Proteger frente a Importacin e introducimos en el campo Contrasea la palabra de paso que deseemos. 10 Pulsamos el botn Publicar. 11 Accede al directorio de Flash donde se ha exportado el archivo SWF y ejectalo. Comprueba que la calidad de las imgenes no es buena.
Pgina 37
12 Abrimos ahora el men Archivo Importary seleccionamos el archivo que acabamos de publicar. Comprueba que nos pide la clave para poder hacerlo. Ahora tenemos una pelcula que no podrn importar y cuyo espacio en memoria ser menor debido al menor tamao de sus bitmaps.
PRACTICA 31: Codigo para incrustar Flash en HTML

Cuando exportamos una pelcula Flash para publicarla en una pgina web, Flash introduce entre las lneas HTML un cdigo de etiquetas (como el HTML) que muestra al navegador qu pelcula tienen que reproducir y cmo. Intenta deducir e identificar del siguiente cdigo, resultante de la exportacin de una pelcula, aquellos elementos que podamos haber indicado nosotros en las propiedades de exportacin, y que estn estrechamente relacionados con la visualizacin que tendr de ella la gente en el navegador. <EMBED SRC="aulaClic.swf" quality=high bgcolor=#FFFFFF WIDTH="640" HEIGHT="480" NAME="aulaClic" ALIGN="" TYPE="application/x-shockwaveflash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </EMBED>
INSTRUCCION EMBED SRC QUALITY BGCOLOR WIDTH ALIGN TYPE PLUGINSPACE </EMBED>
DESCRIPCION
Pgina 38
PRACTICA 32: Importar Sonidos

1 Crea una pelcula con 1 fotograma. 2 Localiza un sonido en tu disco duro. 3 Imprtalo a tu pelcula. 4 Comprueba que est disponible en la Biblioteca.
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 CTRL+ 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 poco a poco vaya aumentando de volumen. 2 Modifica tu sonido de modo que al final del mismo, parezca que el sonido pasa de un altavoz al otro.
Pgina 39
Ejercicio 18. Importando Vdeo con Puntos de Referencia

Objetivo. Importar una pelcula creando los puntos de referencia que hemos utilizado en el ejemplo de la teora. Ejercicio paso a paso. 1. Haz clic en Archivo Importar 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 pantalla, 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 principio del vdeo. Haz clic en el botn 8. Dale el nombre de inicio y selecciona Navegacin 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
Pgina 40
ajustar el tiempo. de nuevo para crear otro punto de referencia, le daremos el 10. Pulsa el botn nombre de carrera1 y seleccionaremos Navegacin. 11. Desplaza el cabezal al segundo 07.360. 12. Crea un punto de referencia pulsando el botn carrera1inicio 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 carrera1fin de Tipo Evento. 16. Dale un parmetro pulsando el botn fotograma y el valor win. en la lista de la derecha, dale el nombre
17. Desplzate hasta el segundo 58.159 e inserta otro punto de referencia. Llmalo carrera2 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.
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 importar el video video.mov que encontrars en la misma carpeta y crear 6 puntos de navegacin, en los segundos 0, 10, 20, 30, 40 y 50. Luego debers aadirle funcionalidad 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 siguientes 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 mostrar 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._visible = false; De esta forma la pelcula ser invisible nada ms abrirla. La haremos visible ms tarde a travs del cdigo. 9. Selecciona el smbolo y en el Panel Acciones escribe: on (press) { startDrag(this); } on (release) { stopDrag(); } Esto har que puedas 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 quieras aadir.
Ahora pasaremos a crear la pelcula principal. 1. Abre un documento en blanco. 2. Dibuja un rectngulo y dale las dimensiones del documento utilizando el botn del Panel Alinear. Puedes hacer que tome un mapa de bits como fondo seleccionando Mapa de bits en el desplegable Tipo del Panel Color. 3. Ahora aadiremos los botones que utilizaremos. Nosotros hemos importado la biblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz clic en Archivo Importar Abrir biblioteca externa.
Pgina 43
4. Seleccionar el .fla que quieras abrir y arrastra el smbolo al Escenario. 5. Redimensinalo con la herramienta Transformacin Libre 6. Selecciona Botn en el desplegable 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 para 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("cuadrado.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 cargado cada pelcula en un nivel diferente. Simplemente escribe la ruta del archivo SWF y el nmero de nivel (que debers recordar) donde quieras cargarla. 13. Luego selecciona el botn que har que se muestre el elemento y escribe lo siguiente en el Panel Acciones: on (release) { if (_level1._visible) { _level1._visible = false; } else { _level1._visible = true; } CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 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 esto: 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 rutas de nivel y los nombres de instancia. 16. Una vez terminado prueba la pelcula desde Control Probar pelcula.
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 sobre la pelcula principal (_root.hoja_movimiento), pues los botones incluidos en las 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 carpeta /ejercicios/periodico del curso. El resto queda a tu disposicin, utiliza todos los recursos que necesites.
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.
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 archivo php. El validador del email deber comprobar que la direccin esta correctamente 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. Ejercicio paso a paso. 1. Abre el archivo movimiento_rotacion.fla que encontrars en la carpeta ejercicios/movimiento_rotacion. 2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre el Panel Acciones (Ventana Acciones o pulsando la tecla F9). 3. Escribe el siguiente fragmento de cdigo: var izquierda:Boolean = false; var derecha:Boolean = false; miClip._x = 30; miClip.onPress = function() { if (miClip._x <= 30) { miClip._rotation = 10; derecha = true; } if (miClip._x >= 515) { miClip._rotation = -10; izquierda = true; } } onEnterFrame = function() { if (derecha) { if (miClip._x < 515) { miClip._x = miClip._x + 6; } else { 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 puedes 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 paso a paso. 1. Abre el archivo attach.fla que encontrars en la carpeta ejercicios/attach del curso. 2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre l. 3. Selecciona Vinculacin. 4. Se abrir una ventana donde debers hacer clic en la opcin Exportar para ActionScript. 5. Escribe estrella en el campo nombre y pulsa OK. 6. Selecciona el primer fotograma de la Capa 3 y escribe el siguiente fragmento de cdigo en el Panel Acciones (tecla F9): _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 cuantas estrellas hay en el Escenario y la posicin de la ltima de ellas. 7. Selecciona el botn aadir y escribe el siguiente fragmenteo de cdigo en el Panel Acciones: on (release) { if (numEstrellas<30) { numEstrellas++; var miEstrella:MovieClip = attachMovie("estrella", "estrella_"+ultimaX+"_"+ultimaY, numEstrellas); miEstrella._x = ultimaX; miEstrella._y = ultimaY; if (ultimaX>=Stage.width-50) { ultimaY += 50; ultimaX = 0; } else { ultimaX += 50; } } } Observa los que hemos hecho. Si podemos aadir ms estrellas (entonces se cumple la condicin) aumentamos en 1 el contador de estrellas. Aadimos un nuevo clip de pelcula y le damos un nombre de instancia compuesto por el nombre estrella seguido por las coordenadas de posicin para poder eliminarlo ms tarde. Aumentamos las variables de coordenadas teniendo en cuenta si la fila de estrellas ha superado ya la anchura de la pantalla. 8. Selecciona el botn quitar y escribe el siguiente fragmento de cdigo en el Panel Acciones: on (release) { if (numEstrellas>0) { numEstrellas--; if (ultimaX==0) { ultimaY -= 50; ultimaX = Stage.width-50; } else { ultimaX -= 50; } removeMovieClip("estrella_"+ultimaX+"_"+ultimaY); CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Pgina 50
} } En este caso hemos avaluado si hay estrellas que quitar (el contador debe ser mayor que 0 para eso), y disminuimos el contador de estrellas en 1. Devolvemos las coordenadas a su posicin inmediatamente anterior y eliminamos la estrella que se encuentra en esa posicin llamndola por el nombre que hemos creado para tal fin. Ya hemos creado una pelcula que aade un nmero concreto de elementos automatizadamente. Fcil verdad?.
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/trigonometria del curso. 2. Aadiremos primero el cdigo para hacer que la pelota se pueda arrastrar y colocar con el ratn. Selecciona la pelota y abre el Panel Acciones (tecla F9), escribe el siguiente fragmento de cdigo: on (press) { startDrag(this); } on (release) { stopDrag(); }
3. Ahora haremos que la nave se oriente hacia la pelota en cada momento (relamente lo que haremos ser asociar el cdigo al evento onEnterFrame para que se refresque a cada vuelta al fotograma). Selecciona el fotograma 1, abre el Panel Acciones y escribe los siguiente: nave.onEnterFrame = function() { var coordenadaX:Number = 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 grados:Number = Math.round(radianes*180/Math.PI); nave._rotation = grados; }; Lo que hemos hecho en un principio es almacenar las cuatro coordenadas que nos interesan, las de la nave y las de la pelota. Luego calculamos el ngulo de la pelota respecto a la nave y asociamos ese ngulo a la propiedad _rotation de esta ltima (pasndola antes a grados). Nota: Observa que inicialmente la nave est orientada a la derecha, as que no har falta solventar el desfase de ngulo. Y ya estamos listos. Tampoco era muy dificil, verdad?
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 en l lo siguiente: onEnterFrame = function() { var velocidad:Number = 1; if (Key.isDown(Key.DOWN)) { if (!(fondo.hitTest(miClip.getBounds(_root).xMin, miClip.getBounds(_root).yMax+velocidad, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMax+velocidad, true))) { 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-velocidad, true) || fondo.hitTest(miClip.getBounds(_root).xMax, miClip.getBounds(_root).yMin-velocidad, true))) { miClip._y -= velocidad; } } if (Key.isDown(Key.LEFT)) { if (!(fondo.hitTest(miClip.getBounds(_root).xMin-velocidad, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMin-velocidad, miClip.getBounds(_root).yMax, true))) { miClip._x -= velocidad; } } if (Key.isDown(Key.RIGHT)) { if (!(fondo.hitTest(miClip.getBounds(_root).xMax+velocidad, miClip.getBounds(_root).yMin, true) || fondo.hitTest(miClip.getBounds(_root).xMax+velocidad, miClip.getBounds(_root).yMax, true))) { miClip._x += velocidad; } } } Parece un poco complicado pero en esencia es ms sencillo. Para cada uno de los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce colisin con el objeto miClip y el clip fondo. Pero no bastar con hacerlo slo de una esquina, veamos un ejemplo para verlos con ms claridad: Como ves en la imagen, deberemos ver si se producen dos colisiones. En el movimiento hacia abajo una ser la de la esquina inferior izquierda y la otra de la esquina inferior derecha. Si por ejemplo, no evaluasemos el choque con la esquina inferior izquierda e intentsemos realizar un movimiento hacia abajo, ste se realizara! Y en definitiva es lo que queremos evitar. Observa tambin que para realizar el hitTest hemos tenido en cuenta la posicin que adoptar el objeto despus del movimiento (sumndole la velocidad, o lo que
Pgina 53
es lo mismo, el nmero de pxeles que se desplaza el objeto a cada pulsacin).
Pgina 54
PRACTICA 39: Juegos Proyectiles
NOTA: Te recomendamos ver el Videotutorial 41 Debers reproducir el siguiente juego 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 funcione. Debers seguir las siguientes instrucciones:
Pgina 55
Crear un cursor personalizado. Generar el arma importndola a travs de cdigo desde la Biblioteca. Generar, tambin con ActionScript, los bloques que la rodearn. Hacer que el arma siga al ratn. Crear un bloque de bonus cada vez que se destruyan 4 proyectiles. Crear un rayo con el arma cada vez que se pulsa la tecla Espacio. Generar mediante ActionScript las estadsticas del juego incluyendo el nivel en el que nos encontramos y el nmero de proyectiles destruidos. Crear proyectiles aleatoriamente. Debers controlar si chocan contra un bloque, un rayo o el arma. Si salen de la pantalla debers eliminarlos!
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 carpeta ejercicios/espiral del curso. 2. Haz clic en el fotograma 2 de la capa acciones. 3. Abre el Panel Acciones pulsando la tecla F9. 4. Escribe lo siguiente: _global.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 escribe lo siguiente: onClipEvent (enterFrame) { if (recorrido>0) { CUADERNO DE EJERCICIOS 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; recorrido -= 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 cuanto a la escala puedes ver que va en relacin al recorrido. El movimiento de la bola lo hemos sacado de la frmula de la espiral de Arqumedes. Podrs encontrar informacin sobre ella en la red.
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 fondo. Dibujar una estrella. Que la estrella tenga un brillo dinmico. Que la estrella se pueda arrastrar. Dibujar los copos aleatoriamente. Que los copos desaparezcan (se derritan) al cabo de un tiempo.
Pgina 59

Cuaderno de Ejercicios Flash

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cuaderno de Ejercicios Flash

Uploaded by

Copyright:

Available Formats

CUADERNO DE EJERCICIOS FLASH 8

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 1. Crear Gua de Dibujo. Cuadrculas

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 2. Cambiar Propiedades de la Pelcula

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 3. Abrir Paneles

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

PRACTICA 1: Crear una pelicula a nuestro gusto

PRACTICA 2: Estructurar una Pelcula

PRACTICA 3: Creando Fotogramas

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 4.Crear un valo

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 5.Dando Color a un valo

Barra de Herramientas. Y seleccionamos el color que nos guste.

Seleccionamos el Interior del valo Seleccionamos el Borde del valo

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 6.Creando un color transparente

ejemplo, escribimos un valor de 45%.

Rectngulo Azul Ahora con Transparencia

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

PRACTICA 5: Bandera Olmpica

Ejercicio 7.Cambiar el Tipo de Texto

1 Hacemos clic en la Herramienta Texto y despus en el escenario.

PRACTICA 7: Objetos. Rellenos y Bordes

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

PRACTICA 9: Alinear Objetos

PRACTICA 10: Grupos

Ejercicio 8.Cambiar un objeto de Capa

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 9.Crear Smbolo.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 10.Modificar una instancia de un smbolo.

PRACTICA 11: Crear Smbolo

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

PRACTICA 12: Insertar Instancia

PRACTICA 13: Duplicar Instancia

PRACTICA 14: Efectos sobre Instancias

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 11.Carga y Modificacin de Filtros

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

PRACTICA 15: Selector de Filtros

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 12.Encadenar Interpolaciones

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Comprobemos que la lnea de tiempos est de la siguiente forma:

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 13. Animar Texto por Bloques

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

PRACTICA 16: Crear un Clip a modo de cuenta atras

PRACTICA 17: Crear un clip vaco y editarlo despus

PRACTICA 18: Exportar una pelcula con proteccin

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Ejercicio 14.Crear un Botn con Relieve

PRACTICA 19: Crear un boton en forma de pildora

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

5 Gurdalo como stop.fla

PRACTICA 20: Ajustar el rea Activa

PRACTICA 21: Botn con Sonido