Pull focus dynamically in Flash

The focus-pull technique is an excellent way of creating depth of field in your projects by pulling the focus between objects in the foreground, middleground and background. The effect is achieved by applying a BlurFilter to each object and dialling each object’s focus, based on the distance from the mouse’s Y position to the centre of the object.

In this tutorial I’ll show you how to use this technique to add real depth and a dramatic finish to your Flash projects, using only 14 lines of code.

01 First set up your document. Once inside Flash, hit Ctrl/Cmd+J and set Background Colour to black, Frame Rate to 31 (my preference) and Dimensions to 980x600px.

02 Next up comes the creation of the foreground, middleground and background clips. Press F8 and insert three new Movie Clip symbols. Name them as you wish, then drag them from the library onto the stage and give them instance names of fore_mc, middle_mc and back_mc.

03 Your new Movie Clips are still empty so you’d better make some artwork. Inside each Movie Clip, add a few large words or outlined shapes that, when blurred, will not completely obscure the object you’ll be placing behind.

04 Now set the Z position (depth) of each object. Select fore_mc and, in the Properties panel, set the Perspective Angle (the camera icon) to 62 and the Z position to 0. Then set the Z position of middle_mc to 600 and back_mc to 1,500. The higher the number, the further from the foreground the object will appear.

05 Once you’ve created the objects and set them to the proper depth, drag fore_mc to the bottom, middle_mc to the centre and back_mc to the top. Leave a little overlap on each so that when the object in front is out of focus, the object behind it will show through the blurry area, creating a nice depth of field.

06 Finally, you can add the code that will bring the scene to life. Go to Window> Actions (or press F9) to bring up the Actions window. Create a new layer in the Layers panel and click the first frame. To keep things simple here, this is where your code will live.

07 There are only 14 lines of code so this should be relatively painless, even for designers with no coding experience. Inside the Actions window, create an array that will house the BlurFilter and add the BlurFilter itself with a default blur of 0,0,3. The first two numbers are the X and Y blur amount, and the third is a high blur quality.

08 Next, push the filter to the array and set up an ENTER_FRAME event listener that fires once per frame (31 times per second) and repeatedly carries out the setBlur function that you’ll create next.

09 The setBlur function simply sends the three Movie Clips through the applyFilter function, which does exactly what it says it does. Set the blurX and blurY of the filter object by determining the absolute distance from the centre point of each movieclip to the position of the mouse cursor. Since the distance is based on the Y positions of the objects in pixels, you have to dampen that number or you’ll get way too much blur. Play with that .1 number to tune the depth of field.

10 Now you’re ready to Control>Test Movie. As you move your mouse from bottom to top, the blur of each object will increase and decrease as the mouse cursor moves up to, over and then beyond the object as if you were turning the focus ring of your SLR camera. The finished .swf file is in the support download; or just click here to see it in action.