Читать онлайн учебники
на ANSEVIK.RU

Онлайн учебник по Веб-графике

Графика на вашей интернет-странице

       

Анимационные способности GIF89a

В последнее время необычайно популярным стало использование анимационных способностей формата GIF. Оказывается, формат GIF89a, помимо прочих своих достоинств, позволяет хранить в одном файле сразу несколько изображений-кадров и притом указывать, сколько времени держать на экране каждое из них, прежде чем сменить следующим. Браузеру остается лишь подчиниться этим инструкциям, чтобы прямо в HTML-документе возникло движущееся и циклически повторяющееся изображение. Достоинством этого метода является то, что пользователи браузеров, не умеющих пока работать с GIF-мультфильмами, почти не пострадают - просто вместо движущегося изображения они увидят его первый кадр.

Файл в формате GIF (как анимационный, так и обычный) состоит из блоков, каждый из которых хранит определенную часть информации файла. Все изображения-кадры хранятся в отдельных блоках; кроме того, GIF-файл должен содержать набор специальных блоков со служебной информацией. В программе GIF Construction Set вы будете работать непосредственно с блоками GIF-файла, поэтому вы должны понимать назначение основных из них.

Давайте попробуем сделать с помощью GIF-анимации рамку, расцвеченную бегущими по кругу огоньками, - что-то похожее часто делают в уличной рекламе с помощью лампочек, миганием которых управляет несложное устройство (рис. 6). Стороны этой рамки сделаны из повторяющихся GIF-файлов, в каждом из которых лампочка за один проход перекатывается из конца в конец. На рис. 7 показаны отдельные кадры GIF-файла, из которого строятся нижняя и верхняя стороны рамки (для низа рамки, где направление движения должно быть противоположным, кадры будут располагаться в обратном порядке). Кадры этого изображения были нарисованы в Photoshop и сохранены в GIF-файлах размером 37 на 10 пикселов.

Готовый GIF-файл

Рисунок 6. Готовая рамка с движущимися огоньками

Заготовка GIF-файла FRAME1.GIF
Заготовка GIF-файла FRAME2.GIF
Заготовка GIF-файла FRAME3.GIF
Отдельные кадры GIF-файла FRAME4.GIF
Отдельные кадры GIF-файла FRAME5.GIF
Отдельные кадры GIF-файла FRAME6.GIF

Рисунок 7. Отдельные кадры GIF-файла, из копий которого строятся горизонтальные стороны рамки

Сразу после создания нового, пока еще пустого GIF-файла командой File > New список блоков в главном окне программы GIF Construction Set (рис. 8) содержит единственный обязательный блок - блок HEADER, в котором указываются размеры прямоугольника, отводимого под весь мультфильм (отдельные кадры, как мы увидим позже, вполне могут иметь и меньший размер). Щелкнув дважды по строке HEADER в списке блоков, введите в появившемся окне ширину и высоту наибольшего из подготовленных кадров (в пикселах).

Создание нового GIF-файла

Рисунок 8. Окно программы GIF Construction Set в начале создания нового GIF-файла

Следующий этап - добавление блока LOOP, назначение которого - указать, сколько раз браузер должен будет циклически прокрутить этот GIF. Нажмите кнопку Insert ("Вставить"), а в ответ на вопрос, что именно вставить, нажмите Loop. Этот блок всегда встает вторым по счету в файле, сразу после блока HEADER. Дважды щелкнув по нему в списке, закажите, сколько раз должен прокручиваться ваш мультфильм (по умолчанию 1000), либо введите 0, если вы хотите, чтобы изображение не останавливалось никогда.

Теперь можно вставлять подготовленные кадры мультфильма, хранящиеся в отдельных файлах. Еще раз нажмите кнопку Insert, затем Image. Когда вы укажете нужный файл, программа задаст вам вопрос о том, что делать с его палитрой. Дело в том, что мультипликационный GIF-файл может иметь одну глобальную палитру, общую для всех кадров, а может и хранить для каждого кадра отдельную локальную палитру. Поэтому для первого вставляемого изображения в диалоговом окне Palette (рис. 9) разумнее всего выбрать опцию Use this image as the global palette, "Использовать палитру этого изображения как глобальную". Опция Dither this image to the global palette позволяет привести вставляемое изображение к глобальной палитре с использованием диффузии - этот вариант пригодится для следующих кадров, если их палитра будет отличаться от палитры первого.

Создание нового GIF-файла

Рисунок 9. Как поступить с палитрой вставляемого кадра?

Можно, конечно, завести для каждого кадра свою палитру (опция Use a local palette for this image), но, во-первых, это приведет к увеличению размера файла, а во-вторых, браузеру будет не слишком удобно переключать палитру дисплея для каждого кадра вашего мультика. Поскольку для быстро сменяющихся кадров идеальная цветопередача не так уж важна, лучше в случае расхождения палитр пользоваться диффузией. Если, как часто бывает, ваши кадры представляют собой модификации одного исходного изображения, то, скорее всего, палитра у них и без того будет одинаковой, так что это диалоговое окно при вставке следующих кадров вы уже не увидите.

Если же отдельные кадры сильно различаются по цветовой гамме, можно порекомендовать такой способ: соберите с помощью графического редактора все кадры в одно большое изображение, запишите его в GIF-файл (при этом палитра кадров будет приведена к общему знаменателю) и вставьте этот файл первым кадром, приняв его палитру в качестве глобальной. После сборки мультфильма этот первый кадр можно будет убрать.

Если вставленное изображение по размерам меньше "экрана" - прямоугольника, отведенного под весь мультфильм (габариты этого прямоугольника записаны в блоке HEADER), то теперь вы можете отрегулировать положение кадра в пределах этого экрана. Щелкнув дважды по строке с изображением в списке (или нажав кнопку Edit), в диалоговом окне Edit Image (рис. 10) можно выставить координаты левой верхней точки данного кадра относительно левой верхней точки экрана (поля Image left и Image top). Таким образом можно, например, создать мультфильм с большим экраном, на котором какой-нибудь маленький объект будет не только изменяться, но и свободно двигаться в пределах отведенной ему площади. Здесь же можно установить флажок Interlaced, включив чересстрочный режим для отдельного кадра (хотя большого смысла в этом нет), а также, при желании, загрузить для этого кадра новую локальную палитру кнопкой Load.

Создание нового GIF-файла

Рисунок 10. Регулировка параметров отдельного кадра

Расставив в нужном порядке все кадры, мы должны ввести информацию о том, с какой скоростью их сменять. Для хранения этой величины (а также некоторых других служебных данных) служат управляющие блоки CONTROL, каждый из которых располагается перед своим блоком с изображением и определяет параметры одного кадра. Блоки CONTROL можно расставлять и вручную (нажимая кнопку Insert, а затем Control), но удобнее проложить этими управляющими блоками все кадры за раз. Для этого нажмите кнопку Manage.

Диалоговое окно Block Management (рис. 11), как и главное окно программы, содержит в левой части список блоков собираемого GIF-файла. Выделив протаскиванием (или кнопкой Select All) все блоки IMAGE, нажмите кнопку Apply в правой верхней области окна. Это приведет к появлению окна Edit Control Block (рис. 12), в котором и устанавливается время отображения каждого кадра (поле Delay) в сотых долях секунды. Закрыв оба окна, вы увидите в главном окне программы, что перед каждым кадром встало по блоку CONTROL (рис. 13). Теперь любой из этих управляющих блоков можно редактировать по отдельности (с помощью двойного щелчка или кнопки Edit) - например, если вам нужно, чтобы какой-то кадр задержался на экране дольше, чем остальные.

Создание нового GIF-файла

Рисунок 11. Вставка управляющих блоков для всех импортированных кадров

Создание нового GIF-файла

Рисунок 12. Параметры управляющего блока

Создание нового GIF-файла

Рисунок 13. Анимация готова!

В том же окне редактирования управляющего блока (рис. 12) можно выбрать цвет, который будет прозрачным в данном кадре, установив флажок Transparent colour и выбрав нужный цвет либо из палитры (нажав кнопку с номером), либо прямо с изображения с помощью знакомой всем "пипетки". Выпадающий список Remove by позволяет указать, что должен сделать браузер с данным кадром перед тем, как выводить следующий. Так, опции Nothing и Leave as is обе означают "ничего не делать", и если, например, следующий кадр смещен относительно предыдущего или содержит прозрачный цвет, то при этом часть предыдущего кадра может остаться видимой. Опция Background затирает каждый кадр перед выводом следующего фоновым цветом, а Previous image приказывает браузеру восстановить то, что было на этом месте до вывода кадра (например, фоновое изображение страницы).

Чтобы протестировать готовый мультфильм, нажмите кнопку View - и, если результаты вас удовлетворяют, сохраните файл командой File > Save as. Сразу же после этого готовая GIF-анимация можно будет открыть в браузере и увидеть, как он будет вести себя в реальной жизни.

Чтобы доделать живую рамку, показанную на рис. 6, нам придется создать по тому же алгоритму GIF-файлы для нижней и боковых сторон (они будут состоять из тех же кадров, повернутых на 90 градусов и/или расположенных в обратном порядке). Затем нужно будет сделать еще четыре маленьких файла для уголков рамки и, наконец, потратить некоторое время на синхронизацию всей системы, с тем чтобы ползущие огоньки без запинки пересекали все сочленения.

Рейтинг@Mail.ru