(Продолжение. Начало в МК №45,49(216, 220)) В предыдущей статье мы с вами рассмотрели построение простого интерактивного Flash-ролика — игры для двух участников. В частности, мы научились создавать символы и наделять их способностью реагировать на действия пользователя (нажатие клавиш). Для того чтобы расширить интерактивные возможности роликов, необходимо добавить элементы управления — кнопки (buttons), текстовые поля (edits), ползунки (scroll bars), «радио»-кнопки (radio buttons), «спин»-поля (поля со счетчиком, spin-edits) и так далее.
Фигуры Лиссажу: симпатичные кривые
Сегодня мы займемся созданием интерактивного ролика, который будет строить фигуры Лиссажу с заданными параметрами. Если вы когда-нибудь работали или игрались с осциллографом, наверняка не раз их наблюдали. На входы X и Y подаются синусоидальные сигналы разной частоты, и на экране наблюдаются линии неземной красоты. При соотношении частот 1:1 получим круг (или эллипс, если уровни сигналов различны), 1:2 — «восьмерку», 7:8 — э… «подушку» и так далее. То есть, координата x точки изменяется по формуле x = A1*sin(w1t + j1), а координата y — по y = A2*sin(w2t + j2), где A означает амплитуду, w — угловую частоту (рад/с), t — время, j — начальную фазу. Теория, как видите, несложная, поэтому переходим к практике.
Элементы управления роликом
Итак, мы хотим получить возможность строить фигуры Лиссажу с заданными параметрами. Для этого нам понадобятся: кнопки Старт, Пауза и Рестарт для запуска анимации, ее остановки и обновления рабочей области соответственно. Далее, 4 текстовых поля. Два из них — для ввода частот x- и y- колебаний, одно — для ввода разности фаз j1–j2, и еще одно — для ввода количества отображаемых точек. Причем поля для ввода частот выполним в виде «спин-полей» (ну нет у слова spin-edit русскоязычного аналога :-)), т.е. добавим справа две кнопки со стрелками, чтобы значение поля можно было изменять нажатием кнопки «мыши». На Рис. 1 показаны элементы управления нашим роликом.
Добавим возможность отображения фигуры Лиссажу либо в виде «хвоста» (tail), либо в виде «кривой» (curve). «Хвост» будет состоять из 15 точек (шариков), уменьшающихся со временем (истаивающих). «Кривая» будет содержать столько шариков, сколько задаст пользователь. На Рис. 2 показаны эти два режима.
Для переключения вида фигуры нам понадобятся «радио-кнопки», т.е. группа кнопок с возможностью выбора только одной из них (Рис. 1).
Вы можете скачать .rar-архив, содержащий файлы данного проекта, по адресу (15 Кб). Это поможет вам быстрее разобраться с процессом построения ролика и отследить ошибки, если такие возникнут. Тем не менее рекомендуется выполнить все действия, описанные ниже. Только практика поможет вам освоить язык скриптов Flash.
Создаем проект «Осциллограф»
Итак, начнем. Запускаем Flash и создаем новый проект (File > New). В отличие от предыдущего нашего ролика, публиковать (выполнять) его во время разработки будем не только в виде .exe, но и в виде .swf, поскольку среди прочего будем загружать ролик динамически, используя функцию ActionScript loadMovie(). .swf — стандартное расширение для Flash-роликов. В виде HTML опубликуем в конце работы, чтобы не загружать каждый раз «тяжелый» браузер.
Выбираем File > Publish Settings и ставим в появившемся диалоговом окне галочки напротив Windows Projector (.exe) и Flash (.swf), а напротив HTML (.html) галочку убираем.
Далее зададим частоту обновления ролика. Выбираем Modify > Movie, или нажимаем Ctrl+M. Кстати, большинство действий во Flash имеет «горячие клавиши», то же касается и инструментов. Не поленитесь выучить их, экономьте свое время и не мучайте мышку :-). В появившемся диалоговом окне установите в поле Frame Rate значение 60 fps. То есть ролик будет обновляться 60 раз в секунду. Для медленных компьютеров, возможно, это значение придется уменьшить, чтобы код скриптов успевал выполняться. Сохраним проект под именем osc.fla. Теперь можно создавать символы для ролика.
Зеленый шарик и его анимированный двойник
Главным героем ролика будет зеленый шарик, движущийся по линии Лиссажу. Значит, в библиотеку символов надо добавить этот самый шарик. Выбираем пункт меню Insert > New Symbol (Ctrl+F8). В появившемся окне вводим имя символа: Cmv_CurveBall (о выборе имен для символов см. далее), поведение символа (Behavior) оставляем как Movie Clip. В дальнейшем будем называть символы типа Movie Clip «мувиками». Теперь в панели Tools (Инструменты) выбираем Oval Tool («Овал», клавиша O). Чтобы сделать красивую «объемную» заливку, в панели Colors нажимаем на Fill Color и выбираем радиальную градиентную заливку внизу выпавшего окошка. Для цвета контура выберите No Color (белый перечеркнутый квадратик). Удерживая Shift, рисуем круг приблизительно в центре рабочей области. Точно отцентровать его можно с помощью панели Align (см. ниже). Круг превратился в «объемный» шарик. Символ Cmv_CurveBall готов. С помощью него будет создаваться фигура Лиссажу вида «кривая».
Теперь — символ для «хвоста». Как мы уже говорили, хвост будет «сужаться», т.е. шарики, составляющие его, будут таять. Создаем новый символ с именем Cmv_TailBall и перетаскиваем в него символ Cmv_CurveBall из окна библиотеки (Ctrl+L). Выбираем мышкой 15-й кадр единственного слоя Layer 1 и вставляем ключевой кадр (правая кнопка «мыши» > Insert Keyframe, или F6). В 15-м кадре уменьшим шарик в 10 раз с помощью закладки Transform панели Info (Ctrl+Alt+I). Наведя «мышью» на любой кадр с 1-го по 14 (курсор принимает вид хватающей руки), нажимаем правую кнопку и в появившемся меню выбираем Create Motion Tween. Должна появиться стрелка, ведущая от 1-го кадра к 15-му. Теперь выберите 15-й кадр и напишите в окне ActionScript (Ctrl+Alt+A): removeMovieClip(this). Благодаря этому вызову экземпляры, динамически создаваемые во время воспроизведения ролика, будут уничтожаться автоматически.
Поздравляем: вы создали анимированный символ Cmv_TailBall. Можно перетащить несколько экземпляров на сцену, нажать F12 и посмотреть, как они уменьшаются. Красота! А теперь удалите все со сцены, и пойдем дальше.
Кнопки
Кнопка — это символ специального вида, умеющий реагировать на «клик». В нашем проекте будут такие кнопки: «Старт», «Пауза», «Рестарт». Кроме того, для «спин-полей» мы будем использовать кнопки Увеличить на 1 и Уменьшить на 1, выполненные в виде стрелок-треугольников, направленных вверх и вниз соответственно. «Радио-кнопки» создадим сами, в виде кольца с надписью справа; в кольце при клике будет отображаться черная точка, указывая на то, что выбрана именно эта опция.
Стандартные кнопки
Создаем кнопки «Старт», «Пауза» и «Рестарт», используя стандартные (общие) библиотеки символов Flash: Window > Common Libraries > Buttons. Появляется окно общей библиотеки кнопок, содержащее множество иконок — папок с кнопками. Выбираем (двойной щелчок) (circle) VCR Button Set и перетаскиваем в библиотеку своего проекта кнопки gel Right, gel Pause и gel Stop.
Объектная модель и идентификаторы
Несколько слов об именах слоев, символов, экземпляров и переменных. В языке Flash ActionScript реализована объектная модель, хотя она несколько отличается от привычных моделей C++, Delphi и т.п. в силу специфики предметной области (анимация). Так, символы (symbols) библиотеки можно сравнить с классами, а экземпляры (instances) символов, вставляемых в сцену — с экземплярами этих классов. Поэтому рекомендуется использовать префиксы для идентификаторов, описывающих их природу (наподобие TObject, TButton в Delphi или CObject, CStatic в Visual C++).
Так, для символов-мувиков (Movie Clip) библиотеки мы будем использовать префикс Cmv_ (напр. Cmv_Ball), для символов-кнопок —Cbt_ (Cbt_Play), для слоев —lr_ (lr_Action). Для экземпляров-мувиков — префикс mv_ (mv_Ball), для экземпляров-кнопок —bt_ (bt_Stop). Поверьте: такая унификация внесет порядок и ясность в ваши проекты и сэкономит ваше время в будущем, когда вы захотите усовершить ваш ролик без мучительных воспоминаний о том, что же делают эти самые Button23 или Movie Clip 12.
Стандартные кнопки — это хорошо, но мы хотим создавать свои собственные, не так ли? Итак, создаем.
Собственные кнопки
Создаем новый символ, выбираем тип символа Button, называем его Cbt_Arrow, жмем ОК. Рабочая область проекта содержит теперь пространство редактирования кнопки. Список слоев содержит единственный слой нашей новой кнопки —Layer 1. Не путайте слои символов со слоями сцены; кстати, переключаться между сценой и символами позволяют две кнопки в правом верхнем углу окна проекта. В слое Layer 1 четыре кадра: Up, Over, Down, Hit. В первых трех кадрах отображен вид кнопок для следующих состояний: «Обычное» (кнопка не нажата и мышь не над кнопкой), «Мышь над кнопкой» и «Кнопка нажата» соответственно.
Четвертый кадр задает область действия. В нем рисуется произвольная фигура — она никогда не отображается. Состояние Over кнопки наступает, когда мышь находится над этим невидимым контуром. Контур Hit можно сделать произвольным. Например, если кнопка имеет круглую форму, сделайте контур в Hit заполненным кругом — в этом случае событие Over наступит, когда указатель мыши попадет в пределы круга.
Кстати, помните новогоднюю Масяню-2002? На заставке — мордашка интернет-красавицы с густой шевелюрой. Так вот, изображение Маси (это кнопка!) начинает шевелить губами только если навести мышкой на изображение. Мышка на белом фоне девочку не активизирует, даже если курсор находится в пределах прямоугольника, содержащего 
изображение. То есть, невидимый контур Hit в кадре точно повторяет контур Масяни, с ее ушами и дивной прической.
Когда вы рисуете что-либо в первом кадре кнопки (Up), изображение автоматически копируется во все остальные. Поэтому по умолчанию область действия совпадает с контуром кнопки. Автоматизация!
Итак, мы рисуем кнопку для текстового поля со счетчиком. Во всех четырех кадрах вставляем ключевой кадр (Keyframe). Выполним кнопку в виде треугольника, для каждого кадра (Up, Over, Down) разного цвета. Область действия (кадр Hit) выполним в виде закрашенного черного треугольника.
Вообще говоря, Flash позволяет рисовать сложные анимированные кнопки. Вы можете вставлять одни символы в другие и создавать такие многофункциональные элементы управления, что дух захватывает :-). Все еще впереди!
«Радио-кнопки»
Создайте два символа-мувика: черное кольцо Cmv_Ring (это будет «окошко» «радио»-кнопки) и серый кружок Cmv_Dot («бегунок»). О размерах не беспокойтесь — когда поместим символы на сцену, мы их отмасштабируем. Создаем два символа-кнопки Cbt_Tail и Cbt_Curve. Помещаем в них надписи Tail и Curve соответственно (не забудьте предварительно вставить Keyframe в каждый из четырех кадров). Область действия Hit рисуем в виде заполненного прямоугольника, вытянутого влево — чтобы кнопка захватывала кольцо-«окошко», когда мы поместим все элементы на сцену. Рис. 3 проясняет, к чему мы стремимся.
Как видите, нам приходится стандартные элементы управления рисовать самостоятельно, с разного рода ухищрениями. На самом деле во Flash существуют все эти элементы (radiobuttons, checkboxes и т.д.), так называемые SmartClips, но их использование требует некоторого опыта. О последних речь пойдет в следующих статьях.
(Продолжение следует)