从 Photoshop 到 Flash 的具有透明度的 PNG:如何使 .swf 完全显示 .psd 的效果?
我在 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:
Texture layer:
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(3)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您是否使用 Bitmap 对象来渲染上面的图像?我遇到过类似的问题,将 2 个对象与 alpha 重叠,之前最上面的对象的 alpha 创建了与您所显示的类似的视觉伪像。使用位图的原生 Alpha 混合我始终无法正确解决该问题。我的解决方案是使用 copyPixels 函数手动组合它们。像这样的东西:
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 :