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ícula ..................................................................... 5 Ejercicio 3. Abrir Paneles ........................................................................................................ 6 PRACTICA 1: Crear una pelicula a nuestro gusto.................................................................... 7 PRACTICA 2: Estructurar una Película..................................................................................... 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 Olímpica ............................................................................................ 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 Símbolo. .................................................................................................... 14 Ejercicio 10.Modificar una instancia de un símbolo............................................................. 15 PRACTICA 11: Crear Símbolo ............................................................................................... 16 PRACTICA 12: Insertar Instancia ........................................................................................... 17 PRACTICA 13: Duplicar Instancia .......................................................................................... 17 PRACTICA 14: Efectos sobre Instancias ................................................................................ 17 Ejercicio 11.Carga y Modificación 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 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ícula ..................................................................................... 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........................................................................... 32 CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Página 2

Ejercicio 16.Acelerar Movimiento ........................................................................................ 34 PRACTICA 27: Efecto sobre animaciones - Rotacion ............................................................ 35 PRACTICA 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 Sonidos ........................................................................................... 39 PRACTICA 33: Insertar Sonidos ............................................................................................. 39 PRACTICA 34: Trabajar con Sonidos ..................................................................................... 39 PRACTICA 35: Editar Sonidos ................................................................................................ 39 Ejercicio 18. Importando Vídeo con Puntos de Referencia .................................................. 40 PRACTICA 36: Mi Video......................................................................................................... 42 Ejercicio 19.Crear una Película con Niveles .......................................................................... 42 PRACTICA 37: Navegacion ActionScript – Periodico Digital ................................................. 46 PRACTICA 38: ActionScript - Formulario .............................................................................. 47 Ejercicio 20.Rotación ............................................................................................................ 48 Ejercicio 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 avanzadas - Nieve .................................................................... 59


Página 3

Ejercicio 1. Crear Guía de Dibujo. Cuadrículas Objetivo. Crear una cuadrícula que quedará visible al fondo del fotograma (posteriormente no saldrá en la película) y que nos servirá como guía para poder dibujar objetos de forma exacta y precisa. Ejercicio paso a paso. 1 Pulsa en el menú Archivo. 2 Selecciona la opción Nuevo. 3 Aparecerá una nueva película. Si deseas crear la cuadrícula sobre una película ya empezada, sáltate los 2 primeros pasos. 4 Selecciona la opción Cuadrí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ícula del menú Ver para que los objetos que crees se acomoden a las líneas de la cuadrícula, consiguiendo alinearlos de un modo fácil.


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 Propiedades del Documento. 3 En Unidades de Reglas selecciona Centimetros. 4 A continuació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 las standard 640 x 480 px.


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 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 servía 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)


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 Fotogramas 1 Dada la siguiente película

Identifica todos los tipos de fotogramas existentes y a qué tipo pertenecen. ¿Recuerdas para qué sirve cada uno?


Página 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 ratón en el Escenario (dentro del fotograma actual). 3 Haz clic y arrastra el ratón hacia el lugar que desees. Observarás que el movimiento de tu ratón provoca la creación de un óvalo (figura 1). Cuando el óvalo tenga la forma deseada, 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)


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 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 "Lápiz".


Página 9

Ejercicio 6.Creando un color transparente Objetivo. Crear un objeto cuyo color sea transparente, de modo que se vean los objetos que haya detrás Ejercicio paso a paso. 1 Creamos un rectángulo con la Herramienta Rectángulo. 2 El Color de relleno del rectángulo 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 Rectángulo y modificamos el valor Alfa. Por

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


Página 10

PRACTICA 5: Bandera Olímpica 1 Dibuja 5 aros. 2 Cámbiales los colores. Por ejemplo, los colores de la bandera olí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 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 más nos interese. Ejercicio 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 Propiedades, si es que teníamos minimizado este Panel. 4 Una vez podamos ver el Panel seleccionamos la Pestaña 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 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 PRACTICAS 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 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 Selección (Flecha). 4 Selecciona 3 únicamente los bordes de 3 de ellos.


Página 12

PRACTICA 9: Alinear Objetos 1 Dibuja 4 objetos (círculos, rectángulos...). 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 posició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 Partimos de una película con más 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 ratón. 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 válido en ambos casos). 7 Hacemos clic con el botón derecho sobre el escenario de este fotograma de destino.


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 cortarlo

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


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 submenú 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 los 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 arrastrado. Esto es una instancia del símbolo llamado arcade button - blue. Comprobémoslo. 5 Seleccionamos nuestra nueva instancia. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Página 15

6 Seleccionamos la herramienta Transformación Libre instancia arrastrando los extremos del objeto.

y modificamos el tamaño de la

7 Bien, ahora hemos modificado la instancia. Comprobemos que el símbolo sigue intacto.

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 sucede 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 insertando y modificando ese símbolo y cualquier otro en esta u otra película ya que estaremos 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ímbolo de tipo Clip. 4 Comprueba que está disponible en la Biblioteca.


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 Bibliotecas comunes de Flash 8. 3 Modifica su tamaño. 4 Vuelve a realizar el paso 2 y comprueba 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 que está tapando al otro un efecto Alfa del 40%. 3 Comprueba que ahora podemos ver los dos claramente.


Página 17

Ejercicio 11.Carga y Modificación de Filtros Objetivo. Cargar filtros mediante ActionScript dándoles las propiedades que queramos. 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 ejercicios/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.DropShadowFilter; Esto hará que el filtro se importe a la película y podamos utilizarlo.


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 = 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 película donde podemos cambiar las propiedades de un filtro dinámicamente. Fácil ¿verdad?.


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/filtros del curso. Como ya hemos visto, averiguar los filtros que afectan a un clip es realmente complicado, deberás idear una forma para poder gestionarlos y mantener los que estén activos cada vez que se pulse uno de los botones. No deberás reproducir el aspecto de los filtros, puedes personalizarlos como más te guste.


Página 20

Ejercicio 12.Encadenar Interpolaciones Objetivo. Crear un movimiento multidireccional encadenando interpolaciones de movimiento. Ejercicio paso a paso.

1 Importamos un Clip de Película. 2 También podemos dibujarlo y convertir nuestro dibujo en un Clip de Película. 3 Situamos el Clip en el lado izquierdo del área de trabajo. 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 fotograma número 20 y pulsamos F6. 7 Observaremos que se crea la Animación de 20 fotogramas 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 marcado únicamente la posición inicial y final del movimiento. Si lo dejáramos así, el clip seguiría una línea 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 interpolación ya creada.


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 Desplacemos 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 estos dos últimos pasos para los fotogramas 15 y 20 y prueba la película. Como podemos comprobar, el clip se desplaza ahora en línea recta pero en varias direcciones distintas.


Página 22

Ejercicio 13. Animar Texto por Bloques

Objetivo. Crear una animación sobre un texto separándolo en bloques de letras cuyo movimiento será tratado de manera independiente, dando al texto un efecto vistoso que 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 Panel Propiedades (tras seleccionar el texto) y seleccionamos el tipo de letra. Nosotros hemos elegido "Ruach Let", pero cualquiera es válida. 3 Seleccionamos el texto recién escrito. 4 Accedemos al menú Modificar → Separar. Con esto separamos cada letra ya que de no hacerlo Flash trataría todo el texto como un bloque y no podríamos dar 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 efecto en concreto. 5 Seleccionamos dichos bloques y los convertimos a símbolos, dándoles un nombre identificativo y el Comportamiento gráfico, ya que no los animaremos "internamente".


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 todo aquello que encontrara en dicha capa, ya que como hemos comentado anteriormente, lo convertiría todo a símbolo automáticamente. 7 Nombramos cada una de las capas segú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 que no lo están. Esto es, la capa de más arriba se llamará "Clic", la siguiente "la" y así sucesivamente.

8 Hacemos clic con el botón derecho sobre el único fotograma que tenemos en la línea de tiempos y en el menú emergente seleccionamos Copiar Fotogramas. A continuación vamos pegando los fotogramas (botón derecho → Pegar Fotogramas) en todas las capas. CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8

Página 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 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 fotogramas centrales que hay entre los fotogramas claves y seleccionamos cada vez Crear Interpolación de Movimiento.

13 Extendemos la imagen los últimos fotogramas de cada capa hasta que ocupen el fotograma 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 seleccionamos Insertar Fotograma Clave. 17 En este fotograma recién creado reducimos el ancho del bloque de texto y lo colocamos junto a la última "a". Y ya tenemos la animación creada. Como vemos hemos utilizado todo tipo de técnicas de interpolación, aunque todavía puede complicarse más como veremos más adelante.


Página 25

PRACTICA 16: Crear un Clip a modo de cuenta atras 1 Crea una película con sólo 1 fotograma. 2 Escribe un número cualquiera, por ejemplo un 3. 3 Conviértelo a símbolo de tipo Clip. 4 Crea una animación fotograma a fotograma en la que se vea una cuenta atrás hasta el cero. 5 Comprueba que pese a tener la película original un frame y el clip cinco, la animación se ve completamente. 6 Guárdalo como cuenta.fla

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


Página 26

Ejercicio 14.Crear un Botón con Relieve Objetivo. Crear un botón con efecto relieve de forma rectangular tipo formulario de manera rápida y sencilla. Ejercicio paso a paso.

1 Dibujamos un rectángulo en el área de trabajo. 2 Seleccionamos el fondo. 3 Cambiamos el color de fondo del rectángulo. Por ejemplo a gris. 4 Con la herramienta texto 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. 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 botón. 9 Activamos la opción de menú Insertar → Nuevo Símbolo... 10 Marcamos el comportamiento de botón y le damos un nombre. Pulsa Aceptar. 11 Hacemos doble 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 correspondientes a los estados del botón.

13 Seleccionamos el fotograma Presionado. 14 Modifiquemos ahora el borde inferior y el derecho del botón aplicándole el color blanco. 15 Finalmente seleccionemos los 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 haga nada mientras no pulsemos el botón y el área de acción es la que comprende nuestro rectángulo. 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 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


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 minú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 Biblioteca 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


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 comporte 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 toda 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 escenario, dando la sensación de que está reptando. 4 Guárdalo como "babosa.fla".


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 forma que pase de una letra a la siguiente. 3 Cambia los colores y el tamaño de cada letra.

PRACTICA 26: Consejos de Forma 1 Dibuja una Flecha. 2 Crea una animación de forma de manera que al final, la flecha quede con el mismo aspecto pero apuntando en dirección 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:


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 Imagen... Ahora estaremos delante de una ventana similar a la que se muestra a la derecha. 3 Buscamos en la pestaña 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 pestaña de Tipos de archivo. 6 Buscamos entre todos los tipos el formato JPG o JPEG.


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


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 Lo 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 Movimiento 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 Intro 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 para 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:


Página 34

10 Intoduce ahora un -100 en la casilla Aceleración (dentro), para hacer que aumente 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 al otro del escenario. 3 Haz que ruede mientras hace el deplazamiento. 4 Guárdalo como "rueda.fla".


Página 35

PRACTICA 28: Efecto Aceleración 1 Abre el archivo "rueda.fla" 2 Haz que vaya frenando en su movimiento hasta pararse.

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í parecerá 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 nombre vaya desapareciendo y que ANTES de que lo haga aparezca poco a poco el apellido por detrás suyo.


Página 36

Ejercicio 17.Publicar SWF Objetivo. Aprender a publicar una película Flash como archivo SWF independiente, así 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 biblioteca del documento mediante Ventana → Biblioteca. Reduciremos la calidad de los mapas 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 para abrir la ventana Configuración de Publicación. 5 Abre la pestaña Formatos y desactiva 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 deslizante 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 verificación Proteger frente a Importación e introducimos en el campo Contraseña la palabra de paso que deseemos. 10 Pulsamos el botón Publicar. 11 Accede al directorio de Flash donde se ha exportado el archivo SWF y ejecútalo. Comprueba que la calidad de las imágenes no es buena.


Página 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 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 introduce entre las líneas HTML un código de etiquetas (como el HTML) que muestra al navegador qué película tienen que reproducir y cómo. Intenta deducir e identificar del siguiente código, resultante de la exportación de una película, aquellos elementos que podamos haber indicado nosotros en las propiedades de exportación, y que están estrechamente relacionados con la visualización que tendrá de ella la gente en el navegador.

INSTRUCCION

DESCRIPCION

EMBED SRC QUALITY BGCOLOR WIDTH ALIGN TYPE PLUGINSPACE


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órtalo 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 CTRL+ 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 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.


Página 39

Ejercicio 18. Importando Vídeo con Puntos de Referencia Objetivo. Importar una película creando los puntos de referencia que hemos utilizado en el ejemplo de la teoría. Ejercicio paso a paso. 1. Haz clic en Archivo → Importar → 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 pantalla, 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 principio del vídeo. Haz clic en el botón

.

8. Dale el nombre de inicio y selecciona Navegació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


Página 40

ajustar el tiempo. de nuevo para crear otro punto de referencia, le daremos el 10. Pulsa el botón nombre de carrera1 y seleccionaremos Navegación. 11. Desplaza el cabezal al segundo 07.360. 12. Crea un punto de referencia pulsando el botón carrera1inicio 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).

de la lista de la derecha

14. Dale el nombre de fotograma y el valor ready. 15. Desplázate hasta el segundo 42.280 y crea otro punto de referencia llamado carrera1fin de Tipo Evento. 16. Dale un parámetro pulsando el botón fotograma y el valor 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 carrera2 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.


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 importar 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 funcionalidad 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 siguientes 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 mostrar 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._visible = false; De esta forma la película será invisible nada más abrirla. La haremos visible más tarde a través del código. 9. Selecciona el símbolo y en el Panel Acciones escribe: on (press) { startDrag(this); } on (release) { stopDrag(); } Esto hará que puedas 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 quieras 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 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 añadiremos 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.


Página 43

4. Seleccionar el .fla que quieras abrir y arrastra el símbolo al Escenario. 5. Redimensiónalo con la herramienta Transformación Libre

.

6. Selecciona Botón en el desplegable 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 para 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("cuadrado.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 cargado cada película en un nivel diferente. Simplemente escribe la ruta del archivo SWF y el número de nivel (que deberás recordar) donde quieras cargarla. 13. Luego selecciona el botón 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

Página 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 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 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 rutas de nivel y los nombres de instancia. 16. Una vez terminado prueba la película desde Control → Probar película.


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 sobre la película principal (_root.hoja_movimiento), pues los botones incluidos en las 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 carpeta /ejercicios/periodico del curso. El resto queda a tu disposición, utiliza todos los recursos que necesites.


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.


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 archivo php. El validador del email deberá comprobar que la dirección esta correctamente 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. Ejercicio paso a paso. 1. Abre el archivo movimiento_rotacion.fla que encontrarás 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 código: 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

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 puedes 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 paso 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 derecho sobre él. 3. Selecciona Vinculación. 4. Se abrirá una ventana donde deberás hacer clic en la opción 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 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 cuantas estrellas hay en el Escenario y la posición de la última de ellas. 7. Selecciona 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 = 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 añadir más estrellas (entonces se cumple la condición) aumentamos en 1 el contador de estrellas. Añadimos un nuevo clip de película y le damos un nombre de instancia compuesto por el nombre estrella seguido por las coordenadas de posición para 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. Selecciona el botón quitar y escribe el siguiente fragmento de código 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

Página 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 posición inmediatamente anterior y eliminamos la estrella que se encuentra en esa posición llamándola por el nombre que hemos creado para tal fin. Ya hemos creado una película que añade un número concreto de elementos automatizadamente. 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/trigonometria del curso. 2. Añadiremos primero el código para hacer que la pelota se pueda 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 (relamente lo que haremos será asociar el código 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

Página 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 (pasándola 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.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 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

Página 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 más sencillo. Para cada uno de los movimiento (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 una 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 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 intentá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


Página 53

es lo mismo, el número de píxeles que se desplaza el objeto a cada pulsación).


Página 54

PRACTICA 39: Juegos – Proyectiles

NOTA: Te recomendamos ver el Videotutorial 41 Deberás 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 código necesario para que el juego funcione. Deberás seguir las siguientes instrucciones:


Página 55

•

Crear un cursor personalizado.

•

Generar el arma importándola a través de código desde la 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 proyectiles.

•

Crear un rayo con el arma cada vez que se pulsa la tecla Espacio.

•

Generar mediante ActionScript las estadísticas del juego incluyendo el nivel en el que nos encontramos y el número de proyectiles destruidos.

•

Crear proyectiles aleatoriamente. Deberás controlar si chocan contra un bloque, un rayo o el arma. Si salen de la pantalla deberás eliminarlos!


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

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; 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 más real. En cuanto 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.


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

•

Dibujar una estrella.

•

Que la estrella tenga un brillo dinámico.

•

Que la estrella se pueda arrastrar.

•

Dibujar los copos aleatoriamente.

•

Que los copos desaparezcan (se derritan) al cabo de un tiempo.


Página 59

cuaderno_de_ejercicios_flash

Recommend Documents