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

Навороченная анимация, которую вы видите в Интернете, создана с использованием дорогих, сложных в изучении инструментов, таких как Macromedia Flash. Анимация поменьше и попроще – называемая анимированными гифками – в состоянии оживить веб-страницу и может быть создана с использованием бесплатных инструментов.

Вот пример анимированной гифки, взятой с сайта по борьбе с курением Cigarette.com

Анимированные файлы .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

Установите единицы измерения в пикселях (pix el – это элемент изображения: точки на экране)… просто чтобы вы прикинули: следующее изображение – размером 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.