[AIUTO] Slide immagini

rdo

[AIUTO] Slide immagini

Ciao a tutti!
Volevo creare una slide di immagini in flash, come esempio il sito http://www.aspensnowmass.com/, come posso fare a ottenere quell'effetto di dissolvenza tra una immagine a l'altra?

Grazie mille!
Paolo

rdo

uppete!

flep

Ciao rdo,
potresti puntarmi direttamente alla alide per fvore ? Non la vedo...

rdo

Beh nell'home page del sito che ho postato predominano delle immagini grandi (777x79) e se aspetti qualche secondo queste immagini cambiano...
L'effetto che vorrei realizzare anche io è quello...

GRAZIE MILLE!
Paolo

flep

Dunque:
quella slide show non è affatto semplice da realizzare.
Se ci fai caso non ha preloader delle immagini.
Questo mi porta a pensare che ci sia un caricamento delle immagini in backend + file XML per leggere le paths delle immagini.

E cioè:
2 classi actionscript che caricano immagini (tramite MovieClipLoader), parte la prima, carica e te la fa vedere. Intanto la seconda carica e quando ha finito di caricare fa il fade/out della prima clip e contemporaneamente il fade/in della seconda clip. Quando il fade/out della prima è terminato carica la seguente immagine e quando è caricata esegue fade/out della seconda e fade/in della prima e la seconda carica l'immagine seguente....e così via.

rdo

Wow....
E per realizzare un effetto del genere anche senza tutte queste complicazioni non si può?

Grazie!

flep

Potresti provare lavorando con i frames e le interpolazioni, ma non è il mio campo e quindi non azzardo.

onsitus

Ciao rdo,

tanto per iniziare l'esempio postato e stato realizzato con javascript.:():

Cmq ecco un link a tutorial usando come da Flep detto actionscript/XML.

http://www.kirupa.com/developer/mx2004/xml_slideshow.htm

Non e cosi difficile da capire.:)

L'effetto dissolvenza non e lo stesso ma gia ti da un punto per iniziare. Poi basta chiedere.

Gaelle

flep

@Onsitus said:

tanto per iniziare l'esempio postato e stato realizzato con javascript.:():
Javascript o actionscript, se la vuole uguale a quella , l'unica soluzione è la logica che ho scritto.

rdo, se lavori sui frames ed interpolazioni avresti un swf con tutte le immagini al suo interno e peserebbe troppo, ogni volta l'utente si deve scaricare tutto l'swf e relative immagini prima di poter vedere anche solo la prima immagine della slide show.
Su kirupa, l'esempio dato da Onsitus, quel tutorial va benissimo ma non è esattamente quello che fa la galleria immagini del tu esempio.

onsitus

Dal tutorial ecco il codice per il crossfading. Non ho perso tempo a controllare eventuale 'bug'. Serve di aggiungere un campo di testo dinamico 'info'.


var delay:Number = 5000;
// load XML
function loadXML(loaded) {
 if (loaded) {
  xmlNode = this.firstChild;
  image = [];
  total = xmlNode.childNodes.length;
  for (i=0; i<total; i++) {
   image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
  }
  id = setInterval(preloadPic, 100);
 } else {
  content = "file not loaded!";
 }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
//end XML
var loadTot = 0;
var k = 0;
preloader.preload_bar._visible = false;
info._visible = false;
// ///////////////////////////////////
function preloadPic() {
 clearInterval(id);
 var con = picture.duplicateMovieClip("con"+k, 9984+k);
 con.loadMovie(image[k]);
 var temp = _root.createEmptyMovieClip("temp"+k, 99+k);
 temp.onEnterFrame = function() {
  var total = con.getBytesTotal();
  var loaded = con.getBytesLoaded();
  var percent = Math.round((loaded/total*100)/image.length);
  preloader.preload_bar._visible = true;
  info._visible = true;
  preloader.preload_bar._xscale = loadTot+percent;
  info.text = "Loading picture "+k+" of "+image.length+" total";
  if (loaded == total && total>4) {
   con._visible = 0;
   nextPic();
   loadTot += percent;
   delete this.onEnterFrame;
  }
 };
}
function nextPic() {
 if (k<image.length-1) {
  k++;
  preloadPic();
 } else {
  firstImage();
  preloader._visible = 0;
  info.text = "";
 }
}
// ///////////////////////////////////
var p = 0;
var current;
MovieClip.prototype.fadeIn = function() {
 if (this._alpha<100) {
  current._alpha -= 5;
  this._alpha += 5;
 } else {
  current._visible = 0;
  delete this.onEnterFrame;
 }
};
function nextImage() {
 current = this["con"+p];
 p<total-1 ? p++ : p=0;
 var picture = this["con"+p];
 picture._visible = 1;
 picture._alpha = 0;
 picture.onEnterFrame = fadeIn;
 slideshow();
}
function firstImage() {
 con0._visible = 1;
 con0._alpha = 0;
 con0.onEnterFrame = fadeIn;
 slideshow();
}
function slideshow() {
 myInterval = setInterval(pause_slideshow, delay);
 function pause_slideshow() {
  clearInterval(myInterval);
  nextImage();
 }
}

:sonno: