Interactive photo button

Date: 7.8.2009, 14:56    Total views: 42630

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create interactive photo button using the action script code and some special flash tricks. You can use this button for any web site. Using this lesson, you will also learn how to import any photo into a flash stage, how to apply action script code on it, how to animate it and much much more!



Example:

Move your mouse cursor over the photo below!



Step 1

First, find any photo which you like to use for this lesson as button.



Step 2


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

Step 3

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

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import any photo into a

Step 5

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



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, hit again F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 8

Click now on frame 15 and hit F6 key.

Step 9

Go back now on the first frame, 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 Adjust Color 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

It's time for action script, so create a new layer above the layer 1 and name it action script. Click now on the first frame of layer action script 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 12

Click now on frame 15 of layer action script and hit F6 key. While you're still on frame 15, go again on action script panel (F9) and enter this code inside the actions panel:

stop();

Go back now on the main scene (Scene 1) and test your movie (Ctrl+Enter).

Enjoy!

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar