Buttons from a pure graphical perspective - use buttons as graphical elements
|

|
Applies to:
Working with BrowserBob
Buttons
can be used as graphical elements, without button functionality. This
enables you to achieve some nice graphical effects.
|
|
|
Example
1: The Hovering Effect
By overlapping graphical elements - here Lara overlaps parts of the addressbar
- the hovering effect is achieved by positioning a seperate button which
is made from parts of the body.
|
|
|
 |
|
|
|
Approach:
|
|
|
|
|
 |
|
- Preparing the background graphic
Design the background image exactly like you want to see the interface
later on your screen (using your favourite graphics editor). You may use
a box as placeholder for the addressbar.
Now cut out the region of the picture which is overlapping the addressbar
and save it as a separate graphic.
|
|
|
|
Below
the cut out and seperately saved
region:
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
- Preparing the Main Dialog
Assign your background picture to the background of the main dialog.
Add an edit object and define it as the main web's addressbar. Then
position it like foreseen.
Since the edit object overlaps the background, it now covers the region
we have cut out before.
|
|
|
|
|
|
|
|
|
|
 |
|
- The Overlap-Button
Add a button to the main dialog. Choose the cut out and separately
saved graphic as button image for all 4 states. Enter Main
Dialog as Target and
Move as Action
to let the button behave like the background. Now give it the correct
alignment and alpha color and drag it to its place overlapping the addressbar.
|
|
|
|
 |
|
|
|
|
Example
2: Web window with rounded corners
Web objects as well as the main web are rectangular by definition. In order
to achieve a more appealing design we are going to create some rounded
corners with the same technique introduced in example 1.
The difference is shown in the illustration below: |
|
|
- rectangular
corners:

|
|
|
|
|
|
- rounded
corners:

|
|
|
Approach: |
|
|
|
|
|
|
|
|
|
|
|
|
|
- Preparing the Main Dialog
Design the background image using your graphics program exactly like
you want to see the browser later on your screen. Paint a rounded rectangle
as placeholder for the main web.
Save the image, start BrowserBob and use it as background picture for
the main dialog. Then adjust the puzzle helper lines.
The main web should fit to the extends of the rounded rect you have
painted before. That makes the main web overlapping the corners of the
rounded rectangle.
|
|
- The Corner Images
Go back to your paint program, cut out the four regions of the picture
which are overlapped by the main web and save them seperately.
|
|
|
Cut out
corner images:

|
|
|
- The Overlap-Buttons
Add four buttons to the main dialog. Choose the cut out and seperately
saved graphics as button images each for all four states. Enter Main
Dialog as Targets and Move as Actions to let
the buttons behave like the background. Then drag them to their intended
places.
Adjust their alignment to be in accordance with the corners, i.e. the
button in the bottom-right corner should be aligned to the bottom and
to the right and so on.
|
|
|
 |
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
 |
|
|
|
|
- Assigning Alpha Color
Don't forget to determine alpha colors for the buttons. The effect
does not work until you've done this.
|
|
|
|
|
|
Related
topics:
BrowserBob objects overview
Properties by object |

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|