CFA LogoCFA Logo Computer
Новости Статьи Магазин Драйвера Контакты
Новости
RSS канал новостей
В конце марта компания ASRock анонсировала фирменную линейку графических ускорителей Phantom Gaming. ...
Компания Huawei продолжает заниматься расширением фирменной линейки смартфонов Y Series. Очередное ...
Компания Antec в своем очередном пресс-релизе анонсировала поставки фирменной серии блоков питания ...
Компания Thermalright отчиталась о готовности нового высокопроизводительного процессорного кулера ...
Компания Biostar сообщает в официальном пресс-релизе о готовности флагманской материнской платы ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Говорим на Flash ActionScript

Кирилл КОВАЛЕНКО, Андрей КОВАЛЕНКО kovalenkir@mail.ru

(Продолжение. Начало в МК №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 означает амплитуду, — угловую частоту (рад/с), t — время, j — начальную фазу. Теория, как видите, несложная, поэтому переходим к практике.

Элементы управления роликом

Итак, мы хотим получить возможность строить фигуры Лиссажу с заданными параметрами. Для этого нам понадобятся: кнопки Старт, Пауза и Рестарт для запуска анимации, ее остановки и обновления рабочей области соответственно. Далее, 4 текстовых поля. Два из них — для ввода частот x- и y- колебаний, одно — для ввода разности фаз j1–j2, и еще одно — для ввода количества отображаемых точек. Причем поля для ввода частот выполним в виде «спин-полей» (ну нет у слова spin-edit русскоязычного аналога :-)), т.е. добавим справа две кнопки со стрелками, чтобы значение поля можно было изменять нажатием кнопки «мыши». На Рис. 1 показаны элементы управления нашим роликом.

Добавим возможность отображения фигуры Лиссажу либо в виде «хвоста» (tail), либо в виде «кривой» (curve). «Хвост» будет состоять из 15 точек (шариков), уменьшающихся со временем (истаивающих). «Кривая» будет содержать столько шариков, сколько задаст пользователь. На Рис. 2 показаны эти два режима.

Рис. 1   Рис. 2

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

Вы можете скачать .rar-архив, содержащий файлы данного проекта, по адресу http://uant.narod.ru/misc/osc1.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? На заставке — мордашка интернет-красавицы с густой шевелюрой. Так вот, изображение Маси (это кнопка!) начинает шевелить губами только если навести мышкой на изображение. Мышка на белом фоне девочку не активизирует, даже если курсор находится в пределах прямоугольника, содержащего Рис. 3изображение. То есть, невидимый контур 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, но их использование требует некоторого опыта. О последних речь пойдет в следующих статьях.

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

Рекомендуем ещё прочитать:






Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы или вычислите пример: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © sector.biz.ua 2006-2015 design by Vadim Popov