从 Photoshop 到 Flash 的具有透明度的 PNG:如何使 .swf 完全显示 .psd 的效果?

发布于 11-18 03:42 字数 1780 浏览 2 评论 0原文

我在 Photoshop 中有两个图层:1 - 纹理,2 - 与纹理重叠的半透明图像。两者的组合在 Photoshop 中看起来很不错。我将它们从 Photoshop 中单独导出,将它们保存为 24 位 PNG,并将透明度和颜色转换为 sRGB。 (PS的工作色彩空间是sRGB。)

将它们导入flash的结果让我哭了(见下图,注意十字周围的区域是什么样的)。 :(

我尝试动态加载 PNG 并直接将它们导入 fla (压缩类型:lossles,允许平滑:false)。看起来半透明区域在导出时保存不准确。更让我困惑的是为什么动态之间的结果不同加载和直接导入。

我错过了这些症状的深入解释将非常感谢


EDIT1这是我坚持的PSD。 。我仍然无法将它们放入 fla 中:透明区域会变脏。

你会发现 transparency.psd,它只有两层 test/transparency.zip" rel="nofollow noreferrer">http://noregret.org/test/transparency.zip (400 kb)


EDIT2 一位 Flash 开发人员向我指出“预乘 alpha 问题

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

我想这一定是我正在努力克服的问题。

据我目前所知,Photoshop 内部使用直接 alpha(在 PNG 导出时与白色预乘)和 Flash 使用预乘 Alpha。但我仍然不明白:透明图像渲染的差异是什么?而且我仍然不知道需要执行哪些操作才能使 PS 和 Flash 中的内容看起来相同(或者至少我如何指导我们的艺术家准备图像)。

有人吗?我继续在谷歌中寻找答案。


编辑3不幸的是,我无法平整图像。这里的例子只是大图景的一小部分。我有一个相当复杂的界面,纹理顶部有很多半透明元素。这幅画看起来很酷(就像它是用皱巴巴的纸板或其他东西制成的)。所以,我需要单独的纹理和半透明布局。在 Flash 的顶层添加混合模式确实解决了“重影区域”问题,但它也显着改变了图片,这是不可接受的。


半透明层:

在此处输入图像描述

纹理层:

在此处输入图像描述

结果(Windows 上 PS 和 Flash Player 的屏幕截图):

  • Photoshop(原始): Ok
  • Flash(导入到 fla):重影区域
  • Flash (png加载):光鬼区

在此输入图像描述

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

暖伴2024-11-25 03:42:43

您是否使用 Bitmap 对象来渲染上面的图像?我遇到过类似的问题,将 2 个对象与 alpha 重叠,之前最上面的对象的 alpha 创建了与您所显示的类似的视觉伪像。使用位图的原生 Alpha 混合我始终无法正确解决该问题。我的解决方案是使用 copyPixels 函数手动组合它们。像这样的东西:

public function mergeImgs(baseImg : Bitmap, topImg : Bitmap) : void
{
    baseImg.bitmapData.copyPixels(topImg.bitmapData, topImg.bitmapData.rect, new Point(), null, null, true);
}

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);
}
好久不见√2024-11-25 03:42:43

看起来您正在 FLA 中获得压缩的 JPEG 图像格式,而不是 PNG。为了避免这种情况,您需要指定图像压缩应该是无损的。您可以在库或 MovieClip 道具中执行此操作。

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.

梦魇绽荼蘼2024-11-25 03:42:43

为什么这些必须作为单独的图层导入。您可以在 Photoshop 中拼合图像并将其导入。

是的,你会失去一些固有的灵活性,但有时我们必须做出这些妥协。

这就是您的选择:

  1. 将顶部(半透明)层的混合模式切换为变亮。这将消除那个丑陋的环,但它也会削弱整体效果,所以你必须在 Photoshop 中进行补偿。这是更简单的方法。

  2. 在 PixelBender 中按照您需要的方式自行实现 Alpha 合成。

  3. 展平,切出精确的效果区域,然后将它们覆盖在 Flash 中的原始背景纹理上。哈克,是的,但它应该可以工作。

干杯!

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!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文