по курсу «Интерактивная анимация»

Лабораторная работа №4

«Компоненты. Часть 2»

по курсу «Интерактивная анимация»

Методические указания

Список (List)

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

Параметры компонента, которые можно задать вручную

Параметр	Значение
allowMultipleSelection	Задает, может ли пользователь выбирать в списке сразу несколько значений. Значение true разрешает это, значение false запрещает. Значение по умолчанию — false
dataProvider	Массив связанных значений: строк, отображаемых в списке и связанных с ними значений. Подробнее об использовании этого свойства - ниже
enabled	false – компонент запрещен к использованию, true – компонент активен (по умолчанию)
visible	false – компонент невидим, true – компонент является видимым
horizontalLineScrollSize, verticalLineScrollSize и др.	Эти параметры управляют скоростью прокрутки.
horizontalScrollPolicy / verticalScrollPolicy	Управление горизонтальной/вертикальной полосой прокрутки. Если задать этому свойству значение on то рядом со списком появляется полоса прокрутки. Значение off отключает полосу прокрутки. По умолчанию полоса прокрутки находится в автоматическом режиме (auto).

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

При этом появляется диалоговое окно Values, позволяющее добавлять значения в список. Кнопки на панели инструментов этого окна позволяют добавлять или удалять значения, а так же изменять порядок их следования в списке. При щелчке по кнопке Add (имеющей значок «плюс») в список добавляется новая строка. Каждая строка состоит из двух составляющих: label – отображаемая в списке строка и data – связанное со строкой значение (рисунок). Параметр data является необязательным. Кроме кнопки Add, на панели инструментов окна Values (рис. внизу) находятся следующие кнопки: Удалить, Переместить ниже по списку, переместить выше по списку.

В этой работе не задавайте множественный выбор строк.

Свойства компонента, доступные только программным способом (за исключением стандартный для клипов свойств таких так x, y, alpha и т. д.).

Свойство	Описание
rowCount	Количество видимых строк в списке. Если это число меньше, чем общее количество строк в списке, то для просмотра полного списка появляется полоса прокрутки (если она разрешена)
rowHeight	Высота одной строки (значение по умолчанию – 20 пикселей)
selectedItem	Свойство имеет тип Object. Это выбранная строка в раскрывающемся списке. Объект-строка имеет как минимум два свойства: label — отображаемая в списке строка и data — связанное с этой строкой значение. Если пользователь вводит новое значение в поле, то значение этого свойства равно undefined. По умолчанию значение свойства null (ни одна строка не выбрана).
selectedIndex	Номер выбранного пункта в списке начиная с 0. Значение по умолчанию – 0. Если задать этому свойству значение (число), то будет выбрана соответствующая строка в списке. Но если это число будет превышать допустимое значение, то ничего не произойдет. Если задать этому свойству значение -1, то ни один из элементов раскрывающегося списка выбран не будет (поле останется пустым).
selectable	Это свойство имеет логический тип. Если его значение равно true, то пользователь имеет возможность выбирать строки в списке, если false — то пользователь не имеет такой возможности.
maxHorizontalScroolPosition	Количество пикселей, на которое пользователь будет прокручивать список влево или вправо в том случае, если для списка разрешена горизонтальная полоса прокрутки.

Заполнение списка программным способом

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

- addItem(obj) – для добавления объекта-строки obj в конец списка;

- addItemAt(obj, index) – для добавления объекта-строки obj в указанной позиции index. Значения index начинаются с нуля. Последующие строки спускаются вниз. Если значение index превышает количество строк в списке, то в момент добавления строки в список будет выдана ошибка.

Объект, добавляемый в список, должен содержать следующие свойства:

- label – строка, которая будет отображаться в списке;

- data – связанное с этой строкой значение.

Вариант 1.

var obj: Object = new Object();

obj.label = "Среда";

obj.data = "3";

days.addItem(obj);

days – это имя компонента-списка.

Создается и инициализируется объект класса Object, к которому добавляются два свойства – label (отображаемая строка) и data (связанное значение). Далее этот объект добавляется в конец списка при помощи метода addItem. После выполнения программы в конце списка days появляется строка «Среда».

Вариант 2.

days.addItem({label:"Четверг", data:"4"});

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

{<свойство1>: <значение1>,

<свойство2>: <значение2>,

…,

<свойствоN>: <ЗначениеN>)}

называется контейнерным объектом. Такие объекты создаются для быстрого создания объектов в момент выполнения программы.

Другие методы компонента связанные с удалением и замещением строк в списке являются общими с компонентом ComboBox и описаны ниже.

Обработка события выбора строки списка

Событие выбора строки в списке называется change и принадлежит событийному классу Event.

Пример 1. Список myList содержит название дней недели. При выборе строки в списке выводится сообщение с содержимым этой строки и ее индексом.

myList.addEventListener(Event.CHANGE, listChange);

function listChange(_event:Event)

{

trace("Выбрана строка с индексом "+_event.currentTarget.selectedIndex);

trace("Содержимое строки: "+_event.currentTarget.selectedItem.label);

}

Event.CHANGE — событие выбора строки в списке.

listChange – это имя листенера - функции, которая будет вызываться при срабатывании события. В эту функцию передается параметр — объект события, который в данном случае имеет тип Event. Свойство currentTarget этого объекта ссылается на объект, который вызвал событие, то есть на сам список myList. Как было сказано выше, свойство selectedIndex списка — это индекс выделенной в нем строки, а selectedItem – это сама строка. Каждая строка — это объект, который имеет два свойства: label — отображаемая в списке строка (именно ее мы выводим в примере) и data — связанное со строкой значение. Свойство data не является обязательным.

Раскрывающийся список (ComboBox)

Компонент ComboBox позволяет создавать раскрывающийся список, предоставляющий пользователю возможность выбора одного из пунктов. Причем можно добавить возможность ввода в список нового значения с клавиатуры. По своей сути, раскрывающийся список — это поле ввода, скомбинированное с компонентом «Список».

Параметры компонента:

Параметр	Значение
dataProvider	Массив связанных значений: строк, отображаемых в списке и связанных с ними значений. Подробнее об использовании этого свойства было сказано выше при рассмотрении компонента List
editable	Если значение этого параметра true, то ввод новых строк с клавиатуры разрешен. Пункт false запрещает ввод строк. Значение по умолчанию — false
promt	Это строка-приглашение, отображаемая в поле ввода компонента тогда, когда ни одна из строк в раскрывающемся списке не выбрана (selectedIndex = -1, см. ниже). Например, если в раскрывающемся списке содержатся дни недели, то строка-приглашение может иметь вид «Выберите один из дней недели». Если не задать строку-приглашение. То по умолчанию будет выбрана первая строка в раскрывающемся списке.
rowCount	Количество пунктов, одновременно отображаемых в выпадающем списке. Если количество пунктов в списке превышает это значение, появляется полоса прокрутки. Значение по умолчанию — 5

Добавление пунктов в раскрывающийся список полностью аналогично добавлению новых пунктов в компонент List (Список).

Свойства компонента, доступные только программным способом

Свойство	Описание
selectedItem	Свойство имеет тип Object. Это выбранная строка в раскрывающемся списке. Объект-строка имеет как минимум два свойства: label — отображаемая в списке строка и data — связанное с этой строкой значение. Если пользователь вводит новое значение в поле, то значение этого свойства равно undefined. По умолчанию значение свойства null (ни одна строка не выбрана).
selectedIndex	Номер выбранного пункта в списке начиная с 0. Значение по умолчанию – 0. Если задать этому свойству значение (число), то будет выбрана соответствующая строка в списке. Но если это число будет превышать допустимое значение, то ничего не произойдет. Если задать этому свойству значение -1, то ни один из элементов раскрывающегося списка выбран не будет (поле останется пустым).
text	Текст в строке ввода
value	Нередактируемое свойство. Если editable=true, то в этом свойстве будет хранится значение из массива data, соответствующее выбранному пункту. Если editable=false, то в этом свойстве будет хранится значение из массива labels, соответствующее выбранному пункту.
length	Количество элементов в списке. Это свойство доступно только для чтения (редактировать нельзя).
restrict	Строка — набор символов, которые пользователь может ввести в поле ввода компонента.

Методы компонентов List и ComboBox

1. addItem и addItemAt используются для добавления новых элементов в список, были рассмотрены выше.

2. getItemAt(index: uint): Object

Этот метод возвращает объект-строку, находящуюся в раскрывающемся списке под индексом index. Измерение index начинается с нуля.

Пример 2. Для работы примера компонент ComboBox обязательно должен находиться в библиотеке проекта!

import fl.controls.ComboBox;

var myComboBox:ComboBox = new ComboBox();

myComboBox.addItem({label:"Item 1"});

myComboBox.addItem({label:"Item 2"});

myComboBox.addItem({label:"item 3"});

myComboBox.addItem({label:"Item 4"});

myComboBox.addItem({label:"Item 5"});

myComboBox.move(10, 10);

addChild(myComboBox);

var item: Object = myComboBox.getItemAt(1);

trace("label=" + item.label); // вывод «label=Item 2»

Метод move, используемый в примере, перемещает клип (а в основе любого компонента находится клип) в указанную точку с координатами (x, y). Создается новый экземпляр компонента ComboBox — myComboBox, в него добавляются строки, затем, компонент передвигается в точку с координатами (10, 10) и добавляется в список отображения. Метод getTemAt возвращает объект-строку. Этот объект имеет два особенный для списка свойств — это label (отображаемая строка) и data (связанное со строкой значение). В примере для каждой строки создавались только метки (label), поэтому выводится только свойство label строки, имеющей индекс (1). Поскольку индексирование строк начинается с нуля, то строка с индексом 1 — это вторая строка в списке.

3. removeItem (item: Object):Object

Удаляет указанный элемент из списка. Параметр, передаваемый в метод — item – это объект, который нужно удалить из списка. Возвращаемое значение — это удаленный объект.

Пример. Используем список, созданный выше.

var obj: Object = new Object();

obj.label = “Item6”;

myComboBox.addItem(obj); // добавление нового объекта в качестве строки списка

…

myComboBox.removeItem(obj); // удаление строки из списка

4. removeItemAt(index: uint): void

Удаляет строку из списка с индексом index. Метод ничего не возвращает. После удаления строки из списка оставшиеся элементы, располагавшиеся после удаленного, смещаются на один пункт к началу.

5. removeAll()

Удаляет все элементы из списка.

6. replaceItemAt(item: Object, index: iunt): Object;

Заменяет элемент, находящийся в списке под индексом (index) (начиная с нуля) на объект item. Метод возвращает замещенный объект-строку.

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

var obj: Object = new Object();

obj.label = “new Item 1”;

myComboBox.replaceItemAt(obj, 0);

Обработка события выбора строки в списке

Обработка этого события ведется точно так же, как и для компонента List. Добавим к раскрывающемуся списку myComboBox, созданному в примере 2 в качестве обработчика события выбора пункта в списке функцию listChange, которая была создана в примере 1 для экземпляра компонента List. Эти два компонента имеют общий набор свойств и методов, работающих со списком, поэтому работать этот обработчик события для компонента ComboBox будет точно так же, как и для компонента List.

myComboBox.addEventListener(Event.CHANGE, listChange);

Выбор цвета (ColorPicker)

Этот компонент позволяет пользователю осуществлять выбор цвета из стандартного набора Web-цветов или задать собственный цвет в шестнадцатеричном формате.

Параметры компонента:

Параметр	Значение
selectedColor	Цвет, выбранный в компоненте по умолчанию. Если в этой строке щелкнуть по цветовому образцу, то можно выбрать любой цвет вручную. Рядом с образцом находится описание цвета в формате RGB в 16-ричном виде.
showTextField	Если значение этого параметра true, то в верхней части выпадающего окна выбора цвета (рис. вверху) будет располагаться текстовое поле, в котором отображается значение цвета в формате RGB. Это же текстовое поле пользователь может использовать для задания собственного значения цвета. Значение false убирает это текстовое поле и оставляет пользователю только стандартную палитру Web-цветов. Значение по умолчанию — true

Пример 3. Обработка события выбора цвета. Это событие принадлежит особому событийному классу — ColorPickerEvent. Чтобы обрабатывать это событие, соответствующий класс нужно импортировать в программу:

import fl.events.ColorPickerEvent;

myCP.addEventListener(ColorPickerEvent.CHANGE, myCPChange);

function myCPChange(_event:ColorPickerEvent)

{

trace(_event.currentTarget.selectedColor);

}

Здесь myCP – это имя экземпляра компонента, расположенного на рабочем листе.

ColorPickerEvent.CHANGE — это событие, срабатывающее после того, как пользователь выбралновый цвет с использованием компонента. myCPChange — это имя функции-прослушивателя события. В функцию передается объект события, имеющий тип ColorPickerEvent. Свойство currentTarget этого объекта ссылается на объект, вызвавший событие, то есть оно ссылается на сам экземпляр компонента myCP.

В примере при выборе нового цвета при помощи функции trace выводится выбранный цвет. Важно отметить, что цвет хранится в десятичном формате, то есть selectedColor имеет тип uint. Так, если пользователь выберет черный цвет, то обработчик события выведет ноль, а если пользователь выберет белый цвет — то 16777215 (255*255*255)

Пример 4. Задание цвета рабочей области с использованием компонента ColorPicker.

Используется тот же экземпляр компонента — myCP, но переписано тело функции-обработчика события. Теперь внутри этой функции при помощи программного рисования создается закрашенный прямоугольник, границы которого совпадают с границами рабочей области. Цвет контура прямоугольника и цвет его заливки одинаковы и берутся из компонента myCP.

myCP.addEventListener(ColorPickerEvent.CHANGE, myCPChange);

function myCPChange(_event:ColorPickerEvent)

{

this.graphics.lineStyle(1, myCP.selectedColor);

this.graphics.beginFill(myCP.selectedColor);

this.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);

this.graphics.endFill();

}

Здесь this ссылается на текущий объект — основную временную шкалу (рабочую область). this.graphics – это специальный объект (в данном случае рабочей области), предназначенный для работы с векторной графикой. Метод lineStyle задает настройки контура векторных объектов. Первый параметр — это толщина контура, второй — это цвет контура, заданный в десятичном формате. Метод beginFill инициирует заливку замкнутых контуров, появляющихся на объекте graphics. В качестве параметра в этот метод передается цвет заливки в десятичном формате. И для контура и для заливки мы используем цвет, выбранный пользователем в компоненте ColorPicker (myCP.selectedColor). Метод drawRect Рисует прямоугольник в указанный координатах (первые два параметра — это координаты верхнего левого угла прямоугольника, следующие два — это ширина и высота прямоугольника). Метод endFill прекращает заливку замкнутых областей. Чтобы функции работы с векторной графикой работали, их нужно импортировать в программу:

import flash.display.Graphics;

Компонент Переключатель (Radio Button)

Компонент переключатель похож на компонент Флажок (Check Box) и так же служит для выбора значений. Отличительной особенностью этого компонента является то, что как правило, несколько его экземпляров объединяют в группу и пользователь может выбрать только один элемент из целой группы.

Параметры компонента

Параметр	Значение
groupName	Имя группы, к которой относится экземпляр компонента. Если несколько переключателей имеют общее имя группы, то они считаются связанными, и между ними можно выбрать лишь единственное значение. Если у двух переключателей разные имена групп, то они независимы друг от друга. Значение свойство по умолчанию — RadioButtonGroup
label	Строка, находящаяся рядом с переключателем
labelPlacement	Положение строки. Значение по умолчанию right (строка располагается справа от выключателя). Другие возможные значения: left — строка находится слева, top - сверху от выключателя, bottom — снизу от выключателя.
selected	Признак того, что переключатель выбран (true) или не выбран (false) по умолчанию. В одной группе может быть только один выбранный переключатель. Вручную при создании компонента можно сделать выбранными по умолчанию все переключатели группы, но при запуске фильма выбранным останется все равно только один из них.
value	Этот параметр имеет тип Object и представляет собой объект, связанный с текущим экземпляром переключателя.

Обработка события выбора переключателя

Рассмотрим обработку этого события на примере. На рабочем листе находятся переключатели с именами «Один», «Два», «Три», находящиеся в одной группе. Рядом с ними находятся три клипа с фотографиями, расположенные один поверх другого так, чтобы каждый раз был виден только один (верхний) клип. При выборе переключателя «Один» верхним становится первый из клипов, при выборе переключателя «Два» - второй и т. д.

Клипы находятся на основной временной шкале. Порядок их расположения относительно пользователя зависит от того, в каком порядке они подсоединены к родительскому объекту в списке отображения. Метод setChildIndex позволяет изменить порядок следования дочерних объектов у родительского узла. В качестве параметров в него передаются дочерний объект и его новый индекс. Свойство numChildren родительского объекта показывает, сколько дочерних объектов он имеет. Таким образом, чтобы переместить наверх клип с именем clip, расположенный на рабочей области, нужно выполнить следующий код:

setChildIndex(clip, numChildren – 1);

Теперь вернемся собственно к обработке события выбора одного из переключателей группы. Это уже знакомое по ранее изученным компонентам событие Event.CHANGE. Для всех переключателей группы в качестве функции-обработчика (прослушивателя) этого события можно добавить одну и ту же функцию. Свойство currentTarget объекта события, передаваемого в этот метод, будет ссылаться именно на тот переключатель, который вызвал событие.

На рабочем листе находятся три переключателя, им заданы имена rb1, rb2, rb3. Клипы с фотографиями имеют имена cat1, cat2, cat3. Клипы можно связать каждый со своим переключателем через свойство value (см. таблицу вверху).

Рассмотрим код программы.

rb1.value = cat1; // связывание клипа с переключателем

rb2.value = cat2;

rb3.value = cat3;

// добавление обработчиков событий

// для всех переключателей обработку события ведет одна и та же функция

rb1.addEventListener(Event.CHANGE, rbChange);

rb2.addEventListener(Event.CHANGE, rbChange);

rb3.addEventListener(Event.CHANGE, rbChange);

// функция — обработчик события

function rbChange(_event: Event)

{

// _event.currentTarget — переключатель, вызвавший событие

setChildIndex(_event.currentTarget.value, numChildren - 1);

}

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

Задание

Создать тематический альбом фотографий, распределенный по двум-трем разделам. Для переключения между фотографиями варианты 1, 4, 7 и т. д. должны использовать компонент List, варианты 2, 5, 8 и т. д. - компонент ComboBox, варианты 3, 6, 9, и т. д. - компонент RadioButton. Сделать выбор фона рабочей области с использованием компонента ColorPicker. Разрешается использовать компоненты, изученные в предыдущей работе.

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

Содержание отчета: а) цель работы; б) номер варианта и задание полностью; в) текст всех скриптов с указанием их месторасположения и комментариями; г) описание работы программы.

Дата добавления: 2015-08-27