WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » Оптимизация Macromedia Flash

Оптимизация Macromedia Flash


Дата публикации: 17-03-2013

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

Резюме

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

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Март 2017 (1)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта

Хотите продать свой сайт?
- Мы быстро и удобно для Вас сможем его купить:
  • Заявка на продажу сайта
  • Раcсматриваем цены на каждый сайт в индивидуальном порядке.

    Случайная цитата

    Linus Torvalds:

    "Болтовня ничего не стоит. Покажите мне код."

    Опрос

    Какой текстовый редактор Вы используете?

    OpenOffice
    AbiWord
    Notepad++
    UltraEdit
    PSPad
    Microsoft Office
    Microsoft Блокнот
    Другой...