Перед вами третья часть статьи под названием "Macromedia Flash 8: курс молодого бойца", посвященная этому замечательному программному продукту и технологии Flash. Начиная с сегодняшнего дня, темы нашего разговора о Flash станут более узкими. Поэтому впредь я буду опускать слова "курс молодого бойца" в заглавии. Однако это обстоятельство совсем не повлияет на способ изложения материала, основная цель которого - ответить на множество вопросов, возникающих у начинающих flash-дизайнеров, и дать пищу для размышлений бывалым.

Итак, сегодня на повестке дня компоненты пользовательского интерфейса Macromedia Flash Professional 8, а также способы их настройки.

Стандартные компоненты Flash 8

В последней версии мощного графического пакета Macromedia Flash 8, помимо кучи инструментов, методов и эффектов временной шкалы, предназначенных для создания качественной мультипликации, присутствуют полноценный объектно-ориентированный язык программирования ActionScript 2.0 и многочисленные компоненты (встроенные программные блоки типа Movie).

Зачем вообще нужны компоненты? Во многих случаях они значительно упрощают процесс разработки интерактивного приложения. С помощью полей ввода данных и всевозможных переключателей на web-сайтах легко создаются регистрационные формы, посредством загрузчиков можно управлять загрузкой текстовых и мультимедийных данных из различных источников и т.д. Сегодня мы познакомимся с одним из классов компонентов во Flash 8 - элементами пользовательского интерфейса (User Interface - UI).

Самым популярным объектом во Flash, конечно, является кнопка (button). Она присутствует во Flash и как тип символа, и как элемент UI. Реже используются компоненты RadioButton, CheckBox, MenuBar и др., но они отнюдь не являются менее важными. Окно компонентов вызывается по нажатию Ctrl+F8 или из меню Window -> Components. Основные компоненты UI см. в таблице.

Сегодня на примере настройки параметров элемента пользовательского интерфейса под названием Alert будут рассмотрены принципы работы со стилями компонентов.

Предварительная настройка свойств компонентов

Компонент Alert позволяет организовать небольшой диалог пользователя с компьютером. Сообразим что-то похожее на программу-говорилку Alice, созданную в 60-х годах и обладающую небольшим искусственным интеллектом, который позволял поддерживать беседу с человеком, используя его ответы на ранее заданные вопросы.

Сперва поменяем надписи на кнопках и напишем обработчик их нажатия. В зависимости от того, на какую кнопку кликнул пользователь, будет появляться особое сообщение. Это все достигается без применения стилей. Итак, перетащим на чистый лист из панели Components окошко Alert и снабдим его всеми нужными настройками. Вспомним, что в любом fla-файле Flash присутствует библиотека (вызывается через нажатие Ctrl+"L"), в которой хранятся экземпляры компонентов. Сюда же поместилось и окошко Alert. Поскольку нам не нужно, чтобы оно всегда болталось в рабочей области, то его можно оттуда удалить (с монтажного стола, разумеется). В библиотеке Alert останется.

Теперь выделяем первый кадр на временной шкале, переходим в раздел Actions (F9) и записываем следующий программный код: "import mx.controls.Alert" (подробнее смотри в листинге). Многие из требуемых настроек можно установить только при помощи ActionScript. Окно Alert вызывается процедурой Alert.show ('текст', 'заглавие окна', 'используемые кнопки', 'окно', 'обработчик нажатия', 'выделенная кнопка') с множеством параметров, указанных в скобках. Для используемых кнопок в одинарных кавычках указывается 'Alert.YES | Alert.NO' (еще бывают кнопки "OK" и "Cancel"), а для обработчика событий - функция 'buttonclick', которую напишем немного погодя. Теперь изменим надписи на кнопках "YES" и "NO" при помощи свойств компонента Alert "yesLabel" и "noLabel". Потом установим требуемые размеры ("buttonWidth" и "buttonHeight"). Для подбора оптимальных параметров полезно запускать на тестирование ролик - клавиши "Enter" + Ctrl. Логика функции "buttonclick" следующая: когда нажимается кнопка "Замечательно", выскакивает сообщение "Так держать!", когда "Так себе" - "Не вешай нос!". Чтобы изменения приняли силу, описание данной функции и настройки компонента Alert должны предшествовать вызову процедуры Alert.show, как показано в листинге:

import mx.controls.Alert;
Alert.buttonWidth=150;
Alert.buttonHeight=25;
Alert.yesLabel='Замечательно';
Alert.noLabel='Так себе...';
buttonclick = function(evt){if (evt.detail == Alert.YES)
{Alert.show('Так держать!', 'Macromedia Flash 8');}
if (evt.detail == Alert.NO)
{Alert.show('Не вешай нос!', 'Macromedia Flash 8');}}
Alert.show('Как дела, дружок?', 'Macromedia Flash 8',
Alert.YES | Alert.NO, this, buttonclick, Alert.YES);

