Original and Blur photo on once click

Date: 20.10.2008, 17:1    Total views: 13260

In this simple action script lesson, I will show you how to make a blur photo, using the once click on the button and after that, how to make the original photo again, using again the once click! Using this lesson, you will also learn how to use Align Panel, how to apply Blur flash filter on any image, how to convert any image into a Movie Clip Symbol and much more! Let's go!



Step 1

First of all, find any photo which you like to use for this lesson.

Step 2

Open a new flash document.

Step 3

Choose now, file > Import > Import to stage (Shortcut key: Ctrl+R) and import a photo into a flash stage!

Step 4

While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:



Step 5

After that, while the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol.



Step 6

Click now on frame 20 and press F6 key. While you're still on frame 20, take the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, you will see Filters tab. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 7

Select now frame 20 again, using the Selection Tool (V) and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

stop ();

Do this also for frame 1.

Step 8

Take now again the Selection Tool (V) and double click on layer 1 to rename its name into a photo. After that, create a new layer above the layer photo and name it buttons.

Step 9

Click now on the first frame of layer buttons and create the Invisible Blur Photo button like it is shown on the picture below!



Step 10

Take now again the Selection Tool (V) and click once on the Invisible Button over the Blur Photo text. Then, enter this action script code inside the actions panel:

on (release) {
gotoAndPlay(20);
}

Step 11

Click now on frame 20 and press F7 key. Then, create on the same position Invisible Original Photo Button. See the picture below!



Step 12

While you're still on frame 20, take  again the Selection Tool (V) and click once on the Invisible Button over the Original Photo text. Then, enter this action script code inside the actions panel:

on (release) {
gotoAndPlay(20);
}

We're done!

Test your Movie and enjoy!

Download source file (.fla)