Exercise. 12. Creating a Beveled Button



To create a button with a bevel effect in a quick and easy way.

Step by step Exercise .


1 We draw a rectangle in the work area.

2 We select the background.

3 We change the background color of rectangle, for example, to gray.

4 With the text tool we write the text that we want to be in the interior space of the rectangle.

   Now since we already have the pattern, we are going to create a simple bevel effect.

5 We select the left and upper borders.

6 We modify the color of these outlines applying the white color to them.

7 We select now the lower border and apply a dark gray color.



8 We select the button.

9 We activate the menu option Insert → New Symbol...

10 We mark the button behavior and give it a name. Press Accept.

11 We double-click on the button to edit it.

12 Using F6 we create keyframes in each of the frames corresponding to the states of the button.

13 We select the frame Down.

14 We modify now the lower and the right borders of the button by applying the white color.

15 Finally we select the upper and left outlines and apply the black color to them.

   We'll leave the frames Over and Hit as they are since we want it to do nothing until we don’t press the button and the hit area includes our rectangle.

   The obtained result is the following one. We can point on it and test the effect.


Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
© aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.