Анимация подкаста сообщества Envato

Анимация не должна быть сложной, чтобы быть привлекательной, и, как показывают подкасты Ricky Gervais Show , даже простой диалог между тремя людьми может стать главным анимационным развлечением. Мы собираемся черпать вдохновение у мистера Герве и оживить часть подкаста сообщества Envato .

Шоу Рикки Жерве

Если вы еще не видели анимированные подкасты Ricky Gervais Show, тогда идите и проверьте их прямо сейчас! (Я буду ждать). Оригинальный подкаст впервые вышел в эфир в 2005 году и достиг мега успеха, быстро став самым популярным подкастом в мире. В 2010 году он был адаптирован в анимированную телевизионную версию, дебютировавшую для HBO и Channel 4 — и это блестяще.

Часть апелляции заключается в мирской природе людей, болтающих; небольшие идиосинкразии и поведенческие черты усиливаются полным отсутствием действия.

Я подумал, что было бы неплохо оживить подкаст сообщества Envato . Его устраивают Дрю Дуглас , Джордан Макнамара и Таш, его легко можно скачать и прослушать, но разве не приятно было бы посмотреть, как они выглядят, сидя в своей маленькой вымышленной студии?

обзор

Итак, кто стоит за анимационным шоу Рикки Жерве? Что ж, вы будете уверены, что это был не один человек. Нику Бертонацци, арт-директору проекта Ricky Gervais Show (и дал интервью о всей истории на канале Frederator ), помогала команда из не менее двадцати человек; две команды из десяти аниматоров работают над альтернативными эпизодами.

Тем не менее, стоит отметить, что для анимации требуется много терпения и напряженной работы, поэтому мы собираемся сделать все как можно проще для себя. Мы собираемся работать над единственной сценой, анимировать (почти) исключительно на одной временной шкале и держать наше движение приятно прямо вперед. К счастью, стиль Hanna-Barbera Flintstones, используемый в шоу Рикки Жерве, хорошо подходит для простой анимации.

Структура учебника

Многие из следующих шагов могут быть выполнены, когда вы чувствуете необходимость, нет строгого 1,2,3 в описанных процессах. Таким образом, вы не найдете номеров шагов, а добавляете главы, которые объединяют шаги в логические группы.

Без дальнейших церемоний, давайте войти и оживить!

Подготовка: версия Adobe Flash

Какую версию Adobe Flash мы будем использовать? Это полностью зависит от вас. Большинство принципов, продемонстрированных в этой статье, применимы начиная с Flash CS3. Фактически, мы будем использовать классический анимацию движения (в отличие от более продвинутой анимации, доступной в CS4 и далее), поскольку это идеально подходит для нашего простого стиля анимации.

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

Подготовка: настройка документа

Онлайн видео каналы обычно работают с (отображают по умолчанию) широкоэкранным соотношением сторон 16: 9, поэтому я соответствующим образом настрою свою сцену. С точки зрения общих размеров 16: 9 пикселей, одним из таких примеров является 1280 x 720px, 1920 x 1080px, если вы используете HD, или 864 x 486px, если приемлемое более низкое разрешение.

В нашем случае, используя широкоэкранный стандарт, ориентируясь на настольные мониторы по всему миру и максимально используя веб-интерфейс, мы выберем разрешение 1280 x 720 пикселей.

Мы также установим наш фильм на 30 кадров в секунду, хотя частота кадров полностью зависит от ваших предпочтений. Работа в направлении распространения через Интернет освобождает вас от ограничений частоты кадров, установленных стандартами NTSC и PAL. Если вы заинтересованы в экспорте анимации для телевизионного вещания, взгляните на то, что Том Грин должен сказать по этому вопросу, есть что принять во внимание.

Подготовка: Основной Moveclip

Как я уже говорил, мы собираемся работать почти полностью на одной временной шкале. Мы поместим эту временную шкалу в мувиклип, который называется «анимация», и этот мувиклип мы поместим в первый кадр Сцены 1. Нажмите Command / Control F8 или выберите «Вставка»> «Новый символ»…, чтобы создать мувиклип «Анимация».

Хорошо. У нас есть пустая анимация. Я полагаю, нам лучше начать заполнять его.

Звук: Выбранный саундтрек

Мы не можем ничего сделать без саундтрека, на котором основана наша анимация, так что идите и возьмите подкаст сообщества Envato .

В моем случае я подписываюсь через iTunes, поэтому я нашел загруженный файл .mp3 в своем каталоге iTunes Podcast. Однако это довольно долго (около часа), поэтому нет смысла перетаскивать все 60 МБ в нашу Flash-анимацию. Мы должны урезать это.

Существует множество способов обрезки файла .mp3, возможно, у вас уже есть предпочтительное приложение. MP3 Trimmer — это условно-бесплатное приложение, которое отлично справится со своей задачей, или вы можете использовать QuickTime, Soundbooth, Garageband, даже iTunes может экспортировать урезанную версию ваших музыкальных файлов.

Я использовал Adobe Media Encoder.

Инструмент обрезки дорожек Adobe Media Encoder.

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

QuickTime 10 позволяет предварительно просмотреть, что вы делаете.

Как только наш трек находится во Flash, мы можем редактировать появление и исчезновение. Итак, после завершения обрезки выведите результат!

Звук: импорт звуковых файлов

Во Flash перейдите в «Файл»> «Импорт»> «Импорт в библиотеку» и найдите только что подготовленный файл .mp3. Или просто перетащите его в библиотеку. Помните, что все должно быть организовано, поэтому поместите его в папку с именем «звук».

Теперь он доступен для использования на временной шкале, поэтому создайте новый слой в новой папке (назовите их соответствующим образом) и выберите первый кадр. В разделе «Звук» Инспектора свойств («Windows»> «Свойства») для этого кадра вы можете выбрать любой из звуковых файлов в библиотеке. Я назвал свой саундтрек «podcast_shorter.mp3», и вы можете увидеть его на скриншоте ниже. Вы также заметите саундтрек, визуализированный на временной шкале:

Панель свойств будет отображаться по-разному в зависимости от вашей версии Flash, но ее содержание по существу не меняется.

Звук: чувство синхронизации

Вы также заметите меню выбора «sync» на панели «Свойства»; убедитесь, что поток выбран. Потоковая передача звукового файла позволяет ему начать воспроизведение, как только он будет обнаружен точкой воспроизведения. Он загружается и воспроизводится одновременно, что идеально подходит для наших нужд, поскольку мы используем большой звуковой файл.

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

Возможно, вы слышите худшее качество звука при выбранном Stream ; заманчивая причина, чтобы выбрать тип звука события . Вы можете легко это исправить, изменив настройки публикации. Перейдите в File> Publish Settings… и выберите вкладку Flash. Там, где вы видите Audio Stream, нажмите кнопку Set… . Это вызывает параметры звука для типа звука потока. Убедитесь, что выбрано лучшее качество, с достаточно высокой скоростью передачи, и вы готовы к работе.

Выберите Лучшее качество звука.

Звук: Уровни

Поскольку мы работаем с файлом ActionScript 3.0, вы увидите, что Live Preview (Control> Enable Live Preview) автоматически проверяется. Продолжайте, нажмите Enter, и вы увидите zip воспроизведения вдоль временной шкалы, воспроизводя ваш звуковой файл, как это происходит. Это отлично подходит для мгновенного редактирования, как вы обнаружите, как только вы начнете синхронизацию губ.

На данный момент, что больше всего будет выделяться, так это внезапное начало нашего звука. Если вы урежете что-нибудь, как я, оно резко оборвется, пока звучит вступительная музыка, как раз перед тем, как Дрю начинает говорить. Давайте исправим это во Flash, отредактировав огибающую , доступную нам на панели «Свойства звука».

Нажмите на значок карандаша.

Звук: Каналы

Как показано на скриншоте ниже, вы можете легко изменять уровни звука в файле. Вы увидите два канала; левый канал (вверху) и правый канал (внизу). Если вы работаете со стерео, редактирование уровней отдельных каналов может быть чрезвычайно полезным.

Здесь необходимо учитывать два аспекта диалога конверта:

Более тонкая обрезка: полоса между двумя каналами указывает, где мы хотим, чтобы наш звук начинался. Серые области иллюстрируют раздел саундтрека, который мы фактически удалили.
Уровни: в нашем случае вы можете видеть, как уровень постепенно исчезает, пока не достигнет полной громкости. Вы можете добавить узлы к вектору, чтобы увеличить или уменьшить громкость в любом месте.

Используйте значки внизу, чтобы изменить способ просмотра каналов.

Конец нашего саундтрека обрабатывается аналогичным образом, заканчивая затемнением.

Маркировка: какие этикетки?

ОК, мы заложили саундтрек на график. Этот саундтрек определяет, что произойдет, когда, поэтому все, что мы делаем с этого момента, будет основано на нем. Мы собираемся начать с синхронизации губ; как только мы поговорим с персонажами, мы сможем рассмотреть движение и другие детали. Здесь ключом, как и во многих вещах, является планирование. Нам нужно наметить план, чтобы мы могли наглядно представить, что происходит.

Создайте новую папку на временной шкале и поместите в нее 4 новых слоя: музыка , Дрю , Таш и Джордан . Эти слои должны использоваться явно для маркировки; отмечая, кто что говорит и когда, чтобы вы могли позже увидеть, как анимировать ваших персонажей, не обращаясь к саундтреку каждый раз. Вы можете заблокировать их, чтобы предотвратить случайное вставление объектов в их рамки.

Пометьте ключевой кадр:

Начните с маркировки начала вашего саундтрека, просто ради этого…

Маркировка: Типы этикеток

Как показано на скриншоте ниже, метки кадров могут быть разных типов:

Тип метки Имя выбирается здесь.

Мы будем игнорировать тип Anchor ; это используется для глубоких ссылок и работает так же, как тег привязки в HTML. Вы можете прочитать больше о типе меток Anchor в Adobe Developer Connection .

В нашей ситуации было бы обычно использовать тип Comment . Мы на самом деле просто комментируем нашу временную шкалу, чтобы показать, где нам нужно разместить объекты и движение, метки не выполняют никакой другой функции. Либо выберите Комментарий при вводе метки фрейма, либо добавьте то, что вы вводите, с помощью «//» (так же, как если бы вы закомментировали ActionScript), и все готово.

Продолжайте маркировать речь и другие события в соответствии с вашей временной шкалой. Очистка игровой головки вперед и назад даст вам приблизительное представление об уровнях (например, точный кадр, в котором кто-то начинает смеяться). В противном случае, нажав Enter, вы начнете и остановите звук, что поможет вам определить, где находятся ваши лейблы.

Наконец, имейте в виду масштаб вашей временной шкалы, слоев и кадров. Вы можете обнаружить, что увеличение высоты звукового слоя помогает визуализировать происходящее:

Дважды щелкните значок слоя, чтобы открыть его свойства. Измените высоту слоя так, как вам удобно.

Увеличение высоты слоя саундтрека до 300% дает следующий результат, с которым гораздо проще работать:

Используйте параметры временной шкалы, чтобы изменить масштаб и, следовательно, ширину кадров.

Это может повлиять на точность вашей маркировки, если вы измените ее позже в процессе.

Маркировка: принятие этикеток дальше

Этот шаг ни в коем случае не является обязательным, но он может оказаться полезным, когда вы намечаете события на временной шкале.

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

import flash.events.Event;
  
if (!this.hasEventListener(Event.ENTER_FRAME))
{
    this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    //onEnterFrame() will not be run in frame where it was declared
    traceFrameLabel();
}
  
function onEnterFrame(e:Event):void
{
    traceFrameLabel();
}
  
function traceFrameLabel():void
{
    if (this.currentFrameLabel != null)
    {
        var totalFrameLabel = this.currentFrame + «: » + this.currentFrameLabel;
        trace(totalFrameLabel);
    }
}

Возьмите этот фрагмент и вставьте его в панель «Действия» (Windows> «Действия») на новом слое с именем «действия».

Первая строка (оператор import) позволяет нам обрабатывать события. Событие, которое мы слушаем, называется ENTER_FRAME и, как ENTER_FRAME следующие строки, при обнаружении того, что фильм вошел в новый кадр, мы запускаем onEnterFrame() . Эта функция на самом деле просто вызывает traceFrameLabel() (см. Комментарий в коде).

Как вы можете видеть в строке 19, traceFrameLabel () объединяет строку, содержащую this.currentFrame и this.currentFrameLabel затем в строке 20 выводит ее для нас, давая нам следующий эффект:

Чтобы сделать это, ваши метки должны быть типа «Имя», а не «Комментарий». Метки комментариев не экспортируются в .swf, поэтому информация недоступна для отслеживания. Метки имен экспортируются в .swf (они чаще используются для навигации по временной шкале), если вы не решили разместить их на направляющих слоях. Единственная предсказуемая проблема — Flash выдает предупреждения, если вы дублируете метки; технически они должны быть уникальными. Вы можете увидеть некоторые из них пролетели мимо:

ВНИМАНИЕ: Дублирующая метка, Символ = анимация, Слой = Иордания, Рамка = 1677, Метка = здесь

Либо избегайте дублирования меток, либо просто игнорируйте предупреждения!

Теория: Престон Блэр

Давайте пока оставим Flash IDE и рассмотрим принципы синхронизации губ.

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

Он указал 10 основных форм рта:

А я
Е
U
О
C, D, G, K, N, R, S, Th, Y и Z
F и V
L
M, B и P
W и Q
Положение покоя

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

Теория: Закрытие

Я фактически охватил концепцию замыкания в «Механике комиксов», которую я написал несколько лет назад для Vectortuts +. Закрытие (определено Скоттом МакКлаудом в « Понимании комиксов» ) описывает процесс заполнения пробелов, который мы, читатели, делаем каждый раз, когда переводим взгляд с одного изображения комикса на другое. Мы охотно приостанавливаем неверие, погружаясь в повествование и позволяя нашему воображению рассказать нам, что происходит между статичными картинками.

Убить человека между панелями — значит приговорить его к тысяче смертей.

Скотт МакКлауд

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

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

Дизайн: Дизайн персонажей

Дизайн персонажей совершенно произвольный. Я уже обсуждал использование стиля Hanna-Barbera Flintstones , но это только мой подход, потому что я сознательно подражаю существующей работе. Я не собираюсь диктовать, как вы должны решать проблемы.

Вы можете предпочесть рисование своих фигур или работать непосредственно во Flash. Я склонен использовать Adobe Illustrator по привычке и потому, что это приложение для векторного рисования. Кроме того, он без проблем работает с другими участниками Adobe Creative Suite, включая Flash.

Вот Дрю, которого я нарисовал. Так сказать.

Это просто, наполнено простыми, плоскими цветами и может быть легко разделено на компоненты для анимации. Давайте перейдем к тому, что мы собираемся оживить …

Дизайн: движущиеся части

Рассмотрим части, которые вы хотите анимировать. В его самом простом, нашему анимированному Дрю понадобятся следующие шесть функций в качестве отдельных объектов:

Лицо: это будет включать в себя основную форму головы плюс уши.
Волосы: твердый блок, который будет двигаться независимо от лица во время смеха и т. Д.
Рот: Очевидное это — оно будет постоянно двигаться и менять состояние.
Нос: Это не обязательно будет анимировано индивидуально, но оно сидит над ртом, иногда слегка маскируя губу.
Глаза: глаза изменят состояние и будут мигать — определенные отдельные объекты.
Брови: очень полезно при определении выражения.

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

Дизайн: Другие персонажи

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

Поменять цвет губ на красный — это простой способ сказать «это не парень»

Рабочий процесс: импорт графики

Этот шаг полностью зависит от ваших предпочтительных приложений и рабочего процесса. Как я уже упоминал, я склонен готовить свою графику в Adobe Illustrator, но вполне вероятно, что вы работаете с Flash или другой программой. Если вы серьезно организованы, вы можете импортировать файл Illustrator или Fireworks непосредственно во Flash («Файл»> «Импортировать в библиотеку») и конвертировать слои в ключевые кадры или слои во Flash.

Вероятность того, что вы достигнете этого успешно, учитывая количество объектов, о которых мы говорим, очень мала (если вы управляете этим, не создавая библиотеку, которая выглядит как разрушенная войной деревня, то я хочу знать, как!)

Я полагаюсь на простое копирование и вставку, которое в наши дни полностью поддерживается при работе между приложениями Adobe.

Поддержание ваших слоев будет держать вещи в ваших вставленных объектах.

Вставка из Fireworks также дает множество вариантов.

Примечание. Если вы собираетесь работать во внешнем приложении (Illustrator или Fireworks), имейте в виду, что копирование и вставка часто возможны только между совместимыми версиями. Копирование объектов из Illustrator CS5 и вставка непосредственно во Flash CS3 не будут работать; вам нужно будет работать в Illustrator CS3.

Рабочий процесс: непрошеные гости библиотеки

Последние версии Flash легко справляются с копированием и вставкой, но если вы работаете с CS3, вы заметите, что объекты Illustrator автоматически добавляются в новые папки в библиотеке. «AICB» является аббревиатурой от «Adobe Illustrator Clip Board» (факт, который вы теперь можете удалить из своего мозга), и если вы не будете осторожны, вы получите настоящий беспорядок в ваших руках.

Даже в CS4 и выше, вставка из Fireworks дает похожий результат.

Объекты Fireworks и папка FlashAICB в CS3

Нам нужно стремиться к организованной библиотеке, чтобы любые лишние папки и фрагменты роликов можно было разбить (Command / Control + B), переименовать, удалить, как вам угодно. Просто держите вещи в порядке!

Рабочий процесс: Tidy Library

Вы начнете понимать важность поддержания порядка, когда увидите, насколько большой становится библиотека. Я рекомендую вам поместить каждую из соответствующих частей тела в папки для каждого персонажа. Логическое размещение и наименование рта будут особенно полезны, как только мы начнем менять объекты на сцене для синхронизации губ. Мы вернемся к этому.

Активы, которые относятся конкретно к Иордании, находятся в одном месте.

Рабочий процесс: Tidy Timeline

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

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

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

Блокируйте и разблокируйте слои по мере необходимости, чтобы избежать ошибок.

Анимация: создание старта

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

Тема мелодии все еще играет, все неподвижно …

… тогда речь начинается.

Вы заметите, что здесь происходит несколько вещей:

1: Вы можете видеть на звуковом слое точную рамку, где останавливается мелодия темы, и Дрю начинает говорить.
2: В тот же момент я сделал новый ключевой кадр на слое рта, где я поместил другой объект рта.
3: вот новый рот.
4: лицо и уши также переместились — простой, но эффективный способ продвинуть реалистическое движение. Дрю начинает с энтузиазмом, так что вы можете представить, как движется все его лицо; рот открывается, подбородок, уши и брови тоже двигаются.
5: и вот простая анимация головы, двигающаяся вниз и возвращающаяся. Это создает впечатление, что подбородок переместился.

Анимация: обмен символами

У вас есть ярлыки, чтобы вы могли видеть, где и когда вам понадобятся новые рты. Пройдите вдоль слоя «рот» каждого персонажа и поместите новый ключевой кадр (F6) всякий раз, когда вы думаете, что форма рта изменится. Это может быть как просто, так и подробно, как вы решите (это может быть очень трудоемким процессом, если у вас нет какого-то инструмента, чтобы сделать это за вас).

Чтобы поменять рот, выберите экземпляр рта на сцене и щелкните его правой кнопкой мыши, чтобы вызвать контекстное меню. Выберите «Поменять символ», чтобы открыть браузер библиотеки:

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

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

Анимация: тяжелый труд

Во мне нет никакого смысла описывать, что теперь займет большую часть вашего времени анимации. Вы сталкиваетесь с сложной задачей синхронизации губ; прохождение всей длины анимации и сопоставление движения рта с речью. Есть автоматические инструменты для синхронизации губ JSFL, доступные для покупки , но для этой цели мы решаем эту проблему практически. Сделайте это для всех персонажей, на их соответствующих слоях, как можно быстрее. Используйте ваши метки в качестве справки и сделайте это примерно — вы можете вернуться и настроить синхронизацию.

Примечание: не забывайте, что вы работаете с фонетикой — формы рта, которые описывают подкаст , выглядят неправильно. Paadcast — так говорят жители США 🙂

Рот Таш и соответствующие ярлыки. Обратите внимание, что все слои заблокированы, кроме слоя рта Таш …

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

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

Добавьте следующую строку в actionScript вашего первого кадра:

 
 импорт flash.events.Event; 
 
 this.gotoAndPlay (1550); // введите номер кадра, к которому вы хотите перейти 
 
 if (! this.hasEventListener (Event.ENTER_FRAME)) 
 {

Вы можете либо ввести номер кадра, либо одну из меток, которые вы определили. Используйте его, чтобы пропустить сколько угодно анимации. Если вы больше не хотите пропускать какие-либо кадры, просто закомментируйте всю строку.

Режиссура: бесплатное движение

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

Мы пытаемся заставить трех человек, сидящих в чате, выглядеть визуально убедительными. Три статичных тела не будут особо интересными! В периоды тишины, например, играйте глазами. Привлеките зрителя и представьте персонажей, поворачивающихся лицом к «камере». Пусть они реагируют на то, что говорят другие; взгляды согласия, беспорядка и т. д.

Мало кто разговаривает, не используя свои руки и руки, поэтому оживите там еще какое-то движение.

Дрю представляет своих гостей, выделенных и более визуально привлекательных, добавив указательный палец.

Преувеличенное движение и выражение, предложенные Джорданом со словами «Drou — ght».

Таш также смотрит прямо на Джордана, когда он наклоняется в ..

Режиссура: Тонкости

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

Вот пример. Приблизительно через 1 минуту Дрю берет на себя инициативу и останавливает Таш на своих треках (это не так плохо, как я только что это озвучил!) Чтобы подчеркнуть это «прерывание», мы сделаем так, что Таш слегка опешил, длительное мигание:

Таш, болтаю, все внимательны.

Дрю вставляет, глаза поворачиваются к зрителю в поддержку.

Таш остановилась, закрыла рот и полностью закрыла глаза …

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

Режиссура: художественная лицензия

Конечно, то, что происходит, когда эти три человека сидят в чате, полностью зависит от нас. Чтобы разбить отснятый материал, мы можем даже ввести дополнительные действия и использовать дополнительные звуковые эффекты. Небо — это предел — это говорит о том, что я придумал что-то более захватывающее, чем Таш, пьющая чашку кофе …

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

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

Сопутствующее питьевое движение очень тонкое, но обратите внимание на пару ключевых аспектов, которые помогают ему в этом:

1: форма рта (очевидно) изменяется.
2: Таш закрывает глаза, когда она пьет ..
3: … и также поднимает брови (продолжайте, сосите последнее содержимое стакана, используя соломинку, вы обнаружите, что делаете то же самое).
4: точка поворота на мувиклипе руки находится на плече.

Анимация: мигающий черт

Мы собираемся использовать одну линию AS3, чтобы добавить анимации в глаза наших персонажей, заставляя их моргать случайным образом. Некоторое время назад я рассказал об этом в « Быстром Basix: Случайное анимированное мигание» , но здесь я расскажу вам об этом.

У вас уже должен быть видеоклип для глаз каждого персонажа; моя не может быть проще, они всего лишь пара точек. Расширьте временную шкалу ваших видеоклипов и поместите «мигающее» состояние в конце каждого.

Глаза в моргшем состоянии в конце временной шкалы.

Анимация: мигающий скрипт

Добавьте последний слой к мувиклипу, назовите его «действия» или «а» (или что вы предпочитаете) и заблокируйте его. Выберите первый кадр и введите следующий фрагмент на панели действий («Окно»> «Действия»):

 
	 gotoAndPlay (UINT (Math.random () * totalFrames) +1);

Этот фрагмент отправляет точку воспроизведения в случайный кадр по временной шкале «глаза». Поэтому в некоторых случаях состояние мигания достигается быстро, иногда это занимает больше времени. Каждый из наших трех персонажей теперь будет мигать с совершенно случайными интервалами. Для подробного объяснения того, как этот фрагмент делает то, что он делает, ознакомьтесь с Quick Tip .

Теория: не повторяйся

Предупреждение: на этом шаге я буду ссылаться на Дрю и Дрю . Это может сбить с толку .. Тем не менее, давайте поговорим о повторяющейся анимации.

Никогда не пиши одно и то же дважды.

Дрю Кеппл

Эта цитата была сделана во время учебника Dru’s AS3 101: Функции со ссылкой на принцип программирования DRY. Не повторяйте себя . Следует признать, что он обсуждает, почему повторяющиеся наборы действий в программировании должны быть объединены в одну функцию, а затем повторно использованы, но идея в равной степени применима к нашей ситуации.

Нет смысла анимировать одно и то же движение снова и снова. Анимируйте соответствующую последовательность один раз, оберните ее как мувиклип, а затем используйте экземпляр мувиклипа, когда вам снова понадобится это движение.

Анимация: петля Дрю

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

Не смотрите на это слишком долго ..

Анимация: подготовьте свою последовательность

Есть много способов подойти к этому, не стесняйтесь применять свой собственный конкретный рабочий процесс или просто следовать. Подготовьте последовательность на главной временной шкале. Выберите все необходимые кадры (в нашем случае мы возьмем каждый из слоев Drew во время этой последовательности), скопируйте все кадры и перейдите Вставить> Новый символ … или F8, чтобы создать новый мувиклип. Теперь вставьте все кадры и наблюдайте, как слои дублируются идеально.

Простой анимированный смех; каждый символ повторяет два состояния.

Вы можете выбрать все соответствующие кадры на главной временной шкале и «преобразовать в мувиклип», чтобы достичь аналогичного результата, но слои не будут сохранены. Вы получите все свои объекты на одном слое в правильном порядке отображения.

Анимация: готовая последовательность

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

Пока он посмеивается, все активы Дрю удаляются и заменяются смешным видеоклипом.

Анимация: голова Джордана

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

Лук, снимающий шкуру с временной шкалы, может выделить недостатки в движении.

Опять же, вы заметите полное отсутствие анимации здесь, они не нужны. Каждый из символов в голове Джордана движется очень слабо всего пару раз. Глаза закрыты, легкое скатывание головы при наклоне вниз и окончание. Это выглядит довольно грубо, но вы будете удивлены, насколько эффективно это окажется.

Примечание: может оказаться полезным разместить stop(); команда на последнем кадре этой последовательности — вы не хотите, чтобы он зацикливался на основной временной шкале.

Анимация: повернуть назад

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

Нажмите правой кнопкой мыши на видеоклип Джордана, поворачивающего голову (в библиотеке или на сцене), и выберите «Дублировать символ». Дайте ему подходящее имя, например «jordanHeadTurnRight».

Введите временную шкалу для этого нового мувиклипа и выберите все кадры на всех слоях. Затем перейдите в «Модификация»> «Временная шкала»> «Обратные рамки». Удивительно, но это перевернет все выбранные вами кадры. Теперь у вас есть видеоклип, в котором Джордан поворачивается лицом к лицу с Дрю.

Исполнение: Экспорт

Эта анимация предназначена для трансляции интернет-видео, и поэтому мне нужно вывести результат в формате видео. Shift + F12 опубликует .swf для вас, или .exe, или .app, но как насчет .mov? Ранее мы уже рассматривали экспорт QuickTime в Activetuts + , но здесь приведено краткое изложение того, что вам необходимо принять во внимание.

Во-первых, не ожидайте, что Flash будет экспортировать файл точно по длине вашей анимации; вам придется определить длину вручную. Если вы оставите экспорт QuickTime на свои собственные устройства, он создаст файл ровно в 1 кадре, поскольку это длина временной шкалы сцены 1 . Начиная с CS3 мы можем включать вложенные фильмы, эффекты, достигнутые с помощью ActionScript и так далее, но, как я уже сказал, вам нужно будет нажать «запись» и оставить процесс экспорта запущенным в течение определенного времени.

Выяснить, как долго ваша анимация длится легко, время ! В качестве альтернативы вы можете рассчитать истекшее время, разделив общее количество кадров на частоту кадров (в этом случае примерно 3300 кадров / 30 кадров в секунду = 110 секунд, 1 минута 30 секунд). Когда у вас есть эта информация, и, если вы закончили анимацию, перейдите в Файл> Экспорт> Экспорт фильма. Введите имя файла назначения, выберите формат (QuickTime) и нажмите Enter, чтобы открыть диалоговое окно «Настройки экспорта».

На скриншоте выше заметны размеры рендеринга; убедитесь, что они соответствуют вашей сцене, если вы не хотите, чтобы биты были отрублены. Если они неверны, изменение размеров возможно с помощью кнопки «QuickTime Settings…». Кроме того, как уже говорилось, я решил прекратить экспорт по истечении определенного времени, в данном случае это 1 минута 30 секунд (в формате 1:30 ).

Нажав кнопку QuickTime Settings…, вы получите доступ к множеству других опций для настройки звука и зрения, но настройки по умолчанию подходят для наших нужд. Идите вперед и нажмите «Экспорт».

Это займет пару минут …

После завершения Flash экспортирует .mov версию вашей анимации!

О дорогой: но …

Flash не может обрабатывать экспорт видео. Не правильно. Это просто не может. Ваш готовый .mov будет чертовски хорош, но вы заметите, что звук постепенно теряет синхронизацию с анимацией. При анимации продолжительностью 3 минуты звук, скорее всего, будет идти вперед примерно на 1 секунду. Вы можете найти это тривиальное количество, в зависимости от вашей анимации это может быть незаметно, но в отношении синхронизации губ есть хороший шанс, что вы заметите.

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

Если хотите, посмотрите окончательный Flash-экспорт анимации () и сравните его с готовой статьей. Графика кредитов должна появиться на экране после самой последней ноты музыки. Уже поздно.

К сожалению, мало что можно сделать, не заплатив за решение; экспорт Flash Quicktime не достаточно хорош, и вы не сможете загрузить анимацию .swf ни на один из стандартных веб-видеоканалов. Adobe также не предоставляет альтернативный метод для преобразования .swf в видео; Media Encoder не может обрабатывать файлы .swf, After Effects не может взять файл .swf и вывести видео. Странная ситуация

Наиболее распространенные варианты следующие:

Воспроизведите анимацию и сделайте скриншот. Будьте готовы потерять качество, однако.
Экспортируйте анимацию в виде последовательности .png (стопку изображений), разместите их на временной шкале в After Effects (или аналогичной программе для редактирования видео) и добавьте звук отдельно.
Оплатите сторонний инструмент для конвертации .swf (обычно до 100 долларов).

К сожалению, ни один из этих вариантов не является захватывающим. Я использовал конвертер SWF в видео от Sothink (для Windows), который является одним из миллиона подобных приложений, иллюстрируя зияющую дыру на рынке, оставленную Adobe. И если вы надеетесь воспользоваться одним из бесплатных пробных предложений, не удивляйтесь, когда ваша анимация Quicktime украшена большим водяным знаком.

Это неудовлетворительное завершение процесса, но я считаю, что важно подчеркнуть его.

Вывод: это упаковка!

Вы сделали! Вы запланировали, настроили, выполнили и опубликовали полную анимацию, готовую к трансляции видео в Интернете! Я надеюсь, что после этого вы узнали кое-что о принятии решений и технических основах Flash-анимации. Анимация не должна быть сложной, чтобы быть привлекательной, и, как показал Рикки Жерве, даже простой диалог может стать главным анимационным развлечением. Спасибо за прочтение 🙂