За последний год технология Flash завоевала много умов и сердец, в том числе и в России. Для некоторых Flash стал профессией, некоторые использовали его для украшения своих страниц, а некоторые просто цокали языками в восхищении, увидев его интерактивные возможности. Появились книги по Flash, материалы в сети. Можно однозначно сказать, что "дело Flash" в России интенсивно продвигается. Итак…
До сих пор мы задавались вопросом - как сделать? Но просто сделать, это еще не признак мастерства. Настоящий профессионал будет всегда задавать вопрос - как сделать хорошо? Чтобы сделать хорошо, надо досконально знать свой инструмент, обращая внимание на мельчайшие детали, и правильно разрешать компромиссы, касающиеся этих деталей. Речь пойдет об оптимизации во Flash.
Статья поделена на два раздела: один посвящен оптимизации скорости и качества исполнения, другой - оптимизации размера .swf файлов.
Скорость исполнения фильмов
Общеизвестно, что плавность анимации достигается большим количеством проигрываемых кадров в секунду (fps - frames per second). Следовательно, мы стремимся указывать большую скорость в свойствах Flash-фильма. (По умолчанию, Flash использует значение 12 fps. Для качественной анимации требуется минимум 25-30 fps).
12 fps |
35 fps |
Однако, увеличение количества кадров в секунду требует большей производительности компьютера, на котором исполняется анимация, и если ее не хватает, Flash сокращает частоту кадров. Поэтому, даже если мы установим fps равным 100, Flash будет исходить из возможностей, имеющихся для воспроизведения.
Размеры и "количество" анимации
Имеются способы повысить fps. Первый, наверное, не самый выгодный - уменьшить размеры воспроизводимого клипа: на слабой машине клип с размерами 300x200 будет воспроизводиться гораздо лучше, чем, скажем, клип с размерами 600x400.
Второй заключается в нескольких простых правилах составления анимации:
1) Самое простое: чем больше у вас анимирующихся объектов в сцене, тем сложнее Flash обрабатывать их, и тем медленней будет воспроизведение.
2) Выгодней использовать один символ, содержащий мелкие объекты, чем много символов, отдельно для каждого объекта. В качестве примера можно привести имитацию снега на клипе. Много символов, каждый из которых будет отвечать за отдельную снежинку, будут двигаться гораздо медленней, чем один символ, отвечающий за весь снег.
3) Не держите символы на сцене, если вы их не используете. К сожалению, Flash не настолько интеллектуален, чтобы не просчитывать клипы с _alpha или _vizible равными нулю. Если клип невидим, лучше его убрать со сцены, а потом, когда будет нужно, его показать.
Имейте ввиду эти моменты, когда создаете анимацию во Flash.
Качество
Вы, наверное, уже знакомы с понятием качества во Flash (опция Quality при публикации, параметры _quality, _highquality, функция toggleHighQuality()). Качество тоже сильно влияет на скорость воспроизведения. Тут тоже существует несколько компромиссов.
Во первых, уровень качества можно установить вручную при экспорте. При этом не забывайте, что если не отключить контекстное меню, то у пользователя остается возможность регулировать качество.
Во вторых, качество можно менять динамически во время исполнения анимации (параметр _quality). На время воспроизведения особенно сложных и "быстрых" фрагментов, можно понижать качество, тем самым выигрывая в скорости, а когда "количество" анимации уменьшится, вновь возвратиться к высокому уровню качества.
При создании анимационных заставок, я предпочитаю давать выбор качества пользователю, поместив в уголок пару/тройку кнопок, позволяющих регулировать качество.
Поэкспериментируйте, и вы увидите, что качество существенно влияет на скорость воспроизведения клипов.
Поточное воспроизведение и предварительная загрузка
Flash, специально приспособленный под Сеть, является поточным форматом. Это означает, что фильмы Flash могут начать воспроизводиться, не загрузившись до конца. С одной стороны, это преимущество, т.к. фильм начинает воспроизводиться достаточно рано, и пользователю нет нужды ждать конца загрузки. С другой стороны, если канал, по которому передаются данные, окажется уже, чем нужно для передачи Flash-потока, анимация будет приостановлена, и пользователю, как при просмотре "Санта-Барбары", на самом интересном месте придется ждать "следующей серии".
Это еще один компромисс, который нужно учитывать. Если для вас незначительны такие задержки, или у вас есть уверенность, в том, что каналы связи не подведут - вам не о чем беспокоится. Но если вам хочется, чтобы ваш клип воспроизводился без задержек, тогда его надо снабдить предварительным загрузчиком (preloader) - это прием, позволяющий задержать воспроизведение до полной загрузки фильма.
Имеет смысл протестировать работу вашего фильма на нескольких скоростях с помощью функции Test Movie (Control->Test Movie, Ctrl+Enter). Скорость можно выбирать в меню Debug, которое появляется после запуска фильма.
Поточный звук
Последний аспект, который, я считаю, относится к производительности Flash анимации - это поточный звук. Во Flash есть несколько способов синхронизации звука. Если вы используете достаточно продолжительный фрагмент музыки (или любого другого звукового сопровождения), и события анимации должны совпадать с событиями звука, то вам нужно использовать синхронизацию Stream (поток). В этом случае вся анимация будет синхронизирована со звуком, и два этих потока будут идти параллельно, не отставая друг от друга.
Размер .swf файлов
Наверное, основным достоинством Flash, как векторного формата, является маленький размер файла: чем меньше файл, тем быстрее он загружается по сети, тем больше информации можно передать. К сожалению Flash не является высокоразвитым инструментом и не умеет оптимизировать размер файлов. Однако, если мы знаем как он работает, нам легче создавать наши Flash-творения в соответствии с теми требованиями, которые у нас есть. В этом разделе мы рассмотрим аспекты, влияющие на размер Flash файлов.
Повторное использование, символы
Символы во Flash - мощный способ экономии места. Они позволяют использовать повторно любые фрагменты вашего творчества. Если вы используете что-либо хотя бы два раза, сделайте это символом.
Например, вам нужно нарисовать множество разноцветных мячиков разного размера. Используйте один символ для всех мячиков. Вы можете изменить размер и цвет каждого экземпляра этого символа и получить нужную сцену. Это займет гораздо меньше места, чем если бы для каждого мячика выделялся бы один символ.
Смысл символов - экономия. Подумайте, какие общие свойства имеются у объектов в вашем фильме, и вынесите их в отдельный символ.
Графика, созданная вручную
Когда вы создаете графику во Flash, убедитесь в том, что у вас нигде не осталось лишних линий полигонов, пустых или прозрачных фигур, которые не несут на себе функциональной нагрузки.
Ограничьте себя в использовании специальных типов линий, таких как пунктир, нечеткие линии, точки и т.д. Сплошные линии занимают меньше места. Толстые линии, нарисованные карандашом, занимают гораздо меньше, чем линии, нарисованные кистью.
Когда вы импортируете векторную графику, убедитесь, что в ней не существует скрытых линий или объектов.
Flash позволяет сглаживать, выпрямлять и оптимизировать линии (меню Modify -> Smooth, Straighten, Optimize). Чем прямее линии, тем меньше места они занимают. И, наоборот, чем они детальнее, тем больше. Оптимизируя линии, можно задать уровень сглаживания, а так же выполнить многопроходную оптимизацию.
Текст, шрифты
По умолчанию, Flash преобразует все используемые буквы (я не использую слово "символ" чтобы не путать с известным термином Flash) в полигоны. Это означает, что для фразы "Жили-были дед да баба" Flash сохранит начертания букв "Жилбыдеа-". Каждая буква сохраняется в виде полигона, который потом размножается нужное количество раз. Причем, если мы напишем ту же фразу другим шрифтом, Flash будет вынужден сохранить начертания букв этого шрифта тоже. Представьте, сколько места займет описание целого шрифта, в случае если мы задействуем весь алфавит (плюс ко всему, Flash различает прописные и строчные буквы)!
Есть способ избежать сохранения шрифта, правда придется пожертвовать сглаженными краями букв. Для этого нужно выбрать Use Device Fonts, в опциях текста. При этом Flash будет сохранять не начертания букв, а только характеристики и название шрифта (на практике, это всего несколько байт). При воспроизведении будет использован указанный шрифт, либо, если такого шрифта не окажется в системе, Flash использует ближайший по характеристикам шрифт.
Отсюда выводы: большие объемы текста лучше не хранить во Flash, (а использовать, например, HTML) - Flash подходит больше для коротких надписей, лозунгов и т.п.; стараться использовать меньше различных шрифтов. Если уж очень нужно поместить большое количество текста во Flash, используйте опцию Use Device Fonts. Все это сократит размер создаваемого файла.
Звук
Очевидно, что использование звука сильно увеличивает размер Flash-файлов. Звук тоже поддается оптимизации во Flash.
В параметрах публикации (Publish Settings) можно установить тип компрессии и качество звука. В большинстве случаев имеет смысл использовать компрессию MP3, выбирая качество "по потребности". Чем шире поток (bit rate), тем больше места занимает звук.
В общем случае, на размер звуковых данных влияют частота дискретизации (sample rate) и количество каналов (стерео, моно). Понятно, что стерео звук будет занимать в два раза больше места, чем моно, и что звук оцифрованный с частотой дискретизации 44 kHz, ровно во столько же раз больше отрывка с частотой 22 kHz. Частоту дискретизации относительно исходной можно понизить, повышать ее не имеет смысла (лучше от этого звук не станет).
Еще способ, сократить затраты на звук - проигрывать один и тот же фрагмент несколько раз. Например, вам нужен фрагмент звуков джунглей, длиной 40 секунд. Вы можете взять фрагмент, длиной 10 секунд и повторить его несколько раз, при этом будут сохранены только требуемые 10 секунд записи.
Изображения
Так как Flash является векторной средой, по возможности следует использовать векторную графику. К тому же, растровая графика при масштабировании выглядит не слишком пристойно.
Если изображение не является фотографическим, имеет смысл преобразовать его в векторный формат. В параметрах изображения, после его импортирования, можно выбрать тип компрессии и посмотреть, как оно будет выглядеть.
Накладно и не оправдано создание во Flash анимации с помощью растровых изображений. Для этого можно использовать, скажем, формат GIF.
Отчет
Flash может генерировать отчет, в котором по байтам расписан весь фильм. (Publish Settings -> Flash -> Generate size report). Для примера, мы рассмотрим следующий мультик:
В этом фильме 70 кадров. В отчете (см. ниже) отражено количество байт, нужное для каждого кадра (Frame Bytes), и размер фильма к этому кадру (Total Bytes). Исходя из этих данных можно рассчитать требуемую скорость линии передачи, чтобы Flash-фильм мог отображаться без задержек.
После отчета по кадрам идет отчет по сценам - какая сцена сколько занимает, а затем - по символам. 136 байт на первой (и единственной) сцене занимает фраза "(С). Rouben Sardarian, 2001". Этот текст использует опцию Use Device Fonts, и поэтому занимает мало места.
Слово "Optimized" и буквы слова "Flash" являются символами, причем на каждую букву этого слова отводится два символа - один содержит графику, другой анимацию (движение вверх-вниз). Заметьте, что буквы, использованные в слове "Flash" не используют шрифт (см. конец отчета - там нет шрифта Arial, которым это слово было написано). Эти буквы были преобразованы в "самостоятельную" графику, после ввода текста (Modify->Break Apart, Ctrl+B).
В конце отчета помещаются данные о шрифтах, звуке и изображениях. Звук и импортированные изображения отсутствуют в нашем примере, поэтому в отчете данных о них нет.
Зато мы можем увидеть, что описание шрифта для фразы "(С). Rouben Sardarian, 2001" занимает 20 байт. Прибавив к этому 136 байт, которые описывают фразу, получаем 156 байт. Сравните это с 519 байтами (470 байт - 8 букв, из которых состоит слово "Optimized" + 49 байт описание слова).
Вот как выглядит отчет:
Movie Report ------------ Frame # Frame Bytes Total Bytes Page ------- ----------- ----------- --------------- 1 3294 3294 Scene 1 2 566 3860 2 3 17 3877 3 4 17 3894 4 5 17 3911 5 6 17 3928 6 7 17 3945 7 8 17 3962 8 9 17 3979 9 10 17 3996 10 11 17 4013 11 12 17 4030 12 13 17 4047 13 14 17 4064 14 15 17 4081 15 16 17 4098 16 17 17 4115 17 18 17 4132 18 19 17 4149 19 20 17 4166 20 21 17 4183 21 22 17 4200 22 23 17 4217 23 24 17 4234 24 25 17 4251 25 26 17 4268 26 27 17 4285 27 28 17 4302 28 29 17 4319 29 30 17 4336 30 31 17 4353 31 32 17 4370 32 33 17 4387 33 34 17 4404 34 35 17 4421 35 36 17 4438 36 37 17 4455 37 38 17 4472 38 39 17 4489 39 40 17 4506 40 41 16 4522 41 42 16 4538 42 43 16 4554 43 44 16 4570 44 45 16 4586 45 46 16 4602 46 47 16 4618 47 48 16 4634 48 49 16 4650 49 50 16 4666 50 51 16 4682 51 52 16 4698 52 53 16 4714 53 54 16 4730 54 55 16 4746 55 56 16 4762 56 57 16 4778 57 58 16 4794 58 59 16 4810 59 60 16 4826 60 61 16 4842 61 62 16 4858 62 63 16 4874 63 64 16 4890 64 65 16 4906 65 66 17 4923 66 67 17 4940 67 68 17 4957 68 69 17 4974 69 70 30 5004 70 Page Shape Bytes Text Bytes ----------------------- ----------- ---------- Scene 1 0 136 Symbol Shape Bytes Text Bytes ----------------------- ----------- ---------- Optimized 0 49 H 97 0 Letter5 0 0 S 308 0 Letter4 0 0 A 112 0 Letter3 0 0 L 71 0 F 96 0 Letter2 0 0 Letter1 0 0 Font Name Bytes Characters ----------------------- -------- ----------- Century Gothic Bold Italic 470 DEIMOPTZ Arial 20
Надеюсь, что ваши творения будут не только красивыми и оригинальными, но и оптимизированными. Если эта статья вам в этом поможет, я буду считать свою задачу выполненной. Успехов и творческого настроения!
