In this tutorial you will learn how to create a simple button. You will learn how to create a button, learn all 4 states of a button and do a simple mouse over change. This is a beginner tutorial and once you are done with this check out our animated button tutorial here.

Step 1 : Setup and creating the button

1. Change the size of your document to 225 px by 225 px for better viewing of the stage.
2. Go to Insert ð New Symbol (or Ctrl+F8) Put the name as "Button" and select the button type.
   
   
    
3. Notice how the button timeline is different than the regular timeline. The button timing has 4 states
   
   
    
4. We start on the 1st frame (Up) which is always default when creating a new button. Now select the Rectangle Tool and use any color you want but make sure their is no outline color. Draw a rectangle.
   
   
    

Step 2 : Understanding the button states

1. Now click on the over frame and add a keyframe (F6). Notice the rectangle you made is copied over.
2. Click on the rectangle with the Selection Tool and change the color of the rectangle using the Fill color.
3. Add new keyframe in the Down and then the Hit frames.
   
   

Up - what the button looks when the pointer is not over the button
Over - what the button looks like when the pointer is over it
Down -what the button looks like when the mouse button clicks on it
Hit - this is the clickable area of the button. (optional)

1. Now go back to scene 1 the main flash stage. Drag the button you made from the library onto the stage. If your library is not open press Ctrl+L to open it.
2. Test your movie..the result should be like in this example fla .

Copyright flashtrue.com

 

 

Vote article

Poor Excellent