Библиотека Интернет Индустрии I2R.ru

За последний год технология 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

Резюме

Надеюсь, что ваши творения будут не только красивыми и оригинальными, но и оптимизированными. Если эта статья вам в этом поможет, я буду считать свою задачу выполненной. Успехов и творческого настроения!