Практическое упражнение 11.3: Работа с реакциями на события
В этом упражнении вы создадите меню, в котором пользователь может выбирать цветок, для того чтобы больше о нем узнать. Программа затем переходит на страницу с информацией о выбранном цветке. Пользователь может затем вернуться в меню для выбора следующего цветка или выйти из программы.
В упражнении создается структура меню из последовательности кнопок, предлагающих выбрать тему (цветок). Сделанный выбор укажет головке, на какой маркер передвинуться, чтобы получить информацию о конкретном типе цветка.
Этот тип навигации отличается от навигационного средства из предыдущего упражнения с показом слайдов/Вместо того чтобы переходить к следующему или предыдущему маркеру по ранее применяемой нами линейной схеме, темы теперь могут выбираться в любом порядке, и программа будет переходить к выбранной теме (маркеру) с помощью реакции на событие.
Вы также познакомитесь с реакцией «ролловер». Эта реакция показывает, что кнопка активна, если изменить внешний вид кнопки при наведении на нее курсора.
Когда пользователь перемещает курсор над кнопкой , то элемент труппы кнопки меняется на новый элемент труппы. Например, графическое изображение нормального «верхнего» состояния кнопки может быть заменено графическим изображением «ролловера», в котором вокруг кнопки отображается подсветка. Когда курсор выходит из области кнопки, то вновь появляется первоначальный элемент труппы.
Таким же образом когда кнопку мыши нажимают (событие on mouseDown), то элемент труппы кнопки меняется на элемент труппы, отображающий «нижнее» состояние. Изменение элемента труппы произошло в результате работы скрипта, вызванного обработчиком события. Ниже перечислены обработчики событий, которые могут быть использованы для кнопок навигации.
- on mouseEnter: Курсор входит в спрайт.
- on mouseLeave: Курсор выходит из спрайта.
- on mouseDown: Кнопка мыши нажата.
- on mouseUp: Кнопка мыши отпущена (из нажатого состояния).
Эти четыре обработчика событий являются средством создания различных кнопочных меню. При обработке одного из этих событий скрипт Lingo подает команду Director'y, например, установить кнопку в состояние «ролловер» или перейти к определенному маркеру.
Для этого упражнения создана реакция на событие, содержащая скрипт Lingo и обеспечивающая необходимые функции кнопок меню. Эта реакция на событие предложит вам выбрать состояния кнопки (верхнее, нижнее и «ролловер») и выбрать маркер, к которому должна передвинуться головка.
В один спрайт могут быть добавлены несколько реакций на события, обеспечивающие несколько функций. Реакции на события из панели Library часто содержат несколько реакций, и при добавлении библиотечной реакции обеспечиваются сразу несколько функций. Реакция, добавляемая в этом упражнении, будет требовать от вас только выбора нескольких свойств из ниспадающих меню.
Вам не нужно будет работать со скриптом Lingo. Тем не менее, вы должны знать, как выглядит этот скрипт. Скрипт, используемый для изменения состояний кнопки, выглядит следующим образом.
on mouseDown me
Sprite(me.Spritenum).member=buttonDown
end
Давайте посмотрим, из чего состоит этот скрипт, on mouseDown является событием (вызываемым мышью пользователя), которое запускает скрипт. Sprite(me.Spritenum).member является фразой, сообщающей Director'y, что элемент труппы текущего спрайта будет меняться на другой элемент труппы. Другими словами, элемент труппы текущего спрайта будет становиться новым элементом труппы.
buttonDown является переменной (местом памяти), в которой вы будете определять с помощью ниспадающего меню, какое графическое изображение будет в ней размещено. buttonDown будет равно элементу труппы, обеспечивающему «нижнее» состояние кнопки.
Подобный же скрипт предусмотрен для обработчиков событий on mouseEnter и on mouseLeave, изменяющих элементы труппы для соответствующих состояний. При использовании обработчика события on mouseUp подобный этому скрипт позволяет присвоить имя маркеру, к которому кнопка будет обеспечивать переход.
Рассмотрим пример
Давайте посмотрим на завершенное упражнение, чтобы вы лучше поняли, что вам предстоит создать.
1. Измените расположение различных панелей, для того чтобы было все видно.. Вы можете щелкнуть по кнопке Hide/Show Effects Channels в партитуре, чтобы спрятать каналы эффектов и получить больше пространства на экране вашего компьютера.
2. В Control Panel щелкните по кнопке Rewind. Щелкните по кнопке Play.
3. Передвиньте мышь на одну из кнопок. Обратите внимание, что кнопка стала ярко-голубой, то есть перешла в состояние «ролловер». Этот ярко-голубой цвет заменится цветом нормального «верхнего» состояния кнопки, когда вы уберете мышь с кнопки.
4. Выберите одну из кнопок на экране меню. Головка воспроизведения переместится из экрана меню на страницу с темой (на маркер в партитуре), связанной с выбранной вами кнопкой.
5. Щелкните по кнопке Menu на тематической странице, чтобы перейти назад в меню. Выберите другую тему.
6. Посмотрите, как устроена партитура. Каналы в первых пяти кадрах создают структуру меню. Программа состоит из фонового графического изображения и шести кнопок меню. Эти кнопки действуют как средство навигации по остальной части программы. К каждой кнопке подключена реакция на событие. Реакция состоит из ряда скриптов Lingo, обеспечивающих поведение кнопки в определенной манере.
7. После выбора тематической кнопки посмотрите, что делается в партитуре.
8. Когда вы закончите, перейдите к следующему материалу.
Что должно получиться на экране
На рис. 11.29 показано, что будет видно на сцене, когда упражнение будет выполнено .
Рис. 11.29. Сцена завершенного упражнения
Что должно получиться за сценой
На рис. 11.30 показано, как будет выглядеть партитура после выполнения упражнения.
Рис. 11.30. Партитура завершенного упражнения
Пошаговые инструкции
1. Мы начнем с открытия файла, содержащего нужные нам элементы.
а) Выберите File | New.
2. Выберите File | Save As и поместите ваш новый файл в папку с именем Save Work на вашем жестком диске. Назовите файл MyFlowers.dir.
3. Если окно Cast не открыто, то откройте его, выбрав Window | Cast. В нем находятся элементы, необходимые вам для построения структуры меню.
4. Если партитура не открыта, то откройте ее, выбрав Window | Score. Изучите партитуру. В ней имеется шаблон. Это - последовательность маркеров, указывающих на каждую новую страницу с информацией. Первый маркер указывает на экран меню. На сцене размещены кнопки, но реакций на события пока нет.
5. Щелкните по спрайту (кнопке) Roses в партитуре в кадре 1 канала 2.
6. Выберите элемент труппы Menu Button Behavior. Это реакция на событие для кнопок меню.
7. Перетащите элемент труппы Menu Button Behavior из окна Cast в спрайт (кнопку) Roses в партитуре (кадр 1 канала 2) и опустите его прямо наверх кнопки.
8. Откроется диалоговое окно Parameters, предлагающее вам выбрать свойства для реакции.
а) В поле Up Button по умолчанию уже установлены настройки для текущего элемента труппы спрайта roses up и мы оставим их, как они есть.
б) В поле Down Button откройте ниспадающее меню и выберите элемент труппы roses down.
в) В поле Highlite Button (Подсветка Кнопки) откройте ниспадающее меню и выберите элемент труппы roses roll.
г) В поле GoTo Marker (Перейти К Маркеру) откройте ниспадающее меню и выберите маркер roses.
д) Ваше диалоговое окно Parameters должно выглядеть, как показано на рис. 11.31.
Рис. 11.31. Диалоговое окно Parameters для реакции на событие roses
е) Щелкните по кнопке ОК, чтобы закрыть окно. У вас теперь различные элементы труппы связаны с различными состояниями кнопки меню Roses.
9. Давайте попробуем еще один способ подключения имеющейся реакции на событие к спрайту.
а) Щелкните по второй кнопке Tulips в меню сцены.
б) Щелкните по информационной кнопке для реакции на событие в меню информации о свойствах спрайта для выбранной на сцене кнопки Tulips, как показано на рис. 11.32. Если накладной экран для спрайта не активен, то выберите View | Sprite Overlay | Show Info (Вид | Наложить Спрайт | Показать Информацию).
Рис. 11.32. Кнопка информации о реакции на событие на накладном экране спрайта
в) Откроется Property Inspector (справа на экране). Выберите вкладку Behavior в Property Inspector.
г) Щелкните по кнопке Behavior (по вкладке Behavior), как показано на рис. 11.33, и выберите в ниспадающем меню опцию Menu Button Behavior. В меню будут показаны все реакции, размещенные в каждом элементе труппы, входящем в ваш проект.
Рис. 11.33. Кнопка Behavior Popup и вызываемое ею ниспадающее меню
д) Откроется диалоговое окно Parameters. Установите в его полях следующие опции.
- Up Button: tulips up.
- Down Button: tulips down.
- Highlite Button: tulips roll.
- GoTo Marker: tulips.
е) Теперь ваше диалоговое окно Parameters должно выглядеть, как показано на рис. 11.34. Щелкните по кнопке ОК, чтобы закрыть это окно.
Рис. 11.34. Диалоговое окно Parameters для реакции tulips
ж) Если вам когда-нибудь понадобится изменить первоначально установленные вами параметры, то вы всегда можете к ним вернуться, выделив нужную реакцию на события в инспекторе Behavior в панели Property Inspector, как показано на рис. 11.35.
Рис. 11.35. Выделенная реакция в инспекторе Behavior
з) Щелкните по кнопке Parameters, показанной на рис. 11.36, чтобы открыть окно с параметрами. При этом откроется то же самое окно Parameters, которое вы использовали для первоначальной установки свойств элемента труппы. Вы теперь можете легко изменить любой нужный вам элемент труппы. (Для того чтобы закрыть окно Parameters, не внося изменений, просто щелкните по кнопке Cancel.)
Рис. 11.36. Кнопка Parameters на вкладке Behavior
10. С помощью любого из только что изученных вами способов (либо в шагах 6-8, либо в шаге 9) подключите элемент труппы Menu Button Behavior к остальным пяти кнопкам и выберите соответствующие свойства для состояний кнопок и необходимый маркер для каждой кнопки.
11. Сохраните вашу работу в папке SaveWork.
12. Вы почти закончили. Теперь осталась лишь функция, обеспечивающая средство перемещения из каждой тематической страницы назад в экран меню.
13. Щелкните по кнопке Menu в кадре 10 канала 2 партитуры (под маркeром Roses). Эта кнопка возвращает пользователя в экран меню, посылая головку к маркеру Menu. Обратите внимание, что этот спрайт растянут от маркера Roses (в кадре 10) до конца последнего маркера Lilies (в кадре 69). Вам, может быть, нужно будет прокрутить партитуру вправо, чтобы увидеть последний кадр. Эта кнопка Menu должна иметь одну и ту же реакцию в каждой тематической странице и посылать головку назад к маркеру Menu. Как вы видите, мы используем этот единственный спрайт для возвращения в меню из любой тематической страницы.
14. Подключите элемент труппы Menu Button Behavior к кнопке Menu, используя любой из изученных способов. Выберите необходимые свойства для состояний кнопки и соответствующий маркер.
15. Сохраните вашу работу в папке Save Work.
16. Щелкните по кнопке Play в Control Panel. Выберите кнопку темы в меню. Вернитесь обратно в меню. Попробуйте все остальные тематические кнопки.
17. Если ваша программа не работает должным образом, то внимательно исследуйте каждую кнопку для того, чтобы убедиться в правильности подключенной к ней реакции на событие.
Примите поздравления! Вы создали интерактивную обучающую программу, позволяющую пользователю выбирать интересующую его тему и затем просматривать информацию по этой теме. После того как пользователь просмотрит конкретную тему, он может вернуться в меню и выбрать другую тему.
С помощью методов, приведенных в упражнениях этой главы, вы можете добавлять дополнительные страницы в каждую тему. Затем вы можете, добавить маркеры в тематическую область и кнопки Forward и Backup для навигации.
