ejercicios de flash

IES María de Molina (Madrid)

Ejercicios de Flash Página 1

Ejercicios de Flash CS4

1. Creando óvalos y rectángulos

1. Pulsa sobre la Herramienta Óvalo que se encuentra en la Barra de Herramientas.

2. Sitúa el cursor del ratón en el Escenario (dentro del fotograma actual).

3. Haz clic y arrastra el ratón hacia el lugar que desees. Observarás que el movimiento

de tu ratón provoca la creación de un óvalo (figura 1). Cuando el óvalo tenga la forma

deseada, suelta el ratón. El resultado será similar al de la figura 2.

Figura 1 Figura 2

4. Modificar el color: Hacemos clic en el interior del óvalo o en su borde con la

Herramienta Selección . 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

5. 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 también

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

6. Crea ahora un rectángulo pero con los bordes redondeados. Para ello

utiliza la herramienta rectángulo . Modifica el radio del borde con el

modificador que sale en el panel propiedades

7. Guarda el archivo como ejercicio1.fla.

Truco: Si quieres crear un círculo perfecto, mantén pulsada la tecla SHIFT mientras das

forma al óvalo. (Sucede igual con la Herramienta Rectángulo para crear un cuadrado).

2. Crear un color transparente

1. Abre el archivo transparencia.fla que encontrarás en la carpeta de ejercicios.

2. Seleccionamos el relleno del Rectángulo y modificamos el valor Alfa en el color

desde el Panel de Herramientas o desde el panel Propiedades. Por ejemplo, escribimos

un valor de 45%.

Rectángulo Azul

Ahora con Transparencia

El efecto alfa trabaja de forma que si situamos cualquier objeto o

imagen detrás de él, podemos ver como un efecto de transparencia que

mostrará parte de lo que se encuentre detrás de nuestro relleno.

3. Dibujos con herramienta lápiz.

1. Utiliza las diferentes herramientas de dibujo. Con la herramienta

lápiz dibuja 3 veces una figura parecida a la siguiente en cada

una utilizando uno de los modificadores (enderezar, suavizar y

tinta) que hay abajo en la barra de herramientas

2. Dibuja un cuadrado y un rectángulo con la herramienta lápiz y

con el modificador en enderezar. Dibuja figuras con diferentes colores y tipos de línea.

3. Guarda el ejercicio como ejercicio3.fla



4. Pintar con herramienta pincel

1. Abre el archivo coches.fla que encontrarás en la carpeta de ejercicios.

2. Pinta los coches con la herramienta pincel . Para

ello elige un color, tipo de brocha y tamaño de brocha

adecuado y ves utilizando los diferentes modificadores.

3. Guárdalo como ejercicio4.fla

5. Rellenar con la

herramienta cubo de pintura.

1. Abre el archivo relleno.fla que encontrarás en la carpeta de ejercicios.

2. Rellena el cuadrado de color verde.

3. Intenta rellenar el ovalo con el

color rojo. Observa que no puedes

porque el ovalo está abierto. La

forma de hacerlo es utilizando el

modificador, Cerrar huecos

grandes. Rellénalo ahora

4. El circulo lo vamos a rellenar con un efecto de

degradado. Para ello elige en la parte inferior de la

paleta de colores uno de los efectos de degradado en color azul. A continuación

modifica el degradado con la

herramienta transformación del

degradado.


6. Borrado

1. Abre el archivo borrado.fla que encontrarás en la carpeta de ejercicios.

2. Borra partes de los

coches con la herramienta

borrador . Utiliza los

diferentes modificadores y

el modificador grifo.




7. Seleccionar y mover

1. Abre el archivo selecciones.fla que encontrarás en la carpeta de ejercicios.

2. Selecciona la Herramienta Selección y haz clic sobre el rectángulo.

Prueba a mover la figura y observa que lo que mueves es sólo el relleno.

Presiona ctrl + z para volver al inicio. Ahora haz doble clic e intenta mover

la figura. Verás que se mueve entera porque hemos seleccionado el relleno y

la línea con el doble clic. Muévela.

3. Prueba a hacer clic, doble clic y clic y mayúsculas clic, con la otra figura

para ver cómo funciona. Mueve la figura entera.

4. Utiliza la herramienta lazo para seleccionar una parte del árbol y

luego muévela.

5. Utiliza el modo polígono para hacer una selección

triangular del ovalo. Mueve la selección.


8. Cambio de líneas y formas

1. Abre el archivo cambios.fla que encontrarás en la carpeta de ejercicios.

2. Utiliza la Herramienta Selección para modificar el primer triángulo.

Observa que lo que debo hacer es hacer clic cuando el ratón cambia de

forma y mover sin soltar. Debe quedar como la figura.

3. Utiliza la herramienta Transformación libre

con el triángulo verde. Prueba a hacerlo más

grande, a rotarlo (ten en cuenta que el eje de

rotación es el circulo blanco que se puede

mover) y con el modificador rotar y sesgar a distorsionarlo.

4. Utiliza el menú Ventana - Transformar para dejar el rectángulo

como se ve en la imagen




9. Agrupación de formas

1. Abre el archivo agrupación.fla que encontrarás en la

carpeta de ejercicios.

2. Selecciona el árbol verde que está junto a la casa verde y

muévelo hasta colocarlo encima de la casa. Haz clic en otro

lugar del documento y ahora intenta de nuevo separarlos. No

puedes porque al tener el mismo color se han convertido en

un único objeto.

3. Selecciona el árbol verde que está junto a la casa marrón

y muévelo hasta colocarlo encima de la casa. Haz clic en otro

lugar del documento y ahora intenta de nuevo separarlos. Se

separa pero desaparece el trozo de casa que estaba tapada por

el árbol.

4. Si quiero mantener los objetos separados lo que debo hacer es

seleccionar primero el árbol, ir al menú Modificar-agrupar. Así

consigo un único objeto o grupo que puedo mover sin que se

combine con otros elementos. Hazlo para el árbol de colores.


10. Propiedades del texto

1. Hacemos clic en la Herramienta Texto y después en el escenario.

2. Veremos esta imagen . Escribe dentro el texto Esto es un texto de prueba.

3. Hacemos clic en Párrafo, si es que teníamos minimizado este Panel.

4. Haz que el texto se encuentre centrado haciendo clic en

5. Cambia la fuente del texto a Verdana

seleccionándola en el desplegable.

6. Cambia el espaciado entre caracteres del texto a 2 escribiéndolo en la opción

.

7. Por último cambia el tamaño del

texto a 30 y ponlo en Negrita (Bold)

utilizando estos controles:




11. Cambiar el tipo de texto

1. Abre el archivo ejercicio10.fla, utilizado en el ejercicio

anterior.

2. Selecciona el texto que creamos en el ejercicio anterior.

3. Hacemos clic en el Panel Propiedades, si es que teníamos

minimizado este Panel.

4. Una vez podamos ver el panel seleccionamos el

desplegable en el que pondrá el tipo de texto

y elegimos el tipo de texto que queramos. Veremos que, al

hacer clic fuera del texto, cambia la línea que rodea al recuadro de texto, pasando a ser

discontinua y no desapareciendo aunque no escribamos nada dentro. (Los textos

estáticos desaparecen si no escribes nada y haces clic en cualquier lugar del escenario).

Esto es lógico, ya que los textos Dinámicos y los de entrada no tienen porque tener

"contenido".

12. Edición y modificación de símbolos.

1. Abre el archivo símbolos.fla que encontrarás en la carpeta de ejercicios.

2. Selecciona el coche y arrástralo al

panel Biblioteca. Pon de nombre

Automóvil y elige de tipo Gráfico

3. Ahora tenemos la imagen en la

Biblioteca y podemos utilizarla para

colocarla donde quedamos. Coloca 2

copias de Automóvil en el documento de trabajo.

4. Cada una de las copias es independiente por lo que

podemos girarla o escalarla (herramienta transformación

libre ); volverla transparente (Estilo: alfa); o cambiar

de color (Estilo: tinta). Prueba cada una de estas opciones

hasta que te quede parecido a la imagen.

5. Si quiero modificar la imagen de la Biblioteca. Voy a

edición-Editar símbolo o simplemente doble clic sobre

cualquiera de las copias del símbolo. Se abrirá una pantalla con el símbolo y cualquier

cambio que haga afectará a todas las copias del símbolo que haya en el documento.

Modifica el símbolo automóvil para que sea rojo. Observa que todas las copias

adquieren el color rojo. Guárdalo como ejercicio12.fla



13. Alineación de objetos

1. Abre un archivo nuevo.

2. Dibuja 4 rectángulos de diferentes colores situados en diferentes puntos del escenario.

3. Haz clic en la herramienta Selección .

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 botón del ratón arrastramos

hasta la esquina inferior derecha y soltamos (asegúrate de que todos los elementos se

encuentran en el área de selección).

5. Abrimos el panel de Alineación, esta vez lo haremos pulsando la combinación de

teclas ctrl + k (aunque también podrías abrirlo desde el menú Ventana).

6. Marca la opción En escena.

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 (aun seleccionados) a la izquierda del escenario haciendo

clic en . Fíjate que los objetos ahora se han movido al lado contrario. Alineándose su

borde izquierdo con el borde izquierdo del escenario.


14. Exportar un objeto como imagen

1. Abre un archivo nuevo haz que sea de 400 píxeles de ancho por 300 píxeles de alto

(para ello botón derecho- Propiedades de archivo) y crea un rectángulo.

2. Vamos al menú Archivo -

Exportar - Exportar Imagen...

Ahora estaremos delante de

una ventana similar a la que

se muestra.

3. Buscamos en la pestaña

Guardar en la carpeta en la

que quieras guardar el

archivo.

4. En el apartado Nombre de

Archivo introducimos

ejercicio14 (o el que



queramos que tenga nuestra nueva imagen).

5. Abrimos la pestaña de Tipos de archivo.

6. Buscamos entre todos los tipos el formato JPG o JPEG.

7. Pulsamos Guardar.

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

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

15. Capas

1. Abre el archivo capas1.fla que encontrarás en la carpeta de ejercicios.

2. Observa que cada una de las tres figuras se encuentra en una capa. Si

hago clic en cualquiera de ellas se selecciona también la capa

correspondiente en el panel editor de Movimiento en la parte inferior de

la pantalla.

3. Puedo cambiar el orden de colocación de las

capas (la capa situada más arriba es la que “tapa”

a las inferiores), pinchando en una de las capas y

arrastrándola a la posición que se desee. Cambia

de orden las capas y deja la capa círculo encima

de las otras. Guárdalo como ejercicio15_1.fla

4. Abre el archivo capas2.fla. Observa que

tenemos 2 capas (Árboles y fondo). Crea una

capa nueva, de nombre Coche. Inserta en esta

capa la imagen de la biblioteca llamada coche.

Haz la figura un poco más pequeña con la herramienta

Transformación libre . Coloca esta capa entre medias de las

que había al principio.

5. Haz una nueva capa encima de la del coche y llámala Máscara de coche. Dibuja una

elipse en esta nueva capa. Transforma esta capa en una Máscara (una capa máscara es la

que deja transparente lo que está pintado en ella y se convierte en opaco en lo que no

está pintado), para ello da botón derecho- Máscara.

6. Guárdalo como

ejercicio15_2.fla



16. Interpolaciones de movimientos.

1. Interpolación Clásica: Abre el archivo interpolación1.fla. Selecciona el coche y

guárdalo en la biblioteca con el nombre coche y con tipo: Gráfico. Ponte en el

fotograma 50 y da botón derecho - Convertir en fotograma clave. Mueve el coche en el

fotograma 50 hasta la esquina superior derecha. Ponte en un fotograma del 2 al 49 y

presiona botón derecho - Crear Interpolación Clásica.

2. Para reproducir nos colocamos en el fotograma 1 y vamos al menú Control -

Reproducir. Guárdalo como ejercicio16_1.fla

3. Giro: Abre el archivo interpolación2.fla. Nos colocamos en el

fotograma 1. Selecciona la rueda y la guardamos en la biblioteca con el

nombre rueda y con tipo: Gráfico. Ponte en el fotograma 50 y da botón

derecho - Convertir en fotograma clave. En el fotograma 50 elige el Menú

Ventana - Transformar y elige 360º en giro. Ponte en un fotograma del 2

al 49 y presiona botón derecho- Crear Interpolación Clásica. Reprodúcelo

y guárdalo como ejercicio16_2.fla.

4. Interpolación de movimiento: Abre el archivo interpolación3.fla. Selecciona el

coche y guárdalo en la biblioteca con el nombre coche y

con tipo: Gráfico. Ponte en el fotograma 1 y da botón

derecho - Crear Interpolación de movimiento. Mueve el

coche a la posición de abajo a la derecha y

automáticamente se crea una interpolación de 24

fotogramas. Aumenta hasta 50 fotogramas poniéndote en

la línea de tiempo y haciendo clic y arrastrando hasta el

50. Ahora se puede modificar la línea hasta que haga un

recorrido parecido al de la imagen. Guarda como

ejercicio16_3.fla.

5. Interpolación de forma: Abre el archivo interpolación4.fla. Ponte en el

fotograma 50 y da botón derecho - Convertir en fotograma clave. Ponte en

un fotograma del 2 al 49 y presiona botón derecho - Crear Interpolación de

forma (la línea de tiempo se pone verde). Modifica la figura en el fotograma

50.

6. Se puede cambiar la velocidad en el Panel Propiedades - Aceleración (valores -100 a

100). Introduce un 100 en la casilla Aceleración (fuera), para hacer que acelere al

principio y vaya frenando poco a poco. Introduce ahora un -100 en la casilla

Aceleración (dentro), para hacer que aumente progresivamente su velocidad.

7. Guarda como ejercicio16_4.fla.

17. Consejos de forma

1. Fíjate en el archivo flecha.swf para ver cómo tiene que quedar este ejercicio.



2. Utiliza la Herramienta Lápiz para crear una flecha y luego el Bote de pintura para

crear el degradado.

3. Pulsa con el botón derecho sobre el fotograma que contiene la flecha y elige la opción

Crear Interpolación de Forma.

4. Ve al fotograma 20 y pulsa F6.

5. Invierte la imagen del fotograma 20 para que adopte su posición final mediante

Modificar - Transformar - Voltear Horizontalmente y colócalo de manera que su punta

y la de la flecha original coincidan.

6. Si ejecutáramos la animación ahora no conseguiríamos el

efecto deseado.

7. En el fotograma 1, activa la opción Modificar - Forma -

Añadir Consejo de forma para añadir un nuevo consejo de

forma. Colócalo en cada una de las esquinas de la flecha

8. Ve al fotograma 20 para colocar cada consejo creado en la

esquina que se corresponda con las anteriores. Haz esto último

para todas las esquinas. De manera que quede como la figura de

arriba.


18. Generar y publicar películas

1. Accedemos al menú Archivo - Abrir y abrimos el archivo publicación.fla que se

encuentra en la carpeta ejercicios .

2. Abrimos la biblioteca del documento mediante Ventana - Biblioteca.

3. Vamos al menú Archivo - Configuración de publicación para abrir la ventana

Configuración de Publicación.

4. Abre la pestaña Formatos y desactiva la casilla HTML, porque no vamos a utilizar la

película vía web.

5. Abre la pestaña Flash.

6. En la barra deslizante Calidad JPEG ponemos el valor 0 para reducir la calidad al

mínimo.

7. Vamos a protegerlo para que nadie lo pueda importar.

Marcamos la casilla de verificación Proteger frente a Importación e introducimos en el

campo Contraseña la palabra de paso que deseemos.



8. Pulsamos el botón Publicar.

9. Accede al directorio de Flash donde se ha exportado el archivo SWF y ejecútalo.

10. Comprueba que la calidad de las imágenes no es buena.

11. Abrimos ahora el menú Archivo - Importar y seleccionamos el archivo que

acabamos de publicar.

12. Comprueba que nos pide la clave para poder hacerlo.

Ahora tenemos una película que no podrán importar y cuyo espacio en memoria será

menor debido al menor tamaño de sus bitmaps.

19. Crear un botón.

1. Dibujamos un ovalo en el área de trabajo.

2. Seleccionamos el fondo.

3. Cambiamos el color de fondo a un color de degradado verde.

4. Hacemos una nueva capa y en ella, con la herramienta de

texto escribimos IES María de Molina en el interior del óvalo.

5. Seleccionamos el botón.

6. Hacemos clic derecho sobre él y elegimos Convertir en símbolo...

7. Marcamos el Tipo botón y le damos un nombre. Pulsamos Aceptar.

8. Hacemos doble clic sobre el botón para editarlo, y nuevamente doble clic para poder

cambiar los colores,

9. Mediante F6 creamos fotogramas clave en cada uno de los fotogramas

correspondientes a los estados del botón.

10. Seleccionamos el fotograma Presionado, y le ponemos color degradado rojo.

11. Seleccionamos el fotogramas Sobre, y le ponemos color azul.



12. Para ver el resultado ve al menú Archivo-Vista previa de Publicación-

predeterminado. Guárdalo como ejercicio19.fla

20. Trabajar con Sonidos

1. Creamos la película mediante Archivo → Nuevo, eligiendo Archivo de Flash (AS

3.0) (por defecto tendremos un único fotograma).

2. Creamos una nueva capa (icono Nueva capa de la línea de tiempo) y la

seleccionamos.

3. Insertamos un nuevo fotograma clave en la línea de tiempo en el fotograma 5 y 15

(desde el Menú Insertar - Línea 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 clásica 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. Después seleccionamos el sonido en el Panel Biblioteca y lo arrastramos hasta el

escenario (hasta el fotograma actual).

9. Por defecto, en propiedades, la opción Sinc. está marcada como Evento. Prueba la

película (tecla Intro) y comprobarás que el sonido se reproduce hasta al final. Pulsa

varias veces Intro y comprobarás que el sonido se reproduce varias veces solapándose.

10. En el despegable Sinc de las Propiedades, cambia el valor a Inicio. Repite el paso

anterior y comprueba que el sonido no se vuelve a iniciar si aún no ha acabado.

11. Selecciona el fotograma clave 15.

12. En el Panel Propiedades, en Sonido, elige el Nombre del archivo que estamos

utilizando.

13. En la opción Sinc selecciona Detener.

14. Prueba la película y comprobarás que ahora se detiene al llegar la fotograma 15.

15. Guárda el archivo como ejercicio20.fla



Ejercicios propuestos.

21. Letras con colorines. (Ejemplo:

Letras con colorines.swf)

1. Creamos un efecto como el del archivo

Letras con colorines.swf.

2. Está hecho con 2 capas: Una con un texto

de tipo de letras grueso y que hace de

máscara de la capa inferior que sera un rectángulo relleno de colores que se mueve

sobre el escenario.

22. Letras bailarinas. (Ejemplo: Letras

bailarinas.swf)

1. Creamos un efecto como el del archivo Letras bailarinas.swf.

2. Para hacerlo debes separar las letras y poner fotogramas clave

cada 5 fotogramas y en cada uno hacer una modificación con

respecto al anterior.

23. Aparecen letras. (Ejemplo: Aparecen

letras.swf)

1. Creamos un efecto como el del archivo Aparecen letras.swf.

2. Para hacerlo debes poner fotogramas clave cada 5 fotogramas y en cada uno ir

añadiendo una letra y cambiando el color del texto.

24. Movimientos de texto e imágenes.

(Ejemplo: IES.swf)

1. Creamos un efecto como el del archivo IES.swf.

2. Para hacerlo debes crear 4 capas: 1 para el fondo,

1 para el texto y 2 para las imágenes. Hay que hacer

interpolaciones de movimientos en cada capa.



25. Movimientos y disipación de texto e

imágenes. (Ejemplo: IES 2.swf)

1. Creamos un efecto como el del archivo IES

2.swf.

2. Para hacerlo debes crear 5 capas: 3 para el

texto (cada una de las partes en una capa), y 2

para las imágenes. Hay que hacer

interpolaciones de movimientos o variar el alfa

en cada capa.

26. Modifica un gif

animado

1. Abrimos un documento nuevo en Flash

2. Archivo – importar a escenario elegimos el gif.

3. Hay que ajustar el espacio de trabajo al tamaño del gif.

4. Las modificaciones se deben hacer en una capa nueva.

5. Se puede guardar en formato gif, ademas de cómo swf o fla.

27. Movimiento y giro (clips de película)

(Ejemplos clip1.swf y clip2.swf)

1. Abrimos un documento nuevo en Flash.

2. Dibujamos una figura y la rellenamos de colores.

3. Guardamos en la biblioteca como clip de película.

4. Hacemos una interpolación de movimiento con el rectángulo.

5. Hacemos doble clic sobre la figura y creamos varios fotogramas clave en el clic. En

cada uno hacemos una modificación sobre el anterior. Al acabar nos ponemos de nuevo

en escenario1.



28. Pase de fotografías con botones

programados (Ejemplos fotos con

botones.swf)


(¡IMPORTANTE! De tipo Archivo de Flash AS 2.0)

2. Trae la primera fotografía al escenario Archivo - Importar

– Importar a escenario.

3. Coloca en el escenario los 4 botones (obtenlos de Ventana

– Bibliotecas comunes – Botones)

4. Programa cada uno de ellos con Ventana – Acciones.

Utiliza Action Script 1.0 & 2.0.

5. La programación sería:

on (press) {nextFrame();}

on (press) { prevFrame();}

on (press) {gotoAndStop(_totalframes);}

on (press) {gotoAndStop(1);}

6. Ves haciendo nuevos fotogramas claves y en cada uno quita la fotografía e importa la

siguiente.

7. Debemos programar el primer fotograma con stop(); para que no se reproduzca sin

parar al principio.

29. Menú en Flash

(Ejemplo menú web

tecno.swf)


(¡IMPORTANTE! De tipo Archivo de Flash

AS 2.0)

2. Trae la primera imágen al escenario Archivo -



Importar – Importar a escenario.

3. Haz una nueva capa y en ella haz 4 rectángulos en el escenario que nos servirán

como botones (Para convertirlos en botones mira el ejercicio 19)

4. Programa cada uno de ellos con Ventana – Acciones. Utiliza Action Script 1.0 & 2.0.

Queremos que al pasar sobre cada uno de ellos vayamos al fotograma correspondiente y

al hacer clic sobre ellos que vaya a la página web correspondiente.

5. Como ejemplo la programación de un botón podría ser:

on (rollOver) {gotoAndStop(1);

}

on (press) {getURL("http://fresno.pntic.mec.es/~mhec0002/proyectos/","_blank");

}

6. Los botones y la programación (al estar en una capa independiente te servirán para

los otros fotogramas.

7. En la capa de imagen debes hacer 4 fotogramas claves e ir cambiando las imágenes

en cada uno de ellos.

30. Juegos en Flash. (Carpeta 30. juegos

en Flash)

1. Trabaja con los archivos de juegos modificando y aprendiendo a hacer

modificaciones en los juegos.

31. Película de dibujos en Flash.

(Ejemplo dibujos en Flash)

1. Con todo lo que has aprendido realiza una pequeña película de dibujos en Flash.

Utliza interpolaciones y lo que creas conveniente,

ejercicios de flash

Documents