Learn Flash Blurring an Image	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Blurring a Picture

Free Flash Tutorial

The aim of the tutorial is to learn how to make a Movie Clip blur in various ways: You will learn how to create a transition effect between an image in focus and a blurred image either by using an animated Tween effect or by using ActionScript.

Example: Download the Flash file  Int 127a

Method 1: Blurry Cat using Tweening to create animated transition.

Note: For Method 1: See Steps 1 to 5

Example: Download the Flash file  Int 127b

Method 2: Same as above but using ActionScript to create transition effect.

Note: For Method 2: See Steps 6 to 7

Example: Download the Flash file  Int 127c

There is no reason why the effect cannot be reversed.

Method 1: Blurry Cat using Tweening


Step One: Blurring an Image

1. Find yourself an image you want to use. Make a copy of that image. You can use any image you want as long as the copy is the same size as the original.
2. Bring it into Photoshop or Paint Shop Pro (or any other Paint program) and perform a Gaussian Blur or other type of blur on the image.

Note: In PhotoShop to blur an image go to: Filter > Blur > Gaussian Blur

Original	Blurred

Note: if you wish to use these images right click (Mac: Ctrl click) on the images and select: Save Picture As...

3. Save your images as: Jpegs (or GIFs)

Step Two: Setting Up the Main Stage

1. Open a new: Flash file
2. Size the document slightly larger than the size of the images: Modify Document

Note: I made my Flash Movie 20 pixels higher and wider than the original images.

My document size is: 220 x 170 pixels
Both my Images are: 200 x 150 pixels

3. Make three Layers in your Flash document: 3 Layers
4. Named as shown below:
   
   
   Named Layers.
   
   
5. Import both images into your document: File > Import > Import to Stage
   
   
6. Put the blurred image into Frame 1 of the: Blurred Layer
   
   
7. Put the original image into Frame 1 of the: Original Layer
   
   
8. Open Your Align Panel: Window > Design Panels > Align
   
   
9. Select the Align to Stage Option:
   
   
   Align to Stage selected.
   
   
10. Use your Align Panel to center the images on the stage horizontally:  
    
    
11. Center the images vertically: 

Step Three: Creating the Symbols needed for the Animated Blur Effect

1. Right click on the Original image and select: Convert to Symbol...
   
   
   
2. In the dialog box that comes up name the Symbol: MC Cat (it will become MC Cat in the Library)
   
   
3. For Behavior select: Movie Clip
   
   
4. For Registration select: Centre
   
   
   Create New Symbol Dialog Box.
   
   
5. Again right click on the Movie Clip you just made and select: Convert to Symbol
   
   
6. This time name the Movie Clip: Cat Fader
   
   
7. If the Property Inspector is closed, open it: Window > Properties
   
   
8. Left click on the clip you just made (to select it) and give it an Instance Name: cat
   
   
   
   

Step Four: Creating the Animated Blur Effect - Method 1: Tweening

Important Note: If you wish to use the ActionScript Method (2) to create the Blur Effect skip this Step (four) and continue from Step five below.

1. Double click on Movie Clip: cat (to edit it)

Note: You will see a layer named "Layer 1" with one Frame containing the Movie Clip: MC Cat

1. Right click on Layer 1 and select: Inset Layer
   
   
   
   
2. Name the layer: actions
3. Right click on Frame 10 of the actions layer and select: Insert Keyframe
   
   
   
   
4. Do the same for Frame 20: Insert Keyframe
   
   
5. Do the same for Frames 10 in Layer 1: Insert Keyframe
   
   
6. Do the same for Frames 20 in Layer 1: Insert Keyframe
   
   
   Your layers ought to look like this.
   
   
7. Select Frame 1 of the actions layer: Frame 1
   
   
8. Open the Actions Panel: Window > Actions (F9)
   
   
9. Type the following into the Actions Panel:
   
   stop();
   
   
   The Actions Panel.
   
   

   Note for Flash MX: If you are using Flash MX you will need to be in Expert Mode to type:
   
   
   The View Options Menu in the Actions Panel for Flash MX.

10. Do the same for Frames 10 and 20 of the actions layer. Type:
    
    stop();
    
    
    Your layers will look like this: Note the three a's in the Actions layer.
    
    
11. Right click on Frame 1 of the "Layer 1" layer and select: Create Motion Tween
    
    
    
    
12. Do the same for Frame 10 also: Create Motion Tween
    
    
    Your layers will now look like this.
    
    
13. Go back to frame 1 and then click on the Movie Clip to select: MC Cat
    
    
14. In the Property Inspector change the Colour setting to: Alpha - 0%
    
    
    Alpha set to 0%.

    Note: Changing the Alpha effects a Movie Clips transparency. So setting it to zero makes the image completely transparent or invisible.

15. Do the same for frame 20 and then click on the Movie Clip to select: MC Cat
    
    
16. In the Property Inspector change the Colour setting to: Alpha - 0%

Step Five: The Invisible Button

Note: If you are using the ActionScript Method (2) to create your Movie you continue the tutorial from this Step.

1. If your Edit Bar is closed, Open it: Window > Toolbars > Edit Bar
   
   
2. Go back to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
   
   
   
   
3. Click on Frame 1 of the button layer: Frame 1
   
   
4. Draw a rectangle of similar size to the "cat" clip: Draw a Rectangle
   
   
   Draw a rectangle.
   
   
5. With the selection tool Double click on the rectangle: Stroke (Outline)
   
   
6. On your Keyboard press: Delete
   
   
7. In the Property Inspector change the X Y values so that the rectangle is exactly the same size as your image. Mine is: 200 x 150 pixels
   
   
8. Open Your Align panel: Window > Design Panels > Align
   
   
9. Select the Align to Stage Option:
   
   
10. Use your Align panel to center the images on the stage horizontally:
    
    
11. Center the images vertically:
    
    
12. Right click on this rectangle and select: Convert to Symbol
    
    
13. Name the clip: My Button
    
    
14. For Behavior select: Button
    
    
15. Click: OK
    
    
16. Double click on the button to: Edit Button
    
    
17. Right click on the Hit frame and select: Insert Keyframe
    
    
    Insert a Keyframe in the Hit Frame.
    
    
18. Click on the black Dot in the Up frame and on your Keyboard press: Delete
    
    
19. Go back to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
    
    
    Transparent Button in front of the Cat Movie Clip.
    
    
20. Turn off the visibility in the original and blurred layers:
    
    
    The turquoise represents an invisible button.
    
    

    Note: This semi-transparent turquoise is an Invisible Button. It will hold some Actionscript code. The turquoise area represents the active hit area (set to exactly the same size as the original and blurred cat clips).

21. Select the: Button
    
    
22. Open the Actions Panel: Window > Actions (F9)
    
    
23. Place the following code into the Actions Panel:

    Note: You do not need to type in the comments: // Grayed out text.

    on (rollOver) { //setup a Rollover event for the button clip

    currframe = _root.cat._currentframe; //currframe represents the frame that is currently playing in the "cat" clip at the time you move your cursor over the "button" clip
    
    displacement = Math.abs(currframe-10); //displacement represents the number of frames the Play Head is from the visible image in frame 10 in the MC Cat symbol. Frame 10 is the frame in which the "MC Cat" is completely visible, having an alpha of 100%.
        
    if (currframe == 1 || currframe == 10) { //if currframe is at the first frame (Frame 1, invisible) or at Frame 10 (completely visible) , let "cat" play.
        _root.cat.play(); //then allow "cat" to play
    }
    
    if (currframe == 20) { //if you are at frame 20 of "cat" (i.e., currframe==20), "rewind" "cat" by playing it from frame 2.
        _root.cat.gotoAndPlay(2);
    }
    if (currframe>10) { //if currframe greater than 10 (you are starting to fadeout). where you left off from fading out.
        _root.cat.gotoAndPlay(10-displacement); // This controls the position of the Play Head. The Play Head or place that the animation plays from will depend to the amount of fade out the animation previous reached. So if the image was very blurred it will come back into focus form a very blurred image and visa versa. To realise this effect I have used a variable called: displacement.
    }

    }
    on (rollOut) { //setup a Rollout event for the button clip

    currframe = _root.cat._currentframe; //defines the variable called: currframe
    displacement = Math.abs(currframe-10); // defines the variable called: displacement
    if (currframe <= 10) { //this time, if you rollout while fading in, start to fadeout.
        _root.cat.gotoAndPlay(10+displacement);
    }

    }
    on (release, releaseOutside) {

    trace("Meow!"); //put your own code here to do something like: gotoAndPlay etc.

    }

    Note: In the ActionScript above to type the line: | use: Shift + Back Slash \
    

24. If you have followed Method 1 your Movie is now complete. You will need to test the Movie: Control > Test Movie (Ctrl + Enter)

Method 2: Blurry Cat using ActionScript Fading

If you have used the Tweening Method (1) and followed all the steps above you have finished your Movie. For Method 2 you need to complete Steps 1 to 5 above except for step 4.

Step Six: The Button ActionScript

1. Select the invisible button by clicking on it: Button
2. Open the Actions Panel and type the following code:

on (rollOver) { //when you rollover set the variable dir (which stands for "direction of fade"). In this case a dir of 1 will make the "Cat Fader" clip fade in (see below to see how dir affects the fading).
    _root.dir = 1;
}
on (rollOut) { //upon rollout, change dir to -1 for a fadeout of "Cat Fader" (see below...)
    _root.dir = -1;
}
on (release, releaseOutside) {
    trace("Meow!"); //put your code to do something, like gotoAndPlay to another frame of your choice, here.
}

Step Seven: The Movie Clip ActionScript

1. Turn off the visibility of the: button layer
   
   
2. You should now be able to see the Movie Clip (Cat Fader) with the image of the cat in focus. Select the Movie Clip: Cat Fader
   
   
3. Place the following code into the actionscript editor:

onClipEvent (load) { //sets the initial condition of the "Cat Fader" clip. In this case we want the clip to be invisible. We also want to setup a variable, named speed, to represent the amount of alpha shed or gained by the clip in every frame.
    this._alpha = 0;
    _root.speed = 15;
    }

onClipEvent (enterFrame) { //setup an onClipEvent EnterFrame function for the clip that checks to see what value the alpha of the clip is at (represented by this._alpha)

    if (this._alpha < 0) { //if the alpha is less than zero set it to zero. (I know this sounds silly, but it can exist this way without immediate, obvious effect. Without this check it is possible to delay the fade-in since the alpha continues to drop numerically). Then set the direction (i.e., dir) to zero to prevent the alpha of the clip from changing until dir has a value of plus or minus 1.
        this._alpha = 0;
        _root.dir = 0;
    }
    if (this._alpha > 100) { //if the alpha is >100, set the alpha to 100 and set dir to 0 to prevent the alpha of the clip from changing until dir has a value of plus or minus 1.
        this._alpha = 100;
    _root.dir=0;
    }    
    this._alpha = this._alpha + (_root.dir*_root.speed); //if the alpha of the clip is between 0 and 100, increment the clips alpha by the value of speed.
}

That's it for Method 2. You should now test your Movie. As always, I hope you enjoyed the tutorial, and found it easy to follow. Thank you for your time!

Cross Ref: There is also a tutorial on how to create Animated Blurred Text which rushes on and off stage: Animated Blurred Text