tutorials:
  Flash 8
  Flash MX 2004
  Flash MX
    Flash 5
  Basic
  Animation
  Special Effects
  Advanced
  Forums
  ActionScript
  Graphics | Motion
  PHP and XML
  Web Technologies
  Swift 3D
   
 

 
 

 

 

 

 

 

 

 

 
Adding
A Button

Unlike regular HTML, buttons are more than just simple navigation interfaces. In Flash, any object can be a button. Buttons not only provide feasible methods of taking the user to another page, but buttons also create an interface where certain advanced functions can be called. In the tutorial below, you will learn how to create a button and add the over, down, and hit states. 

The animation below will show how your button will look at the end of this tutorial. (Move the mouse over the circle and click to see what I am talking about):

Creating And Making The Button Work:

First, create a new movie in Flash. This is fairly a simple procedure, so there will be no "intro" source code. There is the link to download the final source code on the bottom of this page as usual.

Here's How:

  1. Once you have opened a new Flash document, go to Insert > New Symbol. From the window that pops up, pick the option for Button and give it a name that will be easy to remember. Click OK. See image below:

  1. Once you have done that, you should see that your timeline has now changed to accommodate the properties of buttons. For this example, click on the Frame marked "Up", and draw a Circle in the drawing area. Also, right click on the other frames marked "Over", "Down", and "Hit" and choose Insert Keyframe. You may want to change the color of the circle for the Over and Down states so you can see that the button works. This will resemble the color changes in my example at the top of this page.
     
  2. Now, all you have to do is add the movie to your main timeline. Remember that this button was inserted as a new symbol, and must be placed in the main movie to work. Click on the Scene 1 button on the top left to be taken to the main movie. See image below:

  1. If you started this button from a new movie, your timeline and drawing area should look empty. To add the button, click on Window > Library (or Ctrl + L on keyboard) to launch the Library Window. Now all you have to do, is drag the instance "button" from the library to the timeline. Just a simple click and drag!
     
  2. Your timeline should have one and only one Keyframe on the first layer. The button should also be visible while on the screen. You can test to see how the button works by pressing Ctrl + Enter or by going to File > Publish Preview > HTML.

That is all there is to creating a button in Flash. Buttons provide interactivity as well as a fundamental way of allowing the visitor to navigate. Functions like Get URL, Go To And Play, and all the Mouse states will work only when the instance is a button. Buttons are also what the JavaScript developers call "Rollover" effects. To see how my button compares to the one you created (they should both be similar except for the color variations), download the Final source by clicking here!

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 
Cheers!
Kirupa Chinnathambi
kirupaBlog

 


kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components

Flash Templates
CSS Templates
Dreamweaver Templates

flash menus, buttons and components
Digicrafts Components The best flash components ever!
Entheos Flash Website Templates Free Flash Page Flip
flash components Buy and sell FLAs at Ultrashock!
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com create flash slideshow as easy as 1,2,3
Learn how to advertise on kirupa.com