Думаю, многие видели эти забавные рекламные ролики по ТВ (кто не видел - видео ниже). Честно говоря, затрудняюсь сказать, как такой анимационный прием называется, назову его условно дрожащей анимацией, потому что для нее характерно легкое подрагивание контурных линий. И поделюсь маленькой хитростью, как просто сделать подобный эффект дрожащих линий во флеше.
Ролик выполнен в стиле покадровой анимации. Во флеше сделать такой эффект дрожащих линий очень просто.
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, спасибо большое!
где находится "свойство карандаша"???????
на панели Properties!!!!!
ок!
а толщину линий уже нарисованного объекта менять нельзя?
кстати, хороший урок!
можно менять
Красота! Доходчиво и подробно! Добавил в закладки!
Во время больших проектов и бессонных ночей я предпочитаю РедБулл, уж больно хороша реклама!
Дим, лучше пей морковный сок)
Может я не в том разделе вопрос задаю, заранее извиняюсь тогда. Просто замучился решать свою проблему, а она, как мне кажется, совершенно пустяковая. Это просто бесит. Так вот. У меня при импортировании звукового файла (*.wav) в Adobe Flash CS5 звук ускоряется на 25%. Т.е. звук, который должен идти 20 сек, после импорта идет в ускоренном темпе 15 сек. На временной шкале так и показывается - 15 сек, вместо нормальных 20. И после экспорта в формат *.avi ускоренный "мультяшный" темп сохраняется. Что может искажать звуковлй файл при импорте в CS5?
Заранее благодарю.
Поменяйте битрейт WAV файлу, должно помочь.
Скорее всего звук был с нестандартной частотой дискретизации/битностью.
Лучше всего в качестве исходника внутрь флеша скармливать WAV (Или AIF на маке) с такими характеристиками: 16 бит, 44100 Hz
А потом уже в натсройках публикации конвертировать в мп3.
здесь пока нет разделов, поэтому не страшно. к сожалению, я не знаю ответ на ваш вопрос, не сталкивалась с подобным. подождем, может, кто-то подскажет.
Нашел причину. Я делал так. Взял файл mp3 вырезал нужные звуки, а затем конвертировал фонограмму их в wav. А нужно было сначала конвертировать весь исходный файл в wav, а потом производить над ним всякие манипуляции (обрезать, сшивать, добавлять эффекты и т.д.).
Может кому пригодится....
а в какой программе вы вырезали нужные звуки для последующей конвертации? мне непонятно немного, почему кусочек конвертировался плохо, а целый файл без проблем
Здорово! Давно глядел на похожие ролики и думал как добиться такого эффекта. Большое спасибо!
на здоровье)
Оксана, огромное спасибо за подробное описание именно самого процесса анимации! Подобную анимацию делала несколько раз, но мой метод был таким...убогим...делала анимацию заново отрисовывая персонажа на каждом ключевом кадре, чем получала различные по кривизне и толщине линии и так создавалась подергивающаяся анимация... но это так неудобно! Уже чешутся ручонки опробовать описанный вами метод! ))
дерзайте:) метод классный и не трудозатратный
Наконец-то !
Теперь я знаю название
Года 2 назад делал проект в таком стиле и пользовал именно этот прием. Если кому интересно: http://www.behance.net/gallery/ArkConnect-2010-NY-card/1905751
Но это вариант "дешево и сердито". А вот у adui, например, что называется "на все деньги": http://adui.livejournal.com
Полистайте, там много очень хороших примеров. Которые, кстати говоря, очень неплохо разбираются на кирпичики для понимания анимации в целом.
да, у Сергея Ратникова отличная графика и анимация, давно люблю его работы:)
Еще вопрос вдогонку. Вот сделал баннер например. И очень много разных штучек за сценой находится. И если просматривать ролик в Адобплеере, то он выставляется по границам сцены и не видно всего того что за пределами сцены, это так же актуально и если его на сайт залить с нужными размерами, но если ролик скачать и смотреть в другом проигрывателе, КМР например, то он не выставляется по размерам сцены и все видно. Какие буквы, картинки за пределами сцены. и т.д. Очень как-то не красиво. Думаю это сразу отличает профи от начинающих. Потому что профи каким-то образом это все закрывают. Может достаточно еще одного слоя выше всех и с отверстием по размерам сцены. Но у меня сейчас такой вопрос. У меня камера летает над сценой, то увеличивает, то уменьшает ее содержимое. Поэтому если в адобе плеере смотреть - все отлично. Но в КМР то видно все вокруг. Плиз. Кто подскажет, хоть что-нибудь. До понедельника ох как нужно. Спасибо.
Маска - не лучшй способ.
1. Нагрузка на процессор.
2. Неудобно при редактировании
Дырка - немного лучше маски, потому что меньше нагрузка.
Есть еще отличный способ - быстрее маски:
код AS2.0
Stage.scaleMode = "noScale";
this.scrollRect = new flash.geom.Rectangle(0,0,Stage.width, Stage.height);
Спасибо за совет. Попробую.
просто делаете рамочку вокруг баннера, например, белого цвета. И весь мусор за границами баннера закроете. Некоторые прячут все под маску, но я делаю рамку всегда.
У слоя меняешь стиль на "маска" и рисуешь например квадрат с размером твоей сцены (640х480, как пример), а нижним слоям делаешь "masked" (вроде так называется). И готово. Или просто перетаскиваешь слой мышкой под слой с маской и он автоматом будем маскирующимся.
Спасибо за советы. Пригодились оба.
Отличный урок. Огромное спасибо. Очень радует, что посты выходят довольно часто. А то периодически просматриваю сайты и блоги других и судя по всему забили они на молодое подрастающее поколение. Да. Работа. Да. Дети сопливые. Но как же мы. (Тут нужен смайлик с большими глазками как у Кота из Шрека). Но как же мы. Мы ведь такие хорошие )))
Очень очень хочется урок по какому-нибудь игровому баннеру. Как у хитри. Может даже не подробное описание сколько исходник, что бы с ним по разбираться. (Тут опять глазки котика с шляпой в руках) )))
Ребята, подрастающее поколение, акстись! Не надо уже смотреть на флеш! Флеш сдает свои позиции во многих направлениях, смотрите глубже!
Видите себя аниматором — изучайте AnimeStudio, After Effects, Cinema4d (maya/3dmax/blender) TVPAint Studio - список можно продолжать.
Геймдев - смотрите в сторону мобильных устройств - iOs, android.
WEB - html5, css ура ура.
Михаил, не разводите панику среди молодого поколения заявлениями - учите все, кроме флеша:)
Поправлюсь - можете учить флеш. Но если это все, что вы выучите - это трата времени. Флеш остется хорошим вспомогательным инструментом, но делать ставку только на него - недальновидно
на какую программу делать ставку сейчас?
На голову )) на руки )))
А софт - я уже написал выше - но это все только иструменты.
вы так уверенно сообщили о ближайшей кончине флеша, что мне стало совсем грустно...прям на блоге по флеш-анимации начали его хоронить:) весь софт не осилишь, в подмогу - да. когда уже что-то знаешь, то намного легче расширять горизонты. а когда не знаешь ничего и говорят тебе - учи все, 2д, 3д - это даже меня напугало:) что уж говорить о молодежи
Все равно напугали (((
теперь я в депрессии
http://habrahabr.ru/post/139928/
Да-да. Это одна из областей, где все еще в порядке.
Однако сейчас., скажем, огромную часть интернет трафика гоняют через планшетные компьютеры. Флеш на планшетах - не смешите меня.
ЕСЛИ к онлайн-играм. написанных для флеша да еще и приплюсовать порты на популярные мобильные платформы - это будет большой плюс. Именно об этом моя сегодняшняя контрастная мысль ))
так, отставить панику.
В любом деле первостепенное значение имеет человек, который за это дело берется.
И не важно, что он использует для того, что бы создать задуманное.
Я говорю о некоторых позициях, которые сдала — ВНИМАНИЕ — технология флеш, как мультимедиа платформа для веба. Когда то это была бесспорно лучшая платформа. Игры, сайты, видео, анимации - все это был флеш. Сейчас ситуация в корнепоменялась и флеш как технология уже далеко не впереди планеты всей.
Но сам по себе софт - Flash - никуда не делся. Аниматоры могут легко в нем анимировать, программисты программировать и так далее ))
Я говорю о том, что сегодня для того чтобы ворваться в индустрию — нужно готовиться активнее, и если ты аниматор - знать больше смежных инструментов, если программист - шире смотреть на возможности для разработки )) и так далее.
Блог по флеш анимации - это благо, ибо учит именно работе с инструментом. Так что я никого не хороню )) Я нсколько резко, и не совсем аккуратно призвал к расширению кругозора. Не пугайтесь.
ну вот, так бы и написали - нежно и мягко:) расширять кругозор - это огромный плюс: я давно задумывалась над изучением смежных программ, но как известно, то времени не хватает, то матушка-лень.
Спасибо за совет. Я тоже где-то неосознанно это подозревал. Но вопрос "Каким образом все это быстро осваивать?"
ох уж это молодое подрастающее поколение))
Это от Диснея:)
это squigglevision от некого Тома Снайдера:)
Прекрасная и очень наглядная статья!!! Спасибо!!!
Ваша принцесса и без энергетиков краше)))
А такой тип анимации еще стародавние времена в классической анимации "на штифтах" назывался - тотальной анимацией. Также использовался прием наплывов через каждые 5-7 кадров - изображение первого рисунка, становившегося прозрачным (Alpha = 100 => , замещалось изображением следующего рисунка, набирающего свою плотность (Alpha = 0 => 100). Кстати, любопытно было бы попробовать понаплывать во флеше)))
ух ты, не знала про тотальную анимацию! спасибо)
Вот яркий пример 1985 г. классической тотальной мультипликации:
http://www.youtube.com/watch?v=lG_QnUWKMjE&feature=player_embedded
В то время многие режиссеры с удовольствием примеряли на себя эти модные тенденции. А меня всегда поражал объем работы в таких фильмах!!!
в этом примере анимация намнооого сложнее, чем squigglevision (вот мне подсказалаи, как такая техника называется). Как будто мазками нарисовано, нет четкого контура. Тотальная анимация - очень трудозатратная, я так подозреваю..В отличии от squigglevision (я копирую это супер-слово,потому что произнести не могу:)
Ну, степень "тотальности" может быть разная, отсюда и трудозатраты разнятся. Перерисовывать только контур и минимум заливки или наводить живопись в каждом кадре, суть одна - ни кадра статики)))
Привет!
Спасибо за пост. А прием в анимации, называется - Squigglevision (http://ru.wikipedia.org/wiki/Squigglevision)