Февраль 2011

Предварительная загрузка классов

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

Чтобы избежать этого, мы можем экспортировать классы SWF-файла после кадра 1 на основной временной шкале, а затем создать простой сценарий временной шкалы, который отображает информацию о ходе загрузки классов.

В качестве примера изменим наш файл sky. fla таким образом, чтобы классы, которые он использует, не загружались до кадра 15. Стоит отметить, однако, что класс документа SWF-файла — и любой класс, на который прямо или косвенно ссылается класс документа, — всегда загружается в кадре 1. Таким образом, чтобы предотвратить загрузку класса Star до кадра 1, мы должны сначала удалить имена всех созданных вручную экземпляров класса Star и определения переменных starl — star5 из кода класса Sky. Чтобы удалить имена экземпляров, мы выбираем каждый экземпляр символа Star на сцене и удаляем его имя на палитре Properties (Свойства).

Далее описывается, как загрузить классы файла sky. fla в кадре 15 и отобразить соответствующее сообщение в процессе загрузки классов.

Сначала выполним следующие шаги, чтобы указать компилятору Flash на необходимость экспортирования классов файла sky. fla в кадре 15.

1. Откройте файл sky. fla в среде разработки Flash.

2. Выберите команду меню File > Publish Settings (Файл > Настройки публикации).

3. В окне Publish Settings (Настройки публикации) нажмите кнопку Settings (Параметры), расположенную возле параметра ActionScript version (Версия ActionScript) с установленным значением ActionScript 3.0 на вкладке Flash.

4. В поле Export Classes in Frame (Экспортировать классы в кадре) окна ActionScript Settings (Параметры ActionScript) введите 15.

5. Нажмите кнопку ОК, для того чтобы закрыть окно ActionScript Settings (Параметры ActionScript).

6. Снова нажмите кнопку ОК, чтобы закрыть Publish Settings (Настройки публикации).

Далее на временную шкалу файла sky. fla мы добавляем очень простой предварительный загрузчик, который отображает сообщение Loading (Загрузка) в процессе загрузки классов.

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

Сначала на основной временной шкале файла sky. fla мы дважды щелкаем кнопкой мыши на имени слоя Layer 1 (Слой 1) и изменяем его на sky. Затем мы увеличиваем размер временной шкалы до 15 кадров следующим образом.

1. На основной временной шкале щелкните на кадре 1 слоя sky, чтобы выделить этот кадр.

2. Щелкните кнопкой мыши на ключевом кадре 1 и, удерживая кнопку мыши, перетащите его на кадр 15 временной шкалы.

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

Далее мы добавим новый слой для кода и назовем его scripts.

1. Выберите команду меню Insert > Timeline > Layer (Вставка > Временная шкала > Слой).

2. Дважды щелкните кнопкой мыши на имени нового слоя и измените его на scripts.

После этого мы добавим слой labels с двумя метками кадров — loading и main. Они обозначают состояние загрузки и стартовую точку для приложения соответственно.

1. Выберите команду меню Insert > Timeline > Layer (Вставка > Временная шкала > Слой).

2. Дважды щелкните кнопкой мыши на имени нового слоя и измените его на labels.

3. В кадрах 4 и 15 слоя labels добавьте новые ключевые кадры (используя команду меню Insert > Timeline > Keyframe (Вставка > Временная шкала > Ключевой кадр)).

4. Выбрав кадр 4 на слое labels, в поле Frame (Кадр) палитры Properties (Свойства) вместо (Метка кадра) введите loading.

5. Выбрав кадр 15 на слое labels, в поле Frame (Кадр) палитры Properties (Свойства) вместо (Метка кадра) введите main.

Теперь добавим сценарий предварительного загрузчика на слой scripts.

1. В кадре 5 слоя scripts добавьте новый ключевой кадр (используя команду меню Insert > Timeline > Keyframe (Вставка > Временная шкала > Ключевой кадр)).

2. Выбрав кадр 5 слоя scripts, введите следующий код на палитре Actions (Действия):

if (framesLoaded == total Frames) {

gotoAndStopCmain»); } else {

gotoAndPlay(«1oadi ng»);

}

Наконец, добавим сообщение о загрузке, отображаемое в процессе загрузки классов файла star. fla:

1. Выбрав кадр 1 слоя scripts, введите следующий код на палитре Actions (Действия):

import flash. text.*:

var loadMsg:TextField = new TextField( ); loadMsg. text = «Loading…Please wait.»: loadMsg. autoSize = TextFieldAutoSize. LEFT: loadMsg. border = true: loadMsg. background = true: loadMsg. selectable = false: addChild(loadMsg):

2. В кадре 15 слоя scripts добавьте новый ключевой кадр (используя команду меню Insert > Timeline > Keyframe (Вставка > Временная шкала > Ключевой кадр)).

3. Выбрав кадр 15 слоя scripts, введите следующий код на палитре Actions (Действия):

removeChi1d(1oadMsg);

Вот и все! Вы можете протестировать приложение sky. swf, выбрав команду меню Control > Test Movie (Управление > Проверка фильма). Находясь в режиме Text Movie (Проверка фильма), можно имитировать процесс загрузки SWF-файла, открыв палитру Bandwidth Profiler (Профайлер полосы пропускания) (команда меню View > Bandwidth Profiler (Вид > Профайлер полосы пропускания)) и выбрав команду меню View > Simulate Download (Вид > Имитировать загрузку). Поскольку наш класс Star имеет совсем небольшой размер, нужно установить очень низкую скорость загрузки (например, 200 байт в секунду), чтобы увидеть сообщение о предварительной загрузке. Чтобы изменить скорость загрузки, выберите команду меню View > Download Settings (Вид > Параметры загрузки).

Вы можете загрузить предыдущий пример файла sky. fla по адресу http://www. moock. org/eas3/examples.

При задании значения в поле Exports Classes in Frame (Экспортировать классы в кадре) примите во внимание, что:

? класс документа FLA-файла всегда экспортируется в кадре 1, независимо от значения, указанного в поле Exports Classes in Frame (Экспортировать классы в кадре);

? все классы, на которые ссылается класс документа или сценарий основной временной шкалы, экспортируются в кадре 1, независимо от значения, указанного в поле Exports Classes in Frame (Экспортировать классы в кадре);

? если установлен флажок Automatically declare stage instances (Автоматически объявлять экземпляры сцены) и сцена основной временной шкалы содержит именованные экземпляры символа, связанного с классом, то этот связанный класс будет экспортирован в кадре 1 (поскольку на этот класс ссылаются переменные, объявляемые автоматически для экземпляров на сцене).

Далее в программе: использование платформы разработки Flex

В этой главе были рассмотрены многие прикладные методики работы с кодом на языке ActionScript в среде разработки Flash. В следующей главе будет рассказано, как применять компоненты пользовательского интерфейса платформы разработки Flex в проекте приложения Flex Builder 2 на языке ActionScript. Затем из гл. 31 вы узнаете, как использовать готовый код совместно с другими разработчиками.

Пни

Минимальное приложение

на языке MXML

В гл. 20 рассказывалось, что платформа разработки Flex включает развитый набор настраиваемых компонентов для создания пользовательских интерфейсов. Компоненты пользовательского интерфейса платформы разработки Flex обычно применяются в приложениях на языке MXML, но также могут применяться в приложениях, написанных в основном на языке ActionScript. Для тех читателей, которые не желают использовать язык MXML, в этой главе рассматривается абсолютный минимум шагов, необходимый для применения компонентов пользовательского интерфейса платформы разработки Flex в проекте приложения Flex Builder 2 с помощью минимально возможного количества инструкций языка MXML.

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

Полную информацию о языке MXML и платформе разработки Flex можно найти в документации корпорации Adobe и книге « Programming Flex 2» (Kazoun and Lott, 2007) издательства O’Reilly.

Пользователи среды разработки Flash должны помнить, что приложение Flash CS3 включает собственный набор компонентов пользовательского интерфейса в пакете fl. Компоненты приложения Flash CS3 могут также быть использованы (как с технической точки зрения, так и с точки зрения допустимости) в программах на языке ActionScript, компилируемых с помощью приложения Flex Builder 2 или компилятора mxmlc.

Общий подход

Рассмотрим минимальный набор шагов, необходимых для создания приложения, которое использует компоненты пользовательского интерфейса платформы разработки Flex, на языке ActionScript.

1. В приложении Flex Builder 2 создайте проект Flex.

2. В новом проекте определите класс со статическим методом, который будет служить стартовой точкой для приложения.

3. В основном MXML-файле добавьте свойство события MXML, получающее уведомления о возникновении события FlexEvent. APPLICATION_COMPLETE

экземпляра класса Application верхнего уровня и в ответ вызывает статический метод, определенный на шаге 2. 4. В статическом методе, который был он редел cmi па шаге 2, создайте желаемые компоненты пользовательского интерфейса и добавьте их в экземпляр класса Application.

Перечисленные шаги подробно рассматриваются в следующих разделах.

Создание проекта Flex

Чтобы создать проект для приложения, выполните следующие шаги.

1. В приложении Flex Builder 2 выберите команду меню File > New > Flex Project (Файл > Создать > Проект Flex).

2. В окне New Flex Project (Новый проект Flex) установите переключатель How will your Flex application access data? (Как ваше приложение Flex будет обращаться к данным?) в положение Basic (Основной) и затем нажмите кнопку Next (Далее).

3. В поле Project name (Имя проекта) введите желаемое имя проекта и нажмите кнопку Next (Далее).

4. В поле Main source folder (Основная папка исходных файлов) введите src.

5. В поле Main application file (Основной файл приложения) введите желаемое имя файла с расширением MXML. Например, MinimalMXML. mxml.

6. Нажмите кнопку Finish (Готово).

В результате выполнения предыдущих шагов приложение Flex Builder 2 создаст новый проект, в пути библиотек которого будет автоматически включен файл framework. swc, содержащий компоненты пользовательского интерфейса.

После создания проекта мы добавим стартовую точку для приложения, как описано в следующем разделе.

Создание стартовой точки для приложения

Стартовая точка для нашего приложения представляет собой статический метод, определенный в пользовательском классе. В нашем примере мы назовем этот статический метод именем name ( ), а пользовательский класс — EntryClass. Метод main ( ) создает экземпляры компонентов пользовательского интерфейса и добавляет их в иерархию отображения экземпляра класса Application верхнего уровня. Экземпляр класса Application верхнего уровня создается автоматически, служит основой для всех приложений на языке MXML и предоставляет доступ к списку отображения. Обратиться к экземпляру класса Application верхнего уровня из нашей программы можно через статическую переменную application класса mx. core. Application.

В листинге 30.1 представлен код для класса EntryClass.

Листинг 30.1. Класс на языке ActionScript для минимального приложения MXML

package { import mx. controls.*; import mx. core.*;

public class EntryClass { // Стартовая точка для приложения public static function main ( ):void {

// Создаем компоненты пользовательского интерфейса // платформы разработки Flex. // Например:

var button:Button = new Button( ):

// Добавляем компоненты

// пользовательского интерфейса на экран.

// Например:

var mxmlАрр:Application = Appli cati on(Appli cati on. appli cati on): mxmlApp. addChi1d(button);

}

}

}

Создав метод EntryClass. main( ), мы можем вызывать его в ответ на возникновение события FlexEvent. APPLICATION_COMPLETE экземпляра класса Application верхнего уровня, как описывается в следующем разделе.

Вызов стартовой точки для приложения

Ранее в подразд. «Создание проекта Flex» мы определили, что основным файлом приложения для нашего примера проекта является Minimal MXML. mxml. В итоге приложение Flex Builder 2 автоматически помещает в него следующий код:



layout=»absolute»>

Придется внести лишь одно незначительное изменение в приведенный код на языке MXML: мы должны добавить свойство события, которое вызывает метод EntryClass. main ( ) при получении экземпляром класса Application верхнего уровня уведомления о возникновении события FlexEvent. APPL I CATI ON_COMPLETE. Этот подход продемонстрирован в следующем коде (соответствующие изменения выделены полужирным шрифтом):





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

Применим общий подход, рассмотренный в предыдущих разделах, на реальном примере.

Реальный пример применения компонентов пользовательского интерфейса

Чтобы увидеть, как применять код на языке ActionScript для создания н управления компонентами пользовательского интерфейса платформы разработки Flex, создадим простое приложение, которое содержит всего два экземпляра компонентов: экземпляр компонента Button и экземпляр компонента DataGrid. Приложение просто считает, сколько раз пользователь щелкнул кнопкой мыши на экземпляре компонента Button. Экземпляр компонента DataGrid отображает общее количество щелчков и интервал времени между ними.

Назовем основной файл MXML нашего приложения MinimalMXML. mxml, а класс, определяющий стартовую точку для нашего приложения, — Clickometer.

Рассмотрим код для файла MinimalMXML. mxml:



1ayout=»vertical» appl i cati onCompl ete=»CIickometer. main( )»>

В коде обратите внимание, что значение свойства события аррlicat ionComplete определяет метод (Clickometer. main ( ) ), который будет вызван после того, как приложение завершит процесс инициализации. Стоит также отметить, что приложение использует «вертикальную» схему размещения. Информацию по вариантам размещения можно найти в разделе, посвященном описанию переменной экземпляра layout класса Application, справочника по языку ActionScript корпорации Adobe.

Теперь рассмотрим код для класса С1 i с kome t е г, в котором создаются компоненты пользовательского интерфейса:

package { import mx. controls.*: import mx. core.*; import flash. events.*: import flash. utils.*:

public class Clickometer { private static var 1astClickTime:int = 0; private static var numClicks:int = 0: private static var grid:DataGrid: private static var button:Button:

// Точка входа программы

public static function main ( ):void {

// Создаем кнопку

button = new Button( );

button. label = «Click Quickly!»:

button. addEventLi stener(MouseEvent. CLICK, cli ckLi stener);

// Создаем таблицу данных grid = new DataGrid( ); grid. dataProvider = new Array( );

// Добавляем отображаемые элементы на экран. Переменная // Application. application ссылается на приложение Flex верхнего // уровня — основной контейнер для компонентов пользовательского // интерфейса и отображаемых элементов.

Var mxmlАрр[Application = Appli cati on(Appli cati on. application); mxmlApp. addChi1d(button); mxmlApp. addChild(grid);

}

// Этот метод вызывается всякий раз, когда пользователь // нажимает кнопку

private static function clickListener (e:MouseEvent):void { var now:int = getTimer( ); var elapsed:int = now — 1astClickTime; lastClickTime = now: numClicks++:

grid. dataProvider. addItem({Clicks: numClicks. «Time (ms)»: elapsed}):

}

}

}

Приведенный пример приложения можно загрузить по адресу http://www. moock. org/eas3/examples.

Передача кода вашим друзьям

Итак, в этой книге осталась всего одна глава. Что же является последним основополагающим вопросом языка ActionScript? Совместное использование вашего гениального кода с другими программистами. Для совместного использования кода на языке ActionScript можно просто отправить этот особый код в виде одного или нескольких файлов ваших классов. Или, если вы более амбициозны, можете создать целую библиотеку классов (то есть группу классов) для включения в приложение на этапе компиляции или на этапе выполнения. В последней главе этой книги рассматриваются способы создания и распространения кода с использованием библиотек классов.