How Do I Create Flash Custom Buttons?
Adobe Flash allows for the custom design and development of many different Internet and website elements, such as buttons, navigation bars, banners and even entire websites. With a minimal amount of ActionScript programming ability and a little know-how, it is possible to create customized features and applications that anyone can use. Designing a custom button in Flash is limited only by your imagination, and the buttons can be as flashy or as simple and austere as your website requires.
Other People Are Reading
Instructions
-
Design Your Button
-
1
Select the "Rectangle" tool from the toolbar and use it to draw a rectangle on the stage. Use a white fill and a black stroke color for the box.
-
2
Press "F8" on your keyboard with the rectangle selected to turn the rectangle into a movie-clip symbol. Name the symbol anything you like.
-
-
3
Double-click on the new symbol for your button to enter it for editing. Select the rectangle and its border again and press "F8" to turn it into a symbol. Give it any instance name you wish. You now have a symbol within a symbol, which is necessary to create the rollover effect we will use.
-
4
Click the "New Layer" button on the timeline to insert a new layer above the current one with your rectangle button on it. Click on the layer name to rename it "Text."
-
5
Select the "Text" tool from the toolbar and click on the button to create a box for typing text. Type the text "Click Here." In the Properties Inspector, make sure that for the type of text box, you have "Dynamic" selected. Give the text box an instance name of "textInside." Select the text box and change the fill color to blue using the toolbar.
-
6
Right-click on the timeline at Frame 6 for the layer where your button is and choose "Insert Keyframe." Select your button and, in the Properties Inspector, under Color Effect, choose "Tint" from the drop-down menu, pick a color different from the original, and set it to 100% or whatever intensity you like. This is the color the button will change to when a user hovers his mouse over it.
-
7
Right-click on the timeline at Frame 1 for the layer where your button is and choose "Copy Frame." Right-click on the timeline at Frame 15 for the same layer and choose "Paste Frames." Now right-click in the gray space between Keyframe 1 and 6 and choose "Create Classic Tween" or "Create Motion Tween" if you are using Flash CS3 or older. Do the same thing in the space between Keyframes 7 and 15.
-
8
Click on Frame 15 on the layer with the text and press the "F5" key to insert frames up to that point. Insert a new layer on the timeline like you did before, only this time name it "Actions." Click on the first keyframe of this new layer and press F9 to open the Actions panel. Type in the following code:
stop();
-
9
Right-click on the timeline under Frame 6 on the Actions layer and insert a new keyframe. Click on this new keyframe and press F9 on your keyboard again to open the Actions panel and type in the same code:
stop();
Code and Customize Your Button
-
10
Double-click anywhere on the stage to back out of editing your movie and return to the main timeline. Select the first keyframe of your movie with a left-click and press F9 to open your Actions panel. Type the following code:
my_btn.onRollOver = over;
my_btn.onRollOut = out;
-
11
Insert a few lines after the code you entered in the previous step and type in the following code:
function over(){
this.gotoAndPlay(2);
}
function out(){
this.gotoAndPlay(7);
}
-
12
Add the following code to customize the text of your button on the fly:
my_btn.textInside.text = "Whatever you want your button to say here between quotes"
-
13
Close the Actions panel and click on your button on the stage to select it. Give it an instance name of "my_btn" in the Properties Inspector. Press Ctrl+Enter to test your movie.
-
1
Tips & Warnings
Try importing a bitmap to use as the fill color for your button if you want to do something extra-special, such as making it wood or metal.
References
Resources
- Photo Credit Collection of pastel psychedelic headers for websites or other image by walex101 from Fotolia.com
