Оживите вашу Web-страничку

Путешествуя по просторам Internet, вы наверняка замечаете, что редко какой Web-сайт статичен, т. е. выполнен с помощью "чистого" HTML. Как правило, вы наблюдаете мерцание анимации, переливающиеся всеми цветами радуги баннеры и много других "подвижных" объектов. Как оживить подобным образом свою страничку - об этом мы и поговорим.


На данный момент существует большое количество вариантов создания анимации на Web-страничке. Среди них - написание апплетов на языке Java, вставка в HTML Java-скриптов, использование компонентов ActiveX и различных видов Plug-in (Flash и т. п.). Ну и наиболее распространено применение особого типа графического формата GIF - Animation GIF. О его создании и практическом использовании и пойдет речь в данной статье.

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

Animation Shop

Эта программа обычно поставляется с пакетом Paint Shop Pro и предназначена для создания анимационных файлов форматов GIF, AVI, FLI и FLC. Рассмотрим этот процесс для файлов формата GIF.

Для создания анимации в этой программе можно выбрать два пути: использовать уже существующую картинку или нарисовать что-нибудь. Большого различия между этими путями нет. Правда, уже существующую картинку можно преобразовывать при помощи анимационных эффектов сразу после загрузки, а новую нужно еще и рисовать. Значит, нужно уметь это делать именно в Animation Shop, а этот процесс несколько отличается в силу особенностей программы.

Для большего удобства в рассматриваемой программе есть два Мастера: Banner Wizard для баннеров и Animation Wizard собственно для анимации. Для начала давайте сделаем простой баннер.

В пункте меню File выбираем пункт Banner Wizard, после этого появляется диалоговое окно (рис. 1).


Рис. 1. Стартовое диалоговое окно Banner Wizard — первый шаг к созданию вашего собственного баннера.

Здесь нам предлагается выбрать фон нашего баннера. Мы можем выбрать прозрачный, залитый каким-то определенным цветом или задать путь к фоновому рисунку. Избираем второй вариант, причем изменяем текущий цвет на черный путем нажатия на маленький прямоугольник (на рисунке он белый). Затем нажимаем кнопку Next и переходим к следующему окну. Здесь (рис. 2) нам предлагается задать размер баннера в точках (пикселах). Опять же три варианта: стандартный, равный выбранной фоновой картинке или задаваемый пользователем.


Рис. 2. Второе диалоговое окно. Здесь предлагается задать размер баннера.

Для нашего примера мы выбираем стандартный размер Full Banner (468x60), установленный по умолчанию, и снова переходим к следующему окну - Timing. Здесь мы можем задать временные параметры нашего баннера: время показа кадра, измеряемое в десятых долях секунды, сколько кадров показывать за 1 с и количество повторов цикла (можно задать круговой цикл). Для нашего примера мы зададим стандартные значения: 10 - для первого параметра, 10 - для второго и бесконечный показ (по кругу).

Далее мы переходим к следующему окошку Мастера. Здесь нам предлагается ввести любой текст. Есть возможность поменять шрифт и задать его параметры (размер и т. п.). Для нашего примера мы напишем простую фразу "Добро пожаловать!" и перейдем к следующему окошку. В нем предлагается выбрать цвет шрифта или загрузить картинку для задания его текстуры. Выбираем красный цвет так же, как и при выборе фонового цвета, и переходим к финальному окну создания нашего баннера (рис. 3).


Рис. 3. Окно создания эффектов для баннера. Здесь вы можете выбрать один из понравившихся вам эффектов (Transition) или изменить его на свой вкус при помощи функции Customize.

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

Далее нажимаем Finish и получаем наш баннер. Он будет выглядеть так, как на рис. 4.


Рис. 4. Таким образом выглядит наш баннер в окне Animation Shop. Если мы в меню View выберем пункт Animation, то сможем просмотреть наш шедевр в работающем виде.

Теперь осталось только сохранить наш баннер в формате GIF. Для этого в меню File выбираем пункт Save As, в открывшемся окошке выбираем формат, и перед нами возникает новое окно, на этот раз с параметрами (рис. 5).


Рис. 4. Таким образом выглядит наш баннер в окне Animation Shop. Если мы в меню View выберем пункт Animation, то сможем просмотреть наш шедевр в работающем виде.

В этом окошке можно выбрать один из четырех уровней оптимизации анимации или нажать кнопку Customize и устанавливать параметры самостоятельно. Последний вариант требует либо серьезных познаний в области графики, либо достаточно большого количества времени, проведенного за экспериментами. Необходимо учитывать, что чем выше качество получаемого файла, тем больше его размер и наоборот. Кроме того, прежде чем сохранять анимацию в формате GIF, лучше всего сохранить ее сначала в формате самой программы Animation Shop, а потом уже экспериментировать, т. к. операцию оптимизации вы уже не сможете отменить, и при ошибке вам придется создавать баннер (или любую другую анимационную картинку) заново. Итак, после того, как все параметры заданы, нажимаем кнопку Next, происходит оптимизация, и наш шедевр готов.


Рис. 6. Окно Insert Image Effect. Для того чтобы настроить нужный эффект, можно нажать клавишу Customize и изменить требуемые параметры.

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


Рис. 7. Программа CoffeeCup GIF Animator, готовая к работе. Внизу — стандартные заготовки для кнопок.

Для начала открываем картинку из стандартных "обоев" Windows - forest.bmp. Далее в меню Effects можно выбрать один из трех пунктов: Insert Image Transition (используется для перехода от одного изображения к другому или к кадру, можно также выбрать опцию перетекания цветов), Insert Image Effect (применяется для вставки эффекта применительно к одному кадру) и Apply Image Effect (позволяет изменить кадр в соответствии с выбранным эффектом). Если нам нужно создать анимацию на основе только одной картинки, то следует выбрать второй пункт. Так и сделаем.

Допустим, нам нужно сделать акцент на изображении деревьев. Выбираем эффект Stretch, действие которого заключается в приближении рисунка (т. е. его увеличении). Далее мы выставляем параметры: длительность эффекта ставим 2 с, количество кадров в секунду - 10, нажимаем OК и получаем анимацию. После этого достаточно произвести сохранение в формате GIF, и ваш файл готов.

CoffeeCup GIF Animator

Эта программа специально предназначена для создания анимации для Internet. Есть функции для работы с анимированными кнопками на основе поставляемых с CoffeeCup GIF Animator картинок, а также HTML-кода для их вставки ссылкой, альтернативным текстом и рамкой. В этой программе можно создавать анимацию на основании только уже имеющихся картинок, что в некоторой степени ограничивает возможности ее применения, да к тому же отсутствует функция добавления эффектов. Но плюсом является то, что она очень удобна.

При открытии программы запускается Мастер (Animation Wizard). В первом окне нам предлагается выбрать размеры анимации: либо по первому кадру рисунка, либо в соответствии с задаваемыми вручную параметрами (в пикселях). Для нашего примера мы выбираем, что размер нашей анимации будет задаваться первым кадром (рис. 8).


Рис. 8. Стартовое окно Мастера. Здесь задаются размеры будущей анимации.

Далее мы переходим к следующему окну, в котором нам предлагается задать размеры картинок, с которыми мы будем работать при создании анимации, для определения расположения изображений, имеющих размеры больше или меньше создаваемой анимации. Также в этом окне можно задать прозрачный фон, поставив галочку напротив надписи Make the animation transparent. В нашем случае мы задаем Center in the frame (в центре кадра), Scale frames to fit (растянуть по кадру) и задаем прозрачность (рис. 9).


Рис. 9. Здесь можно задать прозрачность создаваемой анимации, просто поставив галочку напротив Make the animation transparent.

Теперь мы можем переходить к следующему окну Мастера. В этом окне (рис. 10) мы задаем количество повторов анимации и время, в течение которого будет показываться один кадр (в 1/100 с, т.е. если мы выставим 100, то кадр будет показываться 1 с). В нашем случае зададим показ по кругу (loop) и время отображения кадра 50 (т.е. полсекунды).


Рис. 10. Окно Мастера, в котором задаются параметры кадров.

Следующее окно Мастера предназначено для того, чтобы мы выбрали, из каких картинок у нас будет состоять анимация. Для этого нам потребуется нажать кнопку Add Image... и в открывшемся окошке Open выделить необходимые нам файлы. Пусть для нашего примера это будут redbutton1.gif и redbutton2.gif, которые поставляются вместе с этой программой в виде примеров картинок. В этом же окне Мастера после выбора картинок их можно менять местами, т. е. корректировать последовательность отображения. Наконец, переходим к последнему окну Мастера и там нажимаем Finish.


Рис. 11. Так будет выглядеть в окне программы CoffeeCup GIF Animator финальный результат нашей деятельности.

После создания этой анимации мы можем ее просмотреть при помощи опции в меню View - Play Animation (или нажав сочетание клавиш Ctrl+R).

Animagic GIF Animator

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


Рис. 12. Так выглядит Animagic GIF Animator после загрузки и открытия файла.

Итак, нам необходимо иметь какое-либо изображение. Для этой цели можно воспользоваться любой имеющейся у вас картинкой формата GIF, BMP, PCX или JPEG. Также Animagic GIF Animator позволяет создавать анимацию на основе файлов формата AVI или TXT. Давайте поработаем с обычным графическим файлом.

Во-первых, рассмотрим имеющиеся в этой программе эффекты:

  • Fade in вставляет новые кадры перед текущим. Каждый последующий кадр градиентно переходит в первоначальный, к которому мы применили этот эффект.
  • Fade out вставляет новые кадры после выделенного. Действие этого эффекта похоже на предыдущее, только все происходит в обратном порядке.
  • Dissolve имеет три варианта исполнения: (1) из выбранного цвета кадр собирается как мозаика по кусочкам; (2) кадр разбирается по кусочкам и переходит в выбранный цвет; (3) один кадр разбирается и переходит в другой (следующий).
  • Banner Scroll - это различного вида перемещения картинки в кадре.
  • Wipe создает эффект закрашивания картинки (наподобие каретки струйного принтера) по выбранному направлению.
  • Spiral восстанавливает или закрашивает картинку по спирали.
  • Blind создает эффект, похожий на открывающиеся или закрывающиеся жалюзи.

В настройках каждого из этих эффектов можно задавать стандартные параметры для кадров: их количество (по умолчанию их 5, что считается оптимальным); количество миллисекунд для показа одного кадра (по умолчанию стоит 100); в зависимости от эффекта можно выбирать цвет либо из стандартной палитры цветов (256), либо из модели RGB (16,5 млн).

В меню Frames есть несколько интересных пунктов, которые позволяют изменять параметры кадра. Например, можно из цветного сделать его серым и т. п. Вообще говоря, в этой программе процесс создания анимации заключается в основном в добавлении эффектов.

GIF Construction Set Professional

Эта программа обладает огромным количеством разнообразных возможностей. Она позволяет создавать файлы GIF самых разных видов, но раз уж мы изучаем анимацию, то сосредоточимся на Animation GIF.

Итак, выбираем пункт Animation Wizard в меню File, нажимаем Next, дальше выбираем опцию, подтверждающую то, что файл создается для Internet (или оставляем значение по умолчанию), снова жмем Next. В следующем окне оставляем значение по умолчанию, соответствующее тому, что у нас анимация будет показываться по кругу, и переходим к следующему окну. В нем нам предлагается самостоятельно выбрать палитру (рис. 13). В следующем окне устанавливается время показа одного кадра (задержка). Можно, например, оставить значение по умолчанию и перейти к следующему окну.


Рис. 13. Окно Мастера создания анимации. Здесь можно выбрать палитру (количество цветов) для анимации.

Далее нам предлагается выбрать файлы, на основе которых мы будем создавать нашу анимацию. Минимальное количество картинок - две. Причем даже после того, как вы уже выбрали нужные вам файлы, программа все равно будет настойчиво предлагать открыть еще. Поэтому, когда вам уже больше нечего добавлять, просто жмите Cancel. На следующем окошке будут только две кнопки: Back - для того, чтобы вернуться назад и внести какие-либо изменения, и Done - для завершения работы с Мастером.

Чтобы задать прозрачный фон для нашей анимации, нужно проделать достаточно неочевидные действия, а состоят они в следующем. Сначала нужно выделить кадры, затем в меню Blocks выбрать пункт Manage, потом в открывшемся окне (рис. 14) выбрать опцию Set Controls for the Selected Blocks (если она не задана по умолчанию) и нажать рядом на кнопку Apply.


Рис. 14. Окно Менеджера блоков. Два нижних параметра позволяют сдвигать картинки выбранного блока по вертикали и (или) по горизонтали.

Только тогда появится редактор Edit Control (рис. 15). Поставьте галочки напротив пунктов Control Block и Transparent Colour, а затем нажмите на кнопку Eyedropper (выглядит, как пипетка). На появившемся первом кадре вашей анимации выберите цвет, который вы хотите сделать прозрачным. Затем в этом же окошке установите параметр Remove By как Background, нажмите OК и теперь можете сохранять ваш файл.


Рис. 15. С помощью параметра Delay изменяется время показа кадров (чем больше число, тем меньше кадров в секунду).

А вот что достаточно сделать для создания баннеров в программе GIF Construction Set Professional. Заходим в меню Edit и выбираем пункт Banner. После этого появится окно (рис. 16), в котором вы можете сделать восемь различных типов баннеров - нужно только набрать текст и при желании изменить некоторые параметры.


16. Создаем баннер. Здесь можно выставить основные параметры будущего баннера, а также посмотреть, как он будет выглядеть, нажав кнопку Test.

Помимо баннеров с помощью GIF Construction Set Professional можно создавать еще несколько видов анимационной графики. Но все охватить невозможно, а вот привести еще один интересный пример можно.


Рис. 17. Так выглядит созданная при помощи LED Sing анимация в окне программы GIF Construction Set Professional.

В меню Edit есть пункт LED Sing. При помощи него можно создавать бегущую строку особого типа: анимация выглядит как разноцветный текст, набранный из точек. После выбора этой опции появится окошко, в котором следует написать текст и выставить параметры:

  • Loop - анимация будет повторяться по кругу.
  • Show dark pixels - отображать точки фона серым, если включено, или на черном фоне, если выключено.
  • Smooth Scroll и Columns per Frame - если эти опции включены, то можно задать, на какое количество точек текст будет смещаться в следующем кадре; если выключены, то текст будет перемещаться по символу.
  • Compact Sign - если включено, то текст будет отображаться тонким; если выключено, то - жирным шрифтом.
  • Columns Wide - здесь задается ширина создаваемого LED Sing в точках (не в пикселях!).
  • Delay - время показа одного кадра (в 1/100 секунды).
  • Palette Compression - максимальное уменьшение цветов палитры для минимизации размера конечного файла.

Единственное, что удручает при использовании этой функции программы, это то, что нет возможности использовать русские символы. Они не поддерживаются и отображаются решеткой #.

Ulead GIF Animator

Для того чтобы быстро освоиться в этой программе, не нужно тратить много времени. Достаточно только понять идеологию, а дальше можно будет работать с легкостью.

Ulead GIF Animator сразу после запуска отображает окошко, в котором вы выбираете, что собираетесь с помощью программы делать.


Рис. 18. Приветственное окно Ulead GIF Animator 4.0. С него начинается работа с программой.

Так как нас интересует создание анимации, то мы нажимаем Animation Wizard - запускаем Мастер анимации и следуем его указаниям. В первом же окне нам предлагается добавить либо картинки (Add Image), либо видео (Add Video). Мы нажимаем на кнопку добавления картинок и выбираем logo.gif, находящуюся в каталоге по умолчанию (при создании собственной анимации вы можете выбрать любую картинку, а если их несколько, то выстроите их в нужной последовательности путем перетаскивания с одного места на другое в этом же окне). Затем переходим к следующему окну, в котором нам предлагается определить тип палитры - ориентированный либо на текст, либо на графику. Учитывая то, что мы взяли за основу картинку, то соответственно выбираем второй пункт и переходим к следующему окну. Там нам предлагается выставить параметры отображения кадров, в частности время задержки. Причем, чтобы было удобнее, можно определять нужную скорость, сверяясь с демонстрационным показом сменяющихся цифр в тестовым окошке (рис. 19). Вы также можете задать количество кадров в секунду.


Рис. 19. Окно Мастера создания анимации. Здесь выставляются параметры создаваемой анимации.

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

Если же вы решили воспользоваться эффектами, то нужно зайти в меню Video F/X и выбрать их там или же можно воспользоваться эффектами из меню Layer. Все параметры уже описывались ранее и не представляют никаких проблем. А на крайний случай, есть функция предварительного просмотра, которая не даст вам ошибиться.


Рис. 20. Так выглядит наша анимация в окне программы Ulead GIF Animator.

Эта программа легко расширяема, и при желании можно скачать для нее из Internet достаточно большое количество дополнительных модулей (Plug-in).

На этом мы завершаем наше практическое занятие по созданию анимации. Надеемся, что теперь ваша страничка будет гораздо более красочной и динамичной. Дело за вашим дизайнерским мастерством!