Create a Magnifying Effect using Flash actionscript 3.0

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.

3 Comments