Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Flash і GIF анімація в дизайні сайтів

Flash і Gif анімаціяВеб-дизайнери - люди творчі й креативні. А тому навіть не дивно, що при вході на який-небудь сайт нас зустрічають метелики, що пурхають, літаючі слоники (так, є й такі!), смішні чоловічки... Знайти своє втілення всі ці чудеса людської думки змогли завдяки технологіям flash- і gif-анімації для веб. А що таке flash- і gif-анімація? Давайте докладніше зупинимося на кожній з них.

Gif-анімація

Gif-Анімація - різновид анімації, який заснований на можливості стандарту графічних файлів gif зберігати кілька картинок в одному файлі. Ці картинки утворюють кадри - при їхній послідовній зміні й утворюється анімаційний ефект. Створити анімаційний ролик у форматі gif нескладно. Досить часто для цих цілей використовують графічний редактор у комбінації з програмою-аніматором.

Принцип створення gif-ролика такий же, як і принцип створення мальованої анімації. Спочатку в графічному редакторі створюється зображення, потім у програмі-аниматорі - кадри анімації, які містять змінене зображення. Далі ці кадри вибудовуються в певній послідовності, для кожного кадру задається час показу - і ролик готовий. Для створення плавного й досить реалістичного ефекту руху досить установити час показу кожного кадру в інтервалі від 0,2 до 1 с.

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

Gif-Анімація використовується для різних цілей:

  • для створення веб-банерів;
  • для створення рекламних роликів;
  • для створення анімованих написів, кнопок;
  • для створення анімованих електронних листівок.
Flash і 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, gif-анімація, flash-анімація, растрова графіка, векторна графіка, банер, рекламний ролик, інтернет-реклама