Immagini che si animano al passaggio del mouse

[tatinotato]

Allora premetto che sono alle prime armi con flash e le animazioni!

sto cercando di realizzare una semplice animazione che è ormai diffusa in molti siti.
delle immagini che si animano al passaggio del mouse e tornano come prima quando il mouse si allontana

come nel sito : http://www.cssdesignawards.com/ nella sezione past winners.
questo è realizzato con dei css ma io credo si possa facilmente fare in flash.

ho provato con dei pulsanti ma non funziona...e non conosco il codice action script per realizzarlo.

mi servirebbe un action script che all'evento passaggio del mouse porti il banner in una posizione e all'allontanamento lo riporti nella posizione originale!

qualcuno potrebbe aiutarmi?

Grazie.

[lmweb.it]

converti l'immagine in pulsante ed al posto del frame Sopra metti quello che vuoi

[tatinotato]

questo era facile ma se provi a vedere il sito che avevo linkato ci si accorge che non si ottienen l'effetto voluto...infatti quello che voglio ottenere sono delle slide animate che al passaggio del mouse scorrono da un lato e quando il mouse si allontanano "scorrono alla posizione precedente...con il pulsante non riesco ad ottenerlo in quanto uscito nello stato sopra si torna allo stato di partnza con uno scatto brutto da vedere e non con lo scorrimento che vorrei ottenere...riesci ad aiutarmi?

[randi]

Infatti non devi usare i pulsanti vanno bene solo per un semplice rollover, per ottenere le slide che si spostano devi usare i movieclip e puoi seguire diverse strade,.
1) La prima è quella seguita da chi è agli inizi con flash e ancora non conosce actionscript e la sua sintassi, allora fai delle interpolazioni movimento sulla time line che controlli con un minimo di codice.
2) La seconda e quella di ottenere lo spostamneto del clip esclusivamnete con il codice per mezzo della funzione onEnterFrame i as2 o L'evento ENTER_FRAME in as3 e l'uso delle condizioni if per determinare i parametri dello spostamento.
3) La terza è quella di sfruttare le tween interne di flash o esterne (caurina) che al primo approccio possono sembrare difficili, ma che una volta capito il mecanismo di permettono di ottenere dei movimenti fluidi e con effetti particolaro come l'elastico, o avvio lento e velocità in progressione o al contraro partenza veloce e velocità in diminuzione ecc.

[tatinotato]

Grazie randi!...la secondo scelta sembra la più interessante...in realtà anche la prima...ma in entrambi i casi non so praticamente come agire!...avresti qualke link o qualke suggerimento per imparare a farlo...purtoppo sono un pò in difficoltà con action script 3 ma sto studiando un pò...riesci ad aiutarmi?

grazie!

Ciao.

[randi]

Ecco un esempio

[tatinotato]

Geazie sei stato molto professionale...però devo dire che ho qualche problema a capire il funzionamento...ci sto provando ma ad esempio non capisco come è fatto il livello maschera! serve per far si che il banner reagisca al mouse? come si fa ad annidare un livello dentro al livello maschera? per il codice potrei anche esserci...ma per il resto non capisco molto...

[randi]

1) disegni lo sfondo viola e gli dai le stesse dimensioni della foto.
2) lo trasformi in clip filmato e gli dai nome istanza mc1
3) doppio click per entrare in modalità modifica
4) apri un livello superiore trascini la foto la trasformi in clip filmato e gli dai nome istanza mc2
5) apri un terzo livello disegni un rettangolo grande quanto la foto, clicchi col destro sulla palette livelli e selezioni maschera.
Puoi vedere tutti i passaggi quì

[tatinotato]

Ora è tutto chiaro! ed è chiaro il problema che se continuavo a provarci con action script 3.0 potevo morire pazzo...sai che differenze ci sarebbero con action script 3.0? sai come posso farlo eventualmente in action script 2 e importarlo nel mio sito flash? (l'importazione in flash cs5 di un file fvl o swg è un'altra delle cose che proprio non mi riesce)

comunque grazie davvero randi sei un grande!

[randi]

Con as3 non sono bravo, non che che con as2 sia un asso, ma con as3 sono proprio agli inizi, comunque, ora ti darò un codice as3 che ho testato è funziona anche se probabilmente si potrebbe ottimizzare meglio, la parte grafica rimane invariata devi solo sostituire as2 con

  var controllo:Boolean=false
mc1.addEventListener(MouseEvent.MOUSE_OVER,destra)
function destra(evento:MouseEvent):void
{controllo=false
	addEventListener(Event.ENTER_FRAME,sposta_destra)
	function sposta_destra(evento:Event):void
	{trace("vai")
		if(mc1.mc2.x>=mc1.mc2.width)
		{
			controllo=true
		}
		if(controllo==false&&mc1.mc2.x<mc1.mc2.width)
		{
			mc1.mc2.x+=10
		}
	if(controllo==true)
	{
		removeEventListener(Event.ENTER_FRAME,sposta_destra)
	}
}
}
////////////////////////////////////////////////////////////////
mc1.addEventListener(MouseEvent.MOUSE_OUT,sinistra)
function sinistra(evento:MouseEvent):void
{controllo=true
	addEventListener(Event.ENTER_FRAME,sposta_sinistra)
	{
		function sposta_sinistra(evento:Event):void
		{trace("vieni")
			if(mc1.mc2.x<1)
			{
				controllo=false
			}
			if(controllo==true&&mc1.mc2.x>0)
			{
				mc1.mc2.x-=10
			}
			if(controllo==false)
			{
				removeEventListener(Event.ENTER_FRAME,sposta_sinistra)
			
			}
		}
	}
}