WEB Анимация
       

Палитра Анимация


Adobe ImageReady — это мощный и удобный инструмент для создания GIF-анимации. Каждая анимация представляется рядом кадров, для управления которыми предназначены как

палитра Animation (Анимация), так и палитра Layers (Слои). Если палитра слоев известна из растрового редактора Photoshop, то палитра анимации появляется только в программе ImageReady. Палитра Animation (Анимация) — это окно, в котором отображается последовательность кадров с возможностью их копирования, перемещения, удаления и организации в любом порядке. Чтобы отобразить ее в окне ImageReady, выполняют команду Window > Show Animation (Окно > Показать анимацию). Для сокращения места, занимаемого палитрой на экране, можно уменьшить размер изображения отдельного кадра на ней, что позволяет видеть одновременно большее число последовательных кадров при ее фиксированной ширине.

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

На рис. 3.8 цифрами обозначены следующие элементы управления палитры Animation (Анимация):

  • Раскрывающееся меню задержки со значениями (Delay menu).

  • Раскрывающийся список задания циклического повторения (Looping options).

  • Кнопка перехода к началу анимации (Rewind).

  • Кнопка перехода к предыдущему кадру (Backward).

  • Кнопка остановки воспроизведения (Stop).

  • Кнопка воспроизведения (Play).

  • Кнопка перехода к следующему кадру (Forward).

  • Кнопка расчета промежуточных кадров (Tween).



  • Кнопка создания нового кадра (New Frame).

  • Кнопка удаления кадра (Trash).

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

  • New Frame (Новый кадр) — создает дубликат выделенного кадра (быстрее можно выполнить это действие, если щелкнуть на кнопке Duplicates Current Frame, расположенной в нижней части окна палитры);

  • Delete Frame (Удалить кадр) — удаляет выделенный кадр (это действие также быстрее выполняется с помощью щелчка на кнопке с рисунком корзины в нижней части окна палитры);

  • Delete Animation (Удалить анимацию) — удаляет все кадры анимации;


  • Copy Frame (Копировать кадр) — копирует выделенный кадр;


  • Paste Frame (Вставить кадр) — вставляет в заданную позицию последний скопированный кадр;


  • Select All Frames (Выбрать все кадры) — выделяет все кадры анимации;


  • Tween (Промежуточный) — вызывает диалоговое окно создания заданного количества промежуточных кадров между двумя соседними кадрами;


  • Reverse Frames (Обратить кадры) — меняет порядок двух или нескольких выделенных кадров в анимации;


  • Optimize Animation (Оптимизировать анимацию) — уменьшает размер файла анимации с помощью средств Bounding Box и Redundant Pixel elimination;


  • Match Layer Across Frames (Подогнать слой под кадры) — позволяет при редактировании слоя с помощью палитры Layers (Слои) вставить изменения во все кадры анимации;


  • Make Frames From Layers (Сделать кадры из слоев) — создает кадры из слоев рисунка Photoshop;


  • Flatten Frames Into Layers (Свести кадры в слои) — объединяет слои в кадрах анимации в один слой;


  • Add Layer To New Frames (Добавлять слой для нового кадра) — позволяет при создании нового кадра создавать также новый слой, видимый только в этом кадре, для вновь появляющегося элемента изображения;


  • New Layers Visible in All Frames (Новые слои отображаются во всех кадрах) — разрешает отобразить вновь созданный слой во всех кадрах анимации;


  • Palette Options (Параметры палитры) — задает один из трех размеров изображения кадров на палитре.


    • После открытия файла изображения он представлен на палитре Animation (Анимация) как первый кадр последовательности. Новый кадр последовательности создается как копия предыдущего, после чего в него можно вносить изменения, используя палитру Layers (Слои) и инструменты ImageReady.

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



    Чтобы сделать кадр текущим, можно выполнить одно из следующих действий:

  • щелкнуть на изображении нужного кадра на палитре Animation (Анимация);


  • на палитрах Animation (Анимация) или Layers (Слои) щелкнуть на кнопке Forward (Вперед), чтобы сделать текущим следующий по порядку кадр;


  • на палитрах Animation (Анимация) или Layers (Слои) щелкнуть на кнопке Backward (Назад), чтобы сделать текущим предыдущий кадр;


  • на палитре Animation (Анимация) щелкнуть на кнопке Rewind (Перемотка), чтобы сделать текущим первый кадр анимации.


    • Чтобы выделить несколько кадров как группу, можно выполнить одно из следующих действий:

  • выделить первый кадр непрерывной группы и при нажатой клавише Shift щелкнуть по заключительному кадру выделяемой группы;


  • щелкать по кадрам, расположенным в произвольной последовательности, при нажатой клавише Ctrl;


  • выделить все кадры анимации можно командой Select All Frames (Выбрать все кадры) из раскрывающегося меню палитры Animation (Анимация).


  • Убрать кадр из выделенной группы можно, повторно щелкнув по нему при нажатой клавише Ctrl.


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

    Чтобы удалить выделенные кадры, можно выполнить одно из следующих действий:

  • воспользоваться командой Delete Frames (Удалить кадры) из меню палитры Animation (Анимация);


  • щелкнуть на кнопке Trash (Корзина) и подтвердить удаление щелчком на кнопке Yes (Да) диалогового окна;


  • перетащить мышью выделенные кадры на значок корзины палитры Animation (Анимация).


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



  • Replace Frames (Заменить кадры) — позволяет заменить выделенные кадры скопированными. При вставке кадров в то же самое изображение к нему не добавляются новые слои, а заменяются только их атрибуты теми, что были в скопированных кадрах. При вставке кадров в новое изображение к нему добавляются новые слои, и им присваивается свойство visible (видимый), старым же слоям присваивается свойство hidden (скрытый).


  • Paste Over Selection (Вставить в выделенные) — добавляет содержимое вставляемых кадров в качестве новых слоев изображения. При вставке кадров в то же самое изображение число слоев в нем удваивается, причем вставленные слои в кадрах назначения будут видимыми, а существовавшие ранее — скрыты. В остальных кадрах анимации вставленные слои будут скрыты.


  • Paste Before Selection (Вставить перед выделением) или Paste After Selection (Вставить после выделения) — добавляет скопированное число кадров перед или после выделения, причем новые слои добавляются к изображению и будут видимы только во вновь добавленных кадрах, в которых существовавшие до вставки слои изображения будут скрыты.


    • Флажок Link Added Layers (Связать добавляемые слои) позволяет связать вставляемые слои и затем одновременно изменять их позицию. По щелчку на кнопке ОК выполняется выбранный способ вставки.



    Рис. 3.9. Выбор способа вставки скопированных кадров

    В ImageReady каждый слой рассматривается как отдельный элемент анимации. Используя команды и параметры палитры Layers (Слои), можно задавать нужные изменения, добиваясь создания анимационных эффектов в изображении, так как изменения будут влиять только на выделенные кадры. Можно менять положение объекта, его прозрачность, а также рассчитывать промежуточные кадры, используя команду Tween (Промежуточный). Изменения, выполненные на палитре Layers (Слои), можно применить ко всем кадрам, если выполнить команду Match Layer Across Frames (Подогнать слой под кадры).

    Однако изменения объекта, влияющие на параметры пикселов (такие, как раскраска, изменение тона или цвета, трансформации), оказывают влияние на все кадры анимации, в которых представлен данный объект. Для анимации подобных свойств следует создавать отдельные слои с разными параметрами для каждого изменяемого кадра, задавая соответствующий режим видимости.



    Применение эффекта к слою- маске воздействует на все кадры, в которых представлен этот слой, однако при этом маска может дополнительно изменять свое положение.

    Создание анимации изменением параметров слоев выполняется достаточно просто и предоставляет, если сохранить ее в формате документа Photoshop, дальнейшую возможность ее редактирования. При создании анимации в Image- Ready анимируемые объекты следует размещать на разных слоях, связывая эти слои в группы.

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



    Рис. 3.10. Выбор параметров при расчете кадров

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

    Затем в раскрывающемся меню выбирается команда Tween (Промежуточный) либо выполняется щелчок по одноименной кнопке палитры Animation (Анимация). В открывшемся окне Tween (Расчет промежуточных кадров) задаются следующие параметры:

  • Выбирается одно из значений переключателя Layers (Слои):


    • All Layers (Все слои) — выполняет расчет для всех слоев в выделенных кадрах;


    • Selected Layer (Выделенный слой) — выполняет расчет только для выбранного слоя выделенных кадров, что требует предварительного выделения этого слоя на палитре Layers (Слои).




    • Снимаются или устанавливаются флажки свойств, для которых выполняется расчет:


      • Position (Положение) — для расчета изменения положения слоя в кадрах;


      • Opacity (Непрозрачность) — для изменения значения коэффициента прозрачности в рассчитываемых кадрах;


      • Effects (Эффекты) — для изменения величины эффекта в рассчитываемых кадрах.


      • Указывается количество вставляемых кадров. Если выделено более двух кадров, то этот параметр недоступен.


        • Щелчок на кнопке ОК приводит к созданию заданного числа кадров, которые затем можно редактировать по отдельности.

        Время демонстрации каждого кадра в секундах указано под изображением кадра. Чтобы его изменить, следует выделить один или несколько кадров и щелкнуть на величине времени задержки, что вызовет меню с набором постоянных значений. Выбор значения Other (Другое) открывает диалоговое окно Set Frame Delay (Время кадра), в котором можно задать произвольное число секунд. После щелчка на кнопке ОК это время будет присвоено всем выделенным кадрам анимации. Следует отметить, что при просмотре анимации в ImageReady время демонстрации кадров может отличаться от установленного. Поэтому просмотр следует выполнять в браузере, где это время точно выдерживается.

        Создаваемая анимация при воспроизведении может быть повторена заданное число раз. Для этого щелчком на раскрывающемся списке Selects looping option (Выбор параметров повторения), расположенном в левом нижнем углу палитры Animation (Анимация), выбирается одно из значений списка: Once (Однократно), Forever (Бесконечно) или Other (Другое). В последнем случае в диалоговом окне Set Loop Count (Число повторов) вводится нужное числовое значение.

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

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



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


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


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


        • Для методов Do Not Dispose (He удалять) и Restore to Background (Восстановить фон) у рисунков кадров появляется специальная отметка Disposal Method icon, указывающая на тип метода.



        Рис. 3.11. Различия методов смены кадров

        На рис. 3.11 представлены результаты воспроизведения анимации с прозрачным фоном для параметров смены кадра Restore to Background (первый ряд) и Do Not Dispose (второй ряд).

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

        Открывая в ImageReady файл Photoshop, содержащий несколько слоев, каждый слой можно сделать отдельным кадром анимации. Для этого в меню команд палитры Animation (Анимация) предусмотрена команда Make Frames From Layers (Создать кадры из слоев), разбирающая слои по кадрам, после чего файл можно сохранять как анимированный GIF с выбранными параметрами оптимизации.


        Содержание раздела