Advanced Photo button with URL

Date: 12.7.2010, 13:15    Total views: 19913

Today, Iím going to show you how to create advanced photo button with URL. To create this button you have to use Action Script Code and some special flash tips and tricks. This button can be used for some web site or for some presentation. Let's start!







Example:



Step 1

First, save the photo below that we will 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 width of your document to 230 pixels and the height to 310 pixels. Select any color as background color. Set your Flash movie's frame rate to 44 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 a photo that you just saved in step 1 into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

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



Step 6

While the new made Movie Clip 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 Movie Clip photo_mc. See the picture below!



Step 7

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

Step 8

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



Step 9

Click on frame 25 and press F6 key. While you're still on frame 25, select the Free Transform Tool (Q) and enlarge a photo like it is shown on the picture below!



Step 10

Select the Selection Tool (V) and click once on the photo that you just enlarged. After that, go to the Properties Panel (Ctrl+F3) below the stage. Select FIlters tab on the left side, click on plus icon and choose Adjust Color. Make the adjustments as follows:



Step 11

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 12

Select now frame 8 and hit F6 key. While you're still on frame 8 hit F6 key six times. After that, go back on frame 9 and hit delete key on the keyboard. Do this also for frame 11 and 13.



Step 13

Go back on the previous scene (Scene 1).



Step 14

Create a new layer above the layer photos and name it Invisible Button.

Step 15

Select the Selection Tool (V) and click once on the invisible button to select it. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

on (rollOver) {
_root.mouse_over_photo_mc = true;
} on (rollOut) {
_root.mouse_over_photo_mc = fstartlse;
}

on (release){
getURL("http://www.flashfridge.com/");
}

Step 16

Select the first frame of layer action script and go again to the Action Script Panel (F9). Aftre that, enter this code inside the actions panel:

_root.photo_mc.onEnterFrame = function() {
if (mouse_over_photo_mc) {
_root.photo_mc.nextFrame();
} else {
_root.photo_mc.prevFrame();
}
};

We're done!

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