Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

Effetto acqua con Flash CS3

This is a discussion on Effetto acqua con Flash CS3 within the Articoli e tutorials forums, part of the Flash CS3 e Actionscript 3.0 category; Un altro effetto creato con Actionscript 3.0 e in particolar modo le classi BitmapData e DisplacementMapFilter. L' effetto ricrea ...


Go Back   Forum Flash CS3 Flash CS4 > Flash CS3 e Actionscript 3.0 > Articoli e tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  6 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 20-09-07, 09:21
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,486
Rep Power: 6
Flep is on a distinguished road
Effetto acqua con Flash CS3










Un altro effetto creato con Actionscript 3.0 e in particolar modo le classi BitmapData e DisplacementMapFilter.
L' effetto ricrea un ambiente con 2 tende canadesi a bordo del lago in una notte di luna piena.
Piacevole l' effetto dell' acqua che si muove.

Vediamo le classi utilizzate...

Acqua.as :
Code:
package
{
	import flash.display.MovieClip;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.filters.DisplacementMapFilter;
	import flash.utils.Timer;
	import flash.geom.Point;
	import flash.ui.ContextMenu;
	import flash.ui.ContextMenuItem;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	
	public class Acqua extends MovieClip
	{
		private var filtri_array:Array;
		private var stelle_array:Array;
		
		private var timer:Timer;
		
		private var bit_data:BitmapData;
		
		private var spostamento:DisplacementMapFilter;
		
		private var z:Number=1;
		private var numStelle:int=150;
		private var frizione:Number=.95;
		
		private var immagine:Immagine;
		
		private var loader:Loader;
		
		private var bird_1:MovieClip;
		private var bird_2:MovieClip;
		
		private var point:Point;
		
		public function Acqua()
		{
			initMenu();
			init();
			initStelle();
			attachImmagine();
			initLoader();
			initWaterEffect();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			bit_data=new BitmapData(726,370,false,0);
			
			point=new Point(0,0);
			
			spostamento=new DisplacementMapFilter(bit_data,point,1,2,10,30);
			filtri_array=new Array();
			filtri_array.push(spostamento);
			targetClip_mc.filters=filtri_array;
		}
		
		private function initStelle():void
		{
			stelle_array=new Array();
			for(var i:int=0;istage.stageHeight/2&&stella.x<150)
					stella.y-=100;
				stella.alpha=.3+Math.random()*.7;
				stella.width=stella.height=1+Math.random()*2.5;
				stella.vx=0;
				stella.vy=0;
				stelle_array.push(stella);
			}
		}
		
		private function attachImmagine():void
		{
			immagine=new Immagine();
			addChild(immagine);
			immagine.x=stage.stageWidth-immagine.width-20;
			immagine.y=+5;
		}
		
		private function initLoader():void
		{
			for(var i:int=0;i<2;i++)
			{
				var url='bird.swf';
				var request:URLRequest=new URLRequest(url);
				loader=new Loader();
				if(i==0)
					initListener(loader.contentLoaderInfo);
				else
					initListener2(loader.contentLoaderInfo);
				loader.load(request);
			}
		}
		
		private function initListener(dispatcher:IEventDispatcher):void 
		{
			dispatcher.addEventListener(Event.COMPLETE,completato);
		}
		private function initListener2(dispatcher:IEventDispatcher):void 
		{
			dispatcher.addEventListener(Event.COMPLETE,completato2);
		}
		
		private function completato(e:Event):void 
		{
			var c:*=e.target.content;
			bird_1=c;
			bird_1.y=-65;
			addChild(bird_1);
			startTimer();
		}
		private function completato2(e:Event):void 
		{
			var c:*=e.target.content;
			bird_2=c;
			bird_2.y=400;
			bird_2.alpha=.5;
			bird_2.scaleY=-1;
			addChild(bird_2);
		}
		
		private function startTimer():void
		{
			timer=new Timer(10000,0);
			timer.addEventListener(TimerEvent.TIMER,go1);
			timer.start();
			function go1(t:TimerEvent):void
			{
				bird_1.play();
				bird_2.play();
			}
		}
		private function initWaterEffect():void
		{
			this.addEventListener(Event.ENTER_FRAME,goEffect);
		}
		
		private function goEffect(e:Event):void
		{
			for(var i:int=0; i stage.stageWidth)
					stelle_array[i].x=0;
				else if(stelle_array[i].x<0)
					stelle_array[i].x=stage.stageWidth;
				if(stelle_array[i].y>stage.stageHeight)
					stelle_array[i].y=stage.stageHeight/2+55;
				else if(stelle_array[i].y<0)
					stelle_array[i].y=stage.stageHeight;
				if(stelle_array[i].y>stage.stageHeight/2+55)
				{
					stelle_array[i].vx+=Math.random()*.1-.05;
					stelle_array[i].vy+=Math.random()*.1-.05;
					stelle_array[i].x+=stelle_array[i].vx;
					stelle_array[i].y+=stelle_array[i].vy;
					stelle_array[i].vx*=frizione;
					stelle_array[i].vy*=frizione;
					stelle_array[i].alpha=.35;
				}
			}
			var point:Point=new Point(z,z/2);
			bit_data.perlinNoise(100,10,2,523,true,false,7,true,[point,point]);
			targetClip_mc.filters.mapBitmap=bit_data;
			z++;
			targetClip_mc.filters=targetClip_mc.filters;
		}
		
		// NON rimuovere per favore !
		public function initMenu():void
		{
			var etichetta:String='© FlepStudio.org';
			var cm:ContextMenu=new ContextMenu();
			var item:ContextMenuItem=new ContextMenuItem(etichetta);
			cm.hideBuiltInItems();
			cm.customItems.push(item);
			item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,itemHandler1);
			this.contextMenu=cm;
		}
		private function itemHandler1(event:ContextMenuEvent):void
		{
			var url:String='http://www.flepstudio.org/';
			var request:URLRequest=new URLRequest(url);
			navigateToURL(request,'_parent');
		}
	}
}
Immagine.as :
Code:
package
{
	import flash.display.MovieClip;
	
	public class Immagine extends MovieClip
	{
		public function Immagine(){}
	}
}
Stella.as:
Code:
package
{
	import flash.display.MovieClip;
	
	public class Stella extends MovieClip
	{
		public var vx:Number;
		public var vy:Number;
		
		public function Stella(){}
	}
}
Analizziamo il codice
Una delle novità in questo script è l' utilizzo della classe DisplacementMapFilter, che non è disponibile tra i filtri che Flash mette a disposizione nel pannello proprietà. Per utilizzare questo filtro, è necessario usare Actionscript.
Sostanzialmente con questa classe, si possono selezionare dei pixels di un' immagine e muoverli mentre i pixels non selezionati rimangono fermi.
Questa classe è molto usata per elaborare/deformare immagini e creare effettistiche in cui si deve cambiare la morfologia dell' immagine stessa.
DisplacementMapFilter utilizza una sorta di mappatura per dire a Flash quali pixels deve muovere dell' immagine. Di solito questa mappa ha la stessa misura dell' immagine, per cui il numero di pixels della mappa sarà lo stesso numero di pixels che contiene l'immagine che vogliamo animare.
Nella mappa, più scuro è il colore che diamo al pixel più forte sarà il nostro effetto. Quindi una mappatura tutta bianca manterrebbe l' immagine uguale all'originale (nessun effetto).

Per creare una nuova istanza di DisplacementMapFilter bisogna dare un' occhiata ai parametri che necessita:
mapBitmap: (BitmapData) la BitmapData che contiene la mappatura di ogni pixel.
mapPoint: (Point) indica il massimo punto in alto a sinistra da dove iniziare l' effetto.
componentX: (uint) quale colore usare per muovere i pixels sull' asse delle X. (ricordo, più scuro è il colore, più lo spostamento sarà accentuato).
componentY: (uint) quale colore usare per muovere i pixels sull' asse delle Y.
scaleX: (Number) di quanto vogliamo scalare l' asse X.
scaleY: (Number) di quanto vogliamo scalare l' asse Y.
mode: (String) il modo o effetto desiderato ( ne abbiamo 4 a disposizione:clamp,color,ignore,wrap)
color: (uint) specifica il colore da utilizzare solo se il mode è impostato a 'color'
alpha: (Number) specifica la trasparenza da usare solo se il mode è impostato a 'color'

Chiaramente nel mio esempio, questa classe viene utilizzata sotto un intervallo ENTER_FRAME e vengono passati dei valori come parametri che sono sempre diversi ad ogni iterazione dell' intervallo stesso.

Quindi:
creo la MovieClip su cui voglio agire al cui interno deve avere un'immagine tracciata ( in questo caso l'ho chiamata tagetClip_mc ).
creo una BitmapData
bit_data=new BitmapData(726,370,false,0);
creo un punto
point=new Point(0,0);
creo la DisplacementMapFilter
spostamento=new DisplacementMapFilter(bit_data,point,1,2,10,30);
e poi come tutti ifiltri, lo inserisco in un Array e poi do in pasto l' Array alla proprietà filters della MovieClip
filtri_array=new Array();
filtri_array.push(spostamento);
targetClip_mc.filters=filtri_array;


PS: Non ho dimenticato il data tyoe, ma semplicemente sono tutte variabili che già avevo dichiarato in testa dello script . Come sempre, ricordiamoci che stiamo lavorando su file .as quindi il datatype è fondamentale e obbligatorio.

Tutto il resto del codice riguarda il caricamento di un SWF esterno ( l' uccello che vola ), il posizionamentodelle stelle ed altre piccole cose su cui non mi soffermo.
Le parti importanti sono le ultime righe del metodo goEffect, chiamato sotto intervallo ENTER_FRAME:
creo ogni volta un nuovo punto ( la variabile z è già stata stata dichiarata )
var point:Point=new Point(z,z/2);
utilizzo il metodo perlinNoise della nostra variabile bit_data a cui era stato applicato il filtro DisplacementMapFilter
bit_data.perlinNoise(100,10,2,523,true,false,7,tru e,[point,point]);
dico a DisplacementMapFilter ( che adesso è targetClip_mc.filters ) di mappare la BitmapData ( bit_data )
targetClip_mc.filters.mapBitmap=bit_data;
incremento il valore della variabile z:
z++;
ripasso il nuovo filtro mappato alla proprietà filters della MovieClip:
targetClip_mc.filters=targetClip_mc.filters;

Bello no ? :))


Allego i files sorgente:

Attached Files
File Type: zip Acqua.zip (1,013.2 KB, 101 views)

__________________

 


I recommend: Essential Actionscript 3.0

- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
- I do not reply technicians pvt messages. Open a thread !

Last edited by Flep; 04-06-08 at 23:43..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #2 (permalink)  
Old 20-11-07, 13:11
Junior Member
 
Join Date: Nov 2007
Posts: 1
Rep Power: 0
ungaro_l is on a distinguished road
Exclamation Riferimento: Effetto acqua con Flash CS3



Ciao a tutti.....mi rimetto alla vostra generosità!!!!!!!!
Sto preparando una intro per il mio sito....essendo una mezza calzetta vi chiedo AIUTO!!!!

Vorrei far funzionare l'effetto acqua su un MC animato (logo_intro)...e che finita l'animzione rimanga l'effetto fino ad un click del visitatore su inglese/italiano.....è possibile? (spero di si)
da quello che ho capito flash è praticamente illimitato....aggiungo....molto complicato..
A lavoro finito dovrebbe venire....un gran bell'effetto....

vi allego il file..
Attached Files
File Type: fla PT_prova.fla (247.7 KB, 31 views)

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #3 (permalink)  
Old 17-04-08, 16:15
Junior Member
 
Join Date: Mar 2008
Posts: 23
Rep Power: 0
teocomi is on a distinguished road
Re: Effetto acqua con Flash CS3

gran effetto!!
però è normale che una volta messo in una pagina web prenda il 40% o più di CPU??
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #4 (permalink)  
Old 18-04-08, 09:23
Onsitus's Avatar
CSS.FlepStudio.org
 
Join Date: Jul 2007
Location: Nettuno Beach
Posts: 1,012
Rep Power: 3
Onsitus is on a distinguished road
Re: Effetto acqua con Flash CS3

Quote:
Originally Posted by teocomi View Post
gran effetto!!
però è normale che una volta messo in una pagina web prenda il 40% o più di CPU??
L'enterFrame che causa il cpu a salire. Normale.
Sul mio pc, sale fino a 90%.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #5 (permalink)  
Old 18-04-08, 09:33
Junior Member
 
Join Date: Mar 2008
Posts: 23
Rep Power: 0
teocomi is on a distinguished road
Re: Effetto acqua con Flash CS3

ahh capito.. ma secondo voi, è possibile creare un ciclo o similare, in modo che faccia i calcoli una volta sola senza ciucciare CPU di continuo?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Flash Multi Gallery
  #6 (permalink)  
Old 18-04-08, 11:46
Onsitus's Avatar
CSS.FlepStudio.org
 
Join Date: Jul 2007
Location: Nettuno Beach
Posts: 1,012
Rep Power: 3
Onsitus is on a distinguished road
Re: Effetto acqua con Flash CS3

Quote:
Originally Posted by teocomi View Post
ahh capito.. ma secondo voi, è possibile creare un ciclo o similare, in modo che faccia i calcoli una volta sola senza ciucciare CPU di continuo?
Se i calcoli vengono fatti una sola volta, l'effetto non ci sarebbe.
Il punto del enterFrame è di richiamare la funzione che fa girare il tutto e cosi di aggiornare l'effetto in continuazione.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

  #7 (permalink)  
Old 20-10-08, 16:25
Junior Member
 
Join Date: Oct 2008
Posts: 14
Rep Power: 0
simone75 is on a distinguished road
Riferimento: Effetto acqua con Flash CS3

Sto provando a creare l'effetto acqua, ma mi sfugge qualcosa. Sono partito dall'esempio scaricato qui ma mi perdo quando comincio ad eliminare quello che non mi serve.
Io vorrei applicare l'effetto soltanto ad una immagine con dimensioni 448x33.
Non c'è un esempio che applica l'effetto acqua soltanto ad un'immagine?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
Effetto accelerazione con Flash CS3 Flep Articoli e tutorials 2 21-04-08 19:10
Effetto scìa con Flash CS3 Flep Articoli e tutorials 3 03-03-08 15:02
Effetto in flash charangparm Flash CS3 Design 2 27-02-08 19:17
Effetto neve Flash CS3 DMan Utilità degli utenti di FlepStudio 8 16-12-07 17:37
Effetto flash manTiz Actionscript 3.0 base 4 24-07-07 00:44


All times are GMT. The time now is 12:30.


Powered by vBulletin versione 3.7.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap


FlepStudio
by Filippo Lughi
P.IVA 03605860406