Старый, но приятный трюк: анимация изометрического изображения.
Такая штуковина очень проста в изготовлении.
Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности ))
Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию вращения изометрического изображения.
А если несколько изображений положить друг на другом как блины – получится объемное изометрическое изображение которое можно крутить, как душе угодно )
Самое забавное в этом методе – это моделирование модели.
Делается это на таймлайне. 1 кадр – это дно, последний кадр – вершина нашей блинной скульптуры.
Вот, к примеру – как выглядит клип из которого нарезается приведенная выше анимация:
Алгоритм построения прост:
Создать общий контейнер для всей фигуры;
Создать в нем N пустых контейнеров(N=_totalframes клипа, составляющего фигуру) с _yscale = 75 (варируется) ;
В пустой контейнер N аттачится клип-фигура и останавливается на кадре N+1;
А вот собственно совершенно простой код:
// на сцену нужно в нужном месте положить клип под именем holdervar distance:Number = 1; // дистанция между "кусками"var speed:Number = 5; // скорость вращенияvar scaleFactor:Number = 75; // масштабирование по Yvar slices:Number; // количество кусков (определим позже)// функция, создает контейнер для куска, и вставляет в него// клип-фигуру с установкой нужного кадра.// n = порядковый номер кускаfunction attachSlice(n:Number):Void{varslice:MovieClip = holder.createEmptyMovieClip("slice"+n,n);
// в библиотеке символ, из которого делим фигуру снабдить linkage=sculptureslice.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;
}}
Набор графических инструментов 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.
Давно хотел написать небольшую статейку по режимам наложения (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. Режимы наложения применяются к клипу с улиткой. маленькая улитка лежит сама по себе, к ней также применяются выбранные режимы.
