como se hace esto?

Hola a todos.... encontré esta pagina por ahi y me gustó mucho ese efecto de las miniaturas y como se acomodan al tamaño ya sea horizontal o vertical.... y quisiera saber como se hace... si hay alguien que me pueda decir o si tienen algun archivo de descarga chevere...

http://www.felipebohorquez.com/fashion/ind.htm

gracias..

Pues no sabria decirtelo, lo unico que se, es que para eso hace falta mucho Action Script, y aquí el Mr., ...pues como que no sabe.
Sry, igual algun experto de por aqui te ayuda, pero no esperes que hagan tu trabjo.

a mi tb m gustaria saber como se hace eso, y ademas expandirlo para q el movimiento de los cuadros no seleccionados sea hacia los 2 lados (parecido a la barra de iconos esa de MAC OS X)

alguna idea?

Bien, realmente no es difícil, con un poco de imaginación y conocimientos básicos de AS se puede hacer sin problema.

Vamos a considerar el ejemplo que propuso CaritoB.

Lo que se ve es una serie de MCs pequeños que se agrandan, corriendo a todos los MC que se hallan debajo y a la derecha de éste.

No es nada complicado. Pensemos en la posición en x y después, seguimos con el resto. Para este ejemplo, por el momento, consideramos una sola línea.

La pregunta del millón es ¿Cómo se calcula la posición en x de cada MC? Bien, suponiendo que el punto de anclaje esté en el extremo superior derecho, la posición en x va a ser igual a: la posición en x del MC del extremo izquierdo, más el ancho de los MC que se hallen a la izquierda + la separación entre ellos. Un ejemplo:

A B C D E F G

Ahí tenemos 7 elementos, la posición de A es fija; la de B es igual a la posición de A más el ancho de A, más la separación entre A y B; la de C es igual a la posición de A, más el ancho de A, más el ancho de B, más la separación entre A y B más la separación entre B y C.

Como ven, no es nada complicado, sólo unas cuantas sumas (que se pueden hacer en pocas líneas con un loop ).

Pero cómo hacemos eso en código. Simple, sabemos que la posición en el eje x está dada por _x, entonces, la posición de A, B y C va a ser:

Código :

onEnterFrame = function () {
a._x = 50;
b._x = a._x + a._width + 10;
c._x = b._x + b._width + 10;
};

Nadie puede decirme que no es simple. Sepan que 10 corresponde a la separación en píxeles entre dos MCs.

Lo único que falta es hacer lo mismo en el eje y. Pero eso lo dejo a su imaginación.

Hola Muchachos...
gracias por sus respuestas... en cuanto a la respuesta de Hernan quedé gringa .... no entendi nada... jajajajajaja.... espero qe depronto con algun ejemplo de demostracion pueda entenderlo mejor...

Bien, me puse y lo hice, no me costó mucho, pero te aclaro que es Action Script avanzado.

Este es el .swf
Éste es el .fla

Pero repito, sin conocimientos de AS, es difícil que puedan personalizarlo.

CaritoB, si me decís exactamente qué es lo que querés, te puedo ayudar.

dani9del9, lo que vos pedís es apenas un poco más complicado. Pero básicamente, aplica la misma lógica que el archivo que posteé. Si tengo tiempo, te armo un ejemplo a vos también.

Nota: la velocidad a la que se agrandan o achican los botones es fácilmente personalizable

muchisimas gracias, m sera de gran ayuda!!!

Hola Hernan... he quedado boquiabierta con lo que hiciste... eso hace parte de lo que quiero... sin embargo si ves esta pagina... http://www.felipebohorquez.com/fashion/ind.htm, que ya la habia posteado antes... aparte de esos botones hace parte un espacio mas grande que es donde se reproduce la foto a su tamaño... sera cuestion de hacer que en cada capa haya un movie clip y que la accion a cada boton sea que vaya al respectivo frame?

