PNG с прозрачностью из Photoshop во Flash: как заставить .swf отображать именно то, что делает .psd?

Question

У меня есть два слоя в Фотошопе: 1 - текстура, 2 - полупрозрачное изображение, которое накладывается на текстуру. Сочетание двух выглядит красиво в фотошопе. Я экспортирую их отдельно из Photoshop, сохраняя их как 24-битный PNG с прозрачностью и цветами, преобразованными в sRGB. (Рабочее цветовое пространство PS - sRGB.)

Результат импорта их во флэш заставляет меня плакать (см. Изображения ниже, обратите внимание на то, как выглядят области вокруг крестов). :(

Я пытался динамически загружать PNG и напрямую импортировать их в fla (тип сжатия: lossles, allow smoothing: false). Похоже, полупрозрачные области сохраняются неточно при экспорте. Меня больше удивляет, почему результаты отличаются между динамической загрузкой и прямым импортом.

Чего мне не хватает? Подробное объяснение этих симптомов будет высоко оценено.

<Ч />

EDIT1 Вот этот PSD, на котором я застрял. Внутри zip вы найдете transparent.psd , в котором всего два слоя. Мне все еще не повезло поместить их в fla: прозрачные области загрязняются.

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

<Ч />

EDIT2 Один из разработчиков флэш-памяти указал мне на « предварительно умноженную альфа-проблему ».

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

Я думаю, что это проблема, которую я пытаюсь преодолеть.

Насколько я знаю, Photoshop внутренне использует прямую альфа (предварительное умножение с белым при экспорте в PNG), а Flash использует предварительно умноженную альфа . Но я все еще не понимаю: что дает разницу в рендеринге прозрачных изображений? И я до сих пор не знаю точно, какие операции мне нужно выполнить, чтобы все выглядело одинаково в PS и Flash (или, по крайней мере, как я могу инструктировать наших художников по подготовке изображений).

Кто-нибудь? Я продолжаю копать гугл для ответа.

<Ч />

РЕДАКТИРОВАТЬ3 К сожалению, Я не могу похвастаться изображением . Этот пример - лишь малая часть общей картины. У меня довольно сложный интерфейс с множеством полупрозрачных элементов поверх текстуры. Картинка выглядит круто (как будто она сделана из мятого картона или чего-то такого). Итак, мне нужна текстура и полупрозрачный макет отдельно. Добавление режимов смешивания к верхнему слою во флэш-памяти решает проблему «областей-призраков», но также значительно меняет изображение, что недопустимо.

<Ч />

Полупрозрачный слой:

Текстурный слой:

Результаты (скриншоты PS и Flash Player в Windows):

• Фотошоп (оригинал): Хорошо
• Вспышка (импорт в fla): тяжелая призрачная область
• Вспышка (загрузка PNG): светлая призрачная область

Answer 1

Используете ли вы растровые объекты для визуализации изображений выше? Я сталкивался с подобной проблемой с перекрытием двух объектов с альфа-каналом до того, когда альфа самого верхнего объекта создавал визуальные артефакты, похожие на то, что вы показываете. Используя собственное альфа-смешение Bitmap, я так и не смог правильно решить проблему. Моим решением было объединить их вручную, используя функцию copyPixels. Примерно так:

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

Answer 2

Похоже, вы получаете формат изображения JPEG со сжатием внутри FLA, а не PNG. И чтобы избежать этого, вам нужно указать, что сжатие изображений должно быть без потерь. Вы можете сделать это в библиотеке или в приложении MovieClip.

Answer 3

Почему они должны быть импортированы как отдельные слои.Вы можете просто сгладить изображение в фотошопе и импортировать его.

Да, вы теряете некоторую присущую гибкость, но иногда нам приходится идти на эти компромиссы.

При этом вы можете выбрать следующие варианты:

1. Переключите режим смешивания верхнего (полупрозрачного) слоя, чтобы осветлить.Это избавит от этого уродливого кольца, но также ослабит общий эффект, поэтому вам придется компенсировать это в фотошопе.Это более простой способ.

2. Реализация альфа-компостирования самостоятельно, так, как вам нужно, в PixelBender.

3. Сгладьте, вырежьтеточная область эффекта, затем наложите поверх оригинальной текстуры фона во флэш-памяти.Да, хак, но это должно сработать.

Ура!