Imagenes: galería, interartuar, etc (ayuda)

[evola]

Lo primero de todo es dar las gracias por anticipado a todo aquel que me pueda hechar una mano. Es curioso que ya hace algun tiempo que no estibo en el foro, es más justo cuando empecé en el mundillo del diseño web con el html jejej, y ahora que me ha dado por meterme en el mundo flash vuelvo a necesitar en consejo y ayuda de este foro.

Weno comentaros que esto que estoy haciendo es un regalo de cumpleaños para un amigo, así que como es fotografo pues me dije de ha hacerle una web en flash como regalon en la cual abria una galería.

Al lio que se hace tarde jejej.

Aquí os dejo una captura de la web, así nos ahorramos poner link ^_^, en ella os he enumerado los 11 botones que hay más la zona donde pretendo que interactuen las imagenes.

1.- Enlace al index
2.- "Por determinar"
3.- "Por determinar"
4.- Enlace a un video
5.- Zoom - imagen (opción 2)
6.- Zoom + imagen (opción 2)
7.- Imagen atrás (poción 1) / Mover izquierda (opción 2)
8.- Mover arriba (opción 2)
9.- Imagen siguiente (poción 1) / Mover derecha (opción 2)
10.- Mover abajo (opciones 2)
11.- Imagen completa [popup] (opción 2)
12.- Zona de interacción de inagenes

Lo de las distintas opciones es debido a que he estado barajando dos formas de interactuar:

OPCION 1: Una galería de imagenes donde si visualizara la miniatura de una en una y mediantes un archivo XML y que tras pinchar sobre la miniatura se abriera el popup.

Con esta opción en una misma galería puedo visualizar X fotos.

OPCION 2: Poder ampliar, disminuir, mover y visualizar la imagen.

Hay una tercera opción que es utilizar la vista en miniatura (opción 1) y tras darle a un botón poder interactuar con la imagen (opción 2).

Para la opción uno he utilizado este tutorias que encontré en una web [comentario dos de este hilo].

