Ejercicios Flash CS5 Aula Clic

Unidad 2.
Ejercicio: Utilizar la cuadrcula

Objetivo
Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no saldr
en la pelcula) y que nos servir como gua para poder dibujar objetos de forma exacta y
precisa.
Ejercicio paso a paso.

1.
2.
3.
4.
Pulsa en el men Archivo.

Selecciona la opcin Nuevo.
Elige ActionScript 3.0.
Aparecer una nueva pelcula. Si deseas crear la cuadrcula sobre una pelcula ya
empezada, sltate los 2 primeros pasos.
5. Selecciona la opcin Cuadrcula del men Ver.
6. Se desplegar un submen como el de la figura.
7. Selecciona la opcin Mostrar Cuadrcula para hacerlo visible.
8. Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula

a tu gusto (tamao, color de fondo...)
9. Selecciona la opcin Ajuste Ajustar a Cuadrcula del men Ver para que los
objetos que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlos
de un modo fcil.
Unidad 2. Ejercicio: Cambiar las

dimensiones de la pelcula
Objetivo.
Practicar cmo se pueden cambiar algunos atributos fundamentales de las pelculas.

1.
2.
3.
4.
Haz clic con el botn derecho sobre el fondo de la pelcula.

Selecciona Propiedades del Documento.
En Unidades de Reglas selecciona Centmetros.
A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22,46 y en
Altura 16,84.
5. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen

aproximadamente a las estndar 640 x 480 px.
Unidad 2. Ejercicio: Accediendo a paneles

Objetivo
Abrir los Panel de Muestras y seleccionar una muestra de color.
Ejercicio paso a paso
1. Pulsa en el men Ventana.

2. Selecciona la opcin Muestras, si ya tuviera una seal junto al nombre del Panel,
significa que ya est abierto. Si no, haz clic sobre l.
3. Ahora selecciona el color verde de dicho panel, observa que al acercar el cursor,
ste tomar la forma de la herramienta cuentagotas (que serva para seleccionar un
color).
4. Todo lo que dibujemos de ahora en adelante, ser de color verde (podemos usar este
mecanismo para cambiar el color de relleno o el color del trazo).
Unidad 3. Ejercicio: Crear un valo

Objetivo.
Crear una valo con las medidas y la forma que queramos

1. Pulsa sobre la Herramienta valo
que se encuentra en la Barra de Herramientas.
Puede que en vez del valo encuentres otra herramienta de su grupo, como el
Rectngulo. Si es as, mantn el cursor pulsado durante unos segundos sobre ella
para que se despliegue el men.
2. Sita el cursor del ratn en el Escenario (dentro del fotograma actual).
3. Haz clic y arrastra el ratn hacia el lugar que desees. Observars que el movimiento
de tu ratn provoca la creacin de un valo (figura 1). Cuando el valo tenga la
forma deseada, suelta el ratn. El resultado ser similar al de la figura 2.
Figura 1
Figura 2
4. Guarda el archivo como trabajo.fla. Lo volveremos a utilizar ms adelante.

Truco: Si quieres crear un crculo perfecto, mantn pulsada la tecla SHIFT mientras das
forma al valo. (Sucede igual con la Herramienta Rectngulo)
Unidad 3. Ejercicio: Crear transparencias

Objetivo
Crear un objeto cuyo color sea parcialmente transparente, de modo que se vean los objetos
de detrs.

En este ejercicio utilizamos un archivo que encontrars en la carpeta de ejecicios del curso.
Si an no tienes estos archivos, puedes descargarlos gratuitamente desde aulaClic
registrndote como usuario.
1. Abre el archivo transparencia.fla que encontrars en la carpeta de ejercicios.
2. Selecciona el relleno del Rectngulo.
3. Haz clic sobre el color de relleno en la Barra de herramientas. Se mostrar el panel
para cambiar el color.
4. En la parte superior del panel encontrars el control de transparencia Alfa. Haz clic
sobre l y arrastra hacia la izquierda hasta que el valor baje a 45% (por ejemplo).
Rectngulo Azul
Ahora con Transparencia
El efecto alfa trabaja de forma que si situamos cualquier objeto o imagen detrs de l,
podemos ver como un efecto de transparencia que mostrar parte de lo que se encuentre
detrs de nuestro relleno.
Unidad 3. Ejercicio: Colorear un valo

Objetivo
Dar color a un elemento simple. Tanto a su interior como a su exterior
1. Abre el archivo que creamos en el primer ejercicio de la unidad, trabajo.fla.

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.
Seleccionamos el Interior del valo
Seleccionamos el Borde del valo
3. Una vez hecho esto, nos fijamos en el Panel de Muestras, que se encuentra en el
lateral derecho del rea de herramientas y seleccionamos el color que nos guste.
Para modificar el color del interior del valo tambin podemos seleccionar un color
directamente haciendo clic sobre el Panel de Colores existente en el Panel de
herramientas junto a la imagen del "Bote de Pintura". O si deseamos modificar el
borde, sobre el Panel existente junto al "Lpiz".
Unidad 4. Ejercicio: Propiedades del texto

Objetivo.
Crear un texto cualquiera y asignarle las propiedades que ms nos interesen.

1. Abre el archivo trabajo.fla, creado en la unidad anterior.
2. Creamos una nueva capa (ya veremos ms adelante para que sirven) haciendo clic
en el botn en la lnea de tiempo.
3. 3 Hacemos clic en la Herramienta Texto y despus en el escenario.
4.
5.
6.
7.
Veremos esta imagen

. Escribe dentro el texto Esto es un texto de prueba.
Hacemos clic en el Propiedades, si es que tenamos minimizado este Panel.
Haz que el texto se encuentre centrado haciendo clic en
Cambia la fuente del texto a Verdana seleccionndola en el desplegable Familia.
.
8. Cambia el espaciado entre caracteres del texto a 2 escribindolo en la opcin
Espaciado.
9. Por ltimo cambia el tamao del texto a 30 y ponlo en Negrita utilizando los
controles de Tamao y Estilo.
Unidad 4. Ejercicio: Crear un flujo de

texto
Objetivo.
Crear un texto que fluya por varios contenedores.

1.
2.
3.
4.
Abre el archivo trabajo.fla, utilizado en ele ejercicio anterior.

Selecciona el elemento texto que creamos en el ejercicio anterior.
Haz clic en una de sus esquinas para cambiar su tamao.
Escribe ms texto hasta que el puerto de salida muestre una cruz roja (puedes copiar
texto de esta pgina y pergarlo).
5. Haz clic sobre el puerto de salida, vers que el cursor cambia a
.
6. Ahora, traza un rectngulo sobre la escena. Vers que se crea un nuevo rea de texto
que se rellena con el texto sobrante de la primera rea.
7. Escribe nuevo texto al principio del primer rea, y comprueba que va pasando de la
primera a la segunda.
Unidad 5. Ejercicio: Trabajar con Sonidos

Objetivo.
Insertar un sonido que reproduzca desde el fotograma 5 al 15.

1. Creamos la pelcula mediante Archivo Nuevo, eligiendo ActionScript 3 (por
defecto tendremos un nico fotograma).
2. Creamos una nueva capa (icono Nueva capa de la lnea de tiempo) y la
seleccionamos.
3. Insertamos un nuevo fotograma clave en la lnea de tiempo en el fotograma 5 y 15
(desde el Men Insertar Lnea de Tiempo Fotograma Clave, o pulsando F6).
4. Seleccionamos Archivo Importar Importar a Biblioteca, que se encuentra en
el Men Archivo.
5. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el
archivo sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.
6. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana

Biblioteca) y comprobamos que se encuentra all.
7. Seleccionamos el fotograma 5 (donde queremos insertar el sonido).
8. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario.
9. Ve al panel de Propiedades, y la opcin Sinc. selecciona Evento.
10. Prueba la pelcula (tecla Intro) y comprobars que el sonido se reproduce hasta al
final. Pulsa varias veces Intro y comprobars que el sonido se reproduce varias
veces solapndose.
11. En el despegable Sinc de las Propiedades, cambia el valor a Flujo. Repite el paso
anterior y comprueba que el sonido se para al llegar al ltimo fotograma.
12. En el despegable Sinc de las Propiedades, cambia el valor a Iniciar. Repite el paso
anterior y comprueba que el sonido no se vuelve a iniciar si an no ha acabado,
aunque se reproduce hasta el final.
13. Selecciona el fotograma clave 15.
14. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos
utilizando.
15. En la opcin Sinc selecciona Detener.
16. Prueba la pelcula y comprobars que ahora se detiene al llegar la fotograma 15.
Unidad 6. Ejercicio: Alinear objetos

Objetivo
Crear un texto cualquiera y asignarle las propiedades que ms nos interesen.

1. Abre un archivo nuevo.
2. Dibuja 4 rectngulos de diferentes colores situados en diferentes puntos del
escenario.
3. Haz clic en la herramienta Seleccin.
4. Vamos a seleccionar todos los elementos que se encuentran en el escenario, para
ello hacemos clic en la esquina superior izquierda y sin soltar el botn del ratn
arrastramos hasta la esquina inferior derecha y soltamos (asegrate de que todos los
elementos se encuentran en el rea de seleccin).
5. Abrimos el panel de Alineacin, esta vez lo haremos pulsando la combinacin de
teclas CTRL + K (aunque tambin podras abrirlo desde el men Ventana).
6. Marca la opcin Alinear en escenario.
7. Alineamos todos los objetos a la derecha del escenario haciendo clic en
.
Observa como todos los objetos se han movido para tener su borde derecho pegado
al borde derecho del escenario.
8. Alineamos todos los objeto (an seleccionados) a la izquierda del escenario
haciendo clic en
Fjate que los objetos ahora se han movido al lado contrario. Alinendose su borde
izquierdo con el borde izquierdo del escenario.
Unidad 7. Ejercicio: Mover objetos entre

capas
Objetivo
Mover un objeto situado en una capa a otra

1. Abre el archivo trabajo.fla, con el que venimos trabajando en los ltimos temas.
2. Seleccionamos la Capa donde est el rectngulo que queremos cambiar de capa.
3. Hacemos doble clic en el rectngulo para seleccionarlo en su totalidad (relleno y
borde).
4. Pulsamos el botn derecho del ratn. Se abrir un men como el de la imagen.
5. Seleccionamos Cortar. El rectngulo desaparecer.

6. Seleccionamos el fotograma en el que queramos colocar el objeto (situado en la
capa donde se encuentra el texto que creamos en ejercicios anteriores).
7. Hacemos clic con el botn derecho sobre el escenario de este fotograma de destino.
8. Hacemos clic en Pegar para colocar el objeto en este fotograma o hacemos clic en
Pegar in Situ para pegar el objeto en la misma posicin en la que estaba al cortarlo
Unidad 8. Ejercicio: Crear un smbolo

Objetivo
Crear un smbolo de grfico que nos permitir coger destreza en una accin que ser bsica
en la creacin de animaciones.

1. Abre el archivo trabajo.fla con el que venimos probando cosas a lo largo del curso.
2. Seleccionamos el valo haciendo doble clic sobre l.
3. Abrimos el men Insertar Nuevo Smbolo... de la barra de mens.
Se desplegar una ventana como la de la figura.
4. En el campo Nombre introducimos el nombre de nuestro grfico, por ejemplo "Mi

Primer Smbolo".
5. Seleccionamos la opcin Grfico en el apartado Tipo. Con esto le decimos a Flash
que el nuevo smbolo ser un grfico.
6. Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico creado.
Unidad 8. Ejercicio: Modificar una

instancia
Objetivo
Comprender la diferencia entre un smbolo y una instancia de este smbolo.

1. Vamos al men Ventana Bibliotecas Comunes.
2. Seleccionamos la primera opcin del submen que aparecer (Botones). Aparecer
la librera de botones predefinidos de Flash CS5.
3. Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primera
carpeta que aparece en la lista (Arcade buttons).
Se abrir una lista con todos los smbolos contenidos en la carpeta.
4. Arrastramos el primer smbolo (arcade button - blue) a nuestra rea de trabajo.

Aparecer en el escenario el smbolo que habamos arrastrado. Esto es una instancia
del smbolo llamado arcade button - blue. Comprobmoslo.
5. Seleccionamos nuestra nueva instancia.
6. Seleccionamos la herramienta Transformacin Libre
y modificamos el tamao
de la instancia arrastrando los extremos del objeto.
7. Bien, ahora hemos modificado la instancia. Comprobemos que el smbolo sigue
intacto. Accedemos a la biblioteca de nuestro documento (Ctrl + L), ya que ahora
tambin aparece aqu el smbolo
8. Arrastramos el smbolo al escenario, creando as una segunda instancia.
Como vemos, el botn ha aparecido de nuevo, pero no con el tamao que le acabamos de
dar, sino con su tamao original. Esto sucede porque lo que hemos reducido de tamao era
tan slo una instancia del smbolo, no el smbolo mismo, y esto es lo que se ha modificado.
Por tanto podemos seguir insertando y modificando ese smbolo y cualquier otro en esta u
otra pelcula ya que estaremos insertando instancias.
Unidad 9. Ejercicio: Exportar un objeto

como mapa de bits
Objetivo
Exportar un objeto Flash como un grfico de tipo mapa de bits. En este caso, lo
exportaremos como JPG.

1 Abre el archivo trabajo.fla y selecciona el rectngulo que vamos a exportar.
2 Vamos al men Archivo Exportar Exportar Imagen...
Ahora estaremos delante de una ventana similar a la que se muestra abajo.
3 Buscamos en la pestaa Guardar en la carpeta en la que quieras guardar el archivo.

4 En el apartado Nombre de Archivo introducimos el nombre que queramos que tenga
nuestra nueva imagen.
5 Abrimos la pestaa de Tipos de archivo.

6 Buscamos entre todos los tipos el formato JPG o JPEG.
7 Pulsamos Guardar.
Y ya est exportado. Para comprobarlo accede a la carpeta en la que lo guardaste y vers
un archivo con el nombre que le diste y la extensin .jpg
Unidad 11. Ejercicio: Crear un botn con

relieve
Objetivo
Crear un botn con efecto relieve de forma rectangular tipo formulario de manera rpida y
sencilla.

1.
2.
3.
4.
Dibujamos un rectngulo en el rea de trabajo.

Seleccionamos el fondo.
Cambiamos el color de fondo del rectngulo. Por ejemplo a gris.
Con la herramienta texto escribimos el texto aulaClic en el interior del rectngulo.
Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve.

5. Seleccionamos los bordes izquierda y superior.
6. Modificamos el color de dichos bordes. Le damos el color blanco.
7. Seleccionamos ahora el borde inferior y aplicamos un color gris oscuro.
Ya va tomando relieve, ahora vamos a crear los diferentes estados.
8. Seleccionamos el botn.
9. Hacemos clic derecho sobre l y elegimos Convertir en smbolo...
10. Marcamos el Tipo botn y le damos un nombre. Pulsamos Aceptar.
11. Hacemos doble clic sobre el botn para editarlo.
12. Mediante F6 creamos fotogramas clave en cada uno de los fotogramas
correspondientes a los estados del botn.
13. Seleccionamos el fotograma Presionado.
14. Modifiquemos ahora el borde inferior y el derecho del botn aplicndole el color
blanco.
15. Finalmente seleccionemos los bordes superior e izquierdo y dmosle el color negro.
Respecto a los fotogramas Sobre y Zona activa, los dejaremos tal y como estn puesto
que no deseamos que haga nada mientras no pulsemos el botn y el rea de accin es la que
comprende nuestro rectngulo.
El resultado obtenido es el siguiente. Podemos pinchar sobre l y comprobar el efecto.
Unidad 12. Ejercicio: Crear

interpolaciones de movimiento
Objetivo
Crear un movimiento multidireccional encadenando interpolaciones de movimiento.
1. Abre un nuevo archivo ActionScript 3 y dibuja un valo (o lo que ms te agrade) en

el fotograma 1.
2. Seleccinalo y convirtelo en un Clip de Pelcula pulsando F8.
3. Situamos el Clip en el lado izquierdo del escenario.
4. Hacemos clic con el botn derecho sobre el nico fotograma existente en este
momento.
5. Seleccionamos la opcin Crear Interpolacin de movimiento.
6. Vamos al fotograma nmero 30 y pulsamos F6 para crear un fotograma clave.
Observaremos que se crea la Animacin de 30 fotogramas de duracin. En ese
mismo fotograma (el 30).
7. Desplazamos el smbolo al extremo derecho del escenario.
Ahora ya tenemos la interpolacin base, en ella hemos marcado nicamente la
posicin inicial y final del movimiento. Si lo dejramos as, el clip seguira una
lnea recta, como muestra la lnea gua.
Vamos a hacer que llegue a su origen haciendo zigzag:
8. Hacemos clic del ratn sobre el fotograma 10.
9. Desplacemos nuestro clip hacia arriba.

10. Hacemos clic sobre el fotograma 20.
11. Desplacemos nuestro clip hacia abajo.
Observa que ahora, en la lnea de tiempo, aparecen rombos en los fotogramas que
hemos cambiado la posicin. Adems, la trayectoria ahora es en zigzag
12. Ahora, crearemos trayectorias curvas. Sobre el escenario, haz clic y arrastra la gua
punteada para crear curvas.
13. Como podemos comprobar, el clip se desplaza ahora en siguiendo trayectorias
curvas pero pasando por las posiciones clave indicadas.
Unidad 12. Ejercicio: Animar texto por

bloques
Objetivo.
Crear una animacin sobre un texto separndolo en bloques de letras cuyo movimiento ser
tratado de manera independiente, dando al texto un efecto vistoso que pudiera servir como
presentacin de entrada a una web u otro tipo de pelcula.

Vamos a basarnos en el ejemplo que acabamos de ver, para tener claro nuestro objetivo.
Luego podremos extrapolarlo a cualquier otro texto. Veamos cmo conseguir esos efectos
combinando las tcnicas vistas hasta el momento.
1. Escribimos el texto en cuestin, en nuestro caso "aulaClic".
2. Seleccionamos el texto recin escrito.
3. Abrimos el panel Propiedades (con el texto seleccionado) y seleccionamos el tipo de
letra. Nosotros hemos elegido "Papyrus", pero cualquiera es vlida.
4. Accedemos al men Modificar Separar. Con esto separamos cada letra ya que de
no hacerlo Flash tratara todo el texto como un bloque y no podramos dar el efecto
a las letras.
Vamos a separar el texto en los siguientes bloques: "a", "u", "la" y "Clic".
Podramos cambiar los bloques si quisiramos dar otro efecto en concreto.
5. Seleccionamos dichos bloques y los convertimos a smbolos, dndoles un nombre
identificativo y el Tipo Grfico, ya que no los animaremos "internamente".
6. Creamos 5 nuevas capas, una por cada bloque que hemos creado.
Esto ltimo es necesario ya que si no lo hiciramos Flash aplicara el movimiento a

todo aquello que encontrara en dicha capa, ya que como hemos comentado
anteriormente, lo convertira todo a smbolo automticamente.
7. Nombramos cada una de las capas segn el bloque de texto que vaya a contener,
pero en orden inverso en el que vaya a producirse la animacin, para que el objeto
en movimiento se superponga a los que no lo estn. Esto es, la capa de ms arriba se
llamar "Clic", la siguiente "la" y as sucesivamente.
8. Hacemos clic con el botn derecho sobre el nico fotograma con elementos que
tenemos en la lnea de tiempo y en el men emergente seleccionamos Copiar
Fotogramas. A continuacin vamos pegando los fotogramas (botn derecho

Pegar Fotogramas) en todas las capas.
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:
1. "A" : Fotograma 1.
2. "U" : Fotograma 6.
3. "LA" : Fotograma 12.
4. "Clic" : Fotograma 18.
11. Seleccionamos el fotograma que ocupa cinco posiciones despus del fotograma de
cada capa y pulsamos F6 cada vez. En la capa "Clic" selecciona el fotograma 30 y
pulsa tambin F6.
12. Hacemos clic con el botn derecho en los fotogramas centrales que hay entre los
fotogramas clave y seleccionamos cada vez Crear Interpolacin Clsica.
13. Extendemos la imagen los ltimos fotogramas de cada capa hasta que ocupen el
fotograma 30 (Botn derecho Insertar Fotograma Clave).
14. Exceptuando la capa "Clic" seleccionamos el primer fotograma de cada
interpolacin y aumentamos el tamao del bloque que contiene.
15. Movemos ahora fuera del escenario el bloque "Clic".
16. An en esta capa, hacemos clic con el botn derecho sobre el fotograma 24 y
seleccionamos Insertar Fotograma Clave.
17. En este fotograma recin creado reducimos el ancho del bloque de texto y lo
colocamos junto a la ltima "a".
Y ya tenemos la animacin creada. Como vemos hemos utilizado todo tipo de tcnicas de
interpolacin, aunque todava puede complicarse ms como veremos ms adelante.
Unidad 13. Ejercicio: Consejos de forma

Objetivo.
Crear una animacin como la que puedes ver a continuacin.
Necesitaremos consejos de forma para que se realice correctamente.

1 Utiliza la Herramienta Lpiz para crear la flecha y luego el Bote de pintura para crear el
degradado.
2 Pulsa con el botn derecho sobre el fotograma que contiene la flecha y elige la opcin
Crear Interpolacin de Forma.
Ve al fotograma 20 y pulsa F6.
Invierte la imagen del fotograma 20 para que adopte su posicin final mediante Modificar
Transformar Voltear Horizontalmente y colcalo de manera que su punta y la de la
flecha original coincidan.
Si ejecutramos la animacin ahora no conseguiramos el efecto deseado.

3 En el fotograma 1, activa la opcin Modificar Forma Aadir Consejo de forma para
aadir un nuevo consejo de forma. Colcalo en una de las esquinas de la flecha y ve al
fotograma 20 para colocar el consejo creado en la esquina que se corresponda con la

anterior.
Haz esto ltimo para todas las esquinas. De manera que quede como la figura de arriba.
Unidad 14. Ejercicio: Acelerar movimiento

Objetivo
Comprender el efecto de aceleracin sobre una interpolacin de movimiento.

Primero vamos a crear la interpolacin sobre la que aplicaremos el efecto.
1.
2.
3.
4.
5.
6.
7.
Crea un valo en el fotograma 1.

Convirtelo en un clip de pelcula pulsando la tecla F8.
Pulsa el botn derecho del ratn sobre el fotograma que contiene el clip de pelcula
Selecciona Crear interpolacin de Movimiento del men emergente.
Selecciona el fotograma 20 y pulsa F6.
Desplaza el Clip de Pelcula de ese fotograma a la parte derecha del rea de trabajo.
Pulsa Intro para ver la animacin sin salir del entorno de trabajo.
De momento hemos logrado una animacin que se comporta como la siguiente:
8. Ahora selecciona el fotograma 1 con el botn derecho y selecciona Propiedades

para abrir el panel Propiedades del fotograma. (si no est ya abierto)
9. Introduce un 100 en la casilla Aceleracin (fuera), para hacer que acelere al
principio y vaya frenando poco a poco.
10. Comprueba que el resultado se comporta como ste:
11. Introduce ahora un -100 en la casilla Aceleracin (dentro), para hacer que aumente
progresivamente su velocidad.
El resultado sera el siguiente:
Ahora ya hemos comprobado los distintos efectos de aceleracin. Comprueba el mismo

ejercicio con otros valores de aceleracin para observar su efecto.
Unidad 15. Ejercicio: Generar y publicar

pelculas
Objetivo
Aprender a publicar una pelcula Flash como archivo SWF independiente, as como
configurar las opciones de publicacin.

1. Accedemos al men Archivo Abrir y abrimos el archivo publicacion.fla que se
encuentra en la carpeta ejercicios que debes de haber descargado con el curso.
2. Abrimos la biblioteca del documento mediante Ventana Biblioteca.
3. Vamos al men Archivo Configuracin de publicacin para abrir la ventana
Configuracin de Publicacin.
4. Abre la pestaa Formatos y desactiva la casilla HTML, porque no vamos a utilizar
la pelcula va web.
5. Abre la pestaa Flash.
6. En la barra deslizante Calidad JPEG ponemos el valor 0 para reducir la calidad al
mnimo.
7. Vamos a protegerlo para que nadie lo pueda importar.
Marcamos la casilla de verificacin Proteger frente a Importacin e introducimos en
el campo Contrasea la palabra de paso que deseemos.
8. Pulsamos el botn Publicar.
9. Accede al directorio de Flash donde se ha exportado el archivo SWF, que ser el
mismo donde estaba el original, y ejectalo.
Comprueba que la calidad de las imgenes no es buena.
10. Abrimos ahora el men Archivo Importar y seleccionamos el archivo que
acabamos de publicar.
11. Comprueba que nos pide la clave para poder hacerlo.
Ahora tenemos una pelcula que no podrn importar y cuyo espacio en memoria ser menor
debido al menor tamao de sus bitmaps.
Unidad 16. Ejercicio: Cdigo en el panel

Acciones
1. Sobre un nuevo archivo de Flash ActionScript 3 dibuja un rectngulo y convirtelo
en un botn pulsando la tecla F8.
2. En el panel de propiedades, asgnale botonInicio como nombre de instancia.
3. Crea una nueva capa para poder insertar nuestro Cdigo de ActionScript.
4. Selecciona el fotograma 1 y abre el panel Acciones mediante Ventana Acciones.
5. Ahora escribe en el panel de ActionScript lo siguiente:
6. //Detenemos la pelcula
7. this.stop();
8. //Definimos la funcin que reproduce la pelcula
9. function reproducirPelicula(event:MouseEvent):void {
10.
this.play();
11. }
12. //Indicamos que al hacer clic sobre el botn, se llame a la
13. //funcin anterior
botonInicio.addEventListener(MouseEvent.CLICK, reproducirPelicula);
(botonInicio es el nombre de instancia del botn y this es el nombre especial, que

significa el objeto actual).
14. En este momento has hecho que la pelcula se detenga al llegar al fotograma 1, es
decir, nada ms empezar, y comience cuando se pulse el botn.
15. Para verlo, en la capa del rectngulo crea un fotograma clave (F6) sobre el
fotograma 2.
16. Mueve el rectngulo.
17. En el panel de acciones, sin tener el rectngulo seleccionado, escribe stop();.
18. Si pruebas la pelcula (Ctrl + Intro), vers que se detiene. Al hacer clic sobre el
botn, avanzas hasta el fotograma 2 donde se vuelve a detener. Si vuelves a hacer
clic, vuelves al fotograma 1 y se detiene de nuevo.
Unidad 18. Ejercicio: Crear una pelcula

cargando archivos
Objetivo.
Crearemos una pelcula parecida a esta:
Como siempre, utilizaremos el tipo de documento ActionScript 3.0.

Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos los mismos
pasos:
1.
2.
3.
4.
Haz clic en el botn Nuevo Smbolo al pie de la Biblioteca.

Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de pelcula.
Dibuja la forma que quieras mostrar en el escenario.
Con ayuda del panel Alinear (Ctrl + K) coloca la forma centrada con respecto al
punto de referencia (mira el ejemplo).
5. Haz clic en Escena 1 en la lnea de tiempo para volver a la pelcula principal.

6. Arrastra el smbolo que acabamos de crear y adelo al Escenario.
7. Dale un nombre de instancia significativo al cual nos referiremos ms tarde, en
nuestro ejemplo hemos usado estrella.
8. Crea una nueva capa y aade la siguiente lnea en el Panel Acciones para el
fotograma 1 de la pelcula principal:
?
1
estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
2function arrastrar(event):void { //Nombre de la nuestra funcin
3
estrella.startDrag();
//Nombre del smbolo
4}
5
6estrella.addEventListener(MouseEvent.MOUSE_UP,soltar);
7function soltar(event):void { //Nombre de la nuestra funcin
estrella.stopDrag();
//Nombre del smbolo
8}
9
Este cdigo hace que al pulsar el ratn, se comience a arrastrar el elemento, y al
soltarlo deje de hacerlo.
9. Guarda el documento con el nombre estrella, publica la pelcula desde Archivo
Publicar, y cirralo.
10. Repite estos pasos para cada una de las formas que quieras aadir.
Ahora pasaremos a crear la pelcula principal.
1. Abre un documento en blanco.
2. Dibuja un rectngulo y dale las dimensiones del documento utilizando el botn

del Panel Alinear. Puedes hacer que tome un mapa de bits como fondo
seleccionando Mapa de bits en el desplegable Tipo del Panel Color.
3. Ahora aadiremos los botones que utilizaremos. Nosotros hemos importado la
biblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz
clic en Archivo Importar Abrir biblioteca externa.
4. Seleccionar los archivos que quieras abrir y arrastra el smbolo al Escenario. En
nuestro caso, comenzamos por estrella.fla.
5. Redimensinalo con la herramienta Transformacin Libre
.
6. En el panel de Propiedades, le damos el nombre a la instancia. En nuestro ejemplo
la hemos llamado btn_mostrarEstrella por ser el botn que mostrar la estrella.
7. Tambin en el panel propiedades, especificamos el tipo Botn. Lo hacemos
nicamente para que el cursor cambie a la mano al pasar sobre l.
8. Arrastra otro smbolo y colcalo al pie del Escenario (este ser el que har que rote
el elemento).
9. Redimensinalo si lo crees necesario, dale un nombre de instancia y convirtelo a
botn. Nosotros lo hemos llamado btn_rotarEstrella.
10. Repite estos pasos para cada una de las formas que hayas creado, utilizando los
nombres de instancia apropiados.
11. Una vez ya estn todos los botones en el Escenario pasaremos a escribir el cdigo
asociado. Para ver cmo hacerlo, vamos a cargarlo los archivos publicados (swf)
desde el cdigo.
12. Crea una nueva capa pulsando el botn Insertar Capa
.
13. En el fotograma 1 de la nueva capa escribe lo siguiente en el Panel Acciones, que
afectar al smbolo estrella:
?
1
2
3
4
var estrella:Loader = new Loader();//Utilizamos un Loader para

cargar archivos
estrella.load(new URLRequest("estrella.swf"));//Indicamos la ruta
del archivo
var estrellaMC:MovieClip; //Un objeto MovieClip que ser la
estrella
5 estrella.contentLoaderInfo.addEventListener(Event.COMPLETE,
6 insertarEstrella);
//Utilizamos este evento para asegurarnos de que se ha cargado
7 completamente
8 //antes de agregarlo a la escena
9 function insertarEstrella(e:Event):void {
10estrellaMC = e.target.content; //Almacenamos el elemento que
11produce el evento
//en nuestro movie clip
12estrellaMC.visible = false; //Lo ocultamos para que no se vea por
13defecto
14estrellaMC.x=100;
15estrellaMC.y=80; //Le damos la posicin inicial que queramos
addChild(estrellaMC) as MovieClip;//Aadimos el archivo cargado a
16la escena
17
//An no se ver porque visible=false
18}
19
20btn_mostrarEstrella.addEventListener(MouseEvent.MOUSE_UP,
21mostrarOcultarEstrella);
//Detectamos cuando se pulsa el botn para mostrar/ocultar el
22elemento
23function mostrarOcultarEstrella(e:Event):void {
estrellaMC.visible=! estrellaMC.visible;
24
//Al negar una propiedad booleana como sta, la invertimos.
//por lo que cada al pulsar el botn se mostrar si est
oculta o
//o se ocultar si est visible
}
14. Guarda el proyecto y prubalo (Control Probar pelcula) para ver que funciona.
15. Ahora escribiremos el cdigo necesario para que al pulsar el otro botn
(btn_rotarEstrella) el elemento gire:
?
btn_rotarEstrella.addEventListener(MouseEvent.CLICK,
1girarEstrella);
2function girarEstrella(event):void {
//Para que gire, aumentamos la propiedad rotation
3
estrellaMC.getChildAt(0).rotation+=15;
4
//Utilizamos getChildAt porque en nuestro caso no queremos que
5rote todo
6
//el SWF, slo el elemento que pusimos dentro como un smbolo,
7que al ser
//el nico hijo, est en la posicin 0
8
}
Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto en

cuestin slo es necesario escribir delante de la propiedad la variable que lo
contiene. Definimos la funcin que al hacer clic girar nuestro objeto.
16. Repite estos pasos para cada uno de los botones. Recuerda escribir bien los nombres
de instancia y los nombre de funciones.
17. Una vez terminado prueba la pelcula desde Control Probar pelcula.
Unidad 20. Ejercicio: Carga y

modificacin de filtros
Objetivo
Cargar filtros mediante ActionScript dndoles las propiedades que queramos.
Al final conseguiremos una pelcula como este ejemplo:

1. Abre el archivo pez.fla que encontrars en la carpeta ejercicios/pez del curso,
observa que tanto los campos del formulario como el clip de pelcula ya tienen un
nombre de instancia asignado.
2. Abre el Panel Acciones desde Ventana Acciones o pulsando la tecla F9.
3. Elimina la lnea que dice
?
1//cdigo para aadir el filtro
y escribe lo siguiente en su lugar:
?
1import flash.filters.DropShadowFilter;
Esto har que el filtro se importe a la pelcula. Normalmente no es necesario porque
trabajamos en el panel de acciones, pero si lo necesitamos si trabajamos, por
ejempolo, en un archivo as externo.
4. Despues de esto escribe:
?
1var sombra:DropShadowFilter = new DropShadowFilter();
Hemos creado una variable llamada sombra que es un filtro de Sombra.
5. Como tenemos que asociar el cambio de efecto al botn aplicar, creamos la funcin
que controla al evento:
?
1btn_aplicar.addEventListener(MouseEvent.CLICK, cambiarSombra);
2function cambiarSombra(event):void {
3
4}
6. Luego accederemos a las propiedades de sombra y le daremos los valores que hay
en los campos del formulario. Todo esto, dentro de la funcin que se ejecutar al
pusar el botn:
?
1
2
3
4
5
6
7
8
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.selected;
sombra.knockout = knockout_chk.selected;
9 sombra.hideObject = hideObject_chk.selected;
10
11
7. Finalmente asociamos el filtro sombra que hemos creado a la propiedad filters del
clip, tambin dentro de la funcin:
?
1pez.filters = [sombra];
Hemos creado una pelcula donde podemos cambiar las propiedades de un filtro
dinmicamente.
Unidad 21. Ejercicio: Vdeo con Puntos de

Referencia
1. Haz clic en Archivo Importar Importar vdeo.
2. En el dilogo, en la parte inferior, encontrars el botn Iniciar Adobe Media
Encoder.
3. Se abrir as el dilogo inicial de Adobe Media Encoder.
4. Aadiremos el vdeo al que queremos insertar los puntos de referencia, es preferible

que el vdeo est en formato .flv o .f4v. Si utilizamos otros formatos, sern
convertidos, si Flash los reconoce. Puedes utilizar el vdeo llamado tux.flv que
encontrars en la carpeta ejercicios\puntosreferencia.
5. Una vez aadido hacemos clic en el botn Ajustes.
6. Ahora ya podemos insertar nuestros puntos de referencia en el hueco que aparece

debajo de la previsualizacin del vdeo.
7. Debajo de la previsualizacin del vdeo encontramos un listado con los puntos de

seal incluidos.
8. Aadiremos un punto de referencia al principio del vdeo. Haz clic en el botn
.
9. Dale el nombre de inicio y selecciona Navegacin en el desplegable Tipo.
10. Ahora arrastraremos el cabezal hasta el principio de la primera carrera:

11. Ser en el segundo 07.359, puedes utilizar las flechas izquierda y derecha para
ajustar el tiempo.
12. Pulsa el botn
de nuevo para crear otro punto de referencia, le daremos el
nombre de carrera1 y seleccionaremos Navegacin.
13. Desplaza el cabezal al segundo 07.360.
14. Crea un punto de referencia pulsando el botn
y dale el nombre de carrera1inicio
y selecciona Evento en Tipo.
15. Ahora aadiremos un parmetro, haz clic en el botn
de la lista de debajo
(Parmetros).
16. Dale el nombre de fotograma y el valor ready.
17. Desplzate hasta el segundo 42.280 y crea otro punto de referencia llamado
carrera1fin de Tipo Evento.
18. Dale un parmetro pulsando el botn
en la lista de abajo, y dale el nombre
fotograma y el valor win.
19. Desplzate hasta el segundo 58.159 e inserta otro punto de referencia. Llmalo
carrera2 y dale Tipo Navegacin.
20. Cambia el cabezal a la posicin 58.160 y crea un punto de referencia llamado
carrera2inicio de Tipo Evento.
21. Dale un parmetro llamado fotograma y con valor ready.
22. Desplaza el cabezal al segundo 1:34.600, crea all un ltimo punto de referencia.
23. Dale el nombre carrera2fin y el Tipo Evento.
24. Crea un parmetro para este punto de referencia (pulsando el botn
), llmalo
fotograma y dale el valor lose.
25. Ya hemos terminado, pulsamos Aceptar para volver a la pantalla inicial.
26. Solo nos queda pulsar en Iniciar Cola, esto guardar nuestro vdeo con los puntos de
referencia ya insertados en l.
27. Ahora buscamos el vdeo que acabamos de crear en nuestra pantalla de Flash, y
continuamos importndolo.
Hemos importado un vdeo preparado para navegar por l y que nos pasar parmetros en
determinados puntos.
Unidad 22. Ejercicio: Rotacin

1. Abre el archivo movimiento_rotacion.fla que encontrars en la carpeta
ejercicios/movimiento_rotacion.
2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre el
Panel Acciones (Ventana Acciones o pulsando la tecla F9).
3. Escribe el siguiente fragmento de cdigo:
?
1 var izquierda:Boolean = false;
2 var derecha:Boolean = false;
3 miClip.x = 30;
4
5
6 miClip.addEventListener(MouseEvent.CLICK,rotar);
7 function rotar(event:MouseEvent):void{
8
if (miClip.x <= 30) {
9
miClip.rotation = 10;
10
derecha = true;
11}
12 if (miClip.x >= 515) {
13
miClip.rotation = -10;
14
izquierda = true;
15 }
16}
17miClip.addEventListener(Event.ENTER_FRAME,para)
18function para(event:Event):void{
19 if (derecha) {
20
if (miClip.x < 515) {
21
miClip.x = miClip.x + 6;
22
}
23
else {
24
25
derecha = false;
26
}
27 }
28 if (izquierda) {
29
if (miClip.x > 30) {
30
miClip.x = miClip.x - 6;
31
}
32
else {
33
34
izquierda = false;
35
}
36 }
37}
4. Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter.
Como puedes observar el cdigo es idntico al anterior pero cambiando las sentencias de
salto de fotograma por cambios de rotacin en el clip.
Unidad 22. Ejercicio: Agregar objetos

dinmicamente
1.
2.
3.
4.
Abre el archivo attach.fla que encontrars en la carpeta ejercicios/attach del curso.

Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre l.
Selecciona Propiedades - botn Avanzado.
Se abrir una ventana donde debers hacer clic en la opcin Exportar para
ActionScript.
5. Deja estrella en el campo clase y pulsa OK.
6. Selecciona el primer fotograma de la Capa 1 y escribe el siguiente fragmento de
cdigo en el Panel Acciones (tecla F9):
?
1var contenedor:Sprite=new Sprite; //Creamos un contenedor
2addChild(contenedor); //Y lo mostramos en la escena
Con esto creamos una objeto contenedor Sprite para que este contenga las estrellas.
Usaremos frecuentemente contenedor.numChildren para saber cuntas estrellas
se muestran.
7. Ahora para el botn de aadir estrellas (btn_aadir), aadiremos el siguiente codigo:
?
1
2
3
4
5
6
7
btn_aadir.addEventListener(MouseEvent.CLICK, aadir);
function aadir(event):void {
if (contenedor.numChildren<30) { // si el contenedor contiene
menos de 30 estrellas
//podemos aadir ms
var miEstrella:estrella=new estrella; // creamos una estrella
en miEstrella
var posY:Number; //creamos una variable para calcular la
posicin Y
var posX:Number; // creamos otra variable para calcular la

8
posicin
X
9
// calculamos la posicion "x" e "y" en relacin con el nm.
10de estrellas
11
posY=Math.floor(contenedor.numChildren/6)*miEstrella.height;
posX=(contenedor.numChildren%6)*miEstrella.width;
12
miEstrella.x=posX; // asignamos las variables de las
13
posiciones a las coordenadas
14
miEstrella.y=posY; // de posicin de la estrella
15
contenedor.addChild(miEstrella); // por ultimo aadimos la
estrella al contenedor
}
}
Observa como calculamos las posiciones x e y:

Para la posicin Y, dividimos contenedor.numChildren (nmero de hijos que
contiene el contenedor) entre 6, que ser el nmero mximo de estrellas que
ponemos en una fila, lo que nos indica en qu fila tendr que ir la nueva estrella. El
resultado lo multiplicamos por miEstrella.height (alto de la estrella), y esa ser la
distancia con la parte superior (.y).
Para la posicin X, calculamos el resto (%) de numChildren entre 6, lo que nos
indica las estrellas que hay en la fila. Lo multiplicamos por miEstrella.width (ancho
de la estrella), para calcular la distancia con el lado izquierdo (.x).
8. Ahora para el botn de quitar estrellas aadimos el siguiente cdigo:
?
1btn_quitar.addEventListener(MouseEvent.CLICK, quitar);
function quitar(event) {
2 if (contenedor.numChildren) { // si hay ms de 0 hijos devolvera
3el valor true
// quitamos siempre numChildren - 1, que es el ltimo elemento
4
aadido
5
contenedor.removeChildAt(contenedor.numChildren-1);
6 }
7}
El mtodo contenedor.removeChildAt borra el elemento con el ndice dado. Como
queremos borrar el ltimo ndice, lo calculamos con contenedor.numChildren-1.
Restamos uno, porque el ndice es en base 0. Es decir, si hay dos elementos (ndices
0 y 1), numChildren devolver 2.
Ya hemos creado una pelcula que aade un nmero concreto de elementos
automatizadamente.
Unidad 22. Ejercicio: Arrastre y

orientacin de objetos
Objetivo:
Vamos a crear la siguiente pelcula:

1. Abre el archivo trigonometria.fla que encontrars en la carpeta
ejercicios/trigonometria del curso. En l, tenemos dos objetos con los nombre de
instancia pelota y nave.
2. Crea una nueva capa para aadir el cdigo.
3. Aadiremos primero el cdigo para hacer que la pelota se pueda arrastrar y colocar
con el ratn. Selecciona el primer fotograma de la nueva capa y abre el Panel
Acciones (tecla F9). Escribe el siguiente fragmento de cdigo:
?
1pelota.addEventListener(MouseEvent.MOUSE_DOWN, arrastrarPelota);
2function arrastrarPelota(event:MouseEvent):void { //al pulsar el
3botn
pelota.startDrag(); //Comenzamos a arrastrar
4}
5
6stage.addEventListener(MouseEvent.MOUSE_UP, soltarPelota);
7function soltarPelota(event:MouseEvent):void { //Al soltarlo
pelota.stopDrag(); //Dejamos de arrastrar
8
}
9
4. Ahora haremos que la nave se oriente hacia la pelota en cada momento (realmente
lo que haremos ser asociar el cdigo al evento onEnterFrame para que se refresque
a cada vuelta al fotograma). Abre el Panel Acciones y escribe los siguiente:
?
1nave.addEventListener(Event.ENTER_FRAME, orientarHaciaPelota);
2function orientarHaciaPelota(event):void {
//A partir de las coordenadas de cada objeto, calculamos el
3ngulo
4
var radianes:Number = Math.atan2((pelota.y-nave.y), (pelota.xnave.x));
5
//Lo convertimos se radianes a grados
6
var grados:Number=Math.round(radianes*180/Math.PI);
7
//Y rotamos la nave esos grados
8
nave.rotation=grados;
9}
Lo que hemos hecho en un principio es, como vimos en la teora, es calcular el
ngulo que hay entre las coordenadas de la pelota y las de la nave. El ngulo
obtenido, convertido en grados, ser lo que hay que rotar (rotation) la nave para que
apunte a la pelota.
Nota: Observa que inicialmente la nave est orientada a la derecha, as que no har falta
solventar el desfase de ngulo.
Unidad 22. Ejercicio: Colisin y

Movimiento
Colisin y Movimiento
Reproduciremos la pelcula que vimos en la teora:

1. Abre el archivo colision.fla que encontrars en la carpeta ejercicios/colision del
curso.
En l encontrars dos elementos: miClip que ser el cuadradito que se desplazar, y
fondo, que delimita el rea por el que se puede desplazar.
2. Selecciona el primer fotograma y abre el Panel Acciones, escribe en l lo siguiente:

//definimos las variables que vamos a utilizar
//Variables que indican la direccin del movimiento
var izquierda:Boolean=false;
var derecha:Boolean=false;
var subir:Boolean=false;
var bajar:Boolean=false;
var velocidad:Number=1;//Espacio que se desplazar
//Al pulsar una tecla...
stage.addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);
//Averiguamos la tecla pulsada para decidir la direccin
function capturarTeclado(tecla:KeyboardEvent):void {
switch (tecla.keyCode) {
case Keyboard.RIGHT :
derecha=true;
break;
case Keyboard.LEFT :
izquierda=true;
break;
case Keyboard.UP :
subir=true;
break;
case Keyboard.DOWN :
bajar=true;
break;
}
}
//Al soltar una tecla
stage.addEventListener(KeyboardEvent.KEY_UP, parar);
//Anulamso el movimiento en direccin de la tecla
function parar(tecla:KeyboardEvent):void {
switch (tecla.keyCode) {
case Keyboard.RIGHT :
derecha=false;
break;
case Keyboard.LEFT :
izquierda=false;
break;
case Keyboard.UP :
subir=false;
break;
case Keyboard.DOWN :
bajar=false;
break;
}
}
Este cdigo se parece mucho al que vimos en la teora. Lo nico que hacemos es
obtener qu tecla se ha pulsado y en funcin de la direccin, activamos una variable
booleana que indica que se ha de mover el objeto en esa direccin. Cuando se suelte
la tecla, hacemos lo mismo para desactivar la variable.
3. Vamos ahora con el movimiento. Lo haremos en el evento "enterFrame" del objeto
que se mueve. Aade el siguiente cdigo:
?
//En el enterFrame del clip, comprobamos la posicin futura, y si
no hay impacto, movemos
miClip.addEventListener(Event.ENTER_FRAME, mover);
function mover(event):void {
//Utilizamos un objeto rectngulo para que nos sea ms cmodo
acceder a las propiedades
var rect:Rectangle= miClip.getBounds(stage);
if (bajar) { //Comprobamos la colisin abajo - izquierda y abajo
- derecha, aumentando abajo
if (!(fondo.hitTestPoint(rect.left, rect.bottom+velocidad,
true) || fondo.hitTestPoint(rect.right, rect.bottom+velocidad,
true))) {
miClip.y+=velocidad; //Si no hay colisin, cambiamos la
posicin del objeto.
}
}
if (subir) { //Comprobamos la colisin izquierda - arriba y
derecha - arriba, aumentando arriba
if (!(fondo.hitTestPoint(rect.left, rect.top-velocidad,
true) || fondo.hitTestPoint(rect.right, rect.top-velocidad, true)))
{
miClip.y-=velocidad;
}
}
if (izquierda) { //Comprobamos la colisin izquierda - arriba e
izquierda - abajo, aumentando izquierda
if (!(fondo.hitTestPoint(rect.left-velocidad, rect.top,
true) || fondo.hitTestPoint(rect.left-velocidad, rect.bottom,
true))) {
miClip.x-=velocidad;
}
}
if (derecha) {//Comprobamos la colisin derecha - arriba y
derecha - abajo, aumentando derecha
if (!(fondo.hitTestPoint(rect.right+velocidad, rect.top,
true) || fondo.hitTestPoint(rect.right+velocidad, rect.bottom,
true))) {
miClip.x+=velocidad;
}
}
}
Parece un poco complicado pero en esencia es ms largo, pero sencillo. Para cada uno de
los movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce
colisin con el objeto miClip y el clip fondo.

Pero no bastar con hacerlo slo de una esquina, veamos un ejemplo para verlos con ms
claridad:
Como ves en la imagen, deberemos ver si se producen dos colisiones. En el movimiento

hacia abajo una ser la de la esquina inferior izquierda y la otra de la esquina inferior
derecha. Si por ejemplo, no evalusemos el choque con la esquina inferior izquierda e
intentsemos realizar un movimiento hacia abajo, ste se realizara! Y en definitiva es lo
que queremos evitar.
Hemos empleado un objeto Rectngulo al que le hemos dados las medidas del objeto para
que nos sea ms cmodo trabajar. Por ejemplo, para acceder a la parte superior, tendramos
que escribir miClip.getBounds(fondo).top cada vez, mientras que as solo ponemos
rect.top.
Observa tambin que para realizar el hitTestPoint hemos tenido en cuenta la posicin que
adoptar el objeto despus del movimiento (sumndole la velocidad, o lo que es lo mismo,
el nmero de pxeles que se desplaza el objeto a cada pulsacin). Adems, le hemos
enviado un tercer parmetro true para que tenga en cuenta la forma del objeto (del fondo).
Unidad 22. Ejercicio: Crear una clase en

ActionScript (I)
Objetivo
Vamos a crear la siguiente animacin Flash:
Ejercicio
1. Abre el archivo bolas.fla que encontrars en la carpeta ejercicios\bolas\.
2. Vamos a exportar el smbolo de la bola para AS. En la biblioteca, haz clic derecho
sobre el smbolo bola y elige Propiedades.
3. Marca la opcin Exportar para ActionScript, y en el nombre de la Clase asgnale
ClaseBola.
4. Vamos a aadir bolas con el botn btn_agregar_bolas. Las mostramos utilizando un
contenedor. Escribe el siguiente cdigo en el primer fotograma, en el panel
Acciones:
?
var miContenedor:Sprite = new Sprite;//Aqu mostraremos las bolas
addChild(miContenedor); // Lo agregamos a la escena
btn_agregar_bola.addEventListener(MouseEvent.CLICK, agregarBola);
function agregarBola(event):void {//Funcin que aade bolas
var bola:ClaseBola = new ClaseBola(); //Creamos un nuevo objeto
ClaseBola
miContenedor.addChild(bola); //Y lo agregamos al contenedor
}
Puedes probar el cdigo. Comprobars que se agregan bolas, pero siempre en la

esquina superior izquierda.
5. Vamos a aadir funcionalidad a la clase de las bolas. En el men Archivo, pulsa en
Nuevo y elige Clase ActionScript 3.0. Pulsa Aceptar.
6. Nos pedir que le demos un nombre a la clase, que tendr que ser CaseBola, el
nombre de clase que le dimos a nuestro smbolo. Al aceptarlo, se crear un cdigo
como el siguiente:
?
package {
public class ClaseBola {
public function ClaseBola() {
// constructor code
}
}
}
7. De momento, esta clase no tiene ningn mtodo ni propiedad, podemos decir que no
hace nada. No vamos a crear la clase desde la anda. Para empezar lo que queremos
hacer es aadir funcionalidades a la clase MovieClip, pero tener tambin sus clases
y mtodos. Esto lo conseguimos haciendo que nuestra clase extienda (o ample) a la
clase predefinida de ActionScript MovieClip. Modifica el cdigo para que quede
as:
?
package {
//Aqu importaremos lo que nos haga falta
import flash.display.MovieClip;
public class ClaseBola extends flash.display.MovieClip {
public function ClaseBola() {
// constructor code
}
}
}
Observa que hemos dado a la clase el mismo nombre (ClaseBola) que indicamos al
exportar el smbolo a AS. Adems hemos indicado que la nueva clase extender
(extends) a la clase MovieClip. Esto quiere decir que nuestra clase tendr todos los
mtodos y propiedades de los MovieClip, adems de los que nosotros creemos.
Como emplearemos la clase MovieClip, debemos de importarla.
8. Guarda el archivo como ClaseBola.as, en la misma carpeta que el archivo .fla. Es
muy importante guardarlo con el nombre de la clase.
Ahora, podras volver a probar la pelcula, pero no vers cambios. Como an no
hemos definido mtodos propios, nuestra case hace lo mismo que la clase a la que
extiende.
Unidad 22. Ejercicio: Crear una clase en

ActionScript (II)
9. Vamos a implementar el cdigo de la clase. Escribe el siguiente cdigo:
package {
//Aqu importaremos lo que nos haga falta
import flash.geom.Rectangle;//Como usaremos un Rectangle, hay
//que importarlo
public class ClaseBola extends flash.display.MovieClip {
//PROPIEDADES
var angulo:Number;//ngulo inicial, ser aleatorio
private var direccionX:Number = 1; //Cambiando el signo, podremos
private var direccionY:Number = 1; //invertir la direccin
private var limites:Rectangle; //El rea en el que rebotan las
pelotas
var velocidadMaxima:Number = 45; //Mx. velocidad a la que podemos
acelerar
public static var velocidadBase:Number = 10; // Velocidad inicial
//MTODOS
public function ClaseBola(miFondo:MovieClip) {
//Mtodo constructor. Se ejecutar con el new
limites = miFondo.getBounds(stage); //Tomamos las dimensiones
del fondo
angulo = num_aleatorio(0,180); //Calcualmos un ngulo
aleatorio
angulo = Math.PI/180*angulo; //Y lo pasamos a radianes
this.y = limites.top+limites.height/2; //Calculamos la
posciin inicial
this.x = limites.left+limites.width/2; //centrada en el fondo
//Y utilizamos el evento 'enterFrame' para mover la pelota
this.addEventListener(Event.ENTER_FRAME, moverPelota);
}
public function moverPelota(event) {
//Impedimos que se pueda superar la velocidad mxima
if (velocidadBase > velocidadMaxima) {
velocidadBase = velocidadMaxima;
}
var futuraPosicion:Number;
//Calculamos la posicin Y futura. Y si se sale por arriba o

aabajo,
//lo invertimos
futuraPosicion =
this.y+Math.sin(angulo)*direccionY*velocidadBase;
if (futuraPosicion<limites.top+20 ||
futuraPosicion>limites.bottom-20) {
direccionY*=-1;
}
//Calculamos la posicin Y futura. Y si se sale por arriba o
abajo,
//lo invertimos
futuraPosicion =
this.x+Math.cos(angulo)*direccionX*velocidadBase;
if (futuraPosicion<limites.left+20 ||
futuraPosicion>limites.right-20) {
direccionX*=-1;
}
//Movemos la pelota
this.y+=Math.sin(angulo)*velocidadBase*direccionY;
this.x+=Math.cos(angulo)*velocidadBase*direccionX;
}
function num_aleatorio(min:Number, max:Number):Number {
return (Math.floor(Math.random()*(max-min+1))+min);
}
}
}
Hemos empleado tres mtodos: el llamado mtodo constructor, que para que sea tal debe
de tener el mismo nombre que la clase, se encarga de iniciar las propiedades: calcula de
forma aleatoria el ngulo, y se encarga de asignar el movimiento en el evento enterFrame.
El segundo mtodo, moverPelota, bsicamente se encarga de calcular si al mover la pelota,
esta saldr de los lmites horizontales o verticales, y de ser as, invierte la direccin en ese
eje.
El ltimo mtodo ya lo conocemos. num_aleatorio se encarga de calcular un nmero
aleatorio dentro de un rango.
Guarda el archivo de la clase antes de intentar probarlo.
Tenemos que realizar un cambio en el archivo bolas.fla. Volvemos a la pelcula, al
cdigo del fotograma 1. Cambia el cdigo que crea las bolas (var bola:ClaseBola=new
ClaseBola();) por var bola:ClaseBola=new ClaseBola(fondo); ya que en la
definicin de la calse hemos especificado que al crear el objeto le pasaremos como
argumento el MovieClip que hace de fondo, para que tome sus dimensiones. fondo es el
nombre de la instancia del smbolo.
Prubalos pulsando Ctrl + Intro. Observa cmo puedes aadir bolas, y rebotan por las
paredes.
Ahora vamos a eliminar las bolas. Crea el siguiente mtodo en la clase ClaseBola:
?
public function borrar() {
//Antes de borrar, quitamos sus eventos
this.removeEventListener(Event.ENTER_FRAME, moverPelota);
//reproducimos la animacin
this.gotoAndPlay(2);
//al finalizar la animacin, lanzar el evento 'borrame'
//El cdigo que lo hace est en la lnea de tiempo del clip
}
Lo que hace este mtodo es quitar el evento enterFrame, ya que es muy recomendable
quitar sus eventos antes de eliminar un elemento. Despus, va al segundo fotograma de la
bola, lo que inicia una animacin que la hace desaparecer. Cuando llegue al ltimo
fotograma, lanzar el evento 'borrame', porque as est programado en el smbolo bola.
Ahora, slo tenemos que llamar a este mtodo al pulsar el botn btn_quitar_bola. Lo
haremos sobre la ltima bola aadida al contenedor. En la pelcula, en la capa Acciones
escribe el cdigo:
?
btn_quitar_bola.addEventListener(MouseEvent.CLICK, quitarBola);
function quitarBola(event):void {
if (miContenedor.numChildren) { //Si hay bolas quitamos una
//Convertimos el ltimo elemento en un objeto ClasBola y llamamos
a su
//mtodo borrar()
ClaseBola(miContenedor.getChildAt(miContenedor.numChildren1)).borrar();
}
}
Observa que empleamos ClaseBola(objeto) para convertir un objeto genrico a nuestra
clase y que pueda utilizar sus mtodos.

Tenemos que estar a la escucha del evento borrame, y borrar el elemento que los
produzca. Escribe el siguiente cdigo:
?
1addEventListener('borrame', borrarBola); //Cuando se produzca 'borrame'
borrarBola(e:Event):void { //Eliminamos el objeto que lo
2function
produzca
3
miContenedor.removeChild(ClaseBola(e.target));
4}
Ahora, aadiremos el cdigo de los botones que nos permiten acelerar y decelerar las
bolas:
?
btn_aumentar_velocidad.addEventListener(MouseEvent.CLICK,
aumentarVelocidad);
function aumentarVelocidad(event):void {
ClaseBola.velocidadBase*=1.1; //Aumentamos la velocidad un 10%
}
btn_reducir_velocidad.addEventListener(MouseEvent.CLICK,
reducirVelocidad);
function reducirVelocidad(event):void {
ClaseBola.velocidadBase*=0.9; // Reducimos la velocidad un 10%
}
Al crear la clase, hemos declarado la propiedad velocidadBase como public static var
velocidadBase:Number=10;. Declararla como public indica que podemos acceder a ella.
En cambio, declararla como private limita su uso a slo dentro de la clase, no podemos
acceder a ella poniendo objeto.propiedad. Normalmente las propiedades son independientes
para cada objeto, salvo si, como en este caso, la declaramos como static. Esto hace que si la
cambiamos, cambie para todos los objetos creados de la clase, y que podamos utilizarla
directamente con en el nombre de la clase, sin tener que crear un objeto especfico.
Guarda los archivos y prubalo.
Unidad 23. Ejercicio: Movimiento en

espiral
Objetivo
Reproduciremos la pelcula que puedes ver a continuacin:

1.
2.
3.
4.
Abre el archivo espiral.fla que encontrars en la carpeta ejercicios/espiral del curso.

Haz clic en el fotograma 2 de la capa acciones.
Abre el Panel Acciones pulsando la tecla F9.
Escribe lo siguiente, a continuacin del stop() que encontrars:
var velocidad:Number = 0.2;

var distancia:Number = 5;
var recorrido:Number = 30;
miBoton.addEventListener("click", coemnzar);
function comenzar(event) {
gotoAndPlay(1);
}
bola.addEventListener(Event.ENTER_FRAME, movimientoEspiral);
function movimientoEspiral(event) {
if (recorrido>0) {
var i:Number=distancia*recorrido;
bola.x=Math.round(i*Math.cos(recorrido))+400/2;
bola.y=Math.round(i*Math.sin(recorrido))+400/2;
recorrido-=velocidad;
var radianes:Number = Math.atan2((bola.x-400/2), (bola.y400/2));
var grados:Number = Math.round(radianes*180/Math.PI);
bola.rotation=- grados+5;
bola.scaleX=recorrido/30;
bola.scaleY=bola.scaleX;
}
}
Como puedes ver calculamos el ngulo de la bola respecto al centro de la pantalla, le damos
un desajuste de 5 grados para que parezca ms real.
En cuanto a la escala puedes ver que va en relacin al recorrido.
El movimiento de la bola lo hemos sacado de la frmula de la espiral de Arqumedes.
Podrs encontrar informacin sobre ella en la red.
Ejercicios unidad 2: El entorno de Flash

CS5
Ejercicio 1: Crear una pelcula a nuestro gusto
Crea una pelcula que tenga las siguientes propiedades:
1. Un tamao de 300 x 100 px
2. Un color de fondo rojo
3. Un Velocidad de los Fotogramas de 14 fps
Ejercicio 2: Estructurar una pelcula
1.
2.
3.
4.
Abre una nueva pelcula

Crea 2 Escenas y llmalas Escena 1 y Escena 2
Crea 2 capas en cada una.
Llmalas E1_1, E1_2 y E2_1, E2_2
Ejercicio 3: Creando fotogramas

1. Crea en una pelcula nueva 3 fotogramas clave
2. Crea 3 fotogramas normales, cada uno asociado a un fotograma clave distinto
Ejercicio 4: Identificando fotogramas

1. Dada la siguiente pelcula
Identifica todos los tipos de fotogramas existentes y a qu tipo pertenecen. Recuerdas para
qu sirve cada uno?
Ejercicio 5: Paneles
1.
2.
3.
4.
5.
Abre el Panel Color.

Abre el Panel Acciones.
Abre el Panel Alinear.
Cierra el Programa Flash CS5
Vuelve a abrirlo. Qu notas?
Si no tienes muy claro las operaciones a realizar, Aqu te ayudamos.
Ayuda ejercicios unidad 2: El entorno de

Flash CS5
Ejercicio 1: Crear una Pelicula a nuestro gusto
El apartado 1 nos propone cambiar las dimensiones del Escenario:
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento.
2. Pulsamos sobre la pestaa Unidades de Regla y seleccionamos Pxeles (px)

3. Introducimos las medidas pedidas (300 x 100) en Dimensiones.
El apartado 2 nos propone cambiar el color de fondo del Escenario:
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento
2. Pulsamos sobre la pestaa Color de fondo, el puntero se convertir en un
"cuentagotas".
3. Seleccionamos el color pedido.
El apartado 3 nos propone aumentar la velocidad de reproduccin de la pelcula
1. Hacemos clic con el botn derecho y pulsamos sobre Propiedades del Documento.
2. En Veloc. Fotogramas escribe 14 fps.
El resultado debe ser un rectngulo rojo con las medidas propuestas.
Ejercicio 2: Estructurar una Pelcula

Vamos a crear la pelcula pedida y a estructurarla tal y como piden
1.
2.
3.
4.
Abrimos una nueva Pelcula desde el men Archivo Nuevo

Accedemos al Panel Escena desde Ventana Otros Paneles Escena
Creamos una nueva Escena pulsando sobre el signo
.
Les cambiamos los nombres haciendo doble clic en sus nombres actuales
Ahora falta crear el nmero de capas pedido.

1. Seleccionamos la Escena E1 en el Panel Escena
2. Creamos otra capa ms, pulsando el signo
en la lnea de tiempo.
3. Les cambiamos los nombres a las 3 capas haciendo doble clic en sus nombres
actuales (por defecto Capa 1 y Capa 2)
Seleccionamos la Escena E2 en el Panel Escena y repetimos los pasos anteriores del 2 al
3.
El Panel Escena debera quedar as:
Y as las Capas:
Ejercicio 3: Creando Fotogramas

Vamos a crear los fotogramas pedidos:
1.
2.
3.
4.
Abrimos una nueva pelcula

Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe
Vamos al men Insertar y seleccionamos Fotograma Clave
Hacemos clic sobre el fotograma 3 y seleccionamos Insertar Lnea de Tiempo
Fotograma Clave
Ya tenemos los 3 Fotogramas Clave creados. Faltan los fotogramas normales

1. Seleccionamos el fotograma 1 y hacemos clic en el men Insertar Lnea de
Tiempo y seleccionamos Fotograma.
2. Ahora el fotograma 2 ser un fotograma normal y el 3 y el 4 sern Fotogramas
Clave. Seleccionamos el fotograma 3 y repetimos el proceso anterior.
3. Seleccionamos el fotograma 5 y lo volvemos a repetir. Esto ser lo que obtengamos:
Fijmonos en que no estn los puntos negros en los Fotogramas Clave ni los cuadrados
blancos en lo fotogramas normales.
Esto se debe a que no hay nada dibujado en dichos fotogramas.
si probamos a insertar algo en cada par de fotogramas, inmediatamente obtendremos esto:
Ejercicio 4: Identificando Fotogramas

Vamos a identificar los diferentes tipos de fotogramas:
1. Hay 3 Fotogramas Clave. Son el fotograma 1, el 7 y el 9. Los 2 primeros

representan una animacin de Movimiento. (probablemente contendrn al mismo
objeto pero cambiado de lugar). El tercero es un Fotogramas Clave normal.
2. Los fotogramas entre el 1 y el 7 y los fotogramas entre el 9 y el 13 (no incluidos)
son fotogramas normales. Simplemente determinan la duracin de los Keyframes a
los que van asociados.
3. Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son Fotogramas
Contenedor. Existen y en la pelcula se vern como fotogramas en blanco (o con el
color de fondo que hayamos seleccionado).
4. Los fotogramas del 16 en adelante son fotogramas vacos y no se vern en la
pelcula.
Ejercicio 5: Paneles
1.
2.
3.
4.
5.
Abrimos el Men Ventana.

Hacemos clic en Color. Se abrir el Panel correspondiente.
Repetimos los pasos del 1 al 2, pero abriendo el panel Alinear.
Cerramos el programa y lo volvemos a abrir.
Observamos que los Paneles siguen donde los dejamos. Flash adapta su entorno a
nuestras preferencias.
Ejercicios unidad 3: Dibujar y colorear

Ejercicio 1: Bandera Olmpica
1. Dibuja 5 aros.
2. Cmbiale los colores. Por ejemplo, los colores de la bandera olmpica (azul, negro,
rojo, amarillo y verde)
3. nelos de modo que parezcan los aros olmpicos.
Ejercicio 2: 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. Une los 2 objetos para que parezca el planeta Saturno
Si no tienes muy claro cmo realizarlo, Aqu te ayudamos
Ayuda ejercicios unidad 3: Dibujar y

colorear
Ejercicio 1: Los Aros Olmpicos
Vamos a dibujar los aros olmpicos.
Como siempre, partiremos de un nuevo documento Action Script 3.0, a travs del men
Archivo Nuevo.
1. Seleccionamos la Herramienta valo.
2. Trazamos un valo, y para que sea perfectamente circular, mantenemos pulsada la
tecla Shift.
3. Ahora, podemos intentar crear los otro cuatro aros iguales, o seleccionarlos con la
herramienta Seleccin, copiarlos desde el men Edicin Copiar y pegarlos desde
el mismo men.
4. Una vez estn dibujados, seleccionamos el relleno de cada valo y pulsamos la tecla
Suprimir para eliminarlo. (Igualmente podamos haber seleccionado el color
"ninguno"
y posteriormente creado los valos que hubieran aparecido sin
color de fondo)
5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramos
seleccionndolo en el Panel Color.
6. Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona
la Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo. Para
movimientos precisos, puedes utilizar las teclas con flechas.
Ejercicio 2: Saturno
Vamos a dibujar un planeta parecido a Saturno
1.
2.
3.
4.
5.
Seleccionamos la Herramienta valo.

Creamos un valo circular, que har de planeta.
Eliminamos el borde, para ello, hacemos clic en l y pulsamos la tecla Suprimir.
Seleccionamos el relleno del valo y abrimos la opcin Relleno.
Seleccionamos la opcin Degradado Radial.
6. Pulsamos en
y seleccionamos los colores que
deseemos, (podemos aadir tantos colores como queramos y probar su efecto).
7. Dibujamos el anillo del planeta, por ejemplo creando otro valo con la forma
adecuada. No lo dibujes sobre el planeta.
8. Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Por
ejemplo, borramos parte del planeta seleccionndola de forma rectangular y
pulsando la tecla Suprimir tal y como vimos en el paso 3.
9. Separa los dos hemisferios del planeta.

10. Pon el anillo sobre el hemisferio inferior, y despus, arrastra sobre el anillo la otra
parte del planeta.
Ejercicios unidad 4: Textos

Ejercicio 1: Crear textos
1. Crea una pelcula con 1 fotograma.
2. Crea un objeto de texto para lectura que diga: Bienvenido a mi pgina web.
3. Utiliza la fuente Verdana a un tamao de 45.
Si no tienes muy claro cmo realizarlo, Aqu te ayudamos.
Ayuda ejercicios unidad 4: Textos

Ejercicio 1: Crear textos
1. Creamos la pelcula mediante Archivo Nuevo, eligiendo ActionScript 3 (por
defecto tendremos un nico fotograma).
2. Selecciona la herramienta Texto del Panel de Herramientas.
3. Haz clic sobre el escenario.
4. Veremos esta imagen
. Escribe dentro el texto Bienvenido a mi pgina web.
5. Centra el texto haciendo clic en
en el Panel de Propiedades.
6. Cambia la fuente del texto a Verdana seleccionndola en el desplegable Familia.
7. Haz clic sobre el control de Tamao y arrstralo hacia la derecha hasta que llegue a
45.
8. En el desplegable Suavizado, elige Legibilidad.
Ejercicios unidad 5: Sonidos en Flash

Ejercicio 1: Importar Sonidos
1.
2.
3.
4.
5.
6.
Crea una pelcula con 1 fotograma.

Localiza el archivo sonido.mp3 en la carpeta de ejercicios.
Imprtalo a tu pelcula.
Comprueba que est disponible en la Biblioteca.
Inserta el sonido importado en el fotograma 1.
Comprueba que funciona (que el sonido puede escucharse). Para ello, pulsa CTRL+
ENTER (Esta combinacin de teclas te permite "probar" la pelcula).
7. Consigue que el sonido deje de escucharse al llegar la pelcula al fotograma 5.
8. Consigue que vuelva a escucharse en el fotograma 10, y se reproduzca todo el
sonido.
Ejercicio 2: Editar Sonidos

1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco a
poco vaya aumentando de volumen.
2. Modifica el sonido de modo que al final del mismo, parezca que el sonido pasa de
un altavoz al otro.
Ayuda ejercicios unidad 5: Sonidos en

Flash
1. Creamos la pelcula mediante Archivo Nuevo, eligiendo archivo ActionScript 3
(por defecto tendremos un nico fotograma).
2. Seleccionamos Importar Importar a Biblioteca, que se encuentra en el Men
Archivo.
3. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos el
archivo de sonido y pulsamos Abrir.
4. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana
Biblioteca) y comprobamos que se encuentra all.
5. Si no se encuentra all, revisaremos los pasos dados, pues algo no hemos hecho
bien.
6. Creamos una nueva capa y la seleccionamos.
7. Despus seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el
escenario (hasta el fotograma actual).
8. Pulsamos Enter y el sonido deber escucharse.
9. Alargamos el fotograma actual hasta el nmero 4 (insertando fotogramas normales
desde el Men Insertar Lnea de Tiempo Fotograma).
10. Insertamos un nuevo fotograma en la lnea de tiempo. En la posicin 5 (desde el

Men Insertar Lnea de Tiempo Fotograma Clave).
11. Abrimos el Panel Propiedades y seleccionamos uno de los fotogramas del 1 al 4.
12. En la opcin Sinc seleccionamos Flujo.
13. Acabamos de conseguir que el sonido slo se reproduzca cuando est en los
fotogramas indicados.
14. Insertamos un nuevo Fotograma Clave en la posicin 10.
15. Con el fotograma 10 seleccionado, vamos al panel Propiedades, y en las opciones
de Sonido, elegimos el Nombre del archivo que estamos utilizando.
16. En la opcin Sinc seleccionamos Inicio
Debe quedar parecido al grfico:
Ejercicio 2: Editar Sonidos

1. Utilizando el archivo anterior, nos situamos en el ltimo fotograma, donde se
reproduce todo el sonido.
2. Seleccionamos Aumento Progresivo dentro de la pestaa Efecto que se encuentra en
el Panel Sonidos.
3. Seleccionamos Personalizar dentro de la pestaa Efecto que se encuentra en el Panel
Sonidos.
4. Nos dirigimos al final del sonido y hacemos clic en el canal que queramos modificar
(el izquierdo est en la parte superior y el derecho en la inferior). Aparecer un
recuadro blanco, lo situamos en su parte ms baja para quitarle el sonido y en su
parte ms alta para drselo. Jugamos con los volmenes de ambos canales hasta
obtener el efecto deseado. Podemos ir probando cmo queda pulsando el Play que
acompaa este Panel.
Ejercicios unidad 6: Trabajar con objetos

Ejercicio 1: Rellenos y Bordes
1. Crea dos rectngulos con el interior de color verde y el borde negro.
2. En uno de ellos elimina el Relleno (rectngulo de la izquierda en la imagen).
3. En el otro, elimina el borde (rectngulo de la derecha en la imagen).
Ejercicio 2: Selecciones
1. Dibuja 5 valos. Dales el color de relleno y borde que quieras (elige un relleno que
no sea transparente
)
2. Selecciona 3 de ellos usando la tecla SHIFT.
3. Selecciona 3 de ellos usando la Herramienta Seleccin (Flecha).
4. Selecciona 3 nicamente los bordes de 3 de ellos.
Ejercicio 3: Alinear objetos

1. Dibuja 4 objetos (crculos, rectngulos...).
2. Coloca uno en cada esquina usando el Panel Alinear.
Ejercicio 4: Grupos
1. Agrupa los 4 objetos del ejercicio anterior en un nico grupo.
2. Cambia su posicin (colcalos, por ejemplo, en el centro de la pelcula).
3. Desagrpalos.
Ayuda ejercicios unidad 6: Trabajar con

objetos
Ejercicio 1: Rellenos y Bordes
Se nos pide crear 2 rectngulos y eliminar el relleno de uno de ellos y el borde del otro.
Procedemos del siguiente modo:
1. Seleccionamos los colores en el Panel Muestras o en el Panel Color, hacemos clic
en la Herramienta Rectngulo y dibujamos 2 rectngulos.
Los 2 rectngulos originales

2. Hacemos clic en el interior del primer rectngulo y pulsamos la tecla suprimir Supr.
3. Hacemos doble clic en el borde del otro rectngulo y volvemos a pulsar la tecla
suprimir Supr.
Rectngulo sin Relleno y Rectngulo sin Borde

Otra opcin podra haber sido crear un nico rectngulo con borde. Hacer clic sobre su
relleno para seleccionarlo, y arrastrarlo para "sacarlo" el rectngulo.
Ejercicio 2: Selecciones
El primer apartado nos pide crear 5 valos y seleccionar 3 de ellos con la tecla SHIFT.
1. Seleccionamos los colores que queramos en el Panel Muestras o en el Panel Color,
hacemos clic en la Herramienta valo (que aparece agrupada con la herramienta
rectngulo) y dibujamos 5 valos.
2. Hacemos doble clic en el relleno del primer crculo (doble clic para seleccionar
tanto el Relleno como el borde).
3. Ahora pulsamos la tecla SHIFT y sin soltarla, hacemos doble clic en otros 2 crculos
cualesquiera.
Ahora hacemos lo mismo usando la Herramienta Seleccin (Flecha), como pide el
segundo apartado.
1. Hacemos clic en una zona del escenario que nos permita capturar 3 crculos.
2. Arrastramos el ratn hasta crear un rea que envuelva completamente a 3 de los 5
crculos.
3. Si quedara alguna parte del crculo fuera de la seleccin, basta con usar la tecla
SHIFT para aadirlo a la seleccin actual.
Ahora se nos pide seleccionar nicamente los bordes de 3 de ellos.
1. Hacemos clic en el borde del primer valo (si hiciramos 2 clics se seleccionaran
todos los bordes del mismo color que estn en contacto con el borde sobre el que
hacemos clic).
2. Mantenemos pulsada la tecla SHIFT y repetimos el proceso con 2 valos ms.
Nota: Si en vez de valos hubieran sido rectngulos, hubiera hecho falta hacer 2 clics en el
borde de cada rectngulo para que este quede totalmente seleccionado. Comprubalo tu
mismo.
Ejercicio 3: Alinear Objetos

Se nos pide dibujar 4 objetos y colocarlos en las esquinas.
1. Dibujamos los 4 objetos pedidos, por ejemplo, 4 rectngulos.
2. Abrimos el Panel Alinear. desde el men Ventana Alinear.
3. Hacemos clic en Alinear en escenario para que las distribuciones de los objetos se
hagan en funcin del tamao del fotograma.
4. Seleccionamos el primer objeto y hacemos clic en
para alinear el objeto en el
extremos izquierdo de la pelcula.
5. Hacemos clic en
para situarlo en el borde superior de la pelcula. Como el
objeto est en el extremo superior izquierdo, est en la esquina superior izquierda.
6. Para alinear el segundo objeto en la esquina superior derecha hacemos clic en
y
.
7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en

.
8. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en
.
Ejercicio 4: Grupos
La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que ya
tenemos).
1. Los seleccionamos todos del modo que prefiramos.
2. Hacemos clic en el Men Modificar Agrupar
La segunda parte del ejercicio nos pide Desagrupar el conjunto de elementos que
acabamos de agrupar.
1. Seleccionamos el Grupo haciendo clic en l.
2. Hacemos clic en el Men Modificar Desagrupar
Ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas
1. Abre el archivo capas.fla que encontrars en la carpeta ejercicios del curso.
2. Modifica el orden de las capas para que se muestre como el siguiente dibujo:
Ejercicio 2: Planeta Saturno (II)

1. Abre un archivo nuevo e intenta reproducir el planeta Saturno (como hicimos en los
primeros temas).
y
y
2. En este caso debers utilizar capas de tipo Mscara.

Ayuda ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas
1.
2.
3.
4.
Abre el archivo capas.fla que encontrars en la carpeta de ejercicios.

Haz clic en la capa Texto para seleccionarla.
Arrstrala hasta tenerla en la posicin superior (por encima de la capa Forma2).
Haz clic en la capa Forma que ahora se encuentra en la parte inferior para
seleccionarla.
5. Arrstrala hasta tenerla en la posicin superior (ahora por encima de la capa Texto).
Observa que la capa Texto es visible porque la pintura de relleno de la capa Forma tiene el
valor alfa al 50%.
Ejercicio 2: Planeta Saturno (II)

Como siempre, partimos de un nuevo archivo ActionScript 3.
1. Crea tres capas utilizando el botn que encontrars en la lnea de tiempo.
2. Haz doble clic sobre el nombre de la capa que se encuentre ms abajo. Cmbialo
por Planeta.
3. Haz doble clic sobre el smbolo
de la que se encuentra en la parte superior.
Llmala Mscara y dale el tipo Mscara.
4. Finalmente haz doble clic sobre el smbolo

de la capa que se encuentra en
medio. Llmala Aros y dale el tipo con Mscara.
En estos momentos debers tener algo como esto:
5. Selecciona la capa Planeta y dibuja un crculo (puedes aplicarle un relleno

degradado y quitarle el borde).
6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un degradado
con varias paradas (profundizaremos en los degradados ms adelante).
7. Selecciona el crculo que har de aro, y con la herramienta Transformacin libre
(debajo de las flechas), dale la forma deseada.
8. Utiliza el panel Alinear para centrar el planeta y el aro vertical y horizontalmente, y
queden perfectamente alineados.
9. Ahora selecciona la capa Mscara y con la herramienta pincel pinta sobre el
Escenario para tapar la forma ovalada de los aros de modo que slo pintes lo que
quieras que se muestre. Es decir, bastara con no pintar la parte que quedara detrs
del planeta.
Aqu puedes ver un ejemplo de cmo quedara:
El planeta est en gris, los aros en rojo y la mscara en verde.

10. Ya casi lo tenemos, podemos mejorar el dibujo seleccionndolo todo (clic en la
esquina superior izquierda y sin soltar hasta la esquina inferior derecha) y
seleccionando la herramienta Transformacin libre para rotar el dibujo en su
totalidad unos grados hacia la izquierda.
11. Para probar el efecto de la mscara pulsa las teclas Ctrl + Enter en tu teclado.
Ejercicios unidad 8: Smbolos
Ejercicio 1: Crear Smbolo

1.
2.
3.
4.
Crea una pelcula con 1 fotograma.

Dibuja un crculo perfecto.
Convirtelo a smbolo de tipo Clip de pelcula.
Comprueba que est disponible en la Biblioteca.
Ejercicio 2: Insertar Instancia

1.
2.
3.
4.
Crea una nueva pelcula.

Inserta el Grfico de un botn cualquiera de las Bibliotecas comunes de Flash CS5.
Modifica su tamao.
Vuelve a realizar el paso 2 y comprueba que el botn se inserta en su tamao
original.
Ejercicio 3: Duplicar Instancia

1. Sobre el ejercicio anterior, duplica la instancia del botn que has cambiado de
tamao.
2. Desde esa instancia, suplica el smbolo.
3. Comprueba que se ha duplicado en la Biblioteca.
Ejercicio 4: Efectos sobre Instancias

1. Teniendo el botn ampliado del ejercicio 2 en el escenario, inserta el duplicado que
hemos creado de tal forma que se superpongan parcialmente.
2. Dale al botn que est tapando al otro un efecto Alfa del 40%.
3. Comprueba que ahora podemos ver los dos claramente.
Ayuda ejercicios unidad 8: Smbolos

Ejercicio 1: Crear Smbolo
1. Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo archivo
ActionScript 3.
2. Para que el crculo no salga ovalado, selecciona la herramienta valo y mientras lo
dibujas, mantn pulsada la tecla Shift.
3. Accede a Insertar Nuevo Smbolo... o bien pulsa F8.
4. Accede a Ventana Biblioteca y busca el nombre que le diste al crearlo.
Ejercicio 2: Insertar Instancia

1. Selecciona la opcin Archivo Nuevo, eligiendo archivo ActionScript 3.
2. Ve a Ventana Bibliotecas Comunes Botones y selecciona un botn cualquiera
(para expandir las carpetas, haz clic con el botn derecho sobre una de ellas y
selecciona "Expandir Carpeta"). Arrastra el botn elegido hasta el escenario
3. Selecciona el smbolo, luego la herramienta Transformacin libre y arrastra alguno
de los puntos que aparecern alrededor del botn.
4. Debes ver que has modificado slo una instancia del smbolo, y no el smbolo en s.
Ejercicio 3: Duplicar Instancia

1. Selecciona la instancia a duplicar, y en el men Edicin elige Duplicar. Aparecer
una copia en el escenario.
2. Haz clic con el botn derecho sobre la instancia que quieras duplicar y selecciona
Duplicar Smbolo.
3. Accede a Ventana Biblioteca y busca el nombre que le diste al duplicarlo.
Ejercicio 4: Efectos sobre Instancias

1. Ve a Ventana Biblioteca para abrir la Biblioteca y busca el nombre del
duplicado. Arrstralo al escenario.
2. Abre el Panel Propiedades y selecciona en la pestaa Color Alfa e introduce en la
casilla donde pone 100% un 40%
3. Como el de arriba tiene un efecto Alfa (Transparencia) permite que el botn situado
bajo l se vea.
Ejercicios unidad 9: Grficos

Ejercicio 1: Exportar a Grfico animado
1. Abre el archivo exportar.fla que se encuentra en la carpeta de ejercicios del curso.
2. Crea un archivo GIF transparente para que muestre la animacin.
3. Deber quedarte algo as:
Observa que esta animacin se trata de una imagen, no de un archivo Flash.

Ayuda ejercicios unidad 9: Grficos

Ejercicio 1: Exportar a Grfico animado
1. Abre el archivo exportar.fla de la carpeta ejercicios.
2. Abre el men Archivo finalmente Configuracin de publicacin. Se abrir un
cuadro de dilogo.
3. Entre todas las opciones de publicacin, marca nicamente imagen GIF.
4. Pulsa en la pestaa GIF. Se mostrarn sus opciones:
5. Maraca la opcin re reproduccin Animada.

6. Asegrate de que est marcada la opcin Repetir indefinidamente.
7. Selecciona la casilla Transparente para que el fondo de la pelcula quede

transparente. El resto de las opciones puedes dejarlas como estn.
8. Pulsa el botn Publicar y lo tendrs listo.
9. Ahora, podrs encontrar el GIF en la carpeta de ejercicios, o en la carpeta donde
tengas el archivo exportar.fla.
Ejercicios unidad 10: Clips de Pelcula

Ejercicio 1: Crear un Clip a modo de Cuenta Atrs
1.
2.
3.
4.
Crea una pelcula con slo 1 fotograma.

Escribe un nmero cualquiera, por ejemplo un 3.
Convirtelo a smbolo de tipo Clip.
Crea una animacin fotograma a fotograma en la que se vea una cuenta atrs hasta
el cero.
5. Comprueba que pese a tener la pelcula original un frame y el clip cinco, la
animacin se ve completamente.
6. Gurdalo como cuenta.fla
Ejercicio 2: Crear un clip vaco y editarlo despus

1.
2.
3.
4.
Crea una nueva pelcula.

Crea un nuevo smbolo de tipo Movie Clip vaco.
Sal a la lnea de tiempo principal.
Vuelve a editar el smbolo.
Ejercicio 3: Exportar una pelcula con proteccin

1. Partimos del Clip del ejercicio 1, brelo.
2. Exporta la pelcula swf de forma que nadie la pueda importar despus.
Ayuda ejercicios unidad 10: Clips de

Pelcula
Ejercicio 1: Crear un Clip a modo de Cuenta Atrs
1. Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo un archivo
ActionScript 3.
2. Accede a Insertar Nuevo Smbolo... o bien pulsa las teclas Control + F8.
3. Mediante la Herramienta Texto marcada en la barra de herramientas con una T

escribe el 3.
4. Pulsa F6 para crear tres fotogramas claves en los fotogramas 2, 3 y 4. Luego borra el
3 que aparecer en ellos y escribe un 2, un 1 y un 0 en su lugar.
5. Puedes reproducir la pelcula con Control + Enter.
6. Elige men Archivo Guardar Como... y dale el nombre cuenta.fla.
Ejercicio 2: Crear vaco y editarlo despus

1. Crea un nuevo archivo ActionScript 3, desde el men Archivo Nuevo.
2. Accede a Insertar Nuevo Smbolo o bien pulsa Control + F8
3. Pulsa en el icono de la escena principal, en este caso ser Escena 1, que est cerca
de la lnea de tiempo..
4. Abre la Biblioteca del documento mediante Ventana Biblioteca, pulsa con el
botn derecho sobre el nombre del clip y selecciona la opcin Editar del men
emergente.
Ejercicio 3: Exportar una pelcula con proteccin

1. Abre mediante Archivo Abrir y selecciona el archivo cuenta.fla.
2. Exporta con Archivo Exportar Exportar Pelcula, selecciona el tipo de archivo
SWF y dale un nombre. En la ventana que aparece marca la opcin Proteger frente a
Importacin, y en el campo Contrasea escribe la clave que quieras.
Ejercicios unidad 11: Botones

Ejercicio 1: Crear un Botn en forma de Pldora
1. Abre un documento nuevo

2. En el primer fotograma dibuja un objeto con forma de pldora como el de la derecha
y escribe "STOP" sobre l.
3. Convirtelo a smbolo de tipo Botn
4. Crea distintas apariencias para distintos estados
5. Gurdalo como stop.fla.
Ejercicio 2: Ajustar el rea Activa
1. Crea una nueva pelcula

2. Escribe el texto: "VmOnoS" respetando las maysculas y minsculas como se
muestran
3. Convirtelo a Botn que slo funcione al pasar por la "O" central
Ejercicio 3: Botn con Sonido

1. Partimos del Botn del ejercicio 1. brelo.
2. Haz que emita un sonido de la Biblioteca Comn de Sonidos al pasar el ratn por
encima de l.
3. Haz que emita otro sonido de la Biblioteca Comn de Sonidos distinto al pulsarlo.
Ejercicio 4: Detener una Pelcula

1. Abre el documento exportar_stop.fla. Lo encontrars en la carpeta de ejercicios.
2. En el primer fotograma tenemos un clip de pelcula que contiene una animacin que
dura ms de 1 fotograma.
3. Ahora inserta en el clip el botn del ejercicio 1 de manera que se vea a lo largo de
toda su reproduccin.
4. Haz que se detenga el Clip al pulsar el botn.
Ayuda ejercicios unidad 11: Botones

Ejercicio 1: Crear un Botn en forma de Pldora
1. Crea el nuevo documento con con Archivo Nuevo, y elige ActionScript 3.0.
2. Para dibujar la forma de pldora dibuja primero un crculo perfecto (con la

herramienta valo y la tecla Shift). Brrale el borde.
3. Con la forma seleccionada, selecciona la herramienta Cubo de Pintura y elige un
degradado radial de tonos azules, colocando los marcadores como se muestra en la
imagen de la derecha.
4. Con el Cubo de pintura, haz clic y arrastra sobre la forma. Vers como te permite
regular la direccin del degradado. Puedes hacerlo tantas veces como sea necesario
hasta lograr el degradado deseado.
5. Ahora, vamos a crear la pldora. Fuera del crculo, dibuja dos lneas paralelas
(Herramienta Lnea y tecla Shift). Agrpalas (Ctrl + G).
6. Utilizando el panel alinear, centra horizontalmente el crculo y las lneas (fig. b).
7. Desagrupa las lneas (Ctrl + Shift + G) y deseleccinalas.
8. Ahora podrs seleccionar independientemente los lados de la esfera. Sepralos (fig.
c). Puedes hacerlo con las teclas Shift + derecha o Shift + izquierda.
9. Con la herramienta Transformacin libre, estira la seccin que estaba entre las
lneas hasta completar la figura (fig. d).
10. Borra las lneas negras.
11. Selecciona la pldora, y convirtela en un botn, haciendo clic derecho y eligiendo

Convertir en smbolo... o bien pulsando F8. Elige el tipo Botn.
12. Haz doble clic sobre l para acceder a su lnea de tiempo.
13. Crea fotogramas clave los estados que quieras modificar pulsando F6 y modifcalos
para crear el efecto que prefieras.
14. Crea una nueva capa encima de sa, e introduce ah el texto. A no ser que quieras
variar el texto segn el estado.
15. Gurdalo, pulsando Archivo Guardar Como... y llmalo stop.
Ejercicio 2: Ajustar el rea Activa

1. Hazlo tambin con Archivo Nuevo, eligiendo archivo ActionScript 3.
2. Utilizando la Herramienta Texto (marcada en la barra de Herramientas con una T)
escribe el texto: VmOnoS.
3. Haz clic en la Herramienta Seleccin y selecciona el texto que acabas de crear.
4. Convirtelo en un botn mediante Modificar Convertir en Smbolo... o bien
pulsando F8, y eligiendo el tipo Botn.
5. Haz doble clic sobre l para editar su lnea de tiempo.
6. Selecciona el fotograma Zona Activa, dibuja un valo de tal forma que tape por
completo la "O" y tenga el mismo tamao y forma. Luego borra el texto.
Ejercicio 3: Botn con Sonido

1.
2.
3.
4.
5.
6.
7.
Abre el archivo stop.fla, creado en el primer ejercicio.

Haz doble clic sobre el botn con forma de pldora.
Crea una nueva capa para los sonidos.
Haz clic en el men Ventana Bibliotecas comunes Sonidos.
Arrastra al escenario los sonidos que quieres emplear.
En la nueva capa, crea fotogramas clave en Sobre y Presionado.
Selecciona el fotograma Sobre de la nueva capa, y en el panel Propiedades, elige el
sonido correspondiente en Nombre dentro de Sonido. En Sinc. elige Evento.
8. Repite el paso anterior, pero en el fotograma Presionado.

9. Gurdalo y cirralo.
Ejercicio 4: Detener una Pelcula

1. Abre el archivo exportar_stop.fla, que encontrars en la carpeta de ejercicios.
2. En el men Archivo, selecciona Importar Abrir biblioteca externa, e importa el
archivo stop.fla creado en los primeros ejercicios.
3. Desde el men Modificar elige Documento para cambiar su tamao, y cambia la
altura a 350px.
4. Crea una nueva capa en la Lnea de tiempo.
5. Selecciona el primer fotograma de la nueva capa.
6. De la biblioteca de stop.fla, arrastra el botn al escenario para crear una instancia.
7. Selecciona el botn, y en el panel Propiedades, escribe botonStop como nombre de
la instancia.
8. Selecciona la estrella, y en el panel Propiedades, escribe estrella como nombre de la
instancia.
9. Organiza la estrella y el botn en el escenario.
10. Selecciona la instancia del botn, y abre el panel Fragmentos de cdigo.
11. En el panel, selecciona Controladores de eventos Evento MouseClick y haz
doble clic.
12. Se crear una nueva capa con el cdigo ActionScript. Modifcalo para que al hacer
clic en el botn se detenga la estrella:
?
1botonStop.addEventListener(MouseEvent.CLICK,
2fl_MouseClickHandler);
3
function fl_MouseClickHandler(event:MouseEvent):void
4{
5
estrella.stop();
6}
13. Prueba la pelcula (Ctrl + Intro) y comprueba que funciona.
Ejercicios unidad 12: Animaciones de

movimiento
Ejercicio 1: Mscara en Movimiento
1 Abre un documento nuevo.
2 Crea los pasos necesarios para crear la siguiente animacin utilizando una mscara en
movimiento.
Ayuda ejercicios unidad 12: Animaciones

de movimiento
Ejercicio 1: Mscara en Movimiento
1. Abre un nuevo archivo ActionScript 3 desde el men Archivo Nuevo.
2. Crea una nueva capa haciendo clic en el botn .
3. Selecciona la capa superior y haz doble clic sobre su smbolo
.
4. Llmala Mscara y selecciona el tipo Mscara.
5. Selecciona la capa inferior y haz doble clic sobre su smbolo
.
6. Llmala Texto y selecciona el tipo Con mscara.
7. En la capa Texto escribe aulaClic.
8. Selecciona el fotograma 1 de la capa Mscara, dibuja un circulo en l.
9. Selecciona el crculo y transfrmalo en un Clip de pelcula pulsando la tecla F8.
10. Selecciona el smbolo que acabamos de crear y muvelo a la izquierda del texto sin
taparlo (da igual si sale de la Escena).
11. Haz clic derecho sobre el fotograma de la capa Mscara y selecciona Crear
interpolacin de movimiento en el men contextual.
12. Selecciona el fotograma 40 de la capa Mscara y crea un nuevo fotograma clave de
propiedad, pulsando la tecla F6.
13. Sitate en el fotograma 20 de la capa Mscara.
14. Selecciona el clip del crculo, y con la tecla Shift pulsada, para desplazarlo en
horizontal, muvelo hasta la derecha del texto (sin taparlo).
15. Selecciona el fotograma 40 de la capa Texto y crea un nuevo fotograma pulsando la
tecla F5.
16. Prueba la pelcula pulsando la combinacin de teclas CTRL + INTRO.
Ejercicios unidad 13: Animacin por

Forma
Ejercicio 1: Babosa arrastrndose
1. Abre un documento nuevo
2. En el primer fotograma dibuja una especie de babosa como la de la abajo.
3. Haz que cambie de forma y vaya de un lado a otro del escenario, dando la sensacin
de que est reptando.
4. Gurdalo como babosa.fla.
Ejercicio 2: Cambio de Forma y Tamao

1. Abre el archivo babosa.fla.
2. Cambia el movimiento de forma para que a mitad del trayecto de la impresin de
que se est acercando a nosotros.
3. Cambia el color de la babosa cuando est ms cerca de nosotros.
Nota: Utilizaremos este archivo en la siguiente unidad.
Ejercicio 3: Cambiar la Forma de un Texto

1. Escribe en distintas capas las letras de tu nombre.
2. Crea una animacin de forma que pase de una letra a la siguiente.
3. Cambia los colores y el tamao de cada letra.
Ayuda ejercicios unidad 13: Animacin

por Forma
Ejercicio 1: Babosa arrastrndose
1. Crea un nuevo Archivo de Flash ActionScript 3 desde el men Archivo Nuevo.

2. Utiliza la Herramienta Lpiz para crear la forma de la babosa.
3. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Crear
Interpolacin de Forma.
4. Ve ahora al fotograma 20 y pulsa F6. En ese mismo fotograma, arrastra la babosa al
otro lado del escenario y mediante la Herramienta de Subseleccin modifica su
forma.
5. Gurdalo con Archivo Guardar Como y llmalo babosa.fla.
Ejercicio 2: Cambio de Forma y Tamao

1. Si lo has cerrado, abre el archivo con Archivo Abrir.
2. Selecciona el fotograma 10. Mueve el objeto hasta la parte inferior del escenario y
aumenta su tamao. La parte inferior siempre da sensacin de proximidad.
3. Selecciona la Herramienta Cubo de Pintura, elige un nuevo color y pincha sobre el
relleno anterior.
Ejercicio 3: Cambiar la Forma de un Texto

1. Crea mediante F6 un fotograma clave en el introduce en el centro del escenario una
letra de tu nombre.
2. Selecciona la letra creada y activa la opcin Modificar Separar.
3. Pulsa con el botn derecho sobre el primer fotograma y elige la opcin Crear
Interpolacin de Forma.
4. Ve cinco fotogramas en adelante y pulsa F6. Borra la letra y escribe la siguiente.
5. Repite los pasos hasta que hayas escrito todas las letras.
6. Cambia los colores utilizando el Cubo de Pintura y la herramienta Transformacin
libre para cambiar la forma.
Ejercicios unidad 14: Efectos sobre

animaciones
Ejercicio 1: Efecto Rotacin
1.
2.
3.
4.
Crea un nuevo archivo.

Dibuja una rueda y haz que se desplace de un lado al otro del escenario.
Haz que ruede mientras hace el deplazamiento.
Gurdalo como rueda.fla.
Ejercicio 2: Efecto Aceleracin

1. Abre el archivo rueda.fla.
2. Haz que vaya frenando en su movimiento hasta pararse.
Ejercicio 3: Orientar segn el Trazo

1. Abre el archivo babosa.fla, creado en los ejercicios finales de la unidad anterior..
2. Dibuja una gua con forma de montaas para que sea recorrida por nuestra babosa.
3. Puesto que as parecer que la babosa est volando, haz que se arrastre por el borde
de la montaa.
Ejercicio 4: Efecto Alpha

1. Escribe tu nombre.
2. En una nueva capa escribe tu apellido.
3. Haz que el nombre vaya desapareciendo y que antes de que lo haga aparezca poco a
poco el apellido por detrs suyo.
Ayuda ejercicios unidad 14: Efectos sobre

animaciones
Ejercicio 1: Efecto Rotacin
1. Crea un nuevo Archivo de Flash ActionScript 3.0 desde el men Archivo Nuevo.
2. Dibuja la rueda con las herramientas de dibujo de Flash, y convirtela en un
smbolo.
3. Haz clic con el botn derecho sobre el primer fotograma y selecciona Crear
Interpolacin de movimiento.
4. Pulsa F6 en el fotograma 25 y pon la rueda en el otro extremo del escenario.
5. Haz clic sobre cualquier fotograma de la interpolacin, y ve al panel de

Propiedades. En El panel que aparece selecciona el valor Dcha de la opcin de
Rotacin para girar hacia la derecha y dar la sensacin de avance. Deja el valor por
defecto de una vuelta.
6. Ve al men Archivo Guardar Como y guarda el archivo como rueda.fla.
Ejercicio 2: Efecto Aceleracin

1. Si lo has cerrado, abre el archivo rueda.fla creado en el ejercicio anterior.
2. En la lnea de tiempo, selecciona alguno de los fotogramas de la interpolacin.
3. En el panel Propiedades, introduce el valor 100 de la opcin de Aceleracin.
Ejercicio 3: Orientar segn el Trazo

1. Utiliza Archivo Abrir para abrir el archivo babosa.fla.
2. Haz clic derecho sobre la capa de la interpolacin, y elige la opcin Aadir gua de
movimiento clsica.
3. Crea la gua con la forma de las montaas.
4. Coloca la instancia del primer y el ltimo fotograma al principio y al final de la gua
respectivamente.
5. Ahora haz clic sobre un fotograma de la interpolacin, y en el panel Propiedades
marca la casilla Orientar segn trazado.
Ejercicio 4: Efecto Alfa

1.
2.
3.
4.
5.
Utiliza la Herramienta Texto y escribe en el primer fotograma tu nombre.

Crea una nueva capa, e introduce un texto con tu apellido.
Convierte ambos textos en smbolos.
En ambas capas, crea fotogramas clave en los fotogramas 10, 20, 30 y 40.
En la primera capa, para el smbolo del nombre, pon a 0 el valor para el efecto Alfa
de la instancia en los fotogramas 20 y 30.
6. En la segunda capa, para el smbolo del apellido, pon a 0 el valor para el efecto Alfa
de la instancia en los fotogramas 1, 10 y 40.
7. Para la primera capa, haz clic derecho entre los fotogramas 10 y 19 y elige Crear
interpolacin clsica.
8. Para la primera capa, haz clic derecho entre los fotogramas 30 y 39 y elige Crear
interpolacin clsica.
9. Repite los pasos 8 y 9 con la segunda capa.
10. Prueba la animacin.
Ejercicios unidad 15: Generar y publicar

pelculas swf
Ejercicio 1: Cdigo para incrustar Flash en HTML
Cuando exportamos una pelcula Flash para publicarla en una pgina web, Flash introduce
entre las lneas HTML un cdigo de etiquetas (como el HTML) que muestra al navegador
qu pelcula tienen que reproducir y cmo.
El cdigo puede llevar ms cosas, pero obviando las etiquetas html bsicas, puede ser muy
parecido al siguiente:
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8444553540000" width="550" height="400" id="publicacion" align="middle">
<param name="movie" value="publicacion.swf"
/>
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess"
value="sameDomain" />

<object type="application/x-shockwaveflash" data="publicacion.swf" width="550" height="400">
<param name="movie"
value="publicacion.swf" />
<param name="quality" value="high"
/>
<param name="bgcolor"
value="#ffffff" />
<param name="wmode" value="window"
/>
<param name="scale" value="showall"
/>

<param name="devicefont"
value="false" />
<param name="allowScriptAccess"
value="sameDomain" />

<a
href="http://www.adobe.com/go/getflash">
<img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player
.gif" alt="Obtener Adobe Flash Player" />
</a>

</object>

</object>
</div>
En cada lnea encontramos un parmetro y su valor. Intenta deducir e identificar aquellos

elementos que podamos haber indicado nosotros en las propiedades de exportacin, y que
estn estrechamente relacionados con la visualizacin que tendr de ella la gente en el
navegador.
Si necesitas ayuda, puedes encontrarla aqu.
Ayuda ejercicios unidad 15: Generar y

publicar pelculas swf
Solucin al ejercicio:
<object type="application/x-shockwave-flash" data="publicacion.swf"
width="550" height="400">
<param name="movie" value="publicacion.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="devicefont" value="false" />
<param name="allowScriptAccess" value="sameDomain" />
width y height son el ancho y alto de la pelcula.

movie: Aqu se est indicando la ruta donde est y el nombre del archivo SWF que hemos
exportado y que queremos que se reproduzca en nuestra gina.
quality: indica la calidad de reproduccin de la pelcula (como hemos visto en este tema,
esta viene determinada por la velocidad y el suavizado o calidad de imagen) y sus posibles
valores pueden ser los all
loop: Indica si se repetir en bucle.
play : indica si se repoducir automticamnete la pelcula
scale: Indica si el tipo de escala.
wmode: Indica el modo de ventana.
devicefonts: Indica si la opcin fuente de dispositivo est activa.
Ejercicios unidad 18: Navegacin ActionScript

Ejercicio 1: Peridico Digital
Debers reproducir la siguiente pelcula Flash:
Para ello debers crear un movieclip que reproduzca el movimiento de la pgina.

Podrs encontrar las hojas a cargar en la carpeta /ejercicios/periodico del curso, como
archivos SWF.
Las pginas incluyen el botn para avanzar y retroceder. Al pulsarlo no se realiza ninguna
accin, pero producen los eventos irSiguiente e irAnterior, que pueden ser escuchados por
la pelcula principal.
El resto queda a tu disposicin, utiliza todos los recursos que necesites.
Nota: Las imgenes que puedes ver en las pginas han sido obtenidas desde Flickr, bajo
licencia Creative Commons.
Ayuda ejercicios unidad 18: Navegacin ActionScript

Ejercicio 1: Peridico Digital
1. Abre el programa Flash CS5.

2. Haz clic en Archivo Nuevo para crear un nuevo documento.
3. Selecciona Archivo de Flash ActionScript 3 en el dilogo que se abrir y pulsa
Aceptar.
4. Se abrir un documento en blanco. Lo guardaremos para darle un nombre y poder
guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo
Guardar. Dale un nombre (por ejemplo periodico), selecciona una la carpeta donde
tienes los swf de las pginas del peridico, que encontrars en la carpeta
ejercicios/periodico y pulsa Guardar.
Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + S o
haciendo clic en Archivo Guardar.
5. Empecemos a crear el documento. Primero cambiaremos su tamao. Haz clic

derecho en cualquier parte del rea de trabajo y selecciona Propiedades del
Documento....
6. Introduce 600 en Anchura y 400 en Altura. Pulsa Aceptar para aplicar los cambios.
7. Inserta 3 nuevas capas utilizando el botn Insertar capa
en la lnea de tiempo.
8. Nmbralas de arriba abajo: acciones, hoja, derecha e izquierda.
En la capa acciones introduciremos el cdigo que vamos a utilizar en la lnea de
tiempo principal. La capa hoja contendr la animacin de la hoja pasndose.
En las capas derecha e izquierda introduciremos dos movieclips donde cargaremos
las pginas que querremos visualizar en cada momento.
9. Nuestro prximo paso ser crear movieclips donde colocaremos las pginas derecha
e izquierda. Abre la Biblioteca, si no est ya abierta, desde Ventana Biblioteca y
pulsa el botn Nuevo Smbolo situado al pie de esta.
10. Dale el nombre de pagina y selecciona Clip de pelcula. Se crear el clip, pero como
no queremos introducir nada en l lo dejaremos vaco y pulsaremos Escena 1 para
volver a la Escena principal.
11. Ahora introduciremos instancias del clip pagina en las capas derecha e izquierda.
Selecciona la capa derecha y arrastra el smbolo que acabamos de crear de la
Biblioteca al Escenario.
12. En el Panel Propiedades cambiaremos las coordenadas de posicin, en X
escribiremos 300 y en Y 0. As se colocar el clip en el medio del documento, que
es donde se encontrar la esquina superior izquierda de la pgina derecha.
13. Dale el nombre de instancia pagina_derecha.
14. Ahora crearemos una instancia para la pgina izquierda. Selecciona la capa
izquierda y arrastra el clip pagina sobre el Escenario.
15. En el Panel Propiedades dale las coordenadas de posicin X 0 e Y 0.
16. Cambia su nombre de instancia a pagina_izquierda.
17. Ahora crearemos el movimiento de la hoja. Para ello crearemos un clip de pelcula
que representar la hoja. Haz clic en Nuevo Smbolo (al pie de la Biblioteca) y dale
el nombre hoja. Selecciona Clip de pelcula y pulsa el botn Aceptar.
18. Selecciona la herramienta Rectngulo
y dibuja un rectngulo en el Escenario.
19. Selecciona le herramienta Seleccin

y haz doble clic sobre el rectngulo que
acabas de crear para seleccionarlo completamente.
20. En el Panel Propiedades cambia su Ancho a 300 y su Alto a 400. Colcalo en la
posicin X 0 e Y 0.
21. Para que te sea ms cmodo, puedes darle un color de relleno al rectngulo.
22. Ahora crearemos la animacin que recrear el movimiento de la hoja. Para ello
creamos un nuevo clip, haz clic en el botn Nuevo Smbolo y llmalo
hoja_movimiento, selecciona Clip de pelcula y pulsa Aceptar.
23. Entraremos en el modo de edicin del nuevo clip. Arrastra el smbolo hoja que
acabamos de crear al Escenario.
24. Primero crearemos la animacin que se reproducir cuando pasemos a la hoja
siguiente. As que la posicin inicial de la pgina ser en la parte de la derecha.
Cambiamos la posicin desde el Panel Propiedades a X 0 e Y 0.
25. Y le damos al smbolo el nombre de instancia pagina. En este clip cargaremos las
pginas para que d la sensacin de que estamos pasando las hojas.
26. Nos colocamos en el fotograma 2 y creamos un nuevo fotograma clave pulsando F6.
Dejaremos el fotograma 1 libre para detener la pelcula ah y avanzar al fotograma 2
ms tarde para iniciar la animacin.
27. Nos colocamos en el fotograma 41 y creamos otro fotograma clave (F6), aqu
terminar la animacin de la hoja.
28. En el fotograma 41 situaremos el smbolo pagina en las coordenadas X -300 e Y 0.
Este sera el punto final de la animacin, con la hoja totalmente pasada.
29. Sobre la lnea de tiempo, hacemos clic derecho, y en el men contextual elegimos
Crear interpolacin clsica. Hemos creado la interpolacin.
30. Ahora crearemos el punto intermedio. Nos colocamos en el fotograma 21 y creamos
un fotograma clave (de nuevo F6).
31. En este fotograma, seleccionamos el smbolo pagina y modificamos las coordenadas
del smbolo en el Panel Propiedades a X 0 e Y 0, y su ancho AN a 1 px.
32. Ya tenemos la primera animacin de la hoja. Ahora crearemos la animacin de
simular que pasamos a la hoja anterior. Para ello creamos un nuevo fotograma
clave en la posicin 42 (que ser la posicin inicial de la hoja) y otro en el
fotograma 82 (la posicin final).
33. Igual que antes, colocamos la hoja en su sitio en el fotograma 82, esto es, en la parte
derecha. Para ello, selecciona el fotograma y en l haz clic en el smbolo. Modifica
las coordenadas del Panel Propiedades a X 0 e Y 0.
34. En la lnea de tiempo, hacemos clic derecho en cualquier fotograma intermedio (por
ejemplo, 60) y seleccionamos Crear interpolacin clsica.
35. Ahora crearemos un fotograma clave en el fotograma 62, donde crearemos la
posicin intermedia.
36. Modifica las coordenadas a X 0 e Y 0 en el Panel Propiedades, y el ancho AN a 1.
37. Ya tenemos la animacin creada. Mejormosla ajustando la aceleracin de sta.

Para ello, selecciona un fotograma intermedio de la primera animacin (por
ejemplo, 10) y en el Panel Propiedades escribe -100 en el campo Aceleracin.
38. Haz lo mismo para la tercera animacin (en el fotograma 50, por ejemplo).
39. Para la segunda y cuarta animacin (fotogramas 30 y 70, por ejemplo) escribe 100
en Aceleracin.
Ahora s hemos terminado.
40. Ahora crearemos una nueva capa donde introduciremos las acciones. Pulsa el botn
Insertar capa
y llmala acciones.
41. Crea fotogramas clave en las posiciones 1, 2, 21, 41, 42, 62 y 82. O lo que es lo
mismo, en las mismas posiciones en las que encontraras fotogramas claves en la
capa de la animacin.
42. Abre el Panel Acciones desde Ventana Acciones selecciona el fotograma 1 y
escribe en el Panel Acciones stop();. Haz lo mismo en los fotogramas 41 y 82. Esto
es para que la animacin se detenga en el principio del todo y despus de que realice
la pasada de hoja.
43. Crearemos las etiquetas de fotograma que indicaba el enunciado. Selecciona el
fotograma 2 de la capa donde tienes la animacin y escribe en el Panel Propiedades
siguiente.
44. Le damos la etiqueta anterior al fotograma 42 del mismo modo.
45. Ahora slo faltar introducir el cdigo para que se carguen las pelculas. Pero antes
colocaremos el clip que hemos creado en la pelcula principal. Haz clic en Escena 1.
46. Ahora selecciona la capa hoja y arrastra el clip de pelcula hoja_movimiento al
Escenario.
47. Modifica sus coordenadas en el Panel Propiedades y colcalo en X 300 e Y 0.
48. Dale el nombre de instancia hoja_movimiento para poder referirnos a l desde el
cdigo.
49. Ahora pasaremos a introducir el cdigo que necesitamos. Sitate en el fotograma 1
de la capa acciones en la pelcula principal y abre el Panel Acciones (F9).
50. Escribe lo siguiente:
?
stop();
addEventListener("irSiguiente",irSiguiente);
function irSiguiente(event) {
hoja_movimiento.gotoAndPlay('siguiente');
}
addEventListener("irAnterior",irAnterior);
function irAnterior(event) {
hoja_movimiento.gotoAndPlay('anterior');
}
Como se comentaba en el enunciado, al pulsar en los botones de las pginas, se

producen los eventos "irAnterior" e "irSiguiente", porque as lo hemos programado
en las pginas. Lo que haremos ser escuchar esos eventos, y cuando se produzcan,
ir a la etiqueta correspondiente de hoja_movimiento para simular el movimiento.
51. Haz doble clic sobre el smbolo hoja_movimiento para acceder a su lnea de tiempo.
52. En el primer fotograma de la capa acciones, introduce el siguiente cdigo:
?
stop();
var vista:Number=0;
var
hojasIzquierda:Array=["","contenido_actualidad.swf","contenido_depo
rtes.swf",
"contenido_naturaleza.swf","contenido_ultima.swf"];
var
hojasDerecha:Array=["contenido_portada.swf","contenido_ciencia.swf"
,
"contenido_espectaculos.swf","contenido_politica.swf",""];
Aqu hemos parado la pelcula y hemos definido las variables que utilizaremos en el
resto de la pelcula.
En la variable vista almacenamos el momento en el que nos encontramos, y en los
arrays hojasIzquierda y hojasDerecha introducimos los archivos SWF que
deberemos cargar. Para ello hemos tenido en cuenta la siguiente tabla:
vista
hojasIzquierda
hojasDerecha
portada
actualidad
ciencia
deportes
espectaculos
naturaleza
politica
ultima
Acude a esta tabla para entender los siguientes fragmentos de cdigo.

53. Como el cdigo para cargar los archivos SWF va a ser repetitivo, lo simplificaremos
creando la siguiente funcin:
?
function cargarSWF(enPagina:MovieClip, archivo:String) {
if(archivo!="") {
enPagina.visible = true;
var loader:Loader;
loader = new Loader();
loader.load(new URLRequest(archivo));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
insertar);
function insertar(event):void {
enPagina.addChild(loader);
}
} else {
enPagina.visible=false;
}
}
Lo que hace esta funcin es utilizar un objeto Loader para cargar un archivo que
indicamos en el parmetro archivo y mostrarlo en la pgina que le indiquemos en
enPagina. Adems, si archivo est vaco, oculta la pgina.
54. Por ltimo, en este mismo fotograma, cargamos la primera pgina para que no
quede la pgina vaca. Lo hacemos llamando a la funcin que hemos definido:
?
cargarSWF(pagina, hojasDerecha[vista]);
Con esto haremos que en el smbolo pagina (que se encuentra sobre los smbolos
pagina_izquierda y pagina_derecha) se cargue la primera hoja del peridico.
Recuerda que la variable vista todava tiene el valor 0.
55. Selecciona el fotograma 2 y escribe lo siguiente en el Panel Acciones:
?
with (parent) {
cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista+1]);
}
cargarSWF(pagina, hojasDerecha[vista]);
Observa el uso de parent para acceder al smbolo pagina_derecha. Lo empleamos

porque este smbolo no est dentro del actual (hoja_movimento, a la que nos
referimos como this), si no en el nivel superior, en la pelcula general, que es el
elemento padre (parent).
Por tanto, lo que hacemos es cargar el contenido de la hoja de peridico que se va a
ver por detrs de hoja_movimiento en pagina_derecha cuando pasemos la pgina.
Tambin cargamos en el smbolo pagina la hoja actual.
56. Selecciona el fotograma 21 y escribe lo siguiente en el Panel Acciones:
?
cargarSWF(pagina, hojasIzquierda[vista+1]);
vista++;
En este punto el smbolo pagina se encuentra reducido tanto que es invisible.

Aprovechamos y cambiamos el contenido con la siguiente hoja (que se encontrar
almacenada en la posicin vista+1).
Aumentamos la variable vista en 1 con vista++; y listo.
57. Selecciona el fotograma 41 y escribe lo siguiente en el Panel Acciones despus de la
lnea stop();
?
stop();
with (parent) {
cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista]);
}
Aqu actualizamos el contenido del smbolo pagina_izquierda por si decidisemos

retroceder en el peridico. As cuando le demos la vuelta a la pgina se ver el
contenido correcto.
58. El cdigo en el resto de fotogramas claves es idntico al que hemos visto (pues la
accin es similar) pero disminuyendo la variable vista a cada pasada de pgina y
permutando las matrices hojasIzquierda y hojasDerecha.
El cdigo en el fotograma 42 es:
?
with (parent) {
cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista-1]);
}
cargarSWF(pagina, hojasIzquierda[vista]);
El cdigo en el fotograma 62 es:

?
cargarSWF(pagina, hojasDerecha[vista-1]);
vista--;
Y el cdigo en el fotograma 82 es:

?
stop();
with (parent){
cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista]);
}
Ejercicios unidad 19: Formularios ActionScript

Ejercicio 1: Formulario
Debers reproducir el siguiente formulario Flash:
Tamben debers establecer el orden de tabulacin de los objetos y el botn por defecto.
Adems, debers darle funcionalidad al botn Reset y Enviar. El primero limipando los
datos del formulario y el segundo recogiendolos validndolos y enviandolos a un archivo
php.
El validador del email deber comprobar que la direccin esta correctamente escrita (para
ello utiliza funcin indexOf y lastIndexOf).
Ayuda ejercicios unidad 19: Formularios ActionScript

Ejercicio 1: Formulario
1.
2.
3.
4.
Abre el programa Flash CS5.

Crea un nuevo documento haciendo clic en Archivo Nuevo.
Selecciona Documento de Flash en el dilogo que se abrir y pulsa Aceptar.
Se abrir un documento en blanco. Lo guardaremos para darle un nombre y poder
guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo
Guardar. Dale un nombre, selecciona una carpeta y pulsa Guardar.
Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + S o

haciendo clic en Archivo Guardar.
5. Primero insertaremos los elementos de formulario que vamos a utilizar, para ello
antes tendremos que abrir el Panel Componentes desde Ventana Componentes.
6. Haz clic sobre el elemento User Inteface y arrastra a la Biblioteca los siguientes
elementos: Button, CheckBox, ComboBox, Label, RadioButton y TextInput.
7. Ahora que ya tenemos los elementos que necesitaremos vamos a crear instancias de
ellos en el Escenario. Arrastra un elemento TextInput y un Label al Escenario.
8. En el Panel Inspector de Componentes (Ventana -- Inspector de Componentes)
modificaremos el campo text de Label a Nombre:. Le daremos a TextInput el
nombre de instancia nombre_txt.
9. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de
Componentes modificamos el campo text de Label a Apellidos: y le damos a
TextInput el nombre de instancia apellidos_txt.
10. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de
Componentes modificamos el campo text de Label a E-mail: y le damos a TextInput
el nombre de instancia mail_txt.
11. Arrastramos un elemento ComboBox al Escenario, en el Inspector de Componentes
modificamos el campo data y aadimos la siguiente lista de elementos:
?
word
excel
access
powerp
outlook
12. En el campo labels introduciremos la siguiente lista de elementos:

?
Microsoft Word
Microsoft
Microsoft
Microsoft
Microsoft
Excel
Access
PowerPoint
Outlook
13. Le damos el nombre de instancia producto_cmb.

14. Arrastramos de la Biblioteca tres componentes RadioButton al Escenario, en el
Panel Parmetros les daremos los siguientes valores:
?
Botn de opcin 1:
nombre de instancia: buscadores_rdo
groupName=encontrar
label= Buscadores
selected=true
value=buscadores
Botn de opcin 2:
nombre de instancia: publicidad_rdo
groupName=encontrar
label= Publicidad
selected=false
value=publicidad
Botn de opcin 3:
nombre de instancia: otros_rdo
groupName=encontrar
label= Otros:
selected=false
value=
15. Arrastramos un componente TextInput que situaremos a la derecha del botn de

opcin Otros, en el Inspector de Componentes le cambiaremos el campo editable a
false y le daremos el nombre de instancia otros_txt.
16. Arrastramos un componente CheckBox al Escenario, en el Inspector de
Componentes cambia el campo label a Desea recibir informacin de nuestras
novedades, y el campo selected a true.
17. Dale el nombre de instancia info_chk.
18. Arrastra dos componentes Button al Escenario, en el Inspector de Componentes dale
a uno el valor Reset en label y el nombre de instancia reset_btn. Al otro llmale
enviar_btn y modifica el campo label a Enviar.
19. Ya tenemos todos los objetos de formulario en la pelcula. Selecciona la
herramienta Transformacin Libre
y modifica los anchos de aquellos elementos
que, o bien no se puedan leer completamente, o necesiten ms espacio (como los
campos apellidos, email y productos).
20. Una vez tengas el formulario entero haz clic sobre la herramienta Seleccin
emplaza los objetos de manera correcta.
21. Ahora pasaremos a crear las acciones. Para ello creamos una nueva capa haciendo
clic en el botn Insertar capa
en la lnea de tiempos y la llamamos acciones.
22. Seleccionamos el fotograma 1 de la capa acciones y abrimos el Panel Acciones
(Ventana Acciones).
23. Al principio del todo escribimos:
?
1stop();
2System.useCodepage = true;
Paramos la animacin en la primera lnea, no necesitamos que haga nada ms
porque no existen ms fotogramas. Si no lo hicisemos estara reproducindose todo
el rato el fotograma 1 una vez detrs de otra.
Con la segunda lnea hacemos que Flash utilice la pgina de cdigos tradicional del
sistema operativo en el que se ejecuta el reproductor para que los acentos y ees que
escribamos se enven correctamente al archivo php que enviar el formulario por
mail.
24. Ahora escribe lo siguiente:
?
nombre_txt.tabIndex = 1;
apellidos_txt.tabIndex = 2;
mail_txt.tabIndex = 3;
producto_cmb.tabIndex = 4;
buscadores_rdo.tabIndex = 5;
publicidad_rdo.tabIndex = 6;
otros_rdo.tabIndex = 7;
otros_txt.tabIndex = 8;
info_chk.tabIndex = 9;
reset_btn.tabIndex = 10;
enviar_btn.tabIndex = 11;
import fl.managers.FocusManager;
var def:FocusManager = new FocusManager (this);
def.defaultButton = enviar_btn;
nombre_txt.stage.focus=nombre_txt;
Esto har que se establezca el orden de tabulacin. Las ltimas lneas establecen el
botn Enviar como el botn por defecto y colocan el foco en el campo Nombre.
25. Seguimos con:
?
reset_btn.addEventListener(MouseEvent.CLICK, escuchadorLimpiar);
function escuchadorLimpiar(event) {
nombre_txt.text="";
apellidos_txt.text="";
mail_txt.text="";
producto_cmb.selectedIndex=0;
buscadores_rdo.selected=true;
otros_txt.text="";
otros_txt.editable=false;
info_chk.selected=true;
salida_txt.text="";
}
Para limpiar los campos cuando se pulse el botn Reset. Hemos creado un
escuchador asociado al botn reset_btn. Dentro del evento click inicializamos todos
los campos a sus estados iniciales.
26. Despus escribimos:
?
otros_rdo.addEventListener(Event.CHANGE, escuchadorOtros);
function escuchadorOtros(event) {
if (otros_rdo.selected) {
otros_txt.editable=true;
otros_txt.stage.focus = otros_txt;
} else {
otros_txt.text="";
otros_txt.editable=false;
}
}
Aqu hemos configurado un escuchador para el boton otros_rdo, si este se encuentra

seleccionado otros_txt ser editable y el foco se pasara all. Si no se encuentra
seleccionado, se vaca el contenido de otros_txt y deja de ser editable.
27. Ahora escribe la parte de envo:
?
enviar_btn.addEventListener("click", verificar);
function verificar(event) {
salida_txt.text="";
if (nombre_txt.text.length==0) {//Verificacin del Nombre
salida_txt.text="No ha Introducido su nombre";
nombre_txt.stage.focus=nombre_txt;
return false;
} else if (apellidos_txt.text.length == 0) {//Verificacin del
Apellido
salida_txt.text="No ha Introducido sus apellidos";
apellidos_txt.stage.focus=apellidos_txt;
return false;
} else if (!esMail(mail_txt.text)) {//Verificacin del correo
salida_txt.text="No ha Introducido un correo electrnico

vlido";
mail_txt.stage.focus=mail_txt;
return false;
} else if (otros_rdo.selected && otros_txt.text.length == 0)
{//Verificacin de otros_txt
salida_txt.text="Indique dnde nos econtr";
otros_txt.stage.focus=otros_txt;
return false;
}
//Guardamos las variables para el envio
var envio:URLVariables = new URLVariables();
envio.nombre=nombre_txt.text;
envio.apellidos=apellidos_txt.text;
envio.email=mail_txt.text;
envio.producto=producto_cmb.selectedItem;
if (buscadores_rdo.selected) {
envio.encontrar=buscadores_rdo.value;
} else if (publicidad_rdo.selected) {
envio.encontrar=publicidad_rdo.value;
} else if (otros_rdo.selected) {
envio.encontrar=otros_txt.text;
}
envio.masinfo=info_chk.selected;
//Envio a la pagina .php
var urlPhp:URLRequest=new
URLRequest("http://www.aulaclic.es/flashcs5/flash_ejemplos/formulario/enviarCorreo.php");
urlPhp.method=URLRequestMethod.POST;
urlPhp.data=envio;
var enviar:URLLoader = new URLLoader();
enviar.addEventListener( Event.COMPLETE, enviado );//Si es
enviado, realizara la funcin enviado
enviar.addEventListener( IOErrorEvent.IO_ERROR, erroNoEnvio
);//Si ocurre un error, realizara la funcin errorNoEnvio
enviar.load( urlPhp );
trace(envio);
}
//Funcin para vereificar el correo
function esMail(mail:String) {
if
(mail.indexOf("@")>0&&mail.indexOf("@")==mail.lastIndexOf("@")) {
if
(mail.lastIndexOf(".")>mail.indexOf("@")+1&&mail.lastIndexOf("."))
{
return true;
} else {
return false;
}
} else {
return false;
}
}
//Funcin si s enviado
function enviado( e:Event ):void {
escuchadorLimpiar();
salida_txt.text="Mensaje enviado!";
}
//Funcin si no s enviado
function erroNoEnvio( e:IOErrorEvent ):void {
salida_txt.text="Error intenta nuevamente.";
}
Hemos configurado un escuchador para el botn Enviar. Cuando se hace clic en l

se ejecuta todo este cdigo.
Presta especial atencin a la validacin del email.
28. El archivo enviarCorreo.php podra tener esta estructura:
?
<?php
header("Cache-Control: no-cache, must-revalidate");
$mensaje = $_POST['nombre'] . " " . $_POST['apellidos'] . " ";
$mensaje .= "(" . $_POST['email'] . ")\r\n\n";
$mensaje .= "Quiere informacin sobre: " . $_POST['producto'] .
"\r\n\n";
$mensaje .= "Conoci la web a travs de " . $_POST['encontrar'] .
"\r\n\n";
$mensaje .= ($_POST['masinfo'] ? "S" : "No") . " quiere ms
informacin.\r\n";
$cabeceras = "From: webmaster@dominio.com" . "\r\n" . "Reply-To:
webmaster@dominio.com" . "\r\n";
mail('nombre@correo.com', 'Formulario', $mensaje, $cabeceras);
echo ("exito=true");
?>
Pero esto queda totalmente en tus manos.
Ejercicios unidad 20: Los filtros

Ejercicio 1: Selector de Filtros
Utiliza el archivo fuente filtros.fla que encontraras en la carpeta ejercicios/filtros del curso.
Como ya hemos visto, averiguar los filtros que afectan a un clip es realmente complicado,
debers idear una forma para poder gestionarlos y mantener los que estn activos cada vez
que se pulse uno de los botones.
No debers reproducir el aspecto de los filtros, puedes personalizarlos como ms te guste.
Ayuda ejercicios unidad 20: Los filtros

Ejercicio 1: Selector de Filtros
1. Abre el archivo filtros.fla que encontrars en la carpeta ejercicios/filtros del curso.
2. Haz clic en el primer fotograma de la capa acciones, abre el Panel Acciones desde
Ventana Acciones o pulsando la tecla F9. Aqu introduciremos el cdigo
necesario para darle funcionalidad a la pelcula.
3. Ahora crearemos unas cuantas variables para saber en cada momento si un filtro se
encuentra activo o no. Escribe lo siguiente a continuacin:
?
var filtroSombra:Boolean = false;
1var filtroDesenfocar:Boolean = false;
2var filtroIluminado:Boolean = false;

3var filtroBisel:Boolean = false;
var filtroIluminadoDeg:Boolean = false;
4var filtroBiselDeg:Boolean = false;
5var filtroAjustarColor:Boolean = false;
6
7
4. A continuacin, definimos cada uno de los filtros, ya que sus propiedades no
cambian:
?
var sombra:DropShadowFilter=new
DropShadowFilter(20,70,0x000000,0.5,5,5,10,3);
var desenfocar:BlurFilter=new BlurFilter(5,5,3);
var iluminado:GlowFilter=new GlowFilter(0xFFFF00,0.7,20,20,50,3);
var bisel:BevelFilter=new
1BevelFilter(1,45,0xFFFFFF,0.5,0x000000,0.5,5,5,10,3,"inner");
2var iluminadoDeg:GradientGlowFilter=new
3GradientGlowFilter(0,45,[0xFFFFFF,0xFF0000],[0,1],[0,255],100,100,2
,3,"outer");
4var biselDeg:GradientBevelFilter=new
5GradientBevelFilter(3,45,[0x0000FF,0xFF0000,0xFFFFFF],[1,0,1],[0,12
68,255],20,20,3.4,3,"inner");
7var ajustarColor:ColorMatrixFilter=new
ColorMatrixFilter([0.250807255506516,0.00463615544140339,0.68455660
3431702,0,34.8300018310547,0.271924287080765,0.806314527988434,0.13823889195919,0,34.8300018310547,0.359950125217438,0.976227760314941,0.323722183704376,0,34.82999801
63574,0,0,0,1,0]);
5. Ahora, para cada botn deberemos creamos la funcin que alterna la variable que
indica si est activo. Para ello la negamos. Despus llamamos a la funcin
mostrarFiltros, que es la que se encarga de aplicar los filtros al elemento.
?
1
2
3
4
5
6
7
8
9
1
0
1
1
1
sombra_btn.addEventListener(MouseEvent.CLICK,aplicarSombra);
function aplicarSombra(event:MouseEvent):void {
filtroSombra=! filtroSombra;
mostrarFiltros();
}
desenfocar_btn.addEventListener(MouseEvent.CLICK,aplicarDesenfoca
r);
function aplicarDesenfocar(event:MouseEvent):void {
filtroDesenfocar=! filtroDesenfocar;
mostrarFiltros();
}
iluminado_btn.addEventListener(MouseEvent.CLICK,aplicarIluminado)
;
function aplicarIluminado(event:MouseEvent):void {
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
filtroIluminado=! filtroIluminado;
mostrarFiltros();
}
bisel_btn.addEventListener(MouseEvent.CLICK,aplicarBisel);
function aplicarBisel(event:MouseEvent):void {
filtroBisel=! filtroBisel;
mostrarFiltros();
}
iluminadoDeg_btn.addEventListener(MouseEvent.CLICK,aplicarIlumina
dodeg);
function aplicarIluminadodeg(event:MouseEvent):void {
filtroIluminadoDeg=! filtroIluminadoDeg;
mostrarFiltros();
}
biselDeg_btn.addEventListener(MouseEvent.CLICK,aplicarBiseldeg);
function aplicarBiseldeg(event:MouseEvent):void {
filtroBiselDeg=! filtroBiselDeg;
mostrarFiltros();
}
ajustarColor_btn.addEventListener(MouseEvent.CLICK,aplicarColor);
function aplicarColor(event:MouseEvent):void {
filtroAjustarColor=! filtroAjustarColor;
mostrarFiltros();
}
3
6
3
7
3
8
3
9
4
0
4
1
6. Finalmente definiremos la funcin mostrarFiltros que se ejecutar cada vez que se
pulse un botn. Evala cada variable para decidir si aplica el filtro o no:
?
1
2
3 function mostrarFiltros() {
var matrizFiltros:Array=[];
4
if (filtroSombra) {
5
matrizFiltros.push(sombra);
6
}
7
if (filtroDesenfocar) {
matrizFiltros.push(desenfocar);
8
}
9
if (filtroIluminado) {
10
matrizFiltros.push(iluminado);
11
}
12
if (filtroBisel) {
matrizFiltros.push(bisel);
13
}
14
if (filtroIluminadoDeg) {
15
matrizFiltros.push(iluminadoDeg);
16
}
17
if (filtroBiselDeg) {
matrizFiltros.push(biselDeg);
18
}
19
if (filtroAjustarColor) {
20
matrizFiltros.push(ajustarColor);
21
}
miClip.filters=matrizFiltros;
22
}
23
24
25
Al principio de la funcin creamos una variable de tipo Array que almacenar los
filtros activos (los que se encuentren a true). Luego utilizando el condicional if
vemos si el filtro se encuentra activado, en caso afirmativo, creamos el filtro (con
las opciones que pusimos la principio) e introducimos el filtro en la matriz

matrizFiltros.
Al final volcamos los filtros guardados en matrizFiltros en la propiedad filters de
miClip.
Hemos conseguido que se puedan cargar y descargar los filtros con una simple variable que
evala si el filtro se encuentra activo o no.
Ejercicios unidad 21: Vdeo

Ejercicio 1: Mi Vdeo
Utiliza el archivo fuente video.fla que encontrars en la carpeta ejercicios/video del curso.
Tu tarea consistir en importar el video video.mov que encontrars en la misma carpeta y
crear 6 puntos de navegacin, en los segundos 0, 10, 20, 30, 40 y 50.
Luego debers aadirle funcionalidad a los botones mediante ActionScript.

Ayuda ejercicios unidad 21: Vdeo

Ejercicio 1: Mi Vdeo
1. Abre el archivo video.fla que encontrars en la carpeta ejercicios/video del curso.
2. Haz clic en Archivo Importar Importar Vdeo para acceder al dilogo
Importar vdeo.
3. En dilogo, pulsa en el botn Iniciar Adobe Media Encoder.
4. En Adobe Media Encoder, pulsa el botn Aadir y selecciona el archivo video.flv
que encontrars en la misma carpeta.
5. Aadiremos el video al que queremos insertar los puntos de referencia, el video

tiene que estar en formato .flv o .f4v, para ello pulsamos en el botn Ajustes.
6. Ahora ya podemos insertar nuestros puntos de referencia en el hueco que tenemos

debajo de la previsualizacion del video.
7. Pulsa el botn
para aadir un punto de referencia, llmalo 1 y dale el tipo
Navegacin .
8. Sita el cabezal de reproduccin en el segundo 10 y pulsa el botn
, llama al
punto de referencia 2 y dale el tipo Navegacin.
, llama al
, llama al
, llama al
, llama al
13. Pulsa Aceptar cuando ya tengas los puntos de referencia insertados.

14. Una vez terminado pulsamos Iniciar Cola, esto guardara nuestro video con los
puntos de referencia ya insertados en l.
15. Cuando se haya completado, cierra Adobe Media Encoder.
16. Volvers al dilogo Importar vdeo. Cirralo tambin.
17. Selecciona el componente FLVPlayback que haba en el Escenario y accede a sus
Propiedades.
18. Busca la propiedad source y haz clic sobre ella para buscar un archivo.
19. Busca el archivo que se ha creado (video.flv o video.f4v segn el formato elegido) y
brelo.
Ahora, insertaremos el cdigo ActionScript necesario para controlar el vdeo. Para
ello, lo primero que has de hacer es dares nombres a las distintas instancias que hay
en el escenario.
20. Al componente de vdeo, llmalo miVideo.
Al botn de retroceder, llmalo retro_rapido.
Al botn de parar, llmalo btnStop.
Al botn de reproducir, llmalo btnPlay.
Al botn de pausar, llmalo btnPause.
Al botn de avanzar, llmalo avance_rapido.
Al botn de subir volumen, llmalo vol_mas.
Al botn de bajar volumen, llmalo vol_men.
21. Para acabar, creamos una nueva capa llamada acciones donde insertamos el cdigo
necesario:
?
miVideo.autoRewind=true; //Para que al pulsar STOP vuelva
//al principio
//Boton retroceso <<
retro_rapido.addEventListener(MouseEvent.CLICK,retroceder);
function retroceder(event:MouseEvent):void {
miVideo.seekToPrevNavCuePoint();
}
//Boton stop []
btnStop.addEventListener(MouseEvent.CLICK,detener);
function detener(event:MouseEvent):void {
miVideo.stop();
}
//Boton play >
btnPlay.addEventListener(MouseEvent.CLICK,reproducir);
function reproducir(event:MouseEvent):void {
miVideo.play();
}
//Boton pausa ||
btnPause.addEventListener(MouseEvent.CLICK, pausar);
function pausar(event:MouseEvent):void {
miVideo.pause();
}
//Boton avance >>
avance_rapido.addEventListener(MouseEvent.CLICK, avanzar);
function avanzar(event:MouseEvent):void {
miVideo.seekToNextNavCuePoint();
}
//Volumen
//Subir +
vol_mas.addEventListener(MouseEvent.CLICK, subirVolumen);
function subirVolumen(event:MouseEvent):void {
if (miVideo.volume<100) {
miVideo.volume=miVideo.volume+10;
}
}
//Bajar vol_men.addEventListener(MouseEvent.CLICK, bajarVolumen);
function bajarVolumen(event:MouseEvent):void {
if (miVideo.volume>0) {
miVideo.volume=miVideo.volume-10;
}
}
22. Y solo queda probarlo.
Ejercicios unidad 22: Juegos interactivos

Ejercicio 1: Proyectiles
Debers reproducir el siguiente juego Flash:
Utiliza el archivo fuente arma.fla que encontraras en la carpeta ejercicios/arma del curso.
Tu tarea consistir en crear el cdigo necesario para que el juego funcione. Debers seguir
las siguientes instrucciones:
Crear un cursor personalizado.

Generar el arma importndola a travs de cdigo desde la Biblioteca.
Generar, tambin con ActionScript, los bloques que la rodearn.
Hacer que el arma siga al ratn, para que podamos apuntar con l.
Crear un bloque de bonus cada vez que se destruyan 4 proyectiles.
Subir de nivel cada vez que se destruyan 40 proyectiles.
Disparar un rayo con el arma cada vez que se pulsa la tecla Espacio.
Generar mediante ActionScript las estadsticas del juego incluyendo el nivel en el

que nos encontramos y el nmero de proyectiles destruidos.
Crear proyectiles aleatoriamente. Debers controlar si chocan contra un bloque, un
rayo o el arma. Si salen de la pantalla debers eliminarlos!
Ayuda ejercicios unidad 22: Juegos

interactivos (I)
Ejercicio 1: Proyectiles
1. Abre el archivo arma.fla que encontrars en la carpeta ejercicios/arma del curso.
2. Selecciona el objeto arma de la Biblioteca, haz clic derecho sobre l y selecciona
Propiedades
3. Si no se ven todas las propiedades, pulsa en Avanzadas.
4. Activa la opcin Exportar para ActionScript.
5. En Clase, dale el nombre Arma y pulsa Aceptar.
6. Nos aparecer un mensaje de aviso, pulsamos Aceptar.
7. Selecciona el objeto bloque de la Biblioteca, haz clic derecho sobre l y selecciona
Propiedades.
8. Activa la opcin Exportar para ActionScript, dale la clase Bloque y pulsa Aceptar.
9. Selecciona el objeto bonus de la Biblioteca, haz clic derecho sobre l y selecciona
Propiedades.
10. Activa la opcin Exportar para ActionScript, dale la clase BloqueBonus y pulsa
Aceptar.
11. Selecciona el objeto cursor de la Biblioteca, haz clic derecho sobre l y selecciona
Propiedades.
12. Activa la opcin Exportar para ActionScript, dale la clase Cursor y pulsa Aceptar.
13. Selecciona el objeto rayo de la Biblioteca, haz clic derecho sobre l y selecciona
Propiedades.
14. Activa la opcin Exportar para ActionScript, dale la clase Disparo y pulsa Aceptar.
Ahora que hemos preparado todos los objetos para poder tratarlos desde
ActionScript pasaremos a escribir el cdigo.
Lo primero que haremos serla crear las clases que utilizaremos, en archivos
ActionScript.
15. Haz clic en el men Archivo Nuevo, selecciona Archivo ActionScript y pulsa
Aceptar.
16. Se abre un archivo en blanco. Escribe el siguiente cdigo para crear la clase que
tendr los mtodos para los disparos:
?
package {
//Importamos las clases necesarias
import flash.display.DisplayObject;
//Y creamos nuestra clase como una subclase (extends) de
MovieClip,
//para que disponga de sus mtodos
public class Disparo extends flash.display.MovieClip
{
public function Disparo(arma:Arma)
{
//Este mtodo asigna al disparo la rotacin y posicin
del arma que lo disparar
this.rotation = arma.rotation;
this.x = arma.x;
this.y = arma.y;
}
public function avanzar()
{
//Este mtodo mueve el disparo por la pantalla, con el
ngulo de rotacin
var radianes:Number = Math.PI / 180 * this.rotation;
this.x += Math.sin(radianes) * 13;
this.y -= Math.cos(radianes) * 13;
}
public function esta_dentro(alto:Number, ancho:Number)
{
//Este mtodo indica si el disparo sigue dentro de la
pantalla,
//Si no se ha salido ni por arriba, ni abajo, ni por la
izquierda o derecha
return !(this.x < 0 || this.y < 0 || this.x > ancho ||
this.y > alto);
}
}
}
17. Guarda el archivo junto a arma.fla, llamndolo Disparo.as. Es importante que el

nombre sea el de la clase.
Ayuda ejercicios unidad 22: Juegos

interactivos (II)
18. Crea otro nuevo archivo ActionScript para la clase que llevar los mtodos y
propiedades de los proyectiles.
19. Escribe el siguiente cdigo:
package
{
//Importamos las clases necesarias
import flash.display.DisplayObject;
//Y creamos nuestra clase como una subclase (extends) de MovieClip,
para que disponga de sus mtodos
public class Proyectil extends flash.display.MovieClip
{
private static var velocidad_base:Number = 3;//Velocidad base de
los proyectiles
private var velocidad:Number;// Velocidad del proyectil
private var _explotando:Boolean = false;//Indica si ha comenzado a
explotar
public function Proyectil(){}
public function disparar(nivel:Number, ancho:Number, alto:Number)
{
//Le pasamos como argumentos el nivel actual del juego, y el
ancho y alto del rea de disparo
//Crearemos, para cada tipo de proyectil, tres escalas
posibles, de forma aleatoria.
var escala:Number = num_aleatorio(0,2);//escala influir en el
tamao y la velocidad
//Calculamos la velocidad, sumando la velocidad base + la
parte que depende del nivel + la
// que depende de la escala
velocidad = velocidad_base+nivel*1.5+(2-escala);
//calculamos el nuevo tamao en funcin de la escala (0 =
tamao original, 2= 80%)
this.width = this.width*((10-escala)/10);
this.height = this.height*((10-escala)/10);
//Calcualmos, de forma aleatoria el punto de salida del
proyectil en la parte superior
//Dejamos la mitad del ancho del proyectil como margen para
que no salga una parte fuera de la pantalla
var puntoSalida:Number = num_aleatorio(this.width / 2,ancho this.width / 2);//Zona de salida
//Asignamos al proyectil su posicin inicial
this.x = puntoSalida;
this.y = 0;
//Calculamos, de forma aleatoria, el punto de impacto.
Limitamos la zona de posible impacto, dejando
//1/4 del ancho de margen a cada lado, para que la mayora de
proyectiles vayan hacia el arma
var puntoImpacto:Number = num_aleatorio(ancho*(1/4),
ancho*(3/4));
//Sabiendo las coordenadas de salida e impacto, podemos
utilizar calcular el ngulo con Math.atan2
//Como el resultado es en radianes, lo convertimos a grados
(radianes*180/Math.Pi)
//Esos grados son la rotacin que daremos al objeto
this.rotation= 270+(Math.atan2( alto - this.y,puntoImpactopuntoSalida) * 180/Math.PI);
}
public function avanzar()
{
//Este mtodo avanza el proyectil por la pantalla

//Convertimos el ngulo de rotacin a radianes
var radianes:Number = Math.PI / 180 * this.rotation;
//Y ayudndosnos de frmulas triginomtricas, sumamos la
velocidad la posicin
this.x -= Math.sin(radianes)*(velocidad);
this.y += Math.cos(radianes)*(velocidad);
}
public function esta_dentro(alto:Number)
{
//averiguaremos si el proyectil sigue de la pantalla, si no
ha llegado abajo
return (this.y < alto);
}
public function explotar()
{
//Este mtodo reproduce la animacin de la explosin del
proyectil
if (! _explotando)
{
this.gotoAndPlay("hit");
//Cuando comienza a explotar, cambia _explotando
_explotando = true;
}
}
public function explotando():Boolean
{
//Devuelve True si el proyectil est explotando
return _explotando;
}
private function num_aleatorio(min:Number ,max:Number)
{
//Genera un nmeor aleatorio dentro de un rango
max++;
max = max - min;
return min+(Math.floor((Math.random()*(max*10)))%max);
}
}
}
20. Guarda el archivo llamndolo Proyectil.as, en la misma carpeta que arma.fla y

Disparo.as.
21. En la biblioteca tenemos tres tipos de proyectil, proyectil1, proyectil2 y proyectil3,
y queremos que todos compartan los mtodos de la clase Proyectil.
22. Selecciona el objeto proyectil1 de la Biblioteca, haz clic derecho sobre l y
selecciona Propiedades.
23. Activa la opcin Exportar para ActionScript, dale la clase Proyectil1 y escribe
Proyectil como Clase base. Pulsa Aceptar.
seleccionaPropiedades.
selecciona Propiedades.
Ejercicios unidad 23: Animaciones

avanzadas
Ejercicio 1: Nieve
Debers reproducir la siguiente animacin Flash:
Utiliza un documento en blanco. No podrs crear ningn elemento. Lo debers hacer todo
mediante ActionScript.
Tendrs cumplir los siguientes requisitos:
Dibujar un fondo.
Dibujar una estrella.
Que la estrella tenga un brillo dinmico.
Que la estrella se pueda arrastrar.
Dibujar los copos aleatoriamente.
Que los copos desaparezcan (se derritan) al cabo de un tiempo.
Ayuda ejercicios unidad 23: Animaciones

avanzadas
Ejercicio 1: Nieve
1.
2.
3.
4.
5.
Abre un nuevo documento haciendo clic en Archivo Nuevo.

Selecciona ActionScript 3.0 y pulsa Aceptar.
Gurdalo como nieve.fla.
Selecciona el fotograma 1 y abre el Panel Acciones desde Ventana Acciones.
Escribe lo siguiente para dibujar el fondo e importar las clases necesarias:
?
// Importamos las clases necesarias
import flash.filters.BlurFilter;
// Creamos el fondo de la pelcula
var fondo:MovieClip = new MovieClip;
fondo.graphics.beginFill(0x993333);
fondo.graphics.moveTo(0,0);
fondo.graphics.lineTo(550, 0);
fondo.graphics.endFill();
addChild(fondo);
Si lo pruebas, vers que se rellena el fondo con un tono rojo.

6. Escribe lo siguiente para dibujar la estrella y situarla en el centro de la pantalla:
?
//Creamos la estrella
var estrella:MovieClip = new MovieClip ;
estrella.graphics.lineStyle(10, 0x000000, 100, true, "normal",
"none", "miter", 0);
estrella.graphics.beginFill(0xCCFF33, 85);
estrella.graphics.moveTo(20+stage.width/2, -91+stage.height/2);
estrella.graphics.lineTo(22+stage.width/2, -21+stage.height/2);
estrella.graphics.lineTo(84+stage.width/2, 0+stage.height/2);
estrella.graphics.lineTo(-22+stage.width/2, 37+stage.height/2);
estrella.graphics.lineTo(-86+stage.width/2, -56+stage.height/2);
estrella.graphics.lineTo(-22+stage.width/2, -37+stage.height/2);
estrella.graphics.lineTo(20+stage.width/2, -91+stage.height/2);
estrella.graphics.endFill();
addChild(estrella);
Ahora, ya tenemos el fondo y la estrella en el centro.

7. Escribe lo siguiente para aadirle un brillo dinmico a la estrella:
?
var brilloMax:Boolean = false;
var miBrillo:Number = 80;
import flash.filters.GlowFilter;//Necesitamos importar el filtro
estrella.addEventListener(Event.ENTER_FRAME, cambiarBrillo);
function cambiarBrillo(event):void
{
//Hacemos que el brillo se vaya intensificando y atenuando
var brillo:GlowFilter = new
GlowFilter(0xCCCC88,100,miBrillo,miBrillo,1,1);
estrella.filters = [brillo];
if (brilloMax) {
miBrillo += 3;
if (miBrillo > 120) {
brilloMax = false;
}
} else {
miBrillo -= 3;
if (miBrillo < 80) {
brilloMax = true;
}
}
}
8. Por ltimo, aademos las funciones que nos permitan arrastrar y soltar la estrella.
?
1// Funciones para poder mover la estrella
2estrella.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);
function arrastrar(event:MouseEvent):void {
3
estrella.startDrag();// Al mantener pulsada la estrella
4podremos arrastrala
5}
6estrella.addEventListener(MouseEvent.MOUSE_UP, soltar);
7function soltar(event:MouseEvent):void {
estrella.stopDrag();// Cuando soltemos, la estrella
8permanecera en el lugar que deseemos
9}
9. Como la estrella era un nico objeto, lo hemos creado directamente en el panel de
acciones. En cambio, como los copos son muchos objetos iguales, es ms til que
creemos una clase. Haz clic en el men Archivo Nuevo... y elige Clase de
ActionScript 3.0.
10. En el cuadrod e dilogo, especifica Copo como nombre de la clase.
11. El siguiente cdigo lo introduciremos en la Clase (archivo .as) donde incluiremos
todas las funciones y variables para un copo. Calcularemos las posiciones, los
tamaos y las velocidades aleatorias. Mediante la variable vidaCopo controlaremos
si el copo se derrite o no.
?
package {//Importamos las clases necesarias
import flash.display.MovieClip;//Necesitamos MovieClip que es lo
que crearemos
import flash.filters.BlurFilter;//El filtro que emplearemos
import flash.events.Event; //Utilizaremos evento
import flash.events.EventDispatcher; //Y un generador de eventos
//Y creamos nuestra clase como una subclacse (extends) de
MovieClip, para que disponga de sus mtodos
public class Copo extends flash.display.MovieClip {
private var velocidad:Number;// Velocidad de cada del copo
private var estrella:MovieClip;// Objeto estrella que
utilizaremos para saber si choca con ella
private var fondo:MovieClip;// Objeto sobre el que
aparecern los copos
private var vidaCopo:Number=300;// La vida que tendr el
copo antes de derretirse
public function Copo(_estrella:MovieClip, _fondo:MovieClip)
{
this.estrella=_estrella;//Asignamos los parmetros a
sus respectivas propiedades
this.fondo=_fondo;
//dibujamos el copo
this.graphics.beginFill(0xFFFFFF);
this.graphics.moveTo(20, -91);
this.graphics.lineTo(22, -21);
this.graphics.lineTo(84, 0);
this.graphics.lineTo(-22, 37);
this.graphics.lineTo(-86, -56);
this.graphics.lineTo(-22, -37);
this.graphics.lineTo(20, -91);
this.graphics.endFill();
// Inicializamos las variables, posicin del copo, el

desenfoque y su velocidad
this.width=num_aleatorio(2,6); //Tamao aleatorio
this.height=this.width;
this.velocidad=num_aleatorio(2,5); //Velocidad
aleatoria
var des:Number=num_aleatorio(3,5); //Desenfoque
aleatorio
var desenfoque:BlurFilter=new BlurFilter(des,des);
this.filters=[desenfoque];
//Posicin aleatoria, con respecto al fondo
this.x=num_aleatorio(fondo.x,fondo.width);
this.y=fondo.y;
//El evento added se produce al agregar el elemento a
la escena o a un contenedor
//As, no comenzar a caer hasta que no se visualice.
this.addEventListener("added", iniciarCaida);
}
private function iniciarCaida(event):void {
this.addEventListener("enterFrame", caerCopo);
}
// Funcin para saber si choca contra la estrella o llega
al suelo
private function parado():Boolean { //Comprobamos si ha
llegado al fondo o chocado con la estrella
return this.y>=fondo.height-this.height/2 ||
estrella.hitTestPoint(this.x, this.y, true);
}
// Funcin que har caer o parar al copo
private function caerCopo(event) {
if (! parado()) {//Si est cayendo
this.y+=this.velocidad; //Aumentamos Y
} else { //Si est parado...
if (this.vidaCopo) { //Y le queda vida...
this.vidaCopo-=1; //Le quitamos vida
} else { //Si no le queda vida
this.alpha-=0.1; //Lo vamos haciendo
transparente
if (this.alpha<=0) {//Cuando ya no se vea...
//Lo eliminamos, quitando sus eventos
this.removeEventListener("added",
iniciarCaida);
this.removeEventListener("enterFrame",
caerCopo);
// y lanzando un evento que diga a la
pelcula que lo tiene que borrar
dispatchEvent(new Event("copoDerretido",
true));
}
}
}
}
// Funcin para crear el numero aleatorio
private function num_aleatorio(min:Number ,max:Number) {
//Genera un nmero aleatorio dentro de un rango
max++;
max=max-min;
return min+(Math.floor((Math.random()*(max*10)))%max);
}
}
}
12. Guara el archivo con el nombre de la clase, es decir, gurdalo como Copo.as.
13. Para acabar, aade a la pelcula principal (nieve.fla) las funciones que lanzarn el
copo, y la que los borra cuando se produzca el evento copoDerretido.
?
addEventListener(Event.ENTER_FRAME, nevar);
function nevar(event):void{
addChild(new Copo(estrella, fondo));//Creamos un copo y lo
agregamos a la escena
}
addEventListener("copoDerretido", borrarCopo);
function borrarCopo(e:Event):void{
removeChild(Copo(e.target));
}
14. Prueba la pelcula. Nota: en nuestro ejemplo, funciona a 24fps.

Ejercicios Flash CS5 Aula Clic

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ejercicios Flash CS5 Aula Clic

Hochgeladen von

Copyright:

Verfügbare Formate

Unidad 2.

Ejercicio: Utilizar la cuadrcula

Ejercicio paso a paso.

Pulsa en el men Archivo.

8. Selecciona la opcin Editar Cuadrcula para ajustar los parmetros de la cuadrcula

Unidad 2. Ejercicio: Cambiar las

Ejercicio paso a paso.

Haz clic con el botn derecho sobre el fondo de la pelcula.

5. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen

Unidad 2. Ejercicio: Accediendo a paneles

Ejercicio paso a paso

1. Pulsa en el men Ventana.

Unidad 3. Ejercicio: Crear un valo

Ejercicio paso a paso.

4. Guarda el archivo como trabajo.fla. Lo volveremos a utilizar ms adelante.

Unidad 3. Ejercicio: Crear transparencias

Ejercicio paso a paso.

Ahora con Transparencia

Unidad 3. Ejercicio: Colorear un valo

Ejercicio paso a paso

1. Abre el archivo que creamos en el primer ejercicio de la unidad, trabajo.fla.

Seleccionamos el Interior del valo

Seleccionamos el Borde del valo

Unidad 4. Ejercicio: Propiedades del texto

Ejercicio paso a paso.

Veremos esta imagen

Unidad 4. Ejercicio: Crear un flujo de

Ejercicio paso a paso.

Abre el archivo trabajo.fla, utilizado en ele ejercicio anterior.

Unidad 5. Ejercicio: Trabajar con Sonidos

Ejercicio paso a paso.

6. El sonido ya est insertado. Hacemos clic en el Panel Biblioteca (Ventana

Unidad 6. Ejercicio: Alinear objetos

Ejercicio paso a paso

Unidad 7. Ejercicio: Mover objetos entre

Ejercicio paso a paso

5. Seleccionamos Cortar. El rectngulo desaparecer.

Unidad 8. Ejercicio: Crear un smbolo

Ejercicio paso a paso

4. En el campo Nombre introducimos el nombre de nuestro grfico, por ejemplo "Mi

Unidad 8. Ejercicio: Modificar una

Ejercicio paso a paso.

4. Arrastramos el primer smbolo (arcade button - blue) a nuestra rea de trabajo.

Unidad 9. Ejercicio: Exportar un objeto

Ejercicio paso a paso

3 Buscamos en la pestaa Guardar en la carpeta en la que quieras guardar el archivo.

5 Abrimos la pestaa de Tipos de archivo.

Unidad 11. Ejercicio: Crear un botn con

Ejercicio paso a paso.

Dibujamos un rectngulo en el rea de trabajo.

Ahora que ya tenemos el molde, vamos a crear un sencillo efecto de relieve.

El resultado obtenido es el siguiente. Podemos pinchar sobre l y comprobar el efecto.

Unidad 12. Ejercicio: Crear

Ejercicio paso a paso

1. Abre un nuevo archivo ActionScript 3 y dibuja un valo (o lo que ms te agrade) en

9. Desplacemos nuestro clip hacia arriba.

Unidad 12. Ejercicio: Animar texto por

Ejercicio paso a paso.

Esto ltimo es necesario ya que si no lo hiciramos Flash aplicara el movimiento a

Fotogramas. A continuacin vamos pegando los fotogramas (botn derecho

Unidad 13. Ejercicio: Consejos de forma

Necesitaremos consejos de forma para que se realice correctamente.

Ejercicio paso a paso.