TMBSTransparentForm
.: MBS AnyShape TransPack - Quick Start Guide
.: Overview
This guide is meant to teach you the basics you need to know to start creating
transparent forms. It starts with some basic topics moving on to some more advanced
techniques. It is highly recommended you read the complete document.
.: 0 :. Contents
- Creating your first transparent form
- Create a shaped form using an image
- Using TMBSRegionData
- AlwaysOnTop and Draggable
- Combining shapes using advanced modes
- Some more basics
- Using TMBSTranslucency
- Things you should know
- Troubleshooting
.: 1 :. Creating your first transparent form
Ok..so you installed the needed packages and you are now ready to create your first
transparent form - under 60 seconds.
- Create a new application.
- Place a single TMBSTransparentform component on the form.
- Place a single TMBSEllipse component on the form.
- Place a single TMBSRectangle on the form.
Note: Under linux ALWAYS set your borderstyle of the form to fbsNone.
Components used:

Now press F9 to compile and run. Behold your first transparent form! Click on it and
try dragging it around.

How it works: The TMBSTransparentform component cycles though all the
TMBSxxx components on the form and generates a single region using the shapes it finds.
(It only uses shapes that has the Enabled property set to True)
Note: You should never place more than one TMBSTransparentform
component on the same form. This is not only redundent - but may cause strange dragging
behaviour!
Since thee are no buttons on the form - you might have trouble actually closing your
application. Choose Run->Program reset in Delphi/Kylix to stop your application or
press Ctrl-F2.
.: Some design-time fun
Now try double-clicking on the component during design-time. Your design form should
now be transparent. You can drag the "Preview" button aout of your way and
continue working with the form even while it is transparent! Now click on the yellow
button on the preview form to restore your window. We will get back to some more cool
stuff you can do at design-time later.

.: 2 :. Create a shaped form using an image
Now we are going to create a more interesting shaped window. We'll have to
call in the help of Mr. Ducky for this though.
- Place a single TMBSImage component on the form.

- Double-click on it or click on the ... button of the picture property.
- This will bring up the Mask Editor - click on the Load button and browse for the
ducky.bmp file located in the "guide" subdirectory.
- Once you click on the OK button a mask will automaticalyl been create for you! You can
always click on the picture to create a new mask (The color you click on will be the color
representing the transparent regions)
- Now click on the Preview button to preview your mask.
- Click on the OK button to save your changes.
Now press F9 to compile and run - and you have your first truely weirdly shaped form!
Note 1: I also set the AutoSize property to TRUE as well as set the
Transparent property to TRUE. Important though is the fact that the Transparent property
has NOTHING to do with the form's transprancy. Setting this to true only makes the image
appear transparent - and since the non-transparent region is usually not visible anyway
when the form is transparent, I usually leave this set to FALSE because it uses less
resources to draw a non-transparent image.
Note 2: You can always directly load a mask using the Mask property of
the TMBSImage component. Sometimes you need to manually create a good black & white
mask. Our ducky for example has 3 pixels thats the same color as our mask color. Thus we
had to manually edit the mask bitmap to remove those 3 pixels. The Mask editor did most of
the work for us though and it took less than 40 seconds to fix those 3 pixels.
.: 3 :. Using TMBSRegionData
Up till now all the regions will dynamically created at run-time. This is ok 99% of the
time - especially with the fast CPU's we have today.
TMBSRegionData on the other hand stores a region in the native operating system format -
and directly applying this region when needed - giving the absolute fastest transparent
forms around.
You can even create animated forms using a few TMBSRegionData componets!
This component also gives you the ability to load stream from file - which can of
course be very usefull in many situations.
So lets how to use it.
- Place a single TMBSRegionData component on the form.

- Now right-click on the TMBSTransparentForm component.
This will bring op a popup list
with a few options. The first option is "Preview on" - this will do the same as
double-clicking on the component as we did earlier.
The other option is "Save Region to file". Select this option and save the file
to "ducky.rgn".
- Now right-click on the TMBSRegionData component and choose the "Load Region from
file" option. Load the "ducky.rgn" file.
- Double-click on the TMBSRegionData component to preview the region. It should show up
exactly as the preview for the TMBSTransparentForm component.
- Important: A form should always have only a single
or a single or
else you might have some conflicts. For example: If we leave both on the form, which
region will be used to create the transparent form? If one's AlwaysOnTop property is set
to True and the other one is set to False - which will actually happen? Thus to avoid any
problems its always better to make sure there is only a single one of these components on
the form. Thus we delete the TMBSTransparentForm and leave only the TMBSRegionData
component.
Press F9 to compile and run the application. You should now see exactly the same
transparent form as we did above using the TMBSTransparentForm component.
.: 4 :. AlwaysOnTop and Draggable
In Windows making the FormStyle fsSTayOnTop only makes the form stay the topmost form
within your application. Setting the AlwaysOnTop property of a TMBSRegionData or
TMBSTransparentForm component though will make your form stay on top of other applications
as well.
Note: Under Linux it depends on your window manager - but the effect is
usaully the same for most linux window managers.
Another usefull property (that is True by default) is the Dragable property. When True
you can click on any non-Windowed portion of the form to drag the form around, just like
when you clicked&dragged on the caption of a normal form.
With non-Windowed we mean all parts of the form where there is not a control derived from
TWinControl (or TWidgetControl under Linux).
Windowed controls include TButton, TPanel, TEdit, etc.
Non-windowed controls include TSpeedButton, TImage, TMBSImage, TShape, etc.
If you prefer more control over which regions of the form should be draggable the
package will make it really simple for you:
- Using our previous example - set the Dragable property of the TMBSRegionData component
to False.
- Now on the TMBSImage OnMouseDown event put the following code:
procedure TForm1.MBSImage1MouseDown(Sender: TObject; Button:
TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
if Sender is TControl then
MBSRegionData1.BeginDragMove(Sender as TControl,X,Y);
end;
Now compile and run the application. Try dragging the form by clicking first on Ducky
and then on the other shapes. You will notice that you can only drag the form by clicking
on Ducky. You can use this same event handler for all components you want to be dragable.
For example TPanels, TGroupBoxes, etc. all can be made dragable this way.
.: 5 :. Combining shapes using advanced modes
All TMBSxxxx shapes and images have the property CombineMode set to cmOR by default.
Changing this value can have some powerfull uses. But first - lets explain each mode.
Mode |
Result |
cmAND |
 |
cmCopy |
(Added for completeness and
simply copies the current region) |
cmDifference |
 |
cmOR |
 |
cmXOR |
 |
|
Now lets use a shape to cut a hole in Ducky's tummy.
- Place a single TMBSEllipse somewhere in the center of Ducky.
- Change the CombineMode property of the ellipse to cmDifference.
- If you still got the TMBsRegionData component on the form - delete it and place a
TMBSTransparentForm component on the form.
Now compile and run. Ducky should now have a nice peep-hole in him.
Desgn-time view of form
 |
Run-time view of form
 |
You can now play around with the other combine modes to learn exactly how each
functions. A very important thing to note though is that TMBSTransparentForm generates the
region according to the "z-level" of a specific component. Thus the creation
order of your components is very important in order to create the correct region.
For instance in the above example if Ducky had a higher Z-level than the ellipse there
would have been no hole in him.
Note: Please note that I finally added a Close button so I don't have
to press Ctrl-F2 each time to close the application.
.: 6 :. Some more basics
- The Enabled property of a component decides whether or not it will be included in the
form's region - the Visible property has nothing to do with it! Thus you can make shapes
visible and use them to help decorate the form as you please. The Brush.Style property is
set to bsBDiagonal by default, but you can of course change this as well.
- You do not *have* to load an image into the TMBSImage component. You can simply load a
Mask only to create a region.
- More advanced users might want to paint directly onto the form's canvas using
"double-buffering" instead of using an image component, combined maybe with the
use of a TMBSRegionData component to create the region. This will create the absolute
fastest & flicker free forms for highly animated multimedia applications. For most of
us though this extra work is not needed.
- The automated dragability might mess up the way TSpeedButtons work since they do not
have a window handle. To solve this etiher:
a) Place them on a windowed control like a TPanel
b) Set the Dragable property to False and handle dragging yourself.
.:7:. Using TMBSTranslucency
Windows 2000 introduced "layered" windows that allows you to create
semi-transparent see-through forms. TMBSTranslucency provides a very easy to use interface
to the API.
- Place a single TMBSTranslucency component on the form.

- Set the Translucency property to 30. Valid ranges for this property is 0 to 100 where
100 means 100% tranlucent.
Now compile and run the application. If you have Windows 2000 or later you should see a
semi-transparent form like in the picture below. Notice how you can see the background
behind the picture...

Now try playing around with the FadeIn and FadeOut methods. They provide
easy to use form fading effects. My favourite use is to fade out a form when it is
closed...
.: 8 :. Things you should know
Common notes for both Windows & Linux:
- As stated previously - there should only be a single
or a single on a
form to avoid any unwanted behaviour. You *can* put more on the same form, but then you
got to carefully control which component will be the "master" component and only
have that component active at any one time.
- Placing a
on a form and not loading a region will create an empty
region - thus NO part of the form will be visible. Placing a on
the form without and shapes or images will have the same effect.
- Loading a new image will always overwrite the current mask. Thus you might need to
manually reload the mask each time after changing the image. (By loading the mask using
the Mask property editor)
Windows specific notes:
- Layered windows is a new function available in Windows 2000 and later only.
TMBSTranslucency will not give any error messages on older operating systems - it will
simply not try to make the form translucent. Thus you can safely use the component even if
your application might be used on older operating systems.
- On older versions of Delphi (v3 to v5) the shapes are visible by default. On
Delphi v6 they are invisible by default.
Linux specific notes:
- Under Linux always set the borderstyle to fbsNone.
- Under Gnome the design-time preview still leaves the form border visible. If you set the
border to fbsNone this will not be visible during run-time though.
- Under KDE the design-time preview does not actully show a transparent form - but only
masks the form allowing you to only view and click on the actual region.
- Setting the AlwaysOnTop property to True under Linux simply makes the FormStyle property
of the form fsStayOnTop. It is then up to the window manager to honour this request.
- Changing the form's properties like borderstyle, FormStyle, etc. may cause the form's
region to be lost and no longer be transparent. Call the MakeTransparent method manually
after changing these properties to make sure your form stays transparent. If possible,
rather avoid changing these properties at runtime.
.: 9 :. Troubleshooting
Here follows some general problems and how to solve them. Feel free to contact us if
you are still having trouble after reading this.
- Problem: When I compile my application I get the error message that
some ".dcu" file is not found?
Solution: You need to add the path where the *.pas or *.dcu files of the
package is located to your library search path. Follow the install instrauctions
step-by-step to solve this problem.
- Problem: Under Kylix when I try to compile the dclTransPackKX.dpk file
I get an error message that it could not find the "bplTranspack.so" file?
Solution: Your Linux search path does not point to the location where
your bpl files are being stored. The simplest solution to this problem is to copy your
bplTranspack.so file to the kylix/bin/ directory. You might also want to change the output
directory of the TransPackKX.dpk package so that it points directly to the kylix/bin/
directory. This way it will be automatically copied there whenever you compile the
package.
- Problem: When I run my application, there is no form!
Solution: Your transparent region is not valid.
Make sure that:
- The TMBSRegionData component contains a valid region.
- When using the TMBSTransparentForm component make sure that at least one shape or image
is enabled. (And that the image contains a valid mask).
- Problem: When I run my application my form is not transparent? Its just
the same boring rectangular shape?
Solution: Assuming you have valid shapes and images on your form - this
can be caused by
a) Make sure you TMBSTransparentForm or TMBSRegionData component has the
"Active" property set to TRUE.
b) Under Linux/Kylix changing some of the form's properties like border or formstyle might
break the transparent form. Calling the " MakeTransparent" after making those
changes should solve the problem.
- Problem: When dragging my form under Linux the movement is very
sluggish?
Solution: Make sure you have set the borderstyle of the form to fbsNone.
- Problem: Under Linux my form is transparent - but there is a frame
around it?
Solution: Make sure you have set the borderstyle of the form to fbsNone.
|