Flash Explained

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.

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.

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.

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.

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.

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

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.

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.

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

Comments

Submit a comment