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:

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers