Flash Explained

Learn Flash easily.

Applying the blur filter to buttons via ActionScript

October 23rd, 2008 | Author: Luka | Category: ActionScript Menus & Interfaces


In one of my previous tutorials, I have explained how to make a cool sharp/blur effect by applying filters to symbols on the stage and making transitions via motion tweens. This time, I will show you how to apply the blur filter to objects in Flash through some simple ActionScript code. You will learn the following:

  • How to import an image in Flash,
  • How to convert a bitmap image into a symbol,
  • How to import the blur filter through a single ActionScript command,
  • How to define the parameters of the blur filter,
  • How to remove the blur filter dynamically and more.

Below is the live Flash example of what you are going to create in this tutorial. Move your mouse over the blurred buttons to see how they sharpen once the cursor comes into contact with them.

Using images to create button symbols in Flash

1 Open a new Flash document.

2 Download the sample images for this tutorial that you'll use to quickly create a set of nice button symbols. Unpack the zip file and place the images someplace where you will easily find them.

3 Select File > Import > Import to Library. In the file explorer window that appears, find the four images (image001.png... up to image004.png) and Shift-click to select them all. Then click Open. All four PNG images will appear in your document's Library which you can access by selecting Window > Library.

The imported bitmaps as they appear in the Library.

4 Drag out an instance of each image from the Library onto the stage. Arrange them so that they look nice, like shown in the screenshot below.

The four bitmaps arranged nicely on stage in Flash.

As you may have noticed, I have used PNG images in this tutorial. I love PNGs — they handle transparency much better than transparent GIFs! This gives you the possibility to put them against any background color or graphic and they will still look excellent. On the other hand, when you have a transparent GIF on a background that doesn't match its edge colors, you will see the jagged edges of the image and that just looks bad.

5 Select the first image by clicking on it with the Selection tool (V).

6 Select Modify > Convert to Symbol (shortcut key: F8). In the window that appears, select Button as type, call it button 1 and click OK.

Conversion of a bitmap into a symbol.

7 Repeat the previous step for the three remaining images: convert them to buttons and call them button 2, button 3 and button 4.

8 When finished with the above step, select the first button by clicking on it once.

9 Go to the Property inspector below the stage and find the Instance name input field. Type link1_btn inside it and hit Enter to confirm.

The Instance name of the first button.

10 Repeat the previous step for the remaining buttons — assign them the instance names link2_btn, link3_btn and link4_btn.

The instance names are a must if you wish to control your buttons programatically, via ActionScript. And they must all be unique — no two symbols can have the same instance name in Flash.

Fine! Now let me explain you how easy it is to blur the buttons with some really easy and minimal ActionScript code.

Top of page

Creating the ActionScript code for dynamic application of the blur filter

11 Lock the current layer and call it buttons. Make a new layer and call it actions.

Making the layer for ActionScript code.

12 Click on the first frame of the actions layer to select it.

Selecting the first frame of the actions layer.

13 Select Window > Actions (shortcut key: F9) to open the Actions panel.

14 Enter the following code into the Actions panel:

import flash.filters.BlurFilter;
var blurred:BlurFilter = new BlurFilter(5, 5, 4);
var storedBlur:Array = [blurred];
link1_btn.filters = link2_btn.filters = link3_btn.filters = link4_btn.filters = storedBlur;
link1_btn.onRollOver = link2_btn.onRollOver = link3_btn.onRollOver = link4_btn.onRollOver = function() {
this.filters = null;
}
link1_btn.onRollOut = link2_btn.onRollOut = link3_btn.onRollOut = link4_btn.onRollOut = link5_btn.onRollOut = function() {
this.filters = storedBlur;
}

15 Test your movie — select Control > Test Movie to do that. Roll your mouse over each button and see how every one of them comes into focus — gets "unblurred", to say so :). In case the change does not occur, check if you have written the instance names exactly the same in the code and in the Property inspector.

I will explain to you now how the above code actually works.

Top of page

The usage of the blur filter in ActionScript explained

The first thing that you must do in order to use a filter effect programatically is to import its class. The first line in your code does exactly that:

import flash.filters.BlurFilter;

This has to be done because the class that tells Flash how to use this filter isn't embedded automatically in Flash, you have to import it. Now why this is so, I don't know. All I need to know is how to use it to be able to achieve the desired effects. So once the importing has been done, you can use the BlurFilter class to apply the blur filter to movie clips, buttons and text fields.

You don't necessarily have to import a filter class in ActionScript at the beginning of your code — you may do it later. But importing a class at the outset of your code is a better practice: you don't have to remind yourself to do it later, and also, you have the chosen filter at your disposal from the very start.

The next line of ActionScript code creates a new instance of BlurFilter and defines its parameters, so that you can obtain the desired visual effect:

var blurred:BlurFilter = new BlurFilter(5, 5, 4);

As in most cases when programming in ActionScript, you first have to create a variable, which is called blurred in this case (I chose this name arbitrarily, you can use whatever you want). This variable is of the BlurFilter type, of course, because it will hold a BlurFilter object inside itself.

On the right side of the assignment operator (=) is the constructor method with which you create a new instance of the BlurFilter class which will automatically be stored inside the blurred variable. This method has three parameters:

  • The first one is the blurX property, which defines the amount of blurring in horizontal direction,
  • The second property is blurY, which tells Flash how much blurring to apply in the vertical direction,
  • And the third property is the quality of the blur.

The blurX and blurY properties can have a value between 0 and 255 (with 0 being no blur applied at all and 255 the maximum value). The quality value can range between 0 and 15, where a higher number means more blur and also better rendering of the effect.

If you want a highly blurred object, it is better to increase the value of the blurX and blurY properties, rather than the value of quality, because the higher the quality, the slower the rendering of the effect. A quality of 3 is considered high. As for the blurX and blurY properties, if you assign to them values that are a power of 2 (meaning 2, 4, 8, 16, etc), the effect will be rendered more quickly then in cases where other values are being used.

Try playing around with these values to see what you'll get. For example, try setting the blurY value (the middle one) to zero and you'll get a motion-like effect, because only the horizontal blur will be applied.

The filter that you created is applied to your buttons via their filters property. This property must receive the filter(s) as elements of an array (an array being a variable that can hold multiple values). And that's why the next line is placing the blurred instance of the BlurFilter object inside the newly made myFilters array:

var myFilters:Array = [blurred];

As you can see, when you place elements inside an array, you must place them between angled brackets: [ and ]. And now, the filter is ready to be applied to your buttons. This operation is made within a single line of code for all the buttons:

link1_btn.filters = link2_btn.filters = link3_btn.filters = link4_btn.filters = myFilters;

There is no need at all to apply the filter to each button separately (for example: link1_btn.filters = myFilters, link2... etc), when you can make your code more compact like the one shown above.

So the above line of code blurs all the buttons — they are going to get blurred immediately.

Now comes the functionality of the onRollOver event handler for each button. Again, since all the buttons react the same, all the events are defined in a single line of code:

link1_btn.onRollOver = link2_btn.onRollOver = link3_btn.onRollOver = link4_btn.onRollOver = function() {
this.filters = null;
}

The onRollOver event handler serves to tell Flash what will happen when the user has rolled her mouse over a button. In this case, it executes only a small piece of code:

this.filters = null;

By assigning the null value to the filters property of a button, you effectively remove all the filters that were applied to it.

And now comes the functionality of the onRollOut event handler for all the buttons (this handler handles what happens when the mouse has been moved away from the button):

link1_btn.onRollOut = link2_btn.onRollOut = link3_btn.onRollOut = link4_btn.onRollOut = link5_btn.onRollOut = function() {
this.filters = myFilters;
}

The code inside the event handler re-applies the values contained within the myFilters array to the button's filters property, blurring it again.

If you want to explore the possibilities of using the blur filter in more depth, I suggest you check out the online Adobe documentation on Blur filters.

And that's it! Using the blur filter programatically was really easy, wasn't it? I will make other tutorials in the future where I'll explain the inner workings of the filters in ActionScript in more depth, along with a description for every filter. Until then, check out more ActionScript tutorials or design tutorials.

Download the source fla file

Be Sociable, Share!

Comments

Submit a comment

  • chrisdoris Nov 16, 2008 at 7:19 pm

    nice tutor 🙂
    but when i try to change with another image, the blur effect won’t working. Why is it like that?

  • Luka Nov 18, 2008 at 10:30 am

    chrisdoris: What do you mean exactly? Are you changing the image inside the button?

  • nuloco Jan 6, 2009 at 11:26 pm

    Hello Luka.
    Is it possible to ease the blur effect? I mean, have a smooth transition between blur and sharp?
    Thank you in advance for share your knowledge.

  • chris Jan 14, 2009 at 5:45 pm

    Hello,
    I am trying to do something similar to this and can’t find how to do it anywhere…

    I have 3 buttons created. What I am trying to do is make it so that when you mouseover one of them, the other two blur, how do i achieve this effect?

    Thanks

  • Antoan Jan 29, 2009 at 4:15 pm

    Hey,
    Nice tutorial – it helped me a lot 🙂 However, there was a problem when I used the blurring code – I successfully blurred a MovieClip instance but the buttons inside the movieclip don’t seem to react on onRollOver and onRollOut =O They just stay in the way they are when the mouse isn’t over them 😐
    Thanks 🙂

  • ashwini Feb 2, 2009 at 2:01 pm

    Its good and very easy to learn thanks for ur tutorial.

  • Sumantra Dutta Feb 28, 2009 at 7:12 am

    I want code for Different Blur value (eg var blurred:BlurFilter = new BlurFilter(5, 5, 4);), to use.
    I want to set the different value at differnt condition, but it should control by a single action script.

  • Sumantra Dutta Feb 28, 2009 at 7:35 am

    How can i store multiple blur value, in array and how can i call that different value at different conditions.

  • lock Apr 23, 2009 at 9:40 am

    though it`s a late response…
    @Antoan:

    your action needs to know from where it can get the buttons to be blured.. so instead of:
    this.filters = myFilters;
    use your movieclip instance name in front (ex. name your movie clip -blur_mc)
    it will be like this:

    blur_mc.this.filters = myFilters; (i`m not sure but u may be forced to change the whole actionscript)

    @chris:

    i did the same thing, so here you go:

    import flash.filters.BlurFilter;
    var blurred:BlurFilter = new BlurFilter(5, 5, 4);
    var myFilters:Array = [blurred];

    link1_btn.onRollOver = function() {
    link2_btn.filters = link3_btn.filters = link4_btn.filters = myFilters;
    }
    link1_btn.onRollOut = function() {
    link2_btn.filters = link3_btn.filters = link4_btn.filters = null;
    }

    link2_btn.onRollOver = function() {
    link1_btn.filters = link3_btn.filters = link4_btn.filters = myFilters;
    }
    link2_btn.onRollOut = function() {
    link1_btn.filters = link3_btn.filters = link4_btn.filters = null;
    }

    link3_btn.onRollOver = function() {
    link1_btn.filters = link2_btn.filters = link4_btn.filters = myFilters;
    }
    link3_btn.onRollOut = function() {
    link1_btn.filters = link2_btn.filters = link4_btn.filters = null;
    }

    link4_btn.onRollOver = function() {
    link1_btn.filters = link2_btn.filters = link3_btn.filters = myFilters;
    }
    link4_btn.onRollOut = function() {
    link1_btn.filters = link2_btn.filters = link3_btn.filters = null;
    }

  • Wendy Oct 13, 2009 at 7:09 pm

    I was trying to find the posting of some of your other work – specifically how to do a drop down menu in Flash. Do you have that still posted somewhere on FlaashExplained? If not, would you be able to send it to me. Thank you.

  • […] Interesting effect, huh? There is no end to what you can do with filter effects in Flash. Learn more by reading my lesson on the dynamic use of the blur filter. […]

  • marcina Mar 3, 2010 at 9:08 am

    i want code for i click button then hte button is blur

  • […] […]

  • kumar May 20, 2010 at 1:28 pm

    Nice Article…I did one flash that one image will move from left to right i want to blur the image when it goes to right. Can you help me how to do that.

    thanks,
    Kumar

  • Avkash Aug 14, 2010 at 2:08 pm

    this is very informative site..for the beginner in flash its provide very good inofrmation

  • Daniel Nov 5, 2012 at 6:30 am

    Thanks to Luka for posting this.

    For those of you looking to do what chris (Jan 14, 2009 at 5:45 pm) queries above, there’s a good solution on the Adobe Forums:

    http://forums.adobe.com/message/2514770

    All buttons are clear, and on mouse-over the others blur out.

    Hope this helps someone.

    cheers,
    Daniel

You must log in to post a comment.