Galleria dinamica

[nep036]

Ci vorrebbe il php almeno per un lavoro più dinamico ed elegante, però cosi dovrebbe essere sufficiente.

Tutorial per tutto quello che ci serve non ce ne sono, lo studio e l'esperienza a volte vengono in nostro soccorso:

Non ho molto tempo ma questo mini tutorial che ti ho scritto al volo potrebbe esserti utile:

/*
Diciamo che le venti fotine le le metti con nomi sequenziali in una cartella di nome:

immagini_small -> 1.jpg 2.jpg 3.jpg ecc...

e quelle grandi le metti in

immagini_big -> 1.jpg 2.jpg 3.jpg

Supponiamo che le immagini piccole siano di altezza 40 e larghezza 60 e le mettiamo in riga con 10 px di distanza tra di loro...
*/
//Creiamo il preloader prima di tutto
//Metodo per il progress
var listener:Object = new Object();
listener.onLoadProgress = function(bytesLoaded, bytesTotal) {
    // ottengo la percentuale con la solita proporzione
    trace("carico");
    var percentuale:Number = Math.floor((bytesLoaded / bytesTotal) * 100);
    //con la percentuale ci fai quello che vuoi, barra in scala, testo di loading ecc...
};
//Metodo per il caricamento avvenuto
listener.onLoadInit = function(target:MovieClip) {
    trace("finito");
    // L'immagine grande è caricata ed è pronta per eventuali effetti
    //tipo
    target._alpha = 0;
    target.onEnterFrame = function():Void  {
        if (this._alpha < 100) {
            this._alpha += 1;
        } else {
            delete this.onEnterFrame;
        }
    };
};
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(listener);
/*
Prima di tutto creiamo un clip vuoto sulla root che conterrà le thumbs, in modo tale che se poi le vogliamo spostare sullo stage spostiamo un solo clip, e un clip vuoto per caricare le immagini grandi che metyteremo un po più giu:
*/
_root.createEmptyMovieClip("thumbs_cont", 1000);
_root.createEmptyMovieClip("big_cont", 2000);
//io lo posiziono sul vertice alto, poi lo possiamo spostare dove ci pare:
_root.thumbs_cont._x = 0;
_root.thumbs_cont._y = 0;
_root.big_cont._x = 0;
_root.big_cont._y = 100;
/*Adesso all'interno di questi clip creiamo i 20 contenitori per le thumbs e chiamiamo il preloader che poi vedremo:*/
for (var a:Number = 1; a < 21; a++) {
    _root.thumbs_cont.createEmptyMovieClip("cont" + a, a);
    _root.thumbs_cont["cont" + a]._x = (60 + 10) * a;
    _root.thumbs_cont["cont" + a]._y = 0;
    //assegniamo alle thumbs un id per richiamare le img grandi
    _root.thumbs_cont["cont" + a].id = a;
    //Carichiamo l'immagine chiamando il preloader:
    loader.loadClip("immagini_small/" + a + ".jpg", _root.thumbs_cont["cont" + a]);
    //Assegniamo una azione per il caricamento dell'immagine grande al click
    _root.thumbs_cont["cont" + a].onPress = function():Void  {
        loader.loadClip("immagini_big/" + this.id + ".jpg", _root.big_cont);
    };
}