Copyright © 1998-2010 MultiMedia Soft

How to customize the 3D rendering of custom shaped buttons

Previous pageReturn to chapter overviewNext page

3D Active Button Magic comes with several kinds of 3D rendering built in, but it is possible to use a more sophisticated 3D approach using bitmaps created with specific graphical applications like Adobe PhotoShop™ or others: the strength of this kind of approach is the fact that you will have the ability to control caption text at both design-time and run-time.

Before proceeding with this tutorial, you may wish to review How to create a custom shaped button.

Now, suppose you need to have a button that you wish to have the following 3D rendering in Normal state:

3dabm_i00004f (Picture #1)

and the following 3D rendering when the mouse is over the button (or when the button is pressed):

3dabm_i00004e (Picture #2)

Starting with Version 7 of the control, custom-shaped buttons can be created using color bitmaps, so you can use the first picture as a mask for creating the custom-shaped button. Note that when you create a mask, you must keep in mind that the color of the bitmap's left top pixel will be managed as transparent. So you must be sure that this color will not be present inside the part of bitmap that will be used to determine the button shape.

Since the pure yellow color is not present in either of the above buttons, the yellow color can be applied to the bitmap portion that will be treated as transparent (this task can be easily performed using a simple graphical application like Microsoft Paint.)

3dabm_i00004d (Picture #3)

Now we have all the elements needed to create our custom shaped button at Design-time and at Runtime.

Design-time:

 

Use picture #3 as a custom shape mask as described inside the section How to create a custom shaped button.
Select the Graphics tab.
Select the Picture/animation for button in normal state option.
Press the 3dabm_i000013 Browse button in order to load Picture #1 from your hard disk
Uncheck the Move picture on press option inside the Options frame

3dabm_i0000cb

 

Now let's add a mouse over effect. This loads Picture #2
Select the Picture/animation for button with mouse over option.
Press the 3dabm_i000013 Browse button in order to load Picture #2 from your hard disk

3dabm_i0000cc

 

That's all: now you can apply one or more texts to the button using the Text property page.

Runtime:

Set the Shape property to Custom (5).
Set the PictureCustom property to Picture #3.
Set the Picture property to Picture #1.
Set the PictureMouseOver property to Picture #2.
Set the MovePictureOnPress property to FALSE.