Learn how to create the flash button effect above.

Part1: Setting up the workspace.
Ok, let us get started. Create a new Flash Document, Click Modify Document, here is where you can change the background color, and the dimensions of your movie. Since I am creating a button I create mine using 300 by 50. This will change depending on the size and length or you page and button.  

Next create 4 layers, These layers will represent the number of buttons you want.

Click on Button 1 Layer, using the rectangular tool create the shape of your button. Fell free to use what ever color you want. I used the colors shown below as the boarder and background.

At this point you should have the button image below, this button is on button layer 1.

Using the selection Tool click and select the button, you will know that it is selected when a boarder comes around it. Next, copy (Ctrl+C) and click on each layer and paste (Ctrl+V) the button on that layer.

Buttons, on different layers.  

I will only apply the effect to one button. Right Click on button one as shown bellow.   

Converting to button.  

Click on convert it to Symbol, convert it to a button.  

convert to button  

 Click ok, Next right click on the button, and click Edit in Place as shown below.  

Edit in Place

With that you should see the window below, Insert Keyframe (F6) on each action (Up, Over, Down, Hit).

If you want to add a sound to your button, here is where you would do it. Click on the Over tab to select it, when you do that you will see the option below will come up in the properties window.

Import a sound to the library,( File Import Import To Library) and you will be able to select the sound from the menu above. 

Click on the Over action, and right click on button and convert it to a movie clip. Right click on the button again and click on Edit in Place. With that you should be in the window shown below.

Create another layer, and copy the button from the first layer and paste it onto the second layer as shown below.

Copy the button from the "Main Button" Layer and paste it onto the "Button Copy" Layer. Make sure the button that you copied is exactly over the main button. To do this open the properties window, click on the main button and the window below with the x and y value will come up.

Click back to the button you copied and type in the exact same numbers for the x and y values.

On frame 10, Insert a keyframe (F6) on both button layers as shown above. With that click on the Button Copy layer, right click and Create Motion Tween on the first and last layers.

After creating the Motion Tween your frame should look like the image below.

While still on the last layer of the Button Copy layer, Click on the Free Transform Tool and click on the button as shown below.

To make it a little easy to stretch, click View Snapping and uncheck everything. While still on the last frame of the "Button Copy" layer stretch the button out a little.

Click on the button to select it, and change the color setting to Alpha and 0%. This option is located in the properties window.

With that you should have the effect shown below.

To add text to you button, click back to the main scene where you created the 4 buttons layers. Create 4 Text layers and place the text on each corresponding layers. With that you are finished.

Finished:
Well that is it. Hope it is what you expected. If you have, any questions or comments feel free to e-mail me or leave a message on the forum. If you are having a hard time with the tutorial email me and I will try to help.

This Tutorial was Created By Mark
© 2007 pixeldigest.com. All Rights Reserved.