Ecco un’altra ottima galleria di immagin flash realizzata dal freelancer Lucas Motta: Flash Gallery Opensource
Le immagini vengono prese da un file esterno XML e a seconda della loro dimensione verrà centrata all’interno della galleria.
In alto a destra troviamo un menu con il quale possiamo visualizzare o chiudere le immagini successive.
Andiamo a vedere insieme il file XML
<item>
<title>Laranja e Banana</title>
<thumb>images/laranja_banana_mini.jpg</thumb>
<image>images/laranja_banana.jpg</image>
</item>
-
title: Titolo immagine
-
thumb: percorso assoluto (http://www.dominio.it/foto/julius.jpg) o realativo (julius.jpg) dell’anteprima
- image: percorso assoluto (http://www.dominio.it/foto/julius.jpg) o realativo (julius.jpg) dell’immagine
122 Commenti
stupenda! non vedo l ora di usarla!
Molto molto bella……Grazie Julius!
ciao julius un giorno o l’altro parla di questo gioco online (lo aprite kliccando sul mio nome)
a me piace, è molto semplice e coinvolge tantissima gente….per adesso è solo in inglese francese e spagnolo. magari tu conosci qualcuno disposto a tradurlo e inserirlo in un sito italiano per coinvolgere in massa anke noi dello stivale
Ciao Julius ho un piccolo problema…appena apro il file.fla con Flash 8 mi da un avviso, FORMATO DI FILE NON PREVISTO. Come faccio ad aprirla e utilizzarla?!?
Grazie
@Rocko ciao prova a riscaricare i file, comunque è in versione Flash 8
Grazie Julius ora va!
Una curiosità…mica sai da che parte si cambia il colore rosa dei tastini di navigazione? Io non l’ho trovato…
Ciao julius io ho una domanda, ho studiato un po il codice ma non riesco a risolvere un problema. In pratica se tu noti o provi a cambiare il colore di fondo in flash, noti che resta in ogni caso un rettangolo nero al disotto delle foto che diventa visibilmente fastidioso quando la foto è di dimensioni diverse. Sono riuscito ad intervenire sul colore di questo rettangolo ma non sulle sue dimensioni.
Credo che sia correlato al fatto che all’interno del file vengono richiamate le seguenti classi:
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
questo avviene sul layer as, con etichetta galeria.
Come posso agire sulle dimensioni di questo sottorettangolo nero?
Sotto c’è il codice che gestisce la funzione bitmat, qui cambio il colore a questo rettangolo ma non riesco a cambiare la dimensione, se intervengo cambiando semplicemente i valori di var largItem:Number = 120; e var altItem:Number = 80; agisco solo sulle dimensioni dell’animazione dei tasselli che comporranno l’immagine big.
Puoi aiutarmi?
/////////////////////////////////////////////////
// Apply the Bitmap function on the loaded image //
/////////////////////////////////////////////////
function transforma(mc:MovieClip){
var largItem:Number = 120;
var altItem:Number = 80;
var posX:Number
var posY:Number
var i:Number
/////////////////////////////////////////////////
addTween(menu_mc.bg_mc,{_width:mc._width, time:0.5, transition:”easeOutExpo”});
addTween(menu_mc.botoes_mc,{_x:Math.round(mc._width-menu_mc.botoes_mc._width-10), time:0.5, transition:”easeOutExpo”});
/////////////////////////////////////////////////
var bmap:BitmapData = new BitmapData(mc._width, mc._height, false, 0xF0EFEC);
bmap.draw(mc);
//
var numLargura:Number = Math.ceil(bmap.width/largItem)
var numAltura:Number = Math.ceil(bmap.height/altItem)
var numTotal:Number = (numLargura)*(numAltura)
//
var posXstage:Number = mc._x
var posYstage:Number = mc._y
//
for(i=0; i
Ciao Julius come faccio a dimensionare a mio piacere il rettangolo nero al disotto delle foto?
Riesco a cambiargli colore ma non le dimensioni.
Hai un suggerimento?
thanks
:)
Ciao Julius come faccio a dimensionare a mio piacere il rettangolo nero al disotto delle foto?
Riesco a cambiargli colore ma non le dimensioni.
Hai un suggerimento?
thanks
:)
Lo sfondo è il colore dello stage…ho cambi quello
oppure crei un nuovo livello al fondo…e inserisci un rettangolo del colore che vuoi…
Ciao Julius, purtroppo non mi riferivo a quello, il problema è più complesso, mi riferivo alla possibilità di inserire foto di dimensioni differenti cambiando il colore di fondo o comunque rendendolo trasparente…In pratica, se lo stage resta nero essendo tono su tono non ci si accorge di nulla e tutto funziona perfettamente, ma se provi a cambiare il colore dello stage i cursori funzionano lo stesso benissimo e si adattano sempre alle dimensioni di ogni foto grande, ma nel momento in cui carichiamo foto di dimensioni differenti a quelle del file originale, ci accorgiamo (su fondo stage differente) che resta un fastidiossissimo rettangolo nero a contorno delle foto nuove inserite, un rettangolo (container) delle dimensioni delle foto grandi del tutorial….
Sono riuscito a cambiare colore a questo rettangolo, ma non a renderlo trasparente o ad eliminarlo, credo che centri l’animazione a tasselli di composizione delle foto grandi, forse riguarda l’area in cui si dividono tanti tasselli qunte sono le tumbs, oppure il codice.
Spero di essere stato il più dettagliato possibile, se hai suggerimenti ti ringrazio:)
Grazie
Bellissima..un solo suggerimento o consiglio:
si potrebbe fare in modo che una volta aperta una foto, cliccandoci sopra si torni alla galleria con le thumbnails?
Lo dico perché mi si è fatto notare che per un neofita è poco intuitivo cliccare sul pulsante con la “x” per tornare alla gallery….
Ciao,
non so se sono solo io, ma guardando il tutorial con IE e ricaricando la pagina (REFRESH o F5) non è più visibile la gallery, a meno che non si chiuda il browser e si ritorni alla pagina.
Con Firefox invece funziona sempre e comunque.
Secondo voi, a parte magagne di IE, da cosa può dipendere (ovvero si può correggere dal codice)?
Ciao e grazie :)
ciao! ho ridotto il file in tre colonne e 15 foto, esiste la possibilità di allineare il movie nella parte destra?
grazie :)
@Mao ciao ho notato anche io…penso sia un bag della galleria…
@ameolo si dovresti spostare il mc duplicato da progettazione
Livello thumb fotoramma 11 clip nome istanza hold_thumbs
Ciao julius io ho un help da chiederti:
a me servono le thumb ordinate su 5 righe e 6 colonne ma riesco a modificare solo le colonne;inoltre come predefinisco il font del testo descrittivo dei thumbs? ti ringrazio in anticipo
Fotogramma 10 livello as entra nel codice
linea 79
itensPagina = 36questo parametro indica quante thumb devono essere visualizzate
Per il font vai in libreria [CTRL+L] entra nella cartella #clips e apri desc_mc li trovi il campo di testo da modificare, font grandezza e colore
ragazzi e normale che quando pubblico swf in una pagina html con mi compare la barra di intestazione?
Scusa se te lo richiedo..ma non è possibile fare in modo che una volta ingrandita la foto, cliccandoci sopra si ritorni alle thumbs??
Chiedo perdono, so di averlo già postato…ma visto che non mi hai risposto di “no” io ci riprovo :-)
@simona si è normale quella è la barra dell’autore, sta a te eliminarla
@Alessandro si è possibile, basta che lanci la funziona gia associata al pulsante in alto a destra sul clip che contiene l’immagine grande…
Ma esiste un modo per ridimensionare il tutto o è di dimensioni standard?
Io avrei bisogno di far stare la gallery in uno spazio più ridotto…
Se la scali vedrai le immagini sgranate, invece se la riproporzioni da progetto e codice sarà meglio
grazie julius ma c’è un ultima cosa che vorrei chiederti (non linciarmi)
a me la gallery serve di dimensioni ridotte sono riuscito a risolvere il problema delle thumbs ma nonostante apra immagini piu piccole mi si apre pure lo sfondo nero sotto che eccede come faccio a ridimensionarlo da codice?grazie in anticipo
se ho capito bene inserisci immagini più piccole dello stage?
sarà inevitabile visualizzare lo sfondo nero..
Ciao julius è possibile modificare lo script in modo che invece di caricare l’immagine grande, al release delle immagini piccole, mi vada ad un link impostato dentro al file xml?
Ho provato a modificare lo script ma mi prende un solo link e non quello impostato per ogni immagine mentre i testi e quelle piccole vengono caricate correttamente, dove sbaglio!!!! .
thumb.onRollOver = function() {
addTween(this.small_mc.alvo_mc,{_y:-15, _saturation:100, time:0.5, transition:”easeOutExpo”});
addTween(this.small_mc.desc_mc,{_y:60, time:0.5, transition:”easeOutExpo”, rounded:true});
};
thumb.onRollOut = thumb.onDragOut = function () {
addTween(this.small_mc.alvo_mc,{_y:0, _saturation:0, time:0.5, transition:”easeOutExpo”});
addTween(this.small_mc.desc_mc,{_y:80, time:0.5, transition:”easeOutExpo”, rounded:true});
};
// LINK ESTERNO DA XML
thumb.onRelease = thumb.onDragOut = function() {getURL(thumb.link);
};
qui dovrebbe prendere il link dentro al file xml ma in realtà ne prende uno solo per tutte le immagini.
grazie per la risposta e complimenti per il blog marco
stasera non ci sono :) domani cerco di correggere lo script ;)
Hola, complimenti per il sito in primis… io non riesco neanche a farla funzionare, probabilmente sbaglio qualcosa nel posizionare i vari file…eppure le immagini sono nella cartella corretta.
Mi da questo errore:
**Errore** Scena=Scene 1, livello=tweener, fotogramma=11:Linea 8: Impossibile caricare la classe o l’interfaccia ‘as2.core.LoadManager’.
_global.loadManager = LoadManager;
ciao julius, una domandina (credo semplice) sull’ottima gallery di cui sopra…
è possibile caricarla con loadMovie all’interno di un clip contenitore o funziona solo con load su livelli?… se sì (la prima), m’indirizzeresti ad un tutorial di AS2 che spieghi la classe per caricare swf dentro clip?
come sempre, ti ringrazio in anticipo e spero in una tua risposta…
buona serata
@Joel ciao assicurati di avere caricato la cartella contenente le classi tween per i movimenti via AS
Se il problema persiste lasciami nei commenti un link al tuo progetto che lo controllo online
@never ciao ecco qui _lockroot
grazie per la risposta velocissima, julius (cmq non funge lo stesso nel senso che le dimensioni della galleria sfondano quelle del clip contenitore, ma non importa che vado col loadMovie normale e buonanotte) .
e come da previsioni ora ho un problema ben più grosso che ti spiego:
sto caricando questa galleria in un livello superiore (il film principale utilizza il metodo dello stage liquido, come da tuo tutorial, cioè includendo
#include “lmc_tween.as”
a questo punto, caricando la galleria il resize del filmato principale non funziona più (gli oggetti tween si muovono da una posizione all’altra con un solo scatto, quindi la tween non funziona più bene);
ora, secondo me c’è un conflitto tra “lmc_tween.as”, e le classi importate dal filmato della gallery qui sopra, altrimenti proprio non so (e comunque non sono in grado di risolverlo); se vuoi puoi fare una prova veloce tu stesso e vedrai che va come ti ho detto…
infine spero davvero ti riesca di darmi una buona mano, che altrimenti sono nella c… più totale (mi hanno approvato un progetto che non posso
realizzare, sic!)
in ogni caso ti auguro un buon weekend
Potrebbe essere un problema di percorsi, ma se hai utilizzato _lockroot dovresti avere risolto…
Forse è come dici tu, le classi tween richiamate due volte sia per il resize che per la galleria potrebbero andare in conflitto
ciao julis,
la mia domanda è inevitabile: è possibile in qualche modo risolvere questo conflitto tra le classi (combinarle assieme in qualche modo, ecc)?…
insisto tanto perché il mio problema (come ti ho spiegato) è davvero serio, e devo sbrogliarlo in un modo o nell’altro…
grazie come sempre per il supporto e buona giornata
Ciao Julius, non avevo notato il Path di winzip con le indicazioni circa le cartelle…ci credo che non funzionava, le classi tween erano nella root insieme allo swf :-D
Grazie per l’aiuto, ogni tanto ho la testa fra le nuvole :P
ciao volevo chiederti se hai idea di come si possa passare da una foto all’altr senza dover tornare alla lista di foto iniziale..
Sarebbe carino se si riuscisse a mettere sotto alla foto ingrandita un scroll orrizzontale che richiami le item nella gallery.xml
ne ho visti in giro ma non riesco a modificare gli script per ottenere il riultato finale giusto..hai gia’ provato qualcosa di simile?o hai alternative grazie Nicola
never prova a utilizzare le stesse tween che hai in comune
Non puoi fare altro…nel senso se in tutti e due richiami pippo cerca di richiamarle all’inizio in modo tale di averle gia precaricate prima
@Joel ;)
@nicola ciao non ho ancora provato, questo non essendo un mio progetto non ho studiato molto il codice…appena ho tempo ci do uno sguardo
grazie per l’aiuto, e ti posso dire che con un po’ di ostinazione ce l’ho fatta.
praticamente ho ricominciato tutto da capo, e mi sono reso conto che dopo le prime prove avevo sostituito le cartelle zigo ecc con altre + avanzate oppure obsolete ( ancora non verifico) col risultato disastroso che funzionava o la gallery o tutto il resto…
ora va tutto bene (spero fino alla fine), devo solo capire perché la gall caricata in un mc ‘sfonda’ le dimensioni dello stesso (come fosse un loadm su livelli)… può darsi che devo eliminare questo cod
Stage.scaleMode = “noScale”;
Stage.align = “TL”
/////////////////////////////////////////////////
/////////////////////////////////////////////////
if(Stage.width < 760 ) {
gotoAndStop(“fullsize”)
} else {
gotoAndStop(“galeria”)
}
e lasciarlo solo sul filmato principale…
in ogni caso ti ringrazio di nuovo per il supporto e la disponibilità che dimostri, anche per le domande più ‘sceme’…
buona giornata, e l’ostinazione paga…
Ciao,
un po’ di tempo fa avevo segnalato che la gallery non si vede più quando si ricarica la pagina con IE.
Ho scoperto che il bug non è della gallery ma è un problema legato al SWFObject, infatti utilizzando un altro sistema per visualizzare il Flash non si ha più questo problema (ad esempio usando AC_RunActiveContent.js di Dreamweaver)
Ciao a tutti ;)
ciao julius: riguardo questa gallery avrei bisogno di visualizzare (in un mc a parte) una descrizione più dettagliata sull’immagine ingrandita (per intenderci: alla maniera della gallery fullscreen di josh rame e di altre che ho visto nella tua sez. tutorial); avresti una dritta per modificare il codice al fine di ottenere questo che dico?… io ho provato, ma non sono molto ferrato col caricamento di file xml, e i risultati sono stati un mezzo fallimento. anzi intero.
ti ringrazio in anticipo come sempre e ti auguro un buon weekend.
a presto (spero)
@Mao buono a sapersi grazie per la segnalazione!
@never puoi usare il box che viene usato per l’anteprima dell’immagine e inserire informazioni ulteriori…
ho cpito julius: ma come e dove modificare il codice?…
Dovresti introdurre un nuovo parametro nel file XML
poi la logica di lettura di flash a xml è identica…
ti basterà associare il nuovo parametro a un testo per visualizzare le informazioni più dettagliate
ciao julius: allora, ho creato un contenitore con dentro il tx dinamico per le descrizioni
//cont_descrizione.descrizione_txt
poi ho modificato il codice al blocco di righe BUILD THE GALLERY (88/119 circa, e forse già ho sbagliato), così
// Build the Gallery //
/////////////////////////////////////////////////
function build(pagina) {
var inicio = pagina*itensPagina
/////////////////////////////////////////////////
for (i = 0; i<total; i++) {
thumb = hold_thumbs[“item”+i];
thumb.removeMovieClip()
}
for (i = inicio; i<inicio+itensPagina; i++) {
id = i-inicio;
if(i<total){
thumb = hold_thumbs.attachMovie(“item”, “item”+i, i);
//
thumb.titulo = Galeria[i].titulo
thumb.thumb = Galeria[i].thumb
thumb.image = Galeria[i].image
thumb.descrizione = Galeria[i].descrizione
//
thumb.posX = Math.round((180+padding)*(id%colunas));
thumb.posY = Math.round((120+padding)*Math.floor(id/colunas));
thumb._x = thumb.posX;
thumb._y = thumb.posY;
//
thumb.i = i;
thumb.small_mc.desc_mc.tit_txt.autoSize = “left”
thumb.small_mc.desc_mc.tit_txt.text = (thumb.titulo).toUpperCase()
//
****MIO INTERVENTO***********
cont_descrizione.titulo = Galeria[i].titulo
cont_descrizione.thumb = Galeria[i].thumb
cont_descrizione.image = Galeria[i].image
cont_descrizione.descrizione = Galeria[i].descrizione
cont_descrizione.i = i;
cont_descrizione.descrizione_txt.autoSize = “left”
cont_descrizione.descrizione_txt.text =
(cont_descrizione.descrizione).toUpperCase()
…e ora nel cont_descrizione si visualizza il messaggio della descrizione aggiunta all’xml
Galeria.push({titulo:xmlNodeGeral.childNodes[0].firstChild.nodeValue, thumb:xmlNodeGeral.childNodes[1].firstChild.nodeValue, image:xmlNodeGeral.childNodes[2].firstChild.nodeValue, descrizione:xmlNodeGeral.childNodes[3].firstChild.nodeValue});
}
…ma naturalmente resta sempre la stessa, cioè non si aggiorna con lo show delle immagini grandi.
e ora? ci sono quasi o sono completamente fuori binario?
chiaro che nel secondo caso incomincio a strapparmi i capelli…
grazie come sempre e comunque, e spero ancora in una dritta che mi svolti ‘sto casino…
buona giornata
ciao julius: solo per dirti che ho risolto da solo (mi ci sono rotto un tantino la zucca, ma alla fine ce l’ho fatta)
grazie lo stesso e buona giornata
bene
Ciao Julius!
Un info al volo…questa galleria è utilizzabile liberamente, anche in ambito commerciale?
Ovvero, posso inserirla nel sito di un cliente senza problemi?
Grazie.
Si davide è open…
se vuoi proprio essere sicuro al 100% indica solo l’autore lucas motta
ciao. quando clicco su un’immagine ediventa grande, come posso fare per andare avanti con tutte le immagini in grande e non dover per forza chiudere, tornare alle thumb e selezionarne un’altra? si può fare?
grazie ciao : )
Ciao,
E’ possibile modificare questa gallery in modo che prenda l’xml dinamicamente, ovvero fare in modo che l’xml venga indicato direttamente nella pagina in cui richiamo l’swf invece che all’interno del flash stesso?
In questo modo sarebbe possibile utilizzare più volte la stessa gallery all’interno dello stesso sito senza dover duplicare sempre tutto il flash ma preparando semplicemente xml diversi…
Chiunque riesca ad aiutarmi in questo senso avrà la mia eterna gratitudine ;)
@ilaria si è possibile si deve cambiare un po il codice appena riesco ci provo..
@Mao si è possibile
dove viene chiamato il file xml basta che lo sostituisci con una variabile tipo
_root.urlXML
a questo punto puoi passare un valore dinamico a questa variabile in fase di pubblicazione…
Ok grazie, ci proverò :)