WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     | 1 |   ...   | 3 | 4 || 6 | 7 |   ...   | 8 |

«F L A S 100 советов и рекомендаций профессионала O'REILLY С&ППТЕР Шам Бхангал F L A S H H A C K S Sham Bhangal O'REILLT Beijing • Cambridge • ...»

-- [ Страница 5 ] --

Глава 7. Работа со звуком 2. В окне Organizer (Alt+9) перейдите на вкладку Effects. 3. Найдите эффект Off-line Effects • Amplitude • Normalize и дважды щелкните на нем (рис. 7.18). На экране появляется диалоговое окно Normalize (рис. 7.19). ffl-Real-T r,e Effects В-Off-UP e Effects | В-Asrpittude 1 ! i. •Amplify Binaural Auto-Partner nve!ope Рис. 7.18. Эффект нормализации в Adobe Audition ^ЩЩз! W Normalize to - ;

•• i 'ЯР1Р1' Jo " d B O K W Normalize L/R Equally C a n c e l !

Г DC Ъя* Adjust [ • • ".

• Рис. 7.19. Окно Normalize в Adobe Audition 4. В окне Normalize установите флажки Normalize To, Decibels Format и Normalize L/R Equally. В текстовом поле рядом с флажком Normalize to введите значение О (используется по умолчанию). Audacity Выберите эффект Normalize. Проследите за тем, чтобы оба флажка были установлены, и щелкните на кнопке ОК. Более опытные читатели также могут добавить усиление басов или сжатие - обе возможности скрывают шум дискретизации. В Audacity соответствующие команды выбираются из раскрывающегося меню Effects. На рис. 7.20 и 7.21 показаны формы сигнала до и после нормализации. Звуковые данные масштабируются для заполнения всего спектра сигнала. Тем самым обеспечиваются использование большего количества уровней дискретизации и уменьшение влияния шума дискретизации.

Оптимизация звука Рис.

7.20. Исходный сигнал Рис.

7. 2 1. Нормализованный сигнал Борьба с шумом наложения Качество звука, экспортируемого из Flash, снижается из-за применения сжатия. Обычно результат получается примерно таким же, как при снижении разрешения (downsampling), то есть уменьшении количества дискрет в звуковом файле. Сжатие и снижение разрешения в звуковых данных создают ошибки наложения, которые могут привести к появлению заметного шума наложения. Наложением (aliasing) называется эффект слышимости гармоник частоты дискретизации. Обычно этот эффект проявляется в виде постоянного гудения в экспортированном звуке при построении SWF. В крайних случаях гудение превращается в пронзительный скрежет, а звук становится совершенно бесполезным. Эффект наложения также проявляется в работе с растровой графикой, а для его сокращения применяется методика сглаживания (antialiasing). В данном случае частота дискретизации заменяется размером пиксела, а ошибка наложения проявляется в виде «зазубрин», отсутствовавших на исходном изображении (см. трюк 22).

Глава 7. Работа со звуком Термины «aliasing» и «antialiasing» знакомы многим дизайнерам, но мало кому известно, что эти термины пришли из теории обработки сигналов. Важнейшее правило оцифровки, известное как теорема Найквиста, гласит, что для достижения абсолютной точности воспроизведения звука частота дискретизации должна быть как минимум вдвое больше максимальной звуковой частоты сигнала. Именно по этой причине в аудиоформате Redbook, используемом в звуковых компакт-дисках, выбрана частота дискретизации 44,1 кГц. Самая высокая частота, воспринимаемая человеческим ухом, равна 22 кГц (и то только в детстве - у меня и у большинства читателей этот порог составляет около 12-16 кГц). Удвоение 22 кГц дает величину 44 кГц, а 0,1 кГц обеспечивает то самое «больше» в фразе «вдвое больше максимальной звуковой частоты сигнала». Таким образом, слушатель не сможет отличить запись на компакт-диске от живого звука, воспроизводимого той же аудиосистемой. Снижение разрешения в Flash приводит к нарушению условия теоремы Найквиста, а наложение частот портит звук. Большинство дизайнеров пытается бороться с шумом наложения за счет увеличения частоты дискретизации, но это повышает размер файла. Нетривиальное решение проблемы с шумом наложения основано на удалении высоких частот, мешающих выполнению правила «двойной максимальной частоты». Так определяется пороговая частота для любого аудиоматериала, который должен использоваться с заданными параметрами экспортирования МРЗ. Если удалить (отфильтровать) все частоты исходного материала, превышающие пороговое значение, мы исключим возможность появления шума наложения. Но не все так просто: Flash не указывает частоту дискретизации МРЗ, а определяет ее в единицах величины потока данных (килобитах в секунду), как показано на рис. 7.22. Впрочем, мы можем без особого труда определить пороговые частоты, соответствующие значениям потока данных Flash на рис. 7.22. Эти частоты перечислены в табл. 7.1. Правда, «без особого труда» - выражение относительное. Я использовал осциллограф для поиска максимальной частоты, которая поддерживалась каждым значением потока данных без существенного затухания. На первый взгляд кажется сложно, но на практике это делается довольно легко. Вероятно, то же самое можно проделать при помощи теоретических вычислений, но на мою помощь не рассчитывайте! Допустим, для редактирования звука используется Adobe Audition, и мы хотим экспортировать звук на уровне 20 Кбит/с. Далее перечислены действия, выполнение которых гарантирует отсутствие шума наложения в экспортированном звуке. 1. Загрузите звук в Adobe Audition. 2. В окне Organizer (Alt+9) откройте вкладку Effects и дважды щелкните на эффекте Off-line Effects • Filters • FFT Filter (рис. 7.23).

Оптимизация звука j Cancel j [ Impart.. I ТеД Рис. 7.22. Значение потока данных (в килобитах в секунду) в диалоговом окне Sound Properties Таблица 7. 1. Пороговые частоты, соответствующие значениям потока данных при экспортировании из Flash. Значение потока данных, Кбит/с 8 16 20 24 32 48 56 64 80 96 Пороговая частота, КГц 3,0 5,5 6,0 6,0 8,0 10,0 10,0 12,0 16,0 16, 282 Щ •• Reai-Time Effects Й-Off-line Effects I Й- Amplitude I Щ- Generate ! Ё niters З Глава 7. Работа со звуком •Sdenfifk Filters Рис. 7.23. Выбор фильтра в Adobe Audition 3. В открывшемся диалоговом окне FFT Filter установите флажки и переключатели так, как показано на рис. 7.24. Проследите за тем, чтобы флажок Lock to Constant Filter был обязательно установлен. Введите в поле Мах значение 0 дБ, а в поле Min - значение -15 дБ.

Г Log S ca!e Г S plirie Curves: _Jbt ;

-' FFT atld Windowing -' -;

:;

: — \ Presets С Major Triad Cassette Tape Frequency Respon: De-Esser Inharmonic Resonance Inharmonic Resonance Slide t ill The 60 H: Ground Loop Kill The Subharrnonics Mastering • Gentle & Narrow Mastering • Gentle &Wide i ;

FFTSfee Windowing Function ~~p] [eiackman •.

• • ••.• Time-Variable Settings • • ;

F Lock to Constant filler ! ш ы Ы '••••". \, -;

• Precision Factor:

|*'' ;

Рис. 7.24. Окно FFT Filter в Adobe Audition 4. Создайте кривую в верхней части окна FFT Filter, как показано на рис. 7.24, со «ступенькой» на частоте, указанной в табл. 7.1 (для 20 Кбит/с пороговая частота равна 6,0 кГц). При этом вы определяете фильтр нижних частот, отсекающий частоты выше пороговой точки 6,0 кГц (в Audition частоты измеряются в герцах, поэтому точка отсечения устанавливается на частоте 6000 Гц). 5. Щелкните на кнопке ОК, чтобы применить фильтр.

Служебная информация для синхронизации 6. Сохраните файл в формате МРЗ.

7. Импортируйте звуковой файл в Flash командой File • Import • Import to Library. По сравнению с оригиналом звук становится глубже, поскольку высокочастотные составляющие были удалены. Если теперь экспортировать звук в итоговый SWFролик, пропадет фоновое гудение, возникающее из-за шума наложения.

Итоги Нормализация звука и подавление всех звуковых составляющих выше пороговой частоты существенно повышают качество звука, импортируемого во Flash для последующего экспортирования в SWF. Это позволяет сократить размер файлов SWF или повысить качество звука без дополнительной нагрузки на канал связи. Оптимизация звука является чем-то новым для многих разработчиков Flash, привыкших просто сжимать звук в Flash и надеяться на лучшее, но она приносит ощутимую пользу на сайтах с интенсивным использованием звука. По крайней мере, стоит попробовать - вряд ли кому-нибудь придет в голову обойтись без оптимизации растровой графики на страницах HTML, а ведь звуковые данные занимают гораздо больший объем!

Служебная информация №69 для синхронизации ТРЮК Наличие контрольных точек синхронизации позволяет реагировать на специальные события при воспроизведении звуков. Flash используется для воспроизведения звуков, но с получением низкоуровневой информации о звуках дело обстоит сложнее. В частности, вы можете задать общую громкость звукового объекта методом Sound.setVolumeO, но вам не удастся определить мгновенные значения громкости звукового файла, воспроизводимого в данный момент. Чтобы решить эту проблему, необходимую информацию приходится сохранять в Flash отдельно. В данном примере используется Audacity (http://audacity.sourceforge.net) - бесплатный звуковой редактор для Windows, Mac OS 9/X и Unix/Linux, распространяемый с открытыми исходными текстами. Хотя по широте возможностей настройки он уступает коммерческим продуктам вроде Adobe Audition, его стандартные настройки почти всегда соответствуют потребностям типичного вебдизайнера, поэтому работать с Audacity удобно и просто. Мы выделим из музыкального произведения моменты ударов и будем использовать полученные данные во время воспроизведения. В результате возникает иллюзия, будто Flash «читает» низкоуровневую информацию прямо из звукового файла. Для начала нам понадобится звуковой файл с ударными инструментами. Если у вас под рукой не найдется такого файла, вы всегда можете использовать файл groovyl_oop.wav с сайта книги.

Глава 7. Работа со звуком У файла groovyl_oop.wav имеется одна полезная особенность - его можно непрерывно воспроизводить в циклическом режиме. К сожалению, для создания таких звуков «с нуля» нужны музыкальные способности и профессиональное оборудование, хотя, в принципе, также можно нарезать фрагменты готовых файлов (средствами Audacity и Audition) до тех пор, пока не будет получен аналогичный результат. Впрочем, я бы не рекомендовал так поступать, потому что при столь очевидных заимствованиях могут возникнуть проблемы с авторским правом. Откройте файл groovyl_oop.wav в Audacity командой File • Open. Выделите весь сигнал (Edit • Select All). Выполните команду Analyze • Beat Finder. Мы воспользуемся этой функцией для нахождения всех ударных звуков в нашем файле. Поиск производится по неформальному критерию, но на самом деле ничего сложного в нем нет. Посмотрите на форму сигнала и найдите пороговое значение, которое бы захватывало только звуковые пики без фонового сопровождения. Для файла groovyLoop.wav такой порог составляет примерно 75%.

Рис. 7.25. Назначение порога при поиске пиков в Audacity После того как сигнал будет обработан, под графиком в окне появляются маркеры, помеченные буквой «В» и следующие более или менее периодично (рис. 7.26).

'Kits' 41C •'--' ". ' Рис. 7.26. Результаты поиска ударных звуков в Audacity Служебная информация для синхронизации Если интервалы между ударами выглядят хаотично, как на рис. 7.27, скорее всего, вы выбрали слишком высокий или слишком низкий порог. В этом случае попробуйте удалить дорожку с маркерами (щелкните на кнопке с крестиком в начале дорожки) и повторите процесс с другим порогом.

.г":

Рис. 7.27. Неправильный поиск ударов Поиск правильного порога напоминает настройку гитары - начните с заведомо низкого порога и постепенно увеличивайте его. По крайней мере, вы будете уверены в том, что правильное значение лежит в конкретном направлении от текущего. Не закрывая окна Audacity, запустите Flash и импортируйте звук командой File • Import • Import to Library. Присвойте ему идентификатор компоновки groovyLoop (см. трюк 52). Свяжите следующий фрагмент кода с кадром 1 FLA:

beatHandler = function О { beatMarker++;

clealnterval(beatlD): beatID = setlnterval(beatHandler. beatCode[beatMarker]);

pulseO;

};

repeatSound = functionO { this, start (0. 1): clealnterval(beatlD);

beatMarker = 0;

beatID = setlnterval(beatHandler. beatCode[beatMarker]);

}: function pulseО { // Сделать что-нибудь полезное... } beatCode = new ArrayO: beatMarker = 0: beatCode = [];

for (var i = beatCode.length - 1: i > 0;

i--) { beatCode[i] = beatCodeCi] - beatCode[i-l]: trace(beatCode[i]): } groovy = new Sound(this): groovy.attachSoundC"groovyLoop");

groovy.start(0. 1): groovy.onSoundComplete = repeatSound;

clearlnterval (beatID): beatID = setlnterval(beatHandler. beatCode[0]);

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

28В Глава 7. Работа со звуком Повторите эту процедуру для всех маркеров. Полученный массив beatCode будет выглядеть примерно так:, beatCode = [120. 556. 996. 1366. 1835. 2302, 2669. 3124. 3559. 3938. 4414. 4827. 5232, 5661. 6091. 6512];

Массив содержит позиции всех ударов в миллисекундах. В такой форме его содержимое может использоваться с функцией setlntervalQ;

именно это и делает приведенная ранее программа - она выполняет функцию beatHandlerQ в точках, определенных массивом beatCode. Чтобы реально использовать события setlntervalQ, включите в функцию pulse() код для выполнения каких-нибудь полезных операций - например, управления танцующей фигурой или изменения параметров узора. Функция даже может использоваться для синхронного запуска другого звука. В таких музыкальных проигрывателях, как WinAmp и iTunes, предусмотрена возможность создания визуальных эффектов для сопровождения текущей дорожки. Как правило, эффекты представляют собой узоры, вращающиеся и пульсирующие в такт музыке. Работа эффектов основана на идентификации ударных звуков - точно так же, как мы сделали в Audacity. Выполнить описанным способом хронометраж ударных для длинной песни будет довольно сложно, однако он позволяет сохранять информацию о позициях ударов в коротких сэмплах, традиционно используемых в веб-дизайне Flash в качестве фонового сопровождения. Кроме того, на основании позиций ударов можно отображать столбчатую диаграмму, пульсирующую в ритме музыки. На многих сайтах такие диаграммы обозначают включение/выключение музыкального сопровождения, но диаграмма остается неподвижной - а с этим кодом она придет в движение! Массив beatCode можно заполнять данными любых контрольных точек, синхронизируемых с любыми событиями звуковой дорожки, будь то крещендо, удар по тарелкам и т. д. Другими словами, массив beatCode в сочетании с приведенным кодом имитирует то, что в Director называется якорными точками. В вашем распоряжении появляется механизм для инициирования событий в определенные моменты при воспроизведении звука.

ТРЮК № Пользовательский класс звуковых преобразований Создание пользовательского класса для выполнения эффектов нарастания/затухания звука и перекрестного растворения.

На практике часто применяются эффекты нарастания/затухания звука и перекрестного растворения (затухания одного звука с одновременным нарастанием другого). Стандартный характер задачи предполагает, что она хорошо подходит для реализации в виде пользовательского класса. Класс обеспечит выполнение всей черновой работы, а нужный эффект будет реализовываться простым вызовом одного из методов. Класс Sound, как и встроенный класс Color, содержит метод setTransform(). Ранее мы уже создали пользовательский класс цветовых преобразований (см. трюк 10), Пользовательский класс звуковых преобразований а теперь на базе тех же принципов будет построен аналогичный пользовательский класс для работы со звуком. Класс SoundTrans реализуется как субкласс встроенного класса Sound и содержит два метода: • SoundTrans.fadeln(интервал, количество) - метод запускает звук и наращивает его громкость от 0 до 100 % в течение заданного интервала. Звук воспроизводится циклически заданное количество раз;

• SoundTrans. 1адеОи\(интервал) - затухание громкости до нуля в течение заданного интервала. Далее приводится код пользовательского класса SoundTrans, который должен храниться во внешнем файле с именем SoundTrans.as: // Следующий код ActionScript 2.0 должен храниться // во внешнем файле SoundTrans.as. class SoundTrans extends Sound { // FADEJDUT - затухание звука. // FADE_IN - нарастание звука. // RATE - частота эффектов в миллисекундах. private static var FADEJ3UT:Object = {11:0. 1г:0. г г : 0. r l : 0 } : private static var FADEJN:Object = {11:100. l r : 0. rr:100. r l : 0 } : private s t a t i c var RATE:Number = 6 0 ;

private var interval:Number;

private var startTime:Number;

// (Пере)запуск звука и нарастание громкости за duration миллисекунд. // Далее звук циклически воспроизводится loop раз. public function fadeln(duration:Number, loop:Number):Void { // Вызов функций, унаследованных от суперкласса Sound. stopO: startCO. loop);

setTransform(FADE_0UT);

// Вызов метода, определенного в субклассе. applyTransform(FADE_IN. duration): } // Затухание з у а з duration миллисекунд вк а // с остановкой в конце воспроизведения, public function fadeOutCduration:Number):Void { applyTransform(FADE_OUT, duration);

} // Инициирование э ф к а и создание интервального т й е а фет амр // д я его завершения. л private function applyTransform(transObject:Object. duration:Number):Void { // Получение текущего объекта звукового преобразования var getTrans:Object = getTransformO;

var diffTrans:Object = new ObjectO;

i f (duration < RATE) { duration = RATE: } startTime = getTimerO;

for (var i in transObject) { d i f f T r a n s [ i ] = (transObject[i]-getTrans[i])/(duration/RATE);

Глава 7. Работа со звуком // Первый параметр - текущий объект t h i s. // Второй параметр - вызываемая функция ( t r a n s i t i o n O ). // Третий параметр - продолжительность интервала в миллисекундах. // Четвертый, пятый и шестой параметры передаются t r a n s i t i o n O. interval = setlnterval(this. "transition". RATE. transObject. diffTrans. duration);

} private function transition(transObject:Object. diffTrans:Object. duration:Number):Void { var getTrans:Object = getTransformO;

for (var i i n diffTrans) { getTrans[i] += d i f f T r a n s [ i ] ;

} setTransform(getTrans);

i f (getTimerO - startTime > duration) { } updateAfterEventO;

/ Дииилзця / енцаиаи setTransform(transObject);

clearlnterval(interval):

Обратите внимание: наш класс не добавляет новые методы непосредственно в класс Sound, как это делалось при наследовании на базе прототипов в ActionScript 1.0. Вместо этого класс SoundTrans расширяет встроенный класс Sound (то есть объявляется производным от него). Преимущество такого способа состоит в том, что новая функциональность класса SoundTrans отделяется от существующего класса Sound, но в то же время новый класс идеально интегрируется с Sound. Рассмотрим пример использования класса SoundTrans. Прежде всего необходимо создать экземпляр класса SoundTrans. Программа создает объект SoundTrans, используя файл groovyl_oop.wav (предполагается, что этот файл находится в библиотеке и ему присвоен идентификатор компоновки groovyLoop): var groovy:SoundTrans = new SoundTrans(this): groovy.attachSound("groovyLoop"): Теперь мы можем использовать методы класса SoundTrans (или методы суперкласса Sound) с экземпляром SoundTrans. Следующая команда запускает звук на воспроизведение с нарастанием громкости от 0 до 100% в течение трех секунд. Звук воспроизводится дважды: groovyTrans.fadeIn(3000. 2): Команда на затухание звука в течение шести секунд: groovyTrans.fadeOut(6000);

Попробуйте усовершенствовать класс SoundTrans и реализовать в нем дополнительные возможности: • • сделайте так, чтобы значение RATE могло определяться пользователем;

включите в класс метод, который получает массив точек нарастания/затухания звука и реализует сценарный аналог звуковой огибающей.

ГЛАВА Элементы пользовательского интерфейса Трюки № 61- Изначально Flash создавался как инструмент для создания анимации в условиях каналов связи с низкой пропускной способностью, но с тех пор фирма Macromedia добавила много возможностей для построения графического пользовательского интерфейса (GUI). В последние годы Macromedia усиленно продвигает Flash как платформу для разработки RIA (Rich Internet Application). С этой целью в сценарный язык Flash, ActionScript, были внесены изменения, упрощающие написание кода взаимодействия с пользователем, неформально называемого «клеем GUI» - того, что объединяет элементы интерфейса и управляет их совместной работой. Пользовательский интерфейс и средства передвижения могут быть реализованы посредством использования временной диаграммы Flash как нелинейной серии секций анимации/контента. В итоговом Flash-сайте пользователь перемещается между секциями, каждая из которых представляет некоторое состояние программы (например, разные страницы в многостраничной форме);

для перемещений используется простой интерфейс, основанный на щелчках мышью. Пользовательский интерфейс также легко создается дизайнером с минимальным объемом сценарного кода. В Flash MX Professional 2004 появились новые средства Slides и Forms (объединенные общим термином Screens), упрощающие визуальную разработку за счет изоляции разработчика от парадигмы временной диаграммы. Вместо этого парадигма разработки приближается к стилю PowerPoint или Visual Basic. Flash MX и Flash MX 2004 содержат многочисленные компоненты (см. трюк 73) для построения пользовательских интерфейсов - поля со списками, переключатели и т. д. Эти компоненты упрощают разработку и последующую модификацию (на базе скинов) пользовательского интерфейса. Конечно, вы также можете создавать собственные элементы вроде кнопок (см. трюк 14) и бегунков (см. трюк 61). ActionScript также включает встроенные методы, упрощающие интерактивное управление мультимедийными потоками (звуком и видео) при использовании классов Sound, Microphone и Camera.

Глава 8. Элементы пользовательского интерфейса В любом случае главная задача Flash - увлечь пользователя. Даже при использовании технологии Flash в коммерческих или образовательных целях содержание должно быть увлекательным, иначе вы рискуете потерять старых зрителей и не сможете привлечь новых. В одних случаях интерфейс должен быть лаконичным и четким, в других случаях требуется создать нечто необычное, что понравится пользователю и будет соответствовать его ожиданиям. В конечном счете дизайнер сайта или разработчик сам выбирает стиль с учетом предполагаемой аудитории и своих художественных наклонностей, а иногда и изменяет его на основании обратной связи с пользователями. Тем не менее, книга посвящена не проектированию интерфейсов, а нестандартным применениям Flash. По этой причине трюки настоящей главы посвящены нетривиальному применению элементов пользовательского интерфейса в Flash. Некоторые из них позволяют преодолеть очевидные недостатки средств организации пользовательского интерфейса Flash. Но как показывает первый трюк, интерфейсные элементы предназначены не только для конечного пользователя - иногда они могут упростить процесс разработки программы. Если уж речь зашла о пользовательских интерфейсах стадии разработки, Flash MX 2004 и Flash MX Professional 2004 поддерживают концепцию расширяемости, то есть возможности не только настройки среды разработки Flash, но и до-, бавления/модификации ее отдельных компонентов. Среда разработки Flash настраивается средствами JSAPI (JavaScript API) с использованием диалекта JavaScript, специфического для среды Flash JSFL (сокращение означает «Flash JavaScript» - да, меня тоже раздражают обратные акронимы). Как известно большинству веб-дизайнеров, JavaScript предоставляет прямой доступ к пользовательскому интерфейсу браузера и всем открытым документам HTML при помощи модели DOM (Document Object Model). Однако, в отличие, от браузерной модели DOM, модель JSFL DOM предоставляет доступ к пользовательскому интерфейсу среды разработки и всем открытым документам FLA. Используя JSFL и связанную с ним модель, вы можете: • обратиться к любой части открытого в настоящий момент документа Flash (FLA) и отредактировать его на программном уровне. Данная возможность позволяет создавать расширенные команды, вызываемые из меню Commands, для автоматизации рабочего процесса или создания новых инструментов;

• модифицировать пользовательский интерфейс среды разработки Flash - например, создать новые инструменты на панели элементов. Один из таких инструментов (PolyStar) отображается, если щелкнуть на инструменте Rectangle и удерживать кнопку мыши;

• экспортировать SWF из командной строки Windows, как описано по адресу http://moock.org/blog/archives/000058.html.

Кроме того, вы можете создавать пользовательские панели и запросчики (requesters) для организации взаимодействия между сценариями JSFL и пользователем, что позволит не только запускать сценарии для модификации интерфейса среды разработки Flash, но и настраивать разные аспекты работы самих сцена Интерактивное тестирование риев JSFL! Для этой цели используется специальный язык на базе XML, XML to UI, который дает возможность создавать пользовательские модификации интерфейса, работающие в среде разработки Flash и обеспечивающие взаимодействие между пользователем и вашим кодом JSFL. Также предусмотрена возможность взаимодействия между стандартным ActionScript и JSFL, поэтому воспроизведение SWF может использоваться как часть пользовательского интерфейса. Функция MM Execute () позволяет выполняемому SWF (обычно внедренному в интерфейс XML to UI) запускать сценарии JSFL;

так создаются большие нестандартные интерфейсы с множеством автоматизированных задач и инструментов на одной пользовательской панели. Более того, фирма Macromedia использовала средства расширяемости в Flash MX 2004 для реализации ряда новых возможностей, в том числе Timeline Effects, Behaviors и записи макросов через панель History- Интересно, когда сторонние фирмы начнут использовать JSAPI, XML to UI и MMExecuteQ для настройки среды разработки Flash и распространять свои модификации среди других разработчиков (учтите, что применение JSAPI, XML to UI и MMExecute() ограничивается стадией разработки;

эти возможности не предназначены для использования на стадии выполнения в Flash Player)?

ТРЮК Интерактивное тестирование Область применения элементов пользовательского интерфейса не ограничивается стадией выполнения. Использование их во время разработки ускоряет тестирование различных ситуаций.

№ При каждом посещении конференции Flash я узнаю что-то новое. Обычно это просто полезная информация вроде особенностей использования компонентов Flash MX 2004 или сервера FlashCom. Но время от времени попадаются трюки и фокусы, которые на первый взгляд кажутся тривиальными, но в действительности оказывают заметное влияние на мой рабочий процесс. Перед вами один из таких трюков. Во время нашей беседы с Эмитом Питару и Джеймсом Патерсоном Джеймс сказал что-то вроде следующего: «Ну, я делаю анимацию, тут приходит Эмит и говорит: "Давай-ка поставим сюда шкалу" - мы немного повозились и опробовали разные варианты. Когда нас все устроило, текущее состояние было закреплено». Примерно в то же время я посетил презентацию авторов сайта Banja (http:// www.banja.com). Banja - полноценная, сложная приключенческая игра, поэтому я полагал, что авторы написали код с определениями данных для каждой локации, но я ошибался. Они использовали более сложную версию «шкалы Эмита». С каждой локацией в игре были связаны данные, которые вводились при помощи многочисленных внеэкранных полей и бегунков. Добавление новой локации не требовало обновления части кода (или конфигурационного файла) - все настройки осуществлялись на визуальном уровне и хранились в одном файле. Модификации ограничивались прорисовкой локации и заполнением внеэкранных элементов - никакие изменения в программном коде были не нужны. Давайте разберемся, как работает этот механизм.

Глава 8. Элементы пользовательского интерфейса Прежде всего создается «шкала» - так Эмит называет любой регулируемый элемент пользовательского интерфейса вроде бегунка или поворотной рукоятки. Элемент вовсе не обязан входить в число встроенных компонентов пользовательского интерфейса Flash - более того, мы обычно избегали их, чтобы не увеличивать размер файла. В следующем примере в роли «шкалы» выступит простой бегунок с числовыми данными. Для начала создайте одиночную волосяную линию длиной 200 единиц и преобразуйте ее в символ клипа;

поместите точку регистрации на середине линии (рис. 8.1). По этой линии будет перемещаться наш бегунок. Присвойте символу имя slider.

Рис. 8. 1. Линия, в середине которой находится точка регистрации Создайте в символе клипа slider новый слой с именем puck. Создайте на слое puck небольшой квадрат размером 10 х 10, преобразуйте его в символ puck и разместите точку регистрации в центре квадрата. Затем поместите его в позицию (- 5, -5) и задайте клипу имя экземпляра puckjnc (рис. 8.2).

| M v Clip oi e X:

-5.С PI Jf'} Рис. 8.2. Клип puck_mc, размещенный на линии Наконец, создайте над слоем по умолчанию новый слой с именем actions и присоедините следующий код к кадру 1 слоя actions: puckjnc.onPress = function() { this.startDragUrue. -100. 0. 100. 0);

this.onMouseMove = _onMouseMove: jonMouseMove = functionО { parent[_name + "_txt"].text = this._x;

updateAfterEventO: }: _parent[_name + "_txt"].onChanged = functionO { puckjnc._x = Number(this.text);

}: puckjnc.onRelease = puckjnc.onReleaseOutside = functionO { this.stopDragO;

}: _parent[_name + "_txt"].onChanged(): Приведенный фрагмент обеспечивает перетаскивание puckjnc вдоль линии. Кроме того, клип puckjnc связывается с текстовым полем, находящимся на од }:

Интерактивное тестирование ной временной диаграмме с клипом slider. Имя текстового поля совпадает с именем клипа slider и снабжается суффиксом _txt (sliderjxt).

Использование бегунка При построении рекурсивных деревьев (см. трюк 6) я подбирал начальные значения основных параметров при помощи бегунков. В коде присутствовали два параметра, значения которых мне было трудно подобрать на интуитивном уровне: angle (угол роста веток) и branch (густота ветвления). Сначала я просто закомментировал фрагмент программы, в котором определялись эти переменные: // angle = 10;

// branch = 2: Затем я быстро создал символ slider, разместил несколько экземпляров slider и связанных внеэкранных текстовых полей (рис. 8.3).

initialize —•... щ...... т • • т •• •;

' i Рис.

8.3. Бегунки для подбора параметров генератора деревьев Первый бегунок помечается статической надписью «angle», ему назначается имя экземпляра valueOI. Текстовому полю справа от него (с числом 80) присвоено имя valueO1_txt. При запуске SWF манипулятор бегунка перемещается в позицию, соответствующую значению 80 по шкале от -100 до 100. Щелкая и перетаскивая манипулятор, мы изменяем значение в поле valueO1.txt. Если разрешить ввод в текстовом поле, то значение можно будет ввести напрямую, а бегунок автоматически перейдет в новую позицию. Чтобы текстовое поле управляло значением переменной angle, закомментированной в предыдущем коде, выделите поле valueO1_txt на сцене и введите строку angle в поле Var панели свойств. Поле Var, эквивалентное свойству TextField.variable, сохранено для совместимости со стилем прямого присваивания текстовому полю, применявшемуся в Flash 5. В Flash Player 6 и выше для чтения/записи содержимого текстовых полей рекомендуется использовать свойство TextField.text. Без использования свойства text некоторые компоненты (например, полосы прокрутки) могут неправильно реагировать на изменения текстового поля. Однако мы не применяли компоненты при построении бегунка, а программа всего лишь демонстрирует трюк, поэтому для простоты в ней используется поле Var.

294 Далее приводится версия за слегка изменяется: для но быть назначено имя angle_mc. В то же время тельно.

Глава 8. Элементы пользовательского интерфейса с использованием свойства text. Подготовительная фауправления переменной angle текстовому полю должэкземпляра angle_txt, а бегунку - имя экземпляра заполнять поле Var на панели свойств уже не обяза // Имя текстового поля совпадает с именем бегунка // и дополняется суффиксом "_txt" this.targetTextField = _parent[_name.split("_")[O] + "_txt"];

/ Ия п р м н о с в а а тс иее т к т в г пл д " " / м ееенй опде мнм е с о о о оя о _. ti.agtetil.agtaibe= _aeslt""[] hstreTxFedtreVral nm.pi(_)O p c j c o P e s = functionO { ukn.nrs t i. t r D a ( r e -100. 0 1 0 0);

hssatrgtu.. 0. ti.nosMv = _nosMv: hsoMueoe oMueoe }: _ n o s M v = functionO { oMueoe ti.aettreTxFedtx = ti.x hsprn.agtetil.et hs_;

ti.aettreTxFedoCagd;

hs prn.agtetil.nhneO updateAfterEventO: } : this. targetTextFi el d.onChanged = functionO { puckjnc.x = Number(this.text): this._parent[this.targetVariable] = Number(this.text);

}: puckjnc.onRelease = puck_mc.onReleaseOutside = functionO { this.stopDragO;

}: ti.agtetiedoCagd) hstreTxF l.nhne(;

Какую бы методику вы не выбрали (с полем Var или со свойством text), появляется возможность быстрого изменения входных данных - перемещение бегунка приведет к изменению переменной angle и построению разных деревьев (рис. 8.4). Кто-нибудь из читателей скажет: «Но ведь то же самое можно сделать в отладчике!» Верно, но визуальное решение позволяет сразу выделить критические переменные, а результат настройки можно зафиксировать без изменения написанного кода. Когда результат вас полностью устроит, запомните значения всех переменных, остановите SWF и введите значения прямо в текстовые поля (например, valueO1_txt или angle_txt) в документе FLA. Выбранные значения будут присвоены переменным при публикации SWF. После того как дизайн придет к окончательному виду, просто удалите бегунки со сцены, а текстовые поля оставьте невидимыми.

Интерактивное тестирование •сэ •со •пз •CD Рис. 8.4. Два дерева, сгенерированные с разными входными параметрами Итоги Чем больше думаешь об этой методике, тем лучше раскрываются ее достоинства. В любой ситуации, когда у вас нет полной уверенности относительно входных значений, просто свяжите их с элементами пользовательского интерфейса и поэкспериментируйте. Данная методика помогает подобрать начальные значения переменных даже в том случае, если вся логика уже запрограммирована. Вам не придется возвращаться к программе и вносить изменения, потому что настраиваемые переменные были отделены от кодовой базы. Если подобрать начальные значения не удается, возможно, этот факт поможет вам осознать недостатки исходной логики и необходимость ее изменения. Разработчики сайта Banja использовали стандартный набор элементов для визуальной настройки локаций - чрезвычайно полезная возможность для команды, в которую входят как программисты, так и дизайнеры. Программист пишет код Action Script и создает внеэкранные элементы. Дизайнер готовит графику и настраивает переходы при помощи элементов пользовательского интерфейса. Таким образом, эта методика пригодится даже «чистому» программисту, поскольку она позволяет другим изменять входные данные, не прикасаясь к написанному Глава 8. Элементы пользовательского интерфейса коду. Более того, элементы можно оставить в итоговом пользовательском интерфейсе, чтобы пользователь мог сам вносить изменения в работу программы или анимацию! Если вы не хотите оставлять текстовые поля в ролике, закодируйте их итоговые значения в ActionScript и удалите поля вместе с бегунками.

ТРЮК Правая ксредняя кнопки мыши Документированные обработчики событий Flash реагируют только на основную кнопку мыши. Для проверки состояния дополнительных кнопок можно воспользоваться недокументированными возможностями ActionScript.

№ Хотя МЫЕШ оснащается двумя и более кнопками, Flash обнаруживает события только для основной кнопки мыши (обычно это левая кнопка, хотя основную кнопку можно сменить на панели управления Windows).

Класс В Flash не предусмотрены документированные средства для работы с правой и средней кнопками мыши. К счастью, недокументированная функция ASnative() позволяет вызывать дополнительные внутренние методы ActionScript (см. трюк 83) с использованием числовых индексов, приблизительно соответствующих встроенным классам. Похоже, при вызове ASnative() с аргументом 800 появляется возможность вызова методов ввода/вывода классов Key и Mouse, в том числе и недокументированных. Попробуйте выполнить следующий фрагмент: this.onEnterFrame = functionO { i f (ASnative(800;

2)(D) { trace("Detected something..."):, Если выполнить этот код и щелкнуть левой кнопкой мыши, сценарий выведет строку «Detected something...». Оказывается, вызов ASnative(800,2)(1) возвращает информацию о состоянии левой кнопки мыши: 1 (логическая истина), если кнопка нажата, или 0 (логическая ложь), если кнопка не нажата. Хотя факт нажатия левой кнопки мыши можно обнаружить при помощи документированного события Mouse.onMouseDown, приведенный выше код позволяет проверить его состояние на текущий момент (например, чтобы узнать, остается ли левад кнопка нажатой, без установки флага и ожидания события Mouse.onMouseUp). Если последний аргумент вызова ASnativeQ равен не 1, а 2, результат получается еще более интересным - функция возвращает информацию о состоянии правой кнопки мыши: this.onEnterFrame = functionO { i f (ASnative(800. 2)(2)) { trace("Right-click!"):

Правая и средняя кнопки мыши Если последний аргумент равен 4, вызов ASnative() возвращает значение, которое меняется на противоположное при каждом изменении состояния средней кнопки трехкнопочной мыши. Большинство мышей для Windows имеет колесо, которое может использоваться в качестве третьей кнопки;

нажатие и отпускание колеса эквивалентно «щелчку третьей кнопкой». this.onEnterFrame = functionO { i f (ASnative(800. 2)(4)) {,, trace("Middle mouse button has changed state"):

Итак, теперь мы можем проверять состояния левой, правой и средней кнопок мыши! Если мышь имеет более трех кнопок, состояния дополнительных кнопок проверяются вызовами ASnative(800,2)(5) и ASnative(800,2)(6). Вызов ASnative(800,2)(3) вроде бы ничего не делает (по крайней мере, при вводе данных с мыши). ПРИМЕЧАНИЕ Функция ASnative() не документирована, а следовательно, не поддерживается официально. Вызовы ASnative(), описанные в тексте, работают в Flash Player 5, 6 и 7, но они не прошли полного тестирования, а их работоспособность в будущих версиях не гарантирована.

В этой методике состояние кнопок мыши проверяется посредством опроса в обработчике onEnterFrame, потому что основная кнопка мыши генерирует только события onMouseDown и onMouseUp. Конечно, опрос неэффективно расходует ресурсы процессора, поэтому этот способ следует применять лишь при крайней необходимости. Разумеется, код опроса не следует включать в клип, поскольку множественные экземпляры клипа будут выполнять избыточный опрос (ведь состояние кнопок мыши остается одним и тем же независимо от того, каким клипом оно проверяется). Вместо этого следует организовать централизованный опрос и рассылать события объектам, зарегистрированным в качестве слушателей. Файл rightMousePoller.fla, находящийся на сайте книги, демонстрирует различия между двумя подходами. В нем созданы четыре «плохих» и три «хороших» слушателя. Если щелкнуть правой кнопкой мыши, все семь слушателей сообщают, сколько раз выполнялся опрос для получения результата. Для «хороших» слушателей это число всегда будет меньше, потому что все три слушателя обслуживаются одним опросчиком, тогда как каждый «плохой» слушатель выполняет опрос сам для себя.

Итоги Мыши для Macintosh часто имеют только одну кнопку, поэтому описанная методика применима в основном для Windows. Тем не менее, если вы захотите проверить состояние правой кнопки мыши, учтите, что при тестировании в браузере щелчок правой кнопкой вызывает меню Flash Player. У третьей кнопки функция по умолчанию отсутствует, но так как в большинстве программ третья кнопка не используется, многие пользователи закрепляют за ней какую-нибудь специализированную функцию - например, сворачивание всех окон на рабочем Глава 8. Элементы пользовательского интерфейса столе. Более того, многие пользователи работают с двухкнопочной мышью, поэтому не стоит предполагать наличие третьей кнопки для выполнения важных функций. Короче говоря, данный трюк в основном стоит рассматривать как курьез, если только вы не используете специализированное оборудование с полным управлением конфигурацией мыши и программного обеспечения (например, интернет-киоск). Flash Player 7 поддерживает новое свойство TextField.mouseWheelEnabled для прокрутки текстовых полей с помощью колеса мыши. Flash Player 7 для Windows также поддерживает нового слушателя события Mouse.onMovieWheel, оповещаемого о перемещении колеса мыши.

ТРЮК № Кнопочные клипы Создание расширенных кнопок Flash на базе класса MovieClip (вместо класса Button).

Кнопки Flash традиционно создаются как экземпляры класса Button (не путайте с компонентом Flash MX Button из пакета mx.components). Кнопка Flash имеет три состояния (up, down, over), кроме того, с ней связывается некоторая область попадания. Flash отображает состояние up, когда указатель мыши находится за пределами кнопки, состояние over - когда указатель мыши проходит над кнопкой, и состояние down - когда пользователь щелкает на кнопке мышью. Областью попадания называется графический объект, определяющий совокупность точек, щелчок на которых интерпретируется как щелчок на кнопке. Часто этот объект совпадает по размерам с графическими объектами состояний up, over и down. Все атрибуты представлены кадрами на временной диаграмме символа кнопки (рис. 8.5).

Рис.

8.5. Состояния кнопки представлены именованными кадрами на временной диаграмме Стандартные кнопки легко создаются и понятно работают. Они очень полезны для новичков и дизайнеров, торопящихся со сдачей проекта. Класс Button содержит многие свойства и обработчики событий класса MovieClip, но ни одного из его методов, а также не имеет полноценной временной диаграммы. Соответственно, вам не удастся заставить экземпляр кнопки работать как нормальный анимационный клип. Но если учесть, что клипы Flash MX и Flash MX 2004 поддерживают все методы класса Button, можно создать кнопочный клип, то есть клип, который работает как полноценная кнопка. Дизайнер с навыками программирования на Action Script вообще может обойтись без стандартных кнопок. Кнопочные клипы обладают рядом особенностей, которые просто не реализуются при использовании стандартных кнопок. В частности, кнопочные клипы могут: • использовать методы класса MovieClip, не поддерживаемые классом Button;

Кнопочные клипы • определять обработчик события onEnterFrame для анимации кнопки;

• создаваться динамически на стадии выполнения. Кнопочный клип не является новым типом символа. Это вполне обычный клип! Чтобы создать кнопочный клип, который обладает всеми возможностями стандартных кнопок, начните с создания символа клипа с именем hit. В символе hit задайте первому слою имя actions, а затем создайте второй слой с именем hit, как показано на рис. 8.6.

пг Рис. в.6. Создание области попадания для кнопочного клипа На слое hit должен находиться прямоугольник (или круг, если вы предпочитаете круглые кнопки), эта фигура определяет область идентификации щелчков на кнопках. Свяжите с кадром 1 слоя actions следующий сценарий: this._visible = false;

_parent.hitArea = this;

Создайте второй символ клипа, который будет служить кнопочным клипом, и присвойте ему имя clipButton. Переименуйте его первый слой в actions. На панели свойств задайте первому кадру слоя actions имя _ир. Создайте еще два ключевых кадра (Insert • Timeiline • Keyframe или Insert • Timeline • Blank Keyframe) и задайте им метки _over и down (рис. 8.7). П * over о— U nr U|o—down J j П t"P s— r o Рис. 8.7. Имитация состояний кнопок посредством создания именованных кадров в клипе Г!

ПРИМЕЧАНИЕ Чтобы кнопочный клип нормально работал, необходимо использовать именно метки _up, _over и _down, соответствующие трем состояниям кнопки.

Свяжите с каждым ключевым кадром операцию stop() (по одной операции для каждого состояния кнопки) при помощи панели Actions. Разместите три графических представления кнопки в трех ключевых кадрах так, как вы бы сделали это для обычной кнопки;

используйте столько дополнительных слоев, сколько потребуется. Разместите все новые слои под уровнем actions (рис. 8.8).

Глава 8. Элементы пользовательского интерфейса Рис. 8.8. Состояния кнопки в кнопочном клипе Добавьте новый слой с именем hit (рис. 8.9). В первом кадре этого слоя разместите экземпляр символа клина hit;

если потребуется, измените его размеры по размерам графики в других кадрах. Затем скройте слой hit.

Рис. 8.9. Размещение клипа hit на слое hit главного кнопочного клипа Если теперь разместить экземпляр кнопочного клипа на сцене и присоединить к нему сценарий, клип будет вести себя точно так же, как обычная кнопка. Иначе говоря, после прикрепления обработчика событий кнопки анимационный клип работает как кнопка. Для этого сначала присвойте кнопочному клипу имя экземпляра (например, cButton) на панели свойств. Затем создайте на главной временной диаграмме (не на временной диаграмме клипа!) новый слой с именем actions и свяжите с его первым кадром следующий сценарий: cButton.onRelease = functionO { traceC'you clicked me");

}: Как же работает описанная схема? При связывании кнопочного сценария с клипом (что было сделано косвенно с использованием предыдущего фрагмента ActionScript на главной временной диаграмме вместо присоединения сценария к временной диаграмме клипа) Flash направляет индикатор текущей позиции на кадры с метками _up, _over и „down при возникновении соответствующих событий. Сценарий, связанный с символом клипа hit, назначает его невидимой областью попаданий для родительского клипа (то есть для нашего кнопочного клипа). Все это, конечно, хорошо, но пока мы не увидели ничего принципиального нового или заслуживающего наименования «трюка». Все, что у нас получилось, это клип, который работает как стандартная кнопка. Однако с кнопочными клипами можно делать то, что невозможно сделать со стандартными кнопками. Прежде всего вы можете использовать методы класса MovieClip, в том числе и те, которые не поддерживаются классом Button. Например, клип можно перевести в нужное состояние на программном уровне, без операций с мышью. Если вызвать метод cButton.gotoAndStop("_over"), кнопочный клип перейдет в состояние, которое обычно активизируется при нахождении над ним указателя мыши. Такая возможность может пригодиться для динамического изменения кнопок.

Кнопочные клипы Например, если кнопка предназначена для загрузки изображения, в свободном состоянии на ней можно отображать сообщение «load image», а в нажатом - сообщение «loading...». Или другой вариант - когда пользователь щелкает на кнопке, она должна остаться в нажатом состоянии до полной загрузки изображения, даже если пользователь отпустил кнопку мыши. Задача легко решается методом MovieClip.gotoAndStop{). Другая интересная возможность - связывание обработчиков onEnterFrame с кнопочным клипом. В частности, это позволит анимировать элементы пользовательского интерфейса после щелчка. В следующем сценарии кнопочный клип работает как обычная кнопка до тех пор, пока на нем не будет сделан щелчок. В обработчике onRelease кнопка удаляет свой обработчик onRelease и определяет обработчик onEnterFrame, который уводит ее за пределы экрана (слева направо): btnjnc.onRelease = function О { // Операции кнопки (не приводятся). // Возвращение к анимированному клипу, delete this.onRelease;

this.onEnterFrame = functionO { i f (this._x < 600) { this._x += 10: } else { delete this.onEnterFrame:

Но еще важнее другое - появляется возможность динамического создания кнопочных клипов методами MovieClip.duplicateMovieClipO и MovieClip.attachMovie() и размещения в них текста методом MovieClip.createTextField(). Co стандартными кнопками это невозможно, потому что класс Button не поддерживает указанные методы. Таким образом, эмулируя кнопку на базе анимационного клина, мы получаем массу возможностей, выходящих за рамки стандартных кнопок. А если модифицировать кнопочный клип и использовать нетривиальные возможности временной диаграммы, можно будет реализовать дополнительную функциональность.

Добавление состояний кнопок В кнопочный клип легко добавляются новые состояния кнопок. Простейшее решение основано на включении всего необходимого кода во все клипы через свойство MovieClip.prototype (работает в ActionScript 1.0 и 2.0): MovieClip.prototype.disable = functionO { this.enabled = false;

thi s.gotoAndStopC"_di sable");

}: Приведенный фрагмент включает в класс MovieClip метод disable(). Этот метод переводит временную диаграмму кнопочного клипа к кадру _disable;

фактически мы создаем новое состояние блокировки, в котором клип не реагирует на события.

Глава 8. Элементы пользовательского интерфейса Чтобы реализовать состояние блокировки, добавьте соответствующее изображение (обычно это графика _ир, оттененная серым цветом) в кадр с меткой _disable на временной диаграмме кнопочного клипа (рис. 8.10). зо. 35 : • "disable' Рис.

8.10. Определение состояния блокировки для кнопочного клипа Разумеется, для кнопочных клипов можно создавать и другие состояния. Приведу лишь несколько примеров: • состояние выдачи справки, в котором через секунду после события onRollOver рядом с кнопкой появляется справочный текст, исчезающий по событию onRollOut;

состояние по умолчанию (исходное состояние кнопки до первого щелчка). Если в кадре 1 на кнопку помещается исходное изображение, а переход к состоянию _ир происходит лишь после первого щелчка (после этого кнопка будет постоянно находиться в состоянии _ир, пока указатель мыши находится за ее пределами);

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

• • Итоги На создание кнопочного клипа требуется чуть больше времени, чем на создание стандартной кнопки, но зато кнопочные клипы гораздо более универсальны благодаря возможности выполнения сценариев onEnterFrame и реализации дополнительных состояний.

ТРЮК Полосы прокрутки Создание упрощенного компонента полосы прокрутки для Flash MX 2004.

№ Компоненты v2, входящие в комплект поставки Flash MX 2004, ориентированы на создание сложных пользовательских интерфейсов и RIA. По сравнению с компонентами vl в них был внесен ряд усовершенствований, включая поддержку управления глубиной и управления передачей фокуса#с клавиатуры. Компоненты v2 были полностью переписаны для ActionScript 2.0 (в частности, в них использовались строгая типизация данных и различия в регистре символов). В них Полосы прокрутки используется общая архитектура компонентов, спроектированная для оптимизации размера файла при использовании пяти и более компонентов в одном SWF-ролике (согласно исследованиям Macromedia, эта ситуация вполне типична). Тем не менее, компоненты Flash MX 2004 не могут использоваться как простая замена для компонентов Flash MX vl, что объясняется рядом причин: • первый компонент v2, включенный в SWF, требует дополнительных 30 Кбайт данных для инициализации классов библиотеки компонентов. Правда, при включении дополнительных компонентах объем загружаемого файла увеличивается незначительно, поскольку все компоненты v2 работают на общей основе;

• среди компонентов v2 для Flash MX 2004 нет автономной полосы прокрутки (хотя ожидается, что в версии 7.2 этот компонент появится). При экспортировании SWF в формат Flash Player 7 нельзя просто использовать старые компоненты vl> поскольку старые компоненты не соответствуют требованиям Flash Player 7 к регистру символов (данная тема обсуждается на странице http://swfoo.com/archives/000034.html). Даже если обновить файл Flash MX (Flash Player 6) до формата Flash MX 2004 (Flash Player 7) и включить различия в регистре символов в сценарии, код, связанный с компонентами vl, может отказаться работать из-за несогласованности регистра символов и преобразования типов в самих компонентов, а также различий в поведении некоторых встроенных функций ActionScript в Flash Player 6 и 7. Обходное решение этой проблемы - использовать обновленные «компоненты Flash MX для Flash MX 2004», как описано далее. Существует немало компонентов, разработанных сторонними фирмами, но все же было бы неплохо использовать компоненты Macromedia для обеспечения совместимости с будущими версиями Flash Player (Macromedia прикладывает серьезные усилия к тому, чтобы старые SWF без изменений работали в новых версиях Flash Player). Автономная полоса прокрутки входила в число компонентов vl в Flash MX. Этот компонент может использоваться в Flash MX 2004 при экспортировании SWF в формат Flash Player 6 (хотя смешивать компоненты vl и v2 в одном проекте не рекомендуется). Версии компонентов vl, совместимые с Flash Player 7, но занимающие меньший объем, чем компоненты v2, находятся в хранилище Flash Exchange по адресу http://www.macromedia.com/exchange/flash в категории User Interface, под заголовком «Flash MX Components for Flash MX 2004». К Flash Exchange также можно обратиться командой Flash Help • Flash Exchange. Компоненты vl распространяются в формате файлов.mxp. Для их установки необходимо установить программу Macromedia Extension Manager, также доступную в Flash Exchange. После установки обновленные компоненты Flash MX появляются на панели Components Flash MX 2004 в категории Flash MX Ul Components (рис. 8.11). Компоненты Flash MX 2004 выделены на панели Components в отдельную категорию и не смешиваются с обычными компонентами пользовательского интерфейса в категории Ul Components.

Глава 8. Элементы пользовательского интерфейса ChedcBox Up ComboBox -Щ ListBox -!ll PushButton • Д RadioButton • Ц SaollBar •••§^ ScrollPsne i Media Components I Ul Components Рис. 8. 1 1. Категория Flash MX Ul Components на панели Components в Flash MX Компоненты Flash MX не обладают всеми эффектными возможностями компонентов Flash MX 2004. Тем не менее, если вам всего лишь нужно использовать полосу прокрутки для текстового поля или другого элемента с прокруткой (рис. 8.12), просто перетащите полосу прокрутки с панели Components и разместите ее на сцене точно так же, как в Flash MX. Элемент будет нормально работать даже в том случае, если в параметрах публикации будет выбран формат Flash Player 7 и ActionScript 2.0. Но самое приятное - то, что полоса прокрутки Flash MX увеличивает размер SWF-файла всего на 6 Кбайт.

S Dim;

SO X 405 pbceb Fr rste;

B Size;

6 K 643i B) Duration: It 16 fr {1.3 s} 3 K2B iS K B 8KB [ IKBi 4 3 Bl Frasne;

1 6 K (43 B B 63 ) applications. They are Щ not without one or two ^ disadvantages though;

Рис. 8.12. Использование компонента Scrollbar Полосы прокрутки Итоги Прогресс - замечательная вещь, и компоненты Flash MX 2004 обладают множеством дополнительных возможностей. Они обеспечивают управление глубиной и передачей фокуса, вывод вспомогательной информации для пользователей с дефектами зрения... но иногда все, что вам нужно, - это самая обычная полоса прокрутки! В таких ситуациях (а особенно если увеличение размера файла на 30 Кбайт ради одного компонента неприемлемо) следует использовать надежную хорошо знакомую полосу прокрутки Flash MX из компонентов vl.

ГЛДВД Быстродействие и оптимизация Трюки № 65- Механизм анимации Flash не блещет быстротой, потому что основным критерием оптимизации Flash Player была не скорость, а минимальный размер передаваемого файла. Кроме того, этот механизм проектировался с расчетом на использование в Веб, то есть оптимизация ориентировалась на малые файлы, а не на большие, сложные анимации. Для обеспечения минимального уровня требований и максимальной совместимости Flash Player не поддерживает аппаратное ускорение. Из-за этого Flash-дизайнеры часто сталкиваются с проблемами быстродействия. В Flash можно выделить следующие области потенциальной оптимизации: • сокращение времени загрузки за счет эффективного использования объема контента или изменения способа загрузки (см. трюк 73);

• повышение скорости анимации посредством оптимизации перерисовки;

• повышение скорости обработки данных посредством написания быстро выполняемого кода.

Все перечисленные способы более подробно описаны далее.

Оптимизация размера файла и времени загрузки Технология Flash начиналась с простого модуля векторной анимации для Веб, но сейчас она нередко используется и для более серьезных приложений. Дизайнер должен позаботиться о том, чтобы пользователю не приходилось подолгу ждать загрузки контента. Чтобы обеспечить минимальное время ожидания, необходимо почаще тестировать сайт на стадии разработки. До выхода обновления Flash MX 2004 версии 7.0.1 встроенный профайлер обладал минимальными средствами реалистичного моделирования сайтов, использующих несколько SWF и внешних ресурсов. Хотя последняя версия способна тестировать несколько SWF и вести статистику использования внешних ресурсов, она по-прежнему не обеспечивает совместного использования шрифтов и не позволяет протестировать сайт из браузера. Инструментарий независимых фирм (см. трюк 66) позволяет преодолеть ограничения встроенного профайлера и протестировать весь сайт (то есть как ресур Быстродействие и оптимизация сы Flash, так и внешние ресурсы) в условиях канала с низкой пропускной способностью непосредственно в браузере.

Оптимизация графики Широкое распространение Flash в немалой степени объясняется малыми размерами Flash Player и способностью создания контента для каналов с низкой пропускной способностью. Тем не менее, за оптимизацию размера файла приходится расплачиваться снижением быстродействия при возрастании сложности. Векторная графика более компактна, чем другие графические форматы, поскольку в ней определяются не низкоуровневые графические данные, а математические объекты (точки, кривые и заливки), необходимые для прорисовки изображения на стадии выполнения. Тем не менее, преобразование векторных данных в итоговое изображение занимает много времени, к тому же эту операцию приходится выполнять при каждом изменении внешнего вида или позиции графики. Если изображение содержит области со сложными контурами или заливками, изменяющиеся в каждом кадре, анимация будет работать довольно медленно. В этой главе рассматриваются некоторые методы борьбы со снижением быстродействия, специфическим для векторной графики. В частности, будут описаны общие рекомендации по проектированию графики (см. трюк 68) и замене векторных изображений растровыми (см. трюк 72).

Повышение быстродействия кода В отличие от таких языков, как C++, ActionScript не компилируется в низкоуровневый машинный код. Вместо этого он преобразуется в байт-код, который превосходит интерпретируемые языки по скорости обработки, но уступает машинному коду. Хотя ActionScript может быть медленным, в большинстве мультимедийных презентаций основные ограничения по быстродействию обычно обусловлены графикой, аудио и видео. Более того, общее быстродействие (то есть субъективное быстродействие с точки зрения пользователя) также зависит от времени загрузки, а не только от времени выполнения. Конечно, в RIA-приложениях, работающих с базами данных, быстродействие также будет зависеть от скорости обработки запросов, эффективности передачи данных и их представления. Многие трюки, описанные в книге, связаны с оптимизацией ActionScript. Более того: • Flash Player 7 изначально оптимизирован для кода с большим количеством вызовов функций и локальных переменных (см. трюк 100), поэтому старые приемы стали менее актуальными;

• многие приемы оптимизации не являются специфическими для ActionScript и представляют собой хорошо известные методы, применяемые при программировании на любых языках без оптимизирующего компилятора. Например, для ускорения циклов из них выносятся все элементы, не изменяющиеся при каждой итерации;

Глава 9. Быстродействие и оптимизация • слишком медленная работа программы часто является признаком того, что вам стоит сократить масштаб приложения или поискать другое решение проблемы. Например, попробуйте выявить и ликвидировать критические точки посредством оптимизации графики;

• помните, что быстродействие - показатель субъективный (см. трюк 71). Если попытаться выполнить слишком много работы в одном кадре, Flash не успеет построить изображение и пользователь заметит замедление. Если разбить выполняемую работу на несколько частей, Flash успеет обновить сцену за положенное время и пользователь ничего не заметит.

Хотя правильно написанный код ActionScript обычно не содержит «узких мест», возможности для улучшения остаются всегда. Читателям, интересующимся темой оптимизации ActionScript, стоит ознакомиться со следующими ссылками: • gotoAndPlay (http://www.gotoandplay.it/_articles/2004/01/as_optimizations.php) учебник по оптимизации ActionScript;

• Odd Hammer (http://www.oddharnmer.com/actionscriptperformance) - сравнительные тесты производительности разных приемов оптимизации ActionScript в разных версиях Flash Player.

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

• Иногда можно заметить, что документ FLA увеличивается в размерах при каждом сохранении, даже если из него удаляются неиспользуемые ре~ сурсы (графика и звук). Данный трюк поможет вам справиться с разрастанием файлов.

Б р б с разрастанием ф й о Flash оьа алв При публикации Flash-контента одной из главных проблем становится размер загружаемого файла. Чем меньше опубликованный файл, тем быстрее проходит загрузка. При компиляции FLA в SWF Flash исключает из библиотеки неиспользуемые ресурсы (см. трюк 73). Тем не менее, исходный FLA-файл содержит не только исходные ресурсы библиотеки, но даже те старые ресурсы, которые были из нее удалены! Именно по этой причине происходит разрастание FLA-файлов. На SWF-файлы оно не распространяется, и все же об этой проблеме следует знать. В версиях, предшествующих Flash MX 2004, файлы увеличивались при каждом сохранении командой File • Save, даже после удаления из них неиспользуемых ресурсов. Хотя команда Flash MX 2004 File • Save and Compact уменьшает размер Борьба с разрастанием файлов Flash файла FLA, в более ранних версиях Flash эта команда не поддерживается. Более того, файл, сохраненный в формате Flash MX 2004, не удастся открыть в предыдущих версиях (хотя Flash MX 2004 и Flash MX Professional 2004 используют общий формат файла).

Почему увеличиваются файлы?

Так что же вызывает эффект разрастания файлов? Во всех версиях Flash команда File • Save сохраняет в FLA только информацию об изменениях по сравнению с предыдущей версией (так называемое добавочное сохранение). Flash не оптимизирует сохраняемые файлы, исключая из них удаленные данные. Чтобы убедиться в этом, создайте новый FLA-файл и импортируйте в него большой ресурс (например, растровое изображение или звуковой файл). Затем сохраните файл командой File • Save;

также молено использовать комбинацию клавиш Ctrl+S (Windows) или 3S+S (Mac). Запомните размер сохраненного файла. Затем удалите большой ресурс со сцены и из библиотеки, после чего сохраните файл заново командой File • Save. Вы увидите, что размер файла остался неизменным даже после удаления ресурса! В этом заключается причина разрастания файлов: при внесении изменений в FLAфайл удаляемые данные остаются в сохраненном файле. Теперь представьте, что вы временно использовали какие-то запатентованные материалы (или другие, которые бы вам почему-либо не хотелось афишировать), а затем случайно передали их клиенту. Конечно, чтобы получить эти данные, клиенту придется перекомпилировать FLA (см. трюк 98), но лучше сразу застраховаться от возможных неприятностей. Конечно, обычно в Веб публикуются только SWF-файлы, и все же не забывайте сохранять FLA-файлы со сжатием, передавая их кому-либо в качестве примеров, а также при распространении среди клиентов или коллег.

Решение проблемы Заставить Flash сжимать FLA-файлы можно двумя способами. Это: • сохранение файла командой File • Save and Compact (только в Flash MX 2004 и Flash MX Professional 2004). В процессе сохранения Flash удаляет всю лишнюю информацию. При этом весь файл переписывается заново, поэтому операция занимает больше времени в зависимости от объема сохраняемого контента. Открыть файл в предыдущих версиях Flash не удастся, так что будьте внимательны и сохраняйте архивы унаследованных FLA-файлов! Архив лучше хранить под другим именем на тот случай, если операция сжатия почему-либо завершится неудачей;

• сохранение и переименование файла командой File • Save As (все версии Flash). Происходит то же самое, что и при выполнении команды File • Save and Compact, но с переименованием файла. Переименование окажется полезным на случай сбоев при сохранении, однако файл можно сохранить и под исходным именем - когда Flash выдаст предупреждение о том, что файл уже существует (щелкните на кнопке Yes).

Так Глава 9. Быстродействие и оптимизация почему же Macromedia не изменит свой продукт так, чтобы команда File • Save выполняла сохранение одновременно со сжатием? Дело в том, что добавочное сохранение выполняется гораздо быстрее. Таким образом, оптимальная схема выглядит так: • для частых сохранений используйте комбинации клавиш Ctrl+S (или

• периодически архивируйте файл, чтобы предотвратить потерю данных и при необходимости иметь возможность вернуться к предыдущей версии;

• время от времени выполняйте команду File • Save As или File • Save and Compact (например, в конце дня или перед архивацией файлов), чтобы сохранить файл со сжатием;

прежде чем создавать постоягшую архивную копию FLA-файла, создайте резервную копию. Затем удалите лишние ресурсы из библиотеки (помните, что ресурсы, используемые из ActionScript, удалять нельзя). Затем сохраните и сожмите файл одним из способов, описанных ранее, чтобы свести к минимуму его объем при хранении.

• Итоги Проблема с разрастанием файлов была учтена в Flash MX 2004, однако вы все равно должны хорошо разбираться в сути этой проблемы, чтобы эффективно организовать свой рабочий процесс. В ходе Flash-разработки часто происходят многочисленные изменения в дизайне и наборах ресурсов, поэтому файлы разрастаются очень быстро. Минимизация размера FLA-файлов ускоряет их загрузку в среде разработки и экономит место при архивировании и пересылке. Аналогичные проблемы существуют и в других коммерческих программных продуктах, в том числе в Macromedia Director и Microsoft Word.

Тестирование загрузки канала связи №66 для сложных сайтов ТРЮК WebSpeed Simulator помогает справиться с таким недостатком Bandwidth Profiler, как невозможность протестировать загрузку канала в браузере. В процессе работы над сайтом требуется узнать, сколько времени потребуется для его загрузки на определенной скорости подключения. Полученная информация поможет создать наилучшее впечатление у посетителей сайта, большинство из которых работает на более медленных подключениях, чем разработчики. Встроенный профайлер Flash Bandwidth Profiler позволяет оценить время загрузки одиночного SWF-файла при имитации в режиме тестирования. Для этого следует включить режим тестирования командой Control • Test Movie, а затем открыть окно Bandwidth Profiler командой View • Bandwidth Profiler. Тем не менее, Bandwidth Profiler предполагает идеально работающее подключение, поэтому выберите скорость подключения чуть ниже самой низкой ожидаемой скорости. Например, для имитации типичного модема со скоростью 56 Кбит/с лучше выбрать скорость 28,8 Кбит/с.

Тестирование загрузки канала связи для сложных сайтов И все же Bandwidth Profiler, включенный в поставку Flash MX 2004 версии 7.0, слишком примитивен для нетривиальных сайтов. Коммерческие сайты на базе Flash обычно не ограничиваются единственным SWF-файлом. На стадии выполнения загружаются дополнительные ресурсы - вторичные SWF-файлы, графика, звук МРЗ, видеофайлы, удаленные данные и текстовые файлы (CSS, XML и т. д.) До выхода обновления Flash MX 2004 7.0.1 Bandwidth Profiler не включал эти ресурсы в имитацию, поэтому время загрузки оказывалось заниженным. Полезной альтернативой для Bandwidth Profiler является WebSpeed Simulator (http://www.xat.com). Работа программы основана на создании локального сервера HTTP с ограниченной скоростью канала. В частности, WebSpeed Simulator позволяет: • наблюдать из браузера в реальном времени за процессом загрузки сайта в имитируемом подключении с ограниченной скоростью канала;

• просматривать содержимое кэша браузера, снабженное временными пометками. Таким образом можно узнать порядок загрузки файлов (а также состав данных, остающихся в кэше после посещения сайта). WebSpeed Simulator чрезвычайно прост в использовании. С другой стороны, работая в режиме сервера HTTP, он не способен эмулировать защищенные серверы. Допустим, мы хотим протестировать сайт с локального жесткого диска. Щелкните на кнопке Setup на панели инструментов WebSpeed Simulator (на экране появляется диалоговое окно Setup Web Server (рис. 9.1) и задайте местонахождение сайта (то есть местонахождение папки с домашней страницей - например, index.html). Возможно, вам также придется очистить кэш браузера, хотя это зависит от его текущих настроек. Так, очистка кэша в Internet Explorer осуществляется командой Сервис • Свойства обозревателя • Общие • Удалить файлы (Tools • Internet Options • General • Delete Temporary Internet Files).

***,Ht Name R ^'i5i^ffr,^..^LocalW^tetonbcalhaiddnve) Ил Foidl!. ~~" i C:\Documents and SettinqtASham B\My Documents^Flash Sites Щ>.

"' Rm t Website (oyet a network) e oe U L w wx tc m R : w.a. o Port:: [O S (Defaultis 90) ;

::

: • e S ed Sm l t r Options Wb pe i uao P C rv r A s l t Ln s to L c l Ln s oi et b o e i k u oa ik \ i Port:

Г :

( eus8j) Df ti a......... :., : Г Log hits to file i I ШШАШ:

L.

:,:;

:.'pK•-.'.', |.

Cancel:

icresses...

^'^Ж^Й^Ш^ШШЙШ!!^ Рис. 9. 1. Диалоговое окно Setup Web Server в WebSpeed Simulator Глава 9. Быстродействие и оптимизация Затем щелкните на кнопке Restrict и введите скорость имитируемого подключения в диалоговом окне Restrict Web Server (рис. 9.2). В этом окне выполните также сохрание содержимое кэша браузера (тогда при повторном посещении сайта контент, уже находящийся в кэше браузера, загрузится немедленно).

Link Speed Emulation.

\Ш CustuiTi speed (6it/s): :

j > •:

: : IJik Utilization %. : — 1ЩШ • • •-.•', I. f Allow ВFowser.Caching,.;

:

|5T I Рис. 9. 2. Диалоговое окно Restrict Web Server в WebSpeed Simulator Щелкните на кнопке Browse. Имитатор направляет браузер в папку, заданную во время начальной настройки, и начинает выполнять функции сервера с пропускной способностью, заданной в диалоговом окне Restrict Web Server. В процессе загрузки объектов в браузере WebSpeed Simulator выводит информацию о времени загрузки каждого файла, порядке загрузки и размере файлов (рис. 9.3).

Ff V w S r e '-. e. ie e. ev r..H l i p [ | dracjpg LJ burnmediajrionstaf.s.wf [ J bummedia_game.swf Q тал.swd Q mairi.svrf Gl hdexvswf [ | index Jhtml Ш 302 Redrecbon Iliiiiiiiiiii Waiting for web accesses..

< p :;

Setep;

R s tret e C:pocumeRts and Settings^ham В Н у Docum... 12KB Ci'poatmentsandSettings^hameV^yDocum... 1.9КБ C:V3oi:uments and Setbngs^ham ВЩ- Docum.... 29KB CiVJocuments and Settings'^ham 8V*1y Docum... Ж6 Ci'ftocuments and Settings'^ham 8f\^ Oocum... 211KB Ci^ocuments and Settings\Sham В ^ y Docum... 80KB С;

'-Documents and Settirigs'^ham ВЩ

о sto ;

Ao a m bt c: u od a/ 2.1 Se es 3.4 Se es 53 e s.Se 12 Se. es 38.6 Se es 1, S Se 4 es 0.7 Se es 0.1 Se es ;

Uptirne: OOhOBrn Рис. 9.З. Результаты работы WebSpeed Simulator Я часто использую WebSpeed Simulator во время работы с Flash. Эта программа заполняет пробелы Bandwidth Profiler и предоставляет удобный интерфейс для тестирования в условиях разных пропускных способностей каналов. Настройка выполняется достаточно тривиально;

для проведения тестирования на разных Маскировка последствий снижения качества скоростях вам не придется изменять параметры браузера или физического подключения, так что программа легко интегрируется в обычный рабочий процесс. Она даже позволяет проводить измерения на смешанных сайтах HTML+Flash, тогда как Flash Bandwidth Profiler работает только с SWF-файлами. Опыт работы с WebSpeed Simulator показывает, что его данные весьма точны, - время, предсказанное программой, оказывается очень близким к фактическому времени загрузки контента.

Итоги Хотя WebSpeed Simulator распространяется не бесплатно (программа стоит $99, но пользователям предоставляется 30-дневный пробный период), эта среда лучше всего подходит для тестирования требований к пропускной способности канала в процессе разработки веб-сайтов, особенно многофайловых. Если WebSpeed Simulator будет постоянно находиться у вас под рукой во время разработки, это поможет избежать многих неприятных сюрпризов. Программа настраивается элементарно, поэтому вы сможете, например, продемонстрировать клиенту работу сайта в имитируемых условиях на портативном компьютере. Подобные демонстрации помогут клиенту лучше понять, как пропускная способность канала отразится на работе сайта, и принять более обоснованные решения. Этот способ подходит для приложений Flash, загружающих большое количество динамических данных, поэтому он окажет бесценную помощь как разработчикам RIA, так и дизайнерам компьютерных анимаций.

Маскировка последствий снижения №67 качества ТРЮК Повышение быстродействия и сохранение внешней привлекательности за счет маскировки последствий снижения качества. Повышение качества неизбежно приводит к снижению быстродействия, поэтому в Flash существуют несколько режимов визуализации с разным качеством. Хорошо разобравшись в этой теме, вы сможете принимать правильные решения в конкретных ситуациях и обходить некоторые недостатки встроенных режимов визуализации. Механизм визуализации обычно использует сглаживание для маскировки резких краев векторных контуров и субъективного повышения качества. Резкие переходы между областями контрастных цветов сглаживаются за счет добавления пикселов промежуточных оттенков. На кривой в левой части рис. 9.4 хорошо видны неровности, возникшие из-за того, что слишком большой размер пикселов не позволяет точно воспроизвести кривую. Сглаженная кривая справа выглядит более ровной. Учтите, что сглаживание не исправляет ошибки, а лишь скрывает их от человеческого глаза посредством смягчения перехода между контрастными цветами.

Глава 9. Быстродействие и оптимизация Сглаживание интенсивно расходует мощности процессора, поэтому иногда его приходится отключать ради повышения быстродействия.

'•..

"ч.

Рис. 9.4. Исходная (слева) и сглаженная (справа) кривые Глобальное отключение сглаживания для всего контента, отображаемого в Flash Player, производится следующей строкой: _quality = "LOW": Качество визуализации также можно задать командой File • Publish Settings • HTML • Quality. Учтите, что свойства MovieClip._quality и TextField._quality являются обычными синонимами для глобального свойства quality и определяют глобальный режим сглаживания. Качество визуализации не может задаваться на уровне отдельных экземпляров. Кроме значения "LOW", свойство quality также может принимать значения "AUTOLOW", "MEDIUM", "AUTOHIGH", "HIGH" и "BEST". В режимах с высоким качеством сглаживаются текст, а также растровая и векторная графика. В режимах с низким качеством сглаживание не выполняется вообще. Дополнительную информацию о режимах визуализации можно получить на панели Help (команда Help • Help или клавиша F1), выполнив поиск по ключевому слову «_quality». На практике рекомендуется использовать максимальное качество, обеспечиваемое вашим контентом и компьютерами пользователей. Обычно это означает режим "BEST" для больших статических сайтов, режимы "HIGH" и "MEDIUM" для большинства общего контента и режим "LOW" в тех случаях, где скорость имеет критическое значение (например, в играх). При выборе режимов "AUTOHIGH" и "AUTOLOW" обеспечивают избирательное применение сглаживания. В этих режимах Flash автоматически переключается между сглаженным и несглаженным выводом в зависимости от скорости воспроизведения на компьютере, на котором выполняется анимация. Режим "AUTOHIGH" начинает работать с включенным сглаживанием и отключает его при ухудшении быстродействия (то есть при неприемлемом снижении частоты смены кадров), тогда как режим "AUTOLOW" не применяет сглаживания изначально, но включает его при достижении правильной частоты смены кадров. Режимы с префиксом "AUTO" используются редко, потому что переход от высокого качества к низкому обычно хорошо заметен и раздражает пользователя.

Маскировка последствий снижения качества Для выбора оптимального быстродействия попробуйте задать режим "LOW" и по возможности скрыть снижение качества изображения.

Применение малоконтрастных цветов Сглаживание необходимо прежде всего в ситуациях, когда контрастные цвета прилегают друг к другу, поэтому одно из решений - использовать изначально малоконтрастные цвета. На рис. 9.5 исходная кривая {слева) выглядит менее неровной, чем на рис. 9.4, потому что черная линия близка по цвету к серому фону (на экране различия более очевидны, чем на печати). Конечно, при сокращении контраста кривую по определению труднее отличить от фона, так что не перестарайтесь со сближением цветов. При необходимости контраст можно улучшить, сделав линию толще или темнее.

Рис.

9.5. Сглаженная {справа) и несглаженная (слева) кривые на малоконтрастном фоне Если вы пытаетесь повысить субъективное качество изображения за счет применения малоконтрастных цветов, избегайте некоторых цветовых комбинаций: • Черный цвет на белом и желтом фоне - две самые контрастные комбинации цветов. Наибольший контраст составляют черный и желтый цвета, именно поэтому пчелы и осы имеют черно-желтую предупреждающую окраску, а телефонные справочники печатаются на желтых страницах). Человеческий глаз наиболее чувствителен к зеленому цвету. Соответственно, он лучше различает оттенки зеленого, чем оттенки красного или синего. При прочих равных условиях старайтесь избегать зеленого цвета при использовании режимов с низким качеством вывода. Существует несколько типов «цветовой слепоты» с множеством разновидностей вдоль всего спектра, но самый распространенный недостаток - дальтонизм, или неумение различать красный и зеленый цвета. Избегайте цветовых схем с красным цветом на зеленом фоне или зеленым - на красном фоне. За дополнительной информацией о цветовых схемах для пользователей с расстройствами зрения обращайтесь на сайт Toledo-Bend (http://www.toledobend.com/colorblind), где обсуждаются различные дефекты цветового восприятия.

• • Глава 9. Быстродействие и оптимизация Другие приемы Существуют и другие способы маскировки неровностей на векторных контурах. Попробуйте сделать так, чтобы фигуры в ваших анимациях были заполнены прямоугольными заливками (по возможности), быстро перемещались или состояли только из вертикальных и горизонтальных линий. Горизонтальные и вертикальные линии, в том числе и стороны прямоугольников, не нуждаются в сглаживании. С другой стороны, на быстро движущейся фигуре неровности просто не разглядеть. Последнее обстоятельство может использоваться в видеоиграх, написанных на Flash. На начальной заставке или экране с инструкциями для игрока использование режимов "HIGH" и "BEST" не повредит быстродействию, но при переходе к самой игре быстрая графика выходит на первый план, поэтому с большой вероятностью качество стоит снизить. Кроме того, если объекты в игре движутся достаточно быстро (а статическая графика состоит только из вертикальных и горизонтальных линий, как в игре Pacman), пользователь даже не заметит снижения качества. Впрочем, следует учитывать некоторые обстоятельства: при проектировании графики для вывода на видео избегайте горизонтальных линий толщиной 1 пиксел. Поскольку на обычном телевизоре используется чересстрочный видеосигнал, линии должны иметь толщину минимум 2 пиксела, чтобы предотвратить мерцание. Даже при воспроизведении видеороликов в некоторых алгоритмах сжатия могут возникать проблемы с очень тонкими линиями, поэтому проведите тестирование перед выбором окончательного варианта дизайна. Впрочем, даже идеально горизонтальные и вертикальные линия иногда выигрывают от сглаживания. Это особенно заметно для ярких цветов, воспроизводимых на белом фоне.

Растровые шрифты Сглаживание текста, выполняемое в той или иной степени во всех режимах, кроме "LOW", серьезно расходует ресурсы процессора (особенно для больших блоков текста или при движущемся тексте). С другой стороны, несглаженный текст шрифтов, предназначенных для печати, плохо выглядит на экране. И наоборот, сглаживание затрудняет чтение при малых размерах букв (обычно ниже 8 пунктов, хотя это зависит от шрифта). При работе с большими объемами текста или с мелким текстом следует использовать растровые (пиксельные) шрифты, которые лучше смотрятся без сглаживания (рис. 9.6). The Рис.

q u i c k b r o w n fox jumps over the lazy d o g.

9.6. Растровые шрифты и мелкий текст лучше смотрятся без сглаживания Общая информация о растровых шрифтах приводится в списке FAQ на сайте Web Page Design for Designers (http://www.wpdfd.com/pffaq.htm). Учебник по применению растровых шрифтов находится по адресу http://www.wpdfd.com.wdtypo3a.htm.

Оптимизация графики Далее приводится список ресурсов, посвященных специфике применения растровых шрифтов в Flash: • • • Minimi (http://www.miniml.com) на базе векторных;

- коллекция растровых шрифтов, созданных - список FAQ о при Fonts for Flash (http://www.freepixelfonts.com/faqs.html) менении растровых шрифтов в Flash;

Best Flash (http://www.bestflashanimationsite.com/pixel-fonts) - ссылки на ресурсы, посвященные работе с растровыми шрифтами в Flash.

Итоги Работая над созданием сложных анимаций в Flash, неизбежно начинаешь понимать, что скорость визуализации векторной графики ограничена. Снижение качества изображения за счет отключения сглаживания (режим "LOW") позволяет легко повысить быстродействие, но тогда начинают бросаться в глаза неровности векторных контуров. Как было показано в данном разделе, существует несколько способов снижения или маскировки снижения качества. Впрочем, неровности даже можно сделать частью дизайна для создания эффекта «ретро». Конечно, снижение качества визуализации - не единственный способ. В оставшихся трюках этой главы будут представлены другие способы оптимизации быстродействия.

ТРЮК Оптимизация графики Графика вносит большой вклад в объем данных, передаваемых по каналу связи. Оптимизация графики способна заметно повысить общее быстродействие приложения.

№ Графический механизм Flash проектировался для снижения объема контента за счет применения векторной графики вместо растровой. После того как графика будет загружена на компьютер пользователя, основное время обычно затрачивается на визуализацию изображения на сцене (время выполнения большинства сценариев ActionScript обычно пренебрежимо мало). Чем большая часть сцены обновляется в одном кадре, тем медленнее происходит графический вывод. Таким образом, для вывода больших векторных изображений, несмотря на малый объем данных, все равно необходимо время. В следующем разделе приводятся рекомендации по ускорению работы Flash-сайтов, основанные на собственном опыте автора, а также других разработчиков.

Скорость как фактор проектирования Звучит тривиально, но большинство разработчиков забывает, что Flash не успевает сделать все сразу. Вот лишь некоторые операции, приводящие к снижению быстродействия: • Загрузка контента. Потоковая подгрузка анимации параллельно с воспроизведением снижает максимально достижимую частоту смены кадров по сравнению Глава 9. Быстродействие и оптимизация с предварительной загрузкой контента и его воспроизведением после полной загрузки. Часто лучше выдать экран с просьбой подождать, чем пытаться воспроизводить анимацию до завершения ее полной загрузки (в этом случае все равно придется ждать подгрузки, но в процессе воспроизведения). • Воспроизведение МРЗ-файлов, особенно длинных. МРЗ-файлы распаковываются во время воспроизведения, причем в ходе распаковки интенсивно используется процессор. Flash легко справляется с одним-двумя короткими звуками, но при длительных звуках и выводе с несколькими звуковыми каналами можно ожидать замедления анимации. • Обновление текстовых полей. Обновление содержимого текстовых полей на каждом кадре - одна из самых затратных операций, которая легко предотвращается. Вместо этого значения текстовых полей следует обновлять только при фактическом изменении их содержимого или по крайней мере настолько редко, насколько это возможно. Например, таймер, отображающий время в секундах, не обязательно обновлять с частотой смены кадров 30 fps. Вместо этого лучше сохранить старое значение и обновлять текстовое поле только в том случае, если новое значение отличается от предыдущего.

• Использование компонентов Flash MX 2004 v2. Обычно компоненты используются в приложениях с минимальной анимацией, поэтому быстродействие компонентов не является определяющим фактором. Компоненты Flash MX 2004 v2 явно не были рассчитаны на минимальные требования. Они не только занимают большой объем: одновременное размещение нескольких компонентов на экране приводит к заметному снижению быстродействия. Если вы хотите, чтобы анимация шла быстро, используйте компоненты Flash MX vl (см. трюк 73) или пользовательские компоненты или разработайте упрощенный интерфейс, не требующий применения компонентов.

Создание и тестирование оптимизированной графики Растровая графика превосходит векторную по объему пересылаемых данных, но пикселы, необходимые для построения изображения, не нужно заново пересчитывать на стадии выполнения. Полностью загруженное растровое изображение выводится на экран относительно быстро. С векторной графикой дело обстоит наоборот. Векторные изображения хранятся в виде математических описаний, поэтому они чрезвычайно компактны. Тем не менее, в отличие от растровых изображений, пикселы, задействованные в отображении векторного содержимого, вычисляются на стадии выполнения. Иногда применение растровой графики вместо векторной (см. трюк 72) позволяет повысить быстродействие, но на практике все же чаще применяется векторная графика, с которой проще и удобнее работать в Flash. Следующие рекомендации помогают создать векторную графику, которая быстро выводится на экран: • Постарайтесь обойтись без прозрачности (альфа-канала). Flash анализирует каждый пиксел, находящийся под прозрачной фигурой, что существенно замедляет вывод. Чтобы скрыть клип, задайте его свойству visible значение Оптимизация графики false, вместо того чтобы обнулять свойство _alpha. Иначе говоря, графика быстрее всего воспроизводится при свойстве _alpha=100. Присваивание временной диаграмме клипа пустого ключевого кадра (то есть полное отсутствие отображаемого контента) обычно способствует повышению быстродействия. Впрочем, иногда Flash пытается воспроизводить невидимые клипы;

попробуйте задать свойствам _х и _у значения (-1000, -1000) помимо задания свойства _visible=false, чтобы полностью предотвратить подобные попытки. • Избегайте применения градиентных заливок. По возможности старайтесь заменять их растровыми заливками. • Скорость графического вывода зависит от количества точек в кадре. Всегда оптимизируйте сконструированные фигуры - откройте подменю Modify • Shape и выберите одну из команд, Smooth, Straighten или Optimize (в зависимости от типа фигуры), чтобы сократить количество точек, необходимых для прорисовки фигуры. Замена контуров волосяными линиями (или их полная отмена) существенно снижает количество необходимых точек. Чтобы узнать количество точек в контуре, выделите его инструментом Subselection;

если теперь щелкнуть на любом из участков, вы увидите входящие в него точки. • Скорость графического вывода в Flash также связана с количеством пикселов, изменяющихся между кадрами, поэтому постарайтесь избегать больших изменений. Анимированный контент должен занимать как можно меньше места - например, при уменьшении изображения на 10 % по каждому направлению его общая площадь сокращается на 19 %. Если сцена содержит несколько копий одного символа, экономия быстро накапливается. • По возможности используйте пустые (лишенные заливок) фигуры или другие фигуры, сокращающие количество выводимых пикселов. ПРИМЕЧАНИЕ без применения альфа-эффектов пикселы, не изменяющиеся между кадрами, практически не влияют на быстродействие.

Итоги Итоговое быстродействие анимации Flash определяется многими факторами. Оптимизация графики - одна из областей, оказывающих наиболее серьезное влияние. Вообще говоря, оптимизация графики может выполняться на любой стадии разработки, но наибольший эффект она приносит на более ранних стадиях. Если ждать до последней минуты, у вас останется мало времени, и многие меры, которые можно было бы принять раньше (например, отмена прозрачности), создадут гораздо больше трудностей. Мораль: оптимизируйте как можно раньше и как можно чаще. Сторонние программы оптимизации векторной графики - такие как Optimaze (http://www.vecta3d.com) - уменьшают размер файлов до 60 % и ускоряют вывод, потому что оптимизированные векторные данные проще обрабатываются.

320 ТРЮК Глава 9. Быстродействие и оптимизация Хронометраж Bandwidth Profiler и утилиты независимых фирм позволяют оценить время загрузки проекта Flash. Эталонное тестирование быстродействия также поможет оптимизировать процесс воспроизведения.

№ Встроенный Bandwidth Profiler и программа WebSpeed Simulator (см. трюк 66) оценивают предполагаемое время загрузки, но не решают проблему хронометража на стадии выполнения. Если скорость загрузки зависит от скорости подключения, то скорость выполнения определяется вычислительной мощностью компьютера, на котором воспроизводится ролик. Общее впечатление пользователя складывается из времени загрузки и скорости воспроизведения, поэтому вы должны выбрать разумный компромисс между этими факторами - например, заменить векторные изображения растровыми (см. трюк 72). Многие склонны связывать скорость воспроизведения с частотой смены кадров, выбранной разработчиком. Если Flash успевает прорисовать все за время, отведенное для вывода следующего кадра, тогда не так уж важно, остается у него свободное время или нет. Но при таком подходе упускаются из виду проблемы, которые могут возникнуть при повышении частоты смены кадров. Лучше заранее определить, анимация какой графики занимает больше всего времени и какие сценарии ActionScript выполняются дольше других. Это позволит оптимизировать выполняемые операции и зарезервировать процессорное время для других целей (например, для воспроизведения звука). Далее приводится программа, которую я использую для проверки результатов оптимизации. Вместо события onEnterFrame, привязанного к частоте смены кадров, в ней используется интервальный таймер продолжительностью 1 мс, созданный функцией setlnterval() (см. трюк 27). Программа заставляет Flash перерисовывать экран с максимальной частотой, хотя перерисовка и не будет выполняться каждую миллисекунду по ограничениям, обусловленным быстродействием (скорее, это будет происходить примерно раз в 3 мс). function animate(target) { // Сценарий для перемещения клипа target по сцене target._х = (target._х + I) % 400;

count++;

updateAfterEventO;

} function controller() { clearlnterval(animater);

// Вывод среднего времени перерисовки (в миллисекундах). trace(clip[clipPointer]+ " " + 20000/count): // 20-секундная анимация следующего клипа // (если еще остались клипы для тестирования). clipPointer++;

i f (clipPointer < clip.length) { count = 0;

animater = setlnterval(animate. 1. c l i p [ c l i p P o i n t e r ] ) ;

} else { // Е л клипов н осталось - остановиться. си е Хронометраж clearlnterval(timer);

// Настройка var clip:Array = new ArrayO;

var clipPointer:Number = 0;

var count.-Number = 0: clip[0] = clipOl: c l i p [ l ] = clipO2;

clip[2] = clipO3;

var animater:Number = setlnterval(animate. 1. clip[cl1pPointer]);

var timerNumber = setlnterval (controller, 20000):

П Итоги Если clipOl, clipO2 и clipO3 являются тремя экземплярами одного клипа (например, тремя версиями одной фигуры с разными уровнями оптимизации кривой из подменю Modify • Shape), программа анимирует каждый экземпляр с максимально возможной скоростью в течение 20 с. Далее выводится среднее время перерисовки клипа в миллисекундах, и полученные результаты используются для сравнительного анализа. ПРИМЕЧАНИЕ Представленная программа предназначена для тестирования умеренно сложных фигур. Она не учитывает времени, потраченного на выполнение кода, но дает представление о соотношении времен перерисовки.

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

Применяя программный хронометраж, вы получите более реалистичную оценку быстродействия, чем полагаясь на общие правила оптимизации. Хронометраж поможет провести сравнительный анализ разных приемов экономии ресурсов процессора. Например, сложные фигуры с большим количеством точек могут анимироваться быстрее, чем простой, но большой круг. Более того, однородная фигура, движущаяся перед растром, может снизить быстродействие в большей степени, чем клип с прозрачностью, движущийся на гораздо более простом фоне. Программный хронометраж позволит лучше понять, какой фактор оказывает наибольшее влияние на быстродействие в конкретной анимации. Такой тип хронометража лучше всего подходит для сравнения приемов, а не для получения оценок скорости анимации или приложения в реальных условиях (см. трюк 70), поскольку этот показатель сильно зависит от компьютера конечного пользователя и текущей загрузки системы.

322 ТРЮК Глава 9. Быстродействие и оптимизация Динамическая настройка скорости №70 анимации Измерение производительности Flash Player во время выполнения позволяет выполнить динамическую регулировку эффектов или анимации для достижения оптимального быстродействия как на мощных, так и на слабых компьютерах.

Ранее мы рассматривали приемы повышения быстродействия, основанные на оптимизации ресурсов Flash на стадии разработки;

эти приемы не зависели от компьютера, на котором воспроизводится анимация. В сущности, оптимизация такого рода составляет минимальный набор «на все случаи жизни». Трюк, описанный в этом разделе, позволяет повысить до максимума качество анимации и других эффектов на мощных компьютерах, но при этом сохранить нормальную работоспособность на более медленных машинах. Хотя Flash Player 7 работает быстрее предыдущих версий, он все еще не идеален. Проектировщики Flash стремились оптимизировать размер файлов (для уменьшения времени загрузки), а не добиться потрясающего быстродействия. Хотя быстродействие можно улучшить посредством снижения качества (см. трюк 67), во многих случаях отключение сглаживания оказывается неприемлемым из-за того, что сайт начинает выглядеть слишком убого. Другой, более правильный способ повышения быстродействия основан на регулировке сложности (то есть объема работы, выполняемой за один кадр) графического эффекта, а не качества или частоты смены кадров. В широком диапазоне пользовательских систем с разной вычислительной мощностью такой подход дает лучший результат, чем «универсальная» оптимизация. Регулировка сложности часто является итеративным процессом, основанным на экспериментах (со временем она станет вашей второй натурой и потребует меньшего числа итераций): • • • • задайте нужную частоту смены кадров - например, 18 fps;

измерьте фактическую частоту смены кадров (см. далее);

если нужная частота смены кадров недостижима на тестовом компьютере, уменьшите сложность эффекта;

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

Теперь, когда вы знаете основную схему динамической регулировки эффектов, попробуем автоматизировать ее, чтобы Flash принимал решение об уменьшении или повышении сложности анимации. Тем самым мы избавимся от «торможения» на медленных компьютерах и добьемся улучшения эффектов (при грамотной реализации) на быстрых. Изменяться будет не частота смены кадров, а сложность эффекта, причем так, чтобы модификация полностью завершалась перед началом следующего кадра.

Динамическая настройка скорости анимации Вычисление фактической частоты смены кадров Следующий код создает пустой клип perfMon и связывает с ним обработчик события onEnterFrame. Обработчик события вычисляет среднюю продолжительность вывода кадра (в миллисекундах) по данным двух последних измерений и накапливает скользящее среднее time. Это значение проверяется по ожидаемой продолжительности FRAME_DUR, и в зависимости от того, удается ли Flash Player обеспечить нужную частоту смены кадров, логическому флагу slow присваивается значение true или false. function performanceMonitorO { thi s.createEmptyMovi eCli p("perfMon", 10000);

perfMon.onEnterFrame = functionO { time = (getTimerO - lastTime)/2;

lastTime = getTimerO;

// Переменной slow присваивается true или false // в зависимости от того, превышает ли время вывода // допустимое значение. slow = time > FRAMEDUR;

/ Прмно FAERT пивиатя цлвя чсоа сеы к д о. / ееенй RM_AE рсавес ееа атт мн а р в v r F A E R T : u b r= 1 ;

a RM_AENme 8 v r FRAMEJUR: N m e = ( / F A E R T ) * 1 0 : a ubr 1 RM_AE 00 vr t m : u b r= 0 a ieNme ;

vdr l s T m : u b r = getTimerO;

atieNme promneoio(: efracMntr) Переменная slow=false означает, что Flash Player может выполнить дополнительную работу без снижения быстродействия, потому что вся необходимая работа выполняется до начала следующего кадра. В идеальном случае Flash Player должен завершать обработку текущего кадра непосредственно перед началом следующего кадра. Мы узнаем об этом, когда скользящее среднее time сравняется с ожидаемой продолжительностью вывода кадра FRAME_DUR.

} Регулировка сложности в зависимости от быстродействия Давайте посмотрим, как увеличить или уменьшить сложность анимации в зависимости от полученных данных. Один из простых способов - увеличивать или уменьшать число клипов в зависимости от состояния флага slow. Для примера возьмем эффект звездного потока (см. трюк 33). Следующий код предполагает, что по умолчанию сцена содержит 550 х 400 пикселов с темным фоном. Оптимальная работа эффекта достигается при частоте смены кадров 18-24 fps. Чтобы изменить цвет фона и частоту смены кадров, выполните команду Modify • Document и задайте нужные значения свойств. В следующей программе используется частота смены кадров 24 fps;

если вы выберете другую частоту, измените следующую строку: var F A E RATE:Number = 24;

RM Глава 9. Быстродействие и оптимизация Обратите внимание: настройку приходится выполнять вручную, потому что в Flash нет метода или свойства, возвращающего целевую частоту смены кадров (странно, но факт!). Функция starfield() из трюка 33 была изменена так, чтобы она при каждом вызове рисовала только одну звезду. Вместо того чтобы устанавливать флаг slow при малой скорости анимации, мы регулируем ее сложность в команде if. Если анимация идет достаточно быстро, мы рисуем дополнительные звезды функцией starfieldQ в противном случае для сохранения быстродействия звезды удаляются. Еще раз подчеркну важное обстоятельство: мы изменяем не частоту смены кадров, а сложность анимации, чтобы время, затраченное на построение каждого кадра анимации, сравнялось с полным промежутком, определяемым заданной частотой. function performanceMonitorO { var perfMon:MovieClip = this.createEmptyMovieClipC'perfMon". 10000): perfMon.onEnterFrame = functionO { time = (getTimerO - lastTime)/2;

i f (time<(FRAME_DUR)) { // Нормальная скорость stars++;

starFieldO;

} else i f (time>(FRAME_DUR+10)) { // Слишком медленно _root["star"+stars].removeMovieClip();

stars--;

} lastTime = getTimerO;

} function moverO { this._y += this.speed: this._yscale += this.speed;

i f (this._y>275) { this._y = 0;

this.speed = Math.ceil (Math.randomO * 10);

this._yscale = 100: function starFieldO { var star:MovieClip = this.createEmptyMovieClipC'star" + stars, stars);

star._rotation = Math.randomO * 360: star._x = 275;

star._y = 200;

var dot:MovieClip = star.createEmptyMovieClip("dot". 0);

dot.speed = Math.ceil(Math.random()*10);

dot.lineStyled. OxFFFFEO. 100);

dot.moveTo(0. 2);

dot.lineTo(0. 5): dot.onEnterFrame = mover;

Динамическая настройка скорости анимации // Переменной F A E R T присваивается целевая частота смены кадров. RM_ AE var FRAME_RATE:Number = 24: var FRAME_DUR:Number = (1 / F A E R T ) * 1000: RM_ AE var time:Number = 0: var lastTime:Number = 0;

var stars:Number = 0;

performanceMonitorO:

Запустив эту программу, вы заметите, как звездный поток нарастает от нуля до нескольких сотен звезд (рис. 9.7). Проследите за значениями переменных главной временной диаграммы на вкладке Variables панели Debugger.

I #>/••••/ У -v.'-*.*« -> 44>\<4WM№Bti*' * • * JH*#*.''" 'I, / ' '^ f Jv*Sij«. $ version..,.,:;

..:.-'. ;

..••;

•;

FSAHE bstTime RATE •j^^ ч чч ^ mover // i, iUrFssS stsrs tin» isss.Sak tc Рис. 9.7. Звездный поток с динамическим изменением количества звезд Количество звезд растет до тех пор, пока time не приблизится к FRAME_DUR. При достижении этой точки программа начинает добавлять или удалять звезды для сохранения равновесия. Если выполнить какую-либо операцию, нарушающую это равновесие (например, запустить другую программу или изменить размеры SWF), изменение быстродействия приведет к поиску новой точки равновесия. Обратите внимание: частота смены кадров Flash иногда подвержена случайным изменениям даже при достижении равновесного состояния, поэтому эффект будет постоянно создавать и удалять клипы. Для таких случаев можно реализовать буферизацию: например, удаление или добавление клипов будет производиться только в том случае, если фактическое время вывода кадра отличается от целевого более чем на 15 %.

Глава 9. Быстродействие и оптимизация Итоги Графические эффекты, хорошо работающие на компьютере разработчика, нередко начинают «тормозить» на менее производительных компьютерах конечных пользователей. Чтобы содержание Flash нормально воспроизводилось на как можно более широком спектре компьютеров (включая гораздо менее мощные мобильные устройства), постарайтесь обеспечить его масштабируемость, то есть адаптацию к компьютеру пользователя. В этом трюке представлен довольно простой подход: мы вычисляем скорость работы компьютера пользователя и вносим соответствующие изменения в сложность графики. Измерение фактического быстродействия во время выполнения обычно выполняется проще и дает более надежные результаты, чем, например, попытки оценить быстродействие по типу устройства или разрешению экрана. Среди многочисленных изменений, обеспечивающих динамическую регулировку сложности анимации, можно выделить следующие: • ограничение числа объектов на экране (звезды в звездном потоке, монстры в игре, пользователи в чате с использованием аватаров);

• уменьшение количества используемых альфа-каналов;

• уменьшение альфа-эффектов (например, отключение прозрачности на медленных компьютерах);

• ограничение движений или их частоты (например» уменьшение числа кадров в цикле ходьбы - см. трюк 28). Художники, работающие в области компьютерной графики и не знакомые с требованиями к быстродействию, обычно создают слишком много промежуточных позиций. Вместо типичных 15-20 позиций, создаваемых художником, часто хватает 3 или 5;

• уменьшение размеров экрана или его активной области. Чтобы экран выглядел больше, добавьте статическую графику вокруг активной области - например, бордюр для реализации эффекта «картины в раме» или статические датчики, создающие эффект «приборной панели»;

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

ТРЮК № Смета быстродействия Из финансовой сметы вы узнаете, как расходуются ваши деньги. Создание сметы быстродействия позволит узнать, на что расходуются ресурсы, и перераспределить «статьи расходов».

Ранее была описана методика оценки времени загрузки (см. трюк 66), при помощи которой можно «упаковать» максимум содержания в файл наименьшего размера. Быстродействие в дизайне Flash Player обладает более низким приоритетом, чем оптимизация размера файла. А это означает, что Flash позволяет создавать привлекательное содержание в небольшом количестве килобайт, возможности же для повышения быстродействия весьма ограничены. В то же время, несмотря на общую ограниченность ресурсов процессора, доступных Flash Player, вы можете управлять распределением времени между выполнением различных подзадач. Это распределение отражается в смете быстродействия.

Фокусная область Смета быстродействия;

как и все сметы, должна определять приоритеты. Иначе говоря, не все аспекты презентации равноценны. Например, с точки зрения пользователя, перебои в воспроизведении звука более заметны, чем перебои в видео или анимации. Некоторые дизайнеры также склонны уделять особое внимание тем аспектам, на которые рядовой пользователь обычно не обращает внимания. Пользователи внимательно рассматривают только те объекты, с которыми взаимодействуют в данный момент, то есть входящие в «фокусную область», поэтому таким объектам следует назначать высокий приоритет в смете быстродействия. Периферийные объекты пользователь либо не замечает, либо обращает на них внимание только тогда, когда происходит что-то неожиданное (например, если объект сдвигается). Следовательно, распределение сметы быстродействия и проектирование интерфейса, обеспечивающего потребности пользователя, являются взаимодополняющими задачами. Если фокусную область можно предвидеть (или эффективно управлять ею), у пользователя создастся ощущение хорошего общего быстродействия даже в том случае, если периферийные объекты остаются статичными или работают с меньшим быстродействием.

Глава 9. Быстродействие и оптимизация Например, в видеоиграх (и графике реального времени) объекты, приближенные к зрителю в трехмерном виртуальном мире, воспроизводятся с максимальной детализацией. Уровень детализации существенно снижается с расстоянием, но даже если зритель заметит это обстоятельство, ничего страшного не произойдет - в реальном мире объекты, удаленные от зрителя, тоже видны не так хорошо, как близкие объекты. По тем же причинам алгоритм обнаружения столкновений (см. трюк 40) для удаленных объектов может работать с пониженной точностью - такие объекты недостаточно близки, чтобы попадать в фокусную область пользователя. Руководствуясь такими предположениями, можно освободить часть ресурсов для обсчета в реальном времени освещения, физики и других аспектов виртуального мира.

Расстановка приоритетов Как же выделить фокусной области приложения основную долю сметы быстродействия? Это можно сделать множеством разных способов. Проще всего назначить фокусной области «обработчик изменений», а для обновления остальных частей ролика использовать периодические события. Например, в реализации классической видеоигры «пинг-понг» для управления ракеткой игрока может использоваться обработчик события onMouseMove, а для управления ракеткой противника и шариком - обработчик onEnterFrame. Если часть игры, с которой непосредственно взаимодействует пользователь, хорошо реагирует на его действия, то все приложение кажется более чувствительным. Тем не менее, простое разделение приоритетов на две категории не обеспечивает точного контроля над распределением ресурсов. Более правильное решение - использовать несколько разных приоритетов. В следующем примере приоритеты назначаются на основании степени взаимодействия пользователя с процессом: • высокий приоритет - процессы, с которыми пользователь непосредственно взаимодействует;

• нормальный приоритет - процессы, с которыми пользователь взаимодействует косвенно;

• низкий приоритет - процессы, с которыми пользователь взаимодействует редко (или не взаимодействует вообще). В игровом контексте (именно игры составляют большинство Flash-приложений с потребностью в высоком быстродействии) высокоприоритетный процесс представляет корабль или игрока. Процессы с нормальными приоритетами представляют графические объекты противника;

хотя пользователь ожидает, что враги будут двигаться с нормальной скоростью, небольшие замедления останутся незамеченными, если высокоприоритетные объекты будут двигаться без торможения. Если корабль противника замедляет движение, пользователь решит, что так и должно быть. Низкоприоритетные процессы представляют такие объекты, как обновляющийся индикатор текущего счета или прокрутку фона. Конечно, пользователь заме Смета быстродействия тит, если эти объекты совсем перестанут работать, но пока все идет более или менее нормально, он обычно не обращает на них внимания. Проектировщикам игр иногда бывает трудно выделить низкоприоритетные процессы, потому что разработчики склонны дорожить каждым пикселом и каждой нотой. Возможно, вам будет проще избавиться от этих заблуждений, если вы поймете, что снижение приоритета для одних объектов позволит выделить больше внимания (а соответственно, и ресурсов) другим, более важным объектам. Также не стоит забывать, что даже самый симпатичный звуковой эффект надоедает после того, как пользователь услышит его в тысячный раз. Самое правильное решение - предложить бета-тестерам прототип приложения и спросить, что им понравилось, что показалось слишком медленным, что раздражало и т. д. По определению, перед вами те самые люди, которых вы пытаетесь развлекать, просвещать, чьи потребности обеспечивать и т. д., так что прислушайтесь к их мнению. Еще один полезный прием - создать у аудитории иллюзию того, будто приложение делает нечто большее, чем в действительности. Например, на время вывода статической таблицы рекордов можно создать звездный поток с большим количеством звезд, но сразу же после начала игры уменьшить сложность анимации (см. трюк 70). Если количество звезд будет уменьшаться постепенно, а игра будет становиться все более быстрой и сложной, пользователь даже не заметит происходящего. Скорее всего, он будет думать о том, как попасть на следующий уровень!

Реализация После выбора приоритетов необходимо реализовать их на ActionScript. Поскольку вы не можете просто указать Flash на важность некоторого события, приоритеты приходится внедрять косвенно, на уровне приемов программирования и используемых событий. Высокоприоритетные события могут использовать: • • интервальный таймер, установленный функцией setlnterval() на период, меньший интервала смены кадров (см. трюк 27);

обработчик события onMouseMove (см. трюк 26).

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

событие, время от времени инициируемое из обработчика событий с нормальным приоритетом onEnterFrame.

33D Глава 9. Быстродействие и оптимизация На рис. 9.8 изображен экран видеоигры. Давайте распределим приоритеты для разных аспектов игры.

Рис. 9.8. Интерфейс видеоигры В файле gameOLfla на сайте книги приводится основная логика типичного приложения, спроектированного с учетом «сметы быстродействия»;

чтобы увидеть основной код, откройте сценарий кадра 2 клипа me.world. Ревнителей чистоты ActionScript может раздражать то, что сценарий присоединен к клипу, однако анимация занимает в игровом дизайне не менее важное место, чем сценарии, поэтому она часто смешивается с кодом. Игры, в которых весь код сосредоточен в одном кадре, встречаются крайне редко. Например, если присмотреться к кораблю игрока (символ me.ship в библиотеке), выясняется, что взрыв реализуется не в виде сценария, а в виде кадрированной анимации. Хотя анимацией взрывов можно управлять при помощи сценарных таймеров, анимация временной диаграммы проще создается, требует минимального планирования и оказывается более понятной для дизайнеров, которым (возможно) придется редактировать ее в будущем. А теперь посмотрим, как в коде FLA-файла реализованы три группы приоритетов. Единственным высокоприоритетным процессом является спрайт корабля игрока. Следующая команда создает интервальный таймер, который через каждые 30 мс вызывает функцию shipController() для перерисовки корабля: shipControl = setlnterval(shipController, 30): Обновление фона имеет нормальный приоритет (и происходит с частотой смены кадров 18 fps). Чтобы реализовать смещение фона в каждом кадре, обработчиком onEnterFrame назначается функция terrainController(): terrain.onEnterFrame = terrai nControl 1 ег:

Смета быстродействия Обновление счета является низкоприоритетной задачей и выполняется только раз в секунду: scoreKeeper = setlntervaKscoreController, 1000);

Чтобы проследить, как работает система, проще всего запустить игру (самый приятный способ!). Обратите внимание на некоторые обстоятельства: • звезды двигаются медленнее рельефа. Они обладают низким приоритетом и обновляются каждую четверть секунды. Этот факт отчасти маскируется распределенным характером обновления - каждая звезда анимируется через четверть секунды, но не все обновления происходят одновременно;

• радар обновляется с той же частотой, что и звезды. Игра спроектирована таким образом, чтобы замедленное обновление казалось намеренным: на старых радарах с электронно-лучевыми трубками экран обновлялся медленно перемещающимся сканирующим лучом. Один из стандартных фокусов - заполнение экрана объектами, которые с точки зрения пользователя должны двигаться медленно (например, облака или далекие горы). Медленное обновление таких объектов смотрится естественно;

• корабль игрока движется гораздо быстрее (и плавнее) кораблей агрессоров. Многие пользователи не замечают различий, потому что они сосредоточивают все внимание на своем корабле. Но даже заметив различия, они будут лишь радоваться тому, что их корабль обгоняет неповоротливых врагов;

• корабли агрессоров, лазеры и фон двигаются с одинаковой частотой;

• счет обновляется крайне редко (раз в секунду). Обновление счета является самым низкоприоритетным процессом в игре, потому что пользователь все равно смотрит на свой корабль. Слишком частое обновление текстовых полей - одна из основных причин снижения быстродействия в Flash. Прорисовка даже небольшого количества текста требует обработки изрядного объема вычислений с векторными данными, особенно если Flash приходится перерисовывать этот текст в каждом кадре! Наш пример показывает, что в Flash вполне можно создать игру с достаточно большим размером сцены. Более того, при правильном выборе структуры приложения увеличение окна браузера не снизит быстродействия.

Итоги «Смета быстродействия» не ускорит работу Flash Player, но создаст субъективное ощущение скорости, подобно тому как индикатор прогресса субъективно ускоряет загрузку. Идентифицируйте элементы, которые должны обновляться как молено чаще, и выделите им больше ресурсов. Также определите низкоприоритетные процессы и снизьте частоту их обновления, чтобы оставить больше ресурсов высокоприоритетным процессам. Если повысить быстродействие в фокусной области пользователя, ему покажется, что игра быстрее реагирует на его действия, и он не заметит областей с более низким быстродействием.

Глава 9. Быстродействие и оптимизация Использование растровой графики вместо векторной Векторная графика быстро пересылается, но медленно воспроизводится на экране. Использование растровых изображений вместо векторных повышает скорость воспроизведения. Векторные изображения строятся по математическим формулам, определяющим форму и заливку фигур. Следовательно, для векторной графики характерны четкость и хорошая масштабируемость при малом объеме пересылаемых данных. Тем не менее, построение сглаженной векторной фигуры может потребовать больше вычислительных мощностей, чем простое воспроизведение растрового (пиксельного) изображения. Растровое изображение представляет собой фиксированный блок данных. Хотя эти данные обычно занимают больше места, чем аналогичные векторные изображения, после загрузки они быстро выводятся на экран. Кроме того, при построении SWF-файла объем принимаемых данных уменьшается за счет сжатия (SWF-файлы автоматически используют z-lib - алгоритм сжатия без потери данных, напоминающий алгоритм, используемый в графическом формате PNG). Растровая графика обеспечивает хороший компромисс между быстродействием и объемом пересылаемых данных в нескольких случаях: • если векторное изображение состоит из большого количества точек, оно может занимать больший объем, чем его растровый эквивалент. Векторные изображения обычно больше подходят для штриховой графики, а растровые - для фотографий и текстур, которые плохо воспроизводятся в векторном формате;

если при выводе не применяются масштабирование и сглаживание, растры обычно быстрее выводятся;

если приложение запускается с компакт-диска и скорость пересылки не очень существенна, подумайте о переходе на растровую графику.

• • Для статических фонов с множеством векторных элементов использование растрового изображения обычно повышает время воспроизведения. Сложные векторные конструкции, состоящие из большого количества сгруппированных объектов, тоже могут выиграть от преобразования в растровую форму.

Пример 1: растровые изображения движутся быстрее векторных В этом примере (файл tileexample_vector.fla на сайте книги) несколько анимационных клипов движутся по экрану, имитируя эффект параллакса (то есть глубина по оси z имитируется замедлением движения объектов и окрашиванием их в более темный цвет при удалении от зрителя). Клипы, использованные в этом примере, представляют собой псевдотрехмерные графические конструкции, созданные исключительно средствами векторной графики (рис. 9.9). В верхней части сцены выводится текущая частота смены кадров. По ней можно определить, насколько быстро Flash воспроизводит данный эффект. Тестирова Использование растровой графики вместо векторной ние векторной версии (чтобы получить наиболее типичные результаты, протестируйте ее в браузере нажатием клавиши F12) показывает, что работа Flash Player существенно замедляется. Несмотря на то что ролику была назначена частота смены кадров 70 fps, на достаточно быстрых компьютерах он воспроизводится с частотой 25-30 fps.

Рис. 9.9. Мозаичная анимация, построенная из векторных элементов Проблема решается заменой каждого векторного изображения аналогичным изображением, использующим растровую графику. Клипы новой версии приложения (файл tileexample_bitmap.fla на сайте книги) внешне не отличаются от своих векторных аналогов, но: • • создаются в растровом формате вместо векторного;

цветовой эффект «затемнения с расстоянием» был заранее применен к ним в графическом редакторе. Таким образом Flash избавляется от необходимости применять его на стадии выполнения.

Обновленная версия работает быстрее оригинала. При тестировании в аналогичных условиях растровая версия работает на частоте 60-70 fps. Она не отличается от векторной по размерам файла. Более того, поскольку все элементы представляют собой растровые блоки с прямыми краями, a Flash сглаживает растровые изображения лишь в режиме с максимальным качеством (см. трюк 67), выбор режима с низким или средним качеством дополнительно ускорит процесс. Также учтите, что изменения качества на движущихся объектах менее заметны, так что его снижение даже может остаться незаметным для пользователя!

Глава 9 Быстродействие и оптимизация.

Пример 2: предотвращение сглаживания Нередко самой затратной составляющей воспроизведения векторной графики становится сглаживание. Преобразование векторов в заранее сглаженные растровые изображения способно существенно повысить быстродействие. На рис. 9.10 изображен простой символ, формирующий фон, прокручиваемый текст и несколько дополнительных копий того же символа (файл textexample_vector.fla на сайте книги). praesent iuptatum zzriJ delenit augue dms dolore t§ feugaSt null;

* fadlisi. |n | С// /~_ м С^> /I У ^ & у*, д /з % Lorem ipsum dotor sit amet,:cons€ctetuer adipiscing elit, sed diam попитту пШЬ euismod ti«ddunt ut laoreet clolore magna atiquam erat votutpat. Ut w'isi enim ad тШт veniam, qui$ nostrud exerci tation иПатсофег susciprt lo-bortts nist ut afiquip ex : ea commodo consequat ;

i Dois autem vel eum iriure dotor in hendrerit in vulputate vefit esse molestie consequat, vet iilum doJone eu feugiat nulia fadtisis at vero eros et accumsan et iysto odio dignisstm qui bfandit РИС. 9.10. Символы и прокручиваемое текстовое поле Перемещение текста кнопками прокрутки серьезно снижает быстродействие. Использование растрового изображения в качестве фона уменьшает объем вычислений, которые приходится выполнять Flash. Простой вывод статического растра происходит быстрее, чем построение его векторной версии при каждой прокрутке. Если заменить векторный фон растровым (файл textexample_bitmap.fla), скорость работы приложения увеличивается примерно на 30 %.

Итоги Растровая графика имеет больший объем, но у нее есть и свои преимущества. Его содержимое не нужно строить во время выполнения, а применение дополнительных эффектов на стадии разработки в таких программах, как Photoshop, избавит от необходимости динамически обсчитывать тот же эффект. Векторная графика обычно (хотя и не всегда) занимает меньший объем. С другой стороны, вывод векторных изображений может потребовать от Flash Player серьезных вычислений в реальном времени.

Оптимизация загрузки и использования компонентов Механизм визуализации Flash ориентирован на работу с векторной графикой, а растровая анимация считается уделом Macromedia Director, но на практике бывает и иначе. Во многих ситуациях применение растровой графики обеспечивает заметный рост быстродействия без серьезного увеличения размера файла. Если создаваемый проект будет запускаться с компакт-диска и размер файла не очень важен, используйте растровую графику (если только приложение не требует масштабирования контента).

Pages:     | 1 |   ...   | 3 | 4 || 6 | 7 |   ...   | 8 |



© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.