Записки
     из интернета

Анимация PSD-файлов Photoshop в Flash

14 Октябрь 2009 . Alex пишет -

В прошлой статье мы остановились на том, что я пообещал рассказать вам о том, как происходит анимация многослойных фотошоповских файлов в FLASH. В этой статье будет показано, как воссоздать файл Photoshop на слоях Flash. Процесс рассматривается во всех подробностях, потому что они весьма поучительны (и к тому же бесплатны!), хотя модуль Photoshop PSD2FLA от сторонней фирмы Media Lab существенно упрощает этот процесс. Вероятно, читатели, работающие с Director, помнят Media Lab как разработчика PhotoCaster, популярной и почитаемой надстройки для импортирования PSD-файлов в Director.

Если в системе установлен QuickTime версии 4.0 и выше, PSD-файл можно импортировать прямо в Flash. Скорее всего, Flash сообщит, что файл импортировать не удается, но предложит импортировать его через QuickTime. Щелкните на кнопке Yes, и изображение будет успешно импортировано.
ПРИМЕЧАНИЕ
В процессе импортирования Flash описывает файлы .psd как «графику Photoshop версий 2.5, 3», однако при импортировании через QuickTime Flash обрабатывает файлы гораздо более поздних версий Photoshop. Но при импортировании файлов через QuickTime возникает проблема: импортированные файлы «сплющиваются» и в них теряется разбиение на слои. Если учесть, что единственной разумной причиной для импортирования PSD (вместо веб-форматов вроде JPEG) является использование внутренней информации слоев, становится очевидно, что способ импортирования через QuickTime отнюдь не идеален.
В этой статье мы научимся импортировать PSD-файлы таким образом, чтобы их можно было эффективно воссоздать в Flash для создания анимаций с сохранением значительной части исходных данных слоев.
Работа начинается с Photoshop: обрежьте/масштабируйте PSD-файл так, чтобы полученное изображение подходило для использования в Web (то есть его размеры не превышали 500 х 500 пикселов).
Результат значительно улучшается при пошаговом масштабировании графики. Например, изображение 1000 х 1000 сначала уменьшается до 900 х 900, затем до 800 х 800 и т. д. вплоть до 500 х 500; итоговое изображение получается более качественным и оставляет больше свободы выбора для последующего сжатия.
Существует и другая причина для уменьшения изображения: технология Flash плохо приспособлена для тех операций с растрами, которые мы собираемся выполнять - она лучше подходит для векторной графики. Чтобы обойти это ограничение, необходимо позаботиться о том, чтобы Flash не приходилось изменять слишком много информации на экране за один кадр. Уменьшение размеров растра до разумных пределов поможет решить эту задачу.
Следующий шаг - уменьшение количества слоев до минимума за счет объединения (консолидации) как можно большего их числа. Чтобы получить нормальное быстродействие в Flash, необходимо оставить не более пяти-шести слоев. Также рассмотрите возможность удаления всех текстовых и других слоев, которые можно воссоздать средствами Flash.
В нашем примере убран весь текст, кроме названия (наверху слева). Удаляемый текст заменяется более четким векторным текстом при последующей обработке изображения в Flash. Название было сохранено в исходном виде, поскольку к нему были применены эффекты Photoshop, которые трудно воспроизвести средствами векторной графики.
На следующем шаге каждый слой экспортируется в отдельный файл PNG. Выполните для каждого слоя в документе Photoshop следующие действия:
1) скройте все слои, кроме экспортируемого;
2) выполните команду File • Save As и сохраните изображение в формате PNG;
3) после экспортирования всех слоев перезагрузите все файлы PNG, окруженные значительными пустыми участками и обрежьте их, удалив лишние пикселы с нулевым альфа-каналом.
Вернитесь к исходному файлу PSD и оставьте окно Photoshop открытым (или сделайте экранную копию изображения, если в системе не хватает памяти для одновременного открытия Flash и Photoshop). Позднее мы еще вернемся к нему.
В Flash задайте размеры сцены по размерам PSD. Импортируйте все PNG-файлы в библиотеку командой File • Import • Import to Library (Flash MX 2004) или File • Import to Library (Flash MX).
Чтобы организовать эффективную анимацию растровых изображений, лучше всего преобразовать (а точнее, «инкапсулировать») каждый растр в анимационный клип - после этого с растрами можно будет использовать методы и анимационные переходы, поддерживаемые для анимационных клипов.
1. Последовательно перетащите каждое растровое изображение из библиотеки на сцену.
2. Выделите растр.
3. Нажмите клавишу F8 и создайте на базе растра символ анимационного клипа. Для предотвращения путаницы рекомендуется присвоить клипам те же имена, что и у растров, но снабдить их суффиксом _тс.
Когда все будет готово, вы получите набор растров с прозрачными фонами и сможете разместить их на сцене Flash по аналогии с тем, как они размещались в оригинале PSD
Вручную разместите клипы на временной диаграмме (или на другом клипе - в зависимости от того, как будет организован вывод) в тех же порядке и позиции, в которых они следовали в исходном PSD-файле. Если потребуется, имитируйте эффекты слоев Photoshop (такие как Darken, Multiply и т. д.) при помощи цветовых эффектов Flash. Естественно, при желании можно внести изменения, чтобы веб-версия Flash отличалась от печатной версии Photoshop.
Процесс композиции завершается оптимизацией растровых изображений; для этого щелкните на каждом растре в библиотеке правой кнопкой мыши (Windows) или с нажатой клавишей §€ (Мае) и задайте для него параметры экспортирования. Обычно наилучший компромисс между размерами и качеством достигается при следующих параметрах:
• фото (JPEG);
• без сглаживания;
• качество в интервале от 30 до 50%.
При выборе качества следует помнить, что растры образуют многослойную композицию, поэтому большая часть шума, обусловленного высоким коэффициентом сжатия, будет скрыта слоями и полупрозрачным наложением. Чтобы определить минимальный порог снижения качества, следует оценить общее восприятие композиции. Возможно, для некоторых нижних слоев окажутся приемлемыми коэффициенты сжатия 20% и менее.
ПРИМЕЧАНИЕ
Flash позволяет экспортировать растровое изображение с альфа-каналом одновременно с применением сжатия JPEG!
Итак, у нас имеется отправная точка для построения анимации. Теперь с каждым элементом композиции можно выполнить следующие действия:
• анимацию с использованием кадрирования (задайте на панели свойств параметру Tween значение Motion);
• присвоение имени экземпляра и динамическую анимацию средствами Action Script.
Далее в композицию добавляются отсутствующий текст и векторные элементы, удаленные из оригинала (или в Flash-версии создаются новые векторные элементы). Как упоминалось ранее, анимация растровых изображений может привести к заметному торможению работы Flash. Впрочем, практический опыт показывает, что для получения нормального результата нужно либо ограничиться анимацией одного слоя в любой момент времени, либо свести до разумных пределов количество изменений между двумя кадрами.
Таким образом, если создаваемая анимация не дает особой нагрузки на процессор и не занимает много места на экране, попробуйте использовать механизм преобразования PSD-PNG-Flash, описанный в данной статье (если исходные условия не выполняются, вероятно, стоит подумать о переходе на Director). У описанного пути также есть свои преимущества, если вы собираетесь имитировать сайт по визуализациям Photoshop или печатным материалам.
Практический опыт применения данной методики также показывает, что размер итогового файла SWF может быть на удивление небольшим по сравнению с размером исходного файла PSD. Обычно размер анимированной SWF-версии более или менее соответствует размеру статического JPEG-файла с качеством от среднего до высокого.

Рубрики: Флеш |Оставьте комментарий!

Создание SWF на базе анимированного формата GIF

7 Октябрь 2009 . Alex пишет -

Мне показалось, что читателю было бы интересно узнать, как улучшить визуальное восприятие GIF-файла, загрузив его в Flash. Я отправился на страницу O’Reilly , где меня встретила зверушка (утверждают, что это долгопят). Имя файла oreilly_header1.gif вполне типично для срезов, создаваемых для таблиц на базе HTML, - стало понятно, что с этим GIF-файлом можно работать. Я еще раз посмотрел на эту зверушку, благо она была довольно симпатичной, и подмигнул ей. Она подмигнула в ответ. После начального замешательства и обязательного повторения эксперимента я понял, что имею дело с анимированным GIF-файлом. Тогда я задумался… На примере Flash-версии файла с этой зверушкой было бы удобно продемонстрировать различия между Flash и традиционным дизайном HTML. В данной статье я покажу, как применение Flash позволяет уменьшить размер файла по сравнению с анимированным GIF. (далее…)

Рубрики: Флеш |Оставьте комментарий!