5

I have two layers in Photoshop: 1 -- a texture, 2 -- a semi-transparent image that overlaps texture. The combination of the two looks nice in Photoshop. I export them separately from Photoshop saving them as 24 bit PNG with transparency and colors converted to sRGB. (Working color space of PS is sRGB.)

The result of importing them into flash makes me cry (see images below, note what areas around crosses look like). :(

I tried both loading PNGs dynamically and directly importing them into fla (compression type: lossles, allow smoothing: false). Looks like semi-transparent areas are saved inacurately on export. What's more puzzling to me is why the results differ between dynamic loading and direct importing.

What am I missing? In-depth explanation of these symptoms would be highly appreciated.

EDIT1 Here is that psd I'm stuck upon. Inside the zip you'll find transparency.psd, which has only two layers. I still have no luck in placing them into fla: transparent areas get dirty.

http://noregret.org/test/transparency.zip (400 kb)

EDIT2 A fellow flash developer pointed me to "premultiplied alpha problem".

http://en.wikipedia.org/wiki/Alpha_compositing#Description

I think this must be the problem I'm trying to overcome.

As far as I know by now, Photoshop internally uses straight alpha (premultiplying with white on PNG export) and Flash uses premultiplied alpha. But I still don't get it: what yields the difference in rendering of transparent images? And I still don't know exactly what operations I need to perform to get things look the same in PS and Flash (or at least how do I instruct our artists on preparing the images).

Anyone? I'm continuing to dig Google for the answer.

EDIT3 Unfortunatelly, I can't flattern image. This example here is just a small part of a bigger picture. I have a rather complicated interface with a lot of semi-transparent elements on top of a texture. The picture looks cool (like it's made of crumpled cardboard or something). So, I need a texture and semi-transparent layout separately. Adding blendmodes to top layer in flash does solve "the ghosting areas" problem, but it also significantly changes the picture, which is not acceptable.

Semi-transparent layer:

enter image description here

Texture layer:

enter image description here

Results (screenshots of PS and Flash Player on Windows):

  • Photoshop(original): Ok
  • Flash (import to fla): heavy ghost area
  • Flash (png loading): light ghost area

enter image description here

Michael Antipin
  • 3,522
  • 17
  • 32
  • Would you mind putting up your loading code? – shanethehat Jul 04 '11 at 12:06
  • I think it's irrelevant to the problem. Just created two instances of `flash.display.Loader`, added them to display list and called `load(new URLRequest("layer1.png"))`, nothing else. And still I get those ghost areas, which makes me think that the problem is how PS saves PNG files. – Michael Antipin Jul 04 '11 at 12:21
  • It might also be the alpha translation in the Flash player, have you tried importing your png back into photoshop and comparing that to the original when on the same background? – shanethehat Jul 04 '11 at 13:19
  • Thanbk you for the idea, I've imported PNG back into PS and the result is perfectly Ok. – Michael Antipin Jul 04 '11 at 13:27
  • I've added a .psd to my post. Hope someone can help me out. – Michael Antipin Jul 04 '11 at 18:00
  • One more question while I don't have time to try myself, is your import to fla image a screen grab from the player or the IDE, and which IDE are you using? – shanethehat Jul 04 '11 at 20:32
  • It's a screenshot of what flash player shows me, on Windows. SWF is generated by Flash CS5. But image loading yields bad results anyway, so I don't really think that it's IDE's fault. – Michael Antipin Jul 04 '11 at 20:39
  • Why do they need to be transparent at all? Why not use a jpg? – Plastic Sturgeon Jul 12 '11 at 23:36
  • @Nox: have you tried loading the images in via PHP or similar as a byteArray then rebuilding with BitmapData? – shanethehat Jul 16 '11 at 16:41

3 Answers3

1

It looks like you are getting JPEG image format with compression inside your FLA, not PNG. And to avoid that, you need to specify that your image compression should be lossless. You can do that in library or in MovieClip props.

taokakao
  • 29
  • 3
  • As I mentioned in the post above, I used _compression type: lossles_ and _allow smoothing: false_ from the very beginning. – Michael Antipin Jul 04 '11 at 13:14
  • I have one more idea: those artefacts could appear because of scaling (not necessarily of those images, may be parent is scaled). – taokakao Jul 04 '11 at 15:10
  • Thank you for the idea, but this is not the case. I import images and place them into root timeline. Flash shows no scaling on images and there are no parent containers. – Michael Antipin Jul 04 '11 at 15:41
1

Are you using Bitmap objects to render the images above? I had encountered a similar problem with overlapping 2 objects with alpha before where the top-most object's alpha created visual artifacts similar to what you are showing. Using Bitmap's native alpha blending I was never able to correctly fix the problem. My solution was combining them manually using the copyPixels function. Something like this :

public function mergeImgs(baseImg : Bitmap, topImg : Bitmap) : void
{
    baseImg.bitmapData.copyPixels(topImg.bitmapData, topImg.bitmapData.rect, new Point(), null, null, true);
}
Godfather
  • 1,089
  • 9
  • 21
0

Why do these HAVE to be imported as separate layers. You could just flatten the image in photoshop and import it.

Yes, you lose some of the inherent flexibility, but sometimes we have to make these compromises.

That said here are your options:

  1. Switch the blending mode of the top(semi-transparent) layer to lighten. This will get rid of that ugly ring, however it will also dampen the overall effect so you will have to compensate for that in photoshop. This is the easier way.

  2. Implementing the alpha composting yourself, the way you need it, in PixelBender.

  3. Flatten, cut out the exact effect area, then overlay those over your original background texture in flash. Hackish, yes, but it should work.

Cheers!

bitbandit
  • 409
  • 5
  • 10
  • "but they also significantly change the picture" The overall picture? How so, if you're only applying that blendmode to that layer. If you're talking about the semi-transparent layer itself, then yes your artists will have to compensate a bit. From your example and my observations this doesn't appear to be extreme, however it will be tedious if you have a lot of these elements. – bitbandit Jul 11 '11 at 16:15
  • Unfortunatelly, I can't flattern image. This example here is just a small part of a bigger picture. I have a rather complicated interface with a lot of semi-transparent elements that make picture look cool (like it's made of crumpled cardboard or something). I need a texture and semi-transparent layout separately. Blendmodes do solve "the ghosting areas" problem, but they also significantly change the picture. _I'm not the one who is used to making artists do their work again from scratch just because I can not solve a technical problem._ – Michael Antipin Jul 11 '11 at 16:15
  • Yep, the whole layout of an interface is constructed with those transparent thingies (I can't post the whole picture to show it to you, sorry). But anyways, if I make the picture look different in Flash because I fail to find the right solution, then I'll imply that the work of my colleagues is not that important, which will make them sad. I don't want this. :) – Michael Antipin Jul 11 '11 at 16:20
  • But sometimes you just hit a hard technical barrier. There are certain things flash can't do or do well. Give PixelBender a whirl if that's not cutting it then, you should have a talk with your team. Is it really worth it in terms of productivity to write your own blending algorithm? If so, go for it. But keep in mind, as developers one of the hard things to learn is that we can't always be superman. :) – bitbandit Jul 11 '11 at 19:19
  • True. :) But I still think there should be a solution out there. And my guess is that it deals onnly with properly preparing images for import int Flash. To be honest, I lack the time right now to perform a complete investigation myself. Which is why I am here. :) – Michael Antipin Jul 11 '11 at 21:00