SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Flash & Swish Flash Tutorials Creating the Illusion of Speed with Motion Blur

Creating the Illusion of Speed with Motion Blur

In photography, a motion blur is created when the subject moves too fast for the speed of the film to capture. The result is a streak trailing the subject. In animation, we can create the illusion of speed by adding motion blur to an image. In this tutorial, we'll use the Blur filter and motion tweening in Flash 8 to create the illusion.

This tutorial assumes you're familiar with creating Flash documents, using the drawing tools, importing an image, and converting images to Symbols.

Step 1: Create a Movie Clip Symbol

In Flash, filters can only be applied to Text, Movie Clips, and Button Symbols. In this first Step we'll start by creating a new document and converting an image to a Movie Clip Symbol.

Open a new document and create the image you want to use. Alternatively, import an image to the Stage (File>Import>Import to Stage). Select the image and convert it to a Movie Clip (Control-click [PC: Right-click] and choose Convert to Symbol). Position the clip on the left side of the Stage. Double-click on Layer 1 and rename it "blur."

Step 2: Add the Blur

Select the Movie Clip. Click on the Filters tab in the Properties panel. Click the Add Filter (+) button, and choose Blur.

image 1

Step 3: Set the Blur

There are three settings for a Blur: Blur X, Blur Y, and Quality. Blur X and Blur Y control the amount of blur for the X-axis and Y-axis. The Lock icon next to the X and Y fields allows you to either apply separate settings to each axis (unlocked) or apply the same settings to each by clicking the button (locked). Quality controls how smooth the blur will be. The higher the quality the smoother the blur will appear; however, a higher quality makes Flash work harder and might slow down the playback of the movie.

Our image will be moving from left to right or horizontally, so we'll increase the value of Blur X and set Blur Y to 0. In this example, I used 45 for Blur X and set the Quality to High. You should choose the settings that look best for your image.

image 2

Step 4: Add another Instance

Click the Insert Layer icon to insert a new layer above the blur layer. Rename the layer "image." Drag another Instance of the Movie Clip from the Library to the image layer. Position the Instance so that the blurred Symbol is behind the image.

image 3

Step 5 : Add Keyframes

Insert Keyframes (F6) in frame 10 of both layers. Move both the image and the blur to the right side of the Stage. Control-click (PC: Right-click) in frame 1 of each layer and select Create Motion Tween from the menu. Choose Control>Test Movie. Pretty good, but with a few adjustments we can make the effect a little more realistic

Step 6 : Adjusting the Timeline

In this Step we'll make the blur start after the fish and then disappear when the fish stops.

Click on the Keyframe in frame 1 of the "blur" layer to select it. Next, click-and-drag the Keyframe to frame 2. You should see an empty circle in frame 1 showing that it's an empty Keyframe. Repeat the procedure in frame 10, except move the Keyframe to frame 9. Control-click (PC: Right-click) in frame 10 and choose Insert Blank Keyframe from the menu. An empty Keyframe means there's nothing on the Stage in the frame. Choose Control>Test Movie to see the results.

image 4

Step 7 : Stop the Timeline

To stop the movie from looping we need to add a stop action to the Timeline. Insert a new layer above the image layer. Rename the layer "actions." Click in frame 10 and insert a Keyframe (F6). Choose Window>Actions to open the Actions editor. Click the Global Functions category then click Timeline Control. Double-click "stop."

image 5
Click to enlarge

Step 8 : Turning the Animation into a Movie Clip

As usual, after creating an animation on the main Timeline, I've decided that I would like to have it contained in a Movie Clip so that I can reuse the animation. Fortunately, it's simple to do.

Click on the actions layer's name with the Selection tool (V). Hold the Shift key down and click on the blur layer's name. All of the layers should be selected. Control-click (PC: Right-click) on the selected frames. Choose Copy Frames from the menu.

image 6

Step 9 : Insert New Symbol

Choose Insert>New Symbol. In the New Symbol dialog enter a name and choose Movie Clip for the Behavior. Click OK. Control-click (PC: Right-click) in frame 1 of the new Symbol's Timeline. Choose Paste Frames from the menu. Click the Scene 1 button at the top of the Timeline to return to the main Timeline.

image 7

image 8

Step 10 : Add Additional Instances

Insert a new layer above the image layer and rename the new layer "images." Next, drag as many Instances of the new Symbol onto the Stage as you would like. Test your movie to watch all of the action!

Creating the Illusion of Speed with Motion Blur

subscribe to newsletter