Comunidad de diseño web y desarrollo en internet online

PREGUNTA Galería de imagenes en flash con loadMovie

Citar            
MensajeEscrito el 27 Jun 2007 06:47 pm
Haber si tienen piedad :)

vi el tutorial y descarge los archivos, los probe y todo hermoso (admiro al creador, me gustaria llegar a saber tanto) pero... no entiendo nada.
la pregunta es la siguiente hay forma de hacer una galeria similar pero mas sencilla para poder comprenderla porque como bien dice el tutorial no explican el codigo porque el codigo se "explica solo" jiji... pero yo no entiendo codigo estoy intentando aprender pero necesito hacer esta galeria... pero mas sencilla por ejemplo poner 10 fotos sofre la pagina que se lean desde archivos externos y al darles clic se agranden como muesta el ejemplo del tutorial. imagenes fijas sin animacion ni nada... creo que estendiendo vasicamente eso pordria despues entender lo demas me fije en otros tutoriales pero no encuentro algo que me ayude. ojala puedan explicarme como hacerlo, se que es mucho pedir porque debe ser medio tedioso explicar todo eso por eso pido piedad XD gracias gente.

Por morty13

9 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 27 Jun 2007 07:38 pm
ok, una galería sencilla que improviso ahora mismo: no te sorprendas si no funciona XD
Supón que tienes 20 imágenes de 40x40 pixeles cada una que se llaman img0.jpg-img19.jpg

Código :

//declaramos las filas y columnas
var filas:Number=5;
var columnas:Number=4;
//El hueco que necesitaremos en vertical y horizontal
var wd:Number=50;
var hd:Number=40;
//donde empezarán a cargarse las fotos
var initX:Number=10;
var initY:Number=10;
//un contador
var count:Number=0;
//
//La posición que tendrá el clip
var x:Number=initX
var y:Number= initY
//Esta acción se repite tantas veces como columnas hay;
for(i=0;i<columnas;i++){
  //Hacemos que la posición horizontal se quede como al inicio.
  x=initX;
  //Esta acción se repite tantas veces como filas hay
  for(j=0;j<filas;j++){
    //creamos un clip vacío
    var img:MovieClip=this.createEmptyMovieClip("image"+count,count*999);
    //lo situamos
    img._x=x;
    img._y=y;
    //cargamos la imagen que le corresponde
    img.loadMovie("img"+count+".jpg");
    //aumentamos el cargador
    count++;
    //hacemos que la posición horizontal se aleje tanto como hemos definido
    x+=wd
}
//hacemos que la pocición vertical se aleje tanto como hemos definido
y+=hd;
}

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox
Citar            
MensajeEscrito el 28 Jun 2007 12:21 am

Zah escribió:

ok, una galería sencilla que improviso ahora mismo: no te sorprendas si no funciona XD
Supón que tienes 20 imágenes de 40x40 pixeles cada una que se llaman img0.jpg-img19.jpg

Código :

//declaramos las filas y columnas
var filas:Number=5;
var columnas:Number=4;
//El hueco que necesitaremos en vertical y horizontal
var wd:Number=50;
var hd:Number=40;
//donde empezarán a cargarse las fotos
var initX:Number=10;
var initY:Number=10;
//un contador
var count:Number=0;
//
//La posición que tendrá el clip
var x:Number=initX
var y:Number= initY
//Esta acción se repite tantas veces como columnas hay;
for(i=0;i<columnas;i++){
  //Hacemos que la posición horizontal se quede como al inicio.
  x=initX;
  //Esta acción se repite tantas veces como filas hay
  for(j=0;j<filas;j++){
    //creamos un clip vacío
    var img:MovieClip=this.createEmptyMovieClip("image"+count,count*999);
    //lo situamos
    img._x=x;
    img._y=y;
    //cargamos la imagen que le corresponde
    img.loadMovie("img"+count+".jpg");
    //aumentamos el cargador
    count++;
    //hacemos que la posición horizontal se aleje tanto como hemos definido
    x+=wd
}
//hacemos que la pocición vertical se aleje tanto como hemos definido
y+=hd;
}

\Lo voy a probar ^^ gracias maniana te digo si me funciono. Gracias Gracias Gracias

Por morty13

9 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 28 Jun 2007 10:11 pm
Zah espero que me leas ^^

lo probe y lo sobrenatural es que lo entendi perfectamente jiji aparte que me ayudaste a entender otras cositas veras al final del texto. el que sabe sabe dice el dicho pero ahora tengo otro temita...
las imagenes me las muestra perfecto pero yo quiero que cuando le doy un clic a cada una de las imagenes se agranden y a darles denuevo un clic se vuelvan a su posion y tamaño inicial. encontre en las muestras de flash8 algo que me sirvio, es parecido en comieso a lo que me dijiste que hagas vos pero tiene esta accion de boton sobre el movie clip. mira y probalo, porque agranda las imagenes pero al soltar el clic del mouse las achica la accion es onPress y no lo puedo modificarrrrrrrrrr!!!! haber si me ayudas con esto o en otro caso me explicas como agregarle estas acciones al scrip que me pasaste ^^
el de flash8 esta bueno porque te pone miniaturas que las lee de un archivo externo pero si modificas la cantidad de imagenes siempre te las sige cargando sin modificar el script por el tema de la actualizacion de la pagina viste.
ojala que lo pruebes y me digas gracias amigo por la ayuda ^^

Código :

//****************************************************************************
//Copyright (C) 2005 Macromedia, Inc. All Rights Reserved.
//The following is Sample Code and is subject to all restrictions on
//such code as contained in the End User License Agreement accompanying
//this product.
//****************************************************************************

/*
Dynamic Movie Clips Example
The Flash gallery is created at runtime from an XML file. 
Images are scaled to 20% of their original size, 
but you can see the full size image by clicking an image and keeping the mouse button pressed.
*/

// Import the transitions classes so you can add a fading effect when the images load to the Stage.
import mx.transitions.*;

// Set the starting X and Y positions for the gallery images.
_global.thisX = -250;
_global.thisY = -150;

/* Set static values for the Stage's width and height. 
   Using Stage.width and Stage.height within the code results in 
   strangely positioned full images when testing in the Flash environment 
   (but the problem doesn't exist when published to a SWF file). */
_global.stageWidth = -100;
_global.stageHeight = 10;

// Create and configure the XML instance which is used to load the list of gallery images on the fly.
var gallery_xml:XML = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success:Boolean) {
   try {
      /* if you are able to successfully load and parse the gallery from a remote XML file, 
         parse out the image names and add them to an array. */
      if (success) {
         var images:Array = this.firstChild.childNodes;
         var gallery_array:Array = new Array();
         for (var i = 0; i<images.length; i++) {
            gallery_array.push({src:images[i].firstChild.nodeValue});
         }
         /* call the displayGallery function which handles loading in each 
            of the gallery images and placing them on the Stage. */
         displayGallery(gallery_array);
      } else {
         throw new Error("Unable to parse XML");
      }
   } catch (e_err:Error) {
      trace(e_err.message);
   } finally {
      delete this;
   }
};

// load the gallery.xml file from the current directory.
gallery_xml.load("gallery_tween.xml");

/* create a function which loops through the images in an array,
   and creates new movie clips on the Stage. */
function displayGallery(gallery_array:Array) {
   var galleryLength:Number = gallery_array.length;
   // loop through each of the images in the gallery_array.
   for (var i = 0; i<galleryLength; i++) {
      /* create a movie clip instance which holds the image. We'll also set a variable, 
         thisMC, which is an alias to the movie clip instance. */
      var thisMC:MovieClip = this.createEmptyMovieClip("image"+i+"_mc", i);
      
      /* load the current image source into the new movie clip instance, 
         using the MovieClipLoader class. */
      mcLoader_mcl.loadClip(gallery_array[i].src, thisMC);
      
      // attach the preloader symbol from the Library onto the Stage.
      preloaderMC = this.attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);
      
      /* set the preloader's bar_mc's _xscale property to 0% 
         and set a default value in the progress bars text field. */
      preloaderMC.bar_mc._xscale = 0;
      preloaderMC.progress_txt.text = "0%";
      
      // set the _x and _y coordinates of the new movie clip.
      thisMC._x = _global.thisX;
      thisMC._y = _global.thisY;
      
      // set the position of the image preloader.
      preloaderMC._x = _global.thisX;
      preloaderMC._y = _global.thisY+30;
      
      // if you've displayed 5 columns of images, start a new row.
      if ((i+1) %4 == 0) {
         // reset the X and Y positions
         _global.thisX = 30;
         _global.thisY += 120;
      } else {
         _global.thisX += 120+30;
      }
   }
}

// define the MovieClipLoader instance and MovieClipLoader listener Object.
var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadStart = function() {
};

// while the content is preloading, modify the width of the progress bar.
mclListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
   var pctLoaded:Number = Math.round(loadedBytes/totalBytes*100);
   // create a shortcut for the path to the preloader movie clip.
   var preloaderMC = target_mc._parent["preloader"+target_mc.getDepth()+"_mc"];
   preloaderMC.bar_mc._xscale = pctLoaded;
   preloaderMC.progress_txt.text = pctLoaded+"%";
};

// when the onLoadInit event is thrown, you're free to position the instances 
mclListener.onLoadInit = function(evt:MovieClip) {
   evt._parent["preloader"+evt.getDepth()+"_mc"].removeMovieClip();
   /* set local variables for the target movie clip's width and height,
      and the desired settings for the image stroke and border. */
   var thisWidth:Number = evt._width;
   var thisHeight:Number = evt._height;
   var borderWidth:Number = 8;
   var marginWidth:Number = 0;
   evt.scale = 30;
   // draw a white rectangle with a black stroke around the images.
   evt.lineStyle(borderWidth, 0x000000, 100);
   evt.beginFill(0xFFFFFF, 100);
   evt.moveTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
   evt.lineTo(thisWidth+borderWidth+marginWidth, -borderWidth-marginWidth);
   evt.lineTo(thisWidth+borderWidth+marginWidth, thisHeight+borderWidth+marginWidth);
   evt.lineTo(-borderWidth-marginWidth, thisHeight+borderWidth+marginWidth);
   evt.lineTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
   evt.endFill();
   
   /* scale the target movie clip so it appears as a thumbnail. 
      This allows users to quickly view a full image without downloading it every time, 
      but unfortunaltey also causes a large initial download. */
   evt._xscale = evt.scale;
   evt._yscale = evt.scale;
   // rotate the current image (and borders) anywyhere from -5 degrees to +5 degrees.

   /* when the target_mc movie clip instance is pressed, begin to drag the current movie clip 
      and set some temporary variables so once you are finished rescaling and positioning 
      the full image, you can return the instance to its original position. */
   evt.onPress = function() {
      // start dragging the current clip.
      this.startDrag();
      /* set the _xscale and _yscale properties back to 100% so the image appears full sized. 
         You're also storing the original X and Y coordinates so you can return the image where you found it. */
      this._xscale = 100;
      this._yscale = 100;
      this.origX = this._x;
      this.origY = this._y;
      // find the depth of the current movie clip, and store it within the movie clip.
      this.origDepth = this.getDepth();
      /* :TRICKY: swap the depth of the current movie clip, with the next highest movie clip of the _parent. 
         Effectively this makes the current movie clip the top of the "stack". */
      this.swapDepths(this._parent.getNextHighestDepth());
      // try and center the current movie clip on the Stage.
      this._x = (_global.stageWidth-evt._width+30)/2;
      this._y = (_global.stageHeight-evt._height+30)/2;
      // apply a transition to the movie clip which makes the movie clip flicker for a split second.
      mx.transitions.TransitionManager.start(this, {type:mx.transitions.Photo, direction:0, duration:1, easing:mx.transitions.easing.Strong.easeOut, param1:empty, param2:empty});
   };
   /* when the movie clip instance is released, stop dragging the movie clip. 
      Reset the _xscale and _yscale properties as well as the _x and _y coordinates. */
   evt.onRelease = function() {
      this.stopDrag();
      this._xscale = this.scale;
      this._yscale = this.scale;
      this._x = this.origX;
      this._y = this.origY;
   };
   // if the mouse cursor was released outside of the movie clip, call the onRelease handler.
   evt.onReleaseOutside = evt.onRelease;
};
mcLoader_mcl.addListener(mclListener);

Por morty13

9 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 29 Jun 2007 06:53 pm
Mejor que me hubieses dicho donde en las carpetas de flash está ese ejemplo...
Pero bueno, si entendí bien, lo que tienes que hacer es algo como esto:

Código :

/*Comentamos todo esto y copiamos las acciones de onRelease
losBotones.onRelease=function(){
//acciones de onRelease
...
}*/
losBotones.press=true
losBotones.onPress=function(){
if(press){
//acciones de press
}else{
//acciones de Release
}

//hacemos que sea verdadero si era falso y falso si era verdadero
press=!press

}

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.