Images Losing Transparency when Flare Resizes them?

[beagley]

I have a bunch of images (png) with transparent parts.

These display fine in Flare... the background color comes through, for example.

However, when I click and drag to make an image smaller, and then recompile, the image loses it's transparency in the WebHelp output.

This seems like a bug to me... or rather, a missing feature? The ability to scale an image for the final project and maintain the transparent parts as transparent?

In the meantime, I guess I adjust the width in the code?
-d

[SteveS]

If you can rescale by hard coding and retain the transparency it's definately a bug.

Lodge a bug report here

[doc_guy]

You can rescale in the code and the transparency is retained? But if you do it in the editor then the transparency is lost? I think that is what you said, but I wanted to clarify, because that doesn't make any sense. (I'm not saying you're wrong, or that I don't believe you; I do. It is just totally bizarre behavior.)

I get around these types of problems by doing all my image resizing in an image editor, rather than in Flare. My experience is that you almost always get a better image if you resize in an image editor than if you let HTML or another non-image program resize your image.

[beagley]

Clarification:
I can rescale either in the code or in Flare's editor (by clicking and dragging on the corner of an image) and the transparency works fine.

Once I COMPILE the WebHelp, however, the transparency is lost.

Yes, if I just made my image with transparency to the size I wanted in my source program (Omnigraffle, btw), I'd be better off.

But I'm reluctant to do that, because it isn't what I'm Really After:
The reason I don't want to scale my image in an image editor ahead of time is that I actually want my images to be original size if the user's screen is big enough and just scale DOWN if they have a smaller window open. I haven't figured out the CSS for making the width .8 of the windows width but only up to the images native size. (If anyone can help me out, that'd be super.) In the meantime, I am reluctant to make my image a fixed size at all.

Thinking in pixels makes my brain hurt, given all the various platforms I'll have to support. Some of my users are still setting their monitors to 600x800, some of my users want to access WebHelp on their iPhones, and my developers (unfortunately) lean towards 1024 pixels across. Oy!

[KevinDAmery]

Just a thought: what image format are you using and what browser are you testing in? The reason I ask is IE6 doesn't support transparency in PNGs. It only supports transparency in GIFs. IE7 and Firefox do support transparent PNGs, but IE6... well, the less said about that piece of %$^@ the better....

[LTinker68]

I haven't figured out the CSS for making the width .8 of the windows width but only up to the images native size. (If anyone can help me out, that'd be super.)

Setting a min-width value of 80% might work, but you'd have to try it to see if it gave you want you wanted. And IE6 doesn't recognize the min- and max- width and height properties, so it won't work in that browser, if it works at all.

[doc_guy]

I've never heard of a variable-sized image, or an image whose size is dependent on the viewer size. Sorry I can't help you out there.

[beagley]

I am using PNGs and the latest Firefox on both Windows and Mac.

Thanks for the warnings about PNG transparencies. We DO have some old-school clients, so that might be an issue down the road. I'll have to be careful how much I *depend* on transparencies.

doc_guy: Yeah, images that scale their width to the size of their enclosing element are popping up here and there on the Web. I find it appealing, and I don't want to lock my image to a specific pixel size. But I don't really know what I'm doing yet.

The above posters comment about a min-width/max-width CSS attribute is probably what I need to do more research on.

Thanks for contributing, everyone!

[doc_guy]

Interesting.... Here is a site that talks about it:

http://css-discuss.incutio.com/?page=UsingPercent

...and here is a site where the image changes size, depending on the browser size:

http://www.rock-on-rock-on.com/

Cool. I'm going to have to learn more about this.

[beagley]

Good find!
Yes, that's what I want to do. The only problem is that I want to set width to "50% but with a maximum width of the image's original pixels". I'm not sure how to pull that off.

-d

[beagley]

Just to follow up:

It appears that Flare discards the transparency of images whenever it touches them.

Whether scaling the image, or just putting it in a PDF, whenever Flare manages an image, it changes the transparent parts of the image to WHITE.

I have submitted this as a bug, but if anyone has thoughts or comments I'd love to hear them. It is TOTALLY possible that I'm missing something major here.

Here are the steps I put in the bug:

Transparent parts of images are turned to white during any output where image is modified/touched, including all PDF output

1. Create a project. Use your stylesheet to make the backdrop color a nice soft color. Like off-yellow.

2. Insert an image that is a PNG (or other image type that supports transparency). For example, you could have a PNG of a screenshot with a callout on it (from SnagIt, OmniGraffle, or other program).

3. Compile the WebHelp. You will notice that the transparency works fine!

4. Scale your image slightly (click to drag it, or use the Max-width attribute, or however).

5. Recompile your WebHelp. You'll notice that the transparency is gone.

6. Return the image to normal, and now make a new PDF target.

7. Compile a PDF. Your transparency will be gone whether the image had any scaling applied or not.

Note: by "lose the transparency" I mean that the transparent parts of the image are turned to white.

Conclusion: It would appear that whenever Flare touches an image (rather than just copying it into a directory), it reproduces it in a manner that causes it to lose any transparency, turning it to white.

When Flare has to touch/modify/scale an image in any way, or puts the image into a PDF, it should output the image in such a way that the transparency is maintained.

[peterbrown05]

im running the latest version of flare and this issue is still there.
has anyone had any update from madcap as to how we can work around this issue?

cheers
peteB