Otra duda que me asalta es lo siguiente si ves esta pagina
http://i.gusanito.com/g/gusanito/static/3958.html, como hago para que el nivel de las fotos siga como esa postal y no se sobreponga una foto encima de otra... es decir... tengo varias fotos... y quiero que al hacerles clic se amplien en un 60% pero sin afectar a las demas... resulta que hice lo mas sencillo que era partir de un boton y sus estados... pero quedan sobrepuestas las fotos y no respeta sus limites...

Muchas Gracias por tus consejos.. la verdad me ha gustado mucho lo que has echo... ya con algo mas practico entiendo mejor.

HernanRivas, he estado toqueteando un poco tu codigo y tengo una duda... si agrando los cuadrados (para sustituirlos por iconos) se alejan demasiado unos de otros al agrandarse o empequeñecerse.
Que tengo que modificar para cambiar esto? gracias

Hola Hernan

Definitivamente eres un duro, pude ver el ejemplo que hiciste y me gustaria saber otra cosa que pude ver de allí.

en tu ejemplo estan unas opciones de tamaño 320x240, 480x360, 640x480, 800x600, 1024x768, 1280x960, 1600x1200, lo que me gustaria mucho saber es como se hace para que el swf se adecue a la resolucion que se seleccione.

Mil gracias

Hernan, te admiro. De verdad.

Sin duda alguna eres un grande del Flash. Al menos para mí.

Cada vez veo más claro que conociendo AS, se pueden hacer verdaderas proezas.
Como más códigos de estos veo, mas me admiro de lo que puede llegar a ser flash en manos de un entendido, ¡y mas veo el largo camino que aún me queda!

En fin..., uno cree que con su último trabajo ya esta a la mitad para llegar a la cima; aunque luego veas que, en realidad, aún estas haciendo la mochilla y atándote las botas en el campamento base…

eso se llama tener humildad ... pero si .. uno nunca deja de aprender .. sobretodo cada dia se aprende algo .. y hoy ha sido ese dia ...

y si se ve un poco "complicado" el codigo ... pero igual lo estoy revisando .. y bueno .. una pregunta...

Si quisiera reemplazar los numeros por imagenes distintas y q al hacer click me aparesca en un lado la foto agrandada ,.. o en su caso un MC encima de el .....

seria mucho pedir??

A ver, voy a intentar contestar las preguntas:

CaritoB, el tema de las fotos grandes arriba es simple, se cargan en un MC vacío distintas imágenes desde Internet. Éste es un tutorial para cargar las imágenes aleatoriamente. Como es un tutorial y no solamente un código, te va a costar menos entenderlo y modificarlo para que carge la imagen deseada. Además, podés leer la respuesta que le doy a Pley, ya que le explico una parte distinta del funcionamiento de tu ejemplo.

Dani9del9, La verdad, no sabría decirte exactamente cuál es el problema, pero probá cambiando la variable que indica la distancia entre los MCs. Lo que podés hacer es enviarme el archivo por mail a la dirección que aparece en mi firma.

Cygnus, en realidad, mi ejemplo no tiene la opción de redimensionarse. Esa es una opción que trae imageShack, donde posteé el .swf. Lo que hace esa página es cambiar el tamaño dentro de la etiqueta embed. Eso está todo dentro de la página y no tiene nada que ver con el swf, para redimensionar el .fla, vas a propiedades y cambiás el tamaño de la película.

Pley, te contesto. Primero, habrás observado que los números se crean cambiando el campo de texto de los MCs. Lo que podés hacer es sacar ese campo y poner un MC dentro del botón con todas las fotos que te interesan y luego, en el for, en lugar de boton.campoTexto.text = i; ponés algo como boton.mcFotos.gotoAndStop (i); Pero eso genera un problema, el prototipo busca el número dentro del campo de texto, lo que vas a tener que hacer es cambiar eso y crear la variable número desde el for, algo así como: boton.numero = i;

Interesante, Me gusto la forma como lo explicaste...

Dani9del9, creo que acabo de descubrir tu problema. Al agrandar los cuadrados, asegurate que el punto de anclaje quede en la esquina superior izquierda del MC. Eso es todo.

HernanRivas escribió:

Lo anterior si lo entendi ..y si .. pero tengo entendido de crear variable es al inicio de la animacion, de todas maneras intentare modificar y te digo como me fue ...

era eso! muxisimas gracias!!!

Pley escribió:

Bueno, en realidad, no es exactamente una variable, es una propiedad del MC. Acordate que dentro del for, la variable boton se refiere a la ruta de cada uno de los MCs.


Ahora, como no me olvido, dejo lo prometido, el menú donde los elementos se mueven hacia la derecha y la izquierda. Es decir, lo que pedía Dani9del9:

Éste el el .swf
Éste es el .fla

El funcionamiento está basado en el otro ejemplo, pero es más entendible.

Por otro lado, encontré un error que no había visto en el ejemplo que había posteado antes. Básicamente, si uno elige un botón de la segunda o tercera columna y selecciona el que se halla arriba a la derecha, los botones se superponen. Igual, mañana posteo la solución.

Nota: la velocidad a la que se agrandan o achican los botones es fácilmente personalizable

Esta estupendo, muchisimas gracias ))))

me pide ussername y pass pa poder bajar los archivos
me los dan plis?

m.AD escribió:

No hace falta. Te esperas los 15 segundos que dice, lugo le pones las letras de la imagen y listo.

Hernan, como se puede hacer en tu .fla para q al cambiar el puntero del raton de un mc a otro este mengue un poco mas lento? es q queda un poco brusco

Bueno, hay una parte donde define _xscale dependiendo si la variable seleccionado es igual a true.

Si te fijás, el tamaño disminuye la mitad de la diferencia entre el tamaño actual y el deseado. Si cambiás el 2 por un 4 o un 5, lo hace más lento. Fijate que el 2 está dividiendo.

Estupendo, aun m cuesta un poco descifrar codigo, lo he puesto a 10 que me gusta como queda, eres grande!!

HernanRivas escribió:

Claro .. pero como mencionastes: crear la variable número desde el for, pos no tengo mucho conocimiento de variables y eso.

Por eso lo decia ..

Bien, a continuación posteo el código mejorado para el primer ejemplo que posteé (el que tenía varias filas de botones). Éste código soluciona el problema que surgía al seleccionar un botón y luego el que estaba arriba, a la derecha. Pero además, agrega legibilidad.



Código capa "Acciones":

Código :

