Урок пиксельной анимации в Flash

367
yand2

Сегодня в жж наткнулся на урок о том как делаются такие вещи:

Урок пиксельной анимации 1

Это очень интересно на мой взгляд и стоит внимания.

Анимировать пиксели будем в Adobe Flash.

Итак, начнём урок:

Урок пиксельной анимации 2

1. рисуем круг (скопируем его, он ещё пригодится позже)
2. делим его на 2 равные части, и смещаем верхнюю
3. обрезаем хвосты
4. получившуюся кривую поворачиваем на 45 градусов
5. тайлим кривую 4, и получаем необходимую нам «волну». преобразовываем кривую в символ (line), и символ в символ (назовём его volos_1)

Урок пиксельной анимации 3

6. Далее работаем в символе volos_1. создаём второй ключевой кадр, и смещаем символ line вправо (до тех пор пока кривая в первом о втором кадрах совпадут), задаём моушн тин в первом кадре и добавляем фазовочные кадры (чем больше, тем плавнее движение). далее, преобразовываем предпоследний кадр получившейся линейки в ключевой (кнопка F6), а последний кадр удаляем- это необходимо для плавного перехода с последнего кадра на первый (без задержки). Создаём второй слой-маску, и вставляем туда наш круг. На выходе должен получиться (ползущий червяк) как на схеме. В принципе и он уже не плох, но нам нужен волос, поэтому продолжим…

Урок пиксельной анимации 4

7. Поскольку у волоса, в отличие от червяка, голова (луковица, основание) статична, мы создаём 3тий слой (работаем в символе volos_1) и в его первом кадре ставим точку в месте где кривая line пересекает маску. Далее добавляем ключевые кадры (кнопка F6) в линейку с анимацией line (их частоту определите сами, я вставлял через каждые 4 кадра)и выравниваем в них высоту символа line относительно точки. Если всё получилось, то мы уже имеем один волосок и самое сложное позади))
8. Открываем библиотеку и дублируем символ volos_1 (volos_2, volos_3 и т.д.), в полученных символах смещаем кадры линейки анимации line вправо, и переносим образовавшиеся «хвосты» из кадров в начало слоя. Это необходимо для того, чтобы циклы анимации волосков отставали друг от друга.

Урок пиксельной анимации 5

9.10. Копируем, флипим, тянем, уменьшаем, вращаем символы volos, и получаем желаемый результат. В моём случае- это брови Л.И. Брежнева, остаётся только подложить фон и выгрузить гиф.

Урок пиксельной анимации 6

Напоследок, необходимо заметить, что размер амплитуды волн, а так же длинна кривой и маски могуть быть абсолютно различны. Всё зависит от характера движения волоса, а так-же от трудолюбия автора))

Ну вот кажется и всё, надеюсь что вышеизложенный текст хоть маломальски понятен! Не судите строго, писал туториал впервые, а по-русскому у меня было 2 в году))

P.S. а вот и вторая, обещанная картинка

Урок пиксельной анимации 7

Ещё одно произведение искусство от автора:

Урок пиксельной анимации 8

Автор урока — жж юзер skinnybert

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите свой комментарий!
Пожалуйста, введите ваше имя