[aleax]

Повідомлення від aleax

Статья. Часть 1

Часть 2

Добавленные 8 картинок составят полноценную анимацию

Мы только начали, а ведь почти готово! Остается лишь выставить интервалы между сменой кадров. Сделаем мяч, вращающийся с постоянной скоростью, то есть, все задержки у нас будут одинаковыми. Подбираются они экспериментально в окне предварительного просмотра. Мне понравилось движение при задержке в 13 (сотых секунды).


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

Вот что у нас получилось. Довольно крупный рисунок-анимация в 12 килобайтах

Готово, не более чем за полчаса мы сделали весьма сносную анимацию, которую можно разместить где-нибудь в дальнем углу своего сайта, чтобы мало-мальски оживить скучную страничку. Если же вы хотите, чтобы мячик не просто вращался, а полноценно "катился" по странице, вам потребуется всего лишь длинная рейка-баннер. Разместите первый кадр в правом ее конце, а все следующие - с небольшим смещением влево. Хотя вследствие угла зрения, под которым была взята первая картинка, мяч не является катящимся, а скорее "прокручивающимся", теперь он будет ближе к тому, чтобы стать перемещающимся. Лучших результатов (и по степени сжатия, и по визуальному эффекту) можно добиться, если дополнительно отретушировать одиночные кадры или подобрать лучшую картинку. Также размер можно уменьшить, если отказаться от прозрачной подложки и заменить ее белым фоном. Приведенный выше пример не отличается элегантностью решения, однако является достаточно простым и показательным. Сейчас же посмотрим еще один, буквально двухкопеечный по своей простоте - "мигающий" баннер. Хотя это может быть и кнопка, и любой другой элемент на web-странице. Подобный эффект достигается контрастной сменой цветов картинки. Запустим MS Paint для создания шаблона. Откроем новый документ с размерами, нужными для изображения, скажем, 160 на 40 пикселей. Заливаем весь фон зеленым цветом и на него наносим надпись белыми буквами. Сохраняем рисунок. Кстати, совсем не обязательно сохранять его в GIF, поскольку многие программы-аниматоры поддерживают большое количество входных форматов, в том числе и популярные bmp и jpeg. Далее заливаем все белым (либо выделяем все и жмем Delete), и в том же месте, где и в первый раз - наносим ту же надпись, только теперь с зеленым цветом фона. Строго говоря, все то же можно сделать и на одном рисунке, просто залив другими цветами фон и надпись, либо же в Photoshop, применив 2 слоя. В любом случае сохраняем под новым именем. Второй и последний кадр готов, других у нас не будет. Можно приступать к сборке. Этот этап будет совсем простым, ведь у нас всего два кадра. Но если это совсем неинтересно, можно поиграть и с ними. Разместим, к примеру, несколько раз подряд эту маленькую последовательность. Выставим равные малые временные промежутки между ними, скажем, по десять сотых. А на границе перехода от первого выставим большую задержку, например, секунду. В результате получим уже иной баннер.




Мигающий баннер даже небольшого размера сразу бросается в глаза

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

Ссылки
GIF Movie Gear: http://www.gamani.com/ Microsoft GIF Animator (около 1.05 Мбайт): линк

Внимание: ссылки работоспособны на момент публикации материала. Сайт www.fcenter.ru не несёт ответственности за изменения на сторонних серверах.
Обсудить в конференции