Лабораторная работа №3
«Компоненты»
по курсу «Интерактивная анимация»
Методические указания
Использование компонентов
Рис. 1 |
В Flash существует большой набор компонентов. Компонент – это специальный клип, для которого уже заранее заданы конкретные свойства и методы и который может вести себя особым образом. На рисунке слева – окно Components (Window → Components). В этой работе рассмотрим некоторые компоненты группы User Interface.
Размещение компонентов на рабочем листе Разместить компонент на рабочем листе можно несколькими способами: 1. Перетащите его из окна Components на рабочий лист. 2. Дважды щелкните по имени компонента в окне Components. При этом сам компонент автоматически помещается в библиотеку, на рабочем листе можно размещать произвольное количество копий этого компонента, перетаскивая экземпляры уже из библиотеки обычным способом.
Свойства компонентов Каждый компонент имеет уникальный набор свойств. Посмотреть их и поменять при необходимости можно в окне Инспектора компонентов (Window → Component Inspector, Shift+F7) на вкладке Parametes (рис. 2).
|
Рис. 2.
Удаление экземпляров компонентов Чтобы удалить компонент, выделите его и нажмите Del. Если компонент больше не нужен в проекте, удалите его из библиотеки. |
|
Компоненты группы User Interface
Надпись (Label)
Этот компонент может применяться для размещения текста на рабочей области. Текст можно ввести вручную при размещении компонента на рабочей области, а можно задать программно.
Параметры компонента:
Параметр |
Значение |
text |
Текст |
htmlText |
Текст в формате HTML. При выводе на экран будет отображаться как в браузере (достоинство – текст может быть отформатирвоан) |
selectable |
Признак того, можно ли выделить (и скопировать) текст компонента или нет. Значение true соответствует возможности выделить текст, значение false используется по умолчанию. |
autoSize |
Этот параметр влияет на то, как ведут себя границы компонента при изменении объема текста, хранимого в нем. none – отсутствие автоматического изменения размеров компонента left – размер поля будет увеличиваться (уменьшаться) вправо и вниз так, чтобы уместить текст; не меняются левая и верхняя границы right - размер поля будет увеличиваться (уменьшаться) влево и вниз так, чтобы уместить текст; не меняются правая и верхняя границы center - размер поля будет увеличиваться (уменьшаться) вправо и влево так, чтобы уместить текст; верхняя и нижэняя граница остаются неизменными |
visible |
false – компонент невидим, true – компонент является видимым |
enabled |
false – компонент запрещен к использованию, true – компонент активен (по умолчанию) |
condenseWhite |
true – в тексте будут игнорироваться такие невидимые символы, как возвраты каретки, табуляция и т.д., false – отвлючение этого режима (по умолчанию) |
wordWrap |
false (по умолчанию) – компонент является однострочным, true – режим разрешения переноса строк. |
Кнопка (Button)
Компонент Button позволит вам создать обычную командную кнопку, выглядящую как стандартная кнопка Windows.
Параметры компонента:
Параметр |
Значение |
label |
Надпись на кнопке |
labelPlacement |
Местонахождение текстовой подписи: левее (left). правее (right), выше (top) или ниже (bottom) иконки на кнопке. Значение по умолчанию — right. |
selected |
Признак того, выбрана кнопка или нет. Значение true соответствует выбранной кнопке, false – не выбранной (по умолчанию). |
toggle |
Если значение этого параметра – true, то кнопка будет использоваться как переключатель. Если кнопка не должна использоваться таким образом, то оставьте этому параметру значение false (это значение по умолчанию). |
visible |
false – компонент невидим, true – компонент является видимым |
enabled |
false – компонент запрещен к использованию, true – компонент активен (по умолчанию) |
emphasized |
true – вокруг компонента рисуется дополнительная рамка, false – дополнительная рамка отсутствует (по умолчанию) |
Ко всем этим свойствам можно обращаться и программным способом. Так как кнопка (и другие компоненты) являются особыми вариациями клипов (MovieClip), в программе можно обращаться ко всем обычным для клипов свойствам (x, y, width, height, scaleX, scaleY и др). Обработчик события нажатия кнопки добавляется точно так же, как и для обычного клипа:
but1.addEventListener(MouseEvent.CLICK, but1Click);
function but1Click(_event : MouseEvent)
{
_event.currentTarget.label = "Кнопка нажата";
}
Здесь but1 – это имя кнопки. В качестве обработчика щелчка кнопки мыши по кнопке добавлена функция but1Click. В теле этой функции программным способом изменяется надпись на кнопке.
Флажок (CheckBox)
Компонент CheckBox – это флажок, имеющий два состояния: "включено" и "выключено". Внешне он схож со стандартным флажком Windows.
Параметры компонента:
Параметр |
Значение |
label |
Текстовая подпись рядом с флажком |
labelPlacement |
Местонахождение текстовой подписи: левее (left). правее (right), выше (top) или ниже (bottom) флажка. Значение по умолчанию — right (подпись находится правее флажка) |
selected |
Признак активности флажка. Если флажок выставлен, то значение параметра – true, в противном случае – false (по умолчанию). |
enabled |
false – компонент запрещен к использованию, true – компонент активен (по умолчанию) |
visible |
false – компонент невидим, true – компонент является видимым |
На панели Properties или используя стандартные инструменты можно изменять ширину флажка.
При щелчке по флажку активируется событие click.
Пример. Разместите на рабочем листе флажок и клип. Свойству label флажка присвойте значение «Скрыть», а свойству selected - false.
Задайте имя экземпляру флажка. Выполняется это точно так же, как и для экземпляров клипа. Для этого нужное имя вводится в поле Instance name на панели Properties (рис. 4).
Рис. 3
Замечание. Справа от кнопки Swap (см. рис. 3) находится кнопка вызова окна инспектора компонентов.
Продолжим работу над примером. Надо сделать так, чтобы при активации флажка клип появлялся в окне плеера, надпись флажка при этом должна смениться на «Скрыть». При снятии флажка клип должен исчезнуть, подпись флажка должна смениться на «Показать».
Обработчик события для компонента добавляется точно так же, как и для клипа. Чтобы, скажем, обработать событие от щелчка мыши при помощи какой-либо функции, нужно добавить эту функцию в качестве листенера события к компоненту при помощи метода AddEventListener.
В примере photoCheck – это имя флажка, photo – имя клипа, видимостью которого мы управляем, checkClick – это имя функции – преемника события щелчка кнопки мыши по компоненту-флажку (photoCheck).
// добавление функции-прослушивателя события щелчка кнопкой мыши
// по компоненту-флажку с именем photoCheck
photoCheck.addEventListener(MouseEvent.CLICK, checkClick);
// Функция – прослушиватель события
function checkClick(_event : MouseEvent)
{
if (photoCheck.label == "Скрыть") // если флажок имеет подпись «Скрыть»
{
photoCheck.label = "Показать"; // меняем ее
photo.visible = false; // скрываем клип с изображением
}
else
{
photoCheck.label = "Скрыть";
photo.visible = true; // показываем клип с изображением
}
}