Presentación de imágenes con Flash | 1

Ejemplo: Presentación de imágenes con Flash

El objetivo es crear una presentación de diapositivas similar a la de la imagen que se muestra a

continuación.

Para esto se siguen los siguientes pasos:

1. Iniciar Flash.

2. Clic en la opción “Action Script 2.0” de la pantalla de inicio.

Fig. 1: Pantalla de inicio

3. Importar a la biblioteca de Flash las imágenes que se van a mostrar en la presentación.

Para esto:

a. Clic en Archivo – Importar – Importar a biblioteca

b. Se seleccionan las imágenes y clic en Abrir

4. Abrir la biblioteca para mostrar las imágenes importadas. Para esto:

a. Clic en Ventana – Biblioteca

5. Incluir cada imagen importada en un símbolo, para poder utilizarlo en la presentación

de imágenes. Para esto:

a. Clic en Insertar – Nuevo símbolo.

b. En la ventana que aparece se pone nombre al símbolo, en el desplegable

“Tipo” se elige “Gráfico” y clic en “Aceptar”.

Fig. 2: Crear símbolo

Presentación de imágenes con Flash | 2

c. Arrastrar la imagen de la biblioteca hasta el símbolo.

Fig. 3: Arrastrar imagen hasta el símbolo

d. Situar la imagen en el centro del símbolo. Para esto:

Ventana – Alinear

Marcar la opción “Alinear en escenario”

Pulsar los botones “Alinear verticalmente” y “Alinear

horizontalmente”.

Fig. 4: Ventana - Alinear

Repetir el paso 5 con todas las imágenes que se quieren incluir en la presentación.

6. Clic en “Escena 1” para abandonar la construcción de símbolos y regresar a la escena

para construir la presentación.

Fig. 5: Regreso a la escena

Presentación de imágenes con Flash | 3

7. Arrastrar el primer símbolo con la imagen al escenario.

Fig. 6: Arrastra el símbolo al escenario

8. Añadir un fotograma clave a la línea de tiempo para arrastrar el segundo símbolo. Para

esto:

a. Clic en el fotograma 2 de la línea de tiempo.

Fig. 7: Seleccionar el fotograma 2

b. Clic en Insertar – Línea de tiempo – Fotograma clave

Fig. 8: Insertar fotograma clave

c. Borro la imagen que aparece en el escenario y arrastro el nuevo símbolo con la

nueva imagen.

Repetir el paso 8 con todas los símbolos que se quieren mostrar en la presentación.

Presentación de imágenes con Flash | 4

9. Crear los botones que van a mostrar las imágenes. Para esto:

a. Crear un nuevo símbolo de tipo botón:

Insertar – Nuevo símbolo

Se le pone nombre y en el desplegable “Tipo” se elige “Botón”.

Fig. 9: Nuevo símbolo de tipo botón

Dibujo un rectángulo, con la herramienta “Rectángulo”, para que haga

de botón y le doy color, con la herramienta “Color de relleno”.

Fig. 10: Símbolo de tipo botón

Clic en “Escena 1” para salir del botón y volver al escenario.

b. Creo una nueva capa en la línea de tiempo de la escena para situar el botón.

Para esto:

Clic en Insertar – Línea de tiempo – Capa

Fig. 11: Insertar nueva capa

Escena 1

Herramienta Rectángulo

Color de relleno

Presentación de imágenes con Flash | 5

c. Arrastro el símbolo botón hasta el escenario, tantas veces como imágenes

tenga la presentación.

Fig. 12: Arrastrar el botón al escenario

10. Creo los símbolos con la numeración de los botones:

a. Insertar – Nuevo símbolo

b. Le pongo nombre y en el desplegable “Tipo” elijo “Gráfico”.

Fig. 13: Nuevo símbolo gráfico

c. Escribo un “1” con la herramienta Texto y lo centro desde Ventana – Alinear

(igual que en la Fig. 4)

Fig. 14: Símbolo con la numeración

d. Clic en “Escena 1” para salir del símbolo y volver al escenario.

Herramienta Texto

Escena 1

Presentación de imágenes con Flash | 6

e. Arrastro el nuevo símbolo desde la biblioteca hasta su posición en la escena

(sobre el botón que va a mostrar la imagen).

Fig. 15: Arrastrar el símbolo con la numeración hasta el botón

f. Repito los pasos tantas veces como imágenes tenga.

11. Añado la acción de fotograma que hace que la animación no empiece de forma

automática (acción stop()). Para esto:

a. Creo una capa nueva, desde Insertar – Línea de tiempo – Capa.

b. Muestro la ventana acciones para crear la acción:

Ventana – Acciones

Fig. 16: Mostrar la ventana “Acciones”

Aparece la siguiente ventana:

Fig. 17: Ventana “Acciones”

Presentación de imágenes con Flash | 7

Clic en “Funciones globales”.

Clic en “Control de la línea de tiempo”.

Doble clic en “stop”.

Fig. 18: Añado la acción stop()

12. Añado, a los botones que muestran las imágenes, las acciones de botón que hacen que

la presentación vaya cambiando de imagen. Para esto:

a. Clic en el botón que muestra la primera imagen.

b. Muestro la ventana “Acciones” (Ventana – Acciones).

c. Clic en “Control de clip de película”

d. Doble clic en “on”

e. Doble clic en “release”

Fig. 19: Crear acción de botón

Presentación de imágenes con Flash | 8

f. En la ventana “Acciones”, colocar el cursor a la derecha de la llave.

Fig. 20: Cursor a la derecha de la llave

g. Doble clic en “gotoAndStop”

h. Entre los paréntesis escribir un 1 (nº del fotograma en el que se encuentra la

primera imagen).

Fig. 21: Añadir acción “gotoAndStop(1)”

i. Repito todos los pasos para el botón que muestra la segunda imagen, pero una

vez añadida la acción “gotoAndStop” entre los paréntesis añado un 2, porque

la segunda imagen está en el fotograma 2.

j. Repito todos los pasos para el botón que muestra la tercera imagen, pero una

vez añadida la acción “gotoAndStop” entre los paréntesis añado un 3, porque

la segunda imagen está en el fotograma 3. Repito esto para los demás

botones.

13. Ahora desde Control – Probar película - Probar pruebo la película.

14. En la carpeta donde se ha guardado el archivo de flash, se ha creado un archivo nuevo

de tipo .swf, éste es el que se coloca en internet, se manda por correo electrónico, se

sube a la nube, etc

Cursor