How To Make A Transparent GIF With A Transparent Background?

[saturnus83]

Hi, guys
I'm trying to make nice form with a custom picture I designed. Since the picture isn't rectangular i have to use transparency so it doesn't stay ugly. If I just set the transparent GIF as a background the transparent section of the gif will show the form background (red) and not the desktop (or whatever is behind the app).

The form in designer mode:



The form in execution looks like this:


[IMG]
http://img407.imageshack.us/img407/6987/immaginedv5.th.jpg[/IMG]

Thanks everybody...

Andrea

[LaVolpe]

What you are asking is pretty advanced stuff. There are basically two ways to do this. Both require use of APIs.

1) For Win2K & above, you can use the SetLayeredWindowAttributes & UpdateLayeredWindow APIs

2) For all operating systems, you can create a window region using the various region APIs: CreateRectRgn, CombineRgn & SetWindowRgn. The region will probably include your entire form minus the "transparent" area of the GIF.

Search the forums for terms similar to "shaping forms" and "translucent windows".

An example I created (using method 2 above) can be found on psc.com

Edited: Be forewarned. Once you start shaping your form and remove things like menubars, titlebars, borders, etc, you will have to add a lot more code to allow the form to resize, move, allow menus and more. Custom shaped windows are not easy.

[Milk]

lol, If you do search you might well find links posted by myself to one of LaVolpes projects on PSC.

Maybe someone else can confirm this but I've found I seem to get much better performance using Regions rather than SetLayeredWindowAttributes. SetLayeredWindowAttributes however can be used for fancier things.

[saturnus83]

Hi guys, thank you both!

I tested the LaVolpe's solution but I obtained this:

[IMG][/IMG]

The problem is that the background of the form under the gif image doesn't change! Also, when a make transparent the form, became transparent the images and the others controls!

Can you help me more?

P.S. I have already searched everywhere in the web but I find nothing!

[Milk]

You need to apply the region to the form not the image, you also don't need to use a Gif if you don't want to. The region is created from a colour (presumably the top left pixel)

The attached loads a region (as created by Lavolpe's class) from a resource and applies it to the form.

[LaVolpe]

As Milk suggested. Do not use a gif, use a bitmap. Bring your gif into Paint and fill the top/transparent color with a color not otherwise in the image, maybe magenta?

[saturnus83]

Thank you Milk, but I need some explanation... I'm new to VB... ;-)
Your project works well !

You put your image as form background, isn't it?
The image must be in BMP, JPEG, GIF format?
You add "clsRegions" Module to your project, isn't it?

How can I make the "trans.RES"?
How can you made the background transparent?

Thank you again, you're saving my job!

[saturnus83]

Yes, I've tried with a bitmap too... but the result is the same. :'(
The image color that I want to make transparent is disappeared, but
instead of be totally transparent I see the form background color.

Thank you too

[LaVolpe]

Use BMP, not JPG. Using regions to shape a form requires a consistent color to be considered "transparent". JPG compresses colors so if your transparent color was Red, it may look red to your eyes, but its color value in JPGs could be reddish, not red. If you are going to use GIF, then don't use Transparent GIFs.

Can you post your GIF/image here on this site? We can apply it to Milk's region.zip example.

[saturnus83]

Use BMP, not JPG. Using regions to shape a form requires a consistent color to be considered "transparent". JPG compresses colors so if your transparent color was Red, it may look red to your eyes, but its color value in JPGs could be reddish, not red. If you are going to use GIF, then don't use Transparent GIFs.

Can you post your GIF/image here on this site? We can apply it to Milk's region.zip example.

Ok.
This attach contain the BMP, GIF, GIF with transparent images:
Images.zip

[LaVolpe]

Ok, simple enough
1. Using Milk's regions.zip project
2. Add your bitmap to the form's Picture property
3. Resize the form as needed so that the form does not go beyond any pink/magenta area of the bitmap
4. Tweak the code in the form to look like this and then run the project

Option Explicit

Private Sub Form_Click()
   Unload Me
End Sub

Private Sub Form_Load()
Dim cRgn As clsRegions, hRgn As Long
   Set cRgn = New clsRegions
   'hRgn = cRgn.ImportRegion(rgn_FromResource, "Custom", 101)
   hRgn = cRgn.RegionFromBitmap(Me.Picture, Me.hWnd)
   'cRgn.SetRegionToWindow hRgn, Me.hWnd
End Sub

Note: That clsRegions class contains much more region functions that you will probably use. Feel free to remove functions that you will not need. Leaving those functions in does no harm, only makes your project a wee bit larger.

[saturnus83]

Ok, simple enough
1. Using Milk's regions.zip project
2. Add your bitmap to the form's Picture property
3. Resize the form as needed so that the form does not go beyond any pink/magenta area of the bitmap
4. Tweak the code in the form to look like this and then run the project

Option Explicit

Private Sub Form_Click()
   Unload Me
End Sub

Private Sub Form_Load()
Dim cRgn As clsRegions, hRgn As Long
   Set cRgn = New clsRegions
   'hRgn = cRgn.ImportRegion(rgn_FromResource, "Custom", 101)
   hRgn = cRgn.RegionFromBitmap(Me.Picture, Me.hWnd)
   'cRgn.SetRegionToWindow hRgn, Me.hWnd
End Sub

Note: That clsRegions class contains much more region functions that you will probably use. Feel free to remove functions that you will not need. Leaving those functions in does no harm, only makes your project a wee bit larger.

Ok, using Milk's regions.zip project all works well but when I put into my
project I obtain this:


using this form in design-time:


Why so???

[LaVolpe]

Did you use the bitmap in your project or are you still using the transparent GIF in the form's Picture property? Additionally, you will want to resize your form to the exact dimensions of the bitmap. How now?

[saturnus83]

Did you use the bitmap in your project or are you still using the transparent GIF in the form's Picture property? Additionally, you will want to resize your form to the exact dimensions of the bitmap. How now?

Yes I've used the BMP file, and now I've resize the form, but nothing change.
The only thing that I don't have included in my project is the "trans.RES" file. It's necessary?

[LaVolpe]

I think I know what the problem is. Change your form's BorderStyle=0 (no borders). Duh, I should have noticed that. You might also want to compare your other form properties against Milk's sample form.

[saturnus83]

I think I know what the problem is. Change your form's BorderStyle=0 (no borders). Duh, I should have noticed that. You might also want to compare your other form properties against Milk's sample form.

I've already changed the BorderStyle to 0. I've compered the 2 forms proprierties but even if I made some changes the result is the same!
I'm unhopeful

[LaVolpe]

Can you copy your form, remove all code except the region stuff & zip it & post it so we can take a look see.

[Milk]

I'm guessing perhaps you have not loaded the bitmap into the Forms Picture property, but you are using a PictureBox or some such.

Here's the project again with your image, using LaVolpes class in the way he suggested earlier.

Double click to close this time. Click and drag to move the window.

[saturnus83]

Can you copy your form, remove all code except the region stuff & zip it & post it so we can take a look see.

What you asked me is no more necessary...
Because when I created a new project to send you, this one works very well. So, I decide to delete my old form and crete a new one, and now all works!
I don't now how... but works! STRANGENESS OF PROGRAMMING !!!!

Thanks everyone!!!!
You're very kind!!!

[Darkened Linux]

I had the same problem and I just found out why. You need to use Adobe Photoshop. When you save you should save your image as a .gif. Then it prompted me "Exact Black and White?". I entered yes. I put the image into a ImageBoxb in VB. I also made the tranceparency white and the background white. Then it should worked, it worked for me!