Следующая версия этого пакета Photoshop 6.0 и ImageReady 3.0 была значительно усовершенствована как в части растровой графики, так и Webдизайна. Именно на ней мы остановимся подробнее. Прежде всего, отметим, что, как и в предыдущей версии, используются по существу две различные программы. В результате на 32 Мбайта увеличивается потребность в оперативной памяти при одновременном запуске Photoshop и ImageReady. Большее пространство необходимо и для организации виртуальной памяти с помощью жесткого магнитного диска. Даже передача изображения из одного пакета в другой производится с организацией промежуточного файла на жестком диске. Тем не менее, пользователь получает, как это будет видно из дальнейшего описания, множество дополнительных возможностей и удобств, что уже сделало это программное средство достаточно популярным.

Интерфейс пакета ImageReady 3.0 представлен на рис. 4.52. Внешне он напоминает интерфейс Photoshop 6.0. Похожая панель инструментов и ряд других палитр, но есть и существенные различия. Прежде всего, они проявляются в развитых и удобных для пользователя средствах оптимизации графического файла. Для этого в окне любого графического документа имеются 4 вкладки: исходное или изображение (original), оптимизированное изображение (optimized), два варианта изображения (исходное и оптимизированное или два оптимизированных с различными параметрами оптимизации) – 2-up и 4 варианта изображения, из которых пользователь может выбрать наилучший по его визуальной оценке (4-up). Именно этот последний вариант представлен на рис. 4.52. В каждой из 4 областей изображения помимо самого изображения указывается, в каком типе файла оно сохранено, каковы его характеристики качества, информационный объем графического файла и время его передачи по сети при заданной пропускной способности. В примере на рис. 4.52 это время изменяется от 28 до 9 секунд при пропускной способности сети в 28,8 Кбит/с.

Другое важное отличие пакета ImageReady состоит в использовании специальных палитр, таких как Animation (Анимация) и Rollover (Ролловер). На рис. 4.52 эти палитры показаны в нижней части рисунка в виде единого блока, в который также входят Image map (Карта ссылок) и Slice (Фрагмент). Именно эта группа палитр отличает ImageReady от Photoshop. Палитра Animation позволяет создавать анимационные GIF-файлы, а палитра Rollover – интерактивные элементы Web-страницы.

Рис. 4.52. Интерфейс пакета Adobe ImageReady 3.0

Из инструментов, представляющих интерес при разработке Web-страниц, отметим размещенное в 3-ей строке первой колонки панели инструментов средство для создания и выбора областей карты ссылок. Области могут быть трех видов: прямоугольные, круглые и многоугольные. Инструмент Фрагмент , расположенный в той же строке, что и Карта ссылок , но в правом столбце, позволяет разрезать изображение на прямоугольные фрагменты (собственно Фрагмент ) и выбрать нужный из них ( Выбор фрагмента ).

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

Возможно использование одного из 2 способов создания анимационных GIF-файлов. В первом случае задается исходное и конечное состояния объекта анимации и количество промежуточных изображений или состояний, причем сами промежуточные изображения создаются в пакете ImageReady автоматически. Такой вариант, как мы уже отмечали, используется и во многих других программных средствах для создания анимации. Другой подход состоит в том, что слоистая структура изображения, используемая как в пакете Photoshop, так и в ImageReady, обеспечивает создание анимации. Средствами последнего расположенные в отдельных слоях изображения можно автоматически преобразовать в изображения, хранимые в анимационном GIF-файле. Нетрудно заметить, что второй способ является более общим: он пригоден не только в тех случаях, когда требуется передать движение, перемещение одного или нескольких объектов, но и тогда, когда отдельные изображения в анимационном файле не связаны или слабо связаны друг с другом. Первый же способ является более простым, т. е. требует меньших усилий от разработчика. Остановимся на обоих этих способах более подробно.

Вначале рассмотрим на примере – как создать анимацию, зная начальную и конечную позиции движущегося объекта. Пусть у нас имеется некий пейзаж, который мы будем использовать как фон, на котором мы наблюдаем движение некоторого объекта. В качестве объекта можно выбрать самолет. На рис. 4.53 показан пейзаж, основой которого является озеро. Затем мы открываем изображение самолета и копируем это изображение в дополнительный слой пейзажа. Для этого следует открыть оба изображения в рабочем окне пакета Photoshop 6.0 и активизировать изображение самолета. Далее в меню палитры Слои выберем команду Дублировать слой и в открывшемся диалоговом окне Копировать слой (рис. 4.54) укажем имя нового слоя (Layer 2) и документ, в котором он размещен.

После этого преобразования в предыдущем рисунке (см. рис. 4.53) появится еще один слой, в котором будет размещен самолет. Далее переключимся в пакет ImageReady, для чего имеется команда Перейти к в меню Файл . Здесь следует активизировать палитру Animation , в которой мы увидим миниатюру нашего двухслойного изображения: самолет на фоне облаков пейзажа с озером. Как показано на рис. 4.55, самолет расположен в левой верхней части изображения (соответственно и миниатюры). На рис. 4.55 представлено первое (или начальное) изображение для будущей анимации. Именно под таким номером оно отображается в палитре Animation . Теперь следует создать конечное изображения. Для этого в меню палитры Animation , показанном на рис. 4.56 следует выбрать команду Новый кадр . После этого в палитре Animation появится еще одна миниатюра, теперь с номером 2. Это и будет последний кадр анимации. Поэтому активизируем в нем тот слой, где находится изображение самолета и с помощью инструмента Перемещение (Move Tool) из панели инструментов пакета сдвинем изображение самолета к правой кромке рисунка. Это и будет конечный кадр анимации. Ему соответствует изображение, представленное на рис. 4.57.

Рис. 4.53. Пейзаж с озером

Далее сам ImageReady автоматически создаст промежуточные кадры анимации. Для этого воспользуемся командой Промежуточный меню палитры Animation . Эта команда активизирует очень важное диалоговое окно Tween (промежуточные кадры), представленное на рис. 4.58. Остановимся подробнее на установках, которые можно осуществить с помощью этого окна. В верхней части окна расположен переключатель Layers (Слои). Он находится в одной из 2 позиций: All Layers (Все слои) или Selected Layer (Выбранный слой). В нашем случае начальное и конечное изображения связаны с различными слоями, поэтому следует установить этот переключатель в первую позицию.

Рис. 4.54. Диалоговое окно Копировать слой

Рис. 4.55. Пейзаж с самолетом и палитры Animation и Слои

Рис. 4.56. Пейзаж с самолетом и палитра Слои , а так же Animation с открытым контекстным меню

Группа флажков Parameters (Параметры) задает способы и средства создания анимации, иначе говоря, здесь задаются те параметры, которые изменяются от одного кадра анимации к другому. В частности, флажок Position (позиция) определяет такой вид анимации, при котором от кадра к кадру изменяется положение объекта. Иначе говоря, с помощью этой опции анимация задается путем перемещения объекта. Флажок Opacity (непрозрачность) определяет анимацию в форме изменения прозрачности объекта. Установка флажка Effects позволяет задать параметры тех или иных эффектов. В раскрывающимся списке Tween with (переход между) определяется между какими кадрами следует вставлять промежуточные изображения. В списке предусмотрены 3 различных значения: Selection (выбор), First Frame (первый кадр) и Previous Frame (предыдущий кадр). В приведенном на рис. 4.57 примере активен 2-ой кадр, поэтому установлено по умолчанию значение Previous Frame , т. е. промежуточные кадры будут вставлены между 1-ым и 2-ым (текущим) кадрами. Наконец, внизу окна Tween имеется счетчик Frames to Add (количество добавляемых кадров). В примере на рис. 4.58 эта величина установлена равной 5. Естественно, что чем больше промежуточных кадров, тем более плавно, незаметнее будут изменения от кадра к кадру в процессе анимации. Но при этом пропорционально возрастает размер анимационного GIF-файла. В результате выполнения всех описанных операций мы получим изображение, представленное на рис. 4.59. В палитре Animation имеется уже 7 кадров, активен из них самый первый. В нижней части этой палитры предусмотрены органы управления видеоплеером. Нажав на кнопку Проигрывание (светлый треугольник, острый угол которого направлен вправо) мы увидим последовательную активизацию кадров в палитре при одновременном изменении положения самолета в верхней части рисунка.

Рис. 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 .