Я собираюсь научить вас, как использовать каждый режим наложения во Flash. Проще говоря, режимы наложения используются для изменения значений цвета или прозрачности изображений. Как следует из названия, режимы наложения используются для наложения изображений вместе. Режимы наложения обычно используются для создания специальных эффектов или композитинга в играх, фильмах и графических редакторах. От взрывов, переходов между экранами, маскирования и освещения режимы наложения имеют много применений в проектах Flash.
Быстрый просмотр
Измените режим наложения с помощью пользовательского интерфейса в верхнем углу и перетаскивайте изображения вокруг, чтобы создавать различные эффекты …
Смотрите скринкаст …
… или читай тут
Режимы наложения создают составное изображение и создают интересные эффекты, смешивая пиксели в перекрывающихся изображениях или видеоклипах. Режимы наложения влияют на цвет пикселей и прозрачность. Вы можете использовать режимы наложения, чтобы подчеркнуть блики или тени, или изменить цвета на изображении.
Вы можете заметить, что некоторые режимы наложения немного похожи, но они не одинаковы. Некоторые режимы наложения являются прямыми противоположностями друг другу, но вам нужно знать, какой из них использовать в любой конкретной ситуации.
Как они работают?
Режимы наложения используют фоновый слой и слой наложения сверху, чтобы получить окончательный модифицированный слой. Каждый пиксель из фона просматривается и изменяется смешанным изображением сверху, давая вам составное изображение. Цвета и прозрачность учитываются в уравнении при обработке пикселей. Все экранные объекты, включая Sprites, Bitmaps и MovieClips, имеют свойство blendMode, которое вы можете изменить, чтобы получить нужный эффект. Вы можете установить для свойства blendMode константы, определенные в классе flash.display.BlendMode , или вместо этого вы можете использовать фактические строковые значения в кавычках.
Режимы наложения часто меняют цвета слоя, к которому вы присоединяете режим наложения, поэтому вам нужно поэкспериментировать с различными цветами и режимами наложения, чтобы увидеть, как выглядят результаты. Эксперименты с различными режимами наложения могут дать вам представление о том, как они работают. Вы должны заметить, что разные цвета часто вступают в игру с разными режимами наложения, и вы можете не получить одинаковые результаты в зависимости от фоновых изображений и используемых изображений наложения. Вам также следует помнить о порядке нанесения слоев наложения, поскольку разные порядки дают разные результаты.
Быстрый пример:
|
1
|
displayObject.blendMode = BlendMode.ADD;
|
или
|
1
|
displayObject.blendMode = ‘add’;
|
Тебе решать! Однако для первого варианта убедитесь, что вы импортировали flash.display.BlendMode .
Многие люди будут просто скользить по каждому из режимов наложения, пока не получат эффект, который выглядит красиво, но я хочу объяснить вам, как работает каждый режим наложения, и показать вам некоторые примеры или сценарии, где режимы наложения могут быть полезны. Как разработчик игры, я буду использовать примеры режимов наложения в игровом контексте. Обычно я использую режимы наложения для таких вещей, как туман, взрывы, частицы и освещение, но режимы наложения имеют бесконечное использование и функции, которые вам придётся придумать!
Я собираюсь рассказать об этих режимах наложения в парах или группах. Большинство режимов смешивания идут с похожим или прямо противоположным партнером. Сегодня я расскажу о режимах наложения, перечисленных ниже.
Режим смешивания : НОРМАЛЬНЫЙ
Описание и примеры использования
НОРМАЛЬНЫЙ цвет применяется нормально, без взаимодействия с основными цветами.
Первый режим наложения, о котором мне нужно поговорить, это НОРМАЛЬНЫЙ режим наложения. По сути, это режим смешивания по умолчанию, который не применяет смешивание к фоновому изображению.
При экспериментировании с различными режимами наложения, вы будете использовать НОРМАЛЬНЫЙ режим наложения для сравнения.
Использование режима наложения NORMAL аналогично тому, как вообще не использовать режим наложения. Зная, что режимы наложения требуют обработки и часто влияют на производительность вашего Flash-проекта, вы должны попытаться ограничить использование режима наложения, если можете.
50 объектов с нормальным смешиванием намного быстрее, чем 50 объектов с режимами смешивания OVERLAY или HARDLIGHT.
Техническое описание
Экранный объект отображается как обычно в верхней части фона. Никакие цветовые значения или прозрачность не изменены.
Пример:
|
1
|
displayObject.blendMode = BlendMode.NORMAL;
|
или
|
1
|
displayObject.blendMode = ‘normal’;
|
Режим смешивания : LAYER
Описание и примеры использования
Режим смешивания LAYER аналогичен режиму смешивания NORMAL, поскольку он не изменяет цвета. Однако режим смешивания LAYER вызывает создание группы прозрачности или альфа-канала. По сути, он устанавливает непрозрачность слоя на 100%.
ПРИМЕЧАНИЕ. Это необходимо для компоновки с режимами наложения ALPHA или ERASE, о которых я буду говорить далее.
Техническое описание
Отображается аналогично режиму наложения NORMAL со 100% непрозрачностью. Создание альфа-канала позволяет изменять слой с помощью других режимов наложения, влияющих на прозрачность, таких как ALPHA или ERASE.
Пример:
|
1
|
displayObject.blendMode = BlendMode.LAYER;
|
или
|
1
|
displayObject.blendMode = ‘layer’;
|
Режим смешивания : АЛЬФА
Описание и примеры использования
Режим наложения ALPHA изменяет прозрачность фонового слоя, делая его прозрачным для различных областей в зависимости от прозрачности слоя наложения.
Техническое описание
В режиме наложения ALPHA применяется альфа-маска, в которой прозрачные пиксели слоя наложения влияют на прозрачность фона. Как правило, вы будете использовать второй фоновый слой с этим режимом наложения, который будет показан через первый фон, когда он станет прозрачным.
Режим наложения LAYER должен применяться к родительскому экранному объекту, который действует как первый фон, который будет сделан прозрачным.
Пример:
|
1
|
displayObject.blendMode = BlendMode.ALPHA;
|
или
|
1
|
displayObject.blendMode = ‘alpha’;
|
Режим смешивания : стереть
Описание и примеры использования
Режим наложения ERASE противоположен режиму наложения ALPHA, но все же изменяет прозрачность фонового слоя, делая его прозрачным для различных областей в зависимости от прозрачности слоя наложения.
Техническое описание
Режим наложения ERASE работает подобно режиму наложения ALPHA, но применяет инвертированную альфа-маску, в которой непрозрачные пиксели слоя наложения влияют на прозрачность фонового слоя, делая эти пиксели прозрачными. Как правило, вы будете использовать второй фоновый слой с этим режимом наложения, который будет показан через первый фон, когда он станет прозрачным.
Режим наложения LAYER должен применяться к родительскому экранному объекту, который действует как первый фон, который будет сделан прозрачным.
Пример:
|
1
|
displayObject.blendMode = BlendMode.ERASE;
|
или
|
1
|
displayObject.blendMode = ‘erase’;
|
Режим смешивания: ДОБАВИТЬ
Описание и примеры использования
Режим смешивания ADD используется для усиления белого и осветления перекрывающихся цветов. Цвета слоя смешения выше среднего диапазона осветляют фоновый слой, в то время как более темные цвета прозрачны, оставляя фоновый слой нетронутым.
Техническое описание
Режим смешивания ADD буквально добавляет шестнадцатеричные значения цвета слоя смешивания к фоновому слою. Он не может идти выше, чем белый.
Пример:
|
1
|
displayObject.blendMode = BlendMode.ADD;
|
или
|
1
|
displayObject.blendMode = ‘add’;
|
Режим смешивания : СУБТРАКТ
Описание и примеры использования
Режим наложения SUBTRACT затемняет фоновый слой и может рассматриваться как противоположность режима наложения ADD. Белые области слоя наложения делают фоновый слой черным, в то время как черные области наложения изображения не влияют на фоновый слой.
Режим наложения SUBTRACT используется для усиления черного и затемнения перекрывающихся цветов. Цвета смешанного изображения выше среднего диапазона затемняются, а более светлые — прозрачные, оставляя фоновый слой нетронутым.
Техническое описание
Режим наложения SUBTRACT вычитает значения шестнадцатеричного цвета слоя наложения в фоновый слой. Это не может пойти ниже, чем черный.
Пример:
|
1
|
displayObject.blendMode = BlendMode.SUBTRACT;
|
или
|
1
|
displayObject.blendMode = ‘subtract’;
|
Режим смешивания : LIGHTEN
Описание и примеры использования
LIGHTEN использует более светлые цветные пиксели от каждого слоя. Подобно режиму наложения ADD, он используется для усиления более светлых областей перекрывающихся слоев. Каждый пиксель из каждого слоя просматривается, и светлые значения двух пикселей сохраняются.
Техническое описание
LIGHTEN заменяет фоновые пиксели, которые темнее, чем пиксели слоя наложения. Фоновые пиксели светлее, чем пиксели слоя наложения, не изменяются.
Пример:
|
1
|
displayObject.blendMode = BlendMode.LIGHTEN;
|
или
|
1
|
displayObject.blendMode = ‘lighten’;
|
Режим смешивания : DARKEN
Описание и примеры использования
DARKEN использует более темные цветные пиксели от каждого слоя. Он противоположен режиму смешивания LIGHTEN и используется для усиления темных областей перекрывающихся слоев. Каждый пиксель из каждого слоя просматривается, и темные значения двух пикселей сохраняются. Это можно использовать для добавления различных текстурных эффектов в наш фоновый слой.
Техническое описание
DARKEN заменяет пиксели фона, которые светлее пикселей слоя наложения. Пиксели фона, более темные, чем пиксели слоя наложения, не изменяются.
Пример:
|
1
|
displayObject.blendMode = BlendMode.DARKEN;
|
или
|
1
|
displayObject.blendMode = ‘darken’;
|
Следующий шаг
Вторая часть этого урока (скоро) будет охватывать остальные режимы наложения:
- УМНОЖЬТЕ
- РАЗНИЦА
- INVERT
- ЭКРАН
- OVERLAY
- ЖЕСТКИЙ СВЕТ
Будьте на связи!