Pure AS3 magnifying effect using Displacement Map Filter

Welcome to the oldest Flash eye candy effect ever.

I’ll show you how to create a magnifying effect, yes, the same old effect you see in the web since Actionscript was AS1, but this time is AS3 only and will give you some hints about Bitmap, BitmapData and DisplacementMapFilter classes.

The photo in the example comes from Flickr. Should this infringe some copyright, it wasn’t me.

First, let me show you the movieclips I’m exporting to Actionscript:

on the left side, a photo exported as malecon (that’s the name of the avenue), on the right side a movieclip exported as displace_movie. red_map and green_map are just two movieclips combined to achieve the gradient sphere.

You can find all information about the displacement filter and the meaning of that gradient sphere on a grey background at Understanding Flash displacement map filter.

It’s an old AS2 example but the theory is still the same.

Now let’s take a look at the script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

package {
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.filters.DisplacementMapFilter;
	import flash.geom.Point;
	import flash.events.Event;
	public class as3displace extends Sprite {
		// creating a new Bitmap variable
		var the_bitmap:Bitmap = new Bitmap();
		// creating a variable to store "malecon" image.
		// notice you MUST specify width and height or you'll get an error
		// 1136: Incorrect number of arguments.  Expected 2.
		var the_image=new malecon(500,373);
		// creating a variable to store the "displace_movie" movieclip
		var the_displace:displace_movie=new displace_movie();
		// creating a point at the upper left corner
		var starting_point:Point=new Point(0,0);
		// creating a 100x100 bitmap data, that will contain the gradient movieclip
		var displacement_map:BitmapData=new BitmapData(100,100,true,0x808080);
		// creating the displacement map filter
		var displacement_filter:DisplacementMapFilter=new DisplacementMapFilter(displacement_map,starting_point,1,2,50,50,"color",0x000000,1);
		public function as3displace() {
			// assigning the "the_image" data (the photo) as bitmapData of "the_bitmap" variable
			the_bitmap.bitmapData=the_image;
			// in the displacement map, draw (copy) the content of "the_displace" movieclip
			// (the gradient sphere)
			displacement_map.draw(the_displace);
			// placing "the_bitmap" on the stage
			addChild(the_bitmap);
			// listener that triggers at every frame
			addEventListener(Event.ENTER_FRAME, onFrame);
		}
		public function onFrame(e:Event) {
			// changing the starting point of the displacement map filter according to mouse position
			starting_point.x=mouseX-50;
			starting_point.y=mouseY-50;
			displacement_filter.mapPoint=starting_point;
			// applying the displacement filter to "the_bitmap" (the photo)
			the_bitmap.filters=[displacement_filter];
		}
	}
}

And this is the result…

Move the mouse over the photo.

The main difference with the rest of the tutorials you will find in internet, is I don’t place the photo directly on the stage and I don’t even import it using something like [Embed(source="picture.jpg")].

Everything is handled by ActionScript

Download the source code and enjoy.

Rate this post: (7 votes, average: 4.00 out of 5)

 Loading ...

If you found this post useful, please consider a small donation.

3 Responses

1. Dani says:

   August 12, 2009 at 12:14 pm

   :) Nice tut.. I’ve been watching them for a while now.. didn’t quite have the guts to go AS3 but still :)

   Btw.. add a little inner glow with 0 distance and a darken filter + a knockout effect and hide the mouse cursor and you have… a very nice magnifying glass :)

   [That was the designers point of view]

   Cheers

   Reply
2. Flash Decompiler Trillix review : Emanuele Feronato says:

   August 13, 2009 at 4:53 pm

   [...] I am testing this tool on the movie you can see at Pure AS3 magnifying effect using Displacement Map Filter. [...]

   Reply
3. antoan says:

   July 1, 2010 at 2:20 pm

   var displacement_map:BitmapData=new BitmapData(100,100,true,0×808080);

   If you set the “transparent” parameter to false, the bitmap will have gray as background and you won’t need to draw manually the background of the displace.

   Reply