Modern photo button with url

Date: 8.12.2007, 20:6    Total views: 37041

In this Flash 8 lesson explained in extreme detail, I will show you how to create modern flash button with url using some photo. You will also learn how to apply flash filters on button, how to animate it, how to create instance name, how to apply action script code to make it more powerful and much more. You can use this button for any web site, exceptionally flash sites.



Step 1

Start flash. Select Modify > Document (shortcut key: Ctrl+J ) and set your dimensions as whatever you like. Select #5D7380 color as background color.Set your Flash movie's frame rate to 32 and click ok.





Step 2


Find any photo which you like to use for this example, or just download my photo, to quickly create this lesson.;)



Step 3

Choose File > Import > Import to Stage (Shortcut key:Ctrl+R). Then, Import my photo on flash stage.

Step 4

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



Step 5

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. See the picture below.



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

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



Step 8

Click on frame 15 and press F6 key. After that go to the Properties Panel (Ctrl+F3) below the stage and click on Filters tab. After that, click on the plus icon and select Adjust Color filter.Then, make the adjustements as follows:

1.Blur X,Y: 16
2. Strenght: 100
3. Quality:Low
4.Color:White



Now, you have this:



Step 9

Choose right-click anywhere on the gray area between the frame 1 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



After that, go back on frame 16, take the Selection Tool (V) again and click once on the photo to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage and for Blur X and Y set 0. See the picture below.



Step 10

Repeat this process also for frame 18.

Step 11

Go back on the main Scene (Scene 1).



Step 12

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 invisible button.

Step 13

Select layer invisible button and Create the invisible button ove the photo. See the picture below.



Step 14

Take the Selection Tool (V), click once on the invisible button to select it and go the Action Script Panel (Shortcut key: F9). Then, enter the following action script code inside the actions panel:

on (rollOver) {
_root.mouse_over_photo = true;
} on (rollOut) {
_root.mouse_over_photo = fstartlse;
} on (release){
getURL("http://www.flashfridge.com/");
}

Step 15

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

Step 16

Click on the first frame of layer action script , go again to the Action Script Panel (F9), and enter this code inside the action panel:

_root.photo.onEnterFrame = function() {
if (mouse_over_photo) {
_root.photo.nextFrame();
} else {
_root.photo.prevFrame();
}
};

We're done!

Test your Movie (Ctrl+Enter) and 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