Blur Flash menu using the Action Script

21.8.2009, 13:30
Submited in: Flash | Total Views: 28808

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create blur flash menu using the action script code and some special flash tricks. Using this lesson, you will also learn how to import any images into a flash library, how to convert it into a movie clip symbol, how to create instance name, how to apply blur filter on it through a single ActionScript command and much more. You can use this menu for some web site. Let's start!


Step 1

Download the sample images for this tutorial that you’ll use to quickly create this lesson. Unpack the zip file and place the images someplace where you will easily find them.

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 450 pixels and the height to 94 pixels. Select any color as background color. Set your Flash movie's frame rate to 28 and click ok.

Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find a three images (image1, image2) and Shift-click to select them. Then click open. If you now open your flash library (Ctrl+L key) you will see a three images that you just imported. See the picture below.

Step 4

After that, using the Selection Tool (V) and drag and drop technique, move the images from the Library on the flash stage and place it on the position like it is shown on the picture below.

Step 5

Select now just one image and hit F8 key (Convert to Symbol) to convert it into a Button Symbol.

Step 6

While the new made Button Symbol is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Button Symbol "button1". See the picture below!

Repeat this process also for other two images, but for instance name set button2 and button3.

Step 7

Call the current layer Blur menu. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 8

Create a new layer above the layer menu and name it action script.

Step 9

Select the first frame of layer action script and go to the AS panel (F9). Then, enter this code inside the actions panel:

import flash.filters.BlurFilter;
var blurred:BlurFilter = new BlurFilter(5, 5, 4);
var myFilters:Array = [blurred];
button1.filters = button2.filters = button3.filters = myFilters;
button1.onRollOver = button2.onRollOver = button3.onRollOver = function() {
 this.filters = null;

button1.onRollOut = button2.onRollOut = button3.onRollOut = link4_btn.onRollOut = function() {
 this.filters = myFilters;

That's it!

Have a nice day!

Download exmple

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials

Resources Worth visiting