In my previous Flash button tutorial I showed you how to create buttons in flash and how to make them react to different mouse events. In this tutorial I will show you how to create a beautiful shining button. If you haven’t read the last tutorial and you don’t know the basics of making buttons then I recommend that you read that tutorial first.
Let’s start by creating a new Flash Document and creating a new button symbol. I will create a rectangular button with a little shine on the top. I also want my button to have rounded edges so I choose the rectangle primitive tool from the tools menu.
I create a rectangle of 200×70 size and from the properties panel I set all the edges to 5px roundness. I select the rectangle and press ctrl+B to break it into a drawing object so that I may edit it.
Now comes the trick bit. I create a new line on above the rectangle and I bend it with the cursor tool so that it comes over the rectangle.
We have done this step because we want to divide the rectangle fill into two parts so that we may fill each part with a different color.
Now I fill the fill 2 with a solid red color.
For fill 1, I fill in a linear color with two shades of red. The I press F to select the gradient transform tool and rotate the linear color so that the lighter shade is at the bottom. This will give our rectangle the shining effect.
At this point we can remove the lines that we used to divide the fill.
Now for the Over and the Down states of the button you can just use the gradient transform tool to move the gradient up and down and give it an effect of the shine moving.
You can see the finished button here.
You can use the same technique to create other sorts of shines like shine on a circular orb and shine on a rectangle across the diagonal. Just stay creative and you will do good.
Want an easy way out of this tutorial? Use Wix, an amazing free Flash website builder that will let you create a very professional Flash website in the fraction of the time it takes creating it from scratch.
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.