effetto menu galleggiante nello spazio

onevision · 4 Gen 2012

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 · 4 Gen 2012

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 · 4 Gen 2012

grazie!! ora ci provo ... mi sembra complicato... poi ti faccio sapere!

onevision · 4 Gen 2012

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 · 4 Gen 2012

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

max_400 · 4 Gen 2012

Esempio Finale

Qui non posso incorporare gli swf e lo slide esce fuori.

Quindi metto questa pagina come esempio
http://www.001design.it/forum_italiano/viewtopic.php?f=9&t=250&p=940#p940

onevision · 9 Gen 2012

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 · 9 Gen 2012

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 · 9 Gen 2012

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 · 9 Gen 2012

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 · 9 Gen 2012

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

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 più diagonale

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

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

..
.

effetto menu galleggiante nello spazio

onevision

Nuovo Utente

max_400

Utente Attivo

onevision

Nuovo Utente

onevision

Nuovo Utente

max_400

Utente Attivo

max_400

Utente Attivo

onevision

Nuovo Utente

max_400

Utente Attivo

onevision

Nuovo Utente

onevision

Nuovo Utente

max_400

Utente Attivo

Discussioni simili

effetto menu galleggiante nello spazio

Nuovo Utente

Utente Attivo

Nuovo Utente

Nuovo Utente

Utente Attivo

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Nuovo Utente

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency