Flash / Анимация градиентов

Анимация градиентов:

Продолжу тему, начатую в предыдущем посте – а именно, использование градиентов во флеше. В этот раз расскажу, как анимировать градиенты, какие есть возможности и какие ограничения в работе с градиентными заливками. Анимация градиентов относится к типу анимации формы (shape tween). Мне кажется, все флеш-аниматоры начинают именно с анимации формы – превращения круга в квадратик. А затем в треугольник:)

Анимация градиентов

Продолжу тему, начатую в предыдущем посте – а именно, использование градиентов  во флеше. В этот раз расскажу, как анимировать градиенты, какие есть возможности и какие ограничения в работе  с градиентными заливками. Анимация градиентов относится к типу анимации формы (shape tween). Мне кажется, все флеш-аниматоры начинают именно с анимации формы – превращения круга  в квадратик. А затем в треугольник:)

Итак, рассмотрим анимацию на примере рыжего мальчика из предыдущего урока.

1. По задумке, наш мальчик смутился:) Анимируем глаза – они полуприкрыты, рот украшаем глупой улыбкой. Также изменим цвет  лица, ушей и щечек. Чтобы сделать плавную анимацию изменения цвета, создаем shape tween между ключевыми кадрами: 1 кадр - начальное состояние , 2 кадр – конечное. В  последнем кадре изменяем цвет градиента на красноватый (насыщенность цвета зависит от степени смущения, но градиент должен быть в меру контрастен, чтобы мальчик выглядел смущенным, а не так, будто упал лицом на раскаленную сковороду:) Как отмечалось в прошлом уроке, цвета в градиенте надо подбирать аккуратно, чтобы добиться большей натуральности.

Уши, лицо, щечки  анимируются по этому принципу – анимация shape tween.

2. Анимируем волосы.
В первую очередь, разделим  и разложим на отдельные слои три прядки на голове, используя инструмент лассо. Таким же образом «острижем» на отдельный слой волосинки на макушке:)

Анимировать будем 3 прядки, а макушку как-нибудь в другой раз:) Во втором ключевом кадре используем инструмент Distort: выделим прядку и опустим ее ниже, чуточку потянув за нижний край. Очень низко опускать не нужно, чтобы избежать резкого движения в анимации – оно должно быть чуть заметным.
 

При сдвиге прядки, возможно, появится граница между градиентами:

 
Воспользуемся функцией редактирования градиента и отредактируем во 2-м кадре цвет, сдвигая его на глаз, чтобы граница исчезла.
 

Создаем анимацию формы между ключевыми кадрами. Дополнительно можно установить замедление анимации (easing). Видим, что цвет как будто медленно перетекает по поверхности, создавая иллюзию объемности предмета. Таким образом, можно создавать псевдо 3-д эффекты во флеше.

3. А этот супер-эффект счастья в глазах  получился случайно, я и не сразу поняла, как его применить:) И до сих пор с трудом представляю, где его использовать на практике. Возможно, он будет уместен при создании спецэффектов.

Редактируем положение градиента во 2-м кадре – (см. пред. пункт), включаем функцию – Repeat Color (повторяющийся цвет) и анимируем с помощью Shape Tween.

 
4. Итак, мы стали умнее на 3 пункта:)

1) анимация  формы – изменение цвета

2) анимация  формы – редактирование градиентов

3) дополнительные настройки градиента.

5. А теперь о грустном: в анимации перекладкой (motion tween) градиенты выглядят не лучшим образом. Для примера, при сгибании конечностей, появляются некрасивые стыки, которые в движении смотрятся неаккуратно.

 

Поэтому обязательно нужно учитывать особенности анимации. Если персонаж активно двигается, ходит, прыгает – не стоит злоупотреблять градиентами. В одежде, например.

Приятной цветной работы)