EjerciciosFlashCS5AulaClic

7/24/2019 EjerciciosFlashCS5AulaClic

1/113

Unidad 2. Ejercicio: Utilizar la cuadrcula

Objetivo

Crear una cuadrcula que quedar visible al fondo del fotograma (posteriormente no saldren la pelcula) y que nos servir como gua para poder dibujar objetos de forma exacta yprecisa.

Ejercicio paso a paso.

1. Pulsa en el men Archivo.2. Selecciona la opcin Nuevo.3.

Elige ActionScript 3.0.4. 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 cuadrculaa tu gusto (tamao, color de fondo...)

9. Selecciona la opcin Ajuste Ajustar a Cuadrcula del men Ver para que losobjetos que crees se acomoden a las lneas de la cuadrcula, consiguiendo alinearlosde un modo fcil.

Unidad 2. Ejercicio: Cambiar lasdimensiones de la pelcula

Objetivo.

Practicar cmo se pueden cambiar algunos atributos fundamentales de las pelculas.

Ejercicio paso a paso.1. Haz clic con el botn derecho sobre el fondo de la pelcula.2. Selecciona Propiedades del Documento.3. En Unidades de Reglas selecciona Centmetros.4.

A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22,46 y enAltura 16,84.


2/113

5.

Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalenaproximadamente 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


3/113

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 uncolor).

4. Todo lo que dibujemos de ahora en adelante, ser de color verde (podemos usar estemecanismo para cambiar el color de relleno o el color del trazo).


4/113

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 elRectngulo. Si es as, mantn el cursor pulsado durante unos segundos sobre ellapara 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 laforma 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 SHIFTmientras dasforma al valo. (Sucede igual con la Herramienta Rectngulo)

Unidad 3. Ejercicio: Crear transparencias

Objetivo


5/113

Crear un objeto cuyo color sea parcialmente transparente , de modo que se vean los objetosde 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 aulaClicregistrndote 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 encuentredetrs de nuestro relleno.

Unidad 3. Ejercicio: Colorear un valo

Objetivo

Dar color a un elemento simple. Tanto a su interior como a su exterior



6/113

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 ellateral derecho del rea de herramientas y seleccionamos el color que nos guste.Para modificar el color del interior del valo tambin podemos seleccionar un colordirectamente haciendo clic sobre el Panel de Colores existente en el Panel deherramientas junto a la imagen del "Bote de Pintura". O si deseamos modificar elborde, 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. Veremos esta imagen . Escribe dentro el texto Esto es un texto de prueba.5. Hacemos clic en el Propiedades, si es que tenamos minimizado este Panel.6. Haz que el texto se encuentre centrado haciendo clic en7.

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.


7/113

9.

Por ltimo cambia el tamao del texto a 30 y ponlo en Negrita utilizando loscontroles de Tamao y Estilo.

Unidad 4. Ejercicio: Crear un flujo de

textoObjetivo.

Crear un texto que fluya por varios contenedores.


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

2.

Selecciona el elemento texto que creamos en el ejercicio anterior.3.

Haz clic en una de sus esquinas para cambiar su tamao.4. 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 SonidosObjetivo.

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


1. Creamos la pelcula mediante Archivo Nuevo, eligiendo ActionScript 3 (pordefecto tendremos un nico fotograma).

2.

Creamos una nueva capa (icono Nueva capa de la lnea de tiempo) y laseleccionamos.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 elarchivo sonido.mp3 en la carpeta de ejercicios y pulsamos Abrir.


8/113

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 alfinal. Pulsa varias veces Introy comprobars que el sonido se reproduce variasveces solapndose.

11.En el despegable Sinc de las Propiedades, cambia el valor a Flujo. Repite el pasoanterior 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 pasoanterior 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.

Ejercicio paso a paso1. 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 ratnarrastramos hasta la esquina inferior derecha y soltamos (asegrate de que todos loselementos se encuentran en el rea de seleccin).

5. Abrimos el panel de Alineacin, esta vez lo haremos pulsando la combinacin deteclas 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 pegadoal borde derecho del escenario.

8. Alineamos todos los objeto (an seleccionados) a la izquierda del escenario

haciendo clic en .


9/113

Fjate que los objetos ahora se han movido al lado contrario. Alinendose su bordeizquierdo con el borde izquierdo del escenario.

Unidad 7. Ejercicio: Mover objetos entre

capasObjetivo

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 yborde).

4.

Pulsamos el botn derecho del ratn. Se abrir un men como el de la imagen.


10/113

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 bsicaen la creacin de animaciones.

Ejercicio paso a paso1. 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 "MiPrimer Smbolo".

5. Seleccionamos la opcin Grfico en el apartado Tipo. Con esto le decimos a Flashque el nuevo smbolo ser un grfico.

6.

Pulsamos Aceptar y ya tenemos nuestro primer smbolo grfico creado.

Unidad 8. Ejercicio: Modificar unainstancia

Objetivo

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


11/113


1. Vamos al men Ventana Bibliotecas Comunes.2.

Seleccionamos la primera opcin del submen que aparecer (Botones). Aparecerla librera de botones predefinidos de Flash CS5.

3.

Hacemos doble clic sobre la carpeta Classic buttons y luego sobre la primeracarpeta 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 instanciadel smbolo llamado arcade button - blue. Comprobmoslo.

5. Seleccionamos nuestra nueva instancia.

6.

Seleccionamos la herramienta Transformacin Libre y modificamos el tamaode la instancia arrastrando los extremos del objeto.

7. Bien, ahora hemos modificado la instancia. Comprobemos que el smbolo sigueintacto. Accedemos a la biblioteca de nuestro documento (Ctrl+ L), ya que ahoratambin 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 dedar, sino con su tamao original. Esto sucede porque lo que hemos reducido de tamao eratan 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 uotra pelcula ya que estaremos insertando instancias.


12/113

Unidad 9. Ejercicio: Exportar un objetocomo mapa de bits

ObjetivoExportar un objeto Flash como un grfico de tipo mapa de bits. En este caso, loexportaremos 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 tenganuestra nueva imagen.


13/113

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 versun archivo con el nombre que le diste y la extensin .jpg

Unidad 11. Ejercicio: Crear un botn conrelieve

Objetivo

Crear un botn con efecto relieve de forma rectangular tipo formulario de manera rpida ysencilla.


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

Cambiamos el color de fondo del rectngulo. Por ejemplo a gris.4. Con la herramienta texto escribimos el texto 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 F6creamos 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.


14/113


15/113

1. Abre un nuevo archivo ActionScript 3 y dibuja un valo (o lo que ms te agrade) enel 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 estemomento.

5. Seleccionamos la opcin Crear Interpolacin de movimiento.6. Vamos al fotograma nmero 30 y pulsamos F6para crear un fotograma clave.

Observaremos que se crea la Animacin de 30 fotogramas de duracin. En esemismo fotograma (el 30).7. Desplazamos el smbolo al extremo derecho del escenario.

Ahora ya tenemos la interpolacin base, en ella hemos marcado nicamente laposicin inicial y final del movimiento. Si lo dejramos as, el clip seguira unalnea 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.


16/113

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 quehemos cambiado la posicin. Adems, la trayectoria ahora es en zigzag

12.Ahora, crearemos trayectorias curvas. Sobre el escenario, haz clic y arrastra la guapunteada para crear curvas.

13.Como podemos comprobar, el clip se desplaza ahora en siguiendo trayectoriascurvas pero pasando por las posiciones clave indicadas.

Unidad 12. Ejercicio: Animar texto porbloques

Objetivo.

Crear una animacin sobre un texto separndolo en bloques de letras cuyo movimiento sertratado de manera independiente, dando al texto un efecto vistoso que pudiera servir comopresentacin 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 efectoscombinando 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 deno hacerlo Flash tratara todo el texto como un bloque y no podramos dar el efectoa las letras.


17/113

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 nombreidentificativo 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 comentadoanteriormente, 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 objetoen movimiento se superponga a los que no lo estn. Esto es, la capa de ms arriba sellamar "Clic", la siguiente "la" y as sucesivamente.

8.

Hacemos clic con el botn derecho sobre el nico fotograma con elementos quetenemos en la lnea de tiempo y en el men emergente seleccionamos Copiar


18/113

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 nocorresponden con la parte del texto que debe contener. Es recomendable bloquear elresto 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 lomismo 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 decada capa y pulsamos F6cada vez. En la capa "Clic" selecciona el fotograma 30 ypulsa 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 elfotograma 30 (Botn derecho Insertar Fotograma Clave).

14.

Exceptuando la capa "Clic" seleccionamos el primer fotograma de cadainterpolacin 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 deinterpolacin, 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.


19/113

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

2 Pulsa con el botn derecho sobre el fotograma que contiene la flecha y elige la opcinCrear Interpolacin de Forma.

Ve al fotograma 20 y pulsa F6.

Invierte la imagen del fotograma 20 para que adopte su posicin final mediante ModificarTransformar Voltear Horizontalmente y colcalo de manera que su punta y la de laflecha 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 paraaadir un nuevo consejo de forma. Colcalo en una de las esquinas de la flecha y ve al


20/113

fotograma 20 para colocar el consejo creado en la esquina que se corresponda con laanterior.

Haz esto ltimo para todas las esquinas. De manera que quede como la figura de arriba.

Unidad 14. Ejercicio: Acelerar movimientoObjetivo

Comprender el efecto de aceleracin sobre una interpolacin de movimiento.


Primero vamos a crear la interpolacin sobre la que aplicaremos el efecto.

1. Crea un valo en el fotograma 1.2. Convirtelo en un clip de pelcula pulsando la tecla F8.3. Pulsa el botn derecho del ratn sobre el fotograma que contiene el clip de pelcula4. Selecciona Crear interpolacin de Movimiento del men emergente.5. Selecciona el fotograma 20 y pulsa F6.6. Desplaza el Clip de Pelcula de ese fotograma a la parte derecha del rea de trabajo.7. Pulsa Intro para ver la animacin sin salir del entorno de trabajo.

De momento hemos logrado una animacin que se comporta como la siguiente:

8.

Ahora selecciona el fotograma 1 con el botn derecho y selecciona Propiedadespara abrir el panel Propiedades del fotograma. (si no est ya abierto)

9. Introduce un 100 en la casilla Aceleracin (fuera), para hacer que acelere alprincipio 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 aumenteprogresivamente su velocidad.El resultado sera el siguiente:


21/113

Ahora ya hemos comprobado los distintos efectos de aceleracin. Comprueba el mismoejercicio con otros valores de aceleracin para observar su efecto.

Unidad 15. Ejercicio: Generar y publicarpelculas

Objetivo

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


1. Accedemos al men Archivo Abrir y abrimos el archivo publicacion.fla que seencuentra 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 almnimo.

7. Vamos a protegerlo para que nadie lo pueda importar.Marcamos la casilla de verificacin Proteger frente a Importacin e introducimos enel 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 queacabamos 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 menordebido al menor tamao de sus bitmaps.


22/113

Unidad 16. Ejercicio: Cdigo en el panelAcciones

Ejercicio paso a paso.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 pelcula7. this.stop();8. //Definimos la funcin que reproduce la pelcula9. function reproducirPelicula(event:MouseEvent):void {10.

this.play();11. }12. //Indicamos que al hacer clic sobre el botn, se llame a la13. //funcin anterior

botonInicio.addEventListener(MouseEvent.CLICK, reproducirPelicula);

(botonInicio es el nombre de instancia del botn y this es el nombre especial, quesignifica el objeto actual).

