I Never Finish Anythi

Most of us have seen tuto­ri­als on how to use Adobe Pho­to­shop to cre­ate a tilt-shift effect by using a selec­tion mask and a lens blur. I thought I’d try to repro­duce the effect using AS3.
First off, a demo () for the peo­ple who want to see if this is even worth the time to read. View source is enabled, if you want the code. The top slider con­trols the size of the focus area, the sec­ond slider con­trols the loca­tion of the focus area, and the check­box con­trols whether or not to boost the sat­u­ra­tion (because really bright col­ors look more fake).
Now that you’ve played with it, I’ll begin explain­ing what’s going on in the code.

Note: This code uses Grant Skinner’s Col­or­Ma­trix class, which you can get here ().

private var original:BitmapData; // class-level variable
var picBMD:BitmapData;
var alphaMask:BitmapData = null;
var mask:Sprite = new Sprite();
var m:Matrix = new Matrix();
var focusSize:int = hsFocusSize.value;
var focusLoc:int = hsFocusLoc.value;

if (original == null) {
	original = (pic.content as Bitmap).bitmapData.clone();
}
picBMD = original.clone();

picBMD.applyFilter(picBMD, picBMD.rect, picBMD.rect.topLeft, new BlurFilter(5, 5, 3));

m.createGradientBox(picBMD.width, picBMD.height * (focusSize / 100), 90 / (180 / Math.PI), 0, picBMD.height * ((focusLoc - focusSize) / 100));
mask.graphics.beginGradientFill("linear", new Array(0xFFFFFF, 0xFFFFFF, 0xFFFFFF, 0xFFFFFF), new Array(0, 1, 1, 0), new Array(0, 85, 170, 255), m);
mask.graphics.drawRect(0, 0, picBMD.width, picBMD.height);
alphaMask = new BitmapData(picBMD.width, picBMD.height, true, 0xFFFFFF);
alphaMask.draw(mask);

picBMD.copyPixels(original, original.rect, original.rect.topLeft, alphaMask, alphaMask.rect.topLeft, true);

if (chkSaturate.selected) {
	var cm:ColorMatrix = new ColorMatrix();
	cm.adjustSaturation(20);
	picBMD.applyFilter(picBMD, picBMD.rect, picBMD.rect.topLeft, new ColorMatrixFilter(cm));
}

(pic.content as Bitmap).bitmapData = picBMD;

Lines 1–7: Vari­able dec­la­ra­tion. original is a class-level vari­able that holds the unal­tered ver­sion of the bitmap­Data. focusSize is how big an area to focus and focusLoc is where on the y-axis to posi­tion the focus. Both of these are percentages.

Lines 9–12: If we haven’t stored the unal­tered bitmap­Data yet, do it now. Clone that data to use in our filter.

Line 14: Nor­mally, the tuto­ri­als call for a Lens Blur. We’ll set­tle for just doing a 5×5 blur on the entire image.

Line 16: Use our matrix to cre­ate a gra­di­ent box that is the same width as the image and the height as we spec­i­fied with our focusSize per­cent­age. The 90 / (180 / Math.PI) is just say­ing that we want our gra­di­ent to direct itself ver­ti­cally at a 90 degree angle (con­vert­ing 90 degrees to radi­ans). Because the gra­di­ent is ver­ti­cal, we use 0 for tx because it doesn’t mat­ter where we posi­tion it hor­i­zon­tally. ty is set to the loca­tion spec­i­fied by focusLoc.

Line 17: Begin our gra­di­ent fill in the mask sprite. We have to use a sprite because BitmapData objects don’t have graphics prop­er­ties. The fill should be lin­ear, white (0xFFFFFF) and trans­par­ent on the edges. new Array(0, 85, 170, 255) means that the gra­di­ent col­ors and trans­parency lev­els should begin draw­ing at 0 and change to the next set at 85, where 0–255 is a scale like 0–100%.

Line 18: Draw the gra­di­ent onto the sprite.

Lines 19–20: Set up our alphaMask to be the same size as our image and draw the con­tents of our sprite onto it.

Line 22: This is the actual effect, now. Copy the pix­els from the orig­i­nal image, using the trans­parency mask, onto our blurred image. This will cause the image to go from blurred to clear using the gra­di­ent we created.

Lines 24–28: If we’re over-saturating the image, cre­ate a new Col­or­Ma­trix (), cour­tesy of Grant Skin­ner, and adjust the sat­u­ra­tion to boost by 20. This will make all of the col­ors look a lit­tle too bright (and fake, like a model). Apply the fil­ter as normal.

Line 30: Set our image to use the fil­tered BitmapData.

That’s all there is to it. A nice, lit­tle effect and not too difficult.