(Продолжение. Начало в №8)

Вашему вниманию предлагается уже седьмой выпуск по флэш/флекс. На самом деле мне, как всегда, трудно привыкнуть к скоротечности времени, вроде бы буквально недавно начали, а уже седьмой выпуск. У-ух. Но прошли и обсудили много. Надоела вам уже, наверное, теория, поэтому этот выпуск "Территории" будет чисто практическим.

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

1-е - по lisbox'у...

Два предложенных метода вызвали много суждений, многие даже специально скачали специализированные утилиты, которые считают загрузку процессора. Кратко напомню, о чем там шла речь. Вам предлагалось сделать самостоятельно в коде такую компоненту, как listbox, причем двумя принципиально различными способами. 1-й являлся стандартным: вы создаете панель, размеры которой зависят от количества Item'ов (а по существу, текстовых полей, на ней расположенных). Поверх вы ставите панель-маску, в результате чего наша исходная панель получается как бы в окне. Ну а дальше очень несложными методами делается скроллинг (математика).

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

Не скрою, стандартный вариант очень удобен, но те, кто взялся писать его в коде, столкнулись с очевидной проблемой: что делать при добавлении нового элемента, редактировании n-го и т.п. Хотя, на самом деле о редактировании речь не шла, все-таки имелся в виду Listbox, а не Combobox. В общем, с этой проблемой все разобрались, а если у кого есть вопросы - пишите.

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

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

Еще одна небольшая тонкость, которая, в принципе, на пользовательский глаз и не заметна: когда вы двигаете панель (1 вариант), она может останавливаться в любой точке, а в случае с текстовыми полями все строки отображаются полностью. Это не критический момент, если на нем не заострять внимание.

В принципе, на иллюстрации показана одна из моих старых флэшевых программ - это калькулятор, результаты вычислений загружающий в listbox'ы, коих два, сделанных по разным методикам, обозначенным выше. Невооруженный исходным кодом пользователь может и не понять, где что...

Кстати, присмотритесь внимательно к играм.

2-е - по цветам...

Итак, аддитивная RGB-модель представления цвета записывается в шестнадцатеричном коде, а сама запись начинается с "0х". Случайный цвет мы можем выбрать или с помощью random из 16 млн. с последующим переводом в шестнадцатеричный вид (1-й вариант), либо же представляем запись "0хFFFFFF" как строку, а само обозначение цвета подбираем шестью random'ами из 16 значений, после чего делаем конкатенацию строки. Вопрос был: какой из вариантов для каких случаев лучше?

Очень многие написали, что выбор из 16 млн. и точка! Зачем столько мучаться с этими шестью random'ами? В принципе, это можно назвать правильным ответом, потому как мы говорили о случайном подборе.

Но второй метод тоже применим и не так уж редко. Например, когда речь заходит о случайных режимах (и не случайных, когда регулирует пользователь) только для определенных оттенков какого-нибудь цвета. То есть, в любом случае "0хFFFFFF" будет хранить некую постоянную комбинацию символов, а все остальное нужно менять. Как вы понимаете, саму запись "0хFFFFFF" я просто ставлю как шаблон шестнадцатеричного представления (на самом деле буквально она обозначает черный цвет). В общем, метод с разбиением достаточно удобен.

Ну а теперь, на этой веселой ноте, переходим к начинающим...

Задание для начинающих

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

А пока мы начнем с простейшего рисования кнопок, работы с событиями. Причем все должно быть написано в нулевом (первом фрэйме), а сам код вводится в окне Actions (это я напоминаю). Почему я ставлю акцент на нулевом фрейме? Дело в том, что в учебниках по флэшу, написанных дизайнерами, код часто вводится в панель Actions относительно самой кнопки, причем кнопок много, слоев много и т.п. Код вводится везде, где только можно. Это достаточно раздолбайский подход, а нам нужно научиться программировать и видеть все в варианте единой целостной и упорядоченной структуры.

Рисуем и запускаем кнопку

Открыв новый документ флэша, вы выбираете геометрическую фигуру из панели Tools. Это может быть овал, прямоугольник или многоугольник. Меняйте закраску, экспериментируйте с градиентной заливкой. При этом, чтобы изменить ее направление и свойства, используйте инструмент Gradient Transform Tool (F).

Поверх этого элемента вы ставите элемент Text из той же панели Tools. Вводите в него надпись для кнопки, выбираете шрифт, его размер и цвет в панели свойств (Properties). Помещаете текстовый элемент поверх графического. Выглядит красиво? В принципе, да:). После этого переключаете указатель мыши в режим Selection Tool (V) и обводите все элементы. Теперь их нужно сгруппировать (Ctrl+G).

Далее нажимаем волшебную клавишу F8. В результате чего перед вами откроется окно Convert to Symbol, где нужно указать Button, ввести имя нашей кнопки для библиотеки проекта, потом сделать активным флажок Export for ActionScript, ввести имя для экшнскрипта и нажать OK. Все, кнопка готова. Хотите проверить? Загляните в окно Library, где появится ваша собственная компонента.

Далее в окне свойств вместо пустого Instance Name введите свое специфическое название для данной кнопки, и все, теперь она уже полностью готова.

Далее, следует сделать ее не только активной, но и интерактивной, то есть поработать как с кодом, так и с графикой. Переходим в рабочую область и делаем на нашей кнопке двойной клик указателем мыши. Смотрим, что появилось в диаграмме Timeline. Ага, четыре события: Up, Over, Down, Hit. Это то, как она реагирует на события указателя мыши. То есть, для каждого из случаев вы можете поменять практически все, что угодно: форму, цвет, текст, расположение, угол поворота, добавить элементы, слои и т.п. Тут стоит понимать, что данная диаграмма относится только к кнопке и больше ни к чему. Для возврата в обычную диаграмму нажимаете на синюю стрелку в Timeline.

Для того чтобы посмотреть, как все реагирует, смело нажимайте Ctrl+Enter (запуск приложения на исполнение). В результате она (кнопка) анимирована и реагирует. Ну а дальше все нужно делать в программной части. Переходим в окно Actions (следите, чтобы все было на нулевом фрейме).

Введем примерно следующее:

Кнопка1.onPress = function()
{
trace ("Запуск ракеты совершен");
};

И все, панель Output вам выведет вашу надпись - все активно, все работает. Как говорится, "делофф тоо".

Далее поэкспериментируйте сами, вводя текст не через панель Output, а в специальном текстовом окне (инструмент Text Tool(T)). При этом вам его не нужно нигде дополнительно регистрировать и обозначать, достаточно только указать имя в панели свойств. Наша запись превратится:

Кнопка1.onPress = function()
{
Окно.text="Нервы лечатся!";
};

Таким образом, после прочтенного, господа начинающие, вам нужно будет сделать следующее...

Задание №1

Создать 13 кнопок (0-9, ".", "+/-", "Сброс"), окно вывода (TextTool). Каждой кнопке 0-9 соответствует своя цифра по нажатию, она и должна выводиться на экране (окне текста). Следующим этапом идет реализация ввода составных цифр и реализация кнопки сброса. Подумайте, как это сделать, и реализуйте. После этого продумайте, как нужно нажать точку дроби (при этом в числе она может нажиматься только один раз - не забывайте об этом). Ну и напоследок реализуйте добавление/удаление отрицательного знака. Вы думали, что калькулятор - это просто? Ну-ну.

Хотя, если кто быстро справится, то задание перед вами (калькулятор с чтением курса валют из XML и основными математическими операциями).

(Продолжение следует)

Кристофер,
christopher@tut.by