Электронные издания - Владимир Вуль

Рис. 4.57. Конечный кадр анимации

Рис. 4.58. Диалоговое окно Tween

Для предварительного просмотра анимации можно воспользоваться кнопкой Preview in Default Browser (просмотр в браузере, установленном по умолчанию). Кнопка эта расположена в нижней части панели инструментов и легко узнаваема по своей пиктограмме. Отметим, что с помощью палитры Animation возможна точная регулировка времени задержки на экране каждого кадра анимации: для этого следует вывести указатель мыши на черную треугольную стрелку в нижней части кадра и выбрать нужное время из открывающегося списка. В нижней строке палитры Animation помимо инструментов для управления воспроизведением анимации имеются также кнопки для дублирования или уничтожения активного кадра.

Мы рассмотрели режим анимации с изменением положения объекта. Попробуем на примере продемонстрировать получение аналогичного эффекта путем изменения непрозрачности. Для этого вновь откроем в пакете Photoshop 6.0 пейзаж, представленный на рис. 4.53 и самолет. И снова скопируем самолет в отдельный слой того файла, в котором сохранен пейзаж. Затем переместим самолет в левый верхний угол изображения аналогично представленному на рис. 4.55. Далее перейдем в ImageReady 3.0. Вновь активизируем слой, содержащий самолет, и в меню палитры Layers (Слои) активизируем команду Layer Options (Опции слоя). У нас появится одноименное диалоговое окно, показанное на рис. 4.60.

В этом диалоговом окне параметр Opacity (непрозрачность) сделаем равным 0. Таким образом, в начальной позиции (кадр 1) слой с самолетом будет полностью прозрачен, и самолет виден не будет. Затем, как и в первом случае, вставим новый кадр. В нем с помощью той же команды Layer Options изменим прозрачность нового слоя (параметр Opacity сделаем равным 100%) и переместим самолет в крайнюю правую позицию. Следующим шагом с помощью команды Промежуточный меню палитры Animation вставим между двумя созданными кадрами необходимое число промежуточных. Кроме того, в диалоговом окне Tween , инициируемом командой Промежуточный (см. рис. 4.58) установим не только флажок Position , но и Opacity . В результате на промежуточных кадрах анимации самолет будет не только перемещаться, но одновременно будет меняться его прозрачность.

Рис. 4.59. Анимация (7 кадров) с активным первым кадром

В примере на рис. 4.61 число промежуточных кадров, по-прежнему, равно 5. На рис. 4.61 активен 4 кадр анимации и видно полупрозрачное изображение самолета. На конечном, 7 кадре, он уже полностью непрозрачен. Эффект особенно заметен на рис. 4.62, где представлены все последовательные кадры анимации. На первом кадре самолет совсем не виден (если бы был виден, то был бы распложен вблизи левой границы кадра). А на 7 кадре самолет полностью непрозрачен и улетает за правую границу кадра. Как следует из нашего примера, используя не только перемещение, но и изменение прозрачности объектов можно получить интересные и неожиданные анимационные эффекты. Чаще всего используют постепенное проявление какой-либо надписи после перемещения некоторого объекта. Например, я видел рекламный баннер в виде анимационного GIF-файла, в которой появлению надписи предшествует перемещение (качение) колеса автомобиля. В другом примере надпись проявляется после пролета самолета. Во всех этих случаях надпись неподвижна, т. е. в диалоговом окне Tween (см. рис. 4.58) активизируется только единственный параметр – Opacity .

Рис. 4.60. Диалоговое окно Layer Options

Уже не раз отмечалась особая важность оптимизации GIF-анимации. Именно оптимизация позволяет предельно сократить размер файла, практически не меняя его изобразительных характеристик. В результате удается достаточно быстро загрузить файл в браузере пользователя. Для установки параметров оптимизации в ImageReady имеется специальная палитра Optimize . Для того чтобы устанавливать параметры оптимизации и наблюдать одновременно как изменяется оптимизируемое изображение, следует в рабочем окне программы вместо вкладки Original активизировать вкладку Optimized . Все перечисленное представлено на рис. 4.63. Каким же образом и в какой последовательности рекомендуется оптимизировать анимацию? Прежде всего, в палитре Optimize следует установить формат GIF, так как именно в нем выполнена анимация. Остальная часть изображения может быть оптимизирована в своем собственном формате. Ниже раскрывающегося списка выбора формата находится другой, называемый Color Reduction Algorithm (алгоритм уменьшения количества цветовых тонов). В нем рекомендуется выбрать строку Selective (избирательный), который позволяет качественно заменить группу различных цветов одним усредненным тоном. Далее следует методом проб и ошибок оценить необходимое разнообразие цветовых тонов. В большинстве случаев рекомендуется выбирать значение 64, хотя иногда можно уменьшить эту величину до 16. В той же строке справа расположен список Colors , где и следует установить указанное значение. Строкой ниже слева размещается еще один раскрывающийся список Dithering Algorithm (алгоритм сглаживания). В примере на рис. 4.63 в списке по умолчанию установлено значение Diffusion , т. е. диффузионное сглаживание. Во многих случаях можно выбрать значение No Dither , т. е. отсутствие сглаживания. При этом качество изображения ухудшится незначительно, а анимационный файл станет заметно компактнее. Все установки, которые делаются, немедленно учитываются в анимационном файле и их целесообразность может быть оценена визуально.

Рис. 4.61. Анимация (7 кадров) с активным 4-тым кадром и изменением прозрачности

Рис. 4.62. Последовательно смонтированные кадры анимации с перемещением самолета и изменением прозрачности слоя, где расположен самолет

Для GIF-анимации существует и другой способ оптимизации. Как видно из рис. 4.56 в меню палитры Animation имеется специальная команда Оптимизировать анимацию (Optimize Animation). Команда вызывает одноименное диалоговое окно, показанное на рис. 4.64. В окне расположены 2 флажка: Bounding Box и Redundant Pixel Removal . Первый флажок задает оптимизацию, состоящую в автоматической обрезке каждого кадра изображения таким образом, чтобы в нем оставались только те области, которые изменились по сравнению с предыдущим кадром. Второй флажок определяет удаление в последующих кадрах тех пикселов, которые не изменяются от кадра к кадру. Нажав кнопку OK в диалоговом окне, мы обеспечим оптимизацию анимации выбранным способом.

Рис. 4.63. Интерфейс ImageReady с активной палитрой Optimize справа и активной вкладкой Optimized в рабочем окне программы

Как уже ранее говорилось, более универсальным способом создания анимации является двухэтапный процесс, при котором вначале с помощью средств пакета Photoshop создается файл в формате PSD, где каждый слой хранит одно из графических изображений, которые впоследствии предполагается использовать в составе анимационного файла. Затем, этот PSDфайл передается в пакет ImageReady. И уже в рамках этого пакета слои преобразуются в отдельные кадры изображений, используемые в процессе анимации. Для этого преобразования в меню палитры Animation (см. рис. 4.56) предусмотрена специальная команда Сделать кадры из слоев. После этого остается только оптимизировать анимацию рассмотренными ранее методами.

Рис. 4.64. Диалоговое окно Optimize Animation

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

В чем же может состоять такая модернизация? Прежде всего, это может быть добавление, удаление или изменение местоположения отдельных кадров анимации. Для этого следует загрузить анимацию в ImageReady, активизировать палитру Animation , выделить в ней нужный кадр и произвести над ним соответствующее действие. Можно также загрузить кадры анимации как отдельные слои и затем работать отдельно с любым из слоев, внося в него необходимые изменения.

Во многих случаях анимационный файл содержит текстовые фрагменты в одном или нескольких кадрах. Со временем может возникнуть необходимость в изменении рекламного текста. Реже у дизайнера возникает потребность изменить какие-нибудь параметры текстового блока в целом, например, гарнитуру, кегль или начертание. Для выполнения такой задачи следует в загруженной анимации выделить слой с этим текстом в палитре Слои . Затем активизировать палитру Текст и произвести нужные действия, например, изменить гарнитуру. С помощью инструмента Перемещение можно изменить положение текста в плоскости изображения. При необходимости, с помощью команды Подогнать слой под кадры палитры Animation (см. рис. 4.56) можно таким же образом позиционировать текст во всех кадрах анимации.