JuliusDesign

Image Gallery Fullscreen [AS3]

Di - Letture: 5.131

Ecco una bella galleria di immagini in flash realizzata in Action Script3

Questa galleria permette di visualizzare le immagini utilizzando un Fullscreen, espandendo quest’ultime su tutto il nostro browser.

Image Gallery Fullscreen [AS3]

Avremo a disposizioe una galleria strutturata con delle categorie le quali visualizzeranno le immagini corrispondenti.

Vediamo il file XML:

Image Gallery Fullscreen [AS3]

La galleria di immagini viene gestita tramite un semplice file esterno XML cosi strutturato:

<item name="main" folder="main">
<item name="After the rain" file="A_after_the_rain.jpg" />
<item name="Bridge" file="Bridge.jpg" />
<item name="Double Delight Rose - Yellow" file="Double_Delight_Rose-Yellow.jpg" />
</item>

  • name: Nome da visualizzare come categoria nella galleria
  • folder: Nome/percorso della cartella in cui prendere le immagini
  • name: Nome della foto da visualizzare
  • file: Percorso dell’immagine da visualizzare

E’ necessario utilizzare Flash CS3 per visualizzare i file progetto

Scarica il sorgente (click destro sul link > Proprietà > copia e scrivi l’url nella barra indirizzi del browser)
Guarda il Tutorial

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.

Chi ha letto questo articolo ha letto anche

54 Commenti

  5. flashmotus

    grazie julius, davvero notevole, non ho il flash cs3 ma chissà un giorno, al momento do una sbirciatina al codice con la versione demo.

    Cita / Quota
  6. mki

    E’ veramente molto bella questa gallery, come del resto tutti i tutorial che metti nel blog…
    Scusa, siccome non ho ancora il Cs3, esiste una cosa simile in Flash 8?Intendo con la possibilità di passare a tutto schermo con un click?
    Grazie

    Cita / Quota
  7. Julius

    Come avrai ben notato quello è finto fullscreen, ovvero, l’immagine è gia caricata sotto ma viene mascherata da un semplice quadrato di proporzioni più piccole.

    Una volta cliccato il pulsante FULLSCREEN, non fa altro che avviare una transazione della maschera al fine di arrivare a dimensioni 100%

    Cerca nell’area TUTORIALS esempi di FULLSCREEN

    saluti

    Cita / Quota
  9. Luca

    A me visualizza come nome della categoria il valore che sta in folder…perchè???

    Cita / Quota
  10. Luca

    Ciao, bellissima galleria, volevo sapere se potevo inserire questa splendida galleria nel mio sito. Posso farlo?

    Cita / Quota
  11. augustomai

    ciao,questa galleria è davvero stupenda.Scusa non ci conosciamo sono si può dire alle prime armi ,ma non riesco a scaricare il sorgente,riesco a guardare il tutorial ma quando lo scarico non mi da il fla.Perchè? In più volevo sapere se è modificabile.scusami un altra domandina siccome sono all’inizio in questo lavoro infatti non ho ancora finito il mio primo sito,volevo sapere se mi potevi consigliare qualche blog o sito dove cercare immaggini, tipo sxc.com ,e tutorials.ciao,grazie!!! complimenti sei davvero grande

    Cita / Quota
  12. Julius

    @Luca puoi utilizzare la galleria a tuo piacimento è opensource

    @augustomai Clicca su Scarica i file sorgenti

    Cita / Quota
  13. augustomai

    quando clicco su file sorgente va a questo indirizzo
    http://www.boshpk.co.uk/imageGallery/source.rar

    e vedo

    Rar!ϐs
    i;t 6*PÛƐ§73 GalleryChooser.as°Tê* ÌÌÍÓWº`7ƒ¾uY-±‰&×j׀NN[ÍÁ½Á†Ã‚ŒmIã
    |Á+_oÙXŸE›;ύln «¶(3øŽÕ÷îÑ20ö ¶19¨~þ=£˜Þô‚ISٗ¾ô` àv ~jACÖGûõi˜ÐãÎG8ó@…ñ:
    «•j!‰çjSðì‡6>†wA>燂j?ô |äŠ?Û+ÏAá¬MÉ´fö7Nyábþ&®°‡ñ±Ó”üw”·BÇ÷¯b
    RYmñgod1gò` lM:ÈG×ٝµøü v‘û¾ûª)£1NLÌ=Z•”‚Ò|Ñ%üb¶HÞ _käٙòîñ&ÕÉ

    Cita / Quota
  15. augustomai

    io clicco su scarica file sorgente e mi si apre direttamente cosi
    Rar!ϐs
    i;t 6*PÛƐ§73 GalleryChooser.as°Tê* ÌÌÍÓWº`7ƒ¾uY-±‰&×j׀NN[ÍÁ½Á†Ã‚ŒmIã
    |Á+_oÙXŸE›;ύln «¶(3øŽÕ÷îÑ20ö ¶19¨~þ=£˜Þô‚ISٗ¾ô` àv ~jACÖGûõi˜ÐãÎG8ó@…ñ:
    «•j!‰çjSðì‡6>†wA>燂j?ô |äŠ?Û+ÏAá¬MÉ´fö7Nyábþ&®°‡ñ±Ó”üw”·BÇ÷¯b
    RYmñgod1gò` lM:ÈG×ٝµøü v‘û¾ûª)£1NLÌ=Z•”‚Ò|Ñ%üb¶HÞ _käٙòîñ&ÕÉ

    Cita / Quota
  17. CyberDemon

    Ciao Julius, complimenti per questa incredibile raccolta di progetti. Sono mostruosi!!!
    Questo in particolare mi interessa molto.

    Volevo utilizzarlo per creare la galleria delle mie foto ma dopo aver caricato tutte le foto e compilato l’XML ho avuto un problema con alcune immagini.

    Volevo sapere come fare per non far visualizzare le immagini adattate allo schermo ma alla loro dimensione originale.
    Questo mi occorre perchè alcune foto sono scattate verticalmente e quindi per vederle per intero bisogna scorrerle parecchio perdendo il soggetto della foto, cosa che invece non accade con le normali immagini orizzontali che sono visualizzate nella loro quasi totale pienezza.

    Grazie 1000 e continua così.

    P.S. Posso avere un tuo minibanner da inserire sulla mia pagina per linkare questo sito? Merita davvero troppo!!! Ciao

    Cita / Quota
  18. Julius

    Il progetto è realizzato con Fash cs3 è sinceramente mi sto buttando da poco sul codice..

    appena faccio progressi ti dico..

    Per il banner a lato trovi un antipixel se vuoi usarlo…

    un saluto

    Cita / Quota
  19. elisa

    Ciao,
    ho scoperto il tuo sito solo oggi ma è già tra i favoriti!
    La Gallery è fantastica, però volevo avvisarti che c’è un problema se si fa lo zoom in delle immagini perchè dopo con lo zoom out tutto si sposta nell’angolo in basso a destra e si vede solo parte della foto incorniciata.
    Cmq complimenti per il sito e ti dico già grazie in anticipo perchè sò già che lo frequenterò spesso! ;)
    Ciauz!

    Cita / Quota
  20. blue

    ma come si fa acambiare il colore? togliere il giallino intendo.
    Sto provando a cambiare il codice dai file .as ma non mi cambia nulla :(

    Cita / Quota
  23. akira

    Hola Julius, farti i complimenti mi sembra davevro superfluo…
    Quindi: GRAZIE!
    Ora, una domanda però: funziona tutto perfettamente ma quando si naviga tra le cartelle (main, blah, stuff), funge solo la navigazione…le thumb non vengono caricate.
    Ciao

    Cita / Quota
  24. akira

    errata corrige: funge tutto sbagliavo io a dare il path per le thumbs e le pics
    ;)

    Cita / Quota
  26. il Barna

    Ho provato a scaricare Image Gallery Full screen [AS3].
    Dal sito vecchio lo scarico ma non funziona (non si vedono le foto).

    Dal sito nuovo, invece mi dice:
    Forbidden
    You don’t have permission to access /imageGallery/source.rar on this server.

    Siccome mi sembra un ottimo prodotto, come devo fare per scaricarlo e provarlo sul mio sito ??
    Ciao e Grazie.

    Cita / Quota
  29. Manu!

    ciao julius!!
    ottima galleria…niente da dire! ;-)
    volevo solo chiederti come posso cambiare il colore intorno alle finestre da besch ad azzurro…
    per lo sfondo ce l’ho fatta!…semplice!
    ma per questo…no….
    è importante!!!grazie!ciaoo!

    Cita / Quota
  31. Manu

    intendo il colore della cornice dell’immagine ingrandita,il rettangolo dove c’è scritto main (nell’esempio in alto!) e il rettangolo sotto le miniature!

    Cita / Quota
  32. j0k3r

    Come posso fare in modo che lo spazio per scrivere la descrizione delle foto sia maggiore???

    grazie…

    Cita / Quota
  34. Manu

    Julius…mi sai dire allora come cambiare il colore?della cornice dell’immagine ingrandita,il rettangolo dove c’è scritto main (nell’esempio in alto!) e il rettangolo sotto le miniature!

    Please!

    Cita / Quota
  35. m_k_i

    Scusa ancora, ma se volessi caricarla dentro un mc contenitore come si fa?
    Non riesco, forse il loadmovie è obsoleto per il cs3…?

    Cita / Quota
  37. fra

    Non è attiva la pagina di questo tutorial! Ne per scaricare ne x vedere l esempio:-(

    Cita / Quota
  38. Julius

    Non si può vedere online perchè l’autore ha eliminato le pagine

    per scaricare la galleria click tasto destro sul link Scarica Sorgenti > Proprietà > e poi copia e scrivi l’url nella barra indirizzi del browser

    Cita / Quota
  41. Claudio

    Ciao Julius anche io mi aggiungo per farti i miei complimenti

    Vorrei risolvere questoproblema
    creo l’swf della galleria , la inserisco in una pagina HTML e non funziona più
    ho modificato i file classes impostando i nuovi percorsi per la ricerca delle immagini, ma niente nn funziona
    Devo percaso creare del codice direttamente sulla pagina HTML?
    Grazie anticipati
    claudio

    Cita / Quota
  42. marco

    Ciao Julius,
    complimenti per il tuo sito e per le tue segnalazioni.
    Domanda analoga a quella di Claudio:
    nel file zippato non è contenuto il file html, non è che ce ne puoi preparare uno ??

    GRAZIE

    Cita / Quota
  43. marco

    Scusa Julius,
    ho provato a pubblicare un file html con CS3 e la galleria funziona correttamente.
    hai forse qualche suggerimento specifico riguardante le impostazioni per la pubblicazione ?

    CIAO e GRAZIE ancora

    Cita / Quota
  44. marco

    Scusa ancora julius ( 3 post uno in fila all’altro… ),
    ma qualche cosa non funziona come dovrebbe, alcune immagini ( anzichè andare in fullscreen ) vengono aperte in una nuova finestra…

    CIAO

    Cita / Quota
  45. Julius

    @Claudio: ciao

    probabilmente hai erratto qualche passaggio..controlla che tutti i file siano caricati

    @marco: ciao

    sei sicuro di aver inserito i file corretti delle immagini?

    Cita / Quota
  46. marco

    GRAZIE Julius per la risposta; molto gentile e tempestivo.
    Ho scaricato il tutto sia dal tuo link che da : http://www.ffiles.com/flash/photo_galleries/xml_image_gallery_with_image_scrolling_1445.html
    Da quest’ultimo il file prelevato è comprensivo di file index.html, all’interno vi è anche un file denominato “AC_RunActiveContent.js_safe”; ho cancellato “_safe” per evitare il messaggio “This page requires AC_RunActiveContent.js.”.
    Provando la galleria anche offline, se si apre il file swf con flashplayer tutto funziona regolarmente, se viene aperto il file index.html alcune immagini anzichè essere portate a fullscreen vengono aperte in una nuova finestra.
    Per quanto riguarda le immagini ( e anche tutto il resto ) non ho modificato nulla, si tratta del contenuto originale.
    I risultati indicati sono stati ottenuti sia con Safari per OS X che con IE7 per PC.
    La cosa è inspiegabile, almeno per quanto mi riguarda…

    CIAO e GRAZIE

    Cita / Quota
  47. marco

    Ultime dal fronte.
    Dopo aver sostituito la prima immagine ( afflitta dal problema di cui sopra ) con una mia immagine ho riscontrato il regolare funzionamento di quest’ultima.
    Cliccando quindi sull’immagine si ha il fullscreen, cliccando sul titolo dell’immagine si ha l’apertura della stessa in una nuova pagina.
    In pratica riguardo all’immagine incriminata, indipendentemente da dove si cliccava appariva l’immagine in una nuova finestra…BOH!!
    A questo punto provo a ricostruire per intero la galleria, sia dal punto di vista delle immagini che dal punto di vista del file XML.
    Anche questo sembra essere interessante dal punto di vista della gestione del fullscreen anche se le immagini sono tutte verticali : http://www.ffiles.com/flash/photo_galleries/zoom_pan_gallery_xml_1310.html
    Mi permetto di suggerirvi anche la visione di: http://www.paulvanroekel.nl/picasa/index.asp

    Sperando di non avervi eccessivamente tediato con le mie osservazioni vi auguro buon lavoro…specialmente a Julius.

    CIAO

    Cita / Quota
  49. pippo

    Ciao,
    ho utilizzato questa galleria sul mio blog, ora ho la necessita di FAR INSERIRE LE FOTO AI MIEI UTENTI, come posso fare?

    Qualche idea?

    Cita / Quota
  50. pippo

    Immaginavo di non ricevere risposta, sono però molto deluso…è proprio vero, da quando hai iniziato con il magazine ai tuoi utenti non dai piu riscontro!!!

    Complimenti!

    Cita / Quota

Commenti