Make Money with Photoshop

Join our mailing list to receive the ShowAndTell-Graphics Newsletter. You will get an email whenever a new tutorial is added.

At ShowAndTell-Graphics we value your privacy. Please view our privacy policy.

Google
 
Do you want to know how it's done? Learn how to use Photoshop the easy way!

Fading Navigation Button
Flash MX 2004 Tutorial

This is the easiest way I have found to create a hyperlink button for your website using Flash MX 2004. The button will fade from one color to another when you mouse over it and when you remove the mouse it will fade back to the original color. OK let's get started!

Open a new Flash document. Choose Insert/New Symbol (Ctrl+F8).

Right click on the stage and select Document Properties. (Ctrl+J)

fade 1

In the Document Properties Box choose 150 pixels for width and 50 pixels for height. Change the frame rate to 30.

fade 2

In the "Create New Symbol" box choose movie clip. Name the symbol MC Button. Click OK.

fade 3

Choose the rectangle tool, and drag out a rectangle on the stage. This will be our button. Don't worry if your button is a different color than mine is right now.

fade 4

Hit Ctrl+A to select our box and select the properties panel in the lower left of the screen. Use 150 for W and 50 for H. This will match our button size to the document size. Make sure you put 0 in the X and Y axis boxes. This will align the button exactly with our document. Here you can also select the paint bucket and choose whichever color you like. I have chosen a shade of blue.

fade 5

Right click in frame 15 on the time line and select Insert Keyframe. This will make a copy of frame 1 in to frame 15. Frame 1 was created automatically when we made our button.

fade 6

Now with the button selected (you can tell if it is selected by the grid that is over it. If it is not selected hit Ctrl+A) click on our paint bucket again in the properties panel at the lower left of the screen. Select the color you would like your button to fade to. I have chosen a darker shade of blue.

fade 7

Click on any frame between 1 and 15.

fade 8

Go back down to the properties panel and choose Shape from the Tween drop down menu.
fade 9

Next we will want to double click on layer one and rename it "Fade".

fade 10

Click on frame one, and make sure your button is selected. Right click on it and hit Copy.

Now we need to make a button symbol. Select Insert/New Symbol as we did before. This time select Button and name it "B Button"

You should now be in the button symbol editor. Click in the hit box and hit f7. This is another way to insert a Keyframe.

fade 11

Right click in the stage area and hit paste. This let's us know that anywhere on the button will be a hit spot for our hyperlink.

Hit Ctrl+L to open the library to the right of the screen. This will show our button "Movie Clip" symbol and our button "button" symbol.

fade 12

Double click on the MC button symbol in the library. Hit the Add New Layer button. Name this layer Hit Spot.

fade 13

You will need to click and drag the Hit Spot layer so it is underneath the Fade layer.

fade 14

With the Hit Spot layer selected, drag your button symbol (B Button) from the library to the stage. Once again make sure that your X and Y in the properties panel are set to 0.

Next we will add some action script to make everything do what it is supposed to do.

Select the Fade layer and click on frame 1. Hit F9 to open the actions panel. Make sure you have Global Functions/Timeline Control open.

fade 15

In the blank actions panel window copy and paste this code into it.

Click on frame 15 of the Fade layer and paste in this code.

OK we are almost there. The next thing you will want to do is click on Scene 1 above the timeline.

fade 16

Next you will have to drag a copy of MC Button from the library to the stage. As usual X and Y must be set to 0.

On the right side of the screen is the behaviors panel. Click on the + sign. Choose Web/Go to Web Page.

fade 17

In the go to URL box, tpye in the web address of your choice.

Now we will need to test it and make sure that everything works.

Click File/Publish Preview/HTML.

This will open a browser window to show your new wonderful button! With any luck at all it will fade in and fade out and link to whatever web page you told it to go to when you click on it.