FLASH 8

GUIA DE ESTUDIO
Septiembre 19-23 de 2011

Tema: EJERCICIO GALERIA CON IMAGENES

Lo que se busca con este ejercicio es repasar la manera de colocar imgenes

en la biblioteca de flash 8 e incrustar imgenes fotograma a fotograma.

Y como algo nuevo aprender a transformar figuras geomtricas en un botn

para luego colocarle cdigo Action Script de flash 8.

1. Comenzando

Lo primero es tener 6 imgenes disponibles, ya sean que estn en nuestro

computador o bajadas de internet.

Para esto se recomienda crear una carpeta en mis documentos con el nombre
galera flash y colocar en esta las 6 imgenes.

De igual modo en esta misma carpeta vamos a guardar nuestro trabajo final de
la gua.

Y dentro de galera flash las 6 imgenes.

2. Importar las imgenes a la Biblioteca

Ahora importamos nuestras 6 imgenes a la biblioteca de flash.

Ingresamos a flash y estando en un escenario nuevo, hacemos clic en:

Cargando las seis imgenes que tenemos.

Luego de esto visualizamos la Biblioteca al lado derecho de flash.

Si no esta activa podemos colocarla de dos maneras:

1. Ventana / Biblioteca

2. Ctrl + L

Aqu constatamos que estn las 6 imgenes:

3. Cuadramos las medidas del escenario de trabajo

Luego cambiamos el tamao del escenario haciendo clic derecho /

Propiedades del documento.

Le colocamos: Anchura = 400 y Altura = 300

4. Colocar las imgenes en sus respectivos fotogramas

Colocamos la primera imagen en el primer fotograma arrastrndola al

escenario, colocndola en el centro para luego centrarla bien utilizando la
ventana alinear (Ctrl + K).

Debemos seleccionar la imagen con la flecha negrita para poder centrarla.

Agregamos otro fotograma con F6, borramos la imagen repetida y colocamos la

siguiente, centrndola de igual forma que la anterior.
Al final tenemos 6 fotogramas con 6 imgenes centradas.

Si hacemos Ctrl + Enter, veremos que se presentan las seis imgenes

rpidamente.

5. Cambiar el nombre a la capa de las imgenes

Para organizar el trabajo le cambiamos el nombre a la capa que contiene las

imgenes, haciendo doble clic en el nombre de la capa y escribimos Imgenes.

Queda as:

6. Insertamos una nueva Capa

Insertamos una nueva capa y la llamamos Parar

Despus de tener esta nueva capa, nos paramos en el primer fotograma de la
capa y presionamos F9.

De inmediato nos aparece activa la ventana Acciones - fotograma

Donde escribimos el siguiente cdigo:

stop();

Con esto lo que buscamos es que se pare la animacin en el primer fotograma.

Hacemos Ctrl + Enter y nos damos cuenta de esto.

7. Insertamos una nueva Capa para colocar dos botones

Ahora colocamos una nueva capa para colocar dos botones que nos permitan
desplazarnos entre los fotogramas y la llamamos botones.
Nos ubicamos en el primer fotograma de esta nueva capa y dibujamos un
botn de la siguiente manera:

1. Dibujamos un cuadrado dejando presionada la tecla Shift o

para que se mantenga simtrico.

2. Lo giramos de la siguiente manera con la herramienta transformacin

libre y nos queda as:

3. Ahora seleccionamos medio rombo y eliminamos esa parte obteniendo

el siguiente botn:
4. Ahora seleccionamos este triangulo y lo convertimos en un botn
haciendo F8, le colocamos el nombre Atrs, Tipo = Botn y hacemos clic
en Aceptar.

5. Ahora copiamos el botn y lo pegamos para obtener un duplicado, solo

que debemos cambiarle la posicin en:

6. Al final obtenemos los siguiente:

8. Colocarle cdigo a los dos botones

Ahora le colocamos cdigo a los botones para que se pueda desplazar la

animacin de un fotograma a otro.

1. Hacemos clic encima del primer botn y presionamos F9.

De inmediato nos aparece activa la ventana Acciones - fotograma

Donde escribimos el siguiente cdigo:

on (release) {
prevFrame()
}
 2. Hacemos clic encima del segundo botn y presionamos F9.

De inmediato nos aparece activa la ventana Acciones - fotograma

Donde escribimos el siguiente cdigo:

on (release) {
nextFrame()
}
9. Colocarle otro color a los botones

Si queremos que el botn cambie de color al darle clic, hacemos doble clic en
el botn y nos aparece la siguiente pantalla:

Luego presionamos F6 y nos ubicamos en la opcin Sobre, en donde le

cambiamos el color azul.

Para salir de esta opcin hacemos doble clic afuera.