Анимация в стиле рекламных роликов Red bull

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

 

Ролик выполнен в стиле покадровой анимации. Во флеше сделать такой эффект дрожащих линий очень просто.

1.Выбираем инструмент карандаш на панели инструментов. Заходим в свойства карандаша и выбираем стиль линии – Ragged line (рваная линия).

Толщину контура ставлю, к примеру, 1.

Можно также отредактировать линию, кликнув на карандашик рядом.

Например, выбрать режим flat (линия плоская, без неровностей), wavy (волнистая), very wavy (очень волнистая) и супер-неровная (wild).

Выглядит это так:

Я выбрала режим wavy.

2. Рисую персонаж. В ролике выше у нас трогательная история носатой принцессы, и я нарисую принцессу, но с большой головой:) Рисунок не занял у меня много времени: на нижнем слое – быстрый набросок (розовая мазня), а поверх –  чистовая отрисовка.

Помним об особенностях линии во флеше – ее толщина не изменяется при масштабировании. Если мы будем рисовать в масштабе рабочей области 100% и 300% карандашом толщиной линии 1 рх, то конечный результат будет разным. Поэтому выбираем оптимальный для себя вариант.

Для примера, я просто уменьшила персонаж, не изменяя толщину линии. И вот получилось такое безобразие справа:

3.Конечный результат отрисовки - статичная картинка.

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

При выделении персонаж выглядит очень испуганным,как будто на голову упало бревно: рваная линия ведет себя немного странно при выделении (рисунок ниже).

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

Свойства этой линии такие, что даже при минимальном воздействии на нее, она меняет свою «рваность» в разных местах. Поэтому достаточно немного потянуть мышкой за линии во втором ключевом кадре, и места разрывов смещаются. За счет таких манипуляций и получается дрожащая анимация. Чтобы не таскать каждую линию мышкой, можно немного схитрить – во втором кадре просто уменьшить совсем чуть-чуть толщину линии. Но не всегда результат в таком случае будет отменным.

Я сделала 2 варианта – дрожание в 2 кадра, и дрожание в 3 кадра. Можно остановиться и на 2-х ключевых кадрах, просто свечение от короны очень резко смотрится, пришлось добавить дополнительный ключевой кадр, чтобы разнообразить анимацию. Результат (в опере кликнуть для активации флешки):

Такая анимационная техника применяется как к персонажам, так и к фонам, что хорошо видно в рекламном ролике. Анимированные фоны с таким дрожанием выглядят очень живо, да и персонажи тоже не хуже.

6.И в дополнение: если к персонажу планируется анимация перекладкой, то сохраняем в символы все части тела по-отдельности (голова, волосы, глаза, ручки-ножки). Для этого при отрисовке отделяем их друг от друга, чтобы объекты не слиплись. Как это сделать – тут.

Ну, и можно немного добавить цвета:

Готово!

upd: Добрые люди и Википедия подсказали, что такой прием называется Squigglevision (читается «скуиглвижн», от англ. squiggle — писать каракулями; изгибать). Это запатентованный метод компьютерной анимации, в соответствии с которым контуры объектов непрерывно колеблются. Эту технику изобрёл Том Снайдер, его продюсерская компания Soup2Nuts позднее применила её в нескольких успешных мультсериалах.

По сравнению с рисованной мультипликацией Squigglevision является относительно простой и быстрой техникой. Непрерывное движение «дрожащих» контуров уменьшает потребность в более сложной анимации для придания сцене ощущения динамичности. Том Снайдер описывает результат как «экономию движения». «Недостатки практически отсутствуют, — заявляет Снайдер. — Сделать сцену с вертолётом стоит ровно столько же, сколько и сцену в гостиной». Тем не менее, некоторые зрители описали Squigglevision как отвлекающий и раздражающий стиль, а некоторые даже утверждали, что от него начинаются головные боли.

Вот так:)

Комментарии
Аватар пользователя Инга

заказать анимационный ролик http://probro.ru/videoproizvodstvo/sozdanie-animatsii-i-infografiki/ в студии Пробро

Аватар пользователя Зщште

Oksana, спасибо большое!

Аватар пользователя Гость

где находится "свойство карандаша"???????

Аватар пользователя Oksana

на панели Properties!!!!!

Аватар пользователя Гость

ок!
а толщину линий уже нарисованного объекта менять нельзя?
кстати, хороший урок!

Аватар пользователя Oksana

можно менять

Аватар пользователя Humgat

Красота! Доходчиво и подробно! Добавил в закладки!
Во время больших проектов и бессонных ночей я предпочитаю РедБулл, уж больно хороша реклама!

Аватар пользователя Oksana

Дим, лучше пей морковный сок)

Аватар пользователя Ivanko_UA

Может я не в том разделе вопрос задаю, заранее извиняюсь тогда. Просто замучился решать свою проблему, а она, как мне кажется, совершенно пустяковая. Это просто бесит. Так вот. У меня при импортировании звукового файла (*.wav) в Adobe Flash CS5 звук ускоряется на 25%. Т.е. звук, который должен идти 20 сек, после импорта идет в ускоренном темпе 15 сек. На временной шкале так и показывается - 15 сек, вместо нормальных 20. И после экспорта в формат *.avi ускоренный "мультяшный" темп сохраняется. Что может искажать звуковлй файл при импорте в CS5?
Заранее благодарю.

Аватар пользователя Disco Fish

Поменяйте битрейт WAV файлу, должно помочь.

Аватар пользователя murejib

Скорее всего звук был с нестандартной частотой дискретизации/битностью.
Лучше всего в качестве исходника внутрь флеша скармливать WAV (Или AIF на маке) с такими характеристиками: 16 бит, 44100 Hz
А потом уже в натсройках публикации конвертировать в мп3.

Аватар пользователя Oksana

здесь пока нет разделов, поэтому не страшно. к сожалению, я не знаю ответ на ваш вопрос, не сталкивалась с подобным. подождем, может, кто-то подскажет.

Аватар пользователя Ivanko_UA

Нашел причину. Я делал так. Взял файл mp3 вырезал нужные звуки, а затем конвертировал фонограмму их в wav. А нужно было сначала конвертировать весь исходный файл в wav, а потом производить над ним всякие манипуляции (обрезать, сшивать, добавлять эффекты и т.д.).
Может кому пригодится....

Аватар пользователя Oksana

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

Аватар пользователя Ivanko_UA
Nero Wave Editor
Аватар пользователя Leetovetz
Отличная и бесплатная программа Audacity. Полностью удовлетворяет все что только можно. Плюс очень легкая в управлении.
Аватар пользователя salvador

Здорово! Давно глядел на похожие ролики и думал как добиться такого эффекта. Большое спасибо!

Аватар пользователя Oksana

на здоровье)

Аватар пользователя Renderdoll

Оксана, огромное спасибо за подробное описание именно самого процесса анимации! Smile Подобную анимацию делала несколько раз, но мой метод был таким...убогим...делала анимацию заново отрисовывая персонажа на каждом ключевом кадре, чем получала различные по кривизне и толщине линии и так создавалась подергивающаяся анимация... но это так неудобно! Уже чешутся ручонки опробовать описанный вами метод! Smile))

Аватар пользователя Oksana

дерзайте:) метод классный и не трудозатратный

Аватар пользователя zulin

Наконец-то !
Теперь я знаю название Smile
Года 2 назад делал проект в таком стиле и пользовал именно этот прием. Если кому интересно: http://www.behance.net/gallery/ArkConnect-2010-NY-card/1905751

Но это вариант "дешево и сердито". А вот у adui, например, что называется "на все деньги": http://adui.livejournal.com
Полистайте, там много очень хороших примеров. Которые, кстати говоря, очень неплохо разбираются на кирпичики для понимания анимации в целом.

Аватар пользователя Oksana

да, у Сергея Ратникова отличная графика и анимация, давно люблю его работы:)

Аватар пользователя Leetovetz

Еще вопрос вдогонку. Вот сделал баннер например. И очень много разных штучек за сценой находится. И если просматривать ролик в Адобплеере, то он выставляется по границам сцены и не видно всего того что за пределами сцены, это так же актуально и если его на сайт залить с нужными размерами, но если ролик скачать и смотреть в другом проигрывателе, КМР например, то он не выставляется по размерам сцены и все видно. Какие буквы, картинки за пределами сцены. и т.д. Очень как-то не красиво. Думаю это сразу отличает профи от начинающих. Потому что профи каким-то образом это все закрывают. Может достаточно еще одного слоя выше всех и с отверстием по размерам сцены. Но у меня сейчас такой вопрос. У меня камера летает над сценой, то увеличивает, то уменьшает ее содержимое. Поэтому если в адобе плеере смотреть - все отлично. Но в КМР то видно все вокруг. Плиз. Кто подскажет, хоть что-нибудь. До понедельника ох как нужно. Спасибо.

Аватар пользователя murejib

Маска - не лучшй способ.
1. Нагрузка на процессор.
2. Неудобно при редактировании

Дырка - немного лучше маски, потому что меньше нагрузка.

Есть еще отличный способ - быстрее маски:
код AS2.0
Stage.scaleMode = "noScale";
this.scrollRect = new flash.geom.Rectangle(0,0,Stage.width, Stage.height);

Аватар пользователя Leetovetz

Спасибо за совет. Попробую.

Аватар пользователя Oksana

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

Аватар пользователя Disco Fish

У слоя меняешь стиль на "маска" и рисуешь например квадрат с размером твоей сцены (640х480, как пример), а нижним слоям делаешь "masked" (вроде так называется). И готово. Или просто перетаскиваешь слой мышкой под слой с маской и он автоматом будем маскирующимся.

Аватар пользователя Leetovetz

Спасибо за советы. Пригодились оба.

Аватар пользователя Leetovetz

Отличный урок. Огромное спасибо. Очень радует, что посты выходят довольно часто. А то периодически просматриваю сайты и блоги других и судя по всему забили они на молодое подрастающее поколение. Да. Работа. Да. Дети сопливые. Но как же мы. (Тут нужен смайлик с большими глазками как у Кота из Шрека). Но как же мы. Мы ведь такие хорошие )))
Очень очень хочется урок по какому-нибудь игровому баннеру. Как у хитри. Может даже не подробное описание сколько исходник, что бы с ним по разбираться. (Тут опять глазки котика с шляпой в руках) )))

Аватар пользователя murejib

Ребята, подрастающее поколение, акстись! Не надо уже смотреть на флеш! Флеш сдает свои позиции во многих направлениях, смотрите глубже!
Видите себя аниматором — изучайте AnimeStudio, After Effects, Cinema4d (maya/3dmax/blender) TVPAint Studio - список можно продолжать.
Геймдев - смотрите в сторону мобильных устройств - iOs, android.
WEB - html5, css ура ура.

Аватар пользователя Oksana

Михаил, не разводите панику среди молодого поколения заявлениями - учите все, кроме флеша:)

Аватар пользователя murejib

Поправлюсь - можете учить флеш. Но если это все, что вы выучите - это трата времени. Флеш остется хорошим вспомогательным инструментом, но делать ставку только на него - недальновидно

Аватар пользователя Oksana

на какую программу делать ставку сейчас?

Аватар пользователя murejib

На голову )) на руки )))
А софт - я уже написал выше - но это все только иструменты.

Аватар пользователя Oksana

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

Аватар пользователя Leetovetz

Все равно напугали (((
теперь я в депрессии

Аватар пользователя Oksana
Аватар пользователя murejib

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

ЕСЛИ к онлайн-играм. написанных для флеша да еще и приплюсовать порты на популярные мобильные платформы - это будет большой плюс. Именно об этом моя сегодняшняя контрастная мысль ))

Аватар пользователя murejib

так, отставить панику.
В любом деле первостепенное значение имеет человек, который за это дело берется.
И не важно, что он использует для того, что бы создать задуманное.
Я говорю о некоторых позициях, которые сдала — ВНИМАНИЕ — технология флеш, как мультимедиа платформа для веба. Когда то это была бесспорно лучшая платформа. Игры, сайты, видео, анимации - все это был флеш. Сейчас ситуация в корнепоменялась и флеш как технология уже далеко не впереди планеты всей.
Но сам по себе софт - Flash - никуда не делся. Аниматоры могут легко в нем анимировать, программисты программировать и так далее ))
Я говорю о том, что сегодня для того чтобы ворваться в индустрию — нужно готовиться активнее, и если ты аниматор - знать больше смежных инструментов, если программист - шире смотреть на возможности для разработки )) и так далее.
Блог по флеш анимации - это благо, ибо учит именно работе с инструментом. Так что я никого не хороню )) Я нсколько резко, и не совсем аккуратно призвал к расширению кругозора. Не пугайтесь.

Аватар пользователя Oksana

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

Аватар пользователя Leetovetz

Спасибо за совет. Я тоже где-то неосознанно это подозревал. Но вопрос "Каким образом все это быстро осваивать?"

Аватар пользователя Oksana

ох уж это молодое подрастающее поколение))

Аватар пользователя p0lter

Это от Диснея:)

Аватар пользователя Oksana

это squigglevision от некого Тома Снайдера:)

Аватар пользователя Игорь

Прекрасная и очень наглядная статья!!! Спасибо!!!
Ваша принцесса и без энергетиков краше)))
А такой тип анимации еще стародавние времена в классической анимации "на штифтах" назывался - тотальной анимацией. Также использовался прием наплывов через каждые 5-7 кадров - изображение первого рисунка, становившегося прозрачным (Alpha = 100 => Innocent, замещалось изображением следующего рисунка, набирающего свою плотность (Alpha = 0 => 100). Кстати, любопытно было бы попробовать понаплывать во флеше)))

Аватар пользователя Oksana

ух ты, не знала про тотальную анимацию! спасибо)

Аватар пользователя Игорь

Вот яркий пример 1985 г. классической тотальной мультипликации:
http://www.youtube.com/watch?v=lG_QnUWKMjE&feature=player_embedded
В то время многие режиссеры с удовольствием примеряли на себя эти модные тенденции. А меня всегда поражал объем работы в таких фильмах!!!

Аватар пользователя Oksana

в этом примере анимация намнооого сложнее, чем squigglevision (вот мне подсказалаи, как такая техника называется). Как будто мазками нарисовано, нет четкого контура. Тотальная анимация - очень трудозатратная, я так подозреваю..В отличии от squigglevision (я копирую это супер-слово,потому что произнести не могу:)

Аватар пользователя Игорь

Ну, степень "тотальности" может быть разная, отсюда и трудозатраты разнятся. Перерисовывать только контур и минимум заливки или наводить живопись в каждом кадре, суть одна - ни кадра статики)))

Аватар пользователя Disco Fish

Привет!

Спасибо за пост. А прием в анимации, называется - Squigglevision (http://ru.wikipedia.org/wiki/Squigglevision) Smile

  • Страницы:
  • 1
  • 2