Hello, este es el día que has estado esperando, ahora experimentaras con nuevas técnicas que van más haya de lo conocido (“ya sabes como soy de exagerado”). En el tutorial que a continuación veras te llevare de la mano y de esa forma terminaras una súper galería de principio a fin, la galería tiene una animación programada que simula un aumento (zoom) dicho zoom es aplicado cuando se hace clic en las imágenes. Tutorial realizado en Flash 8. Good luck ¿comenzamos?.
1-. Hacer un documento de propiedades (ctrl. J).
a)-. Las dimensiones son 615 * 310 píxeles de ancho y alto.
b)-. Color de fondo #CCFFFF.
c)-. Utilizar como velocidad de fotogramas 50 fps.
Nota las dimensiones del documento son aplicables solamente si usas para la galería imágenes de dimensiones no mayores a 510 * 280 píxeles y respetas las coordenadas que menciono.
2-. Crear un símbolo (ctrl. F8).
a)-. Nombrarlo imag_01.
b)-. Dar como Tipo Clip de película.
3-. Ubicado en el símbolo Importar (ctrl. R) la primera de las imágenes.
a)-. Las dimensiones de la imagen son 510 * 280 píxeles.
b)-. Colocar la imagen en coordenadas X = -255.0 y Y = -140.0.
Nota si por alguna razón tienes imágenes de otras dimensiones modificar las coordenadas. Ej. Dimensiones 100 * 200 coordenadas X = -50.0 y Y = -100.0, las coordenadas con la mitad de las dimensiones de la imagen con signo negativo.
4-. Crear un nuevo símbolo (ctrl. F8)
a)-. Nombrarlo imag_02.
b)-. Dar como Tipo Clip de película.
5-. Ubicado en el símbolo Importar (ctrl. R) la segunda imagen que aparecerá en la galería.
a)-. Las dimensiones de la imagen son 510 * 280 píxeles.
b)-. Colocar la imagen en coordenadas X = -255.0 y Y = -140.0.
Nota crear tantos símbolos (ctrl. F8) e Importar (ctrl. R) en cada uno de ellos las imágenes que aparecerán en la galería
6-. Crear otro símbolo (ctrl. R).
a)-. Nombrarlo galeria.
b)-. Dar como Tipo Clip de película.
7-. Una vez en el símbolo galeria arrastrar desde la biblioteca el símbolo imag_01
8-. Hacer visible el panel (ctrl. T) de Alinear & información & Transformar.
a)-. Seleccionar la opción de Transformar.
b)-. Seleccionar la opción Restringir y modificar una de las casillas con el 15.0 %.
c)-. Colocar como Nombre de instancia galeriaimagen1.
d)-. Colocar la imagen reducida de tamaño en coordenadas X = 0.0 y Y = -0.0.
9-. Arrastrar desde la biblioteca el símbolo imag_02.
a)-. Luego reducir la imagen al 15.0 %.
b)-. Colocar como Nombre de instancia galeriaimagen2.
c)-. Colocar la imagen en coordenadas X = 0.0 y Y = 52.0.
Nota dependiendo de cuantas imágenes sean agregadas a la galería el Nombre de instancia cambiara. Ej. galeriaimagen1, galeriaimagen2, galeriaimagen3, galeriaimagen4, galeriaimagen5, galeriaimagen6, etc.
10-. Crear el último de los símbolos (ctrl. F8).
a)-. Nombrarlo acciones mc.
b)-. Dar como Tipo Clip de película.
11-. Regresar nuevamente al símbolo galeria.
a)-. Arrastrar desde la biblioteca el símbolo acciones mc.
b)-. Colocar como Nombre de instancia mcgaleria.
c)-. Colocar el símbolo en coordenadas X = 344.0 y Y = 152.0
12-. Regresar a la Escena.
a)-. Arrastrar desde la biblioteca el símbolo galeria.
b)-. Colocar el símbolo en coordenadas X = 5.0 y Y = 3.0.
13-. Seleccionar el símbolo no el fotograma.
a)-. Abrir el la barra de Acciones – clip de fotograma e insertar el siguiente código.
onClipEvent (load) {
this.GALLERY = “galeriaimagen”;
this.ORIGEN_X = this[this.GALLERY+1]._xscale;
this.ORIGEN_Y = this[this.GALLERY+1]._yscale;
this.maximag = 50;
this.vel = 0.1;
this.MaxDepths = this.maximag+1;
var i = 1;
while (i<=this.maximag) {
var mcImg = this[this.GALLERY+i];
mcImg.startx = mcImg._x;
mcImg.starty = mcImg._y;
if (mcImg._x>this.mcgaleria._x) {
if (mcImg._y<this.mcgaleria._y) {
}
}
if (mcImg._x<this.mcgaleria._x) {
if (mcImg._y>this.mcgaleria._y) {
mcImg.Direction = 2;
} else {
mcImg.Direction = 2;
}
}
mcImg.smoothSizing = function() {
if (!this.bScaling) {
return (undefined);
}
if (this.bExpanded) {
var tx = this._x-this._parent.vel*(this._parent.mcgaleria._x-this.startx);
var ty = this._y-this._parent.vel*(this._parent.mcgaleria._y-this.starty);
switch (this.Direction) {
case 1 :
if (tx<=this.startx) {
this._x = this.startx;
this._y = this.starty;
} else {
this._x = tx;
this._y = ty;
}
break;
case 2 :
if (tx<=this.startx) {
this._x = this.startx;
this._y = this.starty;
} else {
this._x = tx;
this._y = ty;
}
break;
}
var newxscale = this._xscale-this._xscale*this._parent.vel;
var newyscale = this._yscale-this._yscale*this._parent.vel;
if (newxscale<this._parent.ORIGEN_X || newyscale<this._parent.ORIGEN_Y) {
newxscale = this._parent.ORIGEN_X;
newyscale = this._parent.ORIGEN_Y;
this.bScaling = false;
this.bExpanded = false;
}
this._xscale = newxscale;
this._yscale = newyscale;
} else {
var tx = this._x+this._parent.vel*(this._parent.mcgaleria._x-this.startx);
var ty = this._y+this._parent.vel*(this._parent.mcgaleria._y-this.starty);
switch (this.Direction) {
case 1 :
if (tx>=this._parent.mcgaleria._x) {
this._x = this._parent.mcgaleria._x;
this._y = this._parent.mcgaleria._y;
} else {
this._x = tx;
this._y = ty;
}
break;
case 2 :
if (tx>=this._parent.mcgaleria._x) {
this._x = this._parent.mcgaleria._x;
this._y = this._parent.mcgaleria._y;
} else {
this._x = tx;
this._y = ty;
}
break;
}
var newxscale = this._xscale+this._xscale*this._parent.vel;
var newyscale = this._yscale+this._yscale*this._parent.vel;
if (newxscale>100 || newyscale>100) {
newxscale = 100;
newyscale = 100;
this.bScaling = false;
this.bExpanded = true;
this._parent.ExpandCompleted();
}
this._xscale = newxscale;
this._yscale = newyscale;
}
};
mcImg.onEnterFrame = function() {
if (this.bScaling) {
this.smoothSizing();
}
};
mcImg.onRelease = function() {
if (!this.bScaling) {
var i = 1;
while (i<this._parent.maximag) {
if (this._parent[this._parent.GALLERY+i].bScaling) {
return (undefined);
}
i++;
}
var NewSelIndex = this._name.substring(this._parent.GALLERY.length, this._name.length);
this._parent.ReduceStarted();
if (this._parent.CurrSelIndex != 0 && this._parent.CurrSelIndex != NewSelIndex) {
this._parent[this._parent.GALLERY+this._parent.CurrSelIndex].bScaling = true;
}
this.bScaling = true;
if (this.bExpanded) {
this._parent.CurrSelIndex = 0;
} else {
this.swapDepths(this._parent.MaxDepths++);
this._parent.CurrSelIndex = NewSelIndex;
}
}
};
i++;
}
}
Con esto queda finalizada la explicación de la súper galería well done!!.
P.D. Presionar ctrl. + Enter para visualizar el resultado del trabajo. Para lograr que el efecto funcione con efectividad respetar las dimensiones de las imágenes así como el de las coordenadas. Hasta muy pronto.
Visualizar archivo swf de este tutorial
Descarga el archivo fla de este tutorial
Artículos relacionados:
exelente lo utilizare en muchos de mis proyectos.
exelente pagina gracias
http://www.campcancunmexico.com
tus tutoriales son super claros y precisos, no dejan ninguna laguna…hay tutoriales en los que uno empieza a segir los pasos y se pierde..en este caso no pasa, oye sabes que tb hice el tutorial de los botones con submenu, la primera parte, pero cuando le pongo continuar a la segunda parte no me deja….y eso que me inscribi y todo pero en la otra pag(solophotoshop)
gracias por tu ayuda
y por los atajos c0on las teclas!!!
de verdad q necesitaba saberlos!
hola de nuevo
tengo una duda
hice el ejercicio, me resulto, incluso cambie el orden de las fotografias en la galeria, tenia 9 imagenes y hice una grilla de 3 x 3, entonces cuando intente que la fotografia se abrira al costado de las imagenes no pude hacerlo, por q ya no quiero que la imagen se abra al centro, si no al costado de las 9 imagenes orenadas en 3 filas de 3…me entiendes]?
como lo hago?
excelente trabajo! muy bonito
hola sabes ke lo estaba practicando i en la parte del codigo nose donde introducirlo lo trate en en varios de los clips pero me sale este error
“1087: Error de sintaxis: se encontraron caracteres adicionales tras el final del programa.”
en la parte de evento me sale onClipEvent (load){
porke no me lo reconoce cualker cosa gracias
aaah pd: muy bueno esta pagina saludos desde chile
Hola a todos. en primer lugar, me parece genial el tutorial. claro, sencillo, sin tecnicismos demasiado complejos….en definitiva, ¡¡¡fantástico!!!. gracias a elQuique o a quien corresponda (he leído del propio elQuique que no es suyo. de cualquier manera, gracias por traérnoslo si no fuera tuyo). lo único que echo en falta es una pequeña explicación al action script que hace que las imágenes se desplacen y vuelvan a su posición. ¿Por qué digo esto? pues porque ahora mismo va muy bien con las imágenes en una columna a la izquierda. pero yo me gustaría saber como hacer lo mismo pero que la columna fuera a la derecha, me entiendes? o que apareciera como una fila de imagenes pero en lugar de a la izquierda o a la derecha, en la parte superior central….en definitiva, hacer variaciones.
Me podéis ayudar?
¿Has podido conseguir lo que consultas aquí? Hasta ahora yo no he podido… saludos!
Muy buen tutorial felicidades, pero tengo un problema, edito las imagenes para esos tamaños para no fallar pero al probar la pelicula (Ctrl+enter) sale este error y no me lo reproduce:
dobles estándar (rectas).
this.GALLERY = “galeria”;
Total de errores de ActionScript: 1 Errores comunicados: 1
Donde fallo?????
Gracias
oye mingo el error es por las comillas de galeria.. lo unico es cambiarlas por las comillas comunes del teclado
a mi igual no me salio del todo bien me funciona con la primera imagen nomas
a ahi metiendo mano me di cuenta del errror..
oye una cosa como podria poner texto asi a las fotos cuando van apareciendo ?
hola, esta muy bueno el tutorial pero quiero saber como puedo agregrar mas fotos y que muestren la animacion igual que las demas
MUY BUENA GALERIA!
excelente tutorial…gracias
Me gustaría saber si es posible hacer un tutorial donde las imagenes aparezcan de derecha a izquierda y de izquierda a derecha, asi: Cuando una imagen se presenta al frente, centrada se vea completa y las que llegan ya sea de la izquierda o de la derecha se vean como replegadas, como un fuelle, pero que empiezan a salir desde atrás hacia adelante, para presentarse al frente o a escondersen lentamente luego de ser vistas.
Gracias
haha Gracias amigooo (: The amoo .. Me salvastee (: