MuelaLab Blog: Tutoriales Diseño Web, flash, Facebook, php, Actionscript.

Tutorial Galeria Finita ActionScript 3

Ahora vamos a hacer uno Tutorial de Actionscript3, para realizar una galeria de imagenes Finitas, de cierta forma es un tutorial super basicoooooo, pero sirvie bien para los que estan migrandose o comenzando con AS3, ademas la idea de este tutorial es crear una galaeria simple, pero luego veremos como aplicar un efecto 3D a la misma que le dara un toque mucho mas vistozo! :) … Por ultimo cabe decir que para realizar este ejemplo necesitas tener como minimo la version de Flash CS3.
Este sera el resultado final:

This movie requires Flash Player 8

Creamos un nuevo documento de Flash y Actionscript 3, lo ponemosa 24Frames/seg y con un ancho de 480 y un alto de 200, ahora nos descargamos estas imagenes de prueba que usaremos para nuestro ejemplo, una ves descargas (y descomprimidas) simplemente las arrastramos de la carpeta al escenario de flash… Y ahora procederemos a ordenarlas tomamos de una por una y las colocamos cada una a 10px de separacion entre ellas… (Pueden colocar una en X=0 Y=0, la siguiente en X=110 y Y=0 y luego X=220 y asi sucesivamente) una ves ordenadas las seleccionamos todas y las convertimos en MovieClip precionando F8, selecionamos el punto de control en el centro y ponemos como nombre img_mc….

Imagenes Seleccionadas Y MovieClip

Imagenes Seleccionadas Y MovieClip

Una ves echo esto, seleccionamos el MC en el escenario y en el panel de propiedades le ponemsocomo nombre de instancia “img_mc”, por ultimo colocamos el MC centrado (x=240 y=100)… Listo tenemos el MC preparado empecemos con el codigo, que solo son unas cuantas lineas, seleccionamos el primer frame de la pelicula y en el panel de acciones (F9) ponemos el siguiente codigo:

var minX:Number=35;
var maxX:Number=445;
var mitadEscenario:Number=240;
img_mc.addEventListener(Event.ENTER_FRAME,mover);

Explicacion: Es muy simple, creamos 3 Variables que contienen datos sencillos, la coordenada menor (minX) que el mc img_mc puede tener, la coordenada mayor (estas dos las sacamos simplemente haciendo que el mc quede 10px separado del inio y 10 del final del escenario) y la mitad del escenario…
Luego al MC img_mc le colocamos un listener que ejecutara la funcion “mover” cada ves que se haga el evento ENTER_FRAME…

Ahora nos falta crear esa funcion “mover” que como su nombre lo dice se encargara de mover el MC img_mc.. asi que agregamos estas lineas debajo de las anteriores:

function mover(e:Event){
	var movX:Number= ((stage.mouseX-mitadEscenario)/mitadEscenario)*15;
	img_mc.x+=movX;
	if(img_mc.x<minX){
		img_mc.x=minX;
	}else if(img_mc.x>maxX){
		img_mc.x=maxX;
	}
}

Explicacion: Primero obtenemos un valor que seran los pixeles que se movera el MC, para esto usamos una simple formula (stage.mousex: nos da la pocicion del Mouse en la coordenada X del escenario) y la mejor manera de explicarla seria con un ejemplo: Si tenemos el mouse en la coordenada 20, (stage.mouseX-mitadEscenario) nos dara como resultado -220 (esta parte siempre nos dara un numero entre -240 y 240, dependiendo la pociocion del Mouse), ahora si ese -220 lo dividimo entre la mitad del escenario -220/240 nos dara como resultado -.91 (igualmente al hacer esta division siempre obtendremos un numero entre -1 y 1, dependiendo de la pocicion del mouse!!!! =O…) por ultimo este numero lo multiplicamos por 15 (podria ser caulquier valor) y de esta forma obtenemos un movimiento de pixeles de -13.75 (simepre obtendremos un numero entre -15 y 15)… como ven de esta forma dependiendo la pociccion del mouse, la galeria se movera mas o menos rapido y en la direccion correcta!!!.. =)
Ya teniendo este valor!! se lo sumamos al valor actual de “img_mc” y asi se movera…
Por ultimo tenemos 2 condiciones que simplemente verifican si la pocicion de “img_mc” se sale de alguno de los limites que establecimos antes (minX o maxX) y si es asi entonces lo pociciona directamente en el limite…

Y listo!! tenemos nuestra galeria funcionando facilmente!! pocas lineas de codigo y da un muy buen efecto! esto en ActionScript3 =)…

Espero les haya gustado el tutorial y ya saben que cualquier duda comentario o sugerencia escribanos y estare atento =)!!!..Descarga De Archivos Muelalab.com
La proxima ves veremos como hacerla con un efecto 3D :) … Gracias y suerte!!

  • fantástico!!
    espero la segunda parte!!!

  • veo que la segunda parte va tardando …………….

    Sigo esperando!!

    Un abrazo

  • Genial!
    Lo acabo de probar y funciona perfecto!
    Ahora tengo una duda, como hacer para restringir la función solo a una area del swf. Es decir que cuando lleve el ratón a otra parte el movimiento se detenga. Probé cambiando (Event.ENTER_FRAME,mover) por (MouseEvent.ROLL_OVER,mover) y no funcionó.
    Gracias!!

  • Muela: Gracias por el aporte, pero no se que pasa que no puedo abrir el .fla con flash CS4. Me dice formato de archivo incorrecto y la verdad, me interesaria mucho poder ver el codigo

Puedes Seguir Cada Respuesta A Esta Entrada Desde El Archivo RSS 2.0