Posted on Sat, 2005-12-10 12:52
Creating a rollover button in Flash
This tutorial with guide you through how to create a button with a rollover effect and a hit effect.
| 1. |
Open Flash and create a new document or your existing document that you wish to implement this in to. |
| 2. |
Go to Insert » New Symbol |
| 3. |
Type a name for the button and check the Button option, then press OK |
| 4. |
Select the rectangle tool and click the set corner radius button |
| 5. |
Set the radius to 10 points |
| 6. |
For the colours set the Stroke colour to Transparent and the Fill colour to anything |
| 7. |
Draw a rectangle, however big you want it. I will be creating mine quite large so you can easily see what I am doing |
| 8. |
Select the Selection Tool (V) and click your rectangle |
| 9. |
In the Colour Mixer window (Shift + F9 if you can't see it) |
| 10. |
Change the Type to Linear |
| 11. |
Select your two colours for the gradient of the button |
| 12. |
Initially the gradient starts as horizontal, but we want to change this to verticle. |
| 13. |
Select the Gradient Transform Tool (F) and click the rectangle |
| 14. |
Rotate the gradient by pressing and holding the left mouse button on the rotate part of the rectangle, then resize so the gradient fits the rectangle perfectly from top to bottom. |
| 15. |
Rotate the gradient by pressing and holding the left mouse button on the rotate part of the rectangle, then resize so the gradient fits the rectangle perfectly from top to bottom. |
| 16. |
On the timeline select the box on Layer 1 Hit and press F5 |
| 17. |
This sets the background to each button state and the hit area of the button. |
| 18. |
Now create a new layer which we will use for the white shine effect |
| 19. |
Using the Oval Tool draw a large oval over the rectangle, covering the top half of the rectangle
|
| 20. |
In the Colour Mixer change the alpha to 15%
|
| 21. |
Now select all the areas of the oval that do not overlap the rectangle and delete
|
| 22. |
Now press F6 in the Over box on Layer 2
|
| 23. |
Select the shine bit, and change the Alpha to 30%
|
| 24. |
Now press F6 in the Down box on Layer 2
|
| 25. |
Select the shine bit, and change the Alpha to 50%
|
| 26. |
The button can now be placed in the main scene
|
