Copyright © 1998-2010 MultiMedia Soft

How to manage alpha channel transparency

Previous pageReturn to chapter overviewNext page

Alpha channel transparency can be used to create very interesting vanishing effects: starting from version 7 of the control, a variable transparency (alpha channel based and ranging from 0 to 255) was available for texts only; starting from version 8, you can manage alpha channel transparency for all of the control's elements, including surface, pictures, texts and cells: transparency can assume separate values for each of these elements (see below) or, at runtime, all at the same time and with the same value with a single call to the SetTotalTransparentFactor method.

Note that the use of transparency will cost more CPU ticks so, if rendering speed is critical for your application, you should avoid its use.

If you need to manage each of the control's elements transparency separately, here is a summary of the needed operations:

 

Surface transparency

At design-time, you can modify the button surface transparency through the Transparent factor field inside the "Surface" tab of 3D Button Visual Editor:

3dabm_i0000f8

Below you can see a screenshot of a form (white background) with a picture control containing a set of three identical buttons: the left one has the transparent factor set to 0 (total opacity, anti-alias with the form background color), the center one has the property set to 1 (total opacity, anti-alias with the underlying picture) and the right one has the property set to 128 (semi-transparent):

3dabm_i0000c7

When you have buttons with a SpecialEffect applied, like the buttons above, you have the possibility to decide which zone of the button will be affected by the alpha channel transparency:

3dabm_i00011c

and you will have results like the following:

3dabm_i000119 3dabm_i00011a 3dabm_i00011b

At runtime the transparent factor can be changed through the SurfaceTransparentFactor property while the zone affected by transparency can be changed through the SurfaceTransparentZone property.

Note that, in case the underlying picture should change, you could force a refresh of the control using the RefreshTransparentControl method.

NOTE: when using alpha channel transparency on the control's surface, the control will merge its graphical representation only with the contents of its own parent window (the control container: could be a form or a frame control).

 

Text transparency

At design-time, you can modify a text transparency through the Transparency value inside the "Texts" tab of 3D Button Visual Editor:

3dabm_i0000fc

Below you can see a screenshot of two buttons with a background picture and a "A" as caption text; the text of left button is completely opaque (Transparency set to 0), while the right one is semi-transparent (Transparency set to 128): as you can see the underlying picture can be seen through the "A"

3dabm_i0000fd

At runtime the text transparent factor can be changed through the TextDescriptor.TransparentFactor property.

 

Pictures transparency

At design-time, you can modify a text transparency through the Transparent factor value inside the "Graphics" tab of 3D Button Visual Editor:

3dabm_i000100

Below you can see a screenshot of two buttons with a background picture; the picture of left button is completely opaque (Transparency set to 0), while the right one is semi-transparent (Transparency set to 128): as you can see the underlying picture can be seen through the "A"

3dabm_i0000fe

At runtime the picture transparent factor can be changed through the PictureTranspFactor property.

 

Cells background's transparency

At design-time, you can modify a cell's background transparent factor through the Transparent factor value inside the Cells main tab of 3D Button Visual Editor:

3dabm_i00010d

Below you can see a screenshot of three buttons with a background picture inserted through the control's Picture property; the button on the left is the original button with no visible cell; the button in the middle has a cell with a caption text, a cyan solid background and a 5 pixels wide blue border; the button on the right has exactly the same characteristics as the one on the middle but (as seen on the screenshot above) the Background transparent factor has been set to 158: as you can see, the original button's picture can be seen through the cell's background.

3dabm_i00010c

At runtime the cell's background transparency can be changed through the CellsManager.BackTranspFactor property.

 

Cells text's transparency

At design-time, you can modify a cell's text transparent factor through the Transparency value inside the Text for cell X tab of 3D Button Visual Editor:

3dabm_i00010e

Below you can see a screenshot identical to the one seen before: the only difference is the "My cell caption" text whose Transparency field has been set to 165.

3dabm_i00010f

At runtime the text's transparent factor can be changed through the CellsManager.TextDescriptor.TransparentFactor property.

 

Cells picture's transparency

At design-time, you can modify a cell's picture transparent factor through the Transparent factor value inside the Pictures for cell X tab of 3D Button Visual Editor:

3dabm_i000110

Below you can see a screenshot of three buttons with a background picture inserted through the control's Picture property; the button on the left is the original button with no visible cell; the button in the middle has a cell with a caption text and a background picture; the button on the right has exactly the same characteristics as the one on the middle but (as seen on the screenshot above) the the picture's Transparent factor has been set to 128: as you can see, the original button's picture can be seen through the cell's picture.

3dabm_i000111

At runtime the cell's picture transparent factor can be changed through the CellsManager.PictureTranspFactor property.

 

IMPORTANT:

Through 3D Button Visual Editor you have the possibility to evaluate which level of alpha channel transparency will best fit your needs in order to have optimal results over a chosen background image.

Simply load the needed background image using the Background menu item and then select the image, from your hard disk, using the Load image sub-item. Once loaded, you will have the possibility to drag the image around the preview pane keeping the right mouse button pressed and releasing it when you reach the needed position: after releasing the right mouse button, the 3D button under editing will refresh itself with the underlying image bits.

3dabm_i00011d

Note that this procedure will not transfer the loaded image into the container form.