Тема 1.20. Изображения для Web: анимация, оптимизация изображения. Анимация

Анимация представляет собой последовательность рисунков (кадров), которые демонстрируются беспрерывно, создавая впечатление движения (если, конечно, в каждом кадре имеются определенные отличия).

Программу Adobe ImageReady можно использовать для создания несложных анимаций. В программе для этого предусмотрены специализированная палитра Animation (Анимация) (рис. 1.20.1) и универсальная палитра Layers (Слои).

Рис. 1.20.1. Палитра Animation

Кадры (frames) анимации в палитре Animation (Анимация) добавляются с помощью кнопки New Frame (Новый кадр)( ) в нижней части палитры или одноименной команды меню палитры.

Выделение кадров

Для того чтобы выполнить какие-либо изменения в определенном кадре, его необходимо выделить (сделать активным). Содержание активного кадра отображается в рабочем окне.

Программа позволяет выделять кадры в произвольном сочетании (с использованием комбинации клавиш <Shift>+<Ctrl>), однако в рабочем окне отображается содержание первого активного кадра, который к тому же отмечается узкой рамкой (а остальные — только цветовой подсветкой).

Изменение порядка кадров и их удаление

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

• Для перемещения одного или нескольких выделенных кадров достаточно захватить один из них и перетащить в новое положение. Если перемещаемые кадры не были смежными, в новой позиции они становятся расположенными последовательно.

• Для изменения направления на обратное в совокупности выделенных кадров необходимо использовать команду Reverse Frames (Обратный порядок кадров) меню палитры.

• Для удаления выделенных кадров применяется команда Delete Frame(s) (Удалить кадры) меню палитры или кнопка Trash (Корзина).

• Для полного удаления анимации предназначена команда Delete Animation (Удалить анимацию) меню палитры (но стоит, конечно, перед этим несколько секунд подумать).

Копирование и вклеивание кадров

При копировании кадра с помощью команды Copy Frame(s) (Копировать кадры) меню палитры копируются не только собственно изображение, но и параметры слоя, на котором оно расположено. И, соответственно, при вклеивании кадра с помощью команды Paste Frame(s) (Вклеить кадры) меню палитры такие параметры переносятся в кадр назначения. При этом возникает "конфликт" с параметрами уже существующего кадра. Для его разрешения на экран выводится диалоговое окно Paste Frames (Вклеивание кадров) (рис. 1.20.2), в котором можно выбрать соответствующий переключатель.

• Replace Frames (Заменить кадры) служит для замены исходного кадра новым.

• Paste Over Selection (Вклеить над выделенным кадром) служит для вклеивания содержимого на новый слой.

• Paste Before Selection (Вклеить до выделенного кадра) или Paste After Selection (Вклеить после выделенного кадра) служат для вклеивания содержимого кадров до или после выделенного кадра.

• Флажок Link Added Layers (Связать добавляемые слои) устанавливается, если требуется связать слои, на которых расположены вклеиваемые кадры.

Рис. 1.20.2. Диалоговое окно Paste Frames

Автоматическая модификация кадров

Команда Tween (Промежуточные кадры) меню палитры Animation (Анимация) позволяет автоматически добавить модифицированную серию кадров, которая является интерполированием между двумя существующими кадрами. Модификация уже созданных кадров касается параметров слоев, а не собственно изображений на них: расположение, непрозрачность и эффекты. Для того чтобы эту функцию реализовать, необходимо выделить слой или кадр, а затем выполнить команду Tween (Промежуточные кадры) меню палитры или нажать на кнопку Tween (Промежуточные кадры) ( ) в нижней части палитры. В результате на экран выводится одноименное диалоговое окно (рис. 1.20.3).

• В группе переключателей Layers (Слои) можно выбрать диапазон, на который распространяется функция: All Layers (Все слои) или Selected Layer (Выделенный слой).

• В группе Parameters (Параметры) можно установить флажки в произвольном составе, определяющие тип автоматически изменяемых параметров: Position (Расположение), Opacity (Непрозрачность) и Effects (Эффекты).

• В списке Tween With (Модифицировать) можно определить направление модификации: Selection (Между выделенными кадрами), First Frame (От первого кадра), Last Frame (До конечного кадра), Previous Frame (Начиная с предыдущего кадра) или Next Frame (Заканчивая последующим кадром).

• В поле Frames to Add (Добавить кадры) с помощью счетчика можно указать количество промежуточных кадров.

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

Создание циклов

Анимация, как цельное произведение, может демонстрироваться (воспроизводиться) в цикле, параметры которого можно также определять. В палитре Animation (Анимация) в списке представлены следующие варианты:

• Once (Один раз);

• Forever (Непрерывно);

• Other (Иначе), на экран выводится диалоговое окно Set Loop Count (Количество циклов), в котором можно определить количество воспроизведений анимации в диапазоне от 1 до 30 000.

Время задержки у отдельных кадров

У каждого кадра можно определить время демонстрации, так называемое время задержки (delay), определяемое в секундах (и долях секунды). Для этого под каждым кадром расположен список с вариантами задержек. При выборе варианта Other (Иная) на экран выводится диалоговое окно Set Frame Delay (Задержка кадра), в котором можно определить произвольную величину задержки в диапазоне от 0 до 240 секунд.

Роль слоев для создания анимации

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

• изменения, относящиеся только к выделенным кадрам (frame-specific changes);

• глобальные изменения, относящиеся ко всем кадрам анимации (global changes).

Добавление слоев для кадра

Когда создается новый слой, он отображается во всех кадрах анимации. Для того, чтобы слой не отображался в определенном кадре, необходимо выделить этот кадр в палитре Animation (Анимация) и в палитре Layers (Слои) сделать слой невидимым (снять пиктограмму "Глаз" Для того чтобы всякий раз при создании кадра автоматически создавался пустой слой, надо активизировать команду Add Layer to New Frames (Добавить слой вместе с новым кадром) меню палитры. Это функция позволит экономить время при создании анимации с достаточно большим количеством кадров. Зависимость между содержанием кадра и содержанием слоев заключается в том, что у активного кадра содержанием является совокупность всех видимых слоев.

При использовании команд палитры Layers (Слои), которые изменяют вид слоя, эти изменения касаются только активных кадров. Для того чтобы изменения на слое влияли на все кадры, в которых он "принимает участие", необходимо активизировать команду Match Layer Across Frames (Соответствие слоя всем кадрам) меню палитры.

Методы диспозиции кадров

Методы диспозиции кадра (frame disposal methods) определяют, удалять ли и как удалять текущий кадр перед отображением последующего. Выбор одного из способов удаления кадров необходим при слияниях содержания последующих кадров.

Для выбора способа диспозиции необходимо щелкнуть правой кнопкой мыши на миниатюре кадра в палитре Animation (Анимация) и открыть контекстное меню, в котором представлены три варианта метода удаления:

• Automatic (Автоматический) - обеспечивает удаление текущего кадра, если у следующего кадра имеются прозрачные области на слоях;

• Do Not Dispose (He удалять) — обеспечивает сохранение текущего в момент отображения следующего кадра. Текущий кадр (как и несколько предшествующих кадров) может просвечивать сквозь прозрачные области последующего кадра

• Restore to Background (Восстановить до фона) — обеспечивает удаление текущего кадра перед демонстрацией следующего кадра. В каждый момент демонстрируется только один кадр (текущий кадр не будет просматриваться сквозь последующий кадр).

Преобразование кадров в слои

В процессе создания анимации содержание кадров может обеспечиваться содержанием разных совокупностей слоев, но в определенный момент это становится неудобным. Для того чтобы каждый кадр соответствовал определенному слою, предусмотрена команда Flatten Frames into Layers (Преобразовать кадры в слои) меню палитры.

Воспроизведение анимации

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

Последний вариант особенно удобен, если анимация готовится для Web-дизайна.

В нижней части палитры Animation (Анимация) представлен блок управления анимацией, напоминающий кнопки магнитофона или аудиоплейера:

• Play (Воспроизведение);

• Stop (Пауза);

• Rewind (Прокрутка).

Для просмотра анимации в программе-браузере используется кнопка инструмента Preview in Default Browser (Просмотр в браузере), расположенная в палитре инструментов. Этой же цели служит команда Preview In (Просмотреть в) меню File (Файл).

Для управления анимацией в последнем случае используются кнопки Stop (Остановить) и Reload (Обновить) браузера.