Difficulty Level: Intermediate

Requirements: Flash 8+

Topics Covered: BlurFilters, Tween Class

Assumed Knowledge: Older version

Sources: see bottom of page
 

Blur Transition Effect (updated for Flash 8+)




Once again, we find ourselves back to our favorite girl. I am assuming you are familiar with the previous tutorial on the Blur Transition Effect. If not, go read it. Having an understanding of Flash’s history and how to do this effect pre-Flash 8 will only help you. So let’s continue.

So here is the complete code used to make the effect.

import flash.filters.BlurFilter;
import mx.transitions.Tween;
import mx.transitions.easing.Strong;

var totalBlur:Number = 8;
var noBlur :Number = 0;

var blur:BlurFilter = new BlurFilter(totalBlur, totalBlur, 3);
girl_mc.filters = new Array(blur);
 
var blurTween:Tween;
girl_mc.onRollOver = function() {
   blurTween = new Tween(blur, "blurX", Strong.easeOut, blur.blurX, noBlur, 1.0, true);
   blurTween.onMotionChanged = function() {
      blur.blurY = blur.blurX;
      girl_mc.filters = new Array(blur);
   }
}

girl_mc.onRollOut = function() {
   blurTween = new Tween(blur, "blurX", Strong.easeOut, blur.blurX, totalBlur, 1.0, true);
   blurTween.onMotionChanged = function() {
   blur.blurY = blur.blurX;
   girl_mc.filters = new Array(blur);
   }
}

 

Download the sources and open the fla. Notice unlike the previous tutorial, in the library there is only 1 image and a movieclip of that image. This is all we need to make the blur effect with Flash 8. With Flash 8, the developers at Macromedia (now Adobe) added some neat features we can do with movieclips. So now that we know what is in the fla, lets look at the code.

 

The first line of code imports the new Flash 8 class BlurFilter. This is the class that is responsible for our transition effect. The next 2 lines also import classes, but these classes are responsible for animating the blur. As that may be confusing, let me repeat: the BlurFilter class blurs the image to a specified amount and the Tween class animates the blur by changing the blur amount. Still with me? (As a side note, the Tween class is aviable to use as of Flash 7, so stop using the laco tweens :p). If you are still confused, please read the livedocs for further explanation about these classes.

 

The next block of code (lines 5 and 6) set variables used that get assigned to the strengths of our blur. 8 is a relatively high blur while 0 is no blur. Experiment with your own settings here.

 

Line 8 sets up the intial blur so that when you compile the movie, the image appears blurred right away. To use a class we call it using new Class. The BlurFilter class takes 3 optional parameters. I went ahead and set them to totalBlur (our previous variable) for the blurX and blurY parameters. The last parameter is the quality of the blur. Typically we want good quality so I set this to 3.

 

Line 9 sets the filters property of our movieclip that is on the stage: girl_mc. The filters property expects an Array of all the filters that you wish to apply to the movieclip. In our case, we only wish to apply one filter: our instance of the BlurFilter class, blur. Often you will see that line appearing as this girl_mc.filters =  [blur]; which means the same thing. “[]” is just a short cut for saying new Array().

 

Lines 13-19 are what you have been waiting for (cue Star Wars theme). Line 13 simple say do this when you roll over this image, but hopefully you already know that much. Line 14 is much like 8: we are making another instance of a class. This time we are making an instance of the Tween class. The Tween class expects the following parameters in the following order: object that holds the property to tween; property to tween, type of easing, starting value for the tween, ending value for the tween, duration of the tween (can take seconds or frames), and wither the duration is in seconds or frames. In our case, we pass“blur” as the first parameter because it holds the property we want to tween: the blur properties. Next we pass the property: “blurX”. Don't worry about “blurY” for now because we’ll take care of that in a moment. The third parameter is the type of easing that should occur over the course of  the tween. There are many different flavors of tweens that can be applied here. Once again please consult the livedocs for an elaboration of them. The next parameter is what value the tween should begin with. Since I want the tween to start where the current blur value (whatever that value may be), I simply pass it the blurX property of our instance blur like so blurr.blurX. We want the tween to go all the way to no blurring which is 0. Therefore we pass noBlur (a variable holding the number 0 from line 6) as the next parameter. The tween  should last for 1.0 second total, so that is the value passed. And the last parameter is “true” because we want the duration to be measured in seconds and not frames.


This line in the code blurTween.onMotionChanged = function() { simply says, in plain english, "Everytime the blurTween instance is changed, perform the following opperations." This is where we set the blurY value. Here we simply set it to the same value as blurX making the image blur both horizontally and vertically at the same values. The next line is one you have already seen before: it reset the filters that the movieclip uses. We must reset this property everytime one the filters changes. If you do not, the filters will not be applied to the movieclip.
 

The rest of the code simply reverses the process when the cursor is rolled off the image.

 

That is it! That is dynamic blurring thanks to the new possibilities of Flash 8. One thing to note is that some of Flash 8’s new features can bring a system to its knees: it will smack the users CPU around and call it dirty names. This happens with larger images because Flash is rendering width * height pixels each time the methods are called. This means with larger objects more calculations are required, and thus more CPU is needed. Be careful to pay attention to this. Some of your visitors may not have a P4 class processor like you do. If it maxed out your CPU, imagine what it is doing to your grandma's computer.

 

Finally I lowered the frames per second from the original tutorial, from 60 to 34. 60 is a bit extraneous and not very typical, in my humble opinion.

 

I sincerely hope you enjoyed the tutorial and learned something. Happy Flashing….wait…keep it in your pants. :p