effetto menu galleggiante nello spazio

onevision

Nuovo Utente
4 Gen 2012
6
0
0
Ciao, devo realizzare un menù come quello presente nel sito www.aquilanorimondi.it: il testo parte da un punto e poi naviga nello spazio ingrandendosi. Al passaggio del mouse la voce si ferma e si può cliccare.
Conosco poco l'action scrip. Avete dei suggerimenti su come impostare il lavoro.
Grazie per l'aiuto.
A presto
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Ciao e benvenuto sul forum.

Guarda un po se ti piace questo:
http://max400.netne.net/menu-spaziale.swf

Ho visto il tuo esempio e si muove a scatti. Le voci del menu compaiono in modo casuale
ma personalmente non mi piace molto, si ha difficoltà a leggerli.
Ti ho realizzato un esempio soltanto per una voce (in questo momento non ho molto tempo)

Per capire bene lo script che ho usato ti dò prima
il semplice movimento diagonale verso sinistra

Codice:
onClipEvent (load) {
	this._xscale=10;
	this._yscale=10;
	this._x=290;
	this._y=250;
}
onClipEvent (enterFrame) {
	this._x-=1;
	this._y+=1;
	this._xscale++;
	this._yscale++;
	if(this._y >=374){
		this._x=290;
	this._y=250;
	this._xscale=10;
	this._yscale=10;
	}

		
}
questo và messo dentro il clip "Chi sono"
all'interno di esso c'è un pulsante che attiva uno stupido play()
per far comparire la foto del sorcetto.
La foto del sorcetto è un clip dove all'interno di esso c'è l'interpolazione
di comparsa della foto stessa e nell'ultimo fotogramma le scritte e il pulsante "Chiudi X"



e quest'altro il codice completo con la funzione hitTest
Codice:
onClipEvent (load) {
	this._xscale=10;
	this._yscale=10;
	this._x=290;
	this._y=250;
}
onClipEvent (enterFrame) {
	if(this.hitTest(_root._xmouse,_root._ymouse)==false){
	this._x-=1;
	this._y+=1;
	this._xscale++;
	this._yscale++;
	if(this._y >=374){
		this._x=290;
	this._y=250;
	this._xscale=10;
	this._yscale=10;
	}
	}else{
		delete this.onEnterFrame;
	}
		
}

Per chi non conoscesse questa funzione (hitTest) è molto usata nei giochi
per rilevare le collissioni... ma è usata anche per creare i menu a rollover o a zoom

Altra cosa da dire... sono le Tween.
Le tween sono delle classi esterne anch'esse usate per i menu
con le tween si possono realizzare movimenti ingrandimeni e rimbalzi
tipo menu elastico.


Bè intanto digerisci questo poi in caso ti spiego il resto. :fonzie:
 

onevision

Nuovo Utente
4 Gen 2012
6
0
0
sono riuscita a fare il testo che si muove con dentro il bottone...
però non so come far apparire la pagina al click, cioè cosa devo scrivere sul bottone x far apparire la clip della foto? on release.....
scusa sono all'abc

e poi vorrei sapere come faccio a far spostare il testo anche in altre direzioni... ho provatoa cambiare un po' a caso i tuoi valori ma con scarsi risultati!

grazie x il tuo tempo, ciao
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Ciao, la foto che compare non è altro che un clip ed è la cosa più semplice.
all'interno di essa vi è un interpolazione con uno stop() iniziale e uno finale,
questa interpolazione inizialmente l'alpha è a 0 per questo non la vedi ma la foto
è sempre presente sullo stage.
Nel pulsante basta che metti un semplice play() che toglie lo stop() facendoto vedere la foto.

esempio
http://max400.netne.net/menu-spaziale2.swf

sorgente
http://max400.netne.net/menu-spaziale2.rar

nel file sorgente c'è tutto to ho fatto il movimento delle altre voci

altra cosa importante è la velocità dei fotogrammi/al secondo 50/fs
lo trovi in basso sulla destra nel pannello Proprietà
il movimento delle voci del menu è fluido rispetto al tuo esempio che è a scatti.

per invertire il movimento verso destra "Dove mi trovo"
basta invertire il fattore orizzontale da _x-=1 (movimento verso sinistra) a _x+=1 (verso destra)
e poi la direzione finale if(this._y >=394){ rispetto all'altra voce Chi sono _y >374
questo per evitare che il movimento sia troppo parallelo anzicchè alternato.
Inizialmente partiranno uguali ma poi grazie a questo dislivello saranno alternai creando un effetto più naturale oppure quando interrompi il movimento di uno di essi col mouse.

Se mi dai tempo magari possiamo continuarlo migliorandolo un po e soprattutto
una cosa molto importante: per quanto riguarda le foto sarebbe meglio importarle esternamente
ed ancora più bello mette anche dei video.

altra cosa importante l'efetto alpha si può fare anche via codice.

Più tardi ti farò altri esempi...

Ps le voci del menu embrano dei titoli di un film di fantascienza tipo guerre stellari ih ih ih

a dopo ciao
 

onevision

Nuovo Utente
4 Gen 2012
6
0
0
Ciao Max_400
ho provato e riprovato, cambiando i valori... questo è il risultato www.b-one-srl.com/spazio/
solo che ho bisogno di ingrandire il campo: ho fatto lo stage più grande e portato la partenza delle voci nel centro, modificando i valori del tuo codice
this._x=500;
this._y=300;

ma cambiando la partenza le voci vanno dove vogliono e in alcuni casi si ingrandiscono tantissimo e non spariscono...
non capisco la logica del movimento

tu mi scrivi:
basta invertire il fattore orizzontale da _x-=1 (movimento verso sinistra) a _x+=1 (verso destra)
e poi la direzione finale if(this._y >=394){ rispetto all'altra voce Chi sono _y >374

ma questo valore if(this._y >=394) non ho capito rispetto a cosa va variata e perchè a volte c'è > e a volte <

ti ringrazio per la pazienza, sei l'unico che mi ha dato una soluzione...

ciao
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Ciao onevision e ben tornato

ma questo valore if(this._y >=394) non ho capito rispetto a cosa va variata e perchè a volte c'è > e a volte <

this._y >=394 quando devi scendere si usa il simbolo di maggiore >

this._y <=394 quando devi salire rispetto alla posizione attuale.

Ho visto il tuo esempio i titoli mi sembrano un po troppo grandi e troppo vicini
il tutto ammucchiato sulla sinistra (il file sorgente che ti ho dato l'hai visto?)

Comunque più tardi spiego meglio il codice che ho postato prima.
a dopo...
 

onevision

Nuovo Utente
4 Gen 2012
6
0
0
si che lo visto il tuo sorgente... ci pastrugno da 3 giorni, ma quando provo a cambiare i valori delle posizioni le voci vanno dove vogliono...
comunque ora provo con la tua ultima dritta
grazie
 

onevision

Nuovo Utente
4 Gen 2012
6
0
0
ho centrato il div contenente l'swf nella pagina.
mi manca solo di riuscire a espandere di più il tragitto delle scritte.
le scritte sono grandi ma devo lasciarle così per seguire l'immagine coordinata del cliente.... le vuole così

ti chiedo solo di aiutarmi a posizionare le voci su uno stage di 1000 x 600, in modo da farle partire al centro come nel tuo precedente esempio.
ti allego le prove... in test-vale2 ho variato i tuoi parametri con risultati catastrofici...
te lo allego sulla mail, qui non riesco a trascinare il file caricato nell'area in basso

ciao grazie
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
Ecco le nuove coordinate per uno stage 1000x600

Codice:
onClipEvent (load) {
	this._xscale=10;
	this._yscale=10;
	this._x=442;
	this._y=300;
}
onClipEvent (enterFrame) {
	if(this.hitTest(_root._xmouse,_root._ymouse)==false){
	this._x+=2;
	this._y+=0.5;
	this._xscale=this._xscale+10;
	this._yscale=this._yscale+10;
	if(this._y >=350){
		this._x=442;
		this._y=300;
	this._xscale=10;
	this._yscale=10;
	}
	}else{
		delete this.onEnterFrame;
	}
		
}

Considerazioni:
Se abbiamo uno stage largo 1000 px il centro ovviamente sarà 500 però...
bisogna considerare la larghezza della parola per esempio onevision è di 58px
quindi a questo 500px togliamo 58 unità e rimane 442
questo 442 px sarà il punto di partenza della coordinata _x (perfettamente al centro dello stage)


Per aiutare meglio l'utente c'è a disposizioni un Pannello chiamato informazioni

posizione.jpg

Grazie a a questo pannello potremo vedere esattamente la posizione del mouse nello stage

Per avere un movimento più diagonale cioè più distanziato dal centro andremo a modificare la
coordinata _x di più rispetto a _y ecco l'esempio

movimento-diagonale-gif.gif

movimento più diagonale

filmato swf esempio
http://max400.netne.net/movimento-piu-diagonale.swf

file sorgente
http://max400.netne.net/movimento-piu-diagonale.rar

..
.
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [HTML] Menu con effetto slide down HTML e CSS 0
L Effetto menu di navigazione. HTML e CSS 10
V Effetto menu jQuery 0
G Eliminare l'effetto refresh di una pagina internet PHP 8
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
S [HTML] Effetto su testo da togliere HTML e CSS 0
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [HTML] Effetto hover in un div HTML e CSS 6
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
R Effetto sul testo Javascript 3
K Effetto psichedelico Flash 0
G Effetto mosso tipo calce. Photoshop 1
P Effetto spruzzo di profumo Photoshop 1
J Aggiunta di un effetto di transizione al plugin Quick Pager jQuery 0
L effetto galleria popup (immagini) jQuery 1
M effetto del testo css HTML e CSS 1
Z Effetto pennello con Flash Flash 0
P Visualizzare video mp4 con effetto lightbox jQuery 1
L Effetto fade a div Javascript 1
L Effetto hover con jquery jQuery 2
F effetto movimento immagini jquery jQuery 3
matteoraggi Come si fa a ricreare l'effetto dei pesciolini? WordPress 3
F Effetto comparsa header Javascript 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
J effetto sliding dors come cover per entrare in un sito JQ Javascript 0

Discussioni simili