14.

En este momento has hecho que la pelcula se detenga al llegar al fotograma 1, esdecir, nada ms empezar, y comience cuando se pulse el botn.

15.Para verlo, en la capa del rectngulo crea un fotograma clave (F6) sobre elfotograma 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 hacerclic, vuelves al fotograma 1 y se detiene de nuevo.

Unidad 18. Ejercicio: Crear una pelculacargando archivos

Objetivo.

Crearemos una pelcula parecida a esta:


23/113


24/113



25/113

Como siempre, utilizaremos el tipo de documento ActionScript 3.0.

Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos los mismospasos:

1.

Haz clic en el botn Nuevo Smbolo al pie de la Biblioteca.2.

Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de pelcula.3. Dibuja la forma que quieras mostrar en el escenario.4. 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 elfotograma 1 de la pelcula principal:

?

123456789

estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar); functionarrastrar(event):void{ //Nombre de la nuestra funcin

estrella.startDrag(); //Nombre del smbolo}

estrella.addEventListener(MouseEvent.MOUSE_UP,soltar); functionsoltar(event):void{ //Nombre de la nuestra funcin

estrella.stopDrag(); //Nombre del smbolo}

Este cdigo hace que al pulsar el ratn, se comience a arrastrar el elemento, y alsoltarlo 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.
http://www.aulaclic.es/flash-cs5/epp_18_12_1.htmhttp://www.aulaclic.es/flash-cs5/epp_18_12_1.htmhttp://www.aulaclic.es/flash-cs5/epp_18_12_1.htm


26/113

2. Dibuja un rectngulo y dale las dimensiones del documento utilizando el botndel Panel Alinear. Puedes hacer que tome un mapa de bits como fondoseleccionando Mapa de bits en el desplegable Tipo del Panel Color.

3.

Ahora aadiremos los botones que utilizaremos. Nosotros hemos importado labiblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz

clic en Archivo Importar Abrirbiblioteca externa.4. Seleccionar los archivos que quieras abrir y arrastra el smbolo al Escenario. Ennuestro 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 roteel elemento).

9. Redimensinalo si lo crees necesario, dale un nombre de instancia y convirtelo abotn. Nosotros lo hemos llamado btn_rotarEstrella.

10.

Repite estos pasos para cada una de las formas que hayas creado, utilizando losnombres de instancia apropiados.

11.Una vez ya estn todos los botones en el Escenario pasaremos a escribir el cdigoasociado. 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:

?

1234

varestrella:Loader= newLoader();//Utilizamos un Loader paracargar archivosestrella.load(newURLRequest("estrella.swf"));//Indicamos la rutadel archivovarestrellaMC:MovieClip; //Un objeto MovieClip que ser laestrella


27/113

56789

101112131415161718192021222324

estrella.contentLoaderInfo.addEventListener(Event.COMPLETE,insertarEstrella);//Utilizamos este evento para asegurarnos de que se ha cargadocompletamente//antes de agregarlo a la escenafunctioninsertarEstrella(e:Event):void{estrellaMC = e.target.content; //Almacenamos el elemento que

produce el evento//en nuestro movie clip

estrellaMC.visible= false; //Lo ocultamos para que no se vea pordefectoestrellaMC.x=100;estrellaMC.y=80; //Le damos la posicin inicial que queramosaddChild(estrellaMC) asMovieClip;//Aadimos el archivo cargado ala escena

//An no se ver porque visible=false}

btn_mostrarEstrella.addEventListener(MouseEvent.MOUSE_UP,mostrarOcultarEstrella);//Detectamos cuando se pulsa el botn para mostrar/ocultar elelementofunctionmostrarOcultarEstrella(e:Event):void {

estrellaMC.visible=! estrellaMC.visible;//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:

?

1234567

8

btn_rotarEstrella.addEventListener(MouseEvent.CLICK,girarEstrella);functiongirarEstrella(event):void{

//Para que gire, aumentamos la propiedad rotationestrellaMC.getChildAt(0).rotation+=15; //Utilizamos getChildAt porque en nuestro caso no queremos que

rote todo//el SWF, slo el elemento que pusimos dentro como un smbolo,

que al ser

//el nico hijo, est en la posicin 0}

Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto encuestin slo es necesario escribir delante de la propiedad la variable que locontiene. Definimos la funcin que al hacer clic girar nuestro objeto.

16.Repite estos pasos para cada uno de los botones. Recuerda escribir bien los nombresde instancia y los nombre de funciones.


28/113

17.Una vez terminado prueba la pelcula desde Control Probar pelcula.

Unidad 20. Ejercicio: Carga y

modificacin de filtrosObjetivo

Cargar filtros mediante ActionScript dndoles las propiedades que queramos.

Al final conseguiremos una pelcula como este ejemplo:

Ejercicio paso a paso.1. Abre el archivo pez.fla que encontrars en la carpeta ejercicios/pez del curso,

observa que tanto los campos del formulario como el clip de pelcula ya tienen unnombre de instancia asignado.

2.

Abre el Panel Acciones desde Ventana Acciones o pulsando la tecla F9.3. Elimina la lnea que dice


29/113

?

1//cdigo para aadir el filtro

y escribe lo siguiente en su lugar:

?

1importflash.filters.DropShadowFilter;

Esto har que el filtro se importe a la pelcula. Normalmente no es necesario porquetrabajamos en el panel de acciones, pero si lo necesitamos si trabajamos, porejempolo, en un archivo as externo.

4.

Despues de esto escribe:

?1varsombra:DropShadowFilter= newDropShadowFilter();

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 funcinque controla al evento:

?

1234

btn_aplicar.addEventListener(MouseEvent.CLICK, cambiarSombra);functioncambiarSombra(event):void{

}

6. Luego accederemos a las propiedades de sombra y le daremos los valores que hayen los campos del formulario. Todo esto, dentro de la funcin que se ejecutar alpusar el botn:

?

12345678

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;
http://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htmhttp://www.aulaclic.es/flash-cs5/epp_20_2_1.htm


30/113

91011

sombra.hideObject = hideObject_chk.selected;

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

Unidad 21. Ejercicio: Vdeo con Puntos de

ReferenciaEjercicio paso a paso.

1. Haz clic en Archivo Importar Importar vdeo.

2. En el dilogo, en la parte inferior, encontrars el botn Iniciar Adobe MediaEncoder.

3. Se abrir as el dilogo inicial de Adobe Media Encoder.


31/113

4.

Aadiremos el vdeo al que queremos insertar los puntos de referencia, es preferibleque el vdeo est en formato .flv o .f4v. Si utilizamos otros formatos, sernconvertidos, si Flash los reconoce. Puedes utilizar el vdeo llamado tux.flv queencontrars 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 aparecedebajo de la previsualizacin del vdeo.

7.

Debajo de la previsualizacin del vdeo encontramos un listado con los puntos deseal incluidos.

8. Aadiremos un punto de referencia al principio del vdeo. Haz clic en el botn .


32/113

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 paraajustar el tiempo.

12.Pulsa el botn de nuevo para crear otro punto de referencia, le daremos elnombre 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 carrera1inicioy 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 llamadocarrera1fin de Tipo Evento.

18.Dale un parmetro pulsando el botn en la lista de abajo, y dale el nombrefotograma y el valor win.

19.

Desplzate hasta el segundo 58.159 e inserta otro punto de referencia. Llmalocarrera2 y dale Tipo Navegacin.

20.

Cambia el cabezal a la posicin 58.160 y crea un punto de referencia llamadocarrera2inicio 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 ), llmalofotograma 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 endeterminados puntos.


33/113

Unidad 22. Ejercicio: Rotacin


1.

Abre el archivo movimiento_rotacion.fla que encontrars en la carpetaejercicios/movimiento_rotacion.

2. Observa que al clip le hemos dado el nombre de instancia miClip. Ahora abre elPanel Acciones (Ventana Acciones o pulsando la tecla F9).

3.

Escribe el siguiente fragmento de cdigo:

?

123

4567891011121314

1516171819202122232425

2627282930313233

var izquierda:Boolean = false;var derecha:Boolean = false;miClip.x = 30;

miClip.addEventListener(MouseEvent.CLICK,rotar);function rotar(event:MouseEvent):void{

if (miClip.x = 515) {

miClip.rotation = -10;izquierda = true;

}}miClip.addEventListener(Event.ENTER_FRAME,para)function para(event:Event):void{

if (derecha) {if (miClip.x < 515) {

miClip.x = miClip.x + 6;}else {

miClip.rotation = 0;derecha = false;

}}if (izquierda) {

if (miClip.x > 30) {miClip.x = miClip.x - 6;

}else {

miClip.rotation = 0;


34/113

34353637

izquierda = false;}

}}

4.

Estaremos listos, podrs previsualizar la pelcula pulsando Ctrl+Enter.Como puedes observar el cdigo es idntico al anterior pero cambiando las sentencias desalto de fotograma por cambios de rotacin en el clip.

Unidad 22. Ejercicio: Agregar objetosdinmicamente


1. Abre el archivo attach.fla que encontrars en la carpeta ejercicios/attach del curso.2. Selecciona el clip estrella en la Biblioteca y haz clic derecho sobre l.3. Selecciona Propiedades - botn Avanzado.4. 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):

