Хитри - блог о хитростях разработки флэш-игр, игровых баннеров и флэш-анимации

Еще один урок от ANIMEFISH.COM

Привет Всем!

Итак, продолжаем хитрить

Этот пост посвящен одной из важных хитростей в анимации - 2,5D.
Для тех кто не в “танке” 2,5D - это серединка между 2D и 3D
Интересно, а что значит серединка? Давайте рассмотрим.

Очень часто в анимации требуется использовать движение обьекта не в 2-х плоскостях, как это происходит в 2D, а в 3-х - как это должно происходить в 3D. Но, но! Мы же знаем, что наш всеми любимый Adobe Flash не умеет использовать элементы 3D графики…. А что же делать? Ведь так хочется (или требуется) иногда привнести такой элемент.

На помощь могут прийти 3 способа: 1 - мы прорисовываем покадрово все фазы, как это делают мультипликаторы… сложноватенько и долговатенько… 2 - мы рисуем то, что нам нужно в любом трехмерном пакете, а потом конвертим в последовательности кадров для флеш… Слишком большой объем файла получиться, а у нас каждый байт иногда на вес золота. Поэтому, поэтому выбираем метод 3 - ни 2D ни 3D - 2,5D.
Вся анимация - это обман. Да, это обман зрения. Задача аниматора - обмануть зрителя так, что бы тот не смог этого понять. Аниматоры - они как фокусники, - те же фокусы с обманом зрения. Иногда даже не замечаешь, как тебя обманул аниматор (хотя проффи часто видят то, чего не видит простой глаз). Итак, наша задача - обмануть зрителя так, что бы он думал, что видит объемный объект, на самом деле мы “дурим” - хитрим.

Итак - колесо, но не простое, а от телеги. Возможно кто-то из вас подобные вещи и делал, тут нет ничего сложного.

Рисуем колесо телеги (1), потом создаем movieClip, внутри которого делаем вращение нашему колесу (2) и сжимаем этот movieClip по горизонтали. О! У нас уже что-то получается похожее на колесо в объеме. Теперь сделаем копию этого клипа, поместим ее на слой и совершим над ней (копией) магический тинт. Теперь сдвигаем так, что бы…. ну в общем, сдвигаем на глазок так чтобы получилось как на рис (3). Следует учесть: если спицы колес делать тонкими - то и клипы нужно близко сдвигать, чтобы не было зазоров между затинтованным и оригинальным клипами (4). Так - теперь делаем сколько нужно колес и дорисовываем “телегу” и - поехали (5).

Дальше - дальше сложнее - нам нужна монетка? - без вопросов!
Принцип как и в предыдущем примере. Для начала нам нужно изображения 2-х сторон монетки (1). Теперь обман. Вращение мы будем выполнять относительно оси, проходящей через ребро монетки. Используем эффект сжатия (как в предыдущем примере). Сжатие у нас будет происходить во времени, а вот вращение мы не делаем - это будет позже. Итак, на (2) видно что нам нужно.

Еще один момент: все эти “обманы” основаны на природных явлениях. Уточнюсь - если мы смотрим на обьект, то мы можем его охарактеризовать такими параметрами, как освещенность, цвет, объем, прозрачность, размер, перспектива … ну и так далее. Так вот, чтобы лучше обмануть, нужно постараться обмануть с позиции как можно большего числа этих параметров. К чему это я - на нашу монетку падает свет (та черная ромашка в углу). А раз так, то одна сторона монетки та, которая повернута к источнику света - светлее, а противоположная темнее. Поэтому мы будем использовать brightnes and tint для наших сторон монетки. На (3) я показал всю развертку положений сторон монетки с учетом их освещенности.

Так - на (4) показан основной трюк - псевдо-объем. Если мы будем чередовать сужение одной стороны монетки и растяжение другой стороны, то можно создать тот самый псевдо-обьем. Красными линиями показаны положения, куда смещаются центры сторон при сужении и расширении - это необходимо для создания ребра монетки между гранями.

Дальше (5) - делаем ребро. Его мы делаем шейпом. В первом кадре мы не видим ребра, а в последнем мы его видим полностью, сторона у нас поворачивается и мы ее не видим. В исходном # файле # можно лучше увидеть, как все выглядит. Едем дальше (тема большая). Дальше, по желанию - “наносим насечки” на ребра - можно сделать разными способами, я делаю копию слоя с предыдущими шейпами, делаю этот слой маской, а под него маскирую горизонтальные полосы (6).
Все, собираем все вместе, получаем (7). Похоже? -Похоже. Ну и еще последнее, опять же по желанию. Если эту монетку крутить, то получим полный обман (8).
Скрипт вращения:

onClipEvent (load) {
	_rotation = int(Math.random() * 360);
	gotoAndPlay(int(Math.random() * _totalframes));
	rot = int((Math.random() * 12 + 2));
}
onClipEvent (enterFrame) {
	_rotation += rot;
}

Фуф, теперь, посложнее. Космический корабль! Псевдо трехмерный! (1) Клево? Тягаем за оранжевую штучку и корабль крутится!

Теперь нужно это все разъяснить. Принцип у нас тот же, что и с монеткой - рисуем корпус корабля (вид сверху), создаем клип, в котором вращаем наш корпус (вправо и влево), а затем сжимаем этот клип по вертикали. Вот - теперь у нас получился
вращающийся корпус (2). Дальше уже мелочи - добавляем на корпус элементы (3). Сверху накладываем башню (обычная обрезанная окружность). На (4) сделаем “затылок” на башне. Чего делаем - делаем копию нашей башни, она будет маской и под эту маску ложим вращение другой окружности, результат - затылок нашей башни.
Замечание! Все нужно выполнять в одной линейке со сжатым по вертикали клипом, содержащим вращение корпуса. Это важно!

В ходе анимации вы будете “подгонять” элементы, чтобы не было щелей и.т.п. Кстати, не бойтесь (в разумных пределах) создавать разные “заплаточки” для щелочек - главное закрыть, замазать так, чтобы глаз зрителя не заметил, а все остальное мелочи В данном случае важен не процесс, а результат!

Так, теперь на (5) добавляем элементы корпуса, так же само - подстраиваем их под вращение корпуса - где нужно используем твин,где нужно - просто сдвигаем, сжимаем, не боимся. И после каждой процедуры просматривайте хотя бы по линейке - как выглядит результат. Не обязательно компилировать файл - просто подвигайте ползунком - вам будет видно, где у вас что-то не так, а где все тип-топ (6). Добавляем “фетиш” - пушечку и выхлопы сопел. Все - получаем картинку (7)!

Ну и напоследок - достаточно сложный пример (вряд ли я тут объясню весь процесс создания сей конструкции) - башня боевого танка по мотивам фильма “Звездные войны”. Что нужно, чтобы сделать подобное? Знание основ геометрии, наблюдательность, и хитрости предыдущих примеров.

Финал, все, пальцы болят уже от “многа букаф”. Поэтому: хитрости объяснили, исходный файл есть, 4 примера привели, напрягайте свою фантазию или воображение, вспоминайте геометрию, природоведение и - вперед!

Если есть вопросы - мы с радостью ответим на них!

Интересно на 26%