Copyright © 2003-2010 MultiMedia Soft

How to customize the 3D rendering of custom shaped controls

Previous pageReturn to chapter overviewNext page

3D Control Magic comes with several kinds of built-in 3D rendering types but, in some case, there could be the need to render the controls using a more sophisticated 3D approach, so there is the possibility to provide a custom 3D rendering 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 possibility to provide the Caption text with your preferred settings at both design-time and runtime.

Before proceeding with this tutorial, in order to fully understand this section, we suggest to take a look to the How to create a custom shaped button section.

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

3dcm_i00004f (Picture #1)

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

3dcm_i00004e (Picture #2)

Custom shaped buttons can be created using also color bitmaps, so we can use the first picture as a mask for creating our custom shaped button: when you create a mask, you must keep in mind that the color of the bitmap left top pixel will be managed as "transparent", so we must be sure that this color will not be present inside the part of bitmap that will be used to determine the button shape.

Inside the previous pictures the pure yellow color is not present, so we can apply the yellow color to the bitmap portion that will be considered as "transparent": this task can be easily performed using a simple graphical application like Microsoft Paint.

3dcm_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 Pictures and Animations tab.

Select the "Picture/animation for button in normal state" option.

Press the 3dcm_i000013 Browse button in order to load Picture #1 from your hard disk

Uncheck the "Move picture on press" inside the Options frame

3dcm_i0000fc

Now let's add a mouse over effect. This loads Picture #2

Select the Picture/animation for button with mouse over option.

3dcm_i0000fd

Press the 3dcm_i000013 Browse button in order to load Picture #2 from your hard disk

That's all: now you can apply one or more texts to the button using the Texts tab.

 

RUNTIME:

Set the Shape property to Shapes.Custom.
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.