Black fringe on transparent png in Captivate 5

[zepvideo]

I'm converting a CP4 file to CP5. The files include png images that cover part of the screen. The edge where the png become transparent shows an ugly black fringe (edge, rim, line, whatever you want to call it) when I preview the file, either a regular preview or a web browser preview. The file is set up as a single-layer png file with transparency at the edge. I've looked at it closely in Photoshop. The edge is a 3-pixel fade from yellow to transparent, there is no black in the file. So far, I have tried:

• Opening, resaving and reimporting the png files
• Importing a psd file
• Importing the new files (both types) into a new CP5 file

If I set the new file to have no transistions, and no fade at the beginning and end of the presentation, the fringe does not appear. If I have a fade at the beginning and end, the fringe flashes on at the beginning and the end. In the old presentation, the slide, the graphic and the presentation itself are set with no transitions, and the fringe stays on the edge the whole time.

I had another image that was also coming out badly; the drop shadow was dropping out and the edge was too hard. I resaved it (using "Edit with Photoshop"), Saved for Web as a 24-bit png, and that fixed it. But this is not helping with the other files. These, of course, all look fine in Captivate 4.

Here is a picture of the fringe:

[ANJALI_GUPTA]

Hello,

Well i replicated the issue on my side too but it didnt show this error. As a resolution you can try doing this with a different slide and with a different png image and this might prove out to be image specific.

Let me know if this works or not.

[zepvideo]

After further investigation, it appears that the black fringe is caused by the transparent part of another image crossing over the yellow area that has the fringe. Remember, this only happens when I preview the file, not in the native Captivate file. Here is the whole page, so you can see the context :

The orange bars at the top and bottom are set up as a single Photoshop file, with a large transparent area in the middle.

• If I move the yellow part (with the fringe) to the front, the fringe goes away.
• If I delete the orange bars, the fringe goes away.
• If I cut the orange bars into two parts, the fringe only shows where the files cross over the yellow part at the top and bottom of the page.
• If I merge the yellow part with the background, the fringe goes away.

So, I tried making a new file for the yellow area.

• I made a yellow rectangle png, brought it in: no black fringe.
• I made a file that had yellow across the top and the side, so that the center area was transparent: no black fringe.
• I BLURRED THE EDGE of the same file, so that the yellow fades from solid to transparent: BLACK FRINGE! And, the fringe was the same width as the semi-transparent area, not just a single black line (it fades over about 12 pixels).
• AND... I tried removing the soft edge, but making the whole yellow area semi-transparent. When I render the preview, the whole yellow area is dark green (still semi-transparent, otherwise it looks like it would be even darker).

At least this seems to be following a pattern. Semi-transparent areas in a png under another transparent png will show up as black. But, if I reverse the stacking order so that the orange bars are below the yellow area, they don't seem to show a fringe, but the yellow area develops a WHITE fringe where it crosses the solid orange, but not over anything else on the page (I inserted a black rectangle under to check).

What in the heck? Can you figure out what this might be?

[ANJALI_GUPTA]

Hi,

Can you let me know the purpose of using photoshop here with the images?

[zepvideo]

The short answer is, I was trying to figure out what was going on with the files, and I hoped that the Photoshop round-tripping feature in CP5 would be the answer. Unfortunately, the files behave the same way whether they are pngs or psds.

When I first opened the CP5 file, the orange header/footer png had lost its soft edge and drop shadow. I didn't have the support file, so I opened it by choosing it in the CP5 library with Edit with (Photoshop). Lo and behold, the file looked correct, and when I saved it back out and reimported it, the soft edges were back (remember, they looked fine in CP4). Unfortunately, the soft edges on this image caused the black fringe to appear on the yellow side bar. I just looked back at some of the other files in the set where I hadn't been messing around with the images. Hard-edged orange file = no black fringe on the yellow side bar. Soft-edged orange file = black fringe on the yellow side bar. Inserting the soft orange file recreates the black fringe problem every time, and only on the slides where it's actually used.

By the way, I did have the support files for the yellow bar, so I didn't have to export it to Photoshop. I only did that as a test to see if I could fix the fringe issue. It doesn't seem to make any difference if I export it and reinsert it, or just use the orginal as is. It's all related to the transparency in the orange header/footer.

[zepvideo]

I showed my file to a Captivate user in my department, and she showed me how to go to Properties and eye-dropper the edge of the yellow bar to set the semi-transparent area as the transparent color for that image. Voila! That solved the problem. As to why it only shows up when it's under another transparent png, who knows. But at least the horrible black edge is gone. She said they had had to do the same thing to the files in Captivate 4, but for some reason the setting didn't transfer when porting the program to CP5.

[jhanafi]

Hi,

I had the same problem but with semi transparent PNG buttons. Unfortunately, you cannot set a transparent color in buttons, like you would do for images. To remove the "fringe", I simply set the Preferences/Project/SWF size and Quality to High 24bit. I noticed that, this setting is not kept when you import a CP4 file to CP5, which was also your case.

That's how I solved my problem and I think it can solve yours (or other's) as well.