Сайты с мультимедийным содержимым

Динамическая графика

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь (115 МБ).

Одной из ключевых проблем, с которой сталкивались многие люди в предыдущих версиях Flash, являлась сложность обновления содержимого сайта. Можно было обновлять текст с помощью команды loadVariables, но картинки всегда должны были быть включены во Flash SWF. В предыдущих версиях Flash для обновления включенных рисунков в готовом фильме Flash приходилось заново редактировать их во FLA или использовать Macromedia Generator и сложные настройки базы данных. Этот длительный процесс мог стоить немалых денег клиенту, а его осуществление подразумевало знание Generator и настройки базы данных.

Теперь, в Macromedia Flash MX, все по-другому. Рисунки JPEG можно обновлять так же легко, как на странице HTML, с помощью loadMovie. В этой лекции будут рассматриваться наиболее эффективные методы добавления высококачественных графических файлов на сайт. Я расскажу о том, как эффективно сжимать рисунки JPEG, динамически загружать их во Flash и покажу несколько примеров использования этого метода на практике, в том числе с предварительной загрузкой и постепенным появлением рисунков.

Оптимизация JPEG

Одной из самых раздражающих меня особенностей современных сайтов является огромное количество некачественно сжатых рисунков. Очень неприятно посещать обильно "украшенный" сайт и долго ждать, пока загрузятся многочисленные и плохо сжатые рисунки JPEG. Это занимает канал и просто надоедает. Как же нужно сжимать изображения JPEG? Не существует "правильных" или "неправильных" методов, они могут отлично работать для одного рисунка и быть совершенно неприменимыми к другому. Macromedia Fireworks считается лучшим средством сжатия для создания веб-графики, но и команда Save for Web в Adobe Photoshop работает не хуже. Fireworks в большинстве случаев создает файлы с меньшим размером, и с ним намного легче работать.

В следующем упражнении мы кратко рассмотрим способы эффективного сжатия графики, оптимизации и доведения ее до готовности при вызове Flash. Мы будем использовать Macromedia Fireworks MX. Если у вас не установлена эта программа, вы можете загрузить пробную версию с сайта www.macromedia.com/software/trial_download.

Если вы уже используете Adobe Photoshop (версии 5.5 или новее), то следующее упражнение будет похоже на процедуру, выполняемую командой File > Save for Web.

Мы не будем использовать конечный рисунок, так как это упражнение является лишь кратким введением в принципы, нужные вам для работы с вашими рисунками, однако если вы хотите досконально разобраться в упражнении, найдите фотографию на жестком диске, предпочтительно ту, которая содержит некоторый текст (исходный файл bracken.psd находится в папке images для этой лекции на компакт-диске).

Расположение несущих столбцов

Если вы откроете рисунок во Fireworks, то заметите, что эта программа очень похожа по своей структуре на Flash MX, в особенности, аналогичной раскладкой всплывающих панелей в правой части, а также Property inspector внизу.

Fireworks содержит много средств управления рисунками; помимо создания JPEG, здесь есть все необходимое для выполнения следующего упражнения, в котором мы будем рассматривать возможности Fireworks по оптимизации JPEG для интернета (эту задачу данная программа выполняет лучше всех остальных приложений).

Открыв рисунок, вы увидите, что окно документа имеет четыре различных вкладки вверху с именами Original, Preview, 2-Up и 4-Up. Если вы щелкнете на вкладке 2-Up и перетащите окно документа в сторону, вы увидите два варианта вашего рисунка, что позволяет сопоставлять любые внесенные изменения в обновленном изображении (справа) с исходным рисунком (слева).

Теперь рассмотрим оптимизацию рисунка с помощью наиболее подходящего способа сжатия.

1. Откройте панель Optimize (Window > Optimize) и в ниспадающем меню Export file format выберите пункт JPEG. Качество JPEG по умолчанию установлено на значение 80%, однако вы можете подвигать бегунок Quality, чтобы увидеть, как это повлияет на рисунок в области просмотра (см. рис. вверху следующей страницы).
2. Щелкните на значке дополнительных параметров в правой верхней части панели Optimize и убедитесь, что отмечена опция Sharpen JPEG Edges.
   

   
   

   Здесь необходимо обратить внимание на две опции: Progressive JPEG и Sharpen JPEG Edges. Progressive JPEG ("продвинутый" JPEG) появляется до своей полной загрузки. Вы будете часто видеть, что на страницах HTML, содержащих рисунки JPEG, эти рисунки будут увеличивать четкость отображения по мере загрузки. На момент печати данной книги, попытки загрузить Progressive JPEG во Flash с помощью команды loadMovie были безуспешны. Необходимо помнить это, чтобы потом не расстраиваться из-за того, что ваши картинки просто не будут отображаться на тех местах, где они должны быть! Так как Flash не может динамически отгружать Progressive JPEG с помощью команды loadMovie, лучше пока не использовать этот способ оптимизации.

   Команда Sharpen JPEG Edges (четкость границ JPEG) довольно полезна. Ее использование значительно увеличивает размер файла, но также улучшает рисунки, содержащие много резких границ. Это хорошая возможность для эксперимента с каждым JPEG для того, чтобы посмотреть, какие рисунки выглядят лучше, а какие хуже, в области предварительного просмотра. Тем не менее, иногда лучше выключать эту опцию и увеличивать вместо этого параметр Quality. Здесь можно действовать только "методом проб и ошибок".

   

   
   
3. Каждый раз при понижении качества JPEG первое, что вы будете замечать -ухудшение качества отображения текста. Используйте команду Zoom для увеличения любого текста вашего рисунка, и затем попытайтесь уменьшить параметр Quality в панели Optimize. Будет наблюдаться эффект "сегментации" (значение параметра равно 30).
   

   
   

   Другая полезная опция - Selective JPEG quality. Эта "умная" возможность позволяет выбирать определенную область JPEG и экспортировать ее с более высоким качеством по сравнению с остальной частью рисунка. Эта возможность особенно полезна применительно к рисункам, содержащим текст.
4. Опробуем эту возможность. Сначала убедитесь, что вам подходят средние настройки Quality в панели Optimize, и затем выберите область рисунка, которую вы хотите экспортировать с улучшенным качеством, используя средства Marquee или Lasso. В этом случае выберите Modify > Selective JPEG > Save Selection as JPEG Mask, чтобы выбрать необходимые области (удерживайте клавишу (Shift), чтобы выбрать несколько областей).
   

   
   
5. Выбранная область теперь будет выделена розовым цветом. Теперь в панели Optimize можно настроить параметр Selective Quality для достижения наилучших результатов. По умолчанию это значение равно 90%, что, как правило, является наиболее подходящим значением для таких областей, как текст. При увеличении качества, начиная с 90%, размер файла сильно возрастает, а качество остается примерно таким же.
   

   
   
   

   
   
6. Как только вы будете удовлетворены настройками рисунка, выберите File > Export: и сохраните его с опцией Images Only (нам не нужно принимать во внимание какие-либо HTML-настройки).
   

   
   

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