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

GALERIA MONERRIS

El otro día entre Web y Web intentando aprender algo nuevo me encontré con Sargento un gran personaje y un máquina en lo que a flash se refiere pues bien voy a hacer referencia a muchas cosas de las que habla en su blog, puede decirse que es una mezcla sobre los ejercicios de profundidad que tiene, lo único que yo lo voy a convertir en una galería de imágenes con el efecto de profundidad.

Empecemos:

Primero realizaremos la apariencia sin imágenes solamente 2, la de fondo y una que no es necesaria pero la he puesto. Bien vamos a trabajar con flash con un tamaño de película de 550×400 cada uno puede trabajar con lo que quiera, teniendo en cuenta que el tamaño del fondo se tiene que ajustar a el.

Una vez puesto el fondo en Flash nos proponemos a empezar realmente, primero crearemos un MovieClip llamado “foto”, este en un principio es un cuadro negro. Rellenamos la película con muchos “MC foto” (depende de las fotos que tengamos en mi caso 9). Hasta obtener algo parecido a esto:

Paso 1

En un principio tendremos que darle a cada MovieClip una profundidad, para esto dentro de este tendremos que escribir la sentencia:

this.swapDepths( this._y );

Así los MC tendrán una profundidad según el ejeY. Pero lo que queremos es el efecto de profundidad, para ello escribiremos lo siguiente:

//Porcentaje a reducir
reduce=this._y / 16.5;
reduce=reduce * 0.05;
Reduccion
this._xscale=this._xscale*reduce;
this._yscale=this._yscale*reduce;

Paso a como he llegado a esa concusión pues como en mi caso el horizonte esta arriba del todo o sea en y=0, y lo más cerca bajo de todo y=400; entonces no podía realizar una simple regla de 3 así que decidí que cada 16,5 pixeles en el ejeY el tamaño a reducir sea el 5% de la imagen, de ahí la división. En la reducción solo aplico el porcentaje final a reducir. No lo vamos a ver cuando trabajemos en la línea de tiempo, para poder verlo tendremos que ejecutar la película, quedará una cosa tal que esta:

Bien ya lo tenemos un poquito, pero y las imágenes? Pues bien pasamos a las imágenes que se van a mostrar, los thumbnails van a estar en una carpeta a parte llamada “thumbs” estos thumbnails van a tener una medida restrictiva de 160pixeles en la parte más grande (os recuerdo que cada uno puede utilizarlo a su manera) y las fotos van a estar nombradas de la siguiente manera fotoX.jpg (donde x es el numero), las normales van a estar en la carpeta “normales” con unas medidas que respeten el tamaño de la película para no salirse de los márgenes y sus nombres van a ser los mismos que los thumbnails por eso lo ponemos en otra carpeta.

Como cargamos los thumbnails?

Para cargar los thumbnails primeramente vamos a dar nombres de instancias a todos los movieClips que hemos metido en la película principal, estos van a ser fotox (x es el numero de movieclip este va a ser hasta el número de foto máximo) se acostumbra a poner fotox_mc pero en este caso no, ya lo veréis mas adelante.

Entramos en cualquier “MovieClip Foto” y en este creamos un nuevo MovieClip que sea un cuadrado le damos de nombre de instancia “bobo_mc” y lo colocamos a x=0 e y=0 este va a ser donde carguemos la imagen en cuestión, seguidamente entramos en “bobo_mc” y borramos su contenido (tranquilos no se pierde el movieClip) volvemos al “MC Foto” y escribimos este código arriba del todo:

archivo=”thumbs/” + this._name + “.jpg”;
bobo_mc.loadMovie(archivo);

He aquí el motivo de instanciar a cada movieClip como fotoX porque con un string compuesto por la carpeta + el nombre que tenga el movie clip + el tipo de imagen tenemos ya el path de dicha imagen y solo la tendremos que cargar en bobo_mc, ahora también podremos borrar lo de dentro del “MC Foto” al final quedará como contenedor de bobo_mc y este como contenedor de la foto y todo se realizará por código. Se podría realizar desde la película principal pero no acaba de funcionar el resto de opciones que le vamos a dar. Cuando ejecutemos quedara así:

Como le damos el efecto de profundidad al mover el ratón?

“Fácil” esta es la parte que he más me fijado en el tuto de Sargento pongo primero el código que tenemos que colocar en el “MovieClip Foto”.

orig_x = this._x; // Origen en X
orig_y = this._y; // Origen en Y

onEnterFrame = function(){
// Obtenemos la posición destino en X
dest_x = orig_x + ( ( 275 – _root._xmouse ) * ( this._xscale / 100 ) );
// Asignamos la posición del objeto
// Evaluamos la diferencia entre la posición destino y la actual
incr_x = ( dest_x – this._x ) / 10;
// Incrementamos la posición
this._x += incr_x;

dest_y = orig_y – (_root._ymouse / 20 );

incr_y = ( dest_y – this._y ) / 10;
this._y = dest_y;
}

Paso a explicarlo, primero recogemos los orígenes de donde se encuentran las imágenes en el momento, y ya dentro del enterFrame obtendremos el destino según la posición del ratón (desde la película principal por eso root) tenemos 275 que es la mitad de nuestra anchura de la película principal y luego ya la parte que queda de x es para suavizar el movimiento. Os recomiendo que si no queréis llegar a la conclusión que copiéis y ya vais cambiando los valores y comprenderéis que es lo que sucede realmente.

La parte del ejey es parecida a lo que dice Sargento lo que ocurre que yo la he modificado a mi gusto para que quede bien en la imagen de fondo. Y con esto ya tendremos la película realizada.

Resultado Final

Lo único que me dejo es que he encapsulado lo que he explicado anteriormente en funciones para poder dar su tamaño original y poner en frente cuando se pone el ratón encima y que vuelva a su estado normal cuando se salga. Para ello necesito 2 variables globales que serán el tamaño de la imagen o sea de la escala.

var ESCALAX:Number=this._xscale;
var ESCALAY:Number=this._yscale;

Y luego añado esto al final:

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

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

Reducir y Alejar es lo que he explicado antes que lo he puesto como funciones asi que ahora en el movie clip tendremos:

function Alejar(){
//Profundidad asociada
this.swapDepths( this._y );
}

function Reducir(){
//Porcentaje a reducir
reduce=this._y / 16.5;
reduce=reduce * 0.05;
….

Tened en cuenta que ahora solo después de hacer la carga de la imagen tendremos que llamar a dichas funciones para que acabe de funcionar.

Bueno esto a acabado de momento si tenéis alguna duda comentarla, en la siguiente entrega trabajaremos con el mismo flash pero esta vez cuando clicamos sobre una foto esta se pondrá en toda la pantalla para poder verla.

Para aqellos que digan que se puede mejorar lo se!! lo he hecho todo en una mañana, en la proxima entrega se arreglaran los problemas que vayan surgiendo

Thenks Sargento!