var numeroBotones:Number = 28;
var posInicialX:Number = 20, posInicialY:Number = 20;
var separacionX:Number = 10, separacionY:Number = 10;
var botonesPorFila:Number = 10, numeroFilas:Number = Math.ceil (numeroBotones / botonesPorFila);
var maxSize:Number = 300;
for (i = 1; i <= numeroBotones; i++) {
//
this.attachMovie ("Boton", "boton" + i, i);
var boton = _root["boton" + i];
boton.numero = i;
boton.campoTexto.text = i;
boton.comportamiento ();
}
//
// No se pueden agrupar estos 2 for porque sino, haríamos referencia a MCs no creados aún.
for (i = 1; i <= numeroBotones; i++) {
var boton = _root["boton" + i];
boton.botonArriba = _root["boton" + (i - 10)];
boton.botonAnterior = _root["boton" + (i - 1)];
boton.botonArribaDer = _root["boton" + (i - 9)];
boton.botonAbajoIzq = _root["boton" + (i + 9)];
boton.botonArribaDerDer = _root["boton" + (i - 8)];

Código capa "Prototipo":

Código :

MovieClip.prototype.comportamiento = function () {
if (this.numero > botonesPorFila) {
this.posIniY = this._y = this.botonArriba._y + this.botonArriba._height + separacionY;
} else {
this.posIniY = this._y = posInicialY;
}
this.onEnterFrame = function () {
this.seleccionado = this.hitTest (_xmouse, _ymouse);
this.expandido = this._xscale > 100;
this.bordeNegro._visible = this.seleccionado;
this.bordeGris._visible = !this.bordeNegro._visible;
//
if (this.numero > botonesPorFila) {
this._y = this.botonArriba._y + this.botonArriba._height + separacionY;
//
this.ypos = this.botonArribaDer._y + this.botonArribaDer._height + separacionY;
if (this.expandido && this._y < this.ypos && !this.seleccionado) {
this._y = this.ypos;
}
this.ypos = this.botonArribaDerDer._y + this.botonArribaDerDer._height + separacionY;
if (this.expandido && this._y < this.ypos && !this.seleccionado) {
this._y = this.ypos;
}
//
if (this.botonAnterior.posIniY != this.botonAnterior._y && this.botonAnterior._y > this._y) {
if (this.numero != 21) {
this._y = this.botonAnterior._y;
}
}
}
//
// En caso de agregar una cuarta fila, hay que ubicar este código dentro del if:
// || this.numero == 31
// Siguiendo esta misma lógica, debe haber un elemento del if por cada fila.
if (this.numero == 1 || this.numero == 11 || this.numero == 21) {
this._x = posInicialX;
} else {
this._x = this.botonAnterior._x + this.botonAnterior._width + separacionX;
//
this.xpos = this.botonAbajoIzq._x + this.botonAbajoIzq._width + separacionX;
if (!this.seleccionado && this.botonAbajoIzq.seleccionado && this.xpos > this._x && this.expandido) {
this._x = this.xpos;
}
}
if (this.seleccionado) {
this._xscale = this._yscale += (maxSize - this._xscale) / 4;
} else {
this._xscale = this._yscale -= (maxSize - this._xscale) / 2;
}
//
if (this._xscale < 100) {
this._xscale = this._yscale = 100;
}
if (this._xscale > maxSize) {
this._xscale = this._yscale = maxSize;
}
};
};

buenas, he llegado tarde por lo que veo, pero en estos asuntos por el momento nunca es tarde.
El punto es que he seguido paso a paso los puntos de Hernán y como no estoy muy versado en AS, me placería que me indicaran como hago, una vez que tengo el conjunto de cuadraditos del menu, para darle una accion determinada a cada uno ej el nº1 que abra tal sitio O IMAGEN ETC y el 2º otro y así.
Por favor sería de grandísima utilidad para mi.

Mmmm... Creo que podrías intentar armar un Array (buscá en la ayuda de Flash) con todas las direcciones a las que pretendés acceder. Entonces, dentro del botón, en un onRelease, hacés que te lleve a una página web determinada por el Array.

Explico mejor, un Array indexa una serie de valores y les otorga un valor numérico. Entonces, el valor de tu_array[1] correspondería a la dirección de Internet a la que querés que acceda tu botón. Después, usás la variable numero como parámetro del Array.

Si nunca trabajaste con Arrays (ya me cansé de repetir esa palabra) buscá en la ayuda de Flash y te va a quedar todo más claro.

como se le asigna a "boton" el enlace a un sitio, si no existe!!

Puedo hacer esto?:

Código :

miArray[1] = "http://cristalab.com";

He probado con esto, pero creo que no tiene sentido:

Código :

for(j = 1; j < numeroBotones; j++){
   
   boton.onRelease = function() {
      this.boton = miArray[numero];
   }
}

Pues eso esta muy bien hacerlo en flash, el que sepa hacerlo, asi lo puedes hacer personalizado como tu quieras.
Pero esa interface de la web de ejemplo es una galeria de photoshop CS2 y la crea automaticamente con la cantidad de imagenes que tu quieras, tambien la puedes personalizar ya que generea el archivo flash.

Un saludo para todos.