Flash CS4 - galleria con effetto lente ingrandimento...

[Glorifindel]

Vorrei realizzare una galleria fotografica in Flash affinchè funzioni grossomodo in questa maniera:

sotto avrei le thumbnail dei vari screen, sopra l'immagine visualizzata in quel momento e come passo il puntatore sull'immagine mostrata ho un effetto lente d'ingrandimento a lato dell'immagine principale.

Per rendere l'idea, vorrei avere questo effetto:
http://store.nike.com/index.jsp?country=IT&lang_locale=it_IT#l=shop,pdp,ctr-inline/cid-300/pid-252635/pgid-252637

quando passate sull'oggetto, si vede a destra lo stesso ma ingrandito.
Sto studiando come fare tra actionscript e la funzionalità delle maschere (in particolare, il manuale che uso mi consiglia di applicare una maschera del colore dello sfondo che copra l'immagine ingrandita e ne lasci intravedere solo una parte da un "buco" nella maschera. Tale buco si sposta al muoversi del mouse sull'area del "portrait" più piccolo, ovviamente).

L'unica cosa che non mi riesce propriamente bene è associare tramite actionscript, la funzione di spostamento del "particolare dell'immagine" associandola al movimento del mouse.
Cioè, riesco a farlo con delle frecce di spostamento nelle 4 direzioni, ma sarebbe più funzionale associare direttamente il movimento a quello del mouse come mostrato nel link dello store Nike.

Suggerimenti?

[Amiag]

Devi aggiungere un listener per il movimento del mouse che ti riposiziona la maschera.


stage.addEventListener(MouseEvent.MOUSE_MOVE, repositionMask);

function repositionMask(ev:MouseEvent){
mask.x = ev.localX;
mask.y = ev.localY;

}


o qualcosa del genere ...

[Suppa]

AS2 o AS3 ?

E' comunque abbastanza complicato.
Per spostare la lente di ingrandimento devi sempre recuperare le coordinate del mouse Xmouse e Ymouse e fare in modo che il clip di "anteprima" sia sempre centrato a quelle coordinate.

tipo in AS2

mc_img_grande.onRollOver = function(){
mc_lente._x = Xmouse;
mc_lente._y = Ymouse;
}

idealmente.. poi bisogna vedere le funzioni come sono correlate tra loro.
Ovviamente il mc_lente deve essere centrato a metà della propria altezza e larghezza.. o prende come 0,0 l'angolo in alto a SX.

EDIT : si perfetto quello di Amiag in AS3 se devi spostare anche tutta la maschera. Ovviamente pero' il listener lo devi correlare solo all'area sensibile che ti interssa in cui si muova la maschera, con un HitTest.

[Glorifindel]

diciamo che come gallery sto seguendo il metodo as2 qui riportato

http://www.actionscript.it/it/index.cfm/tutorials/xml-image-gallery/?keywords=galleria

in modo da precaricarle dall'xml

cercherò di fare in modo che la maschera punti in uno spazio "vuoto" quando il puntatore non è sull'immagine visualizzata in galleria, in modo che non rimanga l'effetto ingrandimento, per poi spostare la maschera alle coordinate del puntatore quando quest'ultimo si muove nell'area della pic interessata.

Il difficile penso sarà correlare il cambiamento di pic nella gallery con il contestuale cambiamento di pic sotto la maschera, in modo che di fatto la barra thumbnails comandi sia lo screen visualizzato che il suo ingrandimento sotto la maschera... bho ci smanetto su un po', ma l'idea mi stuzzica.

Più che altro sono degli amici che fanno rendering che mi hanno chiesto di implementare una cosa del genere su un loro sito dove mostrare i loro lavori e questo effetto per loro sarebbe perfetto.

[Suppa]

diciamo che come gallery sto seguendo il metodo as2 qui riportato

http://www.actionscript.it/it/index.cfm/tutorials/xml-image-gallery/?keywords=galleria

in modo da precaricarle dall'xml

cercherò di fare in modo che la maschera punti in uno spazio "vuoto" quando il puntatore non è sull'immagine visualizzata in galleria, in modo che non rimanga l'effetto ingrandimento, per poi spostare la maschera alle coordinate del puntatore quando quest'ultimo si muove nell'area della pic interessata.

Il difficile penso sarà correlare il cambiamento di pic nella gallery con il contestuale cambiamento di pic sotto la maschera, in modo che di fatto la barra thumbnails comandi sia lo screen visualizzato che il suo ingrandimento sotto la maschera... bho ci smanetto su un po', ma l'idea mi stuzzica.

Più che altro sono degli amici che fanno rendering che mi hanno chiesto di implementare una cosa del genere su un loro sito dove mostrare i loro lavori e questo effetto per loro sarebbe perfetto.

Devi semplicemente far combaciare l'immagine grande sotto la lente con quella di anteprima e mantenere il rapporto sulle assi. Se l'immagine piccola è 600x700 per dire e quella grande 1200x1400 il rapporto è 1:2 e cosi' saranno anche le coordinate X e Y.

Per quanto riguarda l'xml è facilissimo.. basta che lo scrivi bene e sfrutti gli attributi , una volta che l'hai caricato dei dati puoi fare quello che vuoi.
Ti crei un array per ogni tipologia di immagine e decidi tu quando caricarle e come mediante i vari listener.

Se vuoi invece sfruttare l'effetto zoom del sito nike le cose si complicano visto che l'immagine viene renderizzata ogni volta a risoluzione maggiore.

In linea teorica vedo che hai le idee abbastanza chiare, in linea pratica ti si puo' aiutare solo se effettivamente verrai incontro a dei problemi per trovarne la soluzione. Risulta molto piu' semplice in questi casi che parlare a grandi linee.

Comunque visto che sei alle prime armi (ma non troppo) proverei a farlo direttamente in AS3 piuttosto che 2.

[Glorifindel]

lo zoom non lo metto, mi "basta" che ci sia la funzione della maschera che si sposta al muoversi del cursore del mouse sull'immagine doppia sotto :P

[Glorifindel]

Riprendendo un attimo il discorso, secondo voi l'effetto mostrato nello slideshow in home page qui http://www.suprema.net/ è stato realizzato con una funzione di actionscript che abilita un leggero zoom utilizzando delle coordinate, oppure si può creare "graficamente", ovvero facendo un semplice tween tra una immagine a dimensione naturale ed una riscalata e spostata?

Perchè se faccio l'effetto spostamento semplice, ho notato che il tween è sufficiente, basta dare la giusta durata all'animazione; mentre per lo zoom utilizzare la stessa immagine riscalata non va bene, crea un effetto aliasing sulle immagini... e quindi presumo ci sia dello script dietro.

Che ne pensate?
Ovviamente non è più per la gallery che richiama l'elenco di immagini dall'xml eh, è un header ex novo (anche se utilizzerà il richiamo da xml anche questo per ovvie ragioni di peso vabbè).

[Amiag]

Riprendendo un attimo il discorso, secondo voi l'effetto mostrato nello slideshow in home page qui http://www.suprema.net/ è stato realizzato con una funzione di actionscript che abilita un leggero zoom utilizzando delle coordinate, oppure si può creare "graficamente", ovvero facendo un semplice tween tra una immagine a dimensione naturale ed una riscalata e spostata?

Perchè se faccio l'effetto spostamento semplice, ho notato che il tween è sufficiente, basta dare la giusta durata all'animazione; mentre per lo zoom utilizzare la stessa immagine riscalata non va bene, crea un effetto aliasing sulle immagini... e quindi presumo ci sia dello script dietro.

Che ne pensate?
Ovviamente non è più per la gallery che richiama l'elenco di immagini dall'xml eh, è un header ex novo (anche se utilizzerà il richiamo da xml anche questo per ovvie ragioni di peso vabbè).
uno zoom cosi leggero penso sia fatto semplicemente cambiando le dimensioni dell'immagine da script ...

oppure potrebbe essere un filmato pre-renderizzato in qualche altro programma e importato in flash ...

[Suppa]

Riprendendo un attimo il discorso, secondo voi l'effetto mostrato nello slideshow in home page qui http://www.suprema.net/ è stato realizzato con una funzione di actionscript che abilita un leggero zoom utilizzando delle coordinate, oppure si può creare "graficamente", ovvero facendo un semplice tween tra una immagine a dimensione naturale ed una riscalata e spostata?

Perchè se faccio l'effetto spostamento semplice, ho notato che il tween è sufficiente, basta dare la giusta durata all'animazione; mentre per lo zoom utilizzare la stessa immagine riscalata non va bene, crea un effetto aliasing sulle immagini... e quindi presumo ci sia dello script dietro.

Che ne pensate?
Ovviamente non è più per la gallery che richiama l'elenco di immagini dall'xml eh, è un header ex novo (anche se utilizzerà il richiamo da xml anche questo per ovvie ragioni di peso vabbè).

OHHDDIOOO ma Suprema?!?!
Ci hai a che fare? Conosci? :rotfl: :D
O semplicemente prendi spunto?
che roba :D:D

Anyway è uno slide in flash con un xml e img nella stessa cartella:

http://www.suprema.net/images/slideshow.swf

http://www.suprema.net/images/slideshow/album1/lg/001.jpg
ecc , sono un bel po'.

L'effetto è puramente via AS, un pan e un size di poche percentuali.
Nulla di che ma fatto bene.

[Glorifindel]

A che fare no, so che è conosciuta nel settore...

come avevo accennato, ho due amici architetti che hanno un paio d'anni più di me... sono dei giovani 27enni; uno in particolare è specializzato nei rendering, l'altro lavora a tempo pieno in uno studio conosciuto qui su Milano. Insomma hanno un certo progetto di crescita professionale e stavano pensando ad un sitarello per pubblicizzarsi un po' il lavoro. Sono loro che mi hanno indicato il sito di Suprema e gli effetti da replicare.

Ora, io sapendo un po' di html+css e sapendo usare alcuni cms ho fatto altri "lavoretti" per altre persone, loro li han visti e sono partiti a 1000 puntando alle animazioni e ad un sito animato :fffuuu:

Siccome poi non vogliono spendere tanto e hanno una necessità di aggiornare abbastanza spesso il sito con i loro lavori, stiamo provando a gestire la cosa tra di noi. Ma mi sa che il supporto di un professionista del settore sarebbe più indicato; ovviamente devono capire che ha il suo costo giustamente, soprattutto se vogliono cose particolari customizzate (e ti assicuro che le vogliono :D).
Se no mi devo rompere la testa io, come d'altronde sto cercando di fare, tra il manuale Flash CS4 di Feo-Rotondo che ho preso per l'occasione e le varie esercitazioni pratiche con actionscript di volta in volta.

Mannaggia a me e quando ho detto sì... vabbè almeno imparo qualcosa di nuovo.

[Suppa]

ho capito Glori :)
ci son passato anche io eheh e non si finisce mai :D

Suprema li conosco perchè sono della mia città, e nel sito ci sono vari lavori per architetti che conosco o di cui sto finendo il sito.

Anyway, riguardo ai tuoi dilemmi...
senza sbattere la testa contro il muro.. ti possiamo venir in aiuto quando ci poni delle domande specifiche, tipo incollandoci il codice che stai sviluppando nei punti in cui ti areni.
O aiutandoti a trovare le funzioni / classi giuste.
Perchè ribadisco che a livello concettuale è facile dare aiuto.. ma tra il dire e il fare, c'e' sempre di mezzo l'actionscript :D

[Glorifindel]

ma tra il dire e il fare, c'e' sempre di mezzo l'actionscript :D

lol quant'è vero :sneer:

adesso m'hanno appena mandato una mail dove c'è il logo da implementare e le direttive per spostare un menù in css allineato all'altezza del logo + sfondo delle voci del menù da rifare :sneer:

uuhh come mi divertirò stasera...

thx per il supporto :D