A visual cue will help draw people into checking out your images. Get website visitors to explore your pictures by having the image come into focus when it is rolled over.

This simple technique entices users to spend more time exploring your site. In this tutorial I’ll show you how to create the focus effect using a Movie clip Symbol.

Before beginning you may want to scroll to the bottom of the page to see the finished project.

This tutorial assumes you have basic Flash skills including using the drawing tools, Properties Panel, Color Panel, and Actions Editor to add a "stop" action to a frame in a Timeline.

Step 1. Create a Movie Clip

Create a new Flash Document and save it. In the Properties panel enter 15 in the Frame rate field. Use Flash’s default size for the Stage, or click the Size button and enter your own dimensions. Click OK to return to the Timeline.

Instead of creating the animation on the Main Timeline, we’ll use a Movie clip Symbol. Using a Movie clip to hold the animation makes it easy to duplicate and use the effect for additional images.

Choose Insert > New Symbol. The Insert New Symbol window will open. Enter “display” in the Name field and select Move clip for the Type. Click OK.

Step 2. Import and Convert an Image

Choose File > Import > Import to Stage. Select the image on the Stage and convert it to a Movie clip (Control-click [PC: Right-click] and choose Convert to Symbol). Enter “display content” in the Name field and select Move clip for the Type. Click OK. You’ve just created a nested Movie clip.

Note: In pre Flash 8 days you would have had to create two copies of the same image and added a blur filter in an image-editing program. No more. Flash 8 includes a blur filter. Now instead of two images we only need one. The trick is to convert the image to a Movie clip Symbol, then apply the blur filter. Filter effects cannot be added to Graphic Symbols.

Step 3. Add a Blur

Use the Selection tool (V) to select the Instance of “display contents” on the Stage. Select the Filters tab in the Properties panel. Enter 10 in the Blur X and Blur Y fields. Select High from the Quality menu.

Step 4. Add Keyframes

Insert Keyframes in Frames 15 and 30 (F6). Select the Instance of “display content” in Frame 15. In the Properties panel click the Minus button to remove the filter.

Step 5. Add Motion Tweening

Select Frame 1. Hold down the Shift key and click on Frame 15. Control-click [PC: Right-click] and choose Create Motion Tween from the menu.

Step 6. Add a Button

Insert a new layer. Rename the layer button. Select the Rectangle tool. Draw a filled rectangle large enough to cover the image. The fill color doesn’t matter. Select the rectangle on the Stage and convert it to a Movie clip (Control-click [PC: Right-click] and choose Convert to Symbol). Enter “invisible” in the Name field and Button for the Type. Click OK.

Double-click the button to edit its Timeline. Click the Keyframe in the Up frame to select it. Next, click-and-drag the Keyframe to the Hit frame, then release the mouse button. Click “display” at the top of the Timeline to return to the “display” Timeline. The button is no longer the fill color you used but has changed to aqua. The button will be invisible when you publish your movie.

Step 7. In Focus

Insert a Keyframe in Frames 15 and 30 of the “button” layer. Move the Playback head to Frame 1. Select the Instance of the button. Open the Actions editor. Turn on Script Assist by clicking the Script Assist button. Click the Plus button and choose Global Functions > Timeline Control > play. Click the first line to select the script. Uncheck “Release” and check “On Roll Over”.

Step 8. Return to Blur

Move the Playback head to Frame 30. Select the Instance of the button. Open the Actions editor. Turn on Script Assist by clicking the Script Assist button. Click the Plus button and choose Global Functions > Timeline Control > play. Click the first line to select the script. Uncheck “Release” and check “On Roll Out”.

Step 9. Timeline Actions

Insert a new layer above the “button” layer. Rename the layer “actions”. Select Frame 1. Open the Actions Editor. Click the Plus button and choose Global Functions > Timeline Control > stop. Insert a Keyframe (F6) in Frame 15 and add another stop action.

Insert a Keyframe (F6) in Frame 30. In the Actions Editor click the Plus button and choose Global Functions > Timeline Control > goto. Click the Radio button next to “Go to and Stop”. Leave the default settings of Type: Frame Number and Frame: 1.

Step 10. Main Timeline Action

Click the Scene 1 button located at the top of the Timeline to return to the Main Timeline. Insert a new layer and rename it “actions”. Select Frame 1. Open the Actions Editor. Click the Plus button and choose Global Functions > Timeline Control > stop.

Step 11. Add Display Instance

Open the Library (Command-L [PC: Control-L]). Drag an Instance of “display” onto the Stage. Choose Control > Test Movie. Roll your mouse over the image to bring it into focus. When you roll your mouse off of the image it will become blurred again.

Step 12. Stay In Focus Option

If you don’t want the image to return to its blurry state, open the “display” Movie clip and remove Frames 16 – 30. Then remove Keyframe 15 in the “button” layer by selecting the Keyframe then Control-click [PC: Right-click] and choose Clear Keyframe.

Enjoy!

createObject(‘swf’,'/images/tutorials/design/flash/17/nautical.swf’,'width’,’500′,’height’,’375′,’scale’,'exactfit’,'quality’,'high’,'allowScriptAccess’,'sameDomain’,'bgcolor’,'#000033′);