Frunder Bolt

Flash - Blur Effect with Easing Tutorial

Effect Name:
Difficulty:
Tutorial Style:
Time:
Download fla:
Blur Effect with Easing
1/5
Exhaustive
10-15min

Overview
 

Before starting this tutorial make sure you have the following.

  • Macromedia Flash 8 | Flash MX 2004 | Flash MX | Flash 5 |
  • Adobe Photoshop.
  • Basic knowledge of Macromedia Flash.

You will be creating the following effect.

Creating the Effect
First off we need to create the images for our effect. Since flash does not have the ability to blur an image (well, Flash MX 2004 has the ability to blur, but it is a ghetto blur and I would not reccommend it.) I will use Adobe Photoshop to blur the image.
1)

Select the image you want to blur. For the purpose of the tutorial you can use the image I used here. Or you can start from scratch and use this image here.

Note: We allow creativity in our tutorials. Thus as we proceed, there will be options so that your effect will come out different then the one we have made here. But if you are new, just stick to the originals.

2)

Select the size of the image / blur effect. Keep in mind that whatever size your image is will be the same size as the blur effect. I chose 500x300.
3)

Create the first image. Once you have the size established we want to "Save for Web".

  • File > Save for Web... (Shortcut: Alt+Shft+Ctrl+S)
  • PNG 24 (Best quality for flash)
  • Save in a directory you'll be able to find soon.
Blur Effect with Easing Tutorial

 
4)

Create the second image. Now we are going to create the blur effect. With your image layer selected, go to:

  • Filter > Blur > Gaussian Blur
  • Make Blur Radius 3 or greater. I chose 6.7 pixels.
  • Save in a directory you'll be able to find now.

Blur Effect with Easing Tutorial
5)

Open Flash and create a new Flash Document. Make the document properties as follows. Open the properties window:

  • Windows > Properties (Shortcut: Ctrl+F3)
  • Size: 500 x 300 pixels
  • Frame Rate: 30 fps

Blur Effect with Easing Tutorial
6)

Insert a new movie symbol. Go to:

  • Insert > New Symbol (Shortcut: Ctrl+F8)
  • Choose Behavior: Movie Clip
  • Name it whatever you want.

Blur Effect with Easing Tutorial
7)

Create a new layer on the timeline. The timeline window can be found:

  • Window > Timeline (Shortcut: Ctrl+Alt+T)
  • Then click on the new layer button.

Blur Effect with Easing Tutorial
8)

Import the images. Make sure to add one image per layer. Depending on whether you want the effect to go from blur to clear or from clear to blur depends on what image is on the bottom layer. The image on the bottom layer is your starting image. I put the clear image on the bottom so that the effect goes from clear to blur.

  • Select the layer you want to import to (See image above).
  • File > Import > Import to Stage (Shortcut: Ctrl+R)

Blur Effect with Easing Tutorial

Convert the image to a symbol. This needs to be done so that we can add behaviours to this symbol.

  • Highlight the image
  • Modify > Covert to Symbol (Shortcut: F8)
  • Choose Behavior: Movie Clip
  • Name it whatever you want.

Blur Effect with Easing Tutorial

REPEAT STEP 8 FOR THE OTHER LAYER

Note: Only the top layer needs to be a movie clip, but I find it good practice to convert all native bitmaps to movie clips.

9)

Change top image instance name. This part needs to be done eaxactly as written, becuase the action script depends on it. Make sure your properties window is still open.

  • Windows > Properties (Shortcut: Ctrl+F3)

Select the top image (Should be in layer 1)and locate the properties window. Put in the following instance name:

  • Instance Name: topImage

Blur Effect with Easing Tutorial
10)

Go to the main stage and add your main movieclip. To go to the main stage click on Scene1 by your timeline window.

Blur Effect with Easing Tutorial

Open the library window and drag your main movie (Entitled: Blur Effect) onto the main stage and make sure it is centered.

  • Window > Library (Shortcut: Ctrl+L)

To make sure the movie matches the same size and width as the stage do the following.

  • Select your main movie once dragged to the stage.
  • Go to the properties window.
  • Make sure the x: and y: values are 0.

Blur Effect with Easing Tutorial

 
11)

Add the action script. Make sure the Actions window is open and that your main movie is still selected. Go to:

  • Window > Development Panels > Actions (Shortcut: Ctrl+F9)
  • Select the movie clip instace on the stage.
  • Add the following ActionScript. Copy and Paste.

You're Done!
Finshing Touches
1)

To add the finishing touches. First we want to make sure that the image quality will be at it's best! Go to:

  • File > Publish Settings
  • Click on the Flash tab.
  • Make the JPEG quality 100% (This is only if you used JPEG's).

Blur Effect with Easing Tutorial

 
Need Help?
 


If you need help. Go ahead and post your questions in the forum. The forum can be found here.

http://www.frunder.com/supportforum/viewforum.php?f=13