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.
Next: Testing the Movie >>
More Flash Articles
More By James Payne
