Image is ready!

Федор (fm) Галков

Спецвыпуск: Хакер, номер #050, стр. 050-026-2

Анимация

Теперь попробуем создать небольшой анимированный баннер и на его примере разберемся с созданием анимации в ImageReady. Баннером будет примитивная анимация логотипа лучшего журнала :). Конечно на статус эстетического совершенства этот баннер не претендует, но для процесса обучения – самое оно.

Из-за того, что инструментарий ImageReady заметно ограничен, будет проще сначала все нарисовать в Photoshop. Создадим самую простую анимацию, в которой каждый кадр будет отдельным слоем в Photoshop. Я сделал так: открыл в Photoshop картинку с логотипом, пять раз продублировал этот слой и в каждом слое залил другим цветом новую букву. Конечно, эти действия элементарны и ImageReady справился бы с ними без проблем, но более сложные манипуляции могли бы вызвать определенные трудности.

Нажимаем <Ctrl> +<Shift> +<M> и получаем наш проект в ImageReady. Теперь надо открыть панель анимации (главное меню: Window–> Animation). На панели анимации кликни по маленькой кнопке с изображением стрелочки в верхнем правом углу панели и в списке выбери “Make Frames From Layers”. Теперь анимация состоит из шести кадров, каждому из которых требуется только задать временной отрезок его отображения на экране. Для этого под каждым кадром на панели анимации есть маленькое выпадающее меню (я остановился на значении 0,2). Уже можно посмотреть анимацию в действии кликнув по кнопке “Play / stops animation” в нижнем ряду кнопок панели анимации. Теперь выбери подходящее сжатие (т.к. в баннере всего 3 цвета, то оптимальным будет gif c четырьмя цветами) и нажми “File” – “Saved Optimized As…” выбрав gif-формат. Вот и все - баннер закончен и готов к труду и обороне в Сети. Кстати, вес баннера у меня получился всего 3,66 Кб, что не так уж и много для анимированного баннера класса 468х60. На самом деле ImageReady в некоторой степени ориентирован на создание баннеров. Для создания новых проектов в нем существуют готовые предустановки для рисования стандартных баннеров (например, Web Banner 468х60, Micro Web Banner 88х31 и т.д.).

Снова анимация

Создадим еще один баннер, только несколько другим способом, а эксплуатировать будем тот же логотип. Можно не начинать новый проект, а просто удалить лишние слои и все кадры анимации, кроме первого, а от надписи «Хакер» оставить одну букву «Х». Теперь нужно создать копию этого кадра - за это отвечает кнопка «Duplicates current frame” в нижней части панели анимации. Надо именно скопировать кадр, а не создать новый слой, иначе ничего путного не получиться. Теперь, выделив новый кадр, передвинем букву «Х» в противоположный угол картинки. Готово? Выделив оба кадра, кликни по кнопке “Tween…”. Этот инструмент создает несколько промежуточных кадров между выбранными, а нам только этого и надо. В появившемся окне определяется количество добавляемых кадров (“Frames to Add”), на какой кадр смотреть («Tween With”, при выделении нескольких кадров этого не потребуется), какими эффектами пользоваться (“Position”, “Opacity”, “Effects”). Добавим, например, четыре кадра и обычное движение (“Position”). Теперь между имевшимися кадрами появились промежуточные, поэтому движения буквы стали намного более плавными. Еще можно скопировать последний кадр, в копии вернуть букву на место и повторить этот трюк с “Tween”, чтобы не было резких скачков при анимации. Итог - по баннеру из угла в угол бегает буква «Х». Повторюсь, что никакой цели, кроме того чтобы привести простой пример, я не преследовал. Чтобы сохранить баннер - опять “Save Optimized As”.