Home arrow Flash arrow Page 3 - Flash Buttons
FLASH

Flash Buttons


Everybody seems to like pushing buttons online, but who likes buttons that just sit there? Nobody, that's who. How can you tell if you pressed a button online with your mouse if you don't get some kind of feedback? This tutorial will help you create buttons in Flash that let your visitors know when they interact with them.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 31
November 19, 2007
TABLE OF CONTENTS:
  1. · Flash Buttons
  2. · Making A Simple Color Changing Button
  3. · Creating the Different Button States
  4. · Testing the Movie

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Flash Buttons - Creating the Different Button States
(Page 3 of 4 )

The Up State

As I said earlier, the Up state defines how a button looks when a mouse button is pressed and then released over it. Choose the Rectangle graphic you created earlier from the Library Pane, and drag it to the center of the stage, making sure that the Up state is the state you are in (it will be highlighted if so).

Before we begin with the other states, click on the UP phase, then hold down the shift button and select the Over, Down, and Hit phases, so that all four states are selected. Now either right click and choose Insert Blank Keyframes (make sure you choose Blank Keyframe and not the other types) or press Insert>>Blank Keyframe from the menu. This will create duplicate frames across the board. The Rectangle should only appear in the Up state at this point. Otherwise the program will not work.

The Over State

Again, the over state is how the button appears when the user's mouse moves over it. If you look at the top of your screen you will see the Onion Skinning button.




Make sure your Onion Skinning button is on; if it isn't, make sure to click it. Click the Over state frame. You should now see the outlined view of where the rectangle was in the previous frame. This is so you can place a new image in the same spot without using rulers or going through a bunch of trouble. It will appear as it does in the picture above: sort of hazy.

Next, drag an instance of the Rectangle button to the stage and place it so that it is exactly over the Onion Skin outline (you should not be able to see the Onion Skin after you do this).

Once the Rectangle is in place, click on the Color drop-down box in the Properties Pane and choose the Brightness option. Set the brightness level to around 50%. This will fade out the image, giving it a similar look to the onion skin.

The Down State

Our friend the down state is how the button appears when the user clicks on it, but does not release the mouse button. Again, we are going to drag an instance of our Rectangle graphic to the stage, making sure to align it on top of the onion skinned button from the previous frame. This time we are going to change the color of the button to a deeper shade of red.

Click on the Color drop-down box located on the Properties Pane and choose the Tint option. Pick a darker color of red from the Color Selector box; beneath that you will see the RGB (red, green, blue) options. Lower the Red to about 55 or so or until the red of the box is a darker color than the original shade.

The Hit State

Lastly, the Hit State, as we said, is the area that the button is in. Click the Hit state frame and drop an instance of the Rectangle graphic over the onion skin.

And that's it.


blog comments powered by Disqus
FLASH ARTICLES

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials