Ho scoperto recentemente il blog di un Flash Designer di nome Andrew Fitzgerald e vi voglio segnalare un suo progetto in fase beta.
Si tratta di una gallleria di immagini opensource basata su Action Script 2 utilizzando Flash8 + XML
La galleria viene strutturata su righe e colonne, una volta selezionata la thumbnail con il relativo nome (l’anteprima dell’immagine), viene “esplosa” visualizzando una descrizione maggiore, sopra le altre che scompariranno in dissolvenza.
E’ stata implementata la possibilità di avere un filtro tra categorie, infatti tramite i pulsanti in alto potremo decidere di visualizzare solo quelli di una specifica categoria.
Analizziamo il file XML:
Configurazione:
<configuration imgbackcolor="0x55a0ff" preloadercolor="0xFCFAF5" rows="3" cols="4" thumbw="160" thumbh="75" border="1" padding="15" oversize="10" expandpos="200" />
- imgbackcolor: Colore bordo anteprima
- preloadercolor: Colore preloader
- rows: Numero di righe
- cols: Numero di colonne
- thumbw: Larghezza anteprima
- thumbh: Altezza anteprima
- border: Spessore cornice
- padding: Spazio tra le anteprime
- oversize: Spessore bordo
- expandpos: Posizione anteprima esplosa
Inserimento immagne
<image title="Titolo di prova" link="http://" thumb="images/image1.jpg" description="Questa è una descrizione di prova" tags="web" />
- image title: Titolo immagine
- link: Percorso di un link esempio htpp://miosito.it
- thumb: Anteprima immagine
- description: Descrizione
- tags: Tag associata all’immagine
In seguito farò qualche implementazione, fino ad allora divertitevi a personalizzare questa fantastica galleria di immagini opensource.
evvai Julius! un altra fantastica risorsa!
grazie!
Mitico Julius!!!
Sei un maestro!!!
Non finirò mai di ringraziarti…
grande
Maestro……..mi sapresti dire come modificare la dimensione dell’immagine esplosa
grazie grazie grazie
@TUTTI grazie mille
@Paolo Ciao non ho avuto tempo ancora di vedere il codice bene, ma penso sia una cosa da impostare da file XML…oppure dai file .as
appena ho tempo ci darò un occhiata
ciao
grazie Julius anche solo della risposta
Ciao Julius, l’ennesimo complimento intanto…
Poi volevo chiederti una cosa, la galleria mi piace molto, ma vorrei adattarla. Praticamente vorrei aggiungere un elenco di clienti e fare in modo che cliccando su ogni cliente si attivi la serie di thumb relativa (per capirci il “risultato” che c’è ora nel tutorial). A grandi linee, come potrei strutturare tutto l’ambaradan?
Di nuovo qua… sei diventato un punto di riferimento! (anche se non mi hai più risposto in merito alla collaborazione di cui t ho accennato x mail! :’( ma sei incasinato e me l’hai detto!) La gallery al 90% l’ho formattata come desideravo, mi resta solo una cosa. Per caricare dal thumb l’immagine completa nell’swf anzichè nel browser posso procedere “normalmente”, cioè come caricherei da xml? Oppure (idea 2) come gestire le dimensioni del thumb? (x caricare casomai direttamente TUTTO il jpg che mi serve)… intanto grazie…
Ciao si tanto per cambiare sono incasinato…eheh
Comque penso potresti sia inserire le thumb da file XML che cercare di effettuare un resize delle foto, se non ricordo male questa galleria carica le immagini però diciamo a coordinate (0.0) si dovrebbe vedere se è possibile ridimensionarle nel clip…
Non ho ancora avuto tempo di analizzare la galleria a pieno…
1) thumb da xml: quindi “gestisco” quello che nell’xml è “link=”IMG-01.jpg” ” e lo carico in pixgal.fla?
2) nel clip penso bisogni intervenire sui file .as, in uno dei pix*.as (forse piximage.as. Questa soluzione non mi dispiacerebbe, perchè penso con un po’ di lavoro si riesca a ottenere un simil-lightbox (il sito è tutto in flash). Ma come fare?
ps: quindi collaboration niente? avremmo già un paio di cose da chiedere…
Ma sai che non ricordo la tua mail riguardante una collaborazione?
Purtroppo ne ricevo tante e scusami se non ricordo…
Non ti preoccupare, è normale, te la rimando subito…
appena inviata alla tua casella di gmail
Ciao Julius, piacerebbe anche a me poter personalizzare questa splendida galleria. In particolare settare
- la maschera del thumbnail su particolari punti dell’immagine (per es: se l’immagine raffigura una persona nella sua interezza vorrei che nell’anteprima si vedesse solo la testa)
- dimensioni del thumbnail esploso
Grazie per la disponibilità
a presto
mau75
in piximage.as in questa parte dello script:
public function expand():Void { // espande il cazzo di thumb???_gallery._mode = "expanded";
var pos:Array = [(_gallery._grid._width/2)-_thumbdim[0], (_gallery._grid._height/2)-_thumbdim[1]];
var esay:String = 'easeOutQuint';
var delay1:Number = 0;
var times:Number = .7;
var lk:String = this._link;
var container:MovieClip = this.thumb_mc;
var mask:MovieClip = this.mask_mc;
var bw:Number = mask._width*2; //*1
var bh:Number = mask._height*2;//*2
*1 incrementa la _xscale con onrollover sul thumb una volta aperto
*2 incrementa la _yscale con onrollover sul thumb una volta aperto
…spero possa servire a qualcuno! Però ancora non riesco a rispostare il thumb verso il centro del _mc! Serve solo x l’apertura!
ops… scusate x la 1° riga commentata… sorry!!! (era un momento di sfogo!)
auhauh bellissima la lascio per i posteri
e bravo per condividere i tuoi esperimenti…
argh, no ‘tte prego!!
sempre in piximage.as per gestire la x e la y delle thumb cliccandole la prima volta nella griglia:
var pos:Array = [(_gallery._grid._width/XXXXXX)-_thumbdim[0], (_gallery._grid._height/XXXXXX)-_thumbdim[1]];praticamente sostituendo alle “XXXXX” il numero x cui dividere (bisogna provare 1 po’) si modifica la posizione relativa. Penso siano soluzioni un po’ “maccheroniche” (e sicuramente ce ne sono di più “flasher”!) ma x me hanno funzionato bene! E’ da risolvere solo il problema che ingrandito il “thumb” l’area sensibile col rollover resta quella di prima…
spero sia tutto chiaro…
Ziociro grazie per le info. Io però vorrei definire le dimensioni dell’immagine espansa dopo il clik sulla miniatura , e non al rollover.
grazie cmq
lo so, così come dici era più “funzionale”, ma sono giorni che sto impazzendo dietro ai vari .as. Vedila così, in questo modo hai il preview + la didascalia e, se vuoi, ingrandisci la thumb al rollover… poi sicuramente si può fare meglio!!
‘orca l’oca… ho visto ora… non va… sigh e bi-sigh!! non va perchè la coordinata che acquisisce così non è assoluta ma relativa in base alla “row” del thumb, e quindi + in basso è il thumb che clicchi + in basso va… san julius aiutaci tu!!!
Ciao Julius! Intanto ti “avviso” che ti vorrei citare nell’ “inspiration” del futuro sito, spero non ti crei problemi… poi però… non volevo disturbarti di nuovo, ma non so dove sbattere la testa! Ho risolto i problemi x centrare i jpg, riuscendo ad avere un thumb + grande. ora il problema è il preload, perchè caricando tramite getBytesTotal e getBytesLoaded ottengo solo un antiestetico 99% seguito dal mio swf… come ovviare? Ho notato che simulando il DL in locale lui carica già le thumb nel primo frame, nonostante non ci siano, quindi carica tutto già col preload, e non dopo come dovrebbe essere…
Scusate a tutti, anche io sto usando la galleria, per posizionare la thumb ingrandita come volevo ho usato:
public function expand():Void {_gallery._mode = "expanded";
var pos:Array = [(0)+_thumbdim[0], (20)+_thumbdim[1]];
e sembra funzionare , cioè dentro le parentesi gli do x e y assolute aggiungendo ovviamente la size della thumb.
non so se vi sarà utile
ciao a tutti
grazie Lucbord
dopo provo e ti faccio sapere
Mau75
Scusate…ma perchè se importo la galleria nel formato swf dentro ad un altro swf utilizzando un mc vuoto e il loadMovie, quando creo il file da flash funziona, ma quando poi lo richiamo in una pag html non si vede più nulla???
Grasias!
Nessuno è in grado di dirmi dove agire per modificare le dimensioni della thumb eplosa?
Grazie anticipatamente
Mau75
@michele penso sia un problema di percorsi leggi qui _lockroot: a cosa serve? Come funziona?
@Mau75 leggi sopra il commento di LUCBORD
Secondo voi è possibile ricreare quell’effetto di mouseover con un javascript?
si si potrebbe fare chissà se c’è qualcosa sul web…
a me assomiglia anche all’effetto Lightbox mm forse no… ^_^
Ciau julius, forse mi sono spiegato male. Non intendo l’effetto zoom al momento del click sull’immagine, ma più semplicemente quell’inspessimento del border quando passo il mouse sopra la thumb.
Ho cercato tutto ieri, ma non ho trovato nulla che potesse aiutarmi, mannaggia..
Ma se al posto di ingrandire le foto volessi al click mandare a una pagina in blank?? chiedo aiuto perchè è 4 giorni che ci metto le mani sul codice ma non ho risolto molto.
Julius facendo come suggerisce Lucbord si ottengonon solo delle variazioni della posizione del thumb..non della dimensione dell’esploso..
Magnifica galleria, l’ho utilizzata sul mio sito… http://www.imaginepaolo.com
Grazie
Non riesco ad aprire il fla, potreste mandarmelo via email? Grazie infinite…