In questo articolo vedremo come creare in pochi minuti una bellissima galleria fotografica in Flash.
Lo script in questione si chiama SimpleViewer ed è sviluppato e distribuito gratuitamente da Airtight Inc.
Le features di questo script sono davvero tante, ne segnaliamo alcune:
- leggerissimo da caricare (solo 17Kb);
- customizzabile nei colori e nelle dimensioni;
- cross-platform e cross-browser.
La caratteristica più interessnte, tuttavia, è che per utilizzarlo non è necessario essere dei grafici e conoscere Flash!
Come già detto il lavoro è già pronto e basta adavvero poco per customizzarlo a nostro piacimento.
Vediamo quindi come creare la nostra galleria di immagini in Flash.
Per scaricare lo script è necessario andare sulla
Al suo interno troviamo diversi file: il più importante è viewer.swf che è l'anima dell'intera applicazione. Oltre a questo troviamo il file swfobject.js, un paio di file .html ed il file gallery.xml. Oltre a questi file sono presenti due cartelle: images e thumbs.
Per prima cosa prepariamo le nostre immagini col nostro programma di grafica preferito e salviamole in .jpg con la modalità non-progressive. Salviamo le nostre immagini all'interno della cartella images.
Ora creiamo delle versioni ridotte (delle miniature che verranno mostrate come anteprima) e salviamole nella cartella thumbs avendo cura di mantenere il medesimo nome utiluizzato per l'immagine grande salvata nella cartella images.
La prima riga di questo file è una semplice intestazione XML:
Subito sotto si apre il tag simpleviewergallery al cui interno sono definite le caratteristiche principali della nostra galleria:
- maxImageWidth e maxImageHeight definiscono le dimensioni massime delle immagini nella galleria;
- textColor definisce il colore (esadecimale) del testo nella galleria (usato per la caption delle singole immagini);
- frameColor definisce il colore del box contenente le immagini, le miniature ed il colore dei bottoni di navigazione;
- frameWidth definisce la larghezza del box contenente le immagini;
- stagePadding definisce il padding dello stage ovvero dell'area dove viene visualizzata l'immagine;
- navPadding definisce la distanza (in pixel) tra l'immagine e le miniature;
- thumbnailColumns e thumbnailRows defibiscono rispettivamente il numero di colonne e di righe in cui presentare le miniature (0 = nessuna miniatura);
- navPosition definisce il posizionamento delle miniature rispetto all'immagine (top, left, bottom, right);
- vAlign e hAlign definiscono, rispettivamente, il posizionamento verticale e orizzontale delle immagini rispetto al box generato dal file SWF;
- vAlign può avere i seguentoi valori "top", "center", "bottom";
- hAlign può avere come valori "left", "center", "right";
- title definisce un titolo per la nostra galleria;
- enableRightClickOpen può essere impostato come True o False; se impostato su True sarà possibile cliccare col tasto destro sull'immagine ed aprire un menu conte-- stuale con una serie di opzioni (la principale serve per aprire l'immagine in una nuova finestra);
- backgroundImagePath definisce l'eventuale background della galleria; può essere un file .jpg o .swf (è necessario indicare la esatta URL del file che si desidera utilizzare come sfondo per la galleria);
- imagePath e thumbPath definiscono, rispettivamente, il path (assoluto o relativo) delle cartelle contenenti le immagini e le relative miniature;
Più sotto inizia l'elenco delle immagini da mostrare nella galleria; queste sono definite all'interno dei tag image in questo modo:
Come vedete il tag image contiene al suo interno altri due tag nidificati:
- filename che definisce il nome del file dell'immagine (e della miniatura che deve chiamarsi allo stesso modo);
- caption che contiene una descrizione o un commento che verrà mostrato come didascalia dell'immagine.
E' possibile inserire quante immagini si desidera.
Conclusa la definizione delle immagini è necessario chiudere il nostro file XML mediante la chiusura del tag simpleviewergallery; in questo modo:
Una volta messo a punto il nostro file di configurazione non ci resta che pubblicare la nostra galleria. Per farlo il pacchetto di SimpleViewer ci suggerisce di usare SWFObject (già contenuto nello zip).
Per prima cosa è necessario inserire il richiamo della libreria swfobject nell'intestazione della pagina (tra <head> e </head>):
Ora aggiungiamo quest'altro codice all'interno del body della pagina, dove vogliamo compaia la nostra flash gallery:
Screenshot della gallery:
Fonte:
Lo script in questione si chiama SimpleViewer ed è sviluppato e distribuito gratuitamente da Airtight Inc.
Le features di questo script sono davvero tante, ne segnaliamo alcune:
- leggerissimo da caricare (solo 17Kb);
- customizzabile nei colori e nelle dimensioni;
- cross-platform e cross-browser.
La caratteristica più interessnte, tuttavia, è che per utilizzarlo non è necessario essere dei grafici e conoscere Flash!
Come già detto il lavoro è già pronto e basta adavvero poco per customizzarlo a nostro piacimento.
Vediamo quindi come creare la nostra galleria di immagini in Flash.
Per scaricare lo script è necessario andare sulla
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
del progetto. Una volta scaricato il pacchetto dovremo, ovviamente, decomprimerlo per estrarne il contenuto.Al suo interno troviamo diversi file: il più importante è viewer.swf che è l'anima dell'intera applicazione. Oltre a questo troviamo il file swfobject.js, un paio di file .html ed il file gallery.xml. Oltre a questi file sono presenti due cartelle: images e thumbs.
Per prima cosa prepariamo le nostre immagini col nostro programma di grafica preferito e salviamole in .jpg con la modalità non-progressive. Salviamo le nostre immagini all'interno della cartella images.
Ora creiamo delle versioni ridotte (delle miniature che verranno mostrate come anteprima) e salviamole nella cartella thumbs avendo cura di mantenere il medesimo nome utiluizzato per l'immagine grande salvata nella cartella images.
La prima riga di questo file è una semplice intestazione XML:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Subito sotto si apre il tag simpleviewergallery al cui interno sono definite le caratteristiche principali della nostra galleria:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
- maxImageWidth e maxImageHeight definiscono le dimensioni massime delle immagini nella galleria;
- textColor definisce il colore (esadecimale) del testo nella galleria (usato per la caption delle singole immagini);
- frameColor definisce il colore del box contenente le immagini, le miniature ed il colore dei bottoni di navigazione;
- frameWidth definisce la larghezza del box contenente le immagini;
- stagePadding definisce il padding dello stage ovvero dell'area dove viene visualizzata l'immagine;
- navPadding definisce la distanza (in pixel) tra l'immagine e le miniature;
- thumbnailColumns e thumbnailRows defibiscono rispettivamente il numero di colonne e di righe in cui presentare le miniature (0 = nessuna miniatura);
- navPosition definisce il posizionamento delle miniature rispetto all'immagine (top, left, bottom, right);
- vAlign e hAlign definiscono, rispettivamente, il posizionamento verticale e orizzontale delle immagini rispetto al box generato dal file SWF;
- vAlign può avere i seguentoi valori "top", "center", "bottom";
- hAlign può avere come valori "left", "center", "right";
- title definisce un titolo per la nostra galleria;
- enableRightClickOpen può essere impostato come True o False; se impostato su True sarà possibile cliccare col tasto destro sull'immagine ed aprire un menu conte-- stuale con una serie di opzioni (la principale serve per aprire l'immagine in una nuova finestra);
- backgroundImagePath definisce l'eventuale background della galleria; può essere un file .jpg o .swf (è necessario indicare la esatta URL del file che si desidera utilizzare come sfondo per la galleria);
- imagePath e thumbPath definiscono, rispettivamente, il path (assoluto o relativo) delle cartelle contenenti le immagini e le relative miniature;
Più sotto inizia l'elenco delle immagini da mostrare nella galleria; queste sono definite all'interno dei tag image in questo modo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Come vedete il tag image contiene al suo interno altri due tag nidificati:
- filename che definisce il nome del file dell'immagine (e della miniatura che deve chiamarsi allo stesso modo);
- caption che contiene una descrizione o un commento che verrà mostrato come didascalia dell'immagine.
E' possibile inserire quante immagini si desidera.
Conclusa la definizione delle immagini è necessario chiudere il nostro file XML mediante la chiusura del tag simpleviewergallery; in questo modo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una volta messo a punto il nostro file di configurazione non ci resta che pubblicare la nostra galleria. Per farlo il pacchetto di SimpleViewer ci suggerisce di usare SWFObject (già contenuto nello zip).
Per prima cosa è necessario inserire il richiamo della libreria swfobject nell'intestazione della pagina (tra <head> e </head>):
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ora aggiungiamo quest'altro codice all'interno del body della pagina, dove vogliamo compaia la nostra flash gallery:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Screenshot della gallery:
Fonte:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!