In this video tutorial I will step you through the creation of a shiny / glossy button inside Flash.
Watch Video
Create the Base Layer
The first step when making this type of button is creating the base layer. This layer defines the shape of your button and will eventually hold it’s background colour and stripe effect.
- Start by adding a layer called base.
- Click on the rectangle tool (R)
- In the properties panel set the rectangle corner radius to 5.
- Create a rectangle using the mouse to the size and shape you need.
- Switch to the selection tool (V)
- Select the rectangle and change it’s fill colour from white to green.
- Erase the border by selecting it and and pressing the delete key.
- Select the rectangle and convert it into a MovieClip.
- Call the MovieClip “base colour”.
- Edit the properties and assign an inner glow effect to the rectangle.
- Adjust the ‘blur’ and ‘strength’ to give it a subtle dark inner shadow.
- This is a personal look and feel choice here. Play with it until it feels good to you.
Create the Bottom Shadow
The bottom shadow helps give the button depth and richness. The exact size and placement of the shadow is a personally choice. I recommend creating one as close to the example as possible and then play with it until you are happy.
- Double click on the rectangle and select and copy the original shape. Don’t copy the MovieClip! Copy the shape inside the MovieClip.
- Create a new layer and call it “bottom shadow”.
- Paste the copied shape into the new layer.
- Now align it so that it covers the original.
- Access the colour properties.
- Change the colour type from ‘solid’ to ‘linear’.
- Make sure that the right hand side is set to black at 100% alpha and that the left hand side is set to black at 0% alpha.
- Access the gradient transformation tool (F)
- If the gradient transformation tool is not visible in the tool bar you can use the shortcut key (F) or press and hold the left mouse button on the free transform tool.
- Use the round control handle to adjust the orientation of the gradient from horizontal to vertical. You want the shadow to start at the bottom and fade towards to the top.
- Use the square control handle to reduce the height of the gradient.
- Use the centre control handle to move the gradient lower.
- The exact position and height of the gradient is up to you. You want a subtle shadow effect.
Creating the Highlight Layer
This is where the magic happens. A simple button turns into candy right before your eyes. It is simple to do and looks amazing.
- Copy the graphic on to a new layer called “top gloss”.
- Make sure that the graphic is still selected while you access the colour properties.
- Change the left and right colour values from black to white.
- Access the gradient transformation tool (F)
- Using the round control handle rotate the gradient 180 degrees.
- Adjust the height and position of the gradient so that you have a strong white gradient at the top of your rectangle.
- Select the line tool.
- Using the line tool draw a horizontal line about 1/4 of the way down from the top of your rectangle.
- Using the selection tool bend the line upwards.
- Delete the bottom part of the rectangle.
- Remove the line by selecting it and pressing the ‘delete’ key.
- Adjust the highlight gradient to your liking.
- Click on the sub-selection tool.
- Select the highlight to reveal the control handles.
- Use the control handles to curve the arc shape upwards.
Creating the Stripes
I put stripes on this button because it draws attention (an important feature for a buy now button). Once you become comfortable with stripes try creating other effects or added different patterns in the background.
- Lock the top gloss layer and unlock the base layer.
- Make sure you are using the Selection tool.
- Double click on the base layer to edit in place.
- Create a new layer called stripes.
- Copy the bottom layer.
- Paste it into the top layer.
- Lock the bottom layer.
- Select the line tool.
- Draw a diagonal line near the bottom of the rectangle.
- Copy and paste the line.
- Repeat…
- Select all of the diagonal lines.
- Use the align tool to make sure all of the lines are equally spaced
- Make sure you don’t have the stage button pressed.
- Drag the lines on top of the rectangle.
- Deselect the lines.
- Select and delete every second stripe.
- Delete all of the lines.
- Click on the top layer to select all of the stripes.
- Making sure that the stripes stay selected change their colour and transparency.
Creating the Button Text
I went with very large text for the same reason I used stripes – to draw as much attention as possible.
- Create a new layer called “text”.
- Select the Text Tool
- Create the text using the size and colour you need.
- Adjust the size, colour and transparency as needed.
- Make any final adjustments you need.
- All Done!