Pure AS3 magnifying effect using Displacement Map Filter

August 12, 2009 • Actionscript 3, Flash by Emanuele Feronato • 6 Comments

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: 1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 3.78 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 6 comments

  1. Dani

    on 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

  2. Flash Decompiler Trillix review : Emanuele Feronato

    on 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. [...]

  3. antoan

    on 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.

  4. zyxstand

    on December 25, 2010 at 8:34 pm

    also, i believe the real grey color to use is 0x7F7F7F instead of 0×808080. probably a negligible factor, but still (i think it says so on the adobe livedocs site)
    hope that helped!

  5. Barliesque

    on January 14, 2011 at 7:14 pm

    The way you’ve drawn the displacement map results in a simple linear zoom, rather than a spherical lens-like effect– which is fine, if that’s what you’re after. (Notice that straight lines stay straight under the magnifier.)

    To get that spherical distortion, I changed each of the red/green component MovieClips first into a flat color: #800000 and #008000, then I made new MovieClip symbols of these, so I could add the Bevel filter to each. I set the hilight color to #FF0000 (red) or #00FF00 (green), set BlurX/Y to 50px, angle to 90 for green and 0 for red. When these two bevel-gradients are merged, the result is a perfect spherical distortion.

  6. [as3] Displacement filter, ??????mapping ?? | CODE@????

    on February 18, 2011 at 9:34 am

    [...] http://www.emanueleferonato.com/2009/08/12/pure-as3-magnifying-effect-using-displacement-map-filter/ mapping http://www.emanueleferonato.com/2007/12/03/understanding-flash-displacement-map-filter/ [...]

< >