Final View:
Step-1: Open a new document in flash in the size of 690X390px.
Step-2: Import (ctrl+r) an image in the same size of document size to the stage in layer-1.
Step-3: Select the image and convert it into movieclip (F8) and name it as “bg_mc”.
Step-4: create a layer-2 and draw a square fill it with gradient as below. Convert it into movieclip and name it as “map_mc”.
Make a double click on map_mc and inside the map_mc symbol create layer-2. Draw the gradient rectangle in green as like below and change it to movieclip.
Step-5: In layer-3 import one image like magnifying lens (I created this lens in Photoshop).. Convert it into movieclip and name it as “lens_mc”.
Step-6: In layer-4, select key frame one and press F9 to write the following actionscript:
var dPoint:Point = new Point(0, 0);
var dMap:BitmapData = new BitmapData(map_mc.width, map_mc.height, true, 0x808080)
dMap.draw(map_mc);
removeChild(map_mc);
var dFilter:DisplacementMapFilter = new DisplacementMapFilter ();
dFilter.scaleX = 60 // pixel displacement force on X
dFilter.scaleY = 50 // pixel displacement force on Y
dFilter.componentX = 2 // or BitmapDataChannel.RED
dFilter.componentY = 4 // or BitmapDataChannel.GREEN
dFilter.mode = “color” // or DisplacementMapFilterMode.COLOR / WRAP / CLAMP / IGNORE
dFilter.color = 0x000000 // color of pixels when source is empty
dFilter.alpha = 0 // alpha of colored pixels when source is empty
dFilter.mapPoint = dPoint; // position of the filters effect area
dFilter.mapBitmap = dMap; // map of colored pixels that controls the displacement
bg_mc.filters = [dFilter]
bg_mc.addEventListener(Event.ENTER_FRAME, onFrame)
function onFrame(e:Event){
dPoint.x += ((mouseX-map_mc.width/3)-dPoint.x)*0.4
dPoint.y += ((mouseY-map_mc.height/3)-dPoint.y)*0.4
lens_mc.x = dPoint.x-8
lens_mc.y = dPoint.y-8
dFilter.mapPoint = dPoint
bg_mc.filters = [dFilter]
}
Now run the program.
Leave a Reply