Блог одиноко стоящего игрока вспышки

Blend Modes.

Давно хотел написать небольшую статейку по режимам наложения (blend modes), но некий пробел в знании вопроса останавливал меня. Сегодня я наконец узнал, как использовать режимы alpha, layer и erase, поэтому срочно выкладываю всю пачку знаний по вопросу режимы наложения.

Итак. Что это такое? Для тех кто не в курсе – в восьмой версии флеш плеера к обычному наложению клипов по альфа каналу добавилось несколько режимов (как в фотошопе). Говоря проще – режим наложения – это правило: как пиксели верхнего изображения будут накладываться на пиксели нижнего изображения. Что мы имели раньше. Если зеленый квадрат перекрыть красным квадратом – то мы видим красный квадрат. Если последнему задать альфа=50, мы увидим квадрат цвета, напоминающего переспелую оливку на фоне стираного солдатского кителя — это сквозь красный квадрат просвечивет зеленый.

Теперь есть несколько новых правил.
У MovieClip появилось новое свойство – blendMode, достаточно просто присвоить одно из допустимых значений – и результат на лицо (Так же эти режимы можно задавать через Property Inspector в среде разработки). Однако не все так просто. Некоторые режимы очевидны (по крайней мере для тех, кто знаком с photoshop), а некоторые (layer, alpha, erase) весьма загадочны. А разгадка проста – последние три режима имеет смысл использовать только в комплексе. Если вам неитересно знать, как устроены эти режимы – крутите вниз – там есть флешка, где можно все потрогать руками. Если небольшая теоретическая часть вас не пугает – читайте дальше. Глубоко в математику вдаваться не буду, зачастую этого знать и не нужно.

Итак, по порядку. Простые режимы. Для удобства пиксель верхнего изображения обозначим В, нижнего – Н.

• normal -как следует из названия – обычный режим наложения. В перекрывает Н.

• multiply - математика такая: Каждая составляющая RRGGBB B умножается на соответсвующую составляющую Н, затем нормализуется делением на OxFF (RRB * RRH / OxFF, GGВ * GGН / OxFF, BBB * BBH / OxFF). При этом режиме изображение всегда получается темнее, поэтому используется в основном для затемнений.
• screen - Для этого режима берутся инверсные цвета пикселей В и Н, и затем перемножаются. Режим используется для высветления.
• lighten - При этом режиме сопоставляются составляющие RRGGBB и выбирается та, значение которой больше. То есть: newR = Math.max(RRB,RRH), newG = Math.max(GGB,GGH), newB = Math.max(BBB,BBH).
• darken - обратный предидущему – в результирующий цвет попадают составляющие с меньшим значением.
• difference - Из двух составляющих выбирается большая, и из нее вычитается значение меньшей.
• add - поканальное сложение, с потолком в OxFF для каждой составляющей.
• subtract - Поканальное вычитание H из В, с ограничением до 0, для каждой составляющей.
• invert - независимо от цвета В инвертирует цвет Н. Если значение альфа канала пикселя В меньше 0хFF – то результрующий пиксель будет иметь то же значение, соответсвенно накладываться на Н как при обычном альфа наложении.
• overlay - Изменяет цвет в зависимости от яркости Н. Если яркость Н больше 50%, к пикселю применяется screen, иначе – multiply.
• hardlight - то же, но в основу берется яркость В.

Теперь о комплексных режимах. Все описанные выше режимы, могут применяться к клипу самостоятельно. Все режимы, описанные ниже, должны применятся так – клип с комплексным режимом должен содержаться в клипе, к которому применен режим layer. Фактически, этот режим автоматически применяется к клипу, в котором содержиться более одного клипа, и хотя бы к одному из них применен режим, отличный от normal.

• erase - стирает пиксели Н в соответсвии со значением альфа канала В.
• alpha - заменяет значение альфа канала Н значением альфа канала В.

Если вас глубоко заинтересовала математика каждого из процессов – почитайте вот эту статью: Blend Modes of Photoshop & Co.

В следующей флешке также можно понаблюдать работу всех режимов. Большая улитка и радужный градиент содержатся в клипе, к которому применен режим layer. Режимы наложения применяются к клипу с улиткой. маленькая улитка лежит сама по себе, к ней также применяются выбранные режимы.

Popularity: 18% [?]

3 комментария апреля 25, 2008

Покадровая анимация синусоиды.

Навеяно сегодняшней статьёй из хитрого блога.

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

В основе всего — один графический клип, который колеблется из стороны в сторону – для этого есть motion tween с EaseIn и EaseOut (а в восьмой версии также можно управлять easing-ом вручную)

1. Итак, создаем клип.

Конвертируем его в graphicClip. Снова конвертируем полученный клип в графику и внутри делаем анимацию колебания. Для этого я создаю 10 и 20 ключевые кадры. в 10-м смещаю клип на нужное мне расстояние (максимум амплитуды).

Получаем вот такую анимацию (на основной линейке необходимо добавить столько кадров, сколько длится анимация клипа – здесь 20).

2. Далее я просто дублирую этот клип несколько раз (10 в примере), и каждому из них задаю способ проигрывания loop (по умолчанию) и в качестве первого кадра задаю смещение на N кадров для каждого последующего клипа (В примере: 1 клип – 1 кадр, 2 клип – 3 кадр, 3 клип – 5 кадр … 10 клип – 19 кадр)

Получаем отличную живую синусоиду.

3. Теперь, допустим, мне нужно один конец синусоиды зафиксировать.
Для этого я собираю все 10 клипов, конвертирую их в графический клип в 20 кадров.
После этого на основной сцене я делаю анимацию этого клипа – аналогичную первой: 10 и 20 кадр ключевые, в 10-м кадре нужно вернуть съехавшую первую точку в начало (guide lines в помощь ).

После этого нужно отредактировать easing точно так же, как и для первого клипа – замедление в начале и в конце, и ускорение в середине.
У нас готова отличная болванка. Ее можно сохранить и использовать от случая к случаю.

4. Теперь осталось использовать это. В данном примере я кладу болванку на GuideLayer и по ней покадрово анимирую щупальце. Все легче, чем пытаться представить себе колебания самостоятельно (Хотя с практикой и это приходит )

Получаем такое щупальце.

Дублируем щупальце несколько раз, пару тройку фильтров и трансформаций, смещение первого кадра для каждого щупальца и получаем преотвратное существо.
Например такое:

Popularity: 10% [?]

4 комментария апреля 25, 2008