Створення анімації для Інтернету … (з використанням безкоштовних інструментів!)

Оригінал доступний на zisman.ca

Наворочена анімація, яку ви бачите в Інтернеті, створена з використанням дорогих, складних у вивченні інструментів, таких як Macromedia Flash. Анімація трохи менше та простіше – звана анімованими гіфками – в стані оживити веб-сторінку та може бути створена з використанням безкоштовних інструментів. Ось приклад анімованої гіфки, взятої з сайту по боротьбі з курінням Cigarette.com.

Smoking skull animation

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

Є безліч умовно-безкоштовних та комерційних програм для анімації в форматі GIF, доступних за різними цінами … ми збираємося використовувати маленьку, безкоштовну та просту: UnFREEz. Якщо у вас немає копії, клікніть по її назві, щоб її завантажити (вам знадобиться програма для розпакування, щоб її відкрити, так як встановлення не передбачено; попросту клікніть двічі на розпакувати файл, щоб запустити її … проте зверніть увагу, що UnFREEz, а також цей посібник, по суті справи, призначений для користувачів Windows. Користувачі Mac можуть ознайомитись з безкоштовним ПО GifBuilder (GifBuilder Carbon для OS X) або HVS Animator).

Коли запускається UnFREEz, він виглядає так:

UnFreeze screen shot

Щоб використовувати його для створення анімації, вам необхідно створити свою добірку кадрів (збережених у форматі GIF) в будь-якій програмі для малювання, наприклад Windows Paint (яка відкриється і збереже файл у форматі GIF в тому випадку, якщо у вас встановлений Microsoft Office) або ж більш професійні програми, такі як Photoshop. Або ви можете використовувати KidPix або Windows Paint для збереження серії графічних файлів у форматі Windows Bitmap (BMP) або в іншому форматі, а потім використовувати безкоштовну програму перетворення графіки, таку як Irfanview, для перетворення кожного файлу в формат GIF.

Якщо у вас є кадри, то знайдіть їх через «Мій комп’ютер» або «Провідник» та перетягніть їх значки в вікно «Frames» (Кадри) програми UnFREEz в тому порядку, в якому ви хочете, щоб вони відтворювалися. Коли закінчите, натисніть кнопку «Make Animated GIF» («Створити анімований GIF»), вказавши ім’я та місце розташування вашого файлу (порада: якщо ви бажаєте використовувати анімацію в Інтернеті, то не використовуйте пробіли в імені файлу!)

Можете проекспериментувати з налаштуванням «Frame delay» (Затримка кадру) для того, щоб ваші кадри відтворювалися швидше або повільніше – чим повільніше, тим менше цілісно вийде, але «швидше» може виявитися занадто динамічно!


Перегляд вашої анімації 

Можливо, ви помітили, що примітивна програма UnFREEz по факту не показує вам, як виглядає ваша анімація. Вам потрібно буде переглянути її десь в іншому місці. З цим гарно впорається безкоштовний Irfanview, що підходить для багатьох випадків життя.

Створення ваших кадрів в Paint

По-перше, переконайтеся, що ваша копія Windows Paint в стані відкривати та зберігати файли в форматі GIF (якщо ж ні, то ви все одно можете використовувати її для створення кадрів, використовуючи Irfanview або іншу програму для перетворення файлів з формату BMP в GIF). Відкрийте Windows Paint (ви знайдете значок в меню «Пуск» / «Програми» / «Стандартні») … перейдіть в меню «Файл» / «Відкрити» та натисніть, щоб побачити меню в «Тип файлу» … подивіться, чи є у вас така опція:

Open dialogue box

Якщо так, то ви можете продовжити без додаткових перетворень. Якщо ж ні, то все одно продовжуйте, але запам’ятайте: вам необхідно конвертувати ваші кадри в формат GIF (використовуючи Irfanview або іншу програму), перш ніж використовувати їх у вашій програмі для створення анімації в форматі GIF.

Перш ніж починати малювати, визначте розмір для вашої анімації. Загалом, чим менше, тим краще … невелика анімація завантажується через Інтернет набагато швидше. В Paint натисніть на меню «Малюнок» / «Атрибути» (Image / Attributes). Ви побачите:

Attributes dialogue box

Встановіть одиниці виміру в пікселях (pixel – це елемент зображення: точки на екрані) … просто щоб ви прикинули: наступне зображення – розміром 200 x 200 пікселів (і воно досить велике як для анімованого GIF):

Sample 200x200 pixels animation

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

Ось корисна штука: якщо ваш кадр збережений як .GIF, то коли ви повернетеся в меню «Малюнок»/ «Атрибути», ви побачите, що опції «Прозорості» (Transparancy) – які були сірими і недоступними (як видно на зображенні вище), тепер стали доступними … відзначивши опцію «[] використовувати прозорий колір фону», ви можете вибрати колір – все, що в цьому кольорі буде прозорим, коли відтворюється GIF, – це корисна функція, так як вона дозволяє використовувати нерухомий або анімований GIF на веб-сторінках з фоном будь-якого кольору і не спостерігати кольоровий квадрат гіфки. Зверніть увагу, як це використовується в черепі з сигаретою, що знаходиться вгорі.


Після збереження Frame1 клікніть по пункту меню «Файл»/ «Новий» (File / New), щоб перейти до наступного кадру. «Малюнок» / «Атрибути» залишаться такими ж, якими ви їх встановили … але вам доведеться заново вибирати прозорий колір для кожного кадру. Безумовно, всі кадри в вашій анімації повинні бути однакового розміру. Щоб отримати ефектну анімацію спробуйте зробити як мінімум дюжину кадрів або більше.

Примітка про збереження в форматі GIF:

Формат GIF обмежений 256 кольорами. Як результат, якщо ви спробуєте використовувати фотографію в якості частини вашого зображення (будь то як нерухоме зображення або як анімацію), то коли ви збережете її в форматі GIF, фотографія стане виглядати менш реалістично. Подивіться на зображення черепа у верхній частині цієї сторінки: на перший погляд воно виглядає добре, але якщо ви придивитеся, ви зможете побачити, як зів’яли кольори.

(Ви можете вставляти фотографії в свої кадри, а потім малювати поверх них, як це було зроблено при створенні черепа).

 Підсумок:

Створення кадрів по одній штуці в такій програмі, як Windows Paint, може бути стомлюючим … але за допомогою таких простих програм, як ця, і таких безкоштовних програм, як UnFREEz, студенти або інші непрофесіонали в змозі створювати напрочуд ефектну анімацію. Просто не забувайте створювати їх в невеликому форматі! – 19 лютого, 2002.