В Інтернеті розміщено величезну кількість файлів із готовими анімаційними зображеннями. Проте цікаво навчитися самостій но створювати рухомі картинки для прикрашення ними свого сайту. Одним із перших графічних форматів, що підтримує анімацію, став GIF. Цей формат дозволяє зберігати у файлі кілька зобра жень, які можуть відображатися почергово, як слайд-шоу або не великий фільм. На відміну від звичайного фільму, в якому швид кість відтворення задана кількістю кадрів за секунду, у GIF-файлі зберігаються параметри, що визначають, у який спосіб і як довго буде демонструватися кожна картинка. GIF-зображення можуть бути різного розміру, розміщуватись у потрібних позиціях екрана й відтворюватися незалежно від інших. Розглянемо процес створення GIF-анімації у програмах Adobe Pho toShop та Adobe ImageReady. Приклад 3.4. Створення простої GIF-анімації Створимо нескладну анімацію, що складалася б лише з двох кад рів, які імітують політ птаха. На рис. 3.12 зображено перший та другий кадри майбутнього рухомого малюнка, що зберігаються відповідно у файлах 1.jpg та 2.jpg.
Відкрийте програму Adobe PhotoShop. Простежте, щоб відобра жалися палітри Tools (Інструменти) та Layers (Шари). Якщо їх немає, виберіть назви палітр у меню Window (Вікно). Створіть новий файл за допомогою команди File • New (Файл • Новий). У діалоговому вікні , що відкриється, задайте такі параметри зображення: Width (Ширина) і Height (Висота) — такі самі, як у кадрів 1.jpg та 2.jpg, Mode (Режим) — RGB Color, Background Contents (Заповнення тла) — Transparent (Прозоре). Виконайте команду File • Open (Файл • Відкрити) і відкрийте файли 1.jpg та 2.jpg. Використовуючи інструмент Move (Перемістити), почергово пе ретягніть зображення файлів 1 .jpg та 2.jpg у вікно створеного малюнка. Матимете у ньому три шари: Layer 1 (Перший) — по чаткове зображення. Layer 2 (Другий) — малюнок 1 .jpg та Layer З (Третій) — 2.jpg. Усі ці шари відображені в палітрі Layers (Шари) (рис. 3.13).
Використовуючи кнопку Edit in ImageReady (Редагувати в Ima geReady), розташовану внизу палітри Tools (Інструменти), ім портуйте отримане тришарове зображення у програму Adobe ImageReady, Простежте, щоб були відкриті палітри Tools (Ін струменти), Layers (Шари) та Animation (Анімація). У палітрі Animation (Анімація) автоматично з'явиться перший кадр ру хомого зображення. За допомогою індикаторів видимості, роз- міщених ліворуч від кожного шару на палітрі Layers (Шари), задайте відображення лише другого шару (рис. 3.14). Так ви настроїте зображення першого кадру анімації.
Додайте до анімації новий кадр. Для цього на палітрі Anima tion (Анімація) клацніть кнопку Duplicates current frame (Дублю вати поточний кадр). Буде додано другий кадр — копію пер шого, який слід настроїти, задавши за допомогою індикаторів видимості на палітрі Layers (Шари) відображення лише третьо го шару (рис. 3.15).
Задайте час затримки кадрів за допомогою піктограм, розмі- ШІЄНИХ ПІД кожним із кадрів (рис. 3.16). Скориставшись кнопкою Plays/stops animation (Програвання/зу пинка анімації) на палітрі Animation (Анімація), перегляньте створене рухоме зображення. У разі необхідності відкоригуйте час затримки.
За допомогою команди File • Save Optimized (Файл • Зберегти з оп- тимізацією) збережіть зображення як файл GIF-анімації з роз ширенням .gif. Якщо таке зображення помістити в HTML-документ, то картин ка змінюватиметься, почергово відображаючи кадри, на яких мо жуть бути не лише малюнки, а й слова.
Головна 
