Электронные издания
Шрифт:
Со второй половины 2000 года отмечается быстрый рост интереса и потребностей в средствах создания GIF-файлов. На платформе Windows для этого традиционно чаще других используются программы GIF Animator фирмы Ulead System, Microsoft GIF Animator и GIF Construction Set фирмы Alchemy Mindworks. В качестве примера рассмотрим подготовку анимационного файла с помощью широко известной версии 2.0а последней программы. На рис. 4.45 представлен ее исходный интерфейс – заставка.
Создание анимационного GIF-файла во всех перечисленных программах включает в себя 2 этапа: собственно создание такого файла и его последующая оптимизация. Процесс создания файла состоит в поочередном добавлении графических изображений в структуру GIF-файла. Все 3 упомянутые выше программы могут добавлять отдельные кадры в анимацию не только из файлов, но и из буфера обмена оболочки Windows. Важным дополнительным достоинством программ является возможность создания анимации на основе лишь 2 изображений: начального и конечного. Промежуточные изображения генерируются программой автоматически с помощью одного из нескольких возможных эффектов, например, наплыва нового изображения поверх старого, смены листа бумаги, на котором формируется изображения и пр.
Анимационный файл всегда содержит один блок заголовка HEADER и несколько блоков с отдельными изображениями IMAGE , которым могут предшествовать блоки управления CONTROL . В начале работы по составлению анимационного файла программа формирует рабочее окно,
Как следует из рис. 4.46 блок заголовка HEADER содержит информацию о размерах логического экрана в пикселах, что определяет размер прямоугольной области, внутри которой будет размещаться анимационное изображение. Для каждого отдельного кадра анимации задается смещение в пикселах относительно верхнего левого угла логического экрана.
Пользователь может самостоятельно изменять размеры логического экрана. При этом следует иметь в виду, что, если хотя бы один из кадров выйдет за пределы логического экрана, то это вызовет в браузере неустранимую ошибку и приведет к прекращению его работы. Для включения в анимацию отдельного кадра можно воспользоваться командой Insert block | Image меню Edit или буфером обмена, куда предварительно было помещено изображение, и командой Paste . Сказанное иллюстрируется рис. 4.47.Редактирование блока Image состоит в изменении координат смещения левого верхнего края кадра относительно логического экрана и использовании или отказе от локальной палитры. При добавлении кадра в список блоков файла автоматически выполняется сравнение его палитры с глобальной. Если какой-то оттенок отсутствует в глобальной палитре, то предлагаются варианты замены этого тона на имеющиеся в палитре.
После того как все кадры изображения помещены в анимационный GIFфайл начинается работа с управляющими блоками: глобальным и локальными. С помощью локального блока можно задать для каждого кадра изображения временную задержку, локальную палитру, положение на логическом экране, способ удаления и прочее. Рассматриваемая программа и аниматор фирмы Microsoft позволяют выделить несколько локальных блоков и сразу для всех определить значения параметров.
Полученные результаты можно предварительно оценить путем просмотра GIF-файла (кнопка Views the current animation в панели инструментов с пиктограммой очки на рис.4.46 или же команда View (просмотр) в меню Block на рис.4.48). Однако результаты просмотра не всегда совпадают с тем, что будет получено при отображении файла браузером. Команды меню Block позволяют выполнять операции по преобразованию отдельных кадров изображения, помещенного в анимационный файл. Как показано на рис. 4.48, можно использовать команды Resize (изменять размер изображения), Flip and Rotate (получать его зеркальное отражение и вращать), Reverse (негатив), Colour and Balance (настраивать цвета), Crop (кадрировать) и пр.
В пакете предусмотрена возможность автоматического преобразования Movie – фрагмента цифрового видео из формата AVI в анимационный GIFфайл. Для этого следует выбрать команду Movie | Movie to GIF меню File (рис. 4.49). В этом же меню имеется команда Animation Wizard (вызова мастера анимации), применение которого позволяет упростить и ускорить процесс создания анимационного файла. В этом случае пользователь должен только отвечать на ряд последовательно задаваемых ему вопросов в форме установки значений переключателей. В качестве примера на рис. 4.50 приведен один из рабочих экранов мастера анимации. Пользователь должен ответить на вопрос о формате изображений, входящих в состав анимационного файла: подготовлены они в растровом формате ( Photorealistic ), т. е. оцифрованы с помощью сканера, или созданы в растровом пакете компьютерной графики, или же – в векторном формате ( Drawn ). Кроме того, требуется указать, какая необходима палитра для передачи цветовых оттенков изображений: ограничиться ли одной глобальной палитрой ( Matched to first palette ), использовать расширенную цветовую палитру ( Matched to super palette ) или же (для векторного формата) ограничиться 16 цветами ( Drawn in sixteen colours) (рис. 4.50 ).Возможно создание анимационной бегущей строки в виде нескольких отдельных ее изображений, а также специальной бегущей строки, имитирующей световую рекламу. Наконец, возможно, как уже упоминалось в запросе мастера анимации, использование расширенной палитры цветов ( Matched to super palette ), число оттенков в которой превышает 256.
На рис. 4.51 представлен результат просмотра подготовленного GIF-файла, содержащего несколько блоков изображений. Так как блоки одновременно не помещаются слева в своем рабочем окне, в нем автоматически создан маркер прокрутки. Для каждого из блоков, показанных в окне, выведены размеры, величина смещения и миниатюра данного кадра изображения.
В процессе разработки анимационного файла следует придерживаться некоторых рекомендаций:
✓ по мере возможности не пользоваться локальными цветовыми палитрами, так как иногда их применение приводит к искажениям отдельных тонов;
✓ прозрачный тон следует задавать только глобально, так как локальные палитры прозрачность не поддерживают;
✓ следует тщательно проверять размер кадров, так как если изображение не помещается на логическом экране, то это может привести к многим нежелательным последствиям, в том числе и аварийному завершению работы браузера.Для уменьшения суммарного размера полученного анимационного файла следует провести его оптимизацию. Во время этого процесса осуществляется удаление избыточной информации из файла и оптимизация локальных палитр. Последняя состоит в максимальном использовании глобальной палитры и уменьшении количества оттенков в локальных. Возможность удаления избыточной информации определяется подобием и сходством соседних кадров изображения. В частности, можно вручную удалять из каждого последующего кадра повторяющуюся часть рисунка и выбирать его координаты на логическом экране таким образом, чтобы хорошо передать эффект движения.
Программа GIF Construction Set Professional фирмы Alchemy Mindworks (как и программа GIF Animator фирмы Ulead System) выполняет автоматически основную часть работы по оптимизации, что является важным преимуществом по сравнению с аналогичной программой фирмы Microsoft. Для этой цели после окончания работы по созданию файла используется команда автоматической оптимизации – Supercompress , расположенная в меню File (Файл) (см. рис. 4.49).
В 2000 году появились новые, более мощные версии всех трех описанных пакетов для создания анимационных файлов. В частности, фирма Ulead разработала GIF Animator 4.0, который, по их мнению, является самым быстрым и наиболее простым в применении для производства мощных анимационных GIF-композиций. В него, в частности, включена опция для непосредственного размещения анимации на странице сайта, а также автоматический оптимизатор цветовой палитры. Возможна пробная загрузка полнофункциональной версии аниматора с сервера фирмы Ulead. Количество аниматоров в последние годы растет в геометрической прогрессии. Кратко остановимся на некоторых из них. GIF Movie Gear – аниматор высокого класса, позволяет обрабатывать отдельные кадры, осуществлять чересстрочную загрузку анимационных изображений, выполнять оптимизацию палитры путем сокращения числа используемых оттенков.
Xara 3D – многофункциональный качественный 3D-аниматор текстовых надписей. Он характеризуется дружественным интерфейсом, простотой в использовании и не требует наличия художественных навыков. Объем около 895 Кбайт.
AniMagic GIF Animator – простой аниматор, позволяет сжимать полученные файлы до 4 раз. Пригоден для создания анимационных изображений и баннеров. Объем около 450 Кбайт. Подобные же характеристики имеет HVS Animator Pro, объем которого 309 Кбайт.4.8. Подготовка GIF-анимации в интегрированном пакете Photoshop – ImageReady
Известно, что программный пакет Photoshop уже много лет занимает лидирующее положение в издательском деле и полиграфии. Однако длительное время фирма Adobe не предпринимала специальных усилий для адаптации его к нуждам Web-дизайнеров и специалистов по подготовке электронных публикаций. Лишь во второй половине 90-х годов была сделана попытка выпуска специализированного редактора растровой Web-графики – ImageReady 1.0. По существу это был тот же Photoshop, лишенный множества специальных функций – таких как цветовая и тоновая коррекция, настройка печати, управление цветом, работа с цветовыми каналами. Дополнительно в редактор были включены средства оптимизации изображений для основных сетевых форматов: JPEG и GIF. Редактор не пользовался особой популярностью. Поэтому фирма Adobe предложила пользователям альтернативный вариант – интегрированный графический пакет Photoshop 5.5 и ImageReady 2.0, в котором пользователь имел возможность пользоваться привычным пакетом Photoshop для подготовки обычной графики, переходя в ImageReady в тех случаях, когда необходимо было адаптировать эти изображения к использованию в сети Интернет.
Следующая версия этого пакета 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-страницы.
Из инструментов, представляющих интерес при разработке 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.