Flash e Lightbox

- Letture: 6.931

Ecco un piccolo esempio di come far intereagire Lightbox (cornici retroilluminate) con filmati Flash.

Il primo ha usare questo metodo per focalizzare l’attenzione sulle foto è stato il fotografo canadese Jeff Wall.

Qui a lato, cliccando sulla foto, potete vedere un esempio, di come flash può essere messo in relazione con questo effetto Lightbox, ovvero l’apertura di un anteprima su uno sfondo, che copra l’intero sito, concentrando tutta l’attenzione sulla foto.

Nella pagina HTML ci basterà richiamare lightbox.js e lightbox.css, che servono per l’effetto anteprima e per personalizzare i vari oggetti di preloading.

Sul nostro pulsante avremo il seguente codice:

on(release) {
getURL("javascript:flashLightbox('image.jpg');");
}

Implementazioni aggiuntive

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

97 Commenti

  1. ma l’effetto lightbox è possibile farlo anche con i filmati, cioè clikko sul box del filmato e con lo stesso effetto che oscura tutto il resto ho una finestra in primo piano in cui gira il filmato.

  2. @saverio l’effetto ovviamente si puo fare anche con flash, ma se il tuo flash e 200×200 per far scurire l’intera pagina dovresti lavorarci un po’ di più, ovviamente possibile…ma questo tutorial è solo per far vedere come intereagire Flash con Lightbox tutto qui…

    ciao

  3. sto facendo un sito in flash che prevede l’utilizzo del lightbox per visualizzare i popoup delle immagini in una galleria.

    funziona tutto perfettamente, l’unico problema è che quando chiudo il lightbox devo cliccare sulla pagina prima di poter riaprire un altro popup.

    qui un esempio di quel che succede:
    http://rnrstyle.altervista.org/tlb/prova.html

    come posso fare per rendere automaticamente attiva la mia pagina madre quando chiudo il lightbox?

    grazie per l’aiuto

  4. Ciao Manuel,

    sinceramente non riesco a capire il tuo problema

    Ho visto la pagina, premettendo che manca il famoso script per ovviare al plugin di flash e quindi si deve cliccare una volta per attivare il contenuto del filmato.

    Quando un’anteprima con lightbox viene chiusa, se clicco su un’altra immagine si apre senza errori…

  5. Buono! C’è un esempio del codice anche sul sito http://www.easybit.it nella parte lab…Il primo ha usare questo metodo per focalizzare l’attenzione sulle foto è stato il fotograco canadese Jeff Wall…c’è un errore di grammatica :)

  6. FuzyNoel

    Julius come faccio per mettere i pulsanti per andare avanti e dietro tra le varie foto?!?grazie anticipatamente!

  7. Trazaman

    Ciao, volevo sapere se c’è la possibilità di usare lo stesso effetto e fare in modo che il caricamento della foto non avvenga così di botto ma magari con una animazione…grazie e ciao!

  8. @Trazaman ciao l’effetto Lightbox è proprio questo…ora non so dirti se esiste un effetto aggiuntivo.

    Lo potresti simulare strutturandolo completamente in flash

    un saluto

  9. Ciaoo Julius.
    Mi piace molto questo articolo sull’integrazione Flash e Lightbox. Mi sai dire se è possibile in qualche modo anziche delle immagini aprire un file html con il medesimo effetto partendo da un file flash.

    Grazie.
    Dino

  10. Ciao Julius. Seguendo il tuo consiglio sulla soluzione LightWindow v.20 ho cercato sui forum e ho trovato la soluzione per usare un effetto Lightbox per aprire una pagina HTML da un file flash.
    All’interno del progetto flash va creato un buttone ed inserito il seguente comando script ‘on(release)’ :

    getURL(“javascript: myLightWindow.activateWindow({href: ‘URL’, title: ‘TITLE’, author: ‘AUTHOR’, caption: ‘CAPTION});”)

    dove URL, TITLE, AUTHOR and CAPTION are your url della pagina, titolo etc….

    Una volta creato il file SWF ed inserito all’interno di una pagina html assicurati di includere i file necessari del LightWindow 2.0 :

    ae nel tag html per gestire l’oggeto flash () , assicurati di aver definito i seguenti parametri :

    Similmenti assicurati anche che per il tag siano stati indicati i medesimi parametri:

    wmode=”transparent”
    allowScriptAccess=”always”

    L’ho provato e funziona benissimo.

    Dino

  11. Antomerit

    Ciao Julius complimeti per il blog veramente bello !!!senti io ho problema ho creato una gallery in flash per il mio sito in flash ed ho messo in aggiunta alla gallery la lightbox in questo sito (www.espressioni1990.it/home.htm cat: “chiese” bouquet” etc etc ) solo che ogni volta che devo aggiunger le foto devo fare un casino devo aggiungere prima la foto nella gallery e poi aggiungere anche l’indirizzo in html ti vorrei chiedere posso modificare in qualche modo la gallery inserendo ogni singola img tramite xml senza dover stare ogni volta ad entrare agg etcetc ..ancora il sito nn è finito ti spiego io sn alle prime armi !!! Ps sei vuoi ti invio la gallery per renderti conto della gallery poi l’html lo puoi vedere anche sull’html della home …grazie mille Anto

  12. Salve, i miei complimenti, interessantissimo BLog!
    Vorrei farvi una domanda…
    ma se voglio far aprire una file Html, non da un flash ma da una pagina Html?

    Grazie Saluti
    Lisa

  13. @Antomerit ciao,
    sta a te decidere se è necessario usare qualcosa di dinamico…se tu sai che le immagini cambieranno sempre o ce ne saranno sempre di più ti conviene rendere il tutto dinamico, invece se le immagini sono un numero finto tipo 30 puoi anche metterle a manina…

    @Lisa ciao,

    se ho capito bene vuoi aprire una pagina html da un’altra pagina html? ho capito bene? in tal caso leggi Collegamenti

  14. Antomerit

    Ciao Julius grazie per la risposta celere , mi piacerebbe fare un qls di dinamico visto che le creazioni fotografiche che mi dà sn in continua evoluzione , te ne sarei grato se mi potresti indicare la strada per la creazione di un qls di dinamico visto che io sn “TABULA RASA” …
    GRAZIE

    ANTONIO

  15. CREDO DI ESSERMI SPIEGATA MALE!
    Sto cercando un qualche cosa di simile (compatibile) al LightBox o una patch di questo, che mi dia la possibilità di aprire da una pagina Html, un file Html (anzichè immagini) mantenendo l’effetto di trasparenza sullo sfondo.
    {spero vivamente di essere stata un pochino più chiara!}
    GRAZIE!
    LISA

  16. ciao julius…..utilissimo questo effetto light box….. solo che ho un problema… non funziona….cioè ho rifatto il tuo esempio e mi funziona… inserito in un sito (per quanto sia facile ) non va….
    Praticamtne il tutto è strutturato cosi’… ho un movie clip…al suo interno vi è il pulsante con ovviamente il seguente codice

    on (press, release) {
    getURL(“javascript:flashLightbox(‘image.jpg’);”);
    }

    naturalmente i miei file ed i tuoi sono tutti insieme…. ma non va….
    cosa puo’ essere?

    thanks

  17. Ti da qualche errore nella pagina??
    Controlla bene di avere tutti i file js caricati correttamente nei percorsi scritti nella pagina html

    ciao

  18. ciao julius!
    io ho un problema se utilizzo il lightbox per più immagini nella stessa pagina!

    praticamente ho inserito in una pagina html 4-5 foto (bottoni swf per poter creare il lightbox come spiegato da te..)
    nel codice della pagina ho copiato-incollato la stringa che mi serve per creare l’effetto light-box,cambiando solo il nome del link pulsante..

    l’effetto funziona..però l’immagine che si forma dall’effetto..rimane sotto i pulsanti swf…:|

    come faccio a metterla “davanti”??

  19. li ho fatti con flash 8!quindi li ho pubblicati come flash8.

    nei pulsanti ho messo

    on(release) {
    getURL(”javascript:flashLightbox(’image1.jpg’);”);
    }

    cambiando il nome dell’immagine ad ogni pulsante,ovviamente;

    e nel file html ho aggiunto


    ecc..

    e poi

    var so = new SWFObject(“img01.swf”, “mymovie”, “150”, “100”, “6”, “#FFFFFF”);

    tanti quanti sono i miei swf

    (ah..una cosa…quel 6 a cosa si riferisce?)

  20. mi ha preso il codice a href…!!

    cmq lo riscrivo qui:

    nel file html ho aggiunto

    a_href= javascript:flashLightbox(‘image1.jpg’);
    a_href= javascript:flashLightbox(‘image2.jpg’);

    ecc..

  21. ciao julius!sorry…ma…ho un problema…..
    io ho un file swf in una pagina html.
    in questo file swf ad un certo punto sul livello 1 ho fatto comparire l’immagine.

    se il file si chiama prova.swf….per richiamare la lightbox, gli ho dato il seguente percorso per fare in modo che sia tutto in ordine e nn ci siano conflitti con gli altri scripts…

    Script che ho dato per richiamare l’swf sul livello 1:

    loadMovieNum(“newseffetto/button.swf”, 1);

    Puoi vedere qui:
    http://iceangel2006.altervista.org/

    in poche parole compare l’immagine, ma al click nn succede nulla.

    Dentro il server ci sono i seguenti file:
    -prova.swf
    -index.html
    -CARTELLA: newseffetto/ con dentro tutti i file che ci sono nel sorgente tuo originale

    ALtra cosa…..appena scaricato il tuo file, sia che apro l’swf che l’html, qnd clicco sull’immagine, nn vedo nessun effetto..mi da un errore…come mai?

    ciao e grasie! ;-p

  22. emanuele

    ciao Julius

    ho un problema…
    strano, chi non ne ha!!
    comunque
    l’effetto lightbox è una figata…
    ho fatto varie prove e questa versione funziona benissimo, il problema è sorto quando ho provato la versione 2.0..
    Non riesco a far comunicare al mio pulsante in flash il comando per aprire l’immagine grazie a java…

    per caso puoi aiutarmi?
    grazie anticipatamente

  23. Ciao julius. riesco a richiamare lightbox da flash senza problemi ma con una singola immagine. Se invece volessi richiamare un image set di lightbox da un pulsante che script devvo assegnargli? è possibile? Grazie

  24. lauryn77

    Mi accodo alla domanda di Didi, ho letto tutti i commenti ma non c’è risposta.
    se vogliamo usare la image set c’è un particolare script da aggiungere?
    grazie mille :)

  25. paoloconti

    Ciao Julius volevo sapere se c’era modo di eliminare la cornice bianca.
    Ti prego rispondimi al più presto!!
    Grazie mille

  26. @lauryn77,didi non ho trovato ancora lo script appena lo trovo lo inserisco nell’articolo

    @paoloconti Non saprei ma penso di si…guarda un po il css e il file Javascript, sinceramente non ti so dire perchè non ho mai avuto l’esigenza di eliminare la cornice…

  27. lauryn77

    capito, grazie! nel frattempo se dovessi imbattermi nella soluzione la suggerisco su questo post.
    a presto!

  28. sempre più utili le risorse che metti a disposizione degli utenti. Conosco il tool lightbox da un pò e l’ho utilizzato solo in pagine html, faccio una ricerca lightbox flash su google ed eccomi di nuovo qua.

  29. Pingback: lightwindow e flash - Forum Flash CS3

  30. Salve a tutti!
    riguardo al tema flash + lightbox 2, vi invito a leggere il mio tutorial per fare questa integrazione e vedere le gallerie di immagini in lightbox richiamate da flash! Era un problema che ho avuto su un sito che ho fatto quest’anno, cosi’ me lo sono risolto da solo facendo questo piccolo adattamento:
    flash lightbox v2
    Buon lavoro a tutti!

  31. f3d3r1c0

    ciao a tutti…
    inanzitutto complimenti julius per il blog, semplicemente fantastico…

    io vorrei produrre un effetto lightbox in flash, ho gia visto i tutorial, ma non si addicono al mio problema…

    sto creando un cd interattivo, interamente in flash(quindi creando i file di presentazione flash), e vorrei sapere se è possibile non utilizzare file html…

    ovvero, il codice che si mette all’interno dell’html: css, js, ecc sarebbe possibile inserirlo direttamnte in flash???

    grazie…
    f3d3r1c0

  32. Ciao in teoria puoi creare in flash qualcosa che assomigli all’effetto light box…

    avevo in mente anche di farci un piccolo tutorial..

    comunque l’idea è questa

    creare un clip filmato trasparente sul nero che venga usato come contenitore delle foto, ogni qual volta viene cliccata una foto verrà caricata nel clip contenutitore con sfondo sul nero trasparente…

  33. francesco

    Ciao,
    Tutto va nl pagina che c’è negli esempi(anche aggiungendo + foto))!

    Xo ,io ho una pagina html e dovrei inserire l’effetto DENTRo a questa pagina!
    E non mi riesce!
    Come faccio?!
    Ho provato a copiare il codice di una pagina nell’altra ,ma niente!!:-(

  34. Ciao Julius, ancora una volta complimenti sinceri. Volevo chiederti una cosa:
    ho notato che tutto funziona perfettamente in locale, ma se lo carico su un server, quando la pagina html viene caricata non parte l’swf e il bowser da l’errore: -‘SWFObject’ non è definito-
    Cosa può essere, se in locale invece tutto funziona a meraviglia?
    Grazie.

    Fabrizio

  35. Marchino

    Controlla di aver caricato tutti i file JS necessari…compreso quello per l’SWFObject

  36. Ciao Marchino ho caricato tutto, infatti se dall’ftp riscarico tutto in locale, funziona perfettamente.
    Cosa può essere?

Commenti