Flash Gallery | Flash Templates | Flash Menu | Flash Design | Flash Audio & Video

flash page flip

Actionscript 3.0 video tutorials

+ Reply to Thread
Results 1 to 5 of 5

Thread: Water effect with Flash CS3

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,454
    Rep Power
    8

    Water effect with Flash CS3

    amazing Flash templates









    Another special effect created with Actionscript 3.0 , specifically with the BitmapData and DisplacementMapFilter classes.
    The effect re-creates an environment with 2 camping tents on a lake's shore in a full moon night.
    Nice is the effect of moving water.

    Let's see the classes used:

    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;
    	
    	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;
    		
    		public function Acqua()
    		{
    			init();
    			initStelle();
    			attachImmagine();
    			initLoader();
    			initWaterEffect();
    		}
    		
    		private function init():void
    		{
    			stage.frameRate=31;
    			
    			bit_data=new BitmapData(726,370,false,0);
    			
    			spostamento=new DisplacementMapFilter(bit_data,null,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;
    		}
    	}
    }
    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(){}
    	}
    }
    Let's analyze the code
    One of the new things in this script is the use of the class DisplacementMapFilter, which is not available among the classes in the properties panel of Flash.
    Basically, with this class, you can select some image pixels to move while the others stay still.
    This class is used a lot to elaborate/deform images and create special effects that dramatically change the morphology of the image they're applied to.
    DisplacementMapFilter uses a sort of mapping to tell Flash which pixels will be involved in the effect and which won't. Usually this map is the same size as the image to animate, thus contains the same number of pixels.
    In the map, the darker the colour of the pixel the stronger our effect will be. Therefore a map completely white would leave the image as it is ( no effect ).

    In order to create a new instance of DisplacementMapFilter you need to take a look at what parameters it needs:
    mapBitmap: (BitmapData) the BitmapData containing the pixel mapping.
    mapPoint: (Point) gives the upper left most point where the effect will begin.
    componentX: (unit) which colours to use to move the pixels along the X axis (remember, the darker the colour the stronger the effect).
    componentY: (unit) which colours to use to move the pixels along the Y axis.
    scaleX: (Number) how much we want to scale the X axis by.
    scaleY: (Number) how much we want to scale the Y axis by.
    mode: (String) the desired effect ( we have 4 available: clamp, color, ignore, wrap)
    color: (unit) specifies which colour to use only if the mode is set to 'color'
    alpha: (Number) specifies the transparency to use only if the mode is set to 'color'

    Obviously, in my example, this class is used under an interval ENTER_FRAME and the values passed in are always different for each iteration of the interval.

    So:
    I create the MovieClip to take the effect, having a clearly traced boundary inside of it ( in this case I called it targetClip_mc ).
    I create a BitmapData
    bit_data=new BitmapData(726,370,false,0);
    I create a point
    point=new Point(0,0);
    I create the DisplacementMapFilter
    spostamento=new DisplacementMapFilter(bit_data,point,1,2,10,30);
    then, as all filters, I insert it in an Array, which I feed to the filters property of the MovieClip
    filtri_array=new Array();
    filtri_array.push(spostamento);
    targetClip_mc.filters=filtri_array;
    PS: I haven't forgotten the data type, but they are simply variable that I've already declared at the top. As usual, let's remember we're working on .as files, therefore the data type is fundamental and compulsory.
    Every other bit of code relates to the loading of an external SWF ( the flying bird ), the positioning of the stars and other small things I won't talk about.
    The last lines of the goEffect method are the most important part, method called within the ENTER_FRAME interval:
    I create a point every time ( the variable z had already been declared )
    var point:Point=new Point(z,z/2);
    I use the perlinNoise method of our bit_data variable to which we'd applied the filter DisplacementMapFilter
    bit_data.perlinNoise(100,10,2,523,true,false,7,tru e,[point,point]);
    I tell DisplacementMapFilter ( which is now targetClip_mc.filters ) to map the BitmapData ( bit_data )
    targetClip_mc.filters.mapBitmap=bit_data;
    I increase the value of the variable z:
    z++;
    I finally pass the newly mapped filter to the filters property of the MovieClip:
    targetClip_mc.filters=targetClip_mc.filters;

    Nice huh ' :))
    Source files:
    Attached Files

  2. #2
    Junior Member Settled In DaveRoussel is on a distinguished road
    Join Date
    Jan 2009
    Posts
    1
    Rep Power
    0

    Re: Water effect with Flash CS3

    Beautiful !!! great !!!

  3. #3
    Junior Member Settled In manualtranny is on a distinguished road manualtranny's Avatar
    Join Date
    Apr 2009
    Posts
    2
    Rep Power
    0

    Re: Water effect with Flash CS3

    Hi - great effect- I am having an issue where the z index just keeps increasing and the water image I am using is basically shrinking instead of just morphing in place- does this make sense?

    I have just used it as a script on a frame instead of importing a class...
    is this the problem?

    here is what I am using


    Code:
    var bit_data=new BitmapData(726,370,false,0);
    var point=new Point(0,0);
    var spostamento=new DisplacementMapFilter(bit_data,point,1,2,10,30);
    var filtri_array=new Array();
    filtri_array.push(spostamento);
    targetClip_mc.filters=filtri_array;
    
    
    FUCK();
    function FUCK():void{
    	this.addEventListener(Event.ENTER_FRAME,goEffect);
    }
    function goEffect(e:Event):void{
    	var point:Point=new Point(z,z/2);
    	bit_data.perlinNoise(100,7,2,523,true,false,7,true,[point,point]);
    	targetClip_mc.filters.mapBitmap=bit_data;
    	z++;
    	targetClip_mc.filters=targetClip_mc.filters;
    }

    thanks!
    Last edited by OrientExpress; 06-11-09 at 07:55.

  4. #4
    Moderator Moving My Stuff To The FlepStudio OrientExpress is on a distinguished road OrientExpress's Avatar
    Join Date
    Aug 2009
    Posts
    1,279
    Rep Power
    2

    Re: Water effect with Flash CS3

    Hi,
    I think you should change the name of variable point ( you have double variables with same name )
    Code:
    var bit_data=new BitmapData(726,370,false,0);
    var point=new Point(0,0);
    var spostamento=new DisplacementMapFilter(bit_data,point,1,2,10,30);
    var filtri_array=new Array();
    filtri_array.push(spostamento);
    targetClip_mc.filters=filtri_array;
    
    
    FUCK();
    function FUCK():void{
    	this.addEventListener(Event.ENTER_FRAME,goEffect);
    }
    function goEffect(e:Event):void{
    	var point2:Point=new Point(z,z/2);
    	bit_data.perlinNoise(100,7,2,523,true,false,7,true,[point2,point2]);
    	targetClip_mc.filters.mapBitmap=bit_data;
    	z++;
    	targetClip_mc.filters=targetClip_mc.filters;
    }

  5. #5
    Junior Member Settled In manualtranny is on a distinguished road manualtranny's Avatar
    Join Date
    Apr 2009
    Posts
    2
    Rep Power
    0

    Re: Water effect with Flash CS3

    [QUOTE=OrientExpress;28255]Hi,
    I think you should change the name of variable point ( you have double variables with same name )

    Thanks, Orient-
    I don't think that was it- the script is basically taken verbatim out of the demo and the original uses the variable point the same way.

    I got this working, but it was necessary to do two things-
    a) the demo package instantiated a private var z as a Number type and set it to 1, so I did that.

    b) but that wasn't working in flash player v10 so I resaved it as 9. then it worked fine. Unless I am mistaken the use of z as a private var was problematic in Player 10.

    Does that make sense to anybody?

    I got it working fine for my uses, but I thought I would throw this out in case others are wrestling with it.

    All in all, a really useful piece- thanks again!

+ Reply to Thread

Similar Threads

  1. Writing Pen Effect
    By lucifier27 in forum Flash English
    Replies: 0
    Last Post: 28-09-09, 04:24
  2. 10 Effect XML Menu
    By info@amicidelvolo.it in forum Componenti
    Replies: 13
    Last Post: 19-09-09, 07:55
  3. Smoke effect AS2 to AS3
    By varatojo in forum Actionscript 3.0 newbies
    Replies: 0
    Last Post: 16-02-09, 01:01
  4. Trail effect
    By Flep in forum Tutorials
    Replies: 10
    Last Post: 20-08-08, 05:57
  5. MOUSE_MOVE effect with Flash CS3
    By Flep in forum Tutorials
    Replies: 0
    Last Post: 07-12-07, 06:44

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Search Engine Optimization by vBSEO