ASbox è una classe in ActionScript 3 scritta da Marcello Surdi che simula l’effetto Lightbox interamente in Flash senza utilizzare codice 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.
38 Commenti
Il commento più diretto e sincero che mi balza alla mente è: la Cameron Diaz è veramente un miracolo di bellezza!!
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
lo fa se appena clicco muovo il mause .
@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
muito bom parabéns
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!!
Sì, ovviamente è possibile.
Credo che lo farò senz’altro anzi.
Vi tengo informati.
Saluti
grazie mille marcello…
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”?
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…
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
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
Ma io nn riesco ad aprire il file!mi dice”formato file disatteso”(se nn ricordo male)!
Ho flash Mx ed 8!
Questo esempio è esclusivamente per Flash CS3 in AS3
ma dice che la cartella compressa nn è valida quando lo decomprimo
funziona perfettamente a me
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?
Controlla di aver inserito il codice in maniera uguale come per le altre immagini, forse hai saltato qualche codice
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?
Ho il piacere di annunciare che ho completato lo sviluppo della seconda versione di ASBox che (fermo restando che è scritta interamente in AS3 senza il “contributo” di JavaScript esterno) ora è un clone della più nota gallery Lightbox 2 riproponendone aspetto e funzionalità.
http://www.marcellosurdi.name/2008/10/22/asbox2-lightbox-flash/
Salve,
ottima risorsa. Ho un unico problema: xkè se carico il file tramite loadmovie non mi funziona più?
Grazie per il grande supporto :D
@Max
Probabilmente devi cambiare il path (percorso ) dei files, cioè prova a scrivere _parent.img1.jpg anziché img1.jpg ecc… dovrebbe risolversi il problema… :-)
come faccio a mettere questa galleria flash in GoLive?
@isak non sono sicuro ma controlla che tu possa inserire filmati flash e poi inserisci il codice embed
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
ciao caro julius. visto che sono un dilettante. volevo una piccola informazione. ma come faccio a duplicare il clip delle thumb?
aiutatemi… non riesco a scaricare il sorgente!!!
Ciao Julius scusa ma il link del download non funziona!
Ciao, vorrei anche io scaricare il sorgente…. non è recuperabile da nessuna parte?
@ Paola:
se vuoi te lo passo io,dammi un indirizzo al quale recapitartelo ;)
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ù…
Grazie mille ragazzi a tutti….. ora vado subito a lavorarci!!!
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
killBill ha scritto:
Ciao killBill, se possiedi il file originale potresti mandarmelo a pade77@hotmail.com?
Grazie mille
@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
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à……
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
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?