Photo button with Inner glow effect and URL

Date: 18.12.2008, 1:40    Total views: 14961

In this simple Action Script tutorial, I will teach you how to create inner glow button with URL. To create this lesson, you need to use glow filter in flash 8 and photo. Using this lesson, you will also learn how to convert any photo into a Movie Clip Symbol, how to apply action script code on it, how to animate it and much more!



Example:



Step 1

First of all, save a picture below!





Step 2

Open a new flash document. Choose Modify > Document (Ctrl+J). Set the movie's width to 200 and movie's height to 150. Set your Flash movie's frame rate to 32. Select white any color as background color and click ok.



Step 3

Choose now, file > Import > Import to stage (Shortcut key: Ctrl+R) and import a photo that you just saved in step 1.

Step 4

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



Step 5

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

Step 6

Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.



Step 7

While the photo is still selected, press again F8 key (Convert to Symbol) to convert this picture again into a Movie Clip Symbol.



Step 8

Click now on frame 15 and press F6 key. While you're still on frame 15, Select 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! Then, select Filters tab from the left side. Click after that on the plus icon and select the Glow filter. Make the adjustments as follows:



Step 9

Go back now on the first frame, go again to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Glow filter. Make the adjustments as follows:



Step 10

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.

Step 11

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

Step 12

Select now the first frame and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

stop ();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

this.onRollOver = function(){
rewind = false;
play();
}

this.onRollOut = function(){
rewind = true;
}

this.onRelease = function(){
getURL("http://www.flashfridge.com");
}

Step 13

Click now on frame 15 and press F6 key. After that, go again to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();

That's it, we're done with lessons!

Download source file (.fla)