Para la opción 2 he intentado con este ( http://www.forosdelweb.com/f16/aumen...otones-202082/ ) pero sin suerte tampoco je consequido que me aparezca la foto, ademas que lo que quiero es que al aumentarlo lo que se vea no sobresalga del espacio 12, que tampoco se como hacerlo para ser sincero.

Lo se soy tonto al intentar pasar de hacer botoncitos a hacer una web interactiva.

[evola]

Código:

// acciones en fotograma 1
stop();
System.useCodepage = true;
XML.prototype.ignoreWhite = true;
import mx.transitions.Tween;
// separacion-> distancia entre las imágenes
// tanto horizontal como vertical
var separacion:Number = 116;
// vbles para pasar de página
var pagina_actual:Number = 1;
var num_paginas:Number;
// array donde metemos los elementos del XML
var IMG_array:Array;
// objeto XML que carga la lista de miniaturas
var miniaturasXML:XML = new XML();
miniaturasXML.onLoad = mostrarMiniaturas;
miniaturasXML.load("/asp/verMiniaturas.asp");
// funcion que se ejecuta al cargar el XML
function mostrarMiniaturas():Void {
 // contadores de columna y fila para
 // disponer las miniaturas
 var fila:Number = 0;
 var col:Number = 0;
 // paso los datos del XML al array
 IMG_array = this.firstChild.childNodes;
 // como caben 12 fotos por página podemos
 // saber el núm de páginas necesarias para
 // mostrar todas las fotos
 num_paginas = Math.ceil(IMG_array.length/12);
 // creo el clip donde meteremos todas las miniaturas
 var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas", _root.getNextHighestDepth());
 lienzo.cacheAsBitmap = true;
 // lo posiciono donde nos conviene
 lienzo._x = 19;
 lienzo._y = 100;
 // y lo enmascaro con el clip situado en la
 // capa mascara. se enmascara para hacer el deslizamiento del 
 // clip cuando tengamos muchas miniaturas y no entren todas a
 // la vez en pantalla (nuestro caso)
 lienzo.setMask(mascara_mc);
 // recorro el array que contiene la lista con los nombres de 
 // los archivos de las miniaturas e invoco la función crearMiniatura
 // que es la que carga la imagen, la recoloca, le pone un pequeño
 // marco y le asigna las acciones para verla ampliada
 for (var k:Number = 0; IMG_array[k]; k++) {
  // extraigo la ruta del archivo de imagen
  //var ruta:String = "minis/"+IMG_array[k].attributes.nombre;
  // como sólo tengo tres columnas, cuando llegue a 
  // la tercera, avanzo una fila y retorno a la primera
  if (col>2) {
   col = 0;
   fila++;
  }
  // creo la miniatura. extraigo la ruta del archivo de imagen                                                                                                         
  // y la paso como tercer parámetro
  crearMiniatura(col, fila, IMG_array[k].attributes.nombre);
  col++;
 }
}
function crearMiniatura(columnaF:Number, filaF:Number, ruta:String) {
 // bajo_clip es el clip que contendrá el marco de la miniatura
 var bajo_clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("bajo_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
 // clip contendrá la imagen
 var clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("foto_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
 // para cargar la miniatura definimos un objeto MovieClipLoader
 // y un objeto detector de eventos
 var mi_mcl:MovieClipLoader = new MovieClipLoader();
 var miListener:Object = new Object();
 mi_mcl.addListener(miListener);
 clip.valor = "aaa";
 // cargamos la imagen
 mi_mcl.loadClip("/minis/"+ruta, clip);
 miListener.onLoadStart = function(target_mc:MovieClip) {
  // cuando comienza la carga de la imagen
  // ponemos al _alpha a 0
  target_mc._alpha = 0;
 };
 miListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
  // aquí podéis poner acciones para mostrar una precarga,
  // este caso no lo hemos considerado oportuno
 };
 // cuando ya se ha completado la carga y tenemos disponible el clip 
 miListener.onLoadInit = function(target_mc:MovieClip) {
  // recolocamos la imagen (todavía está oculta, con _alpha=0)
  target_mc._x = (separacion*columnaF)+(100-target_mc._width)*0.5;
  target_mc._y = (separacion*filaF)+(100-target_mc._height)*0.5;
  // recolocamos el marco que rodea a la foto
  bajo_clip._x = target_mc._x-5;
  bajo_clip._y = target_mc._y-5;
  // dibujamos el marco
  with (bajo_clip) {
   beginFill(0xffffff);
   lineStyle(1, 0xEEEEEE, 100);
   lineTo(target_mc._width+10, 0);
   lineTo(target_mc._width+10, target_mc._height+10);
   lineTo(0, target_mc._height+10);
   lineTo(0, 0);
   endFill();
  }
  // al pinchar sobre el área del marco,
  // mostramos la foto grande con la función
  // verFotoGrande
  bajo_clip.onRelease = function() {
   verFotoGrande(ruta);
  };
  // muestro la miniatura animando el _alpha hasta 100
  var myTween:Tween = new Tween(target_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
 };
}
function verFotoGrande(ruta:String) {
 clearInterval(intervaloColor);
 // creo el clip donde irá la foto grande en una profundidad fija
 // para que se reemplace cada vez que pincho en una miniatura
 var grande:MovieClip = _root.createEmptyMovieClip("grande_mc", 2*IMG_array.length+11);
 // igual con el clip que contendrá el marco
 var bajo_grande:MovieClip = _root.createEmptyMovieClip("bajo_grande_mc", 2*IMG_array.length+10);
 // posición vertical fija
 grande._y = 100;
 // para cargar la foto grnade definimos otro objeto MovieClipLoader
 // y otro objeto detector de eventos
 var grande_mcl:MovieClipLoader = new MovieClipLoader();
 var grandeListener:Object = new Object();
 grande_mcl.addListener(grandeListener);
 // cargo la foto grande
 grande_mcl.loadClip("/originales/"+ruta, grande);
 grandeListener.onLoadStart = function(target_mc:MovieClip) {
  // aplico una transformación de color que deja el clip
  // tintado de blanco
  myColor = new Color(target_mc);
  myColorTransform = new Object();
  myColorTransform = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0};
  myColor.setTransform(myColorTransform);
 };
 grandeListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
  // aquí podéis poner acciones para mostrar una precarga,
  // este caso no lo hemos considerado oportuno
 };
 grandeListener.onLoadInit = function(target_mc:MovieClip) {
  //trace("grandeListener.onLoadInit");
  // recolocamos la imagen (todavía está oculta)
  target_mc._x = 382+Math.round((315-target_mc._width)*0.5);
  // recolocamos el marco que rodea a la foto grande
  bajo_grande._x = target_mc._x-5;
  bajo_grande._y = target_mc._y-5;
  // dibujamos el marco
  with (bajo_grande) {
   beginFill(0xffffff);
   lineStyle(1, 0xEEEEEE, 100);
   lineTo(target_mc._width+10, 0);
   lineTo(target_mc._width+10, target_mc._height+10);
   lineTo(0, target_mc._height+10);
   lineTo(0, 0);
   endFill();
  }
  // con estas rutinas hacemos la transición de color desde el blanco
  var indiceColor:Number = 255;
  intervaloColor = setInterval(cambiarColor, 10);
  function cambiarColor() {
   myColorTransform = {ra:100, rb:indiceColor, ga:100, gb:indiceColor, ba:100, bb:indiceColor, aa:100, ab:0};
   myColor.setTransform(myColorTransform);
   indiceColor -= 2;
   if (indiceColor == -1) {
    clearInterval(intervaloColor);
   }
  }
 };
}
// con esta función desplazo el lienzo de las miniaturas para
// pasar de página
function moverLienzo(posY:Number):Void {
 var myTween:Tween = new Tween(lienzo_miniaturas, "_y", mx.transitions.easing.Regular.easeOut, lienzo_miniaturas._y, posY, 1, true);
}
// deshabilito de inicio el botón de volver atrás
// ya se muestra la página 1
pMenos_btn.enabled = false;
pMenos_btn._alpha = 30;

[MoDoRrO]

Uy, es dificil hacer una Galeria Flash

pero si tienes paciencia se logra

cuanto tiempo tienes??

si tienes varios dias, puedes empezar de 0, en caso contrario, una pre-fabricada

que tienes hasta el momento?? (demo online)

Saludos

[evola]

Su cumple fue el 26, así que como uno es pobre y no pude comprarle ningún regalito así que mientras me comia la cabeza se me ocurrio la idea, así que me senté aquí delante y me dio tiempo a crear la interfaz de la camara, así que se lo subí para que viera su regalo aun sin terminar, así que podemos tirarnos un mes si hace falta jajaj.

Los prefabricados estan muy bien para cuando pagan una miseria por una web y le pones cualquier cosa aparente que encuentres por hay, pero este no es el caso, además yo soy de esos que me gusta aprender ha hacer las cosas desde cero y así si lo tengo que utilizar en un futuro ademas de copiar y pegar tambien se lo que estoy copiando y pegando.

Lo que tengo hasta ahora en el archivo fla es la imagen de fondo (camara) y los botones que se observan en la imagen, todo esto están en una misma capa.

Lo que más o menos se es que hay que crear otra capa con un MC.

Para serte sincero yo prefiero la opción uno (imagenes en miniatura y popup de la original) ya que basandonos en el ella lo que hariamos sería un prefabricado en el cual el cumpleañero solo tubiera que añadir las originales y las miniaturas correspondientes y de esa forma ya tendría su nueva galería, y yo lo unico que haría sería colocarle un enlace al flash del menú de galerías.


Carpeta index


Carpeta galerias


Carpeta galeria1


Esta es la estructura de la web, en lo que a la galería de imagenes se refiere. galerias1.html y galerias2.html son el menú de galerias o albunes.

Mi idea original o almenos lo que pretendia era eso, facilitarle lo más posible a mi amigo lo que es la administración de su web

[evola]

Al final tras mucho olisquear por la red de redes me he decidio por utilizar un tutorial que he encontrado en la web de nuestro compañero Bandit y que podreis encontrar en su web. Lo que pasa es que como es normal en mi no me ha salido jejej, sospecho que puede ser que el codigo de acciones esté mal escrito. crfeo que el fallo puede estar en las separaciones de algunos comandos perfo ni idea, el programar no es presisamente lo mio.

Os dejo el codigo principal a ver si alguien ve lo que está mal y me puede hechar una mano, tambien dejo el archivo fla y el resto de archivos necesarios para hacer que funcione la pelicula.

Despues de que salga esto y se vea la galería a ver si entre todos conseguimos hacerle la modificación para que aparezca la imagen en lightbox o algo que se le parezca ^^.

Código:

//--posición donde se cargará la primera imagen
x=0;
y=0;
//--ancho y alto de la imagen más 5 pixeles de espacio
ancho=105;
alto=77;
//--creo un nuevo objeto XML
miXML=new XML();
//--ignorar espacios
miXML.ignoreWhite=true;
//--proceso si la carga tubo éxito
miXML.onLoad=function(succes) {
 if (succes) {
  // -- por cada nodo hijo nodo principal...
  for (var i=0; i<this.firstChild.childNodes.length; i++) {
   // -- declaro una variable que recoge el atributo
   // -- del nodo (nombre de la imagen)
   galería=this.firstChild.childNodes[i].attributes.id;
   // -- creo un clip de pelicula vacio
   umagenes.create.EmptyMovieClip("diapo"+i,i+100);
   // -- cargo la imagen en el clip vacio
   item=imagenes["diapo"+i];
   item.loadMovie(galería);
   // -- indico posición x-y
   item._x=x;
   item._y=y;
   // -- incremento el valor de x para la siguiente imagen
   x +=ancho;
   // -- incremento en 1 el número de columnas
   columna +=1;
   // -- ruptura de control, control de número de columnas
   if (columna==num_columnas) {
    columna=0;
    x-= (ancho*num_columnas);
    y+=alto;
   }
  }
 }
};
// -- cargar XML
miXML.load("imagenes1.xml");

prueba completa: http://www.megaupload.com/?d=42MBIR0P

[MoDoRrO]

que error te marca?

[evola]

al principio me marcaba:

item._x=x;
item._y=y;

pero por que en vez de guion bajo puse medio, pero ya está no me marca ningún otro