Image Scroller in tutte le direzioni
Ecco un piccolo script in Flash, che ci permette di visualizzare un’immagine in tutte le direzioni, destra sinistra, su e giu per intenderci, seguendo il mouse con effeto frizione.
Il codice ActionScript è molto semplice, in poche parole tramite le coordinate delle ascisse (x) e ordinate (y) l’immagine viene spostata con effetto decellerato nella posizione in cui va il cursore.
Per l’esempio ho usato un immagine della fortunata serie televisiva Heroes
Le variabili che possiamo gestire per avere una velocità o frizione diversa sono speed e friction che trovate nel evento onClipEvent del clip filmato point
Scarica il sorgente
Guarda il Tutorial
Letture Consigliate per File
-
L'uomo che ha inventato il futuro
Prezzo: EUR 19,90
Promozione: EUR 16,91 -
Facebook la Storia di Mark Zuckerberg
Prezzo: EUR 19,90
Promozione: EUR 16,91 -
Larry & Sergey, le menti di Google
Prezzo: EUR 18,50
Promozione: EUR 15,72 -
Nella testa di Steve Jobs
Prezzo: EUR 9,50
Promozione: EUR 8,07
Articoli simili FileFlashHeroesLinksSviluppoTelevisioneTutorial
Autore: Giuliano Ambrosio
Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.
67 Commenti
Scrivi un Commento
Contributor
Stefanelli
10 Indispensabili Consigli SEO per Web Designer Freelance
Oggi vediamo alcuni indispensabili consigli SEO per migliorare la visibilità dei siti web o ancora meglio degli  articoli, con lo scopo di migliorare la predisposizione all’indicizzazione dei nostri progetti web sui motori di ricerca. Ormai anche il Web Designer, soprattutto se è ha intrapreso la carriera da Freelance, deve assolutamente conosce alcune nozioni base della SEO. [...]
Rigato
Path: Alla scoperta del Social Network Esclusivo
Come ogni giorno, mi ritrovo a girovagare per il web: news dal mondo, articoli di nuovi o aggiornamenti social, altro vip che si cancella da Twitter… solita routine, quando ad un tratto vengo attratto dalla notizia di un nuovo Social Network super esclusivo. Già avevo sentito parlare di Path, ma non so per quale strano [...]
Gallo
Lo Shock Marketing nel 2012 con LUSH + [Video Shock]
Sono sempre troppo poche le campagne creative che puntano a sensibilizzare sulla causa animalista, contro le violenze e i test sugli animali, eppure quelle che hanno colpito di più l’immaginazione sono scolpite nelle coscienze di ognuno come segni indelebili. Tra tutte, una delle più meritevole degli ultimi anni è quella dell’azienda inglese LUSH, che ha [...]
Donno
Christophe Huet: Quando il Fotoritocco Diventa Surreale
Christophe Huet è un fotografo specializzato nel fotoritocco digitale, che divide facilmente le opinioni del pubblico, in quanto sappiamo benissimo che esistono due distinte correnti di pensiero. I primi, puristi della foto per i quali la manipolazione è da pena di morte, e i secondi, gli artisti del fotoritocco come Christophe che del fotoritocco hanno [...]
Guide In Evidenza
Usare un Metodo di Lavoro Efficace
Responsive Web Design: I Migliori Tutorial & Risorse
Progettare e realizzare un layout grafico per iPad
Progettare un Layout Grafico che funzioni
Facebook: Creare una Pagina Personalizzata
Creare un layout per iPhone: Trucchi e Consigli
Creare un Blog Popolare partendo da zero
Video Tutorial Adobe Photoshop
Il Meglio del Blog
I love WordPress - JuliusDesign P.IVA 10079630017 - Tutti i contenuti sotto Licenza Creative Commons - Advertise - Contatti - Policy
The advertisement is handled by BlackGeek Ltd
carolina
14 novembre 2007
cè un modo perchè all’ inizio sia fermo e si cominci a muovere solo al passaggio del mouse?
Julius
14 novembre 2007
Ciao carolina,
Entra nel codice AS [tasto rapido F9] seleziona il clip “point”
poi prova a cambiare l’evento
onClipEvent (enterFrame)in
onClipEvent (mouseMove)ovviamente devi fare delle piccole modifiche ai parametri di movimento che citavo nell’articolo.
saluti
nikopolidis
14 novembre 2007
molto utile per le immagini panoramiche :) c’è un qualche modo per rendere ferma l’immagine con un clic o qualcosa, dopo che questa la si inizia a muovere? :)
//Nikopolidis
Julius
14 novembre 2007
Usando onClipEvent (mouseMove) come dicevo a carolina, l’immagine viene mossa solo quando il mouse si muove sopra il filmato flash, ovviamente si devono settare bene i parametri di frizione…
gipris
14 novembre 2007
Julius ma si muove un po’ troppo lentamente… per dire: è un po’ floscio sto movimento. Per renderlo più scattante?
Rosario
14 novembre 2007
Salve sono un frequentatore del sito e so che lei sa gestire software come flash. Volevo esporle il mio problema perche sui forum non sanno rispondere ecco il problema:
Io da poco utilizzo flash mi sono cimentato in una presentazione solo che essa non viene centrata dal browser ad esempio mettiamo caso che l’utente utilizza firefox il movie viene caricato in basso a destra questo vale per altri browser quindi in conclusione io vorrei adattare la presentazione flash al browser per far si che essa risulti sempre centrale come posso fare! Grazie
Julius
15 novembre 2007
@gipris ora è più veloce…
@Rosario ciao guarda se questo tutorial fa a caso tuo Stage Resize in Flash
Rosario
15 novembre 2007
sei un drago!
carolina
19 novembre 2007
grande julius mille grazie
Julius
19 novembre 2007
di niente :P
cerry
21 novembre 2007
ciao julius volevo kiederti una cosa:
se io ad esempio volessi mettere tre o più bottoni agli angoli o ai lati dell’immagine e renderli visibili spostando il cursore verso tali lati dell’immagine è possibile?
io ho provato creando altri 4 tracker(uno per ogni bottone con istanza propria) e mettere l’azione del tracker principale a questi quattro(duplicandola e modificandola) ma non mi viene nulla….
ti Chiedo disperato aiuto
e grazie
Julius
21 novembre 2007
Puoi inserire 4 aree sensibili come pulsanti trasparenti con una freccia sullo stato sopra…
Guarda l’esempio
Alberto
13 febbraio 2008
Julius, non si potrebbe avere il caricamento dell’immagine e la velocita’ dello scrolling da file esterno xml?
Ti mando un link a:
http://www.yofla.com/flash/flash-zoomer/
per una cosa simile alla tua e freeware, ciao ciao.
Julius
13 febbraio 2008
Vedo di fare questa implementazione, ottima segnalazione se riesco ci scrivo anche un articolo sul link che mi hai segnalato
raphael
5 marzo 2008
Ciao Julius,
si potrebbe avere uno scrolling di un mc? e in che modo?
ti ringrazio in anticipo
Julius
5 marzo 2008
Intendi uno scrolling verticale di un mc?
Ti segnalo questo link http://flash.html.it/movie/lista/8/scrolling/
raphael
6 marzo 2008
ho realizzato un movieclip visto in parte per mezzo di una maschera dove internamente ci sono tanti altri mini mc, vorrei poter muovere il mc mamma con quell’effetto senza pulsanti.
Alberto
6 marzo 2008
Apprezzo molto il tuo sforzo per fare queste opere d’arte, la mia richiesta, se e’ possibile era quella di poter caricare una immagine da file esterno con un file xml e di poter mettere immagini anche di diversa grandezza rimanendo sempre nei margini stabiliti. Non sono un programmatore e non utilizzare il macromedia 8 quindi qualsiasi operazione per me rimane molto difficile. Ti ringrazio anticipatamente e come ripeto anche con gli amici, sei un grande.
sandro
7 marzo 2008
Ciao Julius,
ho un di 1888 x 1600 con vista di una casa. vorrei navigare questo ambiente partendo dall’angolo in alto e non dal centro.
ti ringrazio
sandro
Julius
7 marzo 2008
@sandro ciao
da progettazione sposta il clip mc_Image (mettiti la lente a 50% da poter vedere bene lo stage completo) in diagonale in basso a destra…
in questo modo il clip si posizionerà partendo dal angolo in alto a sinistra…
alberto
8 marzo 2008
Apprezzo molto il tuo sforzo per fare queste opere d’arte, la mia richiesta, se e’ possibile era quella di poter caricare una immagine da file esterno con un file xml e di poter mettere immagini anche di diversa grandezza rimanendo sempre nei margini stabiliti. Non sono un programmatore e non utilizzare il macromedia 8 quindi qualsiasi operazione per me rimane molto difficile. Ti ringrazio anticipatamente e come ripeto anche con gli amici, sei un grande.
Sly
17 marzo 2008
Ciao julius trovo molto utile il tuo sito infatti appena ho l’occasione lo segnalo nei vari 3d nel forum di html.it … scrivo relativamente a questo tutorial vorrei infatti realizzare una cosa di questo tipo http://www.thephb.it/thephb.html il mio problema è che vorrei centrare mc_image sullo stage e quando il mouse va verso dx mc_image si dovrebbe spostare verso sx di 20 px tipo .. se il mouse va a sx mc_image si dovrebbe spostare verso dx di 20px (mc_image è + piccolo dello stage ) ed è registrato al centro… questo è il cod dove sto lavorando
#include “mc_tween2.as”
//
var mouse:Object = new Object();
_global.MovieClip.prototype.onMouseMove.mouse = _global.MovieClip.prototype.onEnterFrame=function () {
fallow();
var Mypic:Number = 1;
var S:Number = 5;
var Xpos:Number = Stage.width/2;
var pos:Number = -512;
var T:String = “easeoutexpo”;
mc_Image.hitTest == true;
mc_Image.alphaTo(100, S, T);
if (_xmouse>=pos && _xmouse<=Xpos) {
mc_Image.Xpos = mc_Image.tween(“_x”, (_xmouse*(mc_Image._width-Xpos)/Xpos)*Mypic, S, T);
//mc_Image.Ypos = mc_Image.tween(“_y”, (-_ymouse*(mc_Image._height-Ypos)/Ypos)*Mypic, S, T);
updateAfterEvent;
}
};
Mouse.addListener(mouse);
stop();
qualche consiglio… :o) Grazie!
Julius
17 marzo 2008
il concetto è lo stesso scarica il .Fla
sly
18 marzo 2008
ciao e grazie per la risposta ho risolto il problema ora ne ho un’altro non riesco a bloccare l’immagine che scorre io vorrei che dopo 20px verso dx o sx si blocasse.. questo è il cod.. hai qualche consiglio..
immagine_mc._x = Stage.width/2
movieh = 400;
speed = 12;
immagine_mc.onEnterFrame = function (){
xpos = _root._xmouse;
xpos = xpos-(movieh/2);
this._x = this._x-(xpos/speed);
}
Joe
12 aprile 2008
Ciao Julius! Complimenti davvero per il tuo lavoro. Sei un punto di riferimento soprattutto per chi (come il sottoscritto) di actionscript capisce poco…
Volevo usare questo tutorial per una mappa di un sito.
A dire il vero è tutto pronto, ma quando faccio caricare l’swf nel mio mc vuoto del sito in questione mi accorgo che lui adegua automaticamente l’area sensibile a tutto lo stage del sito in cui è richiamato e non mantiene le dimensioni che imposto io nel fla scaricato da te.
Come posso risolvere?
Julius
13 aprile 2008
Leggi questo articolo _lockroot
Joe
16 aprile 2008
Grazie J.
C’è un piccolo problema con il sito e magari potresti indirizzarmi.
Ho inserito sia la mappa (x localizzare il ristorante nella città ) usando questo tutorial, che la lightboxv2.
In locale vanno entrambi, mentre quando faccio l’uppload del sito va solo la lightbox e la mappa non la carica.
Ho rispettato la posizione dei file js indicata nei due tutorial, ma mi è venuto il dubbio che ci possano essere dei conflitti…
Però la cosa strana è che in locale tutto funzioni…
Hai qualche suggerimento?
Joe
17 aprile 2008
Julius porta pazienza ma non riesco a risolvere il problema… puoi dirmi se ti risultano conflitti?
Joe
17 aprile 2008
Scusa ancora per la rottura…
Tnx
Julius
19 aprile 2008
Ciao mi scrivi un link al tuo progetto online?
Joe
21 aprile 2008
Grazie!
Allora:
abbiamo inserito tempo fra su uno spazio ftp una versione di prova incompleta in cui però va tutto…
http://www.mc-soluzioni.com/claudio/greppia/flash/home.html
mentre inserendo gli stessi contenuti nello spazio del sito la mappa non va
http://www.ristorantegreppia.com
abbiamo riscaricato tutto il sito e in locale funziona…
forse è per come abbiamo organizzato le directory?
Tnx
Julius
21 aprile 2008
a me funziona correttamente anche nel secondo link =)
Joe
22 aprile 2008
Cavoli… bella notizia.
Ma che browser hai usato per provarlo?
Io uso:
safari 3.1.1
explorer 7.0.5730.11
parlo sempre della sezione in flash (quella in html non mi da problemi).
Grazie!
Come hai visto ci sono 3 elementi fatti seguendo i tuoi tutorial…
:-)
Julius
22 aprile 2008
Ho usato FF e IE6 e 7
Si ho visto =)
marco
23 aprile 2008
ciao Julius,
se risolvi anche questa mi faccio un tuo busto in bronzo e me lo metto sul camino.
vorrei che ci fosse nell’area centrale dello stage una “zona franca”.. cioè che l’onMouseMove funzionasse solo se muovi il mouse verso l’esterno. in modo che se ci sono bottoni o altro che accadono al centro li puoi cliccare senza che si muova tutto.
non so se mi sono spiegato ammodo.
marco
23 aprile 2008
naturalmente grazie! se non ci riesci faccio un pupazzo a forma di julius e lo do in pasto al cane!
Julius
23 aprile 2008
@marco pui creare su un livello superiore un clip filmato
e al passaggio con il mouse sopra poi impostare la tween rallentata o dare un altro effetto
marco
23 aprile 2008
ecco. e ora mi tocca farti il busto???
Julius
23 aprile 2008
Mi sa che ti tocca…
helen
25 aprile 2008
Ciao
noto con piacere che finalmente potrei trovare qualcuno disposto a risolvere i problemi in flash.
devo realizzare una galleria immagini come in questa http://www.erwinolaf.com/. Ho risolto lo zoom ma adesso vorrei che la foto fosse navigabile come nel link.
Puoi aiutare anche me?
helen
25 aprile 2008
Ciao julius
vediamo se puoi risolvere anche il mio di problema. Devo realizzare una galleria immagini tipo questa http://www.erwinolaf.com/. ho fatto lo zoom ma adesso vorrei che quell’immagine fosse navigabile.
puoi aiutarmi?
grazie
Julius
28 aprile 2008
In pratica viene caricata in un altro clip la stessa immagine ma ad alta definizione
nella tua galley puoi inglobare questa applicazione facendo caricare l’immagine ad alta, navigabile…
marco
1 giugno 2008
ciao Julius.. abbi pazienza. io ci ho provato ma non ne sono venuto a capo… come faccio a creare su un livello superiore un clip filmato che quando ci passi sopra non si muove l’immagine?
genny
4 luglio 2008
si può gestire anche la profondità , cioe esiste editare l’asse z?
o si può fare zoommando quando il cursore si avvicina all’estremità dell’asse delle x cioe all’estrema dx o sx!!
grazie mille e complimenti sei un mostro
genny
4 luglio 2008
si può gestire anche la profondità , cioe esiste editare l’asse z?
o si può fare zoommando quando il cursore si avvicina all’estremità dell’asse delle x cioe all’estrema dx o sx!!
grazie mille e complimenti sei un mostro
cioè nn so se sono stato chiaro ma si può dare l’effetto di profondita al passaggio del mouse cioè tipo questo stage:http://84.ufc.com/
grazie mille
genny
4 luglio 2008
il sito che citavo prima
Giuliano
9 luglio 2008
Caro Julius,
ho apprezzato moltissimo questo tuo tutorial, stavo cercando una cosa del genere da tempo.
Come si può rallentare lo scrolling? secondo me va un po’ troppo veloce.
grazie anticipate.
Julius
9 luglio 2008
cito da articolo
“Le variabili che possiamo gestire per avere una velocità o frizione diversa sono speed e friction che trovate nel evento onClipEvent del clip filmato point“
Aldo
13 luglio 2008
Julius secondo me Giuliano si riferiva all’altro sorgente contenuto nel file zippato del tutorial.
In quel caso per modificare la velocità dello scroller basta modificare il parametro S della tween :D
Giulian
23 luglio 2008
Ciao caro Julius,
Complimenti per il tuo sito-tutorial!
mi servirebbe un chiarimento, vorrei poter bloccare la navigazione ai bordi dell’immagine.
Grazie !! ;-)
Julius
23 luglio 2008
Non si blocca gia ai borsi dell’immagine?
Giulian
24 luglio 2008
a me no. in tutte e due le versioni presenti nello zip. Ma sto utilizzando la ‘old_image_scroller’, potresti darmi una mano? Grazie grande Julius.
Julius
27 luglio 2008
Con la old in effetti hai quel problema con la versione nuova no..
Marco
25 agosto 2008
ciao Julius,
splendito tutorials, complimenti.
Ma ti volevo chiedere: se volessi avere due (o più) mc che si basano sugli stessi script, senza doverli caricare più volte, ma con la velocità di reazione allo spostamento xy del mouse diversa, come si potrebbe fare??
Poi un altra cosa, dal momento che il mc è più piccolo dello stage, come posso creare una area di validità dello script oltre la quale i mc ritornano alla posizione di partenza??
Ti ringrazio in anticipo, sei un grande!! Marco
neapolis
30 ottobre 2008
Ciao Julius,
vorrei utilizzare Image Scroller ma con background color del documento nero.
Stranamente in anteprima l’immaggine non compare.
Praticamente scompare sotto allo sfondo nero del documento.
Come posso fare?
neapolis
3 novembre 2008
Ciao Julius, nessuna nuova x me? Ho bisogno di un aiuto per creare uno background colorato. Grazie
Stefano
8 gennaio 2009
Ciao Julius,
è possibile fare in modo che non passando il mouse sopra l’immagine, se ne carichi un altra?
E per fare in modo che le immagini siano cliccabili come devo fare?
Grazie
edgen
27 aprile 2009
Ciao Julius mi hanno aiutato moltissimo i tuoi tutorial!
Volevo chiederti come posso convertirlo in AS3?
Ciao e grazie!
Barbara
20 maggio 2009
si anch’io volevo chiederti la stessa cosa
Julius
21 maggio 2009
@edgen: Non vi è un modo automatico, si devono cambiare tutte le classi e le istruzioni, non è semplice se non si ha dimestichezza con AS3
Barbara
21 maggio 2009
non sai dove si potrebbe trovare la stessa cosa con il tutorial in as3?
Julius
21 maggio 2009
@Barbara: sicuramente trovi qualcosa su FlashDen.net però è a pagamento…
I file sono di alta qualità e costano pochissimo
Alberto M
22 settembre 2009
Non si potrebbe caricare l’immagine dall’esterno senza essere inserita nel sorgente?
AlbertoM
19 novembre 2009
Al posto di un immagine si potrebbe caricare un file flash (swf).
Sei grande Julius aiutami per favore mi serve veramente.
Davide Salvadori
4 marzo 2010
Ciao Julius, ciao a tutti, questa utility è grandiosa…grazie julius, io l’ho usata moficiando il codice solo sull’asse delle x per avere una sorta di portfolio scorrevole. Nel mio caso l’uso diventa quello di contenitore di bottoni (o sottocategorie di un portfolio). Il mio problema avviene quando carico un swf su un livello soprastante, e alla chiusura dello stesso, il mio SWF scorrevole (file di questo tutorial) si blocca e non è più sensibile al mouse.
Sono disperato…si non sò che inventarmi…qualche prezioso aiuto??
grazie a tutti, grazie julius!
francesco
24 novembre 2010
ciao
esiste xml driven?
patrick
7 gennaio 2011
Scusate ma come faccio a cambiare l’immagine.Sono ancora inesperto e vorrei imparare.
Grazie mille