Tutorial Galería con clips de película y carga externa.

1 - Abrir un nuevo documento, las medidas que uso son 400 x 250 px, si hacen clic en tamaño pueden cam-
biarle las medidas que tiene por defecto. y guardarlo con el nombre de principal

2 - La primer capa la renombrare como botones (haciendo doble clic donde dice capa1), y en esta capa colo-
care un boton, primero creare un rectangulo y presionar F8 o boton derecho > convertir en simbolo o menu
modificar > convertir en simbolo, de cualquiera de estas tres formas eligen boton y lo nombran boton1.
Hacer doble clic en el circulo y asi entran dentro del boton para cmabiarle el color, o en este caso agregarle
el texto

1 Hecho por Verys

3 - Para este texto, centro del boton cree otra capa, en ella escriben el texto y lo convierte en clip de pelicula,
hacen el mismo procedimiento con F8 (convertir en simbolo y eligen clip de pelicula), cree 2 clip una llama-
do texto 1 y el otro texto 2 , simplemente para que cuando el raton este sobre el boton este cambie el color
del texto.

Por ejemplo, cuan-

do el boton esta en
reposo el texto esta en
blanco

Cuando el raton esta

sobre el botone este
cambia a gris.

2 Hecho por Verys

4 - Una vez que cambiamos estos parametros volvemos a la escena principal, haciendo doble clic en cual-
quier parte de la hoja (excepto en el boton) o clic en escena

Y Creen otro boton el cual va a cerrar los clip que se cargaran mas adelante. es el mismo procedimiento que
el boton que va a llamar a la galeria. Entran al boton, configuran el boton y vualven a escena nuevamente.

5 - Crear una nueva capa y llamarla clip 1 En esta capa van a crear un rectangulo que se convertira en nues-
tro clip de pelicula 1, es en donde se va a cargar los botones de la galeria. Crear un rectangulo pequeño

3 Hecho por Verys

Crear un rectangulo pequeño

presionar F8 y convertirlo en clip de pelicula con le nombre clip1

Entrar dentro de este clip de pelicula (con doble clic sobre el clip) y borrarlo con la tecla suprimir y solo va a
quedar esta el signo +

Volver a la escena principal y van a ver que quedo un circulito, a este circulito lo van a mover al lugar en
donde quieren que aparescan los botones de la galería. Ya que la carga externa carga desde el vertice supe-
rior izquierdo.

4 Hecho por Verys

6 - Crear una nueva capa y llamarla clip 2, En esta capa van a aparecer las imagenes en grande que van a
llamar los botones de la galeria

Hacen el mismo procedimiento

que el clip anterior, crear un rec-
tangulo, transformarlo en un clip
de pelicula clip2 entrar dentro de
este clip2 y borrar el rectangulo,
por eultimo volver a la escena
principal y acomodar el circulito
que quedo del clip2

5 Hecho por Verys

Con esto terminamos nuestra escena principal, y después le colocaremos los códigos para que funcione
correctamente.

7 - Crear un nuevo documento (esto es para los botones de la galeria) con estas medidas y guardarla con el
nombre de botones

En este archivo colocare 3 imagenes pequeñas de 50 x 50 pixeles (una esta repetida ñ_ñ), estas imagenes las
voy a importar a la biblioteca (menu archivo > importar a biblioteca)

Renombrar la capa que existe y llamarla botones y acomodar las imagenes en su posicion.

6 Hecho por Verys

8 - A estas tres imagenes (hay una repatida) las transformaran en botones con F8 y las llamaran btn1, btn2 y
btn3 respectivamente. ES MUY IMPORTANTE QUE ESCRIBAN CORRECTAMENTE LOS NOMBRES
DE LOS BOTONES PORQUE SINO ES UN LIO BUSCAR LA PALABRA EN LA QUE NOS EQUIVO-
CAMOS.

9 - Ahora vamos a colocarle las acciones a estos botones, OJO ESCRIBAN BIEN LOS CODIGOS!!!
Primero crear una nueva capa y llamarla AS (actionscript) y hacen clic en el primer fotograma y
despues ir al panel acciones (menu > ventana > acciones)

7 Hecho por Verys

 Las primeras 5 lineas es lo que va a permitir que cambien las imagenes al hacer clic en cualquier
boton. Y esta accion la va a hacer en el clip2

var frameNum:Number;

function photoChange(){
_root.clip2.gotoAndStop(“img”+frameNum);
}

De la fila 6 a 9 es la accion del primer boton, es importante que este codigo es igual para los otros
dos botones, la unica gran diferencia y MUY IMPORTANTE, es que estan cada uno con su nombre y nume-
ro de frame btn1 con frameNum 1, btn2 con frameNum 2, btn3 con frameNum 3.

btn1.onRelease = function(){
frameNum = 1;
photoChange(); Cuando coloquen mas
} imagenes lo unico a
tener en cuenta es esto
btn2.onRelease = function(){ el nombre del boton
frameNum = 2; con su numero de fra-
photoChange(); me, por ejem el boton
} btn25 frameNum 25

btn3.onRelease = function(){
frameNum = 3;
photoChange();
}

10 - Ahora minimicen este panel de acciones haciendo clic en un borde, asi vemos nuevamente nuestros bo-
tones, porque todabia hay que decirles a estos botones que imagen deben llamar cuando hagan clic en ellos.

Clic en el primer boton btn1 e ir al panel acciones (clic en el borde y se maximiza) y colocar el si-
guiente codigo

on (press){
_root.clip2.loadMovie(“img/17g.jpg”);
}

8 Hecho por Verys

 Vamos por parte, esto es muy importante.

on (press) : es la accion de presionar el boton

_root: le indica que si o si debe aparecer la imagen en el clip2
clip2: es en donde aparecera la imagen
loadMovie: es la accion de cargar la imagen
img: es la carpeta en donde se encuentra nuestra imagen grande y la barra le indica que la imagen
esta dentro de esta carpeta
17g.jpg: es el nombre de la imagen y siempre se le debe agregar la terminacion del archivo en este
caso es .jpg porque es una imagen

Este procedimiento lo hacen con todos los botones, y tengan cuidado al hacer la ruta de las imagenes que la
imagen pequeña corresponda a la grande. y lo unico que deben cambiar es el nombre de las imagenes

on (press){ on (press){
_root.clip2.loadMovie(“img/7g.jpg”); _root.clip2.loadMovie(“img/10g.jpg”);
} }

Paréntesis
Si ven los archivos que van a bajar o
bajaron, van a ver los archivos rojos
es en los que trabaje en flash, los
blancos son los .swf o vista previa y
una carpeta llamada img que es en
donde estan las imagenes que ven
abajo.

Todas las imagenes que vallan a

usar coloquenla dentro de una car-
peta y siempre traten de tener orde-
nado asi como ven estos archivos.

9 Hecho por Verys

11 - Por ultimo le colocaremos un nombre de instancia a nuestros botones, sin esto no va a funcionar los
botones, es como el nexo entre las acciones y las imagenes. para esto simplemente hagan clic en el primer
boton que se llama btn1 y el nombre de instancia lo llamaran btn1 y va en el panel de propiedades

Hacen lo mismo con los demas botones,

btn2 nombre de instancia btn2
btn3 nombre de instancia btn3
y asi sucesivamente.

PRESIONEN CTRL+ENTER PARA VER LA VISTA PREVIA, POR EL MOMENTO LOS BOTONES NO
VANA HACER NADA. NO SE PREOCUPEN.

12 - Ahora volvemos a nuestro archivo principal y le colocaremos nombres de instancia a los clip el 1 y 2
hagan clic en el circulito del clip1 y el nombre de instancia es clip1, lo mismo hacen con el clip2 nombre de
instancia clip2

10 Hecho por Verys

13 - Ya vamos terminando, crear una nueva capa y llamarla as (actionscript) hacer clic en el primer fotogra-
ma ir al panel acciones y colocarle una accion de stop, el cual es asi

stop();

11 Hecho por Verys

14 - Por ultimo, seleccionar toda la fila del primer fotograma, con la tecla shif, y con el boton derecho del
raton copiamos estos fotogramas

y en la fila del fotograma 2 seleccionamos todos los fotogramas que vamos a usar y clic derecho del raton >
pegar fotogramas

12 Hecho por Verys

Y quedan de esta manera,

Esto lo hacemos porque cuando veamos la vista previa no queda estetico que aparesca el boton para borrar la
imagenes de los clip de pelicula 1 y 2, asi que ahora hacemos esto, nos situamos en el fotograma 1 en la capa
botones hacemos clic en el boton cierra los clip y lo borramos con la tecla suprimir

Asi este boton solo aparece cuando esten en escena los clip 1 y clip2

13 Hecho por Verys

15 - Solo faltaria colocarle las acciones a los botones, empezamos con le de llama a galeria Hacemos clic en
el boton e ir al panel acciones y colocar la siguiente accion

on (press){
clip1.loadMovie(“botones.swf”)
gotoAndStop(2);
}

14 Hecho por Verys

Esto quiere decir que:
on (press): cuando presionen el boton
clip1: es en donde se cargara el archivo swf de los botones
loadMovie: carga la pelicula
botones.swf: es el archivo que se va a cargar en el clip1
gotoAndStop(2): Ledise que lo haga en el fotograma 2 (asi aca aparece el boton que borra el coneni-
do de los clip de pelicula 1 y 2

Nos queda solo colocarle las acciones al boton cierra los clip, para eso clic en este boton e ir al panel de
acciones y colocar el siguiente codigo:

on (press){
this.clip1.unloadMovie()
this.clip2.unloadMovie()
gotoAndStop(1);
}

Esto quiere decir que:

on (press): cuando presionen el boton
this.clip1unloadMovie(): esto le dice que borre el contenido del clip1
this.clip2unloadMovie(): esto le dice que borre el contenido del clip2
gotoAndStop(1): Le dice que valla y se detenga en el fotograma 1 asi el boton cierra los clip desapa-
rece de escena

OJO CON LAS MAYÚSCULAS, MINÚSCULAS Y LOS ESPACIOS!!!

Esto seria todo simplemente solo deben presionar ctrl+enter para ver la pelicula y su funcionamiento. Si
tienen alguna duda, pueden preguntarme en mi blog

http://invisiblementevisible.blogspot.com

Saludos =)

15 Hecho por Verys