Подобным образом можно организовать и более сложный диалог с пользователем.

Работа со стилями

Для чего же используются стили? Сейчас поясню. Любой компонент во Flash имеет определенную цветовую гамму, размер шрифта и т.д. Но если вы занимаетесь разработкой, к примеру, собственного сайта, то, чтобы не нарушать целостность картины, вам придется "подстроить" компоненты под сайт. Я думаю, что не ошибусь, если скажу, что каждый flash-дизайнер стремится создать свои ролики в особенной, свойственной только ему, манере. С помощью стилей и тем во Flash 8 можно сделать каждый компонент уникальным. Но не будем распыляться и сосредоточимся пока на стилях.

Прикладной программный интерфейс форматирования (Styles API) предоставляет пользователю свойства и методы, с помощью которых можно изменить цвет компонента и отформатировать текст, содержащийся на нем. Обычно этого достаточно. Вместе с Flash 8 поставляются два стиля с набором параметров: "Halo" и "Sample", которые находятся в файлах HaloTheme.fla и SampleTheme.fla, соответственно. На рисунке показано их месторасположение в Windows 2000/XP. Нужно отметить, что у темы "Sample" свойств намного больше, поэтому целесообразнее использовать именно ее для модификации компонентов. А делается это следующим образом:

1. Вызывается команда File -> Import -> Open External Library и в диалоговом окне указывается файл SampleTheme.fla. Затем на панели импортированной библиотеки выбирается Flash UI Components2 -> Themes -> MMDefault. Потом из этого окна необходимо перетащить папку с ресурсами нужного компонента (assets) в окно библиотеки символов текущего документа.
2. При помощи методов setStyle (параметр, значение) и getStyle (параметр) можно установить или получить значение того или иного параметра выбранного стиля.

Поскольку мы работаем с компонентом Alert, то перетащим в библиотеку символов нашего документа папку "Alert Assets". Затем воспользуемся стандартными свойствами темы "Sample" (см. листинг).

_global.styles.Alert.setStyle ("color", "red");
_global.styles.Alert.setStyle ("themeColor", "haloBlue");
_global.styles.Alert.setStyle ("backgroundColor", "0xE0C5FE");
_global.styles.Alert.setStyle ("fontFamily", "times new roman");
_global.styles.Alert.setStyle ("fontSize", "15");

Теперь цвет диалогового окна Alert изменен на фиолетовый (0xE0C5FE), а надписи на нем стали синими, причем шрифт превратился в "Times New Roman" с размером 15 пунктов. Нужно отметить, что таким образом был модифицирован символ Alert, поэтому изменения скажутся на всех его экземплярах. Описание всех свойств тем "Halo" и "Samlpe" можно найти в справке Flash 8.

А если мне этого мало?

Если даже при использовании стилей внешний вид компонентов не отвечает вашим эстетическим требованиям, тогда можно попробовать написать свою собственную тему. Для этого достаточно отредактировать или заменить оболочки необходимых компонентов в одной из стандартных тем. Для этого сохраняем файл HaloTheme.fla или SampleTheme.fla под уникальным именем, загружаем его, переходим в окно библиотеки символов (Window -> Library или Ctrl+L), выделяем необходимый компонент и в контекстном меню выбираем опцию "Edit". Одни элементы пользовательского интерфейса состоят из множества частей, поэтому их можно легко преобразить, перерисовав или создав заново каждую деталь. Такими компонентами являются Button, CheckBox, ComboBox, DataGrid, RadioButton и пр. Другие оболочки рисуются программным способом. В этом случае для изменения внешнего вида компонента потребуется модифицировать исходный код. Это, например, компонент Alert. Поскольку создание пользовательской темы является трудоемким процессом, мы не будем его подробно рассматривать. По крайней мере, сейчас. Вот и все.

Послесловие

Сегодняшняя статья о программном пакете Macromedia Flash 8 - наша последняя встреча в 2005 году. У ее автора начинается пора экзаменов в университете. Однако не так страшна сессия, как ее малюют. Намного ужаснее несколько недель до нее, когда за минимально возможное время нужно выполнить и защитить энное количество лаб, а также допуститься к самим экзаменам. :) Поэтому сделаем небольшой перерыв.

В следующий раз поговорим о создании примитивных компьютерных игр во Flash 8. Вы увидите, что написать игрушку наподобие Yeti не очень сложно. Не забывайте посещать наш сайт www.kv.by, где можно посмотреть swf-ролики, которые были нарисованы при подготовке материала для каждой статьи. Только возьмите Flash Player 8 на вооружение.

Виталий КРАСИЛЬНИКОВ,
narthex@inbox.ru