Pure AS3 magnifying effect using Displacement Map Filter

核心提示：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 wil

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:

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…