Веб-дизайнери - люди творчі й креативні. А тому навіть не дивно, що при вході на який-небудь сайт нас зустрічають метелики, що пурхають, літаючі слоники (так, є й такі!), смішні чоловічки... Знайти своє втілення всі ці чудеса людської думки змогли завдяки технологіям flash- і gif-анімації для веб.
А що таке flash- і gif-анімація? Давайте докладніше зупинимося на кожній з них.
Gif-анімація
Gif-Анімація - різновид анімації, який заснований на можливості стандарту графічних файлів gif зберігати кілька картинок в одному файлі. Ці картинки утворюють кадри - при їхній послідовній зміні й утворюється анімаційний ефект. Створити анімаційний ролик у форматі gif нескладно. Досить часто для цих цілей використовують графічний редактор у комбінації з програмою-аніматором.
Принцип створення gif-ролика такий же, як і принцип створення мальованої анімації. Спочатку в графічному редакторі створюється зображення, потім у програмі-аниматорі - кадри анімації, які містять змінене зображення. Далі ці кадри вибудовуються в певній послідовності, для кожного кадру задається час показу - і ролик готовий. Для створення плавного й досить реалістичного ефекту руху досить установити час показу кожного кадру в інтервалі від 0,2 до 1 с.
Для використання у веб-проектах розмір анімаційного ролика не повинен перевищувати 25 кб і тому його необхідно оптимізувати. Розмір gif-файлу в значній мірі залежить від кількості використовуваних кольорів і суть оптимізації полягає в тому, щоб зменшити ця кількість. Відбувається це за рахунок видалення тих кольорів, які не впливають на якість відображення gif-ролика в веб-проектах. Така оптимізація дозволяє "упакувати" gif-файл.
Gif-Анімація використовується для різних цілей:
- для створення веб-банерів;
- для створення рекламних роликів;
- для створення анімованих написів, кнопок;
- для створення анімованих електронних листівок.
Flash-анімація
Flash-анімація - більш просунута технологія анімації у веб-проектах у порівнянні з gif-анімацією. Принцип дії той же - ефект анімації утворюється за рахунок послідовної зміни кадрів. Однак головна відмінність flash-анімації від gif-версії полягає в тому, що flash-анімація має векторний формат, а gif-анімація - растровий. Різницю між растровим і векторним форматами зображень легко зрозуміти на прикладі. Припустимо, необхідно зобразити відрізок лінії заданого кольору й товщини. Тоді файл растрового формату буде зберігати інформацію про всі точки, що складають цей відрізок у вигляді їх координат, а також інформацію про колір цих точок. А файл векторного формату буде зберігати дані про вектор, що утворює цей відрізок: координати його початку, напрямок, довжину, а також колір і товщину відрізка. Таким чином, векторний формат компактніше й тому надає більше можливостей для створення анімації у веб-проектах.
Flash-Анімація створюється в спеціальному редакторі. Найпоширеніші - Macromedia Flash і Adobe Flash. При створенні Flash-анімації в цьому редакторі немає можливості встановлювати для кожного кадру окремий час показу, на відміну від gif-анімації. Замість цього для всієї послідовності зображень задається швидкість зміни кадрів, однакова для кожного з них. Окремо слід згадати таку можливість створення flash-анімації як використання символів (Symbols). Ці символи діляться на три види: графіка (Graphic), кнопки (Button), кліпи (Movie Clip). Символи розміщаються в спеціальній бібліотеці та мають вбудовані типові функції (прозорість, кольорове затінення). Зручність застосування символів полягає в тому, що досить один раз створити символ (наприклад очі, що моргають) і далі використовувати його в різних місцях ролика або навіть в іншому ролику, не витрачаючи час на перемальовування того самого об'єкта декілька разів.
Сфера застосування flash-анімації широка. Дуже часто flash-анімація використовується для створення:
- flash-сайтів;
- презентацій;
- анімації кнопок, меню;
- візуалізації процесів і переходів по сайту;
- банерів;
- рекламних роликів;
- ігор;
- анімації логотипа;
- електронних листівок.
Таким чином, анімованні ефекти роблять сайт більш живим, інтерактивним, привабливим для користувача. Що вибрати? Простоту gif-анімації або більші можливості flash-технологій? Вибір звичайно ж за Вами. Однак якщо Ви вирішили додати flash- або gif-анімацію у свій веб-проект, пам'ятайте: чим більша "вага" сторінок, що завантажуються, сайту, тем довше триває процес завантаження, а користувачі Інтернет далеко не завжди терплячі.
Теги:
дизайн сайтів,
веб-дизайн,
анімація на сайті,
flash,
gif-анімація,
flash-анімація,
растрова графіка,
векторна графіка,
банер,
рекламний ролик,
інтернет-реклама |