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 Ill 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 Flashs 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, well 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. Youve 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 doesnt 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 dont 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.