Старый, но приятный трюк: анимация изометрического изображения.
Такая штуковина очень проста в изготовлении.
Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности ))
Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию вращения изометрического изображения.
А если несколько изображений положить друг на другом как блины - получится объемное изометрическое изображение которое можно крутить, как душе угодно )
Самое забавное в этом методе - это моделирование модели.
Делается это на таймлайне. 1 кадр - это дно, последний кадр - вершина нашей блинной скульптуры.
Вот, к примеру - как выглядит клип из которого нарезается приведенная выше анимация:
Алгоритм построения прост:
- Создать общий контейнер для всей фигуры;
- Создать в нем N пустых контейнеров(N=_totalframes клипа, составляющего фигуру) с _yscale = 75 (варируется) ;
- В пустой контейнер N аттачится клип-фигура и останавливается на кадре N+1;
А вот собственно совершенно простой код:
// на сцену нужно в нужном месте положить клип под именем holder
var distance:Number = 1; // дистанция между "кусками"
var speed:Number = 5; // скорость вращения
var scaleFactor:Number = 75; // масштабирование по Y
var slices:Number; // количество кусков (определим позже)
// функция, создает контейнер для куска, и вставляет в него
// клип-фигуру с установкой нужного кадра.
// n = порядковый номер куска
function attachSlice(n:Number):Void
{
var slice:MovieClip = holder.createEmptyMovieClip("slice"+n,n);
// в библиотеке символ, из которого делим фигуру снабдить linkage=sculpture
slice.attachMovie("sculpture","gfx",0);
slice.gfx.gotoAndStop(n+1);
slice._yscale = scaleFactor;
slice._y = -n*distance;
}
// В начале, создадим первый кусок (дно) и заодно узнаем,
// сколько в нем кадров, чтобы установить значение slices
attachSlice(0);
slices = holder.slice0.gfx._totalframes;
// выкладываем все остальные куски
for(var i=1; i < slices; i++)
{
attachSlice(i);
}
// вращение фигуры
// (тут можно определить и другое поведение - вращение от клавиатуры, мыши и т.д.)
holder.onEnterFrame = function():Void
{
for(var i=0; i < slices; i++)
{
this["slice"+i].gfx._rotation += speed;
}
}Можно получить вполне грациозную табуретку
Или вот такое подобие сканирования человека ))
мая 15, 2008
Набор графических инструментов Flash скуден, как небезосновательно считает огромное число дизайнеров, привыкших к Corel, Illustrator и FireWorks.
Да скуден. Но нам дан таймлайн и мозг. Сегодня мы сымитируем известный эффект (даже не знаю как он правильно называется)) Вот такой.
Все это нарисовано исключительно на flash. Никаких импортов и копипейстов. Ни один редактор векторной графики, кроме Flash, использован не был.
1. Рисуем кривую с помощью PenTool (P).Рисуем аккуратно, чтобы не было ни одной лишней опорной точки.
2. Ставим ключевой кадр (в моем примере 20) и задаем между первым и последним Shape Tween (можно с easing для пущего эффекта).
3. Включаем режим OnionSkinOutlines, выделяем все 20 кадров и переходим на 20 кадр. Выбираем Subselection Tool (A) и начинаем двигать наши опорные точки. Преимущество метода на лицо - редактируя положение точек мы сразу видим конечный результат - это очень удобно. Если где то что то перекутили не так - сразу видно, что шейптвин сбивается.
4. Теперь Разбиваем анимацию на ключевые кадры. Включаем режим EditMultipleFrame, вырезаем всю графику (сначала выделить все control+A, потом вырезать cоntrоl+X), удаляем кадры анимации и вставляем вырезанное на место.
Можно было, кстати, к шейпу формы применить и шейп цвета. Но мы раскрасим нашу абстракцию по другому.
5. Положите под кривые полностью прозрачный прямоугольник и сконвертируйте все это в MovieClip. На панели PropertyInspector назначьте BlendMode = alpha.
6. Нарисуйте прямоугольник с потрясающей воображение градиентной заливкой и также сконвертируйте ее в MovieClip, но положите этот клип под клип с линиями.
7. Теперь выделите оба клипа - и снова - в муви клип. Этому мувиклипу задайте режим blend Mode = Layer (или любой другой режим, если хотите. В самой первой картинке статьи, к примеру, использован Add).
8. Вернувшись на сцену вы увидите результат. Осталось навести под этой красотой тематический восторг и вы - народный умелец, доказавший, что классические дизайнерские абстракции можно с легкостью творить и в Flash IDE.
апреля 29, 2008
Давно хотел написать небольшую статейку по режимам наложения (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. Режимы наложения применяются к клипу с улиткой. маленькая улитка лежит сама по себе, к ней также применяются выбранные режимы.
апреля 25, 2008