Продолжу тему предыдущего топика и более подробно опишу принципы создания персонажной анимации для флеш-игры. А так же остановлюсь более подробно на создании спецэффектов для игр – взрыва и искрящегося фитилька.
Персонажная анимация.
Немного теории: следуя принципам классической анимации,
анимированный персонаж имеет свойства резинового шарика. Его тело в
движении то сжимается, то растягивается. При этом не стоит забывать, что
общий объем персонажа не меняется - вертикальная растяжка
компенсируется горизонтальным сплющиванием, и наоборот. Если следовать
этому простому правилу, то анимированные во флеше персонажи будут
смотреться очень живо и подвижно, а не как роботы.
Когда я еще училась в школе, были такие
резиновые мячики, которые бросали о стенку, и они размазывались по
стене, а затем возвращали свою прежнюю округлую форму. Они были яркие,
липкие, пахли какой-то химией и оставляли на стене жирные следы, за что
учителя ужасно ругались. Так вот, анимированные персонажи точно так же
прилипают к поверхности. И не имеет значения, они из резины, костей и
кожи или железа. В анимации мешок с картошкой точно так же деформируется
о поверхность, как и мягкая желейка.
Теперь о наших монстриках. По большому
счету, оживление персонажа происходило лишь за счет анимации глаз, тело
оставалось статичным. Итак, как сделать живое моргание глаз. Немного
забегая вперед, скажу, что каждый кадр я выставляла вручную, но, в
принципе, это можно сделать и используя motion tween, эффект будет тот
же, кому как удобней.
Этапы анимации:
1. Определяем ключевые кадры:
Кадр 1 - 5 - 11
2. Делаем промежуточные фазы.
1.сжимаем и одновременно растягиваем глазное яблоко в кадрах 1-4. Зрачок тоже поддается трансформации.
2.открываем глаз. Кадры 2-3-4 = 7-8-9 .
Это повторение кадров, просто они проигрываются в обратном направлении.
Как сделать реверсивное проигрывание кадров во флеше:
- выделяем кадры на таймлайне, удерживая Shift
- копируем (copy frames – paste frames)
- не снимая выделения, кликаем правой и выбираем Reverse frames (реверсия кадров)
4. в 10-м кадре глазное яблоко растягиваем кверху.
5.11 = 1. Анимация зациклена.
Необязательно делать такое же количество
промежуточных кадров, как в описанном примере. Если сделать меньше –
моргать будет быстрее и активней, получится такой себе живчик. Если
больше – персонаж будет моргать медленно и томно, как герой-любовник:)
Анимация тела нашего персонажа выглядит
очень похоже на анимацию глаз – то сжимается, то растягивается в
зависимости от положения.
7-ой кадр хорошо иллюстрирует все то, о
чем я писала выше – персонаж сжался при ударе о землю, а его рожки
наоборот растянулись, хотя по своей структуре они твердые.
Небольшая хитрость: в мультипликации
зрачки могут немного выходить за границы глазного яблока. Преувеличение
в движении глаз сделает анимацию более привлекательной и интересной.
Так же не забываю про второй принцип анимации
– подготовка, или упреждение (Preparation or Anticipation). Еще
называется отказное движение: перед тем как что-то сделать персонаж как
бы отказывается от своего действия, выполняет противоположное.
Например, прежде чем исчезнуть в глубине экрана, персонаж вначале
увеличивается, приближаясь к нам (до 6 кадра, при этом глаза
увеличиваются вдвое), а уже после 7-го выполняет задуманное – исчезает,
уменьшаясь. Подобное действие как бы подготавливает зрителя к
основному движению.
Если бы персонаж подлетал к нам, то вначале он бы наоборот уменьшился, а затем уже приблизился.
Часть 2. Спецэффекты.
Взрыв.
Как нарисовать красивый полноцветный взрыв во флеше, можно посмотреть здесь. Так же советую отличные уроки по созданию спецэффектов.
То, что сделала я, такая себе лайт-версия взрыва: больше похоже, как
кто-то чихнул в горшочек с золой:) Сложность создания подобных
спецэффектов – покадровая отрисовка (да-да, никаких твинов, все
ручками). А покадровая анимация – занятие утомительное, требует времени
и усидчивости.
Характер взрыва – это яркая вспышка и затем более медленное рассеивание дыма.
1) вспышка
2) клуб дыма
3) клуб дыма превращается в кольцо, для этого действия я отвожу 2 кадра
4) кольцо расщепляется на 4 части
5) медленное «растворения» каждой из 4-х частей дымового кольца
На таймлайне анимация взрыва выглядит
так. Частота кадров анимации 25 fps, а это значит, что
продолжительность анимашки менее секунды.
Как видно на картинке, чтобы замедлить
анимацию в конце, я выделила по 2 кадра на каждое состояние. Эта
хитрость ускорит отрисовку, иначе придется делать в 2 раза больше
промежуточных кадров.
Искрящийся фитиль.
1. рисуем искру – палочку с градиентной заливкой:)
2. расположим все искры по кругу симметрично. Сделать это быстро поможет инструмент Deco Tool. Выбираем в опциях Symmetry brush, а из библиотеки символ искорки - spark.
3. используя Symmetry brush,
за один раз у меня получилось разместить по кругу не более 8-ми
объектов, но этого мало для полноценной анимации. Важно: следим за тем,
чтобы не перепутать начало и конец и искорки, ориентируемся по цвету
градиента – более темный у основания искры.
4. чтобы увеличить количество искр,
просто копируем уже готовую композицию, уменьшаем немного в размерах и
размещаем поверх, немного повернув ее с помощью интструмента rotate.
5.анимируем полет искры. Тестируем и видим, что все искры вылетают одновременно, а это совсем не то, что нужно.
6. заставляем наши искры проигрываться не одновременно. Это можно сделать двумя способами:
1) программно (as2):
выделяем символ spark и на панели As пишем код:
onClipEvent( Load ){
this.gotoAndPlay(1)
}
Каждому мувиклипу назначаем проигрывание с определенного кадра (то есть, вместо 1 - пишем номер кадра).
2) непрограммно:
1. преобразуем все мувиклипы в графику на панели Properties:
2. в разделе Looping на панели Properties вибираем Play once (проиграть единожды), First – номер кадра, который будет проигрываться первым. Например, ставим 4 – и анимация начнет проигрываться с середины.
3. для удобства клипы можно разложить на отдельные слои:
Вот и все,готово.
