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

Урок от ANIMEFISH.COM
Оказывается анимация не такая уж и страшная штука, если понимать что к чему.
Содержание привожу “как есть”:

Всем привет!

Хочу поделиться хитростями использования класической анимации во flash.

Начнем с теории. Загрузка процессора. Использование скриптов для создания спецэффектов для флеш роликов не всегда приводит к хорошим результатам. Часто это приводит к сильной загрузке центрального процессора, что в свою очередь замедляет работу ролика, приводит к снижению fps.

Чтобы избежать подобных вещей, во многих случаях можно использовать классическую анимацию для создания спецэффектов. Однако, не все мы знакомы с основами классической анимации, и уж тем более со спецэффектами в ней.

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

Итак, начнем с основ. Сначала нам нужно создать “ключевые кадры”, они содержат главные фазы анимации - между которыми мы позже прорисуем промежуточные фазы.

В первом кадре (слайд 1) рисуем кривую, и мы получаем сразу 2! готовых кадра анимации, так как анимация циклическая и последний кадр у нас такой же как и первый.

Переносим копию первого кадра - в третий кадр (слайд 2). Во втором кадре мы рисуем еще одну фазу анимации. В примере мы анимируем синусоидную кривую закрепленную в месте обозначенном крестом - это необходимо что бы мы фиксировали нашу анимацию (например плетка в руке фиксирована в одной точке). Форма кривой во втором кадре (слайд 3) зеркальна первому кадру (синусоида смещена на 180 градусов).

Теперь у нас есть самая примитивная анимация - дальнейшей нашей задачей теперь будет прорисовка промежуточных фаз.

Создаем пустые кадры между ключевыми (слайд 4) и продолжаем. Следует отметить, при анимации лучше использовань разный цвет линий, чтобы при рисовании промежуточных фаз не запутаться с направлением движения волны (анимации). В нашем примере мы анимируем от первого кадра к третьему (от синей к зеленой линии). Используя “onion skin” прорисуем промежуточный кадр №2.

В 5-м слайде показан результат, но как мы его получили. Посмотрим внимательно на точки наших линий - точка на красной линии расположина посередине, между точками синей и зеленой линий. Теоретически, в ходе анимации синяя линия морфируется в зеленую, проходя промежуточную фазу (красная линия) И красную линию мы должны прорисовать как-бы посередине между синей и зеленой.

После этого, рисуем еще одну фазу - между 3м и 5м кадрами, процесс такой же как и прорисовка между 1м и 3м, за исключением того, что 2й кадр - это серединка между выпуклостями, а в 4м - вогнутостями кривойй, при этом анимация (движение линии) уже происходит от зеленой линии к синей. Это один из важных элементом, хотя и простой, но требует понимания физичских процессов и воображения.

Итак, если мы все сделали верно, то мы получили покадровую анимацию волнообразного движения вправо для нашей кривой (слайд 7).

Подобным образом можно анимировать другие, более сложные конструкции. Главное соблюдать 2 принципа: 1 - помнить напрвление движения, 2 - рисовать среднее положение между двумя другими (не обязательно очень точно - если увеличивать число промежуточных кадров (слайд 8 ) то анимация будет более сглаженной и более плавной). Ну и последний момент, когда вы нарисовали все фазы вашей анимации (кстати рисуйте постепенно, не нужно планировать сразу что у вас будет столько то кадров, смотрите на глаз - если вас устраивает данная скорость - считайте что результат достигнут), не забудьте удалить последний кадр, иначе будет залипание - крайние кадры ведь одинаковые (или можно в последнем кадре написать gotoAndPlay(1)). Если в ролике задана высокая частота смены кадров - прорисовывать много фаз будет утомительно, поэтому иногда можно “разрядить” готовую анимацию, тоесть каждый кадр продлить на 2, 3 или сколько нам нужно кадров.

Теперь примеры использования такой анимации:

1. Флаг треугольный - (слайд 9) и (слайд 10). Замечу - закраску лучше производить уже после того как прорисована вся анимация.
2. флаг пиратский - (слайд 11) и (слайд 12). Здесь мы усложнили анимацию - добавили тень на флаге - для этого сначала делаем основную анимацию флага (синий контур), потом анимацию тени - (делайте ее в другом слое - так удобнее будет редактировать ее) принцип тот-же, что и для основной анимации. обеденяем контуры соответственно для каждого кадра, и потом уже закрашиваем - результат (слайд 12).
3. Пламя простое (слайд 13) и (слайд 14)
   Условно обозначим период синусоиды буквой m. Так, тут можно более детально показать как все связано, синусоиды и анимация. движения пламени совпадают с синусоидой, только различие состоит в том, что начальная точка у пламени постоянна, а у синусоиды она смещается (красная линия на слайд 13г), теоретически, мы на каждом шаге должны компенсировать это смещение, что видно на анимации ( просто начинаем лини не стой позиции где проходит в данный момент синусоида, а всегда с нулевой точки).
4. Пламя сложное (слайд 15)
5. Дым (слайд 16)

Вот пока что и все. Так рисуется почти все в покадровой анимации - сначала ключевые фазы, потом промежуточные. Весь успех - соблюдать направление анимации (неправильно считать что кадры можно повторить в 2 и 4 кадрах - слайд 4 - это разные изображения) ну и, смотреть что у вас получается. Успехов!

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