Galería con efecto de Profundidad (2ªparte)

La Galeria

Bien antes que nada quiero dejar claro un par de cosas, este ejercicio se puede resolver de manera más eficiente creando varios .swf y que se vayan llamando, pero como no poseo mucho tiempo libre, lo he realizado todo en un .swf… Si todo en un mismo Flash, por a lo mejor os daréis cuenta de que hay cosas que son un poco inservibles o mas bien ineficientes. Bueno como habréis comprobado la guía que he realizado no va dando pasito a paso para que cuando acabes de leer la tengas igual que yo, sino que pueda servir de inspiración y consulta para aquellos que quieran realizar algo parecido. SE PUEDE HACER MEJOR PERO LO HE SIMPLIFICADO!!! Jejeje uno ya se currará la eficiencia en los proyectos donde te paguen ¿no?

2ªParte

Abrimos nuestra antiguo flash donde conseguimos las fotos y el efecto de profundidad, os acordáis que teníamos nueve MovieClips instanciados con los nombres de fotoX pero que si modificábamos uno se modificaban todos al ser el mismo MC. A parte de esto no hicimos gran cosa ahora lo que haremos es crearnos un nuevo MovieClip que tenga el tamaño de nuestra película principal en mi caso 550×450 en el pondremos un fondo negro, un botón (este puede ser un MovieClip normal o bien un tipo botón en mi caso es un MovieClip que dentro tiene un texto del botón) y un contenedor MovieClip para cargar las imágenes grandes, el contenedor de momento puede ser un cuadrado azul para saber donde se encuentra al final tiene que quedar una cosa como esta de movieClip:

Repasemos dentro del MC tenemos un MovieClip con aspecto de botón con nombre “boton” instanciado como bt, otro MovieClip “boboFoto_mc” instanciado con el nombre de “foto_mc”

Ahora que esta creado volvemos a la película principal y lo eliminamos de ella, quedando guardado en la biblioteca para su uso posterior, pero para poder utilizarlo luego con el attachMovie tendremos que darle un identificador de vinculación, esto como se hace, nos situamos encima de el en la biblioteca y pulsamos clic derecho y luego propiedades (sino sale como la imagen de abajo es porque tenéis que darle a “avanzado”) activamos Exportar para ActionScript y Exportar en el primer fotograma, como vemos tenemos el nombre que le dimos al movieClip y en el campo identificador he puesto el mismo en mi caso “contenedorFoto”. Ya podemos pasar a programar!!!
Bien primero queremos que cuando se pulse sobre una foto pequeña esta haga algo, en este caso que se cargue el contenedorFoto con la foto correspondiente, pues bien para empezar vamos darle vida al evento. Dentro de cualquier fotox (foto_mc) nos vamos al final y ponemos:

//onRollOver=function(){
// this._xscale=ESCALAX;
// this._yscale=ESCALAY;
// this.swapDepths( 9000 );
//}

//onRollOut=onReleaseOutside=function(){
// Reducir();
// Alejar();
//}

onRelease=function(){
archivoGrande=”normales/”+this._name+”.jpg”;
_parent.mostrarFoto(archivoGrande);
}

El codigo comentado es lo que teníamos anteriormente, en la función onRelease lo que hacemos ahora es formar el path de las imágenes grandes que se encuentran en la carpeta “normales/” con el mismo nombre que el movieClip que lo llama fotox por eso this._name y le añadimos la terminación. Luego llamamos a _parent (es decir la peli principal) a la función mostrarFoto pasandole como parámetro dicho path.

Ahora vamos a nuestra peli principal y se podría poner esto:

function mostrarFoto(archivoMostrar){
this.attachMovie(“contenedorFoto”, “mostrarFoto_mc”, 9000000, {_x:0, _y:0});
mostrarFoto_mc.foto_mc.loadMovie(archivoMostrar);
}

