ASBox: Effetto Lightbox simulato in Flash

- Letture: 4.137

ASbox è una classe in ActionScript 3 scritta da Marcello Surdi che simula l’effetto Lightbox interamente in Flash senza utilizzare codice JavaScript

ASbox: Effetto Lightbox simulato in Flash senza JavaScript

Il filmato Flash sarà pubblicato con dimensioni 100% eliminando dalla pagina HTML i margini e padding.

Andiamo a vedere la sintassi base da utilizzare per aggiungere nuove immagini e configurarle

btn.imgAddr = 'img1.jpg';
btn.imgLabel = 'Qui la didascalia opzionale dell\'immagine'
btn.buttonMode = true;
btn.addEventListener(MouseEvent.CLICK,activateASbox);

  • imgAddr: Percorso dell’immagine
  • imgLabel: Descrizione della foto “esplosa”
  • buttonMode: true o false per rendere il pulsante attivo o inattivo
  • addEventListener: Viene associato l’evento activateASbox

Per inserire una nuova immagine vi basterà duplicare il clip delle thumb e inserire il codce AS identico agli altri clip cambiando l’indice, in questo caso sono 4, il prossimo sarà 5 e cosi via.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Managing Partner di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

38 Commenti

  1. Il commento più diretto e sincero che mi balza alla mente è: la Cameron Diaz è veramente un miracolo di bellezza!!

  2. ciao Julius,
    sempre ottimi “REGALI” :-)

    sai che si blocca un pò? ho provato con safari e firefox da MAC e a volte diciamo spesso il fade iniziale della foto si ferma a metà … :-/

    ciao

  3. @uccioweb
    Come non essere d’accordo con te! ;)
    @Davide
    Sono d’accordo anche con te! Grazie della segnalazione. Non direi che fosse un problema frequente ma sporadicamente si presentava ed io non me n’ero accorto.
    Per chi fosse curioso di saperlo il problema era l’istanza Tween istanziata dentro il metodo completeHandler(). L’oggetto aveva un’area di validità limitata alla funzione stessa e veniva eliminato anzi tempo dal garbage collection. Da cinque minuti sto massacrando di clic l’esempio e il fade non si blocca. In attesa di riscontri direi che il bug è risolto. Ho aggiornato l’esempio e il sorgente sul mio sito.
    Saluti

  4. ciao
    non sarebbe possibile,una volta entrati nella visualizzazione di una foto, poter scorrere le altre a partire da quel punto? in modo da avere due possibilità: 1-tornare alla “scacchiera” di visualizzazione di tutte le foto 2- poter scorrere le fotografie senza entrare e uscire dalla visualizzazione a scacchiera.
    Ciao popolo di Julius!!

  5. Guardando il materiale fornito, mi sembra un tantino complicato riadattarlo alle proprie esigenze…

    Julius ma se io ho un menu tutto dinamico scaturito da un file xml… dove metto i codici per far apparire le mie immagini “esplose”?

  6. Ciao gipris diciamo che essendo una beta non è ottimizzato.

    Quindi ti do ragione che non sia molto facile a riadattarlo a un progetto…

    Dovresti leggere il codice è riadattare il tuo menu per renderlo compatibile al AS3 usato…

  7. Un buon lavoro, anche se credo vada implementato tantissimo, per renderlo riadattabile a tutte le esigenze, ma soprattutto secondo me, vada implementato con un caricamento delle miniature tramite xml perchè per 3/4 immagini può anche andare bene, ma se le immagini aumentano la dimensione del file si gonfia e potrebbe diventare un problema lo scaricamento troppo lento.

    Ciao ciao
    Shinji

  8. Sebbene ammetta che l’uso della classe potrebbe essere per così dire più friendly, potrei garantire che, anche adesso è già riadattabile praticamente a qualsiasi esigenza con pochissima fatica.

    Chi comunque dovesse avere difficoltà può contattarmi e, compatibilmente con i miei impegni, sono disponibile ad un aiuto. Ricordo soltanto che bisogna utilizzare ActionScript 3.0 altrimenti l’integrazione non è possibile.

    Quello che dice Shinji è giusto, del resto sono allo stato di bozza più che di beta :), ed è una delle tante migliorie che avevo già in mente per la seconda versione del progetto a cui, da pochissimo, ho messo mano.
    Un saluto a tutti

  9. Ma io nn riesco ad aprire il file!mi dice”formato file disatteso”(se nn ricordo male)!
    Ho flash Mx ed 8!

  10. ciao, complimenti per i tuoi lavori…

    volevo solo farti una domanda, quando lo provo sostituendo sempliecemente le immagini senza aggiungere alcuna stringa e rimanendo quindi on 4 immagini va tutto a meraviglia, ma appena ne aggiungo una 5 copiando le stringe della IV e modificandole opportunamente si vede solamente un video delle immagini che schiariscono senza alcun collegamento o altro…cosa può essere?

  11. Controlla di aver inserito il codice in maniera uguale come per le altre immagini, forse hai saltato qualche codice

  12. Non capisco perchè va perfettamente se modifico il fla originale(quindi anche se aggiungo altre foto) perè se faccio il copia ed incolla dei fotogrammi in un fla nuovo(action script 3)nn va!
    E mi appaiono una marea di errori nel codice!
    Mmm…da che dipende?

  13. Salve,
    ottima risorsa. Ho un unico problema: xkè se carico il file tramite loadmovie non mi funziona più?
    Grazie per il grande supporto :D

  14. @Max
    Probabilmente devi cambiare il path (percorso ) dei files, cioè prova a scrivere _parent.img1.jpg anziché img1.jpg ecc… dovrebbe risolversi il problema… :-)

  15. Andrea Centaro

    Ciao a tutti! Volevo chiedervi come mai inserendo la stringa per la quinta immagine, il cursore del mouse viene disattivato su tutte miniature. Ho testato innanzitutto sul tutorial di Marcello, e il mio codice è il seguente:

    import actionscript.ASBox2;

    // SINGLE IMAGES
    btn1.buttonMode = true;
    btn1.mouseChildren = false;
    btn1.path = ‘images/img1.jpg’;
    btn1.lbl =
    btn1.addEventListener(MouseEvent.CLICK,f);

    btn2.buttonMode = true;
    btn2.mouseChildren = false;
    btn2.path = ‘images/img2.jpg’;
    btn2.addEventListener(MouseEvent.CLICK,f);

    // IMAGE SET
    btn3.buttonMode = true;
    btn3.mouseChildren = false;
    btn3.path = ‘images/img1.jpg’;
    btn3.lbl = ‘Roll over and click right side of image to move forward.’;
    btn3.asboxID = 1;
    btn3.addEventListener(MouseEvent.CLICK,f);

    btn4.buttonMode = true;
    btn4.mouseChildren = false;
    btn4.path = ‘images/img2.jpg’;
    btn4.lbl = ‘Alternatively you can press the right arrow key.’;
    btn4.asboxID = 2;
    btn4.addEventListener(MouseEvent.CLICK,f);

    btn5.buttonMode = true;
    btn5.mouseChildren = false;
    btn5.path = ‘images/img3.jpg’;
    btn5.lbl = ‘The script preloads the next image in the set as you\’re viewing.’;
    btn5.asboxID = 3;
    btn5.addEventListener(MouseEvent.CLICK,f);

    btn6.buttonMode = true;
    btn6.mouseChildren = false;
    btn6.path = ‘images/img4.jpg’;
    btn6.lbl = ‘Press Esc to close’;
    btn6.asboxID = 4;
    btn6.addEventListener(MouseEvent.CLICK,f);

    btn7.buttonMode = true;
    btn7.mouseChildren = false;
    btn7.path = ‘images/img5.jpg’;
    btn7.asboxID = 5;
    btn7.addEventListener(MouseEvent.CLICK,f);

    btn8.buttonMode = true;
    btn8.mouseChildren = false;
    btn8.path = ‘images/img6.jpg’;
    btn8.asboxID = 6;
    btn8.addEventListener(MouseEvent.CLICK,f);

    btn9.buttonMode = true;
    btn9.mouseChildren = false;
    btn9.path = ‘images/img7.jpg’;
    btn9.asboxID = 7;
    btn9.addEventListener(MouseEvent.CLICK,f);

    function f(e:MouseEvent):void {
    var btn:MovieClip = e.target as MovieClip;
    var asb2:ASBox2 = new ASBox2(btn,640,480);
    }

    Probabilmente sbaglio qualcosa……al clip filmato ho dato il nome “btn7” e nello script ho fatto richiamo alla “img7.jpg” però il mouse viene disattivato non dà segni…cosa posso fare???
    GRAZIE A CHI RISPONDERA’!!!!
    Andrea

  16. tanino82

    ciao caro julius. visto che sono un dilettante. volevo una piccola informazione. ma come faccio a duplicare il clip delle thumb?

  17. Ciao, vorrei anche io scaricare il sorgente…. non è recuperabile da nessuna parte?

  18. killBill

    @ Paola:
    se vuoi te lo passo io,dammi un indirizzo al quale recapitartelo ;)

  19. Ciao ragazzi! ho aggiornato l’articolo inserendo il link per il downlod diretto…

    A quanto pare sembra che il blog di Marcello non esisti più…

  20. Scusami Julius,
    ma il file che mi ha mandato non funziona….. sono stati resi inattive i link che dalle foto piccole permettono l’apertura dell’immagine grande….. forse avevi fatto qualche modifica?
    Non avresti più il file originale?
    Grazie ancora

  21. killBill ha scritto:

    @ Paola:
    se vuoi te lo passo io,dammi un indirizzo al quale recapitartelo

    Ciao killBill, se possiedi il file originale potresti mandarmelo a pade77@hotmail.com?
    Grazie mille

  22. @Paola: ciao ho verificato, e il file non corretto era l’SWF

    Il FLA è corretto, ora comunque ho ricaricato i file giusti.

    Ti ricordo che il tutto funziona aprendo il file SWF in pagina HTML che trovi nel file ZIP

  23. Ciao Julius, ho visto….. grazie.
    Secondo te è possibile caricare swf invece di jpg senza dover riscrivere il codice? qualcuno l’ha già fatto?
    Grazie ancora della disponibilità……

  24. ciao julius…inanzitutto complimenti per il tuo sito veramente ricco di tutorial ed’altro….purtroppo stò costruendo un sito web in flash in as2.0….vorrei creare una photogallery con effetto lightbox…ho fatto delle ricerche ad internet ma niente…..l’unica idea che mi è venuta è che al evento click del menù si apre un immagine a fullscreen e inserendo un semplice slideshow di immagini…..l’unica cosa che non riesco a trovare ad internet è come si effettua un’immagine a fullscreen in as2…..

    aiutami!!!!!

    paul

  25. julius avrei bisogno di te devo implementare questo tool nel mio sito fatto in flash è non ho un idea potresti fare una guida di come inserirlo in un sito in flash?

Commenti