?

12varcontenedor:Sprite=newSprite; //Creamos un contenedoraddChild(contenedor); //Y lo mostramos en la escena

Con esto creamos una objeto contenedor Sprite para que este contenga las estrellas.Usaremos frecuentemente contenedor.numChildrenpara saber cuntas estrellasse muestran.

7.

Ahora para el botn de aadir estrellas (btn_aadir), aadiremos el siguiente codigo:

?

1234567

btn_aadir.addEventListener(MouseEvent.CLICK, aadir);functionaadir(event):void{if(contenedor.numChildren


35/113

89101112

131415

varposX:Number; // creamos otra variable para calcular laposicin X

// calculamos la posicion "x" e "y" en relacin con el nm.de estrellas

posY=Math.floor(contenedor.numChildren/6)*miEstrella.height; posX=(contenedor.numChildren%6)*miEstrella.width; miEstrella.x=posX; // asignamos las variables de las

posiciones a las coordenadasmiEstrella.y=posY; // de posicin de la estrellacontenedor.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 quecontiene el contenedor) entre 6, que ser el nmero mximo de estrellas queponemos 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 ladistancia con la parte superior (.y).

Para la posicin X, calculamos el resto (%) de numChildren entre 6, lo que nosindica las estrellas que hay en la fila. Lo multiplicamos por miEstrella.width (anchode la estrella), para calcular la distancia con el lado izquierdo (.x).

8. Ahora para el botn de quitar estrellas aadimos el siguiente cdigo:

?

1234567

btn_quitar.addEventListener(MouseEvent.CLICK, quitar);functionquitar(event) {if(contenedor.numChildren) { // si hay ms de 0 hijos devolvera

el valor true// quitamos siempre numChildren - 1, que es el ltimo elemento

aadidocontenedor.removeChildAt(contenedor.numChildren-1);

}}

El mtodo contenedor.removeChildAt borra el elemento con el ndice dado. Comoqueremos 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 (ndices0 y 1), numChildren devolver 2.

Ya hemos creado una pelcula que aade un nmero concreto de elementosautomatizadamente.


36/113

Unidad 22. Ejercicio: Arrastre yorientacin 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 deinstancia 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 PanelAcciones (tecla F9). Escribe el siguiente fragmento de cdigo:

?

12

3456789

pelota.addEventListener(MouseEvent.MOUSE_DOWN, arrastrarPelota);functionarrastrarPelota(event:MouseEvent):void { //al pulsar elbotn

pelota.startDrag(); //Comenzamos a arrastrar}

stage.addEventListener(MouseEvent.MOUSE_UP, soltarPelota);functionsoltarPelota(event:MouseEvent):void { //Al soltarlo

pelota.stopDrag(); //Dejamos de arrastrar}


37/113

4.

Ahora haremos que la nave se oriente hacia la pelota en cada momento (realmentelo que haremos ser asociar el cdigo al evento onEnterFrame para que se refresquea cada vuelta al fotograma). Abre el Panel Acciones y escribe los siguiente:

?

123456789

nave.addEventListener(Event.ENTER_FRAME, orientarHaciaPelota);functionorientarHaciaPelota(event):void{

//A partir de las coordenadas de cada objeto, calculamos elngulo

varradianes:Number= Math.atan2((pelota.y-nave.y), (pelota.x-nave.x));

//Lo convertimos se radianes a gradosvargrados:Number=Math.round(radianes*180/Math.PI); //Y rotamos la nave esos gradosnave.rotation=grados;

}

Lo que hemos hecho en un principio es, como vimos en la teora, es calcular elngulo que hay entre las coordenadas de la pelota y las de la nave. El nguloobtenido, convertido en grados, ser lo que hay que rotar (rotation) la nave para queapunte a la pelota.

Nota: Observa que inicialmente la nave est orientada a la derecha, as que no har faltasolventar el desfase de ngulo.

Unidad 22. Ejercicio: Colisin y

MovimientoColisin y MovimientoReproduciremos la pelcula que vimos en la teora:


1.

Abre el archivo colision.fla que encontrars en la carpeta ejercicios/colision delcurso.En l encontrars dos elementos: miClip que ser el cuadradito que se desplazar, yfondo, que delimita el rea por el que se puede desplazar.


38/113

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 varizquierda:Boolean=false; varderecha:Boolean=false;

varsubir:Boolean=false; varbajar:Boolean=false; varvelocidad:Number=1;//Espacio que se desplazar

//Al pulsar una tecla...stage.addEventListener(KeyboardEvent.KEY_DOWN, capturarTeclado);//Averiguamos la tecla pulsada para decidir la direccin functioncapturarTeclado(tecla:KeyboardEvent):void {

switch(tecla.keyCode) {caseKeyboard.RIGHT :

derecha=true;

break;

caseKeyboard.LEFT :izquierda=true;break;

caseKeyboard.UP :subir=true;break;

caseKeyboard.DOWN :bajar=true;break;

}}

//Al soltar una teclastage.addEventListener(KeyboardEvent.KEY_UP, parar);//Anulamso el movimiento en direccin de la teclafunctionparar(tecla:KeyboardEvent):void {

switch(tecla.keyCode) {caseKeyboard.RIGHT :

derecha=false;break;

caseKeyboard.LEFT :izquierda=false;break;

caseKeyboard.UP :subir=false;break;

caseKeyboard.DOWN :bajar=false;break;

}}


39/113

Este cdigo se parece mucho al que vimos en la teora. Lo nico que hacemos esobtener qu tecla se ha pulsado y en funcin de la direccin, activamos una variablebooleana que indica que se ha de mover el objeto en esa direccin. Cuando se sueltela tecla, hacemos lo mismo para desactivar la variable.

3.

Vamos ahora con el movimiento. Lo haremos en el evento "enterFrame" del objetoque se mueve. Aade el siguiente cdigo:

?

//En el enterFrame del clip, comprobamos la posicin futura, y sino hay impacto, movemosmiClip.addEventListener(Event.ENTER_FRAME, mover);functionmover(event):void{

//Utilizamos un objeto rectngulo para que nos sea ms cmodoacceder a las propiedades

varrect:Rectangle= miClip.getBounds(stage);if(bajar) { //Comprobamos la colisin abajo - izquierda y abajo

- derecha, aumentando abajoif(!(fondo.hitTestPoint(rect.left, rect.bottom+velocidad,true) || fondo.hitTestPoint(rect.right, rect.bottom+velocidad,true))) {

miClip.y+=velocidad; //Si no hay colisin, cambiamos laposicin del objeto.

}}if(subir) { //Comprobamos la colisin izquierda - arriba y

derecha - arriba, aumentando arribaif(!(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 izquierdaif(!(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 derechaif(!(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 delos movimiento (arriba, abajo, izquierda y derecha) tendremos que evaluar si se produce


40/113

colisin con el objeto miClip y el clip fondo.Pero no bastar con hacerlo slo de una esquina, veamos un ejemplo para verlos con msclaridad:

Como ves en la imagen, deberemos ver si se producen dos colisiones. En el movimientohacia abajo una ser la de la esquina inferior izquierda y la otra de la esquina inferiorderecha. 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 loque queremos evitar.

Hemos empleado un objeto Rectngulo al que le hemos dados las medidas del objeto paraque nos sea ms cmodo trabajar. Por ejemplo, para acceder a la parte superior, tendramosque escribir miClip.getBounds(fondo).top cada vez, mientras que as solo ponemosrect.top.

Observa tambin que para realizar el hitTestPoint hemos tenido en cuenta la posicin queadoptar 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 enActionScript (I)

Objetivo

Vamos a crear la siguiente animacin Flash:


41/113

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 derechosobre el smbolo bola y elige Propiedades.

3. Marca la opcin Exportar para ActionScript, y en el nombre de la Clase asgnaleClaseBola.

4.

Vamos a aadir bolas con el botn btn_agregar_bolas. Las mostramos utilizando uncontenedor. Escribe el siguiente cdigo en el primer fotograma, en el panelAcciones:

?

varmiContenedor:Sprite= newSprite;//Aqu mostraremos las bolasaddChild(miContenedor); // Lo agregamos a la escena

btn_agregar_bola.addEventListener(MouseEvent.CLICK, agregarBola);functionagregarBola(event):void{//Funcin que aade bolas

varbola:ClaseBola= newClaseBola(); //Creamos un nuevo objetoClaseBola

miContenedor.addChild(bola); //Y lo agregamos al contenedor}

Puedes probar el cdigo. Comprobars que se agregan bolas, pero siempre en laesquina superior izquierda.

5. Vamos a aadir funcionalidad a la clase de las bolas. En el men Archivo, pulsa enNuevo y elige Clase ActionScript 3.0. Pulsa Aceptar.


42/113

6.

Nos pedir que le demos un nombre a la clase, que tendr que ser CaseBola, elnombre de clase que le dimos a nuestro smbolo. Al aceptarlo, se crear un cdigocomo el siguiente:

?

package {

publicclassClaseBola{

publicfunctionClaseBola() {// constructor code

}

}

}

7.

De momento, esta clase no tiene ningn mtodo ni propiedad, podemos decir que nohace nada. No vamos a crear la clase desde la anda. Para empezar lo que queremoshacer es aadir funcionalidades a la clase MovieClip, pero tener tambin sus clasesy mtodos. Esto lo conseguimos haciendo que nuestra clase extienda (o ample) a laclase predefinida de ActionScript MovieClip. Modifica el cdigo para que quedeas:

?

package {//Aqu importaremos lo que nos haga faltaimportflash.display.MovieClip;publicclassClaseBolaextendsflash.display.MovieClip{

publicfunctionClaseBola() {// 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 losmtodos 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. Esmuy importante guardarlo con el nombre de la clase.Ahora, podras volver a probar la pelcula, pero no vers cambios. Como an no
http://www.aulaclic.es/flash-cs5/epp_22_7_1.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_1.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_1.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_1.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_1.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_1.htm


43/113

hemos definido mtodos propios, nuestra case hace lo mismo que la clase a la queextiende.

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 faltaimportflash.display.MovieClip;importflash.geom.Rectangle;//Como usaremos un Rectangle, hay

//que importarlopublicclassClaseBolaextendsflash.display.MovieClip{

//PROPIEDADESvarangulo:Number;//ngulo inicial, ser aleatorioprivatevardireccionX:Number= 1; //Cambiando el signo, podremosprivatevardireccionY:Number= 1; //invertir la direccinprivatevarlimites:Rectangle; //El rea en el que rebotan las

pelotasvarvelocidadMaxima:Number= 45; //Mx. velocidad a la que podemos

acelerarpublicstaticvarvelocidadBase:Number= 10; // Velocidad inicial

//MTODOSpublicfunctionClaseBola(miFondo:MovieClip) {//Mtodo constructor. Se ejecutar con el newlimites = miFondo.getBounds(stage); //Tomamos las dimensiones

del fondoangulo = num_aleatorio(0,180); //Calcualmos un ngulo

aleatorioangulo = Math.PI/180*angulo; //Y lo pasamos a radianesthis.y= limites.top+limites.height/2; //Calculamos la

posciin inicialthis.x= limites.left+limites.width/2; //centrada en el fondo//Y utilizamos el evento 'enterFrame' para mover la pelotathis.addEventListener(Event.ENTER_FRAME, moverPelota);

}

publicfunctionmoverPelota(event) {//Impedimos que se pueda superar la velocidad mximaif(velocidadBase > velocidadMaxima) {

velocidadBase = velocidadMaxima;}

varfuturaPosicion:Number;


44/113

//Calculamos la posicin Y futura. Y si se sale por arriba oaabajo,

//lo invertimosfuturaPosicion =

this.y+Math.sin(angulo)*direccionY*velocidadBase; if(futuraPosicionlimites.bottom-20) {direccionY*=-1;

}//Calculamos la posicin Y futura. Y si se sale por arriba o

abajo,//lo invertimosfuturaPosicion =

this.x+Math.cos(angulo)*direccionX*velocidadBase; if(futuraPosicionlimites.right-20) {direccionX*=-1;

}

//Movemos la pelotathis.y+=Math.sin(angulo)*velocidadBase*direccionY; this.x+=Math.cos(angulo)*velocidadBase*direccionX;

}functionnum_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 debede tener el mismo nombre que la clase, se encarga de iniciar las propiedades: calcula deforma 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 eseeje.El ltimo mtodo ya lo conocemos. num_aleatorio se encarga de calcular un nmeroaleatorio 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, alcdigo del fotograma 1. Cambia el cdigo que crea las bolas (var bola:ClaseBola=newClaseBola();) por var bola:ClaseBola=new ClaseBola(fondo);ya que en ladefinicin 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 elnombre de la instancia del smbolo. Prubalos pulsando Ctrl+ Intro. Observa cmo puedes aadir bolas, y rebotan por lasparedes. Ahora vamos a eliminar las bolas. Crea el siguiente mtodo en la clase ClaseBola:?publicfunctionborrar() {

//Antes de borrar, quitamos sus eventosthis.removeEventListener(Event.ENTER_FRAME, moverPelota);


45/113

//reproducimos la animacinthis.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 labola, lo que inicia una animacin que la hace desaparecer. Cuando llegue al ltimofotograma, 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. Loharemos sobre la ltima bola aadida al contenedor. En la pelcula, en la capa Accionesescribe el cdigo:?btn_quitar_bola.addEventListener(MouseEvent.CLICK, quitarBola);functionquitarBola(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.numChildren-1)).borrar();

}}Observa que empleamos ClaseBola(objeto)para convertir un objeto genrico a nuestraclase y que pueda utilizar sus mtodos. Tenemos que estar a la escucha del evento borrame, y borrar el elemento que losproduzca. Escribe el siguiente cdigo:?12

34

addEventListener('borrame', borrarBola); //Cuando se produzca 'borrame'functionborrarBola(e:Event):void{ //Eliminamos el objeto que loproduzca

miContenedor.removeChild(ClaseBola(e.target)); }

Ahora, aadiremos el cdigo de los botones que nos permiten acelerar y decelerar lasbolas:?btn_aumentar_velocidad.addEventListener(MouseEvent.CLICK,aumentarVelocidad);functionaumentarVelocidad(event):void{

ClaseBola.velocidadBase*=1.1; //Aumentamos la velocidad un 10%}

btn_reducir_velocidad.addEventListener(MouseEvent.CLICK,

reducirVelocidad);functionreducirVelocidad(event):void{ClaseBola.velocidadBase*=0.9; // Reducimos la velocidad un 10%

}Al crear la clase, hemos declarado la propiedad velocidadBase como public static varvelocidadBase: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 podemosacceder a ella poniendo objeto.propiedad. Normalmente las propiedades son independientespara cada objeto, salvo si, como en este caso, la declaramos como static. Esto hace que si la
http://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htmhttp://www.aulaclic.es/flash-cs5/epp_22_7_2.htm


46/113

cambiamos, cambie para todos los objetos creados de la clase, y que podamos utilizarladirectamente con en el nombre de la clase, sin tener que crear un objeto especfico. Guarda los archivos y prubalo.

Unidad 23. Ejercicio: Movimiento enespiral

Objetivo

Reproduciremos la pelcula que puedes ver a continuacin:


1. Abre el archivo espiral.fla que encontrars en la carpeta ejercicios/espiral del curso.2. Haz clic en el fotograma 2 de la capa acciones.3. Abre el Panel Acciones pulsando la tecla F9.4. Escribe lo siguiente, a continuacin del stop()que encontrars:


47/113

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.y-400/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 damosun 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 ellaen la red.

Ejercicios unidad 2: El entorno de FlashCS5

Ejercicio 1: Crear una pelcula a nuestro gusto

Crea una pelcula que tenga las siguientes propiedades:

1. Un tamao de 300 x 100 px2. Un color de fondo rojo3. Un Velocidad de los Fotogramas de 14 fps

Ejercicio 2: Estructurar una pelcula
http://www.google.es/search?hl=es&q=espiral+de+Arquimedes&meta=http://www.google.es/search?hl=es&q=espiral+de+Arquimedes&meta=http://www.google.es/search?hl=es&q=espiral+de+Arquimedes&meta=http://www.google.es/search?hl=es&q=espiral+de+Arquimedes&meta=


48/113

1.

Abre una nueva pelcula2. Crea 2 Escenas y llmalas Escena 1y Escena 23. Crea 2 capas en cada una.4. LlmalasE1_1, E1_2yE2_1, E2_2

Ejercicio 3: Creando fotogramas1. Crea en una pelcula nueva 3 fotogramas clave2. 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 paraqu sirve cada uno?

Ejercicio 5: Paneles

1.

Abre el Panel Color.2.

Abre el Panel Acciones.3.

Abre el Panel Alinear.4. Cierra el Programa Flash CS55.

Vuelve a abrirlo. Qu notas?

Si no tienes muy claro las operaciones a realizar,Aqute ayudamos.

Ayuda ejercicios unidad 2: El entorno de

Flash CS5Ejercicio 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.
http://www.aulaclic.es/flash-cs5/spr_2_4_1.htmhttp://www.aulaclic.es/flash-cs5/spr_2_4_1.htmhttp://www.aulaclic.es/flash-cs5/spr_2_4_1.htmhttp://www.aulaclic.es/flash-cs5/spr_2_4_1.htm


49/113

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 Documento2. 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. Abrimos una nueva Pelcula desde el men Archivo Nuevo 2. Accedemos al Panel Escena desde Ventana Otros Paneles Escena3. Creamos una nueva Escena pulsando sobre el signo .4. 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 Escena2.

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

El Panel Escena debera quedar as:


50/113

Y as las Capas:

Ejercicio 3: Creando Fotogramas

Vamos a crear los fotogramas pedidos:

1. Abrimos una nueva pelcula2. Hacemos clic sobre el fotograma 2, pues en el 1 ya hay un Keyframe

3.

Vamos al men Insertar y seleccionamos Fotograma Clave4. Hacemos clic sobre el fotograma 3 y seleccionamos Inserta r 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 deTiempo y seleccionamos Fotograma.

2. Ahora el fotograma 2 ser un fotograma normal y el 3 y el 4 sern FotogramasClave. 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 cuadradosblancos 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:


51/113

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 primerosrepresentan una animacin de Movimiento. (probablemente contendrn al mismoobjeto 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 alos que van asociados.

3.

Los fotogramas del 13 al 15 (incluidos) y el fotograma 8 son FotogramasContenedor. Existen y en la pelcula se vern como fotogramas en blanco (o con elcolor 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. Abrimos el Men Ventana.2.

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

nuestras preferencias.

Ejercicios unidad 3: Dibujar y colorearEjercicio 1: Bandera Olmpica

1. Dibuja 5 aros.


52/113

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 valo2. 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,Aqute ayudamos

Ayuda ejercicios unidad 3: Dibujar ycolorear

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

Suprimirpara eliminarlo. (Igualmente podamos haber seleccionado el color

"ninguno" y posteriormente creado los valos que hubieran aparecido sincolor de fondo)

5. Ahora seleccionamos los bordes de cada aro y le damos el color que queramosseleccionndolo en el Panel Color.


53/113

6.

Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, seleccionala Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo. Paramovimientos precisos, puedes utilizar las teclas con flechas.

Ejercicio 2: Saturno

Vamos a dibujar un planeta parecido a Saturno

1. Seleccionamos la Herramienta valo.2.

Creamos un valo circular, que har de planeta.3. Eliminamos el borde, para ello, hacemos clic en l y pulsamos la tecla Suprimir.4. Seleccionamos el relleno del valo y abrimos la opcin Relleno.5. Seleccionamos la opcin Degradado Radial.

6. Pulsamos en y seleccionamos los colores quedeseemos, (podemos aadir tantos colores como queramos y probar su efecto).

7. Dibujamos el anillo del planeta, por ejemplo creando otro valo con la formaadecuada. No lo dibujes sobre el planeta.

8.

Tenemos que cambiar la forma de uno de los 2 para que tenga la forma deseada. Porejemplo, borramos parte del planeta seleccionndola de forma rectangular ypulsando la tecla Suprimirtal 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.


54/113

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,Aqute ayudamos.

Ayuda ejercicios unidad 4: Textos

Ejercicio 1: Crear textos

1.

Creamos la pelcula mediante Archivo Nuevo, eligiendo ActionScript 3 (pordefecto 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. Crea una pelcula con 1 fotograma.2. Localiza el archivo sonido.mp3 en la carpeta de ejercicios.

3.

Imprtalo a tu pelcula.4.

Comprueba que est disponible en la Biblioteca.5. Inserta el sonido importado en el fotograma 1.6. 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.


55/113

Ejercicio 2: Editar Sonidos

1. Modifica el sonido (usando Flash) de modo que en un principio no se oiga, y poco apoco 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 enFlash

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

3. Se abrir la clsica ventana de Windows para buscar un archivo. Buscamos elarchivo 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 Entery 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 elMen 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 losfotogramas 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:


56/113

Ejercicio 2: Editar Sonidos

1.

Utilizando el archivo anterior, nos situamos en el ltimo fotograma, donde sereproduce todo el sonido.

2. Seleccionamos Aumento Progresivo dentro de la pestaa Efecto que se encuentra enel Panel Sonidos.

3. Seleccionamos Personalizar dentro de la pestaa Efecto que se encuentra en el PanelSonidos.

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 unrecuadro blanco, lo situamos en su parte ms baja para quitarle el sonido y en suparte ms alta para drselo. Jugamos con los volmenes de ambos canales hastaobtener el efecto deseado. Podemos ir probando cmo queda pulsando el Play queacompaa 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...).


57/113

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 conobjetos

Ejercicio 1: Rellenos y BordesSe 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 clicen 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 teclasuprimir Supr.

Rectngulo sin Relleno y Rectngulo sin Borde

Otra opcin podra haber sido crear un nico rectngulo con borde. Hacer clic sobre surelleno para seleccionarlo, y arrastrarlo para "sacarlo" el rectngulo.

Ejercicio 2: Selecciones


58/113

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 herramientarectngulo) y dibujamos 5 valos.

2.

Hacemos doble clic en el relleno del primer crculo (doble clic para seleccionartanto 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 elsegundo 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 teclaSHIFT 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 seleccionarantodos los bordes del mismo color que estn en contacto con el borde sobre el quehacemos clic).

2. Mantenemos pulsada la tecla SHIFTy 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 tumismo.

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 elextremos izquierdo de la pelcula.

5. Hacemos clic en para situarlo en el borde superior de la pelcula. Como elobjeto 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

.


59/113

7. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en y

.

8. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en y

.

Ejercicio 4: Grupos

La primera parte del ejercicio nos pide Agrupar un conjunto de elementos (que yatenemos).

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 queacabamos 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 losprimeros temas).


60/113

2. En este caso debers utilizar capas de tipo Mscara.


Ayuda ejercicios unidad 7: Las capas

Ejercicio 1: Orden de Capas

1. Abre el archivo capas.fla que encontrars en la carpeta de ejercicios.2. Haz clic en la capa Texto para seleccionarla.3.

Arrstrala hasta tenerla en la posicin superior (por encima de la capa Forma2).

4.

Haz clic en la capa Forma que ahora se encuentra en la parte inferior paraseleccionarla.

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 elvalor 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. Cmbialopor Planeta.

3. Haz doble clic sobre el smbolo de la que se encuentra en la parte superior.Llmala Mscara y dale el tipo Mscara.


61/113

4. Finalmente haz doble clic sobre el smbolo de la capa que se encuentra enmedio. 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 rellenodegradado y quitarle el borde).

6. Selecciona la capa Aros y dibuja un crculo perfecto, rellenndolo con un degradadocon 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 quequieras que se muestre. Es decir, bastara con no pintar la parte que quedara detrsdel 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 laesquina superior izquierda y sin soltar hasta la esquina inferior derecha) yseleccionando la herramienta Transformacin libre para rotar el dibujo en sutotalidad unos grados hacia la izquierda.

11.Para probar el efecto de la mscara pulsa las teclas Ctrl+ Enteren tu teclado.

Ejercicios unidad 8: Smbolos


62/113

Ejercicio 1: Crear Smbolo

1. Crea una pelcula con 1 fotograma.2.

Dibuja un crculo perfecto.3. Convirtelo a smbolo de tipo Clip de pelcula.

4.

Comprueba que est disponible en la Biblioteca.

Ejercicio 2: Insertar Instancia

1. Crea una nueva pelcula.2. Inserta el Grfico de un botn cualquiera de las Bibliotecas comunes de Flash CS5.3.

Modifica su tamao.4. Vuelve a realizar el paso 2 y comprueba que el botn se inserta en su tamao

original.

Ejercicio 3: Duplicar Instancia1. 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 quehemos 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 Smbolo1.

Crea una pelcula con 1 fotograma con Archivo Nuevo, eligiendo archivoActionScript 3.

2. Para que el crculo no salga ovalado, selecciona la herramienta valo y mientras lodibujas, 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.


63/113

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 carpe

EjerciciosFlashCS5AulaClic

Documents

Transcript of EjerciciosFlashCS5AulaClic