Que ocurre, como he dicho antes se nos van a dar unos problemas uno de ellos que cuando se cargue los MC de detrás aunque no se vean se pueden pulsar y cambiaria la foto mostrada. Esto se arregla de la siguiente manera:

function mostrarFoto(archivoMostrar){

this.attachMovie(“contenedorFoto”, “mostrarFoto_mc”, 9000000, {_x:0, _y:0});
mostrarFoto_mc.foto_mc.loadMovie(archivoMostrar);

foto1._visible=false;
foto2._visible=false;
….//y así hasta que completemos todas las fotos
}

Ok ahora si que funciona, pero vemos que la foto no sale centrada, bueno pues vamos a ser un poco eficientes, aunque no trabajemos con swf separados como dicta la ley…Ahora rectificamos el código de la siguiente manera:

function mostrarFoto(archivoMostrar){

//cargamos el movie clip con nombre de instancia mostrarFoto_mc en x:0 y Y:0
this.attachMovie(“contenedorFoto”, “mostrarFoto_mc”, 9000000, {_x:0, _y:0});

//creamos un loader
var loader:MovieClipLoader = new MovieClipLoader();

var listener:Object = new Object();
//creamos un listener que “escuche” al evento onLoadInit
//a partir de ahora el mc tomará las dimensiones del jpg o swf cargado
listener.onLoadInit = function(target:MovieClip):Void{

//aquí pongo un trace para ver que el movieclip ha tomado las
//dimensiones de la foto (descomentarlo para hacerlo funcionar)

//trace(“el ancho del mc contenedor llamado”+mostrarFoto_mc.foto_mc._name + “es”+mostrarFoto_mc.foto_mc._width)

//ahora vamos a centrar la imagen sugun su medida, para ello realizamos
//la siguiente operacion y al y le restamos 20 para que no quede al centro

mostrarFoto_mc.foto_mc._x=((mostrarFoto_mc._width-mostrarFoto_mc.foto_mc._width)/2)+(mostrarFoto_mc._x);

mostrarFoto_mc.foto_mc._y=((mostrarFoto_mc._height-mostrarFoto_mc.foto_mc._height)/2)+(mostrarFoto_mc._y)-20;

}

//carga de la imagen que corresponda nada más abrir la galería
loader.addListener(listener);
loader.loadClip(archivoMostrar, “mostrarFoto_mc.foto_mc”);

foto1._visible=false;
foto2._visible=false;
foto3._visible=false;

Consiguiendo este resultado cuando pulsemos sobre un foto pequeña:

Bueno ahora nos encontramos que no podemos volver a la película principal, para ello habíamos creado el botón instanciado como bt, nos introducimos dentro del movieclip botón y escribimos:

onRelease=function(){

_parent._parent.quitarFoto();

}

_parent._parent son dos porque tenemos que saltar el contenedorFoto y uno mas para llegar a la película principal y en ella llamar a quitarFoto que tendrá este aspecto.

function quitarFoto(){

mostrarFoto_mc.removeMovieClip();
foto1._visible=true;
foto2._visible=true;
foto3._visible=true;
…

}

Quitamos mostrarFoto_mc de la escena con removeMovieClip() y volvemos a poner a visible las fotos, lo vuelvo a repetir esto no tendría que hacerse si desde un principio lo hubiéramos hecho partiendo las películas, es decir en varios swf’s. Y el resultado final es el siguiente:

RESULTADO FINAL

Bueno esta galería no tiene lineas de tiempo, ni animaciones ni nada, solo script y el contenido del primer frame, a esto siempre le podemos dar animación pero no era mi intención solo quería mostrar lo sencillo que es crear un galería en un solo swf… Espero haber inspirado a alguien con esta mini-guia o proyectillo o chapucilla como queráis llamarle… RECORDAD FLASHEROS ESTO SE PUEDE HACER 1000 VECES MEJOR, no lo hagáis en un par de horas como he hecho yo… jejejeje bueno el meollo del asunto ya esta ahí ahora solo tenéis que trabajar vosotros.