Лекції з дисципліни "Веб-дизайн"

Лекція 8. Анімація, звук і відео у Веб

Бурхливий розвиток Інтернет технологій надав широкі можливості для застосування у веб-сторінках різноманітних мультимедійних елементів - анімації, звуку, відео. Величезний потенціал «пожвавлення» дизайну можна реалізувати в багатьох елементах: від простих анімованих  GIF чи Flash-зображень до відео роликів із звуком і рухом.

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

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

GIF-анімація

Анімація з використанням формату GIF (Graphic Interchange Format) є найпростішою в реалізації і достатньо популярною в Інтернет.

Анімовані GIF-зображення працюють як традиційна покадрова анімація, яку застосовують у мультфільмах. Кожна GIF-анімація містить певне число кадрів, де кожен кадр є частиною анімації, також задаються параметри, які дозволяють регулювати швидкість і тривалість анімації. Програма, за допомогою якої створюється GIF-анімація (PhotoShop, ImageReady), зберігає кадри та відмічені опції в GIF-файлі,  а браузер інтерпретує задані параметри  і відтворює анімацію, створюючи зоровий образ руху.

Флеш-анімація

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

Flash дозволяє створювати повноцінну анімацію з вбудованим звуком і інтерактивністю при відносно невеликих розмірах файлу. Невеликі розміри файлів Flash продиктовані використанням в основному векторних зображень, які описані математичними формулами.

Векторні зображення, які збережені у Flash-анімації, позначаються як SVG-зображення, або векторна графіка, що масштабується (Scalable Vector Graphics). Розміри SVG-зображень можна змінювати (робити їх більшими або меншими) під час відтворення анімації без втрати якості зображення і вони завантажуються швидше, ніж традиційні JPEG- або GIF-зображення. Отже, можна створювати файли складної Flash-анімації, які швидко завантажуються і відтворюються на комп'ютері відвідувача.

Використання Flash для оформлення сайту

Існує як мінімум три підходи до створення сайтів з Flash:

•Створення флеш-сайту, який є абсолютно цілісним: всі Flash-об'єкти в ньому завантажуються перед початком роботи сайту.

•Створення флеш-сайту з використанням  HTML або текстових фрагментів, які будуть підвантажено за потребою

•Створення традиційного HTML сайту з окремими фрагментами Flash.

Flash-елементи сайту

•Інтро — це невелика заставка, яка відображається перед входом до сайту або у верхній частині сторінки. Як правило, розміщення інтро виділяє сайт серед інших та завдає відповідний настрій для відвідувача. Часто використовується для іміджевих сайтів (спеціалізовані чоловічі або жіночі портали, сайти косметологічних лікарень, салонів краси, перукарських або нічних клубів).

•Динамічні випадні меню і анімовані кнопки пожвавлюють дизайн, проте, використовуючи їх, важливо знати міру і не перевантажувати сайт. На сьогодні багато динамічних функцій можна реалізувати за допомогою CSS і JavaScript, що є кращим і для розробника і для браузера.

•Лічильники, годинник, календарі і власне інформери виглядатимуть набагато краще, якщо їх зробити із застосуванням Flash-технологій. Загальний розмір інформеру (графіка та програмний код) при цьому є доволі малим.

Технології Flash добре справляються з оздобленням сайту, але на тепер ця технологія є дещо застарілою і завданням розробників HTML5 та CSS3 є створення гідної альтернативи для втілення динамічних елементів сайту.

Звук в Інтернет

Звук, що супроводжує сайт допомагає «задати настрій» аудиторії і підсилити враження відвідувачів. Продуманий звуковий супровід допоможе відвідувачам сайту отримати максимум вражень від сторінки і утримати їх на сайті. Веб довгий час був безмовним середовищем, але на сьогодні звук є дуже популярним.

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

Наприкінці 1996 року компанія RealNetworks створило першу версію RealAudio, де було застосовано «потокову» технологію, що дозволяє браузерам завантажувати і програвати звукові файли прямо на комп'ютері відвідувача. Технологія потокового відтворення дозволяє відтворювати музику або мову у той час, поки браузер продовжує підвантажувати файл.

З RealAudio конкурує QuickTime компанії Apple, який функціонує подібно до RealAudio. На багатьох сайтах використовуються обидва формати — і RealAudio, і QuickTime — і більшість користувачів доставляють відповідні плагіни до своїх браузерів.

З часом, технології розвиваються, і веб-розробники розуміють, наскільки великою є роль звуку разом з рештою вмісту в створенні настрою і утриманні уваги відвідувача. Використання звуку внесло зміни до дизайну і конструкції сайтів. Наприклад, тепер на деяких сайтах ведеться радіомовлення (webcast — співзвучно до broadcast - віщати, передавати теле- або радіосигнали). Тисячі сайтів в Веб віщають в прямому ефірі. Вебcast широко використовують - від музики до прямих трансляцій президентських мов і спортивних ігор.

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

Подібно до графічних файлів, аудіофайли теж мають свої власні формати. Загальноприйнятими форматами звукових файлів, які добре працюють на платформі Windows є формати WAV, AU, SND, МРЗ і MIDI. На платформі Macintosh застосовують формати AIF, AIFF, SND, AU, МРЗ і MIDI. Деякі з форматів (AU, SND, МРЗ і MIDI) є універсальними і можуть використовуватися як в Windows, так і в Macintosh.

Відео на Веб-сторінці

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

Відео файли знаходять в Інтернеті ряд особливих застосувань:

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

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

•Демонстраційні ролики є кращими за стаціонарні фотографії і допомагають потенційним покупцям дійсно побачити товар. Маркетингові сайти, такі як http://www.toyota.com, надають покупцям легкових і вантажних автомобілів можливість оглянути автомобіль за допомогою програм віртуальної реальності, наприклад, програми моделювання віртуальної реальності компанії Apple (www.appie.com).

Віртуальні екскурсії

Віртуальної екскурсії є доволі ефективним способом подачі інформації і надання відвідувачам можливості ознайомитися з вмістом.

Однією з технологій створення віртуальної реальності в Інтернеті є панорамні зображення. Компонентами цієї технології виступають панорами і об'єкти, які об'єднуються в сцени. Перегляд зображення може здійснюватися за допомогою браузерів, доповнених компонентами, що підтримують цю технологію, або спеціального програвача, наприклад QuickTime VR.

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

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

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

Приклади віртуальних екскурсій:

•Мандрівки по парках, дорожках, студентських містечках, спортивных стадионах

•Відомі музеї

•Прогулянка під водою, Подорож Амазонкою, Прогулянка по Уистлеру

•Галерея цікавих місць

•Секретні Двері