Galleria immagini in Flash: Drag Zoom

- Letture: 3.471

Questa galleria in flash tramite un file XML esterno preleva i vari swf, utilizzati per contenere le varie immagini.

Permette di simulare un effetto zoom inzoom out con il click del mouse e navigare con il trascinamento del mouse.

flash_drag_zoom_in_out.jpg

E’ possbile impostare lo spazio e le colonne della galleria tramite ActionScript, mentre per quanto riguarda le immagini le andremo inserire da file esterno XML

Vediamo rapidamente il file XML insieme:

<article>
<story>filmato1.swf</story>
</article>

In story andremo a inserire il percorso relativo (filmato.swf) o assoluto (http://www.dominio.it/filmato.swf) dell’swf esterno da caricare.

Clicchiamo una volta per effettuare uno zoom, poi cliccando di nuovo possiamo muoverci tra le foto, in seguito cliccando due volte torneremo indietro.

E’ consigliabile inserire delle foto ad alta qualità nei vari swf richiamati, per aver una buona risoluzione in stato di zoom.

) Scarica il sorgente
) Guarda il Tutorial

Fonte [noponies]

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

40 Commenti

  1. Ciao
    GRAZIE! Ottimissima segnalazione
    La cosa incredibile (per me ovviamente ) che dovevo risolvere (dieci minuti fa ) una situzione che richiedeva questo tipo di soluzione (richiesta esplicita del cliente ) e in fretta….
    HIhi “passero'” in rassegna accurata questo blog!
    Grazie ancora e buon proseguimento.

  2. Hihi sisi
    sto vedendo di uscire da alcuni problemi legati allputilizzo pratico.
    Tempo e ci si arrvia penso.
    A me personalmente piace moltissimo, al cliente invece lasciano perlesse come al solito alcune cosette che si danno per scontate.

    Per esempio e’ abituato al click e non al doppio click per zommare l’immagine e pensa che ovviamente tutti siano come lui.
    Poi gli “rimane attaccato tutto al mouse quando trascina le immagini”….
    , ma sono aspetti simpatici anche questi tutto sommato.

    Di base gli piace molto e devo cercare di convincerlo pero’ che non e’ il caso di mettere un book con duecento immagini pero’….
    ma ce la faremo…

    Buon pomeriggio.

  3. Ciao Ale

    Linea 257 commenta con le // o elimina il seguente codice

    thumbs_mc.startDrag();

    Quando sei in fase di zoom per muoverti da una foto all’altra trascina la manina…

  4. Vorrei chiedere a quei due mostri li in cima come hanno fatto a far funzionare questa cosa.
    Io metto un nuovo swf nella cartella poi ci cambio il numero e solo il numero e poi lo cambio anche nel file xml ma non mi esce niente!!!!!!!
    COME SI FA?

  5. Ciao
    lo provo in locale non potendo fare diversamente.
    Quando inserisco nel file xml il nuoco swf si forma un vuoto dove dovrebbe comparire la miniatura da cliccare.
    Puoi mettermi un esempio on line con diversi swf ?
    E magari poi uno zip con tutti i file che hai usato?
    Ciao e grazie.

  6. Ti sembra il caso di passare per una ragazza per aver informazioni su un tutorial?

    La tua irruenza mi ha insospettito, vado a fare un controllo ed ecco la sorpresa IP identici…

    Roberta – Uruk – yari – pallino3

    Ho gli indirizzi IP quindi invece di prendermi in giro cerca di essere maturo quello che sei…..

    ste cose mi fanno andare in bestia…bravo bravo

    Uno fa tanto per aiutare, poi arriva uno che vuole solo prenderti per il culo e sfruttarti bravo bravo e gente come te che avvolte mi fa venir voglia di smettere di aiutatare e dare fiducia al prossimo..

  7. Ok dai vediamo…dimmi gli altri 4 nik che ho trovato con lo stesso IP

    Parte il QUIZ metti le cuffie…puoi usare anche l’aiuto a casa…se mi rispondi ti aiuto..altrimenti…

    ciao

  8. Tu devi essere completamente matto!
    Io ho trovato questo nome gia’ scritto aprendo con questa postazione e non mi sono fatta tutti sti problemi! Non mi puo’ interessare assolutamente chi possano essere gli altri quattro o non quattro nick! Ti ho chiesto un favore ma ne posso anche fare a meno a questo punto! Va al diavolo tu e le tue manie di persecuzione! Io tra due minuti stacco e me ne guardero’ bene dal tornare su questo sito! Cose da matti!

  9. 1. non ho manie di persecuzioni

    2. questo non è un sito è un blog

    3. sei libera di non tornare più su questo blog

    PS: salutami gli altri 6 nani

    by matto

  10. Dai…
    me l’hai fatta inkazzare come un gorilla!
    Siamo anche di piu’ di sette in certi momenti.
    Un po’ comica sta cosa su
    alla fine ti ha chiesto gentilmente,mi pare, dei chiarimenti e nulla di piu’.
    Occhio a certe conclusioni …e’ piuttosto comune l’utilizzo (ovunque si lavori con dei pc ) dello stesso pc o comunque ip ,da parte di utenti diversi…dipende da dove e da cosa fanno quei pc normalmente. Anche un bimbo sa in ogni caso come fare a non fartelo vedere l’ip se quello e’ il problema.
    Che scemenze…

    Piano e rilassati su…

    Buona continuazione .

  11. ciao
    ottimo tutorial
    anche se un po complesso
    a me servirebbe solo la prima parte
    cioe far ingrandire una foto al passaggio del mouse
    o al suo click

    ce un metodo zoom veloce?

  12. Ciao fenix,

    bè puoi utilizzare vari modi, puoi creare questa cosa solo utilizzando Action Scritp oppure facendo delle animazioni su un pulsante nei suoi stati…

  13. ciao, come posso fare in modo che il filmato con tutte le thumbs si centri sempre nello stesso punto?

    grazie

  14. ho visto che non necessariamente si devono usare dei filmati .swf x far si che questo tipo di visualizzazione riesca……..ho provato con delle semplici immagini .jpg e riesce benissimo.
    apparte ciò ti faccio i miei complimenti x il sito ke mi è utilissimo x la realizzazione del mio,ciao!

  15. ciao, posso modificare il numero di immagini che si vedono per colonna ed aumentare le righe?
    e posso diminuire lo spazio tra una foto e l’altra?
    grazie, ciao
    ilaria

  16. Ciao

    primo fotogramma da linea 60, il codice è commentato trovi tutte le variabili da configurare a tuo piacimento…

  17. Molto ben fatto, vorrei inserirlo nel mio sito però vorrei cambiare qualcosina, cioè vorrei un clic per ingrandire e poi di nuovo un solo clic per tornare indietro. Nonchè togliere l’opzione che quando c’è lo zoom in posso scivolare tra le varie foto. Qualche idea di cosa devo togliere e dove?
    tnx

  18. Di nuovo io, allora magari può essere d’aiuto a qualcuno con le mie stesse necessità. Premetto che nn ne capisco granchè ma per togliere l’effetto doppio clic ho tolto alla linea 268 il tag “&& difference<300” anche se probabilmente ci sono molti altri valori gettimer che a questo punto credo si possano anche togliere. Per togliere l’effetto che muove tutta la griglia ho eliminato invece verso la fine:

    my_event.onMouseDown = function() {
    if (this.target.hitTest(_root._xmouse, _root._ymouse, true && this.target._xscale != 100)) {
    fakeCursor.gotoAndStop(2);
    thumbs_mc.startDrag();
    }
    };

    anche qui mi sà che a questo punto ci sono altre cose che posso togliere xkè diventano superflue.
    Qualcuno che mi dà una conferma di aver fatto bene?
    cmq ho notato che se si clicca velocemente su varie immagini dopo non riesce più a centrarsi quando torna indietro con lo zoom out ma và fuori centro. Succede solo se si clicca velocemente su un’immagine, torni indietro e poi di nuovo su un’altra e così via. Si può risolvere?

  19. ok risolto anche l’ultimo problema attivando la riga

    //thumbs_mc.slideTo(0,0,.5,”linear”);//reset parent position to a specific point

    julius sei un grande grazie di aver messo dentro tutte le spiegazioni così anche chi non è proprio ferrato come me può riuscirci. Ora finalmente posso metterlo nel sito.
    PS: l’ultima cosa che voglio provare a fare è impostare lo sfondo nero, se qualcuno sà come fare è il benvenuto :D

  20. Lo sfondo nero è semplicemenente un proggetto vettoriale da cambiare colore dal clip principale thumbs_mc

  21. Ciao Julius grazie per la risposta, si effettivamente lo sfondo nero son riuscito a impostarlo in un attimo poi. Ti mandai un email per chiederti aiuto con altre personalizzazioni un attimo più complicate, fammi sapere se nn l’hai ricevuta altrimenti se nn hai tempo non preoccuparti lo capisco ;)

  22. Cio Julius!
    Volevo chiederti:
    Ho eliminato il codice drag dalla linea 257, ma succede che in ogni caso quando clicco sul primo swf in alto a sinistra e poi doppio clicco per chiuderlo, tutte le immagini si spostano oltre il bordo. Intanto dopo aver eliminato il codice drag, non riesco a riportare le altre immagini nell’area visibile. Mi sapresti indicare il modo per evitare che questo succeda!
    Grazie mille!

  23. Penso sia un bug del autore, in quanto la gestione del clip e del doppio clic potrebbe andare in conflitto appena ho tempo ci do uno sguardo

  24. gianluca

    ciao julius
    sto provando ad inserire all’interno del mio sito questa galleria,
    solo che il mio sito è in dimensione 1024×768
    mentre la galleria ha dimensione inferiore.
    ho inserito una maschera per evitare che il file “drag zoom” coprisse le scritte del sito.
    ora ho un problema…
    quando clicco per ingrandire la foto, invece che ingrandirmela nel riquadro della maschera me lo ingrandisce utilizzando come riferimento la pagina di base.
    questo fa si che mi esco totalmente decentrata la foto.
    come posso rimediare a questo problema???
    grazie

  25. ciao julius, ho un problemino se ricarico due volte la galleria, la seconda votla che ho il load movie mi mantiene in memoria alcune funzioni del precedente caricamente e per esempio lo spostamento da una foto all’altra non funziona più ma funge solo lo zoom out….

    grazie mille

  26. @ alessio: Se inserisci la stessa galleria 2 volte i parametri e nomi istanza vengono duplicati come fosse il richiamo di una…

    Ti conviene richiamarla con un altro nome e in altra posizione

  27. antonino

    cioa julius, ascolta ma dove sono tutte le foto, esempio io voglio che questo effetto si percuota su una sola foto…come faccio?

  28. antonino

    ragazzi domanda facile per voi, io voglio che il mio file al primo click faccia una cosa…ma ala doppio click ne faccia partire un’altre…come faccio?

  29. ciao julius.
    complimentissimi per il blog e per tutti i suoi contenuti.
    spulciando tra i flash tutorial ho trovato questa gallery molto interessante.
    vorrei capirci un po’ di più e ho cercato in lungo e in largo nel sito la continuazione dell’articolo… dove posso trovarlo?
    grazie!

  30. Ciao Julius e complimenti per il tuo blog.
    Sto provando la galleria e volevo sapere se è possibile ingrandire le miniature delle foto e modificare, aumetandola, la spaziatura fra le righe.
    Sono riuscito a modificare il numero e la spaziatura delle colonne, però vorrei ingrandire le miniature…
    Grazie!

  31. Ciao!
    Questo flash è proprio ciò che stavo cercando, ma ho necessità di mettere le immagini direttamente sul flash e non sull’ xml.
    Cosa e dove devo cambiare?
    Grazie mille!

Commenti