Использование компонентов пакета fl.controls, часть 2

Привет всем, сегодня мы продолжим изучение компонентов. Это продолжение вот этого урока, здесь мы рассмотрим использование компонентов в приложениях, совмещая с различными классами.

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

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

var images:Array = new Array("auto.jpg", "baseball.jpg","basketball.jpg","bowling.jpg","golf.jpg", "tennis.jpg","skiing.jpg","soccer.jpg");
var names:Array = new Array("Гонки","Бейсбол","Баскетбол","Боулинг", "Гольф", "Лыжи", "Футбол");

Важно чтобы они следовали строго соответственно друг другу.

Вот план того, что мы хотим сделать: есть выдвижной список, динамически расширяющийся при добавлении элементов в массивы, при нажатии на элемент, из папки подгружается соответствующая картинка.
Выдвигающийся список — это ComboBox.

Давайте рассмотрим, как добавлять в него элементы. Вообще, каждый элемент в списке — это не строка, а label — надпись, которая имеет свой порядковый номер — data. Чисто для примера, добавим какой нибудь элемент в список.
Сначала надо добавить компонент на сцену. Кто забыл — Ctrl+F7. Перетаскиваем компонент на сцену, даем имя choose. Нам еще нужно импортировать библиотеку (для удобства перед всем кодом).

import fl.controls.*;

Затем напишем в самом низу такой код:

choose.addItem({ label: "Тест", data:0 });

С помощью метода addItem мы добавляем очередной элемент в конец списка. По сути, мы всего-то преобразовываем строковый элемент, который может быть хоть переменной, хоть элементом массива, хоть простым текстом, в label, и присваиваем ему номер.
Запустим. Видим, что элемент добавился, и теперь он единственный в списке. Можно добавить хоть сколько, но я думаю, смысл понятен. Уберем эту строку.

[swfobj src="http://cyber-page.ru/wp-content/uploads/2011/02/flcontrols1.swf"]

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

for (var i:Number=0;i<names.length;i++) {
choose.addItem({label: names[i], data:i});
}

Создали цикл, от 0 до конца массива. Добавляем label — элемент массива names с номером параметра цикла, и с тем же номером data. Запускаем, все ок. Можно попробовать добавить несколько элементов в массив, и они автоматически добавятся в список.
[swfobj src="http://cyber-page.ru/wp-content/uploads/2011/02/flcontrols2.swf"]

Теперь займемся загрузкой изображений. Добавим еще пару строчек в начало.

import flash.display.Loader;
import flash.net.URLRequest;

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

var image:Loader = new Loader();

У компонентов этого пакета есть собственные события Event.CHANGE. Они действуют при при любом смене выбранного элемента, в нашем случае выборе того или иного элемента списка. Этим мы и воспользуемся. Создадим прослушиватель на компонент:

choose.addEventListener(Event.CHANGE, loadF);

И далее функцию автоматической загрузки:

function loadF(e:Event):void {
image.load(new URLRequest(images[choose.selectedIndex]));
addChild(image);
image.x=190;
image.y=160;
}

Напомню: с помощью метода load мы указываем способ загрузки содержимого, и внутри него уже с помощью URLRequest путь к файлу. В нашем случае все пути указаны в массиве images. А в качестве номера мы используем свойство selectedIndex — номер того элемента, который в данный момент выбран в списке. А дальше мы добавляем этот элемент на сцену и ставим на удобную позицию.

Надеюсь, все понятно. Теперь запускаем. Щелкая по любому элементу, должна загружать соответствующая картинка.
[swfobj src="http://cyber-page.ru/wp-content/uploads/2011/02/flcontrols3.swf"]
Если все в порядке, то идем дальше.
Создадим кнопку, которая будет убирать картинку, с именем hide.
И добавим код:

hide.addEventListener(MouseEvent.CLICK, hideF);
function hideF(e:Event):void {
removeChild(image);
}

Ну и тут все понятно.
Исходный код:

import fl.controls.*;
import flash.display.Loader;
import flash.net.URLRequest;

var images:Array = new Array("auto.jpg", "baseball.jpg","basketball.jpg","bowling.jpg","golf.jpg", "tennis.jpg","skiing.jpg","soccer.jpg");
var names:Array = new Array("Гонки","Бейсбол","Баскетбол","Боулинг", "Гольф", "Теннис", "Лыжи", "Футбол");

for (var i:Number=0;i<names.length;i++) {
choose.addItem({label: names[i], data:i});
}
var image:Loader = new Loader();

choose.addEventListener(Event.CHANGE, loadF);
function loadF(e:Event):void {
image.load(new URLRequest(images[choose.selectedIndex]));
addChild(image);
image.x=190;
image.y=160;
}

hide.addEventListener(MouseEvent.CLICK, hideF);
function hideF(e:Event):void {
removeChild(image);
}

[swfobj src="http://cyber-page.ru/wp-content/uploads/2011/02/flcontrols4.swf"]

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