к оглавлению Flash   Алгоритмизация   4GL - визуальные среды мультимедийные технологии  

Мультимедийный скриптовый язык ActionScript

Обработка событий ActionScript

В этом уроке описаны способы определения и обработки событий мыши и клавиатуры. Кроме того, вы найдете здесь подробные сведения о том, как можно перемещать клипы по экрану.

Общая характеристика событий мыши

Известно ли вам, что компьютер постоянно регистрирует информацию о том, что делает ваша мышь? Он отслеживает изменение позиции указателя мыши, распознает нажатие и отпускание кнопок мыши. В языке ActionScript механизм выявления событий мыши поддерживается операциями категории OnMouseEvent (При событии мыши). На рис. 6.1 показаны флажки, связанные с различными событиями мыши, доступные в панели операций.

Рис. 6.1. Работа с событиями мыши в панели операций

Все события мыши могут использоваться независимо друг от друга; средствами панели операций вы можете определить любое количество событий мыши. Приведем список событий мыши с их кратким описанием.

Пункт OnMouseEvent (При событии мыши) в списке Basic Actions (Основные операции) и конструкция on()action доступны только при работе над сценариями кнопок. Заметим также, что в пакете Flash 5 существует инструкция onClipEvent(), для которой определен другой набор событий. Эту инструкцию мы рассмотрим в данной главе несколько позже. Конструкция on О act ion не может использоваться в сценариях кадров. Рассмотренный ниже пример демонстрирует механизм реакции кнопок фильма на различные события мыши.

Пример фильма. Обработка событий мыши

Фильм, находящийся в файле mouseEvent.fla на компакт-диске, призван продемонстрировать различные элементы техники обработки событий, связанных с символами кнопок. В этом фильме три слоя:

Основой небольшого фильма, выполненного в жанре игрового автомата, является слой Tomato Blaster (Взрыв помидора), представляющий разлетающиеся ошметки взорвавшегося помидора. В этом фильме предусмотрены звуковые эффекты; здесь мы имеем дело с типичной игровой программой, построенной на основе обработки событий мыши. На рис. 6.2 представлены слои и начальный экран фильма.

Рис. 6.2. В этом фильме используются различные обработчики событий

Слой Tomato Blaster

Чтобы создать этот слой, необходимо вручную выполнить несложный рисунок помидора, разорванного на мелкие кусочки.

  1. Выделите кадр 12 и нажмите клавишу F5, чтобы расширить фильм до 12 кадров.
  2. Нарисуйте помидор в нижнем левом углу рабочей зоны. Воспользуйтесь для этого инструментом Oval (Овал) и добавьте зеленые листочки с помощью кисти.
  3. Сделайте кадр 2 ключевым, выделив его и нажав клавишу F6. Откройте панель Frame (Кадр), нажав комбинацию клавиш Ctrl+F (Windows) либо Cmd+F (Macintosh) и назовите этот ключевой кадр Fire! (Огонь), введя эту строку в поле Label (Метка). Сделайте ключевым еще один кадр (кадр 9). Назначать имя этому кадру не обязательно.
  4. Нарисуйте ошметки помидора в ключевом кадре 9, как показано на рис. 6.3.
  5. Выберите пункт Shape (Форма) в раскрывающемся списке Tweening (Кадрирование) панели Frame (Кадр).

Рис. 6.3. Эффект взрыва определяется различными обработчиками событий, находящимися в сценариях кнопок, которые присутствуют в рабочей зоне.

  1. Дважды щелкните на кадре 1, чтобы открыть панель Frame Actions (Операции кадра). В поле редактора сценариев введите приведенный ниже сценарий для кадра 1.

Кадр 1

stop();

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

Слой Sound

Теперь необходимо создать слой Sound (Звук). Для этого нужно выполнить следующую последовательность шагов.

  1. Сделайте ключевым кадр 2, выделив его и нажав клавишу F6.
  2. Выполните команду Window > Common Libraries > Sounds (Окно > Общие библиотеки > Звуки). В библиотеке звуков выберите элемент Metal Clank (Металлический лязг). Этот звук вполне подойдет для нашего фильма.
  3. Дважды щелкните на ключевом кадре 2, чтобы открыть панель Sound (Звук). Выберите пункт Metal Clank (Металлический лязг) в раскрывающемся списке Sound (Звук). Для остальных параметров можно оставить значения, предлагаемые по умолчанию, но удостоверьтесь, что в поле Loops (Количество циклов) установлено значение 0 (вам достаточно однократного повторения звука).

Слой Action Button

В слое Action Button (Кнопка действия) необходимо создать шесть кнопок. Эти кнопки будут использоваться для демонстрации различных событий мыши. Создав кнопки, разместите их в рабочей области, как показано на рис. 6.2 и 6.3. Воспользуйтесь средствами панели Align (Выравнивание), чтобы аккуратно выровнять кнопки. Введите надписи справа от соответствующих кнопок. Добавьте ко всем кнопкам приведенные ниже сценарии (сверху вниз слева направо начиная с верхней пары кнопок).

on (dragOver) {

gotoAndPlay ("Fire!"): }

on (dragOut) {

gotoAndPlay ("Fire!"); }

on (rollout) {

gotoAndPlay ("Fire!"); }

on (rollOver) {

gotoAndPlay ("Fire!"); }

on (release) {

gotoAndPlay ("Fire!"); }

on (releaseOutside) {

gotoAndPlay ("Fire!"); }

Для выбора соответствующих событий нужно использовать флажки, находящиеся в нижней части панели операций.

Будьте внимательны. Не следует устанавливать сразу несколько флажков: в этом случае в одной строке сценария окажется несколько различных событий.

Фильм готов. Протестируйте его, вызывая различные события. На рис. 6.3 взрыв помидора происходит в результате наведения указателя мыши на кнопку, соответствующую событию RollOver. Обязательно попробуйте вызывать взрывы разными кнопками.

Если фильм оправдал ваши ожидания, попробуйте определить несколько разных событий для одной кнопки. При этом система Flash не будет выдавать каких бы то ни было сообщений об ошибках, но результат вас, возможно, удивит.

Обработчики событий мыши в ActionScript имеют чрезвычайно большое значение для реализации различных операций. По сравнению с весьма ограниченными стандартными функциями Up, Down, Over и Hit, предусмотренными для кнопок, обработчики событий мыши предоставляют в распоряжение автора фильма значительно более широкий спектр возможностей, которые применяются в различных компонентах фильмов. В уроке 7 вы увидите, как можно использовать сценарии для изменения свойств, и оцените значение событий мыши для механизма свойств.

Нажатие клавиш

Один из самых оригинальных механизмов в ActionScript — это способ применения клавиатуры для управления ходом воспроизведения фильмов. В предыдущем разделе уже упоминалось, что генерировать события мыши могут только кнопки. Возможно, поэтому вы удивитесь, узнав, что одно из событий, относящихся к категории OnMouseEvent (При событии мыши), — это нажатие клавиши на клавиатуре, и события мыши здесь, разумеется, ни при чем. Свык-нувшись с этим парадоксом, вы обнаружите, что задача выявления факта нажатия какой-либо клавиши на клавиатуре решается в ActionScript предельно просто.

Нажатие клавиш фиксируется с учетом регистра, в отличие от имен переменных и меток, в которых регистр не имеет значения. Так, если вы определили для какого-то кадра метку Q, то при выполнении как инструкции goto-AndStop("Q"), так и инструкции gotoAndStop("q") будет осуществлен переход к кадру с меткой Q. Однако если вы предусмотрели в сценарии какую-либо реакцию на нажатие клавиши Q, а пользователь нажал клавишу q (в нижнем регистре), то ваш обработчик события не активизируется.

Кнопка для обработки нажатия клавиш

При использовании механизма обработки нажатия клавиш перед разработчиком обычно встает вопрос о том, где должна находиться кнопка, сценарий которой будет реагировать на манипуляции пользователя с клавиатурой.

Нужно ли создавать специальную кнопку и помещать ее в рабочую зону фильма? Правильный ответ на этот вопрос выглядит так: кнопка для размещения сценария нужна, но зрителю ее видеть незачем. Чтобы эффективно работать с невидимыми кнопками, можно создать отдельный слой, в котором будут размещаться невидимые в рабочей зоне фильма кнопки, содержащие сценарии обработки клавиатурных событий. Получить доступ к этим кнопкам можно, выделив такой слой мышью и выполнив команду Edit > Edit Symbols (Правка > Редактировать символы). В режиме редактирования символов все невидимые элементы отображаются в виде значка + (плюс). Выделив этот значок и щелкнув на кнопке Scene (Сцена), вы можете выделить невидимую кнопку, чтобы редактировать ее сценарий. Выйти из этого режима можно, щелкнув в рабочей зоне или выделив какой-то другой слой. Следующий образец фильма демонстрирует механизм работы клавиатурных событий.

Пример фильма. Обработка нажатия клавиш

Рассматриваемый фильм в готовом виде вы можете найти на компакт-диске, прилагаемом к настоящей книге, в файле Keyboard.fla. Фильм состоит из трех слоев:

  • Invisible Button (Невидимая кнопка);
  • Letters (Буквы);
  • Background (Фон).

В данном фильме задействованы четыре обработчика клавиш, связанные с клавишами r и l в верхнем и нижнем регистрах. Подобный сценарий может быть полезен в фильме, где пользователю предоставляется возможность перемещать некий объект по экрану влево (left) и вправо (right). Первый слой фильма содержит невидимую кнопку, во втором демонстрируются связанные с отдельными кадрами сообщения, которые выдаются на экран при нажатии различных клавиш (рис. 6.4). В каждом кадре присутствует человечек, держащий в руках табличку с текстом сообщения; в сообщениях указывается нажатая пользователем клавиша (с учетом регистра). Обратите внимание, что в метках кадров указание на верхний регистр выглядит как префикс cap (capL и capR).

На рисунке в окне Library (Библиотека) справа от рабочей зоны вы можете видеть значок кнопки под именем invisible (Невидимая). В области предварительного просмотра в окне Library эта кнопка представляется, как и в главном окне программы в режиме редактирования символов, значком + (плюс). Это означает, что данная кнопка является невидимой, что вполне соответствует ее назначению: она является контейнером обработчика клавиш. Тем не менее даже невидимая кнопка должна быть размещена в рабочей зоне. В противном случае кнопка будет совершенно бесполезна. (Не имеет значения тот факт, что она останется невидимой для пользователя, поскольку предназначена только для обработки нажатия клавиш и недоступна для щелчка мышью.)

Рис. 6.4. Невидимая кнопка, предназначенная для размещения сценария обработки нажатия клавиш, представляется в окне библиотеки и в режиме редактирования символов значком + (плюс)

Слой Letters

Щелкните на кадре 21 и нажмите клавишу F5, чтобы ограничить размер фильма 21 кадром. В слое Letters (Буквы) присутствуют четыре ключевых кадра, не считая первого. В этих кадрах определены текстовые сообщения, уведомляющие зрителя о нажатии различных клавиш. На рис. 6.5 представлен кадр с меткой capL Текст в прочих ключевых кадрах отличается от данного лишь ссылкой на другие клавиши: L, l, и r.

  • Кадр 1. Дважды щелкните на представлении кадра 1 в киноленте, чтобы вывести на экран панель Frame Actions (Операции кадра). Введите в Поле редактора сценариев инструкцию остановки:

    stop();

Рис. 6.5. В файле Shockwave (SWF) вы можете познакомиться со всеми сообщениями фильма

  • Кадр 4 с меткой l. Воспользуйтесь инструментом Text (Текст), чтобы ввести строку You chose R, an excellent choice if I do say so (Вы выбрали букву 1 — прекрасный выбор, я вас уверяю). (Образец надписи вы найдете на рисунке.) Убедитесь, что в раскрывающемся списке панели Text Options (Параметры текста) выбран пункт Static Text (Статический текст). Во всех прочих ключевых кадрах используется тот же самый текст, не считая замены одной буквы.
  • Кадр 8 с меткой capL. Замените в тексте, использованном в кадре 4, строчную букву l на прописную.
  • Кадр 13 с меткой r. Замените в тексте, использованном в кадре 8, прописную букву L на строчную.
  • Кадр 16 с меткой capR. Замените в тексте, использованном в кадре 13, строчную букву г на прописную.

При нажатии какой-либо клавиши фильм переходит к соответствующему кадру. Убедитесь в том, что вы ввели правильные метки для всех кадров, чтобы программа не перепутала г с R и l с L Учтите, что в именах меток регистр не учитывается.

Слой Invisible Button

Слой Invisible Button (Невидимая кнопка) содержит наибольший объем сценариев ActionScript. Чтобы создать этот слой, выполните следующую последовательность шагов.

  1. Выделите слой Invisible Button (Невидимая кнопка).
  2. Выполните команду Insert > New Symbol (Вставка > Новый символ). На экране появится диалоговое окно Symbol Properties (Свойства символа).
  3. Установите переключатель Button (Кнопка) и введите имя invisible (Невидимая).
  4. Щелкните на кнопке Scene 1 (Сцена 1), чтобы вернуться к главной киноленте.
  5. Выполните команду Window > Library (Окно > Библиотека). В появившемся на экране окне Library (Библиотека) следует выделить значок кнопки invisible (Невидимая) и перетащить его в рабочую зону. Поскольку кнопка невидима, при перетаскивании вместо значка вы увидите лишь квадрат из пунктирных линий. Разместите кнопку в углу рабочей зоны, «от греха подальше».
  6. Не переключайтесь на другие слои и не щелкайте на других объектах, присутствующих в рабочей зоне. Откройте панель операций, щелкнув на кнопке Show Actions (Показать операции) с изображением стрелки в правом нижнем углу окна рабочей зоны.
  7. Двойным щелчком выберите операцию on в списке Actions (Операции) панели операций. Установите флажок Key Press (Нажатие клавиши) в нижней части панели операций и введите в поле редактора сценариев строчную букву l, как показано на рис. 6.6.

Рис. 6.6. Для операции on в редакторе сценариев предусмотрен флажок Key Press

  1. Затем дважды щелкните на пункте goto (Переход), снимите флажок Go to and Play (Перейти с последующим воспроизведением) в нижней части панели операций и введите I в качестве имени метки.
  2. Введите остальные инструкции сценария. Полный текст законченного сценария приведен ниже.

Кнопка invisible

on (keyPress "1") {

gotoAndStop ("1");

}

on (keyPress "r") {

gotoAndStop ("r");

}

on (keyPress "L") {

gotoAndStop ("capL");

}

on (keyPress "R") {

gotoAndStop ("capR"):

}

ВНИМАНИЕ

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

Объекты класса Key

Наряду с кнопками, принимающими на себя обработку нажатия клавиш, вы можете использовать объекты класса Key, а также связанные с ними методы и константы. Кстати, пришло время приступать к освоению экспертного режима работы редактора сценариев ActionScript. В дальнейшем при вводе сценариев вы будете работать в экспертном режиме. Переход в этот режим осуществляется С помощью меню, раскрывающегося щелчком на кнопке с направленной вправо стрелкой в правом верхнем углу панели операций.

Для объектов Key определены 4 метода и 18 констант. Прежде чем приступать к созданию сценариев, в которых используются объекты класса Key, вам следует познакомиться со списками их методов и констант.

Методы объекта Key

Перечисленные ниже четыре метода связываются с объектом Key через оператор . (точка).

  • Метод Key.getAscii() возвращает ASCII-код последней нажатой клавиши.
  • Метод Key.getCode() возвращает виртуальный код последней нажатой клавиши
  • Метод Key.isDown(n) возвращает логическое значение true, если была нажата клавиша с кодом п.
  • Метод Key. isToggled О возвращает логическое значение true, если отключены режимы клавиш CapsLock и NumLock.

Применяя метод Key.getAscii() в сочетании с функцией chr(), вы можете задавать любые стандартные клавиши. К примеру, следующий сценарий возвращает символ, соответствующий последней нажатой клавише, в виде строки, выводимой в текстовом поле, связанном с переменной write. Такие сценарии могут применяться и в кадрах, и в кнопках, и в клипах.

x=Key.getAscii();

write=chr(x);

Описанный подход предельно прост, особенно если сравнить его с использованием отдельных сценариев для всех клавиш. Код последней нажатой клавиши помещается в переменную, а затем функция chr() возвращает символ с соответствующим ASCII-кодом. В объектах Key не используются конструкторы; следовательно, данные, возвращаемые методами и константами объекта Key, могут помещаться непосредственно в переменные, как в рассмотренном выше сценарии.

Константы объекта Key

Обратите внимание на то, что имена всех констант объекта Key записаны прописными буквами. Константы могут использоваться совместно с методами объекта, перечисленными выше.

  • Константа Key. BACKSPACE возвращает клавиатурный код 8, соответствующий клавише Backspace.
  • Константа Key. CAPSLOCK возвращает клавиатурный код 20, соответствующий клавише CapsLock.
  • Константа Key.CONTROL возвращает клавиатурный код 17, соответствующий клавише Ctrl.
  • Константа Key.DELETEKEY возвращает клавиатурный код 46. соответствующий клавише Del.
  • Константа Key.DOWN возвращает клавиатурный код 40, соответствующий клавише.
  • Константа Key.END возвращает клавиатурный код 35, соответствующий клавише End.
  • Константа Key.ENTER возвращает клавиатурный код 13, соответствующий клавише Enter (Windows) либо Return (Macintosh).
  • Константа Key. ESCAPE возвращает клавиатурный код 27, соответствующий клавише Esc.
  • Константа Key.HOME возвращает клавиатурный код 36. соответствующий клавише Ноте.
  • Константа Key. INSERT возвращает клавиатурный код 45, соответствующий клавише Insert.
  • Константа Key.LEFT возвращает клавиатурный код 37, соответствующий клавише <—.
  • Константа Key.PGDN возвращает клавиатурный код 34, соответствующий клавише PageDown.
  • Константа Key. PGUP возвращает клавиатурный код 33, соответствующий клавише PageUp.
  • Константа Key.RIGHT возвращает клавиатурный код 39, соответствующий клавише —>.
  • Константа Key.SHIFT возвращает клавиатурный код 16. соответствующий клавише Shift.
  • Константа Key.SPACE возвращает клавиатурный код 32, соответствующий клавише пробела.
  • Константа Key.TAB возвращает клавиатурный код 9, соответствующий клавише табуляции.
  • Константа Key. UP возвращает клавиатурный код 38, соответствующий клавише.

Эти клавиши часто используются в игровых программах. Приведенный ниже код иллюстрирует применение условных инструкций с объектом Key для перехода к кадру, моделирующему выстрел из космической пушки, и к кадру, демонстрирующему активизацию маскировочного устройства.

if (Key.IsDownCKey.SPACE)) {

gotoAndPlay("Fire")

}

if (Key.isDown(Key.TAB)) {

gotoAndPlay("Cloak") }

Для обработки любого количества клавиш в одном кадре, кнопке или клипе можно использовать последовательность условных конструкций. В уроке 7 вы познакомитесь также с методикой использования клавиш для изменения свойств клипов.

Объекты класса Mouse

Один из новых объектов, появившихся в пакете Flash 5, — объект Mouse. Этот объект располагает лишь двумя методами: hide() и show(). Эти методы могут использоваться для создания нестандартных указателей мыши. Следующие инструкции позволяют соответственно скрыть и сделать видимым указатель мыши.

Mouse.hide();

Mouse. show();

Фильм, который мы рассмотрим в следующем разделе, демонстрирует возможность скрыть стандартный указатель мыши и заменить его клипом.

С мышью связаны два свойства: _xmouse и _ymouse. Эти свойства представляют собой функции, возвращающие позицию указателя мыши на экране. Их можно использовать для координации расположения клипа, заменяющего мышь, с позицией скрытого настоящего указателя мыши.

События клипов

Одна из наиболее существенных новых возможностей, появившихся в языке ActionScript, — это возможность размещения сценариев в клипах. В пакете

Flash 5 в языке ActionScript появилась новая операция onClipEvent. Эта операция во всем схожа с операциями обработки событий мыши, однако в отличие от последних она применяется для клипов в целом, а не для определенных их компонентов или кнопок. Перечисленные ниже обработчики событий позволяют активизировать соответствующие сценарии.

  • load. Данный сценарий выполняется сразу после загрузки клипа.
  • unload. Данный сценарий выполняется при выгрузке клипа.
  • enterFrame. Этот сценарий запускается при входе в каждый кадр.
  • mouseMove. Данный сценарий активизируется при перемещении мыши.
  • mouseDown. Этот обработчик события эквивалентен инструкции on(press) для кнопок. Сценарий активизируется при нажатии кнопки мыши или щелчке.
  • mouseUp. Этот обработчик события эквивалентен инструкции on(release) для кнопок. Сценарий активизируется при отпускании кнопки мыши или щелчке.
  • keyDown. Этот сценарий выполняется при нажатии соответствующей клавиши на клавиатуре на основании значения, возвращаемого методом Key.getCode().
  • keyUp. Этот сценарий выполняется при отпускании соответствующей клавиши на клавиатуре на основании значения, возвращаемого методом Key.getCode().
  • data. Данный сценарий активизируется при выявлении каких-либо данных, поступивших от методов loadVariables или loadMovie.

Возможность назначения событий клипам значительно упрощает задачу создания интерактивных фильмов. Рассматриваемый ниже фильм демонстрирует способы работы с событиями клипов и объектом Mouse.

Пример фильма. Использование клипа в качестве указателя мыши

Фильм, который вы можете найти в файле newCursor.fla на компакт-диске, демонстрирует технику применения событий клипов во взаимодействии со средствами, которыми располагает объект Mouse, для создания нестандартного указателя. В фильме три слоя:

  • Cursor (Указатель мыши);
  • Release (Удаление);
  • Background (Фон).

На рис. 6.7 представлена рабочая зона фильма со структурой слоев и объектов, а также окно Library (Библиотека) с укрупненным изображением клипа, имитирующего указатель мыши.

Рис. 6.7. Альтернативный указатель мыши представляет собой клип, расположенный в рабочей зоне

Слой Cursor

В слое Cursor (Указатель мыши) нужно создать клип, который будет применяться в качестве указателя мыши. В данном фильме это изображение руки с поднятым вверх большим пальцем, которое позаимствовано в одном из шрифтов, входящих в набор Kobalt Kartoon (вы можете найти его по адресу www.flashfonts.com). Вообще говоря, библиотеки нестандартных шрифтов — прекрасное место, где всегда можно найти изображения, которые вам подойдут в качестве специализированных указателей мыши. Приведенная ниже последовательность шагов описывает процесс создания клипа на основе символа, входящего в определенный шрифт (впрочем, можно использовать и обычный рисунок).

  1. Введите символ, который вы собираетесь использовать в качестве указателя мыши, при помощи инструмента Text (Текст). Откройте панель Text Options (Параметры текста) и выберите пункт Static Text (Статический текст) в раскрывающемся списке.
  2. Выделив созданный символ, выполните команду Modify > Break Apart (Модифицировать > Разбить) или воспользуйтесь комбинацией клавиш Ctrl+B (Windows) либо Cmd+B (Macintosh). Текстовый символ преобразуется в графическое изображение.
  3. Выделив рисунок, полученный на предыдущем шаге, нажмите клавишу F8, чтобы открыть диалоговое окно Symbols Properties (Свойства символа).
  4. Установите переключатель Movie Clip (Клип) и введите имя Cursor (Указатель мыши) в качестве метки клипа. Щелкните на кнопке О К, чтобы войти в режим редактирования символов, а затем щелкните на кнопке Scene 1 (Сцена 1), чтобы вернуться к главной киноленте.
  5. Выделите вновь созданный клип и откройте панель Instance (Экземпляр), нажав комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh). В поле Name (Имя) введите идентификатор thumb (Большой палец).

Имя, которое вы вводите в панели Instance (Экземпляр),становится именем экземп-ляра и может применяться в сценарии в качестве ссылки на данный клип.

  1. Выделите клип и введите один из приведенных ниже сценариев.

Назначение двух предлагаемых сценариев совершенно аналогично. Разница между ними состоит в том, что во втором сценарии применяется объект Movie-Clip. В объектно-ориентированной методике идентификации клипа используется стандартный идентификатор _root. Это возможно, так как наш клип находится на верхнем уровне иерархии. Если вам понадобится обратиться к клипу, не являющемуся корневым, можно задать абсолютный путь, который будет начинаться все тем же идентификатором _root и в котором должны последовательно перечисляться все промежуточные объекты в иерархической структуре клипа. Если вы пользуетесь объектно-ориентированными методиками, рекомендуется применять именно такую нотацию, поскольку она в большей степени отвечает духу ООП. Событие Load применяется для активизации обоих сценариев. Чтобы скрыть стандартный указатель в форме стрелки, применяется метод hide() объекта Mouse.

Первый сценарий:

onClipEvent (load) {

Mouse.hide();

startDrag (thumb, true);

}

Второй сценарий:

onClipEvent (load) {

Mouse.hide();

_root.thumb.startDrag(true):

}

Альтернативный указатель мыши ведет себя так же, как стандартный, в отношении щелчков на кнопках и других объектах. Указатель мыши следует поместить в верхнем уровне, чтобы он не оказался скрыт под объектом, на котором пользователь собирается произвести щелчок.

Слой Release

Скорее всего, рано или поздно вам понадобится возвратить на экран стандартный указатель мыши и удалить указатель мыши, созданный на основе клипа. Слой Release (Удаление) обеспечивает два способа избавления от клипа.- Первый из них реализуется в кадре 1 данного слоя, а второй — в кнопке.

  • Кадр 1. Приведенный ниже сценарий производит удаление клипа по нажатию клавиши Esc с помощью операции stopDrag(). При этом на экране отображается стандартный указатель мыши. Условная инструкция обращается к соответствующему методу объекта Key, чтобы выявить факт нажатия клавиши Esc. Если клавиша Esc действительно была нажата, производится прерывание операции перетаскивания (это дает возможность удалить нестандартный указатель мыши) и стандартный указатель появляется на экране при первом же щелчке кнопкой мыши. if ( Key. isDown( Key. ESCAPE)) { stopDrag(); }
  • Клип Release. Создайте клип, нарисовав в рабочей зоне овал, закрашенный черным цветом и окруженный внешним кольцом толщиной 6 пунктов. Чтобы продемонстрировать, что указатель мыши, сделанный из клипа, ведет себя при активизации сценариев кнопок подобно обычному указателю, мы используем в клипе сценарий, практически идентичный тому, который мы определили для кадра 1. Обратите внимание, что в обоих случаях инструкция stopDrag() применяется без параметров. Поскольку с помощью мыши нельзя перетаскивать несколько объектов одновременно, объект, который перетаскивается в данный момент, будет корректно освобожден без указания конкретного имени экземпляра.

ondipEvent (mouseDown) {

Mouse. show();

stopDrag ();

}

Слой Background

Фон представляет собой большой прямоугольник, покрывающий всю рабочую зону, и ряд концентрических кругов, в центре которых находится кнопка. Сообщение Click anywhere on the stage to get your cursor back (Щелкните в любом месте рабочей зоны, чтобы вернуть указатель мыши) выполнено особым шрифтом (в данном случае — шрифтом RocketGothic, взятым по адресу www.flashfonts.com.) Поскольку этого шрифта наверняка нет на большинстве компьютеров, надпись была преобразована в графическое изображение (для этого нужно нажать комбинацию клавиш Ctrl+B (Windows) либо Cmd+B (Macintosh)), раскрашена с помощью инструмента заливки и превращена в символ графики, чтобы обеспечить управляемость и сохранность надписи. На рис. 6.8 показан один из кадров фильма в проигрывателе Flash.

Рис. 6.8. Стандартный указатель мыши в форме стрелки заменен клипом, изображающим руку с поднятым большим пальцем

Объекты класса MovieClip

Объект MovieClip позволяет применять не только большинство операций, доступных в панели операций, но и ряд дополнительных. Применение объектов MovieClip и их методов позволяет создать более компактный и обычно более понятный код. Чтобы работать с этими объектами, не нужен конструктор; достаточно имени экземпляра клипа. Все имена объектов MovieClip рассматриваются как имена экземпляров.

Методы объекта MovieClip

Многие из перечисленных ниже методов будут рассмотрены в последующих уроках; а здесь просто приведен полный список методов, предусмотренных в объекте MovieClip, без каких бы то ни было пояснений. Большинство методов, которые мы рассматриваем в этой книге, чрезвычайно просты в использовании (например, gotoAndPlay()); другие методы будут подробно рассмотрены позже. Итак, объект MovieClip обладает следующими методами:

  • MCInstanceName.attachMovie();
  • MCInstanceName.duplicateMovieClip();
  • MCInstanceName.getBounds();
  • МСInstanceName.getBytesLoaded();
  • MCInstanceName.getBytesTotaH);
  • MCInstanceName.getURL();
  • MCInstanceName.globalToLocal());
  • MCInstanceName.gotoAndPlay();
  • MCInstanceName.gotoAndStop();
  • MCI nstanceName. hi tTest();
  • MCInstanceName.loadMovie();
  • MCInstanceName.loadVariables;
  • MCInstanceName.localToGlobal;
  • MCInstanceName.nextFrame();
  • MCInstanceName.play();
  • MCInstanceName.prevFrame();
  • MCInstanceName.removeMovieclip();
  • MCInstanceName.startDrag();
  • MCInstanceName.stop();
  • MCInstanceName.stopDrag();
  • MCInstanceName.swapDepth();
  • MCInstanceName.unloadMovie().

Адресация объекта MovieClip

В формате инструкций для объекта MovieClip применяется оператор . (точка); необходимо явным образом указать клип и его метод. Так, чтобы остановить выполнение операций в сценарии экземпляра клипа с именем Fred (Фред), следуе? использовать приведенную ниже инструкцию: _root.Fred.stop();

В уроке 9 вы увидите, как вместо этой инструкции можно применить операцию tellTarget(), использование которой предпочтительнее, поскольку она позволяет добиться большей ясности и лучше согласуется с принципами объектно-ориентированного программирования.

Выявление коллизий

Один из важнейших методов объекта MovieClip — это метод hitTest(), позволяющий выявлять коллизии клипов. Данный метод не имеет аналогов в списке операций, и его можно использовать исключительно в качестве метода объекта

MovieClip. Метод hitTest() может пригодиться в играх, в программном обеспечении интерактивных Web-сайтов и сайтов электронной коммерции. Этот метод может сопровождаться двумя различными наборами параметров. В простейшем случае указывается лишь целевой объект. К примеру, следующей условной инструкцией предписывается необходимость проверить факт существования коллизии между данным клипом и экземпляром клипа с именем fatCat.

If (this.hitTest(_root.fatCat)) {

_root.gotoAndPlay("whi skers");

}

Обратите внимание, что идентификатор _root используется здесь как для указания на целевой клип, так и для адресации киноленты целевого кадра с меткой whiskers (усы). В уроке 1 вы познакомились с новой нотацией — ключевым словом _root, которое пришло в пакете Flash 5 на смену символу /, применявшемуся в системе Flash 4.

Наряду с прямым указанием на целевой объект параметры метода hitTest() могут представлять его координаты. Координаты могут вводиться переменными или константами; они задаются в глобальном пространстве координат. Например, следующий сценарий должен осуществить проверку факта коллизии между текущим клипом и любым объектом с координатами Х=228 и Y=l 14. If (this.hitTest (228. 114, false)) { }

Второй вариант применения метода hitTest() позволяет выявлять коллизии любых объектов с заданными координатами, не указывая конкретного имени экземпляра клипа.

Пример фильма. Сталкивающиеся объекты

Фильм, содержащийся в файле planetCollide.fia, демонстрирует применение метода hitTest() при воспроизведении процесса столкновения неуправляемой ракеты с поверхностью планеты. В этом фильме 4 слоя:

  • Rocket (Ракета);
  • Planet (Планета);
  • Stars (Звезды);
  • Background (Фон).

На рис. 6.9 представлен начальный экран фильма. Как ракета, так и планета реализованы в фильме в виде клипов.

Приступив к работе над фильмом, прежде всего необходимо создать слои в том порядке, как они перечислены выше. Затем выделите кадр 35 и, не отпуская кнопку мыши, перетащите указатель вниз от слоя Rocket (Ракета) к слою Background (Фон). Нажмите клавишу F5, чтобы расширить фильм до 35 кадров.

Рис. 6.9. При наложении двух клипов необходимо провести проверку на возникновение коллизии

Слой Rocket

Клип с изображением ракеты представляет один из двух элементов, которые должны столкнуться на экране. Ракета должна врезаться в планету. Клип планеты содержит сценарий ActionScript, который должен обнаружить факт возникновения коллизии. При выявлении таковой ракета должна отскочить от планеты. Выхлоп ракеты реализован в виде анимированного клипа, находящегося на главной киноленте клипа ракеты.

Экземпляр клипа zoom

Нарисовав ракету и преобразовав ее изображение в клип нажатием клавиши F8 с последующей установкой переключателя Movie Clip (Клип), не забудьте ввести имя экземпляра в панели Instance (Экземпляр). В нашем случае используется имя экземпляра zoom (масштаб). Чтобы ракета летела к планете по прямой, нужно выполнить следующие действия.

  1. Создав клип ракеты и введя имя экземпляра, перетащите ракету к левому краю рабочей зоны, как показано на рисунке 6.9.
  2. Щелкните на кадре 25 и сделайте его ключевым, нажав клавишу F6. Перетащите с помощью мыши ракету таким образом, чтобы ее нос соприкоснулся с клипом планеты (см. текст сценария для кадра 25 ниже).
  3. Щелкните на кадре 1 и выполните команду Window > Panels > Frame (Окно > Панели > Кадр) или воспользуйтесь комбинацией клавиш Ctrl+F (Windows) либо Cmd+F (Macintosh), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Кадрирование) выберите вариант Motion (Движение). На киноленте должна появиться стрелка, направленная от кадра 1 к кадру 25 и служащая индикатором факта кадрирования.
  4. Вставьте ключевые кадры в кадрах 26 и 35. Переместите указатель воспроизведения в кадр 35 и перетащите ракету в верхний левый угол рабочей зоны.
  5. Щелкните на кадре 26 и выберите пункт Motion (Движение) в раскрывающемся списке Tweening (Кадрирование) панели Frame (Кадр). В раскрывающемся списке Rotate (Вращение) выберите вариант CW (По часовой стрелке) и введите число 8 в поле Times (Раз).

Кадр 25

Чтобы указать на тот факт, что вы собираетесь задать реакцию ракеты на возникновение коллизии, необходимо ввести сценарий остановки в соответствующем кадре. Выделите кадр 25 и введите в поле редактора сценариев показанную ниже строку. Если факт коллизии выявлен не будет, ракета просто остановится при соприкосновении с поверхностью планеты.

Stop();

Слой Planet

Планета представлена в фильме в виде круга с радиальной заливкой. Нарисуйте окружность, выделите ее и нажмите клавишу F8, чтобы преобразовать рисунок в клип. Введите имя экземпляра Stone (Камень) в панели Instance (Экземпляр). Кроме того, следует иметь в виду, что в данном слое располагается кадр, являющийся начальным кадром движения ракеты при ее отскакивании от планеты. Выполните описанные ниже действия.

  1. Щелкните на кадре 26 и нажмите клавишу F6. чтобы сделать этот кадр ключевым. Введите для этого кадра метку Bang (Удар) в поле Label (Метка) панели Frame (Кадр).
  2. Выполните команду Window > Common Libraries > Sounds (Окно > Общие библиотеки > Звуки), чтобы открыть библиотеку звуков. Выделите кадр 26 и перетащите в рабочую зону звук Bucket Hit (Удар по ведру) — после этого в раскрывающемся списке Sound (Звук) панели Sound (Звук) появляется пункт Bucket Hit; выделите кадр 26 и убедитесь, что на киноленте появился соответствующий значок.

В экземпляре клипа Stone (Камень) находится основа содержательной части фильма. В сценарии клипа устанавливается значение определенной в главной киноленте переменной collide. Если значение этой переменной не установить равным 1, сценарий кадра 25, определенный в слое Rocket (Ракета), просто остановит воспроизведение фильма. Только при столкновении ракеты с планетой, экземпляр которой носит имя stone, фильм перейдет к своему логическому продолжению.

onClipEvent (enterFrame) {

if (this.hitTest(_root.zoom)) {

_root.gotoAndPlay("bang");

}

}

Слой Stars

Нарисуйте белую звездочку. Выделите ее, нажмите клавишу Alt (Windows) или Option (Macintosh) и сделайте несколько копий рисунка методом перетаскивания; распределите эти изображения по всему пространству рабочей зоны. Можно также использовать метод копирования и вставки.

Слой Background

Уменьшите масштаб до 50 или 25 %. Выберите инструмент Rectangle (Прямоугольник) и закрасьте всю рабочую зону сплошным синим цветом. Если вы не уверены, что сумели охватить все пространство, для ввода точных координат можно использовать панель Info (Информация).

Рис. 6.10. После выявления факта коллизии ракета отскакивает от клипа с изображением планеты

Рисунок 6.10 иллюстрирует ситуацию, когда ракета, столкнувшись с планетой, отскакивает от нее, кувыркаясь по экрану.

Объекты класса Selection и текстовые поля

Объекты Selection относятся к сфере использования текстовых полей. Большинство методов, принадлежащих объектам Selection, предназначено только для чтения; эти методы обрабатывают содержимое текстового поля. Дли создания объекта Selection не нужен конструктор; все методы связываются с объектом с помощью оператора . (точка). Ниже приводится краткое описание методов объекта Selection.

  • Selection.getBeginlndex(). Данный метод возвращает позицию начала выделенного фрагмента текста (нумерация начинается с нуля).
  • Selection.getCaretlndex(). Этот метод возвращает позицию мерцающего клавиатурного курсора (нумерация начинается с нуля).
  • Selection.getEndlndex(). Возвращает позицию конца выделенного фрагмента.
  • Selection.getFocus(). Возвращает имя переменной уровня _levelN.
  • Selection.setFocus(). Этот метод устанавливает фокус ввода на переменную, имя которой связано с данным текстовым полем.
  • Selection.setSelection(). Данный метод позволяет установить как начальный, так и конечный индекс выделения.

Поскольку текстовые поля в пакете Flash 5 могут применяться для ввода данных, существует целый ряд различных способов применения объекта Selection и его методов. Образец фильма, который мы рассмотрим в следующем разделе, иллюстрирует один из этих способов.

Пример фильма. Использование объектов класса Selection в формах

Рассматриваемый фильм (файл SelectForms.fla на компакт-диске) использует информацию, содержащуюся в текстовых полях, для сообщения пользователю о том, с каким полем тот в данный момент работает, и о характере ожидаемой входной информации. В фильме применяются два слоя:

  • Forms (Формы);
  • Background (Фон).

На рисунке 6.11 изображен начальный экран фильма. Фактически вся содержательная часть фильма сосредоточена в пяти редактируемых текстовых полях для ввода данных и одном динамическом текстовом поле. Принцип работы данного фильма состоит в автоматическом определении сообщений, которые получает зритель, переключающийся между различными текстовыми полями. Постоянно обращаясь к методу Selection.getFocus(), сценарий первого кадра определяет, в каком текстовом поле в данный момент находится курсор. Если ни в одном из полей курсора нет, возвращается игнорируемое сценарием значение null. Добавьте слой, введите метку кадра и имя слоя, а затем вставьте новый кадр, предварительно выделив кадр 2.

Рис. 6.11. Сценарий кадра 1 определяет местонахождение курсора в том или ином текстовом поле

Слой Background

Слой Background (Фон) состоит из разноцветных прямоугольников, представляющих собой основу для размещения форм. Работу над фильмом следует начать именно с этого слоя, чтобы создать текстовые поля для ввода данных в более удобном режиме.

Слой Forms

Слой Forms (Формы) составляют пять текстовых полей, для которых выбран тип Input Text (Набираемый текст), и одно текстовое поле типа Dynamic Text (Динамический текст). В табл. 6.1 представлены имена переменных и основные характеристики указанных полей.

Таблица 6.1. Свойства текстовых полей и имена переменных

Имя переменной

Флажок Border/Bg

Способ выравнивания

Формат

1

Установлен

Полевому краю

Набираемый текст

2

Установлен

По левому краю

Набираемый текст

3

Установлен

Полевому краю

Набираемый текст

4

Установлен

Полевому краю

Набираемый текст

5

Установлен

Полевому краю

Набираемый текст

Instruct

Снят

По центру

Динамический текст

(без выделения)

Текстовые поля для ввода данных пронумерованы числами от 1 до 5, что соответствует порядку их проверки. Хотя обычно рекомендуется использовать осмысленные имена переменных, в данном случае более существенным является порядок следования полей, а не значимость их имен. При создании полей для ввода данных используйте шрифт Verdana размером 12 пунктов. Динамическое текстовое поле предназначено для вывода инструкций по заполнению полей для ввода; для него следует выбрать шрифт Verdana размером 36 пунктов.

Сценарий кадра 1 осуществляет поиск фокуса ввода (определяет, в каком текстовом поле в данный момент находится курсор) с помощью метода Selec-tion.getFocus(); для хранения значения, возвращенного этим методом, используется переменная а. Указанный метод возвращает имя переменной в сочетании с идентификатором _level0. Когда пользователь переключается с помощью клавиши табуляции между текстовыми полями, переменная а получает новое значение и обрабатывается в условной инструкции, которая обеспечивает вывод различных сообщений в текстовом поле, связанном с переменной instruct.

а = Selection.getFocus();

if (a == "_level0.l") {

instruct = "Name Please";

} else if (a == "_level0.2") {

instruct = "Address Please":

} else if (a == "_level0.3") {

instruct = "City Please";

} else if (a == "_level0.4") {

instruct = "State Please";

} else if (a == "_level0.5") {

instruct = "Zip Code Please"; }

Хотя приведенный выше сценарий достаточно короток, он позволяет проиллюстрировать один из методов работы с экранными объектами, а также механизм применения объекта, который специально предназначен для обработки текстовых полей. На рис. 6.12 показан экран фильма с заполненной формой; курсор находится в последнем поле формы.

Рис. 6.12. Пользователь получает от сценария различные инструкции в зависимости от текущего местонахождения курсора

Реализация в фильмах технологии перетаскивания

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

Пример фильма. Реализация перетаскивания

В файле Duster.fla на прилагаемом к настоящей книге компакт-диске вы найдете несложный фильм, в котором используются два слоя; один из них находится на главной киноленте, а второй — на киноленте клипа:

  • MainTimeLine (Главная кинолента);
  • Button (Кнопка) — находится в клипе dragMe (Перетащи меня).

Начало работы над фильмом

Чтобы применить в фильме технологию перетаскивания объектов мышью, вам понадобится клип с экземпляром символа типа Button. В сценарии данной кнопки размещаются операции, позволяющие пользователю нажать кнопку мыши в пределах кнопки, находящейся в клипе, и перетаскивать этот клип по экрану. Перемещение клипа прекращается, когда пользователь отпускает кнопку мыши. Описанный в данном разделе фильм иллюстрирует способы применения методики перетаскивания в фильмах в формате Flash (вы сможете очищать экран от пыли; и вам позавидуют все друзья). На рис. 6.13 показан процесс создания клипа в режиме редактирования символов. Пользователь будет видеть на экране только клип, поскольку это единственный видимый объект в нашем фильме.

Рис. 6.13. Клип представляет собой видимый компонент фильма; сценарий ActionScript определен в кнопке, содержащейся в этом клипе

Слой MainTimeLine

Создаваемый фильм чрезвычайно прост и предназначен лишь для иллюстрации методики перетаскивания. В рабочей зоне фильма содержится прямоугольник, условно представляющий тряпку, а также графический вариант надписи Dust your screen! (Сотрите пыль с экрана).

  1. Создав новый фильм, выполните команду Insert > New Symbol (Вставка > Новый символ). На экране появится диалоговое окно Symbol Properties (Свойства символа).
  2. Установите переключатель Movie Clip (Клип) и введите имя dragMe (Перетащи меня). Щелкните на кнопке ОК. При этом происходит переход в режим редактирования символов.
  3. Нарисуйте прямоугольник с неровными краями. Выделите его и нажмите клавишу F8, чтобы преобразовать рисунок в символ. Для достижения эффекта неровности воспользуйтесь средствами панели Stroke (Обводка), выбрав волнистую линию.
  4. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Button (Кнопка) и назовите новый символ dragBut. Щелкните на кнопке ОК. (Вы по-прежнему работаете в режиме редактирования символов.)
  5. Выделите вновь созданную кнопку и перейдите в экспертный режим редактора сценариев. Введите один из приведенных ниже сценариев — оба они делают одно и то же.

Не забудьте, что в экспертном режиме следует тщательно следить за соблюдением всех необходимых формальностей в тексте сценария. Если вы пока «неуютно» чувствуете себя в экспертном режиме, можете по-прежнему пользоваться обычным. На рис. 6.13 представлен момент работы над сценарием в обычном режиме при вводе параметров для инициирования операции перемещения.

on (press) {

startDrag (_root.cloth);

}

on (release) {

stopDrag ();

}

Вторую строку можно заменить инструкцией startDrag (this);

  1. Щелкните на кнопке Scene 1 (Сцена 1), чтобы выйти из режима редактирования символов и вернуться к работе с главной кинолентой. Введите надпись Dust Your Screen! (Сотрите пыль с экрана) рядом с кнопкой, но не на самой кнопке.
  2. Выделите сделанную надпись и нажмите клавишу F8, чтобы преобразовать надпись в символ графики. Установите переключатель Graphic (Графика) в диалоговом окне Symbol Properties (Свойства символа) и введите имя dustme. Строго говоря, преобразовывать текстовые символы в символы графики не обязательно, но желательно, чтобы зрители, на компьютерах которых отсутствует шрифт для текстовых символов, смогли видеть надпись такой, какой ее задумал автор.
  3. Работа над объектами и сценарием клипа закончена. Теперь воспользуйтесь комбинацией клавиш Ctrl+L (Windows) либо Cmd+L (Macintosh), чтобы открыть окно Library (Библиотека), в котором должны присутствовать три созданных символа.
  4. Перетащите символ клипа из окна Library (Библиотека) в рабочую зону главной киноленты. Выделите клип и нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы вызвать на экран панель Instance (Экземпляр). Введите в поле Name (Имя) идентификатор cloth в качестве имени экземпляра клипа.

ВНИМАНИЕ

Ввод имени экземпляра обязателен. Без этого вы не сможете обращаться к клипу в текстах сценариев.

Сохраните программу и протестируйте ее. Наведите указатель мыши на изображение кнопки и перетаскивайте клип по экрану (проще говоря, сотрите пыль с экрана). На рис. 6.14 показано, как тряпка стирает пыль с экрана.

Рис. 6.14. Единственный видимый графический элемент клипа — это кнопка в форме тряпки, которую можно перетаскивать по экрану

Проект. Наблюдение за изменением координат указателя мыши

Разместив в рабочей зоне фильма координаты указателя мыши по осям X (горизонтальный) и Y (вертикальный), вы всегда сможете точно знать, где он

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

  • Position (Позиция) со следующими объектами:
    • клип Text (Текст);
    • поля Show X (Вывести координату X) и Show Y (Вывести координату Y);
  • DragClip (Перетаскивание клипа) со следующими объектами:
    • клип Track (Путь);
    • рисунок Bug (Насекомое).

     

В данном примере иллюстрируется способ помещения в кадр сценариев, обеспечивающих перетаскивание объектов. (Автор предпочитает размещать сценарии перетаскивания в кнопках, но в некоторых программах такие сценарии приходится делать в кадрах.) Кроме того, вы узнаете, как можно ограничить область перетаскивания в фильме. Вы можете запретить перетаскивание объектов по всему экрану и определить прямоугольник, в рамках которого перетаскивание будет разрешено. Начальный экран фильма и его объекты представлены на рис. 6.15.

Рис. 6.15. Два клипа, рисунок (экземпляр символа графики) и два текстовых поля — объекты, используемые в этом фильме

Слой Position

Слой Position (Позиция) содержит клип, в котором хранятся данные о расположении указателя мыши на экране.

Клип Text и поля Show X и Show Y

Для создания клипа прежде всего необходимо выполнить следующие действия.

  1. Создайте новый клип и введите имя Text (Текст) в диалоговом окне Symbol Properties (Свойства символа). Щелкните на кнопке ОК, чтобы перейти в режим редактирования символов.
  2. В режиме редактирования символов расположите в рабочей зоне два текстовых поля и выберите вариант Dynamic Text (Динамический текст) в панели Text Options (Параметры текста). Установите параметры в соответствии с данными, приведенными в табл. 6.2; обратите особое внимание на имена переменных.

Таблица 6.2. Имена и свойства текстовых полей

Имя переменной

Флажок Border/Bg

Способ выравнивания

Однострочное

Возможность выделения
hor Снят По правому краю Да Нет

vert

Снят

По правому краю

Да

Нет

 

  1. Откройте окно Library (Библиотека) и перетащите экземпляр клипа Text (Текст) в рабочую зону.
  2. Выделив клип, нажмите комбинацию клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр). Введите имя клипа pos. По этому имени вы будете обращаться к клипу в сценарии кадра 1.

Кадр 1

Разместите следующий сценарий в первом кадре слоя Position (Позиция). Обратите внимание на связывание идентификатора главной киноленты (_root), имени клипа (pos) и имен переменных клипа (hor и vert) с помощью оператора . (точка).

_root.pos.hor = "X: "+_xmouse;

_root.pos.vert = "Y: "+_ymouse;

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

Слой DragClip

Как сам перемещаемый клип, так и сценарий, обеспечивающий перетаскивание этого объекта, размещаются в слое DragClip (Перетаскивание клипа).

Клип Track и рисунок Bug

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

  1. Выполните команду Insert > New symbol (Вставка > Новый символ). Установите переключатель Movie Clip (Клип) и введите имя Track (Путь).
  2. В режиме редактирования символов нарисуйте божью коровку и выделите ее.
  3. Нажмите клавишу F8, чтобы преобразовать рисунок в символ. Установите переключатель Graphic (Графика) в диалоговом окне Symbol Properties (Свойства символа) и введите имя LadyB (Божья коровка).
  4. Щелкните на значке Scene 1 (Сцена 1), чтобы вернуться к работе с главной кинолентой.
  5. Перетащите экземпляр клипа с изображением божьей коровки из окна Library (Библиотека) в рабочую зону.
  6. Введите имя trackme (Тащи меня) в поле Name (Имя) панели Instance (Экземпляр).

Кадр 1

Введите в первом кадре слоя DragClip (Перетаскивание клипа) следующий сценарий:

startDrag (_root.trackme. true. 100, 50, 300, 200);

Mouse. hide();

В этом сценарии указывается имя клипа, который будет перетаскиваться мышью (trackme), и осуществляется установка значений четырех параметров. Параметры, представленные на рис. 6.15, четко определяют границы, в пределах которых возможно перемещение клипа относительно левого, правого, верхнего и нижнего краев экрана. Начало координат находится в левом верхнем углу экрана. Кроме того, обратите внимание на установленный флажок Lock mouse to center (Закрепить указатель мыши в центре) — в результате центр клипа располагается в середине объекта, а не по адресу, заданному координатами размещения указателя мыши в начале операции перетаскивания. На рис. 6.15 также видны установленный флажок Costrain to rectangle (Ограничить прямоугольником) и четыре соответствующих ему параметра, удерживающих указатель в форме божьей коровки в отведенных пределах.

Проект. Перетаскивание товаров в покупательскую тележку

Следующий рассматриваемый нами проект (фильм, находящийся в файле shoppingCart.fla на компакт-диске) демонстрирует методику создания несложного сайта электронной коммерции с применением технологии перетаскивания. Для создания более сложного, открытого интерфейса нам потребуются дополнительные функции, действия и свойства. Вы сможете самостоятельно создать подобный фильм после тщательного изучения материала уроков 7 и 8. Познакомившись с этой информацией, можно вернуться к нашему примеру с покупательской тележкой и значительно расширить его функциональные возможности. В фильме используются следующие слои:

  • Shopping Cart (Покупательская тележка);
  • Fruits (Фрукты) со следующими клипами:
    • apple (яблоко) с кнопкой butApple (Яблоко);
    • pear (груша) с кнопкой butPear (Груша);
    • banana (банан) с кнопкой butBanana (Банан);
    • orange (апельсин) с кнопкой butOrange (Апельсин);
  • Cash Register (Кассовый аппарат);
  • Background (Фон).

На рис. 6.16 вы можете познакомиться со структурой слоев и основными параметрами фильма, демонстрирующего использование покупательской тележки. В этом фильме пять клипов: четыре — для различных видов фруктов и пятый — для покупательской тележки. (Покупательская тележка на рисунке пока не задействована, но она определена как клип, и в дальнейшем вы сможете добавить к фильму дополнительные функции работы со свойствами свойств и инструкции.) В данном фильме вы будете работать лишь с четырьмя клипами. Каждый из них содержит экземпляр кнопки, для которой определен соответствующий сценарий. Текстовое поле используется в качестве окошка кассового аппарата для подсчета суммы покупки, которая постепенно формируется по мере перетаскивания пользователем фруктов в покупательскую тележку.

Рис. 6.16. Начальный экран фильма, в котором применяется покупательская тележка

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

Слой Background

Прежде всего необходимо подготовить слой Background (Фон). В этом слое нет никаких сценариев. Вы наверняка сможете самостоятельно нарисовать все необходимые элементы, познакомившись с рис. 6.16 и 6.17. Фрукты и покупательская тележка добавляются к фильму в других слоях.

Рис. 6.17. После каждой операции перетаскивания текущая сумма помещается в переменную register, связанную с текстовым полем на экране

  1. Выполните команду Modify > Movie (Модифицировать > Фильм) и щелкните на кнопке определения цвета фона, чтобы получить на экране окно выбора цветов. Выберите светло-желтый цвет.
  2. С помощью соответствующего инструмента нарисуйте темно-коричневый прямоугольник со светло-коричневой серединой. Затем нарисуйте темно-коричневые линии, пересекающие прямоугольник, чтобы создать «ячейки» для фруктов.
  3. После этого воспользуйтесь комбинацией клавиш Ctrl+K (Windows) либо Cmd+K (Macintosh), чтобы открыть панель Align (Выравнивание). Выделите все разделительные линии и равномерно распределите их по прямоугольнику средствами панели Align.
  4. Нарисуйте в центре экрана еще один темно-коричневый прямоугольник, который будет служить рамкой для поля Cash Register (Кассовый аппарат). Само это поле мы добавим к фильму позже.
  5. Наконец, введите надписи: «вывеску» Fruit Market (Фруктовый рынок), цены на фрукты и надпись Total (Сумма) над окошком кассы.

Слой Cash Register

Чтобы на экране отображалась текущая сумма покупки, вставьте текстовое поле в слой Cash Register (Кассовый аппарат). Используйте для этого динамического текстового поля параметры, представленные в табл. 6.3.

Таблица 6.3. Имя переменной и свойства текстового поля

Имя переменной

Флажок Border/Bg

Способ выравнивания

 Однострочное

Возможность выделения

register

Снят

По правому краю

 Да

Нет

Поместите текстовое поле внутри коричневого прямоугольника, расположенного под надписью Total (Сумма) в рабочей зоне фильма. При желании вы можете нарисовать настоящий кассовый аппарат.

Слой Fruits

Основная часть программы и все сценарии ActionScript фильма находятся в слое Fruits (Фрукты). Каждый вид фруктов представляется в фильме отдельным клипом; клипы содержат кнопки в форме фруктов; сценарии ActionScript определяются в этих кнопках. Текст сценариев весьма прост. После каждой операции перетаскивания увеличивается значение переменной, содержащей накопленную сумму. Текущее значение суммы помещается в переменную register, связанную с текстовым полем. Таким образом, после выполнения операции перетаскивания пользователь видит в окошке кассы изменившуюся сумму. На рис. 6.17 показано, как выглядит экран после перетаскивания в тележку трех фруктов.

Следующую последовательность шагов нужно выполнить для каждого из четырех фруктов. Затем введите приведенные ниже сценарии кнопок, расположенных в клипах.

  1. Выполните команду Insert > New Symbol (Вставка > Новый символ). На экране появится диалоговое окно Symbol Properties (Свойства символа).
  2. Установите переключатель Movie Clip (Клип) и введите имя клипа (для клипов следует использовать имена apple (яблоко), pear (груша), banana (банан) и orange (апельсин)).
  3. После этого вы оказываетесь в режиме редактирования символов. Создайте или импортируйте готовый рисунок соответствующего фрукта. При этом можно воспользоваться каким-либо графическим пакетом и импортировать рисунок либо применить инструменты рисования, предлагаемые в наборе инструментов.
  4. Выделите рисунок и нажмите клавишу F8, чтобы преобразовать изображение в символ. В диалоговом окне Symbol Properties (Свойства символа) установите переключатель Button (Кнопка) и введите имя кнопки (butApple, butPear и т. д.).
  5. Не выходя из режима редактирования символов, выделите один из символов и откройте окно панель операций с помощью команды Window > Panels > Actions (Окно > Панели > Операции) или воспользовавшись комбинацией клавиш Ctrl+Alt+A (Windows) либо Cmd+Option+A (Macintosh). Тексты сценариев приведены ниже.

Клип apple и кнопка butApple

on (press) {

startDrag (_root.apple):

}

on (release) {

stopDrag ();

_root.accum+=1.12;

_root.register = "$"+_root.accum;

}

Клип pear и кнопка butPear

on (press) {

startDrag (_root.pear);

}

on (release) {

stopDrag ();

_root.accum+=1.30;

_root.register = "$"+_root.accum;

}

Клип banana и кнопка butBanana

on (press) {

startDrag (_root.banana);

}

on (release) {

stopDrag ();

_root.accum+=.88:

_root.register = "$"+_root.accum;

}

Клип orange и кнопка butOrange

on (press) {

startDrag (_root.orange);

on (release) {

stopDrag ():

_root.accum+=l.25;

_root.register = "$"+_root.accum;

}

  1. Закончив создание клипов, выполните команду Window > Library (Окно > Библиотека) или воспользуйтесь комбинацией клавиш Ctrl+L (Windows) либо Cmd+L (Macintosh), чтобы открыть окно Library (Библиотека).
  2. Перетащите экземпляры всех клипов с изображением фруктов из окна Library (Библиотека) в соответствующие фруктовые лотки на экране. Ни в коем случае не перетаскивайте экземпляры кнопок отдельно от экземпляров кли-пов\ Кнопки находятся внутри клипов и автоматически переносятся на экран, когда вы переносите клипы.
  3. Выполните команду Window > Panels > Instance (Окно > Панели > Экземпляр) или воспользуйтесь комбинацией клавиш Ctrl+I (Windows) либо Cmd+I (Macintosh), чтобы открыть панель Instance (Экземпляр). Последовательно выделяйте клипы, вводя для каждого из них соответствующее имя экземпляра в поле Name (Имя) панели Instance: apple (яблоко), pear (груша), banana (банан) и orange (апельсин).

ВНИМАНИЕ

Если вы не заполните поле имени или введете имя неправильно, фильм будет работать некорректно.

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

Слой Shopping Cart

В слое Shopping Cart (Покупательская тележка) достаточно разместить изображение тележки. С помощью инструментов рисования вы можете создать любую тележку на свой вкус. Если вы создадите для тележки клип, то в дальнейшем, познакомившись с новыми функциями и операциями, предназначенными для работы со свойствами, сможете вернуться к рассмотренному выше фильму и доработать его. Кроме того, можно создать для покупательской тележки символ кнопки, что позволит определить для нее сценарий ActionScript. Назовите клип тележки cart (тележка).

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

Что нового мы узнали?

В этом уроке мы научились...

  • Обрабатывать события мыши.
  • Обрабатывать события клавиатуры.
  • Обрабатывать события клипа.
  • Использовать объекты.
  • Использовать клип для имитации указателя мыши.
  • Выявлять коллизии.
  • Реализовать в фильмах технологию перетаскивания.
  • Создавать простейшие фильмы для сайтов электронной коммерции.

Знаете ли Вы, что технология программирования, Инжиниринг ПО, Software engineering - это дисциплина, изучающая технологические процессы программирования и порядок их прохождения. (см. онлайн-курс "Технология программирования")

НОВОСТИ ФОРУМА

Форум Рыцари теории эфира

Рыцари теории эфира
 10.11.2021 - 12:37: ПЕРСОНАЛИИ - Personalias -> WHO IS WHO - КТО ЕСТЬ КТО - Карим_Хайдаров.
10.11.2021 - 12:36: СОВЕСТЬ - Conscience -> РАСЧЕЛОВЕЧИВАНИЕ ЧЕЛОВЕКА. КОМУ ЭТО НАДО? - Карим_Хайдаров.
10.11.2021 - 12:36: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от д.м.н. Александра Алексеевича Редько - Карим_Хайдаров.
10.11.2021 - 12:35: ЭКОЛОГИЯ - Ecology -> Биологическая безопасность населения - Карим_Хайдаров.
10.11.2021 - 12:34: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> Проблема государственного терроризма - Карим_Хайдаров.
10.11.2021 - 12:34: ВОЙНА, ПОЛИТИКА И НАУКА - War, Politics and Science -> ПРАВОСУДИЯ.НЕТ - Карим_Хайдаров.
10.11.2021 - 12:34: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вадима Глогера, США - Карим_Хайдаров.
10.11.2021 - 09:18: НОВЫЕ ТЕХНОЛОГИИ - New Technologies -> Волновая генетика Петра Гаряева, 5G-контроль и управление - Карим_Хайдаров.
10.11.2021 - 09:18: ЭКОЛОГИЯ - Ecology -> ЭКОЛОГИЯ ДЛЯ ВСЕХ - Карим_Хайдаров.
10.11.2021 - 09:16: ЭКОЛОГИЯ - Ecology -> ПРОБЛЕМЫ МЕДИЦИНЫ - Карим_Хайдаров.
10.11.2021 - 09:15: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Екатерины Коваленко - Карим_Хайдаров.
10.11.2021 - 09:13: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ - Upbringing, Inlightening, Education -> Просвещение от Вильгельма Варкентина - Карим_Хайдаров.
Bourabai Research - Технологии XXI века Bourabai Research Institution