Fw

Wordpress Creative Developer

Flash e lightbox – Action script 3

  • Flash
  • -

Se provate a cercare in rete “flash lightbox“, sicuramente troverete dei risultati validi, ma purtroppo basati tutti su action script 2.

Vista l’esigenza di Maldor e magari di qualcun’altro che ha bisogno di utilizzare lightbox in action script 3, propongo la mia soluzione, prendendo spunto dal lavoro di Alan Curtis, che vi invito a leggere perchè io spiegherò le modifiche da applicare al suo esempio per ottenere lo stesso risultato in action script 3.

flash-lightbox as3

In fondo all’articolo troverete un esempio e il sorgente da scaricare per Flash CS3.

Nella spiegazione, riporterò le righe di codice da moficare, cominciamo:

1. la prima modifica che dovete apportare al codice di Alan Curtis è nella dichiarazione dell’array pics, da fare in questo modo:

2. Ora passiamo alla gestione degli eventi associati alle miniature delle immagini da aprire con lightbox.
Nella versione AS2, gli eventi sono associati direttamente ai vari pulsanti/miniature, cosa che non è possibile in AS3.

Date un nome di istanza a ogni miniatura, ad esempio pic1, pic2, pic3 ecc. e aggiungete questo codice su un altro livello, nel primo frame.

evento prima miniatura

Questo codice lo dovete ripetere tante volte quante sono le foto che fanno parte della gallery.
Se avete 10 foto, avremo 10 ascoltatori: addEventListener(MouseEvent.CLICK, foto1..foto10), con 10 function foto1…foto10.

L’unica cosa che cambierà in ogni funzione sarà la riga 7 dove, nella funzione show, lo 0 corrisponde alla prima foto, l’1 corrisponderà alla seconda……il 9 corrisponde alla decima foto.

Spero che questo tutorial possa esservi utile per i vostri progetti. Credo che si possa fare di meglio a livello di codice (si accettano suggetimenti), però penso sia comunque un buon inizio…

Infine ricordo che nella sezione tutorial, ci sono altri articoli che potrebbero interessarvi, come flash e thickbox, o flash e lightview.

Scarica il sorgente (se avete problemi nel scaricare il sorgente segnalatelo nei commenti…)

Guarda l’esempio

