Ви бачите їх усюди. Анімовані фігури моргають, підстрибують або обертаються на екрані. Веб-дизайнери не просто випадково натрапили на ці прийоми. Вони створили набір інструментів, щоб контент виділявся, не ламаючи ваш браузер. Головні гравці? Анімовані GIF, динамічний HTML, Java, Shockwave та Flash. Кожен має свої сильні сторони. Кожен має свої недоліки. Ми розберемо, як вони працюють. Ми також подивимося, що чекає на них у майбутньому.
Війна за пропускну спроможність
Історія Інтернету коротка. Її еволюція швидка. Два фактори діють один проти одного. Автори хочуть створювати складний контент. Читачам потрібні швидкі завантаження.
У ранні дні “швидко” означало телефонні модеми. Розміри файлів мали бути крихітними. Складна графіка була розкішшю, яку могли дозволити собі мало хто. Ця суперечність змусила інновацій. Розробникам доводилося виявляти винахідливість. Їм потрібні були прийоми передачі багатих медіа вузькими каналами.
Візьміть анімацію Flash із статті про ядерне випромінювання. Це складна постать. Але вона укладається менш ніж у 7000 байт. Ось це ефективність. Ось як кожна технологія вирішує це завдання.
Анімовані GIF
Ранні дні веб-графіки та анімації
Веб не був би тим, чим він є, без союзу тексту та зображень. Ця інтеграція багато в чому спиралася на бітмапні файли — формат, у якому задається колір кожного окремого пікселя зображення. Концепція проста. Але є нюанс: такі файли можуть швидко розростатися у розмірі. Щоб сторінки завантажувалися без того, щоб користувачі годинами дивилися на порожні екрани, розробники звернулися до методів стиснення. Саме тому JPEG та GIF домінували в ранньому вебі.
Але статичні зображення розповідали лише половину історії.
Якщо анімація – це швидка послідовність нерухомих кадрів, логічним наступним кроком стало об’єднання цих бітмапних файлів у ланцюжок. Браузер циклічно перемикався між ними. Так з’явилася GIF-анімація, також відома як GIF89. Це був перший справжній сплеск руху у Інтернеті. Вона швидко здобула популярність. І залишається популярною донині, на краще чи на гірше.
Чому перемогли GIF (і чому вони обмежені)
Привабливість GIF була очевидною. GIF-анімація створювалася неймовірно просто. Більшість браузерів підтримували її “з коробки”. Вам не були потрібні складні плагіни або пропрієтарне програмне забезпечення. Якщо ви використовували Windows, можливо, ви використовували GIF Construction Set. Користувачі Mac тяжіли до GifBuilder. Робочий процес був лінійним.
- Зберіть окремі біт-мапні кадри.
- Розташуйте їх у програмному забезпеченні у потрібному порядку.
- Завантажте файл.
Ось і все. Ви прописуєте тег так само, як для статичного зображення.
Однак ця простота має жорстку межу. Головний недолік розмір файлу. Оскільки кожен кадр є повноцінним бітмапним зображенням, додавання нових кадрів збільшує вагу файлу. З чотирма простими кадрами можна легко обійтися — вони передаються без проблем. Але якщо ви дійдете до двадцяти кадрів? Розмір файлу часто стає непідйомним для звичайних інтернет-з’єднань того часу.
Є й проблема зі змістом. Двадцяти кадрів замало плавного руху. У кіно використовується щонайменше 24 кадрів на секунду. Анімовані GIF змушують вас робити різкі стрибки між станами. В результаті рух виходить рваним. Неприродним. Воно позбавлене плавності справжнього відео. Це обмеження видно практично у будь-якій ранній веб-анімації. Вона багатофункціональна. Привертає увагу. Але далеко не кінематографічна.
GIF-файли підходять для простих циклів чи швидких візуальних прикрас. Однак вони не здатні передавати складні розповіді. Найгірше, вони позбавлені звуку. Веб-дизайнери швидко уперлися в стелю. Користувачі бажали руху. Вони хотіли звуку. GIF не могли цього забезпечити.
Основна проблема анімації у форматі GIF – роздування розміру файлу. Кожен кадр у фільмі значно збільшує обсяг завантаження. Це неефективно. Це повільно.
Динамічний HTML
Рішення? Перестати передавати кадри. Просто передайте одне зображення. Потім скажіть комп’ютеру, щоб перемістити його.
Подумайте про курсор миші. Ви не завантажуєте нове зображення на кожен міліметр переміщення вказівника. Браузер обробляє цей рух локально. Динамічний HTML (dHTML) намагається відтворити цю ефективність у Інтернеті.
Початкові веб-сторінки були статичними. Мова гіпертекстової розмітки (HTML) визначає структуру, а не поведінку. Після завантаження сторінка просто висіла. Мертва. Нерухомість.
Дизайнерам це не подобалося. Вони хотіли динамічний контент. Контент, який змінювався після завантаження сторінки. На сцену вийшов dHTML.
Це не одна розробка. Це комбінація мов програмування, таких як JavaScript, що звертаються до об’єктної моделі документа (DOM). DOM – це внутрішня карта сторінки у браузері. Він керує кожним елементом.
Більшість сучасних браузерів надають доступ до DOM скриптам. Скрипт може захопити елемент. Змініть його колір. Перемістити його позицію.
DHTML не створювався з урахуванням анімації. Він створений для маніпуляції елементами сторінки. Анімація стала приємним побічним ефектом.
Скрипт може інструктувати браузер постійно оновлювати координати зображення. Зображення ковзає по екрану. Якщо це робити з кількома зображеннями, виходить примітивний фільм.
Це працює у більшості браузерів без додаткових завантажень. Але це примхливо. Код, який працює в Netscape, може зламатися в Internet Explorer. Створення dHTML-анімації вручну – болісний процес. Вам потрібні інструменти. Macromedia Dreamweaver (і аналогічні програми) генерують правильний код скриптів за вас.
Навіть із інструментами dHTML обмежений. Він переміщує статичні зображення. Він плавніший, ніж GIF, але менш ефективний для складних сцен. Він є стелею того, що браузер може робити нативно.
Щоб піти далі, розробникам знадобилося щось більш важке. Щось зовнішнє.
Java-аплети
На сцену виходить Java.
Java – це універсальна, орієнтована на мережу мову. Він дозволяє програмістам створювати завантажені програми. Але це автономні програми. Це аплети.
Аплети запускаються всередині браузера. Вони вимагають віртуальну машину (VM). Віртуальна машина діє як перекладач. Вона бере код Java і перетворює його на інструкції, зрозумілі вашій конкретній операційній системі (Windows, MacOS, Unix).
Віртуальна машина насправді є плагіном. Якщо у вас її немає, анімація не працює.
Java-аплети пропонують гнучкість. Ви не обмежені бітовими кадрами. Ви можете малювати векторні фігури на льоту. Це зберігає розмір керованих файлів. Це дозволяє забезпечити інтерактивність. Користувач може клацнути, перетягнути або навести курсор, а анімація буде реагувати в реальному часі.
Це дуже потужно. Це кросплатформно. Це також залежність. Якщо браузер користувача не має віртуальної машини Java, він нічого не побачить.
Для веб-дизайнерів кінця 90-х та початку 2000-х років це було передовим краєм. Ви жертвували простотою використання заради можливостей. GIF були простими, але дурними. dHTML був нативним, але обмеженим. Java була складною, але потужною.
Вибір залежав від аудиторії. Чи були у них встановлені плагіни? Чи дбали вони про час завантаження? Чи просто їм хотілося, щоб сайт виглядав вражаюче?
Компроміс між продуктивністю та насиченістю визначав веб протягом багатьох років. Ми досі намагаємося знайти баланс сьогодні.
Початок 90-х змінив усе. Несподівано сайти почали створювати все. Це вже були не лише технічні ентузіасти. Вони хотіли додавати мультимедіа на свої сторінки. Звук. Відео. Складна графіка.
Браузери не могли обробляти все це із коробки. Тому розробники виявили креативність. Вони створили браузерні плагіни.
Представте плагін як допоміжну програму. Він працює разом із вашим браузером для читання певних типів файлів. Ці програми невеликі. Їх можна швидко завантажити. Вони виконують функції, які звичайні браузери просто не підтримують.
Як насправді працює потокове відео
Раннє веб-відео сильно спиралося на модель плагінів. Ви просто дивилися файл. Ви взаємодіяли із спеціалізованим плеєром.
Дизайнери використовували скрипти DHTML для перевірки вашої конфігурації. Чи був у вас потрібний плагін? Якщо ні, браузер виводив повідомлення. Воно вказувало, звідки саме його треба завантажити.
Цей процес був стомлюючим. Він тривав час. Це була серйозна перешкода для користувачів.
Але якщо у вас був плагін? Відбувалася магія. Браузер почав відтворювати фільм ще до того, як файл повністю завантажувався.
Як? За рахунок стиснення та потокової передачі.
Стиск спрощує дані зображення. Це зменшує розмір файлів. Потокова передача починає відтворення у процесі завантаження. Такі плеєри, як QuickTime та Media Player, використовували цей підхід. Вони показували послідовність статичних зображень. Подібно до анімованого GIF, але швидше. І зі звуком.
Але була каверза. Повільне з’єднання псувало враження. Файли завантажувалися нескінченно довго. Або якість виглядала жахливо.
Домінування векторної анімації
Коли йдеться про ранню веб-анімацію, два імені правлять балом. Flash та Shockwave. Обидва були розроблені компанією Macromedia.
Це були векторні 2D-плеєри анімації.
На відміну від растрових зображень вектори використовують математичні рівняння. Це робило їх масштабованими. Вони залишалися чіткими за будь-якого розміру. Вони завантажувалися неймовірно швидко через dial-up з’єднання.
Ця технологія забезпечувала роботу більшої частини інтерактивного Інтернету. Анімація, розваги з бумерангом з нашої попередньої статті? То був Flash. То був не просто відеофайл. То був код. Він був легенький. Він був усюди.
Macromedia побудувала імперію на двох форматах, які по суті були спорідненими: Flash та Shockwave. Один став стандартом для веб-анімації; інший виконував важку роботу зі створення складнішого інтерактивного контенту. На відміну від громіздких файлів RealPlayer або QuickTime, які відкривалися в окремих вікнах, ці формати працювали всередині сторінки. Вони були інтерактивними. Ви не просто дивилися; ви кликали. Плеєр Shockwave не просто відтворював фільм. Він зчитував введення користувача та повідомляв браузеру, як реагувати.
Анатомія швидкості
Чому ці файли завантажувалися так швидко? Це було магією. То була математика.
Більшість GIF-анімацій ґрунтуються на растрових зображеннях. Кожен піксель зберігається індивідуально. Якщо у вас є Синє небо, це тисячі окремих записів пікселів. Файли Flash та Shockwave в основному векторні. Замість зберігання пікселів програмне забезпечення зберігає інструкції. Пряма лінія – це не серія крапок. Це опис: кут, координата, довжина.
Опис зображень таким чином дозволяє програмі зберігати широкі ділянки зображення – ділянки, які можуть складатися із сотень пікселів у растровому файлі – у вигляді кількох фігур.
Цей підхід різко зменшує розмір файлу. Навіть коли використовувалися растрові зображення, веб-майстри могли стискати їх. Вони переміщалися по екрану шляхом, подібно до анімації в dHTML, що тримало загальний обсяг даних на низькому рівні. Однак більшість файлів Flash були чисто векторними. Це робило їх виключно швидкими для завантаження.
Є ще один трюк у рукаві: проміжні кадри (tween).
Аніматорам не потрібно малювати кожен кадр. Програмне забезпечення обчислює геометричні зміни між ключовими кадрами. Воно заповнює проміжок. Це займає набагато менше місця, ніж зберігання кожного кадру як унікального растрового зображення. Математика перебирає основну роботу.
Поточна передача: почніть, перш ніж закінчите
Справжнім нововведенням було не лише те, як було структуровано файли. Це було те, як вони передавалися інтернетом. Файли Flash і Shockwave є потоковими.
Вам не потрібно чекати повного завантаження, щоб розпочати відтворення. Браузер починає програвати «фільм», поки решта все ще завантажується. Подумайте про це як про веб-сторінку: сервер спочатку надсилає текст, а потім зображення. Веб-сайт на Flash може надіслати вступний фільм, поки основний контент завантажується у фоновому режимі.
Веб-майстри можуть запрограмувати файл так, щоб відтворення починалося після завантаження певного відсотка файлу. Передача налаштована так, що кожен сегмент arrives до того, як плеєру він знадобиться. Це той самий механізм, що лежить в основі потокового відео.
Монополія зручності
Flash переміг не тільки тому, що він був добрий. Він переміг, тому що Macromedia зробила його повсюдним.
Плагіни поставлялися разом із основними браузерами та операційними системами. Якщо його не було, установка відбувалася у фоновому режимі. Вам не потрібно було закривати браузер. Вам не потрібно було сидіти і чекати на тривалу процедуру. Програмне забезпечення для створення цих файлів було дорогим. Але ж плеєр? Безкоштовний.
Оновлення були безболісними. Macromedia розробила плеєри так, щоб вони адаптувалися до майбутніх змін. Користувачам не потрібно було робити нічого, окрім завантаження невеликого файлу. Якщо веб-сайт виявляв, що у вас стара версія, ваш браузер попереджав вас і направляв на сторінку завантаження. Файли були настільки маленькими, що процес оновлення займав майже миттєво.
Мережевий ефект
Кожен формат анімації має свої сильні та слабкі сторони.
Тим не менш, багато веб-майстрів вибирали Flash, навіть коли інший формат міг бути технічно переважаючим. Чому? Тому що вони знали, що більшість користувачів вже мають цю можливість. А якщо ні, то одержати її було тривіально.
Універсальність Flash та Shockwave створила петлю зворотного зв’язку. Більше веб-майстрів включали цей контент. Більше користувачів стикалися із ним. Прийняття зростало. Йшлося вже не лише про технологію. Йшлося про шлях найменшого опору.
Вони походять із однієї компанії. Macromedia створила обидва. Вони покривають схожу сферу застосування. Однак розрив між Flash та Shockwave – це не просто питання брендингу. Це архітектура. Це історія. Вам потрібно знати різницю, якщо вам важливо, як завантажується ваш контент або що саме ви можете з ним побудувати.
Корінна причина? Історія походження.
Director, двигун, що лежить в основі Shockwave, старший за сучасний веб. Він створений для CD-ROM. Важкі дані. Висока точність. У міру еволюції Інтернет Director оновлювався. Він навчився працювати у мережі. А Flash? Flash народився для браузера Він еволюціонував з Future Splash Animator. Macromedia адаптувала його до телефонних ліній. Тоді королем був dial-up (виділена лінія). Швидкість мала вирішальне значення.
Ця історія створила роздвоєну природу технологій.
Flash пріорітізував швидкість. Shockwave пріорітізував потужність.
Який формат виграє за швидкістю та сумісністю?
Якщо ви запитуєте, який формат має кращу веб-сумісність, Flash впевнено тримає корону.
Подумайте про плагіни. Flash? Встановлено більш ніж 90 відсотків користувачів інтернету. Shockwave? Трохи менш як 60 відсотків. Це величезний шматок вашої аудиторії залишається в невіданні, якщо вони не встановлять програвач Shockwave.
Час завантаження дотримується тієї ж логіки.
Файли Flash легені. Вони швидко завантажуються. Файли Shockwave важче. Їм потрібно більше часу для завантаження. У ранні дні Інтернету очікування завантаження кліпу протягом десяти секунд було звичайною справою. Сьогодні це неприйнятно. Flash інтуїтивно розумів це.
Але швидкість не все.
Де Shockwave перевершує Flash
Не списуйте Shockwave з рахунків. Це потужніший інструмент.
Він універсальніший. Бажаєте складні ігри? Shockwave. Чи потрібна глибока інтерактивність? Shockwave. Складна анімація, якій не важливий час завантаження? Shockwave.
Існує також ієрархія можливостей. Ви можете імпортувати файл Flash у фільм Shockwave. Це працює нормально. Спробуйте протилежне? Не вийде. У плані можливостей Shockwave є батьківським форматом.
Потім є питання вартості.
Програмне забезпечення для створення Flash коштує близько 400 доларів. Director, призначений для Shockwave, коштує майже 1000 доларів. Для стартапу чи невеликої студії це суттєвий бар’єр. Flash був доступний. Director був для професіоналів.
Відкритий секрет: доступність вихідного коду
Ось деталь, яку більшість навчальних матеріалів пропускають.
Flash – це формат із відкритим вихідним кодом. Ви можете побачити, як він працює. Ви можете адаптувати його. Ви можете втручатися у внутрішню структуру. Shockwave використовує компільований формат файлів. Він закритий. Модифікувати його дуже складно. Якщо вам потрібно провести реверс-інжиніринг чи глибоку кастомізацію, Flash дає вам ключі. Shockwave зберігає їх у сейфі.
Як створювати фільми в обох середовищах
Обидва інструменти розроблені так, щоб бути напрочуд простими. Вони автоматизують тяжку роботу. Вам не потрібна ступінь у галузі комп’ютерних наук, щоб створити глобус, що обертається.
Робочий процес схожий, навіть якщо назви відрізняються. Ви виконуєте три дії:
- Створення та редагування зображень. Вихідні матеріали.
- Розміщення зображень по кадрам. Послідовність.
- Упорядкування кадрів у фільм. Підсумковий продукт.
Але ж інтерфейси? Цілком різні мови.
У Flash ви зберігаєте ресурси у бібліотеці. У Shockwave вони потрапляють у каст. Одне й те завдання. Різні назви.
Ви розміщуєте ці ресурси на сцені. Це те, що бачить користувач. Підсумковий висновок.
Для керування рухом ви використовуєте ключові кадри. Ви задаєте початкову точку. Ви задаєте кінцеву точку. Ви кажете програмне забезпечення заповнити проміжні значення. Flash називає область розташування тимчасовою шкалою. Shockwave називає її оцінкою (score).
“Якщо ви хочете, щоб глобус котився з одного боку екрану на інший, вам не потрібно анімувати кожен кадр. Ви просто вказуєте Flash, де глобус починає рух і де зупиняється.”
У цьому магія. Програмне забезпечення інтерполює рух. Воно виконує математичні обчислення. Ви просто ставите намір.
Коли вони об’єднаються?
Вони зближуються.
Кожне оновлення додає веб-можливості до Shockwave. Кожне оновлення додає універсальності у Flash. Розрив скорочується.
Зрештою, вони, мабуть, поєднаються в один всеосяжний формат. Він візьме найкраще з обох світів. Швидкість та потужність. Доступність та складність.
До того часу ви вибираєте, виходячи зі своїх обмежень.
У вас є з’єднання dial-up? Flash.
У вас бюджет у 400 доларів? Flash.
Вам потрібно сховати вихідний код? Shockwave.
Вам потрібно створити веб-гра рівня AAA? Швидше за все, Shockwave.
Йдеться не просто про уподобання. Йдеться про середовище. І середа продовжує розвиватись.
Флеш-фільм з нашої статті про паливні елементи.
Флеш-анімація з нашої статті про двигуни.
Перехід до інтерактивної 3D-графіки у Інтернеті
Двовимірна веб-анімація завжди була спрямованим досвідом. Дизайнер точно визначає, що ви бачите, кадр за кадром. Вона відбиває традиційні телевізійні мультфільми, де аудиторія пасивна. Тривимірна веб-графіка повністю змінює цю динаміку. Ви отримуєте контроль. Ви можете повернути модель. Ви можете запускати певні функції. У деяких випадках ви можете змінювати її фізичні розміри. Такий рівень взаємодії перетворює контент з того, що ви просто дивитеся на те, що ви досліджуєте.
Плагіни для браузерів та галузеві стандарти
Як і раніше 2D-інструменти, такі як Flash і Shockwave, перегляд 3D-графіки в Інтернеті вимагає плагіна для браузера. Декілька компаній вже вийшли на цей ринок. Viewpoint досягла певного успіху. NxView пропонує плагін безпосередньо зі свого веб-сайту.
У галузі також спостерігається велика консолідація. У липні компанії Macromedia та Intel оголосили про спільну розробку 3D-можливостей для Shockwave. Це партнерство використовує апаратні ресурси Intel і інфраструктуру мультимедійного плеєра Macromedia. Ціль ясна: зробити формат 3D-графіки Shockwave фактичним галузевим стандартом для веб-графіки. Користувачам не потрібне нове програмне забезпечення. Вони просто завантажать оновлення для своїх існуючих плеєрів Shockwave.
Адаптивне масштабування та управління полігонами
Продуктивність – головний бар’єр для 3D-графіки у Інтернеті. Технологія Shockwave вирішує цю проблему за допомогою масштабування. Вона адаптується до швидкості з’єднання користувача у реальному часі. Якщо у вас повільне з’єднання, плеєр завантажує модель з меншою кількістю полігонів. Полігони – це геометричні фігури, які поєднуються для формування 3D-моделі.
Це не просто компроміс; це функція. Ви втрачаєте деякі дрібні деталі. Але ви не втрачаєте чіткості зображення. Рух залишається плавним. Це гарантує, що користувачі з модемним підключенням або ранніми широкосмуговими з’єднаннями не будуть виключені з цього досвіду.
Електронна комерція та віртуальні примірювальні
Ця технологія відкриває нові можливості для онлайн-шопінгу. В даний час покупці покладаються на статичні зображення. Вони здогадуються про посадку та текстуру. 3D графіка дозволяє їм розглядати продукт з усіх боків. Це імітує досвід покупки у фізичному магазині.
Деякі сайти йдуть далі, пропонуючи «віртуальні примірювальні». Користувачі можуть створити 3D-модель власної статури. Потім вони можуть побачити, як різний одяг сидить на цьому конкретному аватарі. Це знижує невизначеність при онлайн-покупках.
Освітні програми та поглиблене вивчення
Освітні платформи значно виграють від переходу. Сайти, такі як How Stuff Works, вже опублікували статті із використанням 3D-графіки, створеної за допомогою NxView. Планується розробка більшої кількості контенту.
Ця графіка забезпечує ясність. Користувачі можуть розглядати двигун з будь-якого кута. Складається відчуття, що перед ними справді знаходиться справжній двигун. Це просторове розуміння сприяє кращому запам’ятовування та осмислення матеріалу.
Майбутнє веб-взаємодії
Ця технологія, ймовірно, революціонізує зовнішній вигляд та відчуття від інтернету. Вона слідує тієї ж траєкторії, що і статичні зображення та Flash-анімація. Інтернет продовжуватиме розвиватися з безпрецедентною швидкістю.
Високошвидкісні з’єднання стають більш поширеними. Це стимулює появу наступного покоління ідей анімації. Одна з концепцій полягає в тому, щоб зробити веб менш схожим на книгу і більш схожим на гру. Користувачі отримуватимуть доступ до інформації в інтерактивному 3D-світі. Інша ідея зробити його більш схожим на телебачення. Високоякісна анімація та відео домінуватимуть.
Зрештою, це залежить від того, що веб-дизайнери вирішать створити. Це також залежить від того, чого вимагають користувачі. Інтернет не статичний. Він рухається у бік чогось більш іммерсивного. Наступний крок – зрозуміти, як саме ці двигуни працюють зсередини.
