Creating Buttons | 1 2 3 | continued:

7:

In this step, we're going to customize the buttons.

 

Normally, with every button, there are 3 major states with regards to the location and the action of the mouse pointer:

 

  • Up: This keyframe is responsible for defining the state of the button normally when no action is applied to it by the mouse pointer. (The original -ideal- shape of the button)
  • Over: This keyframe is responsible for defining the state of the button when the mouse pointer is over your button.
  • Down: This keyframe is responsible for defining the state of the button when the button is clicked.
  • Hit: This keyframe is responsible for defining the area of the button that is effective to the mouse pointer.


This means, u can right-click each keyframe of the above and select "Insert Keyfram". Modify each keyfram as you desire, change the color of the button when "over", for example.

 

Note: Type the title of the button on the"Up" keyframe using the Text tool.

 


8:

In this step we're going to add the Actions to the buttons.

 

  • Right-click on button 1 on the stage and select Actions.
  • Add the actions as shown in Fig 7, the "goto" action can be found under Actions>Movie Control>Goto.
  • Now right-click on the second button and add the same action ,but make sure you change the frame to "content2"
    The same for the third button, and "content3" for the frame.

 

You are ready to test your movie! but wait...


once you click on button1 or button2, how are you going to tell whether it has actually jumped to content1 or content2? Don't forget to add some content to your contents keyframes!

 

Practice, practice and practice! you can create advanced buttons with multiple actions within minutes!

 

 


Conclusion:

What we did:

  • Drew a rectangular-shaped object.
  • Converted it to a button.
  • Dublicated the button and renamed to avoid conflicts.
  • Draged the dublicated buttons to the stage.
  • Distributed the buttons to separate layers (you can have them on the same layer as well, but it's more flexible to have them on different ones)
  • Created a new layer for the content.
  • Each content on a seperate frame with a "stop" action.
  • Labled each keyframe with a unique name.
  • Added actions to the buttons to go to the contents respectively.
  • tested the movie!


Well done :)

 

 

Fig 7

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Fig 8

 

Download *.FLA

Not clear enough? Check our forums. We will be glad to help you out.
   
Main | Tutorials | BestFlash | Goodies | Forums | Portfolio | Contact Us
   
 
AEvision Tutorials 2.1 - All rights reserved AEvision Designs 2002-2007
 
 
Icons provided by iconpacks.com