32 Commenti

  1. grazie molto per questo tutorial e anche per il tuo tempo….!!!!!!!!!!

  2. Ciao, figurati!! 😉

  3. ok….ti giuro questo e il mio ultimo domanda…per carico swf’s o pagine di html che devo cambiare? ho provato di modificare il tuo codice ma non riuscito a farlo…..
    (scusa per il mio italiano…sono un italo americano che ritornato a vive in italia poco mesi fa….)

  4. Scusa, ma non ho ben capito il tuo problema…non riesci a caricare l’swf dalla pagine html?

  5. hehe….in luogo delle immagini che desidera caricare i file SWF o pagine html dentro il light box…(i want to load swfs or html pages as well as images in the light box….)

  6. Se non ho capito male tu vuoi caricare oltre alle immagini, anche pagine html, swf ecc con lightbox.

    Allora devi cambiare script, in quanto con lightbox non è possibile farlo.
    Ti consiglio di usare thickbox o lightview, argomenti trattati nella sezione tutorial.

    Non è presente la versione per action script 3, ma le modifiche da applicare sono molto simili a quella scritta nell’articolo.

  7. ottimo e grazie molto…..ho pensato che si po fa lo stesso con light box…. grazie per il tuo aiuto…..

  8. vorrei scaricare l’esempio in AS2 ma il link mi manda su altervista

  9. Anche a me non funziona il link per l’ esempio

  10. Ciao, in che senso non ti funziona? non funziona l’esempio o il sorgente?

  11. @fedeweb, ma no. proprio non va il link..

  12. mmmmm…strano..passando sul link tu si compare una finestra “snap shots”? se si clicca dentro la finestra.

  13. Ma in quale .js dobbiamo fare questa modifica?Per modificare l’array e sostituire le immagini?

  14. Ciao, l’array lo devi modificare sul file di flash, nell’actionsctipt..guarda il file che ho messo in allegato…in “flash-lightboxas3.fla” nel livello pics, nel codice, a un certo punto troverai l’array…

  15. Lo immaginavo…il problema che non mi apre il file .fla e pure marcomedia flash 8 lo tengo mi dice:
    “Unexpected file format” come mai?

  16. Non riesci ad aprirlo perchè il file sorgente è stato fatto con flash cs3. C’è anche il sorgente per action script 2, che lo puoi trovare sull’articolo di alan curtis che ho citato nell’articolo. Puoi scaricarlo direttamente da qui.

  17. non va il link postato

  18. scusami il file sorgento lho scaricato ma mi chiedevo da dilettante quando lo lancio e clicco su una immagine mi apre una finestra del browser non capisco scusa potresti spiegarmelo
    thank

  19. ciao, non ho ben capito il tuo problema. spiegami esattamente quello che succede quando fai un click sull’immagine

  20. Ciao fede posso chiederti una cosa…io sto usando il tuo light box che e fichissimo soltanto che ho una galleria di oggetti e ce ne sono 2/3 per ogni fotogramma per farlo funzionare devo copiare gli action su ogni fotogramma e poi mod? ho mi basta avere tutto sul primo frame?

    grazie saluti

  21. Ciao zimos e benvenuto su questo blog. Metti gli action per ogni fotogramma.

    Se ci sono altri dubbi chiedi pure!

  22. si ho fatto come hai detto…
    solo che io ho diversi fotogrammi in ogni fotogramma o le foto e i due action modificati per non aver doppioni ma non mi trova le foto… della pagina2 in poi… come mai?

    bello il tuo blog

  23. Ciao Fede!
    Una domanda come posso aggiungere un caption al foto nel lightbox?

    Grazie

  24. ciao ! devo inserire il codice del bottone paypal , ma essendo in html e il mio sito e’ il flash non so come fare. un aiutino per favore?

  25. Ciao Arianna e benvenuta nel blog 😉

    Qui trovi quello che ti serve: How to Add PayPal to a Flash Site. 😉

  26. Grazie mille, è proprio quello che cercavo!

  27. Ciao France e benvenuto nel blog 😉

    Ottimo! magari posta il link del sito dove lo utilizzerai! sono proprio curioso! 😉

  28. Ciao Fede, lo so che ormai è un po vecchiotto il post pero’ spero ti vada lo stesso di rispondermi..anche perchè immagino non sarà niente di difficile..
    ho scaricato il tuo fantastico sorgente ma quando lancio la pagina html il lightbox non funziona, semplicemente non richiama la funzione..
    suggerimenti??
    thanks

  29. Ciao faab e benvenuto nel blog 😉

    L’esempio on line ti funziona?

  30. ciao Fede,
    …anch’io arrivo un po’ in ritardo!
    sto costruendo un sito in flash e vorrei usare l’effetto lightbox, ma ho un problemino…visto il tempo passato da quando avete scritto tutti, magari lo avete risolto.
    ho utilizzato l’esempio di Alan Curtis e funziona tutto benissimo! pensavo di avercela fatta, ma il problema è che funziona su firefox da pc e su safari da mac, ma non va nulla su explorer! leggendo il blog di alan ho visto che tanti riscontravano questo problema, ma non ho trovato risposta… le sto provando tutte e alla fine sono approdata al tuo blog. Anche guardando il tuo esempio su firefox funziona e su explorer no, non carica nemmeno la pagina.
    guarda, questa è la pagina che ho costruito così puoi verificare il funzionamento:
    http://www.chiarabaggio.it/phoenix/index_phoenix.html

    ti prego dimmi che hai la soluzione!! o dove posso trovarla.
    grazie infinite!!
    chiara

  31. Ciao! Forse è una domanda stupida..se volessi aggiungere una descrizione sotto ogni foto come devo fare? ora c’è foto 1 di 4…io vorrei mettere proprio una descrizione!
    Grazie mille
    Simona

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *