You are on page 1of 59

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 3


Ejercicio 1. Crear Guía de Dibujo. Cuadrículas

Objetivo.
Crear una cuadrícula que quedará visible al fondo del fotograma (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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 4


Ejercicio 2. Cambiar Propiedades de la Película

Objetivo.
Practicar cómo se pueden cambiar algunos atributos fundamentales de las películas.

Ejercicio paso a paso.

1 Haz clic con el botón derecho sobre el fondo de la película.

2 Selecciona 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 5


Ejercicio 3. Abrir Paneles

Objetivo.
Abrir los Paneles de Carácter y el de Trazo y seleccionar uno.

Ejercicio paso a paso.

1 Pulsa en el menú Ventana.

2 Selecciona la opción Muestras de Color, si ya tuviera una señal junto al nombre del
Panel, significa que ya está abierto. Sino, haz clic 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)

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 6


PRACTICA 1: Crear una pelicula a nuestro gusto

Crea una película que tenga las siguientes propiedades:

1 Un tamaño de 300 x 100 px

2 Un color de fondo rojo

3 Un Velocidad de los Fotogramas de 14 fps

PRACTICA 2: Estructurar una Película

1 Abre una nueva película

2 Crea 2 Escenas y llámalas E1 y E2

3 Crea 2 capas en cada una.

4 Llámalas E1_1, E1_2 y E2_1, E2_2

PRACTICA 3: Creando Fotogramas

1 Crea en una película nueva 3 fotogramas clave

2 Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto


Ejercicio 4: Identificando 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?

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 7


PRACTICA 4: Paneles

1 Abre el Panel Mezclador de Color.

2 Abre el Panel Acciones.

3 Abre el Panel 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)

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 8


Ejercicio 5.Dando Color a un Óvalo

Objetivo.
Dar color a un óvalo. Tanto a su interior como a su exterior

Ejercicio paso a paso.

1 Partimos de la existencia de un Óvalo creado mediante la Herramienta Óvalo que se


encuentra en la Barra de Herramientas.

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 9


Ejercicio 6.Creando un color transparente

Objetivo.
Crear un objeto cuyo color sea transparente, de modo que se vean los 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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 10


PRACTICA 5: Bandera Olímpica

1 Dibuja 5 aros.

2 Cámbiales los colores. Por ejemplo, los colores de la bandera 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 12


PRACTICA 9: Alinear Objetos

1 Dibuja 4 objetos (círculos, rectángulos...).

2 Coloca uno en cada esquina usando 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 13


8 Hacemos clic en Pegar para colocar el objeto en este fotograma o hacemos clic en Pegar
in Situ para pegar el objeto en la misma posición en la que estaba al 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 14


Se desplegará una ventana como la de la figura.

5 En el campo Nombre introducimos el nombre de nuestro gráfico, por ejemplo "Mi

Primer Símbolo".

6 Seleccionamos la opción Gráfico en el apartado Comportamiento. Con esto le decimos a


Flash que el nuevo símbolo será un gráfico.

7 Pulsamos Aceptar y ya tenemos nuestro primer símbolo gráfico creado.

Ejercicio 10.Modificar una instancia de un símbolo.

Objetivo.
Comprender la diferencia entre un símbolo y una instancia de este símbolo.

Ejercicio paso a paso.

1 Vamos al menú Ventana → Bibliotecas Comunes.

2 Seleccionamos la primera opción del 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 y modificamos el tamaño de la
instancia arrastrando los extremos del objeto.

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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 16


PRACTICA 12: Insertar Instancia

1 Crea una nueva película.

2 Inserta el Gráfico de un botón cualquiera de las 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 17


Ejercicio 11.Carga y Modificación de Filtros

Objetivo.
Cargar filtros mediante ActionScript dándoles las propiedades que 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 18


4. Despues de esto escribe:
var sombra:DropShadowFilter = new DropShadowFilter();
Hemos creado una variable llamada sombra que es un filtro de Sombra.

5. Luego accederemos a las propiedades de sombra y le daremos los valores que hay
en los campos del formulario:
sombra.distance = distance_stp.value;
sombra.angle = 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?.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 19


PRACTICA 15: Selector de Filtros

Deberás reproducir la siguiente película Flash:

Utiliza el archivo fuente filtros.fla que encontraras en la carpeta ejercicios/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.

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 21


Comprobemos que la línea de tiempos está de la siguiente forma:

8 Hacemos clic con el botón derecho del ratón sobre el fotograma 5.

Comprobemos que el clip de película ya no está en el origen si no que ya está "haciendo


camino".

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 22


Ejercicio 13. Animar Texto por Bloques

Objetivo.
Crear una animación sobre un texto separándolo en bloques de letras cuyo 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".

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 23


6 Creamos 5 nuevas capas, una por cada bloque que hemos creado.

Esto último es necesario ya que si no


lo hiciéramos Flash aplicaría el movimiento a 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.

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 26


Ejercicio 14.Crear un Botón con Relieve

Objetivo.

Crear un botón con efecto relieve de forma rectangular tipo formulario 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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 28


5 Guárdalo como stop.fla

PRACTICA 20: Ajustar el Área Activa

1 Crea una nueva película

2 Escribe el texto: "VámOnoS" respetando las mayúsculas y 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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 29


PRACTICA 22: Detener una Película

1 Abre un nuevo documento.

2 En el primer fotograma inserta algún símbolo que se 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".

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 30


PRACTICA 24: Cambio de Forma y Tamaño

1 Abre el archivo "babosa.fla"

2 Cambia el movimiento de forma para que a mitad del trayecto de la impresión de que se
está acercando a nosotros.

3 Cambia el color de la babosa cuando está más cerca de nosotros.

PRACTICA 25: Cambiar la Forma de un Texto

1 Escribe en distintas capas las letras de tu nombre.

2 Crea una animación de 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:

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 31


Ejercicio 15.Exportar objeto como Bitmap.

Objetivo.

Exportar un objeto Flash 8 como un gráfico de tipo mapa de bits. En este caso, lo
exportaremos como JPG.

Ejercicio paso a paso.

1Seleccionamos el objeto a exportar.

2 Vamos al menú Archivo → Exportar → Exportar 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 32


7 Pulsamos Guardar.

Y ya está exportado. Para comprobarlo accede a la carpeta en la que lo guardaste y verás


un archivo con el nombre que le diste y la extensión .jpg

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 33


Ejercicio 16.Acelerar Movimiento

Objetivo.
Comprender el efecto de aceleración sobre una interpolación de movimiento.

Ejercicio paso a paso.

Primero vamos a crear la interpolación sobre la que aplicaremos el efecto. Vamos a


basarnos en un Clip de Película cualquiera.

1 Importa un Clip de Película ya creado o bien lo creas tú mismo (creas un dibujo y lo


conviertes en Clip de Película).

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 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".

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 35


PRACTICA 28: Efecto Aceleración

1 Abre el archivo "rueda.fla"

2 Haz que vaya frenando en su movimiento hasta 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 36


Ejercicio 17.Publicar SWF

Objetivo.
Aprender a publicar una película Flash como archivo SWF independiente, 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.

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

<EMBED SRC="aulaClic.swf" quality=high bgcolor=#FFFFFF WIDTH="640"


HEIGHT="480" NAME="aulaClic" ALIGN="" TYPE="application/x-shockwave-
flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>

INSTRUCCION DESCRIPCION

EMBED

SRC

QUALITY

BGCOLOR

WIDTH

ALIGN

TYPE

PLUGINSPACE

</EMBED>

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 38


PRACTICA 32: Importar Sonidos

1 Crea una película con 1 fotograma.

2 Localiza un sonido en tu disco duro.

3 Impó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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 39


Ejercicio 18. Importando Vídeo con Puntos de Referencia

Objetivo.
Importar una película creando los puntos de referencia que hemos 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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 40


ajustar el tiempo.

10. Pulsa el botón de nuevo para crear otro punto de referencia, le daremos el
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 y dale el nombre de


carrera1inicio y selecciona Evento en Tipo.

13. Ahora añadiremos un parámetro, haz clic en el botón de la lista de la derecha


(Parámetros).

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 en la lista de la derecha, dale el nombre


fotograma y el valor win.

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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 41


20. Desplaza el cabezal al segundo 1:34.600, crea allí un último punto de referencia.

21. Dale el nombre carrera2fin y el Tipo Evento.

22. Crea un parámetro para este punto de referencia (pulsando el botón ), llámalo
fotograma y dale el valor lose.

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 sitúa la forma centrada con respecto
al punto de referencia (mira el ejemplo).

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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 43


4. Seleccionar el .fla que quieras abrir y arrastra el símbolo al Escenario.

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 45


PRACTICA 37: Navegacion ActionScript – Periodico Digital

Deberás reproducir la siguiente película Flash:

Para ello deberás crear un movieclip que reproduzca el movimiento de la página, esta
película tiene que llamarse hoja_movimiento y deberá estar incluida directamente 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 46


PRACTICA 38: ActionScript - Formulario

Deberás reproducir el siguiente formulario Flash:

Tambíen deberás establecer el orden de tabulación de los objetos y el botón por defecto.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 47


Además, deberás darle funcionalidad al botón Reset y Enviar. El primero limipando los
datos del formulario y el segundo recogiendolos validándolos y enviandolos a un 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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 53


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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 54


PRACTICA 39: Juegos – Proyectiles

NOTA: Te recomendamos ver el Videotutorial 41


Deberás reproducir el siguiente 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:

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 55


• Crear un cursor personalizado.

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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 56


Ejercicio 24.Movimiento en Espiral

Objetivo.
Reproduciremos la película que puedes ver a continuación:

Ejercicio paso a paso.


1. Abre el archivo espiral.fla que encontrarás en la 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._x-


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

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 58


PRACTICA 40: Animaciones avanzadas - Nieve

Deberás reproducir la siguiente animación Flash:

Utiliza un documento en blanco. No podrás crear ningún elemento. Lo deberás hacer


todo mediante ActionScript.

Tendrás cumplir los siguientes requisitos:

• Dibujar un 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.

CUADERNO DE EJERCICIOS Y PRACTICAS FLASH 8 Página 59

You might also like