Знайомимося з веб-стандартами. Робота з аудіо. — Відео та історія створення

Всім привіт! Спеціально для тих, хто тільки знайомиться з веб-технологіями і новими веб-стандартами ми підготували вступний 15-хвилинний ролик, що розповідає про роботу з аудіо в інтернеті (HTML Audio і Web Audio).



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



Сподіваюся, ви вже подивилися ролик і розумієте, про що йде мова. Як ви могли помітити, у нас вийшла суміш скрайбинга (коли записується або імітуються малювання контенту рукою) і анімації. Нижче я розповім, як ми працювали над роликом.

Етап 1. Планування сценарію


Тут все досить просто:
  • Вивчаємо в цілому предметну область
  • Формуємо спільний план розповіді (в даному випадку — починаємо з історії, переходимо до пояснення, навіщо знадобився стандарт Web Audio, далі розповідаємо детальніше про сам стандарт).


Етап 2. Вивід вмісту

Всі зображення, яке ви бачили в ролику дійсно зроблено від руки. Я використовую Surface 3 Pro і додаток Mischief. Воно сфокусовано саме на «художніх» завданнях, підтримує роботу з шарами і дозволяє експортувати в растр або PSD.

Це один з найбільш тривалих етапів виробництва, тому що потрібно паралельно зробити багато вправ:
  1. Зануритися в технології — від вивчення вступних та оглядових статей (html5rocks та ін) до документації (MDN, MSDN) і самого стандарту. Тут важливо зрозуміти, як влаштована технологія і як це відображається в стандарті (наприклад, як групуються різні вузли аудиографа).
  2. На базі різних статей та пов'язаних матеріалів оцінити, чи є усталений переклад окремих термінів. Тут виявилася дуже до речі недавня стаття наших колег з Яндекса про теорію звуку.
  3. Придумати візуальну структуру розповіді і метафори для окремих блоків і елементів.
  4. Безпосередньо всі намалювати.


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



У нас, наприклад, з часом перемальовувалися окремі фрагменти на користь більш зрозумілого викладу. Хоча, мушу зазначити, що пояснювати API картинками завжди складно.

Примітка: окремо зазначу, що формування такого малюнка відразу зав'язується на деяку логіку анімації (див. третій і четвертий етапи), тобто це не просто художня творчість, а деякий розповідь, який на даному етапі можна промовляти усно, але далі він буде зафіксований. Також цікавий момент: в скрайбинг-відео, які ми дивилися в якості орієнтирів нам подобалися моменти, коли попереднє зображення з часом змінювалося, щось малювалося поверх і т. п. В нашому випадку реалізувати такі моменти допомогла робота з шарами.

Етап 3. Сценарій
Далі по картинці і якимось накиданнях тексту або фраз з голови пишеться текст, який далі буде озвучуватися диктором. Причому в разі скрабинг-відео і анімації в цілому важливо, щоб візуальний ряд відповідав мови. Ми обійшлися досить простим рішенням:
  • вся картинка розбивається на фрагменти,
  • окремим елементам зображення присвоюється номер,
  • у тексті розставляються номери елементів.


В Word це виглядає приблизно так:


Під 15-хвилинний ролик у нас вийшов 10-сторінковий документ з картинками, який передавався далі для начитки і як інструкція аніматорам. Також для уникнення помилок для англомовних термінів окремо приписувалося вимову.

У міру роботи над текстом (а це те місце, де фактично фіксується зміст) можуть вноситися дрібні правки в зображення. Наприклад, якщо стає зрозумілим, що під якусь важливу фразу не достатньо кількості графіки, то або треба скорочувати фразу, або додавати елементів у зображенні. В іншому випадку виникає негативний ефект, коли на екрані нічого не відбувається, а диктор не озвучує малюнок, а говорить щось від себе.

Правда, в нашому випадку не завжди вдалося все зробити в ідеальному вигляді. В блоці з фільтрами ви могли помітити, що відео-ряді просто з'являються назви фільтрів, а в озвучці дається пояснення, навіщо вони потрібні і що вони роблять. Тут зміни відбулися в тексті: у міру роботи над ним стало зрозумілим, що від простого перерахування фільтрів нічого не буде зрозуміло. Але в ідеалі і про кожен фільтр треба розповідати окремо, а ми робимо вступне відео, тому пішли на компроміс — злегка збільшити текст, але не ускладнювати графіком.

Зауваження. Так як ми розповідали про Web Audio, ми вирішили, що було б непогано додати поверх мовлення відповідні ефекти. Ви могли помітити це в останньому епізоді, де ми розбираємо приклад з графом. Відповідно, сценарій містив інструкцію для аудіо-режисера за додавання ефектів.

Етап 4. Анімація і озвучення
Тут в процес включається професійна команда (нам допомагали хлопці з BeaversBrothers) і відповідні інструменти (Adobe After Effects).

Нижче кілька скріншотів робочого процесу:






Через кілька годин візуалізації отримуємо готове відео, яке через кілька ітерацій набуває фінальний вигляд. А нам цікаво, що ви думаєте про такому форматі?

Що ви думаєте про цей формат контенту?

/>
/>


<input type=«checkbox» id=«vv71729»
class=«checkbox js-field-data»
name=«variant[]»
value=«71729» />
Відмінний формат вступного контенту, більше б такого
<input type=«checkbox» id=«vv71731»
class=«checkbox js-field-data»
name=«variant[]»
value=«71731» />
Краще прочитати текстову статтю на ту ж тему

Проголосувало 4 людини. Утрималося-2 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.