Шорох снега. Как делается мультик

  На иллюстрации к этой статье - карандашная зарисовка. Такой рисунок нетрудно оживить - сделать из него небольшой мультипликационный клип. Что получилось, смотрите тут - http://youtu.be/2Kptm9z2N2M

  А здесь я расскажу о том, как делается такая анимация.
  В программе MA_Paint имеется опция копирования кругами с сохранением непрерывности линий. Такая процедура позволяет делать плавное изменение контура фигуры, и получать следующий кадр анимации практически в готовом виде, не требующем дополнительной прорисовки.
  Опция устанавливается кликами на маленьком поле с буквой "с" левее кнопки с большой буквой "О". Кнопка эта, переключающая режимы рисования, окрашивается в густо лиловый цвет, показывающий, что вместо рисования движениями стилуса будет осуществляться копирование.

     КОПИРОВАНИЕ КРУГАМИ

  После этого мы опускаем стилус на планшет и двигаем его немного в сторону, наблюдая за перемещающейся по экрану окружностью (окружность обозначает область копирования). Сместив окружность, отрываем стилус от поверхности планшета. Окружность исчезает, и линии изображения плавно деформируются. Размер окружности копирования можно регулировать, выставляя цифру на кнопке Градиент, которая находится левее поля с маленькой буквой "с".

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

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

     ЧИСТКА СИНИМ ЛАСТИКОМ

  Как только мы записали новый кадр анимации, мы сразу же, нажав на кнопку Load, загружаем исходный рисунок. В процессе создания анимации мы ещё много раз будем использовать этот исходный рисунок,  поскольку именно он несёт неискажённую информацию и об очертаниях фигур, и о фоновых элементах их окружающих.
  Загружённый рисунок представляет собой закреплённую на поле графику, его, в частности, нельзя стереть операцией чистки экрана (cls), тогда как графика, появляющаяся на поле в результате считывания кадров анимации, является незакреплённый - она лежит как бы поверх ранее считанного рисунка.  И мы этим обстоятельством пользуемся.
   Отключив режим копирования кругами, мы попадаем в режим "синий ластик". Если этот режим заранее не включён, то кликаем по кнопке "ластик" и включаем его.

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

      ПЕРЕХОДИМ К СЛЕДУЮЩЕМУ КАДРУ

   Движение по кадрам анимации осуществляется кнопочками со стрелочками  <  и  >, и переходя к следующему кадру, мы замечаем, что на нём изображено несколько не то, что нам нужно. Фрагмент, над которым мы работаем, изображён в его первоначальном виде, в том виде, когда фрагмент был ещё неподвижен, и мы ещё не начинали его анимировать. А нам-то нужны контуры фрагмента от последнего, только что сделанного кадра.
    Поэтому, прежде чем кликать кнопочку ">" для перехода к следующему кадру мы нажимаем кнопку "1==>2" в верхней части экрана и запоминаем картинку на поле(2).
    Перейдя на новый кадр и кликнув по кнопке правее большой буквы "О" (кнопка с этой буквой станет серой, и рисование будет заблокировано), мы обозначим наш фрагмент по диагонали двумя касаниями стилуса. После этого кликаем на поле(2) (кусочек этого поля виден на иллюстрации) и фрагмент с поля(2) появляется на нашем новом кадре. Теперь переходим к копированию кругами и изменяем наш фрагмент.

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

       КОПИРОВАНИЕ ФРАГМЕНТОВ АНИМАЦИИ В БУФЕРЕ

   Другой пример анимации, сделанной описанным выше способом, можно посмотреть здесь - http://yadi.sk/i/E5ss7oTjyOsENA 
   Хотя неподвижного фона в этой анимации немного, но всё же синим ластиком пришлось поработать, с тем, чтобы цветочки и травинки не двигались. Другой характерной особенностью таких анимаций является возвращение двигающегося фрагмента на его исходное место.

   В самом деле, отделывать каждый фрагмент, продвигая его через все кадры, неразумно. Хотя копирование кругами является "плавным", но линии фигуры всё же постепенно портятся, и после десятого копирования это становится заметно. Тогда возникает мысль сделать обратное движение - переписать кадры анимации в обратном порядке. Обратная прокрутка, это часто применяемый в кинематографии приём.
   Заметим однако, что просто так, по отношению к целому кадру этот приём не применишь. И в самом деле, фрагменты в кадрах, связанные с анимацией, обычно не движутся синхронно, они движутся вразнобой. Но это не беда - для копирования отдельного фрагмента, а не целого кадра, применяем описанный выше способ запоминания кадра на поле(2) с последующим считыванием с него обозначенного кликами прямоугольника.
   Как видите, все описанные процедуры имеют некую универсальность - они различаются по сути лишь порядком нажатия разных кнопочек.
 
     АВТОМАТИЗАЦИЯ ПРОЦЕССА КОПИРОВАНИЯ

   Копирование идёт успешно. И мы повторяем процесс нажатия кнопочек два, три, пять раз. А если больше?
   И тут возникает мысль, что неплохо бы автоматизировать процесс копирования, провести его сразу для нескольких, или для большого числа кадров, содержащихся в буфере.
   Это сделать можно. В буфере анимации программы MA_Paint помещается 42 кадра, и мы можем достаточно свободно манипулировать содержанием буфера. Предположим, что мы начали анимировать наш персонаж в пятом кадре и закончили его движение в 14-м кадре. То есть, это движение запечатлено в десяти кадрах, начиная с пятого. Может быть и так, что дальше кадры анимации вообще не записаны, и наш мультфильм заканчивается четырнадцатым кадром. А мы хотим его продолжить. Или хотим переписать некоторые кадры.
   Чтобы сделать это, переходим в буфере на тот кадр, с которого начнётся запись копируемых кадров, а  в текстовом окне над кнопкой Paste указываем номер начального кадра, ставим символ подчёркивания и число копируемых кадров.
   Например, так   5_10 если хотим, чтобы кадры были скопированы в своём естественном порядке, или так   14_-10 чтобы кадры были переписаны в обратном порядке.
  К копированию мы подготовились, однако перед тем, как его делать, запоминаем исходный материал, например, в папке 5. Затем нажимаем на клавишу "э" на клавиатуре компьютера и следим за процессом.

   По правде сказать, в результате мы получили не совсем то, что делали в ручном режиме. В ручном режиме мы выделяли и копировали отдельные фрагменты, а сейчас скопировали кадры целиком.
   Однако запомним полученную анимацию, например в папке 6.
   Затем делаем следующее.
   Восстанавливаем исходную анимацию, считав её из папки 5.
   Кликаем по углам область фрагмента и нажимаем кнопку Copy.
   Указываем вектор переноса. Поскольку наш фрагмент мы никуда переносить не собираемся, то кликаем дважды по одной и той же точке фрагмента и нажимаем кнопку Paste.
   Кликаем пару раз по кнопочке левее кнопки "R" (см. иллюстрацию) и устанавливаем на ней цифру 2. Это выбранная нами опция реконструкции. Называется она "наложение переднего плана", эту подсказку вы можете прочесть, если наведёте курсор на кнопку "R".
   Мы собираемся делать реконструкцию анимации, накладывая на неё фрагменты, считываемые с поля(2), а поле(2) заполнять перед этим кадрами из папки 5. Поэтому в текстовом поле над кнопкой Paste запишем:

6% 1   где 6 это название папки из которой будет считываться анимация, а 1 это коэффициент увеличения фрагмента при его наложении. Любопытно, что при указании на этом месте отрицательной величины, фрагмент при наложении перевернётся вверх ногами.
    Реконструкция анимации предполагает подключение специального буфера, и хотя в нашем конкретном случае он не используется и присутствует только формально, но мы должны его активизировать. Для этого кликаем по углам, в сторонке от поля нашей анимации, небольшой прямоугольник и нажимаем кнопочку с буквой "д" (её тоже можно увидеть на иллюстрации). Кнопочка становится розовой, это значит, что буфер активизирован.
    После этого приступаем собственно к реконструкции. Кликаем кнопку "R" и в появившемся окне с вопросом "Реконструкция?" кликаем поле "Да". После окончания реконструкции появляется её последний кадр, и мы можем проиграть анимацию с начала и до конца, нажав зелёную кнопку "Р". Если результат нас удовлетворяет, то запоминаем его в папке 5.
   
   Исчерпывающие подробности о рисовании, копировании, анимации и её реконструкции можно узнать, кликая по разделам помощи, находящимся у верхней кромки окна программы.

     КАК ДОБАВИТЬ ПАДАЮЩИЙ СНЕГ

  Падающий снег нужно вначале сделать, то есть создать для него отдельную анимацию.
  На этот раз буфер "д" с его окном нам понадобится не формально, а по существу. Если кнопочка "д" у нас по-прежнему окрашена в розовый цвет, то кликом по кнопочке сбросим его, и установим буфер заново. Кликнем по углам ту область анимации, в которой будет падать снег, то есть область чуть меньшую картинки, чтобы падающий снег не выходил за её пределы. Активизируем буфер, кликнув кнопку "д". И очистим поле, чуть большее поля картинки, заполнив его белым цветом.
  Почему белым? Потому что белый цвет будет объявлен прозрачным при реконструкции с опцией 7 - "реконструкция на кадрах из папки". А пока приступим к созданию анимации падающего снега.

  Кликнем голубенькую кнопку (на иллюстрации - внизу слева) и очистим буфер анимации.
  Для рисования снежинок используем кисть 5 и её паттерн с изображением снежинки. Выставим максимальный размер пятна - 9, и выбрав для снежинки подходящий цвет, касанием стилуса ставим снежинку на верхнюю часть белого поля. Если мы хотим, чтобы снежинки появились по всему полю сразу,  то расставляем их по полю, можно при этом менять их цвет. Затем нажимаем розовую кнопку записи (она тоже видна на иллюстрации) и записываем первый кадр.

  Теперь нам нужно позаботиться о том, чтобы снег падал а правильном направлении. Чтобы снег падал вниз кликаем на рисунке две точки - первую, и вторую ниже первой. А затем кликаем розовую кнопочку с буквой "v" (она на иллюстрации не видна). Тем самым мы устанавливаем направление вектора движения.
   Затем мы трижды кликаем серую полосочку (на иллюстрации она тоже не видна), каждым кликом сдвигая снежинки на два пикселя вниз.  Теперь снежинки сдвинуты на должное расстояние, и кликнув кнопку записи, мы запоминаем второй кадр. И продолжаем в том же духе.
   Когда снежинок в верхней части анимации становится мало, тогда подрисовываем новые.

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

   Буфер "д" мы переопределим ещё раз. Во-первых, мы его расширим до расчищенной нами белой области, а во-вторых, позаботимся о том, чтобы в момент клика на кнопку "д" цвет фона был белым. Тем самым мы при установке буфера объявляем белый цвет прозрачным. А вот снежинки имеют другой цвет, и они могут быть непрозрачными или полупрозрачными в зависимости от того, какая цифра выставлена на кнопке Градация (кнопка эта находится в верхней части окна программы). Непрозрачными снежинки оказываются при цифре 9, но я использовал в своей анимации цифру 7.
   Теперь для реконструкции у нас всё готово. Нажимаем кнопку "R" и ожидаем результата. Процесс этот не очень быстрый. По окончании прокручиваем анимацию, проверяем, правильно ли всё получилось, и записываем анимацию в новую папку.
    Разделение разных стадий анимации по разным папкам удобно, оно пригодится на тот случай, если мы захотим нашу анимацию переделать.

   Программа имеет ещё много возможностей, как было сказано выше, все эти возможности исчерпывающе описаны в разделах Help, и их нетрудно при желании освоить.
__________
17.11.2019


Рецензии
Дмитрий, огромное-преогромное Вам спасибо!!! Давно хотел найти нечто подобное, чтобы рисовать маленькие зарисовки к своим микро-произведениям. Мультик вряд ли получится, но и этой программы, мне кажется, будет достаточно для иллюстрации. Попробую, потом отпишусь. Здоровья Вам и Успехов в творчестве! С уважением,

Владимир Канунников   30.11.2019 18:16     Заявить о нарушении
Попробуйте. Мне делать мультики, как видите, удаётся. Наверху окна программы разделы типа <<Help>> есть. Вы их почитайте, попробуйте, как всякие кнопки и опции действуют, чтобы освоиться с программой.

Дмитрий Маштаков   01.12.2019 12:56   Заявить о нарушении
Я так понял, эта ваша разработка?)))

Владимир Канунников   01.12.2019 13:04   Заявить о нарушении
Да, зная мои способности и интерес ко всяким таким штучкам, внучка просила меня программу для рисования и анимации сделать. Потому, что Фотошоп ей слишком сложным показался. И то правда, моя программа попроще, чем Фотошоп, её даже не нужно устанавливать - просто запустить, и она заработает. Программа, хоть и простая, но тоже рисовать неплохо умеет, и для анимации возможностей много.

Дмитрий Маштаков   01.12.2019 16:54   Заявить о нарушении
А в Play Маркет не пробовали её запустить? Многим бы она пригодилась и много благодарных отзывов получили бы. Или там свои сложности есть?

Владимир Канунников   01.12.2019 19:55   Заявить о нарушении
Play Маркет это сервис на платформе Android, а я с телефонами дела не имею, поэтому ничего не могу сказать. Моя программа сделана под Виндос. Как одно с другим совмещается, и можно ли такое совмещение в принципе сделать, я не знаю.
Как я понимаю, для таких задач эмулятор нужен, а эмулятор, это лишняя возня, да и скорость работы программы с эмулятором замедлится, а это для неё существенно.

Дмитрий Маштаков   02.12.2019 07:59   Заявить о нарушении
Просмотреть результат, то есть файл формата mp4 в Play Маркет конечно можно.

Дмитрий Маштаков   02.12.2019 08:04   Заявить о нарушении