MindBlast SoftwareMindBlast Software  

Home  Components  Order now!  News  Contact  About 

Last updated: 24 Jan 2002


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

  1. Creating your first transparent form
  2. Create a shaped form using an image
  3. Using TMBSRegionData
  4. AlwaysOnTop and Draggable
  5. Combining shapes using advanced modes
  6. Some more basics
  7. Using TMBSTranslucency
  8. Things you should know
  9. 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:
_transform.gif (189 bytes) _ellipse.gif (170 bytes) _rec.gif (164 bytes)

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 _transform.gif (189 bytes) 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.

form2.gif (2520 bytes)

.: 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. _image.gif (223 bytes)
  • 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.

Ducky.bmp
Ducky.jpg (26294 bytes)

The generated mask
duck_mask.gif (855 bytes)
Ducky being previewed in the Mask editor
form3.gif (12789 bytes)
The form during design
form5.gif (23318 bytes)

The final transparent form
form4.gif (17607 bytes)

 

.: 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. _Region.gif (238 bytes)
  • Now right-click on the TMBSTransparentForm component. _transform.gif (189 bytes) 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 _Region.gif (238 bytes) or a single _transform.gif (189 bytes) 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 rintersect.png (223 bytes)
cmCopy (Added for completeness and
simply copies the current region)
cmDifference rsubtract.png (224 bytes)
cmOR runion.png (228 bytes)
cmXOR rxor.png (223 bytes)

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
form7.gif (17697 bytes)
Run-time view of form
form6.gif (14467 bytes)

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. _tranlucency.gif (216 bytes)
  • 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...

form8.gif (16937 bytes)

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 _Region.gif (238 bytes) or a single _transform.gif (189 bytes) 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 _Region.gif (238 bytes) on a form and not loading a region will create an empty region - thus NO part of the form will be visible. Placing a _transform.gif (189 bytes) 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.

 

(c) Copyright MindBlast Software, 1998 - 2002.
This site is partly powered by PHPNuke templates.