Сокращаем размер файла флеш-ролика

Опубликовано 04 1 2010 Начлаб

Думаю, каждый, кто работает с флеш, особенно начинающие, сталкивался с вопросом уменьшения веса файла в килобайтах. Особенно это важно в тех случаях, когда ролик будет размещаться в интернете, к примеру, флеш-баннеры. Кстати говоря, многие веб-мастера и рекламные баннерообменные сети устанавливают лимит по размеру файла для размещаемых материалов, а следовательно, в такой лимит следует уложиться. Кроме того, оптимизация может потребоваться, если ролик "подтормаживает", то есть излишне нагружает процессор, что для рекламных баннеров вообще недопустимо. Торможение может быть вызвано многими факторами: большим количеством сложных объектов, сложной анимацией (особенно касается тех случаев, когда в один анимированный клип вставлен другой анимированный, зацикленный, к примеру), большой частотой кадров (да, 31 fps - самое реалистичное воспроизведение, но кроме этого еще и нагрузка на процессор).

Работа с графикой.

Однозначно, вектор "весит" меньше растра. Но и с вектором важно быть аккуратным, сложные объекты с множеством точек могут весить больше растра. Попробуйте, к примеру, наполнить ролик множеством пунктирных линий. Будет весить очень много. Или использовать встроенный во Flash трассировщик растра в вектор - будет нереально большой размер, и все из-за множества точек и множества закрытых полигонов. Многоточечные фигуры следует оптимизировать через Изменить - Форма - Оптимизировать (Ctrl+Alt+Shift+C). по причине множества точек, лучше рисовать линиями или карандашом вместо кисти (Brush tool). Не рекомендуется импортировать векторные картинки из сторонних программ, лучше рисовать непосредственно средствами Flash, хотя, если импорт все же необходим (например, если нужно вставить векторное изображение логотипа), импортированный файл следует вынуть из библиотеки на сцену, разгруппировать максимально полно, и скопировав полученное, вставить в новый в символ, в Клип (Movie Clip) или Графику (Graphic). Импортированный файл после этого можно удалить.

Растр, кстати говоря, не всегда плох. Для картинок рекомендуется использовать все же JPG, поскольку, даже оптимизированный в Photoshop (Сохранить для Веб+ выставить приемлемый уровень качества, я обычно выбираю 30), он выглядит сносно и весит немного.

JPG не поддерживает прозрачность, то есть у картинки всегда будет фон вокруг основного изображения, но это не проблема, с этим можно справиться, это удобно сделать двумя способами:

  • Если нужна прозрачность каких-то участков, не обязательно использовать PNG-24.
    Достаточно импортировать картинку в JPG-формате с качеством процентов 30-40, положить ее в клип, а сверху сделать маску, обрисовав по контуру. Получится аккуратно вырезанная картинка в JPG-качестве, т.е. весом легче чем PNG-24 и в то же время мы обошли отсутствие прозрачности в формате.
  • Иначе, можно нарисовать квадрат, точно такого же размера как картинка по ширине и высоте и сделать тип заливки "Растр.изображение", где выбрать нужную картинку, также импортированную в формате JPG/ Затем просто стираем аккуратно ластиком ненужные области рисунка. Упаковываем квадрат в Клип или Графику.

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

Регулировать качество растровой картинки можно и непосредственно во Flash, для этого следует открыть Свойства (в меню правой кнопки) импортированной картинки в Библиотеке. Смотрим на скрин:

1) Эта галочка означает, что сейчас используется то качество изображения, которое было в нем изначально установлено и с коим оно было импортировано. если галочку снять, то ниже появится окошко, где можно будет установить процент качества от имеющегося, то есть можно еще ухудшить. Предупреждаю, качество очень и очень ухудшается, лучше этим не пользоваться, оптимизировать растр, я повторюсь, следует в сторонних программах.
2) Эта галочка придает картинке легкий блюр (можно использовать, чтоб слегка спрятать "шумы" от оптимизации картинки). При поворотах растровых картинок при анимировании, не будет "лесенок".
3) Режимы качества, соответственно для JPG и для GIF  с PNG.sadere122

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

Работа с текстом.

Сразу конкретизирую - просто текстовое поле занимает меньше места на жестком диске, чем текст преобразованный в графику. В динамическом тексте, кстати, можно четко указать, какие буквы/цифры, знаки препинания нужно использовать (меню Внедрить (Embed) в свойствах текстового поля). Но ни в коем случае не грузите весь шрифт в Библиотеку. В зависимости от шрифта, это могут оказаться мегабайты лишних данных. Четко, по буквам/символам выбираем используемое.

Работа с анимацией.

В этом пункте все просто - чем меньше ключевых кадров - тем меньше размер файла. Также, не забывайте упаковать графику в Клип, перед тем как использовать ее в Tween-анимации, поскольку, если этого не сделать, у вас в библиотеке появится масса прорисовок промежуточных позиций (дополнительные файлы Graphic).

Работа со скриптами.

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

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

Как обычно, если есть вопрос - прошу в комментарии.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Только один коммент to “Сокращаем размер файла флеш-ролика”

  1. [...] помимо оптимизации сайта есть понятие Оптимизация флеш-файла, что для меня было маленьким [...]

Оставить коммент