Главная » ActionScript » Простое приложение

0

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

Проектирование приложения

Первым примером приложения с использованием компонентов ActionScript является вариант стандартного приложения "Hello World", дизайн которого довольно прост:

•   Приложение будет называться Greetings.

•   Компонент TextArea используется для отображения приветствия, которое исходно звучит как Hello World.

•   Компонент ColorPicker позволяет изменять цвет текста.

•   Три компонента RadioButton позволяют задавать маленький, средний и большой размер текста.

•   Компонент ComboBox позволяет выбирать различные приветствия в раскрывающемся списке.

•   В приложении используются компоненты, приведенные на панели "Компоненты", а также создаются другие элементы приложения при помощи кода ActionScript.

Определившись с компонентами, можно приступать к созданию приложения.

Создание приложения Greetings

Следующие шаги позволяют создать приложение Greetings, используя инструмент разработки Flash для создания FLA-файла, поместить компоненты в рабочую область и вставить код ActionScript во временную шкалу.

Создание приложения Greetings в FLA-файле:

1   Выберите "Файл" > "Создать".

2   В диалоговом окне "Новый документ" выберите "Файл Flash (ActionScript 3.0)" и нажмите кнопку "ОК".

Откроется новое окно Flash.

3   Выберите "Файл" > "Сохранить", присвойте файлу Flash имя Greetings.fla и нажмите кнопку "Сохранить".

4   На панели Flash "Компоненты" выберите компонент TextArea и перетащите его в рабочую область.

5   В окне "Свойства" при выбранном компоненте TextArea в рабочей области введите aTa в качестве имени экземпляра и введите следующую информацию:

•   Введите 230 для значения W (ширина).

•   Введите 44 для значения H (высота).

•   Введите 165 для значения X (положение по горизонтали).

•   Введите 57 для значения Y (положение по вертикали).

•   Введите Hello World! в качестве значения параметра text на вкладке "Параметры".

6   Перетащите компонент ColorPicker в рабочую область, поместите его слева от компонента TextArea и присвойте ему имя экземпляра txtCp. Введите следующую информацию в Инспекторе свойств:

•   Введите 96 для значения X.

•   Введите 72 для значения Y.

7   Перетащите по одному три компонента RadioButton в рабочую область и присвойте им имена экземпляров

smallRb, largerRb и largestRb. Введите для них следующую информацию в Инспекторе свойств:

•   Введите 100 для значения W и 22 для значения H для каждого из этих компонентов.

•   Введите 155 для значения X.

•   Ведите 120 для значения Y для smallRb, 148 для largerRb и 175 для largestRb.

•   Введите fontRbGrp для параметра groupName каждого из компонентов.

•   На вкладке "Параметры" введите метки компонентов: Маленький, Средний, Большой.

8   Перетащите компонент ComboBox в рабочую область и присвойте ему имя экземпляра msgCb. Введите для него следующую информацию в Инспекторе свойств:

•   Введите 130 для значения W.

•   Введите 265 для значения X.

•   Введите 120 для значения Y.

•   На вкладке "Параметры" введите Greetings в качестве значения параметра prompt.

•   Дважды щелкните текстовое поле параметра dataProvider, чтобы открыть диалоговое окно "Значения".

•   Щелкните знак "плюс" и замените значение метки на Hello World!

•   Повторите предыдущий шаг для добавления значений метки Have a nice day! и Top of the Morning!

•   Нажмите кнопку "ОК", чтобы закрыть диалоговое окно "Значения".

9   Сохраните файл.

10 Если панель "Действия" еще не открыта, откройте ее, нажав клавишу F9 или выбрав пункт "Действия" в меню "Окно". Щелкните Кадр 1 на основной временной шкале и вставьте следующий код на панель "Действия":

import flash.events.Event;

import fl.events.ComponentEvent; import fl.events.ColorPickerEvent; import fl.controls.RadioButtonGroup;

var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); msgCb.addEventListener(Event.CHANGE, cbHandler);

Первые три строки импортируют классы событий, используемые приложением. Событие возникает при взаимодействии пользователя с одним из компонентов. Следующие пять строк регистрируют обработчики событий для событий, которые будет прослушивать приложение. Событие click возникает для компонента RadioButton, когда пользователь щелкает его мышью. Событие change возникает, когда пользователь выбирает другой цвет в компоненте ColorPicker. Событие change для компонента ComboBox возникает, когда пользователь выбирает другое приветствие в раскрывающемся списке.

Четвертая строка импортирует класс RadioButtonGroup, чтобы приложение могло назначить прослушивателя событий группе компонентов RadioButton вместо назначения прослушивателя каждой кнопке в отдельности.

11 Вставьте следующий код на панель "Действия" для создания объекта TextFormat tf, при помощи которого приложение изменяет свойства стиля size и color текста компонента TextArea.

var tf:TextFormat = new TextFormat();

12 Вставьте следующий код для создания функции обработки событий rbHandler. Эта функция обрабатывает событие click, когда пользователь щелкает мышью один из компонентов RadioButton.

function rbHandler(event:MouseEvent):void {

switch(event.target.selection.name) {

case "smallRb": tf.size = 14; break;

case "largerRb": tf.size = 18; break;

case "largestRb":

tf.size = 24;

break;

}

aTa.setStyle("textFormat", tf);

}

Функция использует выражение switch для проверки свойства target объекта event, чтобы определить, какой из переключателей вызвал событие. Свойство currentTarget содержит имя объекта, вызвавшего событие. В зависимости от того, какой из переключателей нажал пользователь, приложение изменяет размер текста компонента TextArea на 14, 18 или 24 пункта.

13 Введите следующий код для выполнения функции cpHandler(), которая обрабатывает изменение значения в компоненте ColorPicker:

function cpHandler(event:ColorPickerEvent):void { tf.color = event.target.selectedColor; aTa.setStyle("textFormat", tf);

}

Данная функция устанавливает свойство color объекта TextFormat tf на выбранный в компоненте ColorPicker цвет, затем вызывает метод setStyle(), чтобы применить цвет к тексту экземпляра aTa компонента TextArea.

14 Введите следующий код для выполнения функции cbHandler() которая обрабатывает изменение выбора в компоненте ComboBox:

function cbHandler(event:Event):void {

aTa.text = event.target.selectedItem.label;

}

Эта функция просто заменяет текст в компоненте TextArea текстом, выбранным в компоненте ComboBox:

event.target.selectedItem.label.

15 Выберите меню "Управление" > "Тестировать ролик" или нажмите Ctrl+Enter для компиляции кода и тестирования приложения Greetings.

Далее описывается процедура построения того же приложения с использованием внешнего класса

ActionScript и FLA-файла, который имеет только требуемые компоненты в библиотеке.

Создание приложения Greetings2 с использованием внешнего файла класса:

1   Выберите "Файл" > "Создать".

2   В диалоговом окне "Новый документ" выберите "Файл Flash (ActionScript 3.0)" и нажмите кнопку "ОК".

Откроется новое окно Flash.

3   Выберите "Файл" > "Сохранить", присвойте файлу Flash имя Greetings2.fla и нажмите кнопку "Сохранить".

4   Перетащите каждый из следующих компонентов с панели "Компоненты" в библиотеку:

•   ColorPicker

•   ComboBox

•   RadioButton

•   TextArea

В скомпилированном SWF-файле будет использоваться каждый из этих активов, поэтому их необходимо добавить в библиотеку. Перетащите компоненты в нижнюю часть панели "Библиотека". При добавлении этих компонентов в библиотеку другие активы (например, List, TextInput и UIScrollBox) добавляются автоматически.

5   В окне "Свойства" в поле "Класс документа" введите Greetings2.

Если Flash отобразит предупреждение о том, что "определение класса документа не найдено", игнорируйте его. Определение класса Greetings2 будет выполнено в последующих шагах. Данный класс определяет основную функциональность приложения.

6   Сохраните файл Greetings2.fla.

7   Выберите "Файл" > "Создать".

8   В диалоговом окне "Новый документ" выберите "Файл ActionScript" и нажмите кнопку "ОК".

Откроется новое окно сценария.

9   Вставьте следующий код в окно сценария:

package {

import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.text.TextFormat;

import fl.events.ComponentEvent; import fl.events.ColorPickerEvent; import fl.controls.ColorPicker; import fl.controls.ComboBox;

import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import fl.controls.TextArea;

public class Greetings2 extends Sprite {

private var aTa:TextArea; private var msgCb:ComboBox; private var smallRb:RadioButton; private var largerRb:RadioButton;

private var largestRb:RadioButton; private var rbGrp:RadioButtonGroup; private var txtCp:ColorPicker;

private var tf:TextFormat = new TextFormat();

public function Greetings2() {

Сценарий определяет класс ActionScript 3.0 под названием Greetings2. Сценарий выполняет следующее:

•   Импортирует классы, которые будут использоваться в файле. Обычно данные инструкции import добавляются по мере ссылки на различные классы в коде, но для краткости данный пример импортирует их все сразу.

•   Объявляет переменные, представляющие различные типы объектов компонентов, которые будут добавлены в код. Другая переменная создает объект TextFormat tf.

•   Определяет функцию конструктора, Greetings2(), для класса. В последующих шагах мы добавим строки к этой функции и добавим другие методы к классу.

10 Выберите "Файл" > "Сохранить", присвойте файлу имя Greetings2.as и нажмите кнопку "Сохранить".

11 Вставьте следующие строки кода в функцию Greeting2():

createUI();

setUpHandlers();

}

Функция теперь должна выглядеть следующим образом:

public function Greetings2() { createUI(); setUpHandlers();

}

12 Вставьте следующие строки кода после закрывающей скобки метода Greeting2():

private function createUI() { bldTxtArea(); bldColorPicker(); bldComboBox(); bldRadioButtons();

}

private function bldTxtArea() { aTa = new TextArea(); aTa.setSize(230, 44); aTa.text = "Hello World!"; aTa.move(165, 57); addChild(aTa);

}

private function bldColorPicker() { txtCp = new ColorPicker(); txtCp.move(96, 72); addChild(txtCp);

}

private function bldComboBox() { msgCb = new ComboBox(); msgCb.width = 130; msgCb.move(265, 120); msgCb.prompt = "Greetings";

msgCb.addItem({data:"Hello.", label:"English"}); msgCb.addItem({data:"Bonjour.", label:"Fran?ais"}); msgCb.addItem({data:"?Hola!", label:"Espa?ol"});

addChild(msgCb);

}

private function bldRadioButtons() {

rbGrp = new RadioButtonGroup("fontRbGrp"); smallRb = new RadioButton(); smallRb.setSize(100, 22);

smallRb.move(155, 120);

smallRb.group = rbGrp; //"fontRbGrp";

smallRb.label = "Small"; smallRb.name = "smallRb"; addChild(smallRb);

largerRb = new RadioButton(); largerRb.setSize(100, 22); largerRb.move(155, 148); largerRb.group = rbGrp; largerRb.label = "Larger"; largerRb.name = "largerRb"; addChild(largerRb);

largestRb = new RadioButton(); largestRb.setSize(100, 22); largestRb.move(155, 175); largestRb.group = rbGrp; largestRb.label = "Largest"; largestRb.name = "largestRb";

addChild(largestRb);

}

Эти строки выполняют следующее:

•   Создают экземпляры компонентов, используемых в приложении.

•   Задают размер, положение и свойства каждого компонента.

•   Добавляют каждый компонент в рабочую область при помощи метода addChild().

13 После закрывающей скобки метода bldRadioButtons() добавьте следующий код метода

setUpHandlers():

private function setUpHandlers():void { rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); msgCb.addEventListener(Event.CHANGE, cbHandler);

}

private function rbHandler(event:MouseEvent):void {

switch(event.target.selection.name) {

case "smallRb": tf.size = 14; break;

case "largerRb": tf.size = 18; break;

case "largestRb":

tf.size = 24;

break;

}

aTa.setStyle("textFormat", tf);

}

private function cpHandler(event:ColorPickerEvent):void { tf.color = event.target.selectedColor; aTa.setStyle("textFormat", tf);

}

private function cbHandler(event:Event):void {

aTa.text = event.target.selectedItem.data;

}

}

}

Эти функции определяют прослушивателей событий для компонентов.

14 Выберите "Файл" > "Сохранить", чтобы сохранить файл.

15 Выберите меню "Управление" > "Тестировать ролик" или нажмите Ctrl+Enter для компиляции кода и тестирования приложения Greetings2.

Разработка и выполнение последующих примеров

Разработав и выполнив приложение Greetings вы получили основные знания, необходимые для выполнения других примеров кода, приведенных в данной книге. Соответствующий код ActionScript 3.0 в каждом примере будет выделен и объяснен, а вы сможете вырезать и вставить каждый пример в этой книге в FLA-файл, скомпилировать и выполнить его.

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии