Macromedia Director MX - практическое применение



Практическое упражнение 11.1: Работа с маркерами


Подсказка

Маркер используется для сообщения Director'y расположения определенного кадра, и Director может передвинуть головку в этот определенный кадр.


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

В этом упражнении будет использовано событие on mouseDown для перемещения головки в определенное место партитуры, обозначенное маркером. Затем вы создадите для пользователя кнопки управления Forward (Вперед) и Backup (Назад). Вы также создадите программу показа слайдов, предоставляющую пользователю возможность продвигаться по ней, что будет напоминать перелистывание страниц книги.

Для структуры такой программы показа требуется последовательность маркеров, определяющая позиции смены сцены. Вы научитесь в этом упражнении создавать маркеры. Маркеры будут помещаться в канал Marker и будут называться Start, Page One, Page Two и Page Three (Старт, Первая Страница, Вторая Страница и Третья Страница).

Обратите внимание на то, что в канале 1 имеется общий элемент фона. В канале 2 содержатся графические изображения слайдов и видно, какой слайд отображается в данный момент. Канал Script будет содержать реакцию на событие с обработчиком события кадра on enterFrame и командой Lingo go to the frame.

В каналах 3 и 4 содержатся кнопки Forward и Backup. Эти навигационные кнопки появляются в партитуре, как и требуется, при показе каждого слайда.

Для маркера Start нужна только кнопка Forward, так как из первой страницы некуда возвращаться. Таким же образом кнопка Forward отсутствует у маркера последней страницы (Page Three).

Рассмотрим пример

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

1. Измените расположение различных панелей, для того чтобы было все видно.

2. В Control Panel щелкните по кнопке Rewind. Щелкните по кнопке Play.

Быстрый переход Открытие Control Panel-Windows: Ctrl + 2

3. Вы увидите, как головка переместится в кадр 8 и остановится. Щелкните по кнопке Forward на сцене. Обратите внимание, что головка в партитуре переместится в кадр 10 и, не останавливаясь, переместится в кадр 18 и остановится. Щелкните по кнопке Backup на сцене и вы увидите, как головка переместится в кадр 1 и, дойдя до кадра 8, остановится.

4. С помощью кнопок Forward и Backup на сцене просмотрите все слайды фильма, обращая внимание на то, что происходит в партитуре.

5. Взглянем поближе. В Control Panel щелкните по кнопке Rewind, а затем щелкните по кнопке Play.

6. Вы увидите, как головка переместится в кадр 8 и остановится. И, хотя партитура выглядит неподвижной, в действительности головка циклически двигается  по кадру 8 из-за наличия события кадра в канале Script. Дважды щелкните по кадру 8 в канале Script, как показано на рис. 11.1.



Рис. 11.1. Кадр 8 в канале Script


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

on exitFrame
go to the frame
end

Именно фраза go to the frame заставляет Director зацикливаться в кадре 8 (текущем кадре), оставляя активными кнопки Forward и Backup на сцене. Без такого внутреннего цикла Director не смог бы обнаруживать щелчки пользователя по кнопкам и реагировать на них.

8. В партитуре слева в канале Marker находится всплывающее меню, в котором перечисляются все маркеры фильма Director'а, как показано на рис. 11.2. Щелкните по этому меню и выберите Page One.



Рис. 11.2. Всплывающее меню для выбора маркеров


9. Обратите внимание, что головка перемещается на этот маркер (Page One), как показано на рис. 11.3. Сцена обновляется и отображает информацию текущего кадра.

Подсказка

После выбора маркера во всплывающем меню головка передвигается к этому маркеру в партитуре. В шаге 9 маркер Page One расположен в пределах текущей зоны видимости партитуры. Однако если выбранный маркер находится далеко справа в партитуре, то головка может выйти из зоны видимости. В этом случае вам нужно будет прокрутить партитуру к новому месту размещения головки.




Рис. 11.3. Головка воспроизведения переместилась на маркер Page One в партитуре


11. В окне Cast (откройте его, если оно еще не открыто) щелкните по элементу труппы Forward. Посмотрите на левый нижний угол миниатюры для Forward. Этот значок в виде «листка бумаги» означает, что к данному элементу труппы подключен скрипт труппы. Выберите Window | Script, для того чтобы просмотреть сам скрипт. В открывшемся окне Script вы увидите следующий скрипт.

on mouseUp
go next
end

Скрипт запускается событием мыши on mouseUp (когда пользователь отпускает кнопку мыши). В команде go можно задать конкретный номер кадра, имя маркера, фильма или другие параметры, которые вы изучите, когда начнете работать с командой go. В нашем случае go next приказывает Director'y перейти к следующему маркеру (Page One). Если бы мы открыли скрипт, связанный с кнопкой Backup, то обнаружили бы похожую команду go previous, приказывающую Director'y перейти назад к предыдущему маркеру.

Что должно получиться на экране

На рис. 11.4 показано, как выглядит сцена завершенного упражнения.



Рис. 11.4. Сцена завершенного упражнения


Что должно получиться за сценой

На рис. 11.5 показано, как должна выглядеть партитура, когда вы закончите упражнение.



Рис. 11.5. Партитура завершенного упражнения


Пошаговые инструкции

1. Начнем с открытия файла, содержащего нужные нам элементы, следующим образом.


а) Выберите File | New

2. Выберите File | Save As и поместите ваш новый файл в папку с именем Save Work на вашем жестком диске. Назовите файл MyHorses.dir.

3. Если окно Cast не открыто, то откройте его, выбрав Window | Cast.

Быстрый переход Открытие окна Cast: Ctrl + 3

4. Если партитура не открыта, то откройте ее, выбрав Window | Score.

Быстрый переход Открытие окна Score: Ctrl + 4

5. Выберите Edit | Preferences | Sprite. В открывшемся диалоговом окне напечатайте 8 в поле Span Duration (Интервал Показа). Создаваемые вами спрайты из первой труппы должны иметь длительность, равную восьми кадрам.

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



Рис. 11.6. Окно Cast с элементами труппы, готовыми к использованию

Подсказка

Маркеру вовсе необязательно присваивать имя, но имя облегчит его поиск в дальнейшем. Таким образом, это хорошая идея - использовать уникальное и описательное имя для маркера.


7. Поместите элемент труппы Title в канал 1 партитуры, щелкнув по нему и Перетащив Title из окна Cast в кадр 1 канала 1, как показано на рис. 11.7.



Рис. 11.7. Спрайт в партитуре

Подсказка

Вы можете редактировать имя маркера, просто щелкнув по нему в канале Marker и заново напечатав его имя. Для удаления маркера щелкните по треугольнику и, удерживая кнопку мыши нажатой, вытащите маркер из канала. Затем отпустите кнопку мыши.


8. Давайте создадим маркер и обозначим его.


а) Выберите кадр 1 в канале Marker партитуры.

б) Появится треугольник, показывающий новый маркер. Director также создает имя маркера по умолчанию (New Marker) и предлагает вам его изменить. Напечатайте Start и нажмите клавишу Enter. Результат показан на рис. 11.8.



Рис. 11.8. Новый маркер с новым именем Start


9. Давайте продолжим добавление остальных графических изображений.


а) Выберите элемент труппы Slide 1 в окне Cast (это первое графическое изображение для слайд-шоу).

б) Перетащите элемент труппы Slide 1 в партитуру и поместите его в кадр 10 канала 1, как показано на рис. 11.9.



Рис. 11.9. Элемент труппы Slide 1 в кадре 10 канала 1 партитуры


в) Во вкладке Sprite на панели Property Inspector, расположенной справа, выберите поле End Frame (Конечный Кадр) и напечатайте 18, как показано на рис. 11.10.



Рис. 11.10. Поле End Frame вкладки Sprite на панели Property Inspector


г) Выберите кадр 20 в канале 1.

д) Перетащите элемент труппы Slide 2 из окна Cast (это второе графическое изображение для слайд-шоу) в кадр 20 канала 1.

е) В поле End Frame в Property Inspector напечатайте 28.

ж) Выберите кадр 30 канала 1.

з) Перетащите элемент труппы Slide 3 из окна Cast (это третье графическое изображение для слайд-шоу) в кадр 30 канала 1.

и) В поле End Frame в Property Inspector напечатайте 38.

к) Ваша партитура теперь должна выглядеть, как на рис. 11.11.



Рис. 11.11. Четыре элемента труппы, добавленные в канал 1, будут слайдами


10. Давайте вернемся назад и еще добавим маркеры.


а) Добавьте новый маркер в кадр 10, щелкнув по этому кадру в канале Marker. Назовите новый маркер Page One.

б) Добавьте новый маркер в кадр 20 и назовите его Page Two.

в) Добавьте новый маркер в кадр 30 и назовите его Page Three.

г) Ваша партитура теперь должна выглядеть, как на рис. 11.12.



Рис. 11.12. Новые маркеры Page One, Page Two и Page Three в канале Marker


11. Вы только что создали основу для слайд-шоу. Теперь наступило время добавить средства навигации.


а) Выберите кадр 8 в канале Script. Это соответствует последнему кадру, в котором демонстрируется слайд Title.

б) Щелкните по элементу труппы Loop в окне Cast. В этом элементе труппы содержится скрипт, который мы хотим использовать для навигации.

Подсказка

Скрипт труппы - это скрипт, подключенный к определенному элементу труппы. Когда элемент труппы помещается на сцену, то его скрипт также подключается к этому новому спрайту.


в) Давайте коротко взглянем на этот скрипт. Выберите Window | Script. Ознакомьтесь со скриптом в открытом диалоговом окне, показанном на рис. 11.13.



Рис. 11.13. Скрипт, подключенный к элементу труппы с именем Loop


г) Это реакция на событие, в которой содержится обработчик события on exitFrame и команда Lingo go to the frame. Когда головка войдет в связанный с ними кадр (мы собираемся подключить скрипт к кадру 8), то она остановится и зациклится внутри этого кадра. Головка останется в данном кадре до тех пор, пока пользователь не щелкнет по кнопке Forward (которую вы добавите позднее в этом упражнении).

д) Щелкните по X в правом верхнем углу окна Script, чтобы его закрыть.

е) Перетащите элемент труппы Loop из окна Cast в партитуру и поместите его в кадр 8 канала Script. Отпустите кнопку мыши. Результат показан на рис. 11.14.



Рис. 11.14. Поместите элемент труппы Loop в кадр 8 канала Script


12. Давайте добавим этот же скрипт в другие графические изображения.


а) Выберите кадр 18 в канале Script.

б) Перетащите элемент труппы Loop в партитуру и поместите его в кадры 18, 28 и 38 (все кадры - в канале Script).

в) Теперь ваша партитура должна выглядеть, как на рис. 11.15.



Рис. 11.15. Скрипт добавлен в кадры 18,28 и 38 канала Script


13. Сохраните вашу работу в папке Save Work.

Подсказка

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


14. Давайте создадим кнопки для навигации.


а) Выберите кадр 1 канала 3 в партитуре.

б) Палитра Tools должна быть уже открыта. Если нет, то выберите Window | Tool Palette.

в) Выберите инструмент Push Button (Нажимаемая Кнопка), как показано на рис. 11.16.



Рис. 11.16. Инструмент Push Button


г) С помощью этого инструмента вы создадите кнопку нужного вам размера. Давайте попробуем это сделать. Щелкните в правом нижнем углу сцены и, удерживая кнопку мыши нажатой, создайте ограничивающую рамку для кнопки. Отпустите кнопку мыши.

д) Внутри кнопки появится курсор ввода текста. Напечатайте Forward. Результат показан на рис. 11.17.



Рис. 11.17. Добавление текста в кнопку на сцене


е) Щелкните по фону сцены, чтобы закрыть текстовое окно кнопки. Ознакомьтесь с результатами на сцене.

ж) Щелкните по кнопке Forward на сцене.

з) В Property Inspector выберите вкладку Sprite и измените значение поля End Frame на 28. Нажмите кнопку Enter.

Подсказка

Вы также можете изменить конечный кадр кнопки Forward, щелкнув по последнему кадру этого спрайта в партитуре и перетащив его в кадр 38


15. Давайте создадим скрипт труппы для кнопки Forward.


а) Эта кнопка была автоматически добавлена как элемент труппы в окно Cast, когда вы создали кнопку Forward на сцене.

б) Выберите элемент труппы Forwards окне Cast, щелкнув по нему.

в) Пока мы не вышли из окна, давайте назовем кнопку. Щелкните по полю Name в окне Cast и напечатайте Forward.

г) Щелкните по кнопке Script в правом верхнем углу окна Cast, как показано на рис. 11.18. При этом откроется редактор скриптов.



Рис. 11.18. Кнопка Script в окне Cast


д) Введите приведенную ниже информацию. Обратите внимание на то, что Director автоматически формирует первую и последнюю строки, и вы должны добавить к ним go next.

on mouseUp
go next
end

Подсказка

Director начинает этот новый скрипт, используя обработчик события on mouseUp. Этот скрипт будет включаться, когда пользователь нажмет и отпустит кнопку мыши. Скрипт go next отправит головку к следующему маркеру.


е) Когда вы закончите писать скрипт, щелкните по кнопке Recompile, как показано на рис. 11.19.



Рис. 11.19. Кнопка Recompile в окне Script


16. Давайте создадим кнопку Backup (Назад).


а) Выберите элемент труппы Forward в окне Cast, щелкнув по нему.

б) Удерживая нажатой клавишу Alt , щелкните по элементу труппы Forward и перетащите его в пустую ячейку рядом с ним.

Мы только что создали дубликат. Скопированный элемент труппы показан на рис. 11.20.



Рис. 11.20. Скопированный элемент труппы

Подсказка

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


в) Измените в поле Name имя элемента труппы на Buckup.

г) Дважды щелкните по миниатюре скопированной кнопки, чтобы открыть диалоговое окно.

д) В левом столбце измените текст на Buckup. Закройте окно, щелкнув по кнопке X.

е) При еще выбранном элементе труппы Buckup щелкните по кнопке Script в правом верхнем углу окна Cast.

ж) Измените скрипт Lingo, чтобы он выглядел следующим образом.
on mouseUp
gо previous
 end 

з) Этот скрипт запускается, когда пользователь нажимает и затем отпускает кнопку мыши. Скрипт go previous отправит головку к предшествующему маркеру.

и) Когда вы закончите писать скрипт, то щелкните по кнопке Recompile.

Подсказка

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


17. Давайте отрегулируем интервал показа кнопки Buckup. Как вы помните, мы не хотим, чтобы кнопка Backup отображалась в слайде Title, так как из него некуда продвигаться назад. Кроме того, мы хотим, чтобы кнопка Backup, в отличие от кнопки Forward, присутствовала в последнем слайде, так как у нас есть возможность вернуться из последнего слайда назад к предыдущему слайду.


а) Перетащите элемент труппы Backup из окна Cast в кадр 10 (первый кадр второго слайда) канала 4 в партитуре.

б) Выберите вкладку Sprite и измените значение поля End Frame на 38. Нажмите клавишу Enter.

в) С помощью инструмента Arrow переместите кнопку Backup в левый нижний угол, как показано на рис. 11.21.



Рис. 11.21. Кнопка Backup, перемещенная на свое место сцены


18. Сохраните вашу работу в папке SaveWork.

19. Хорошо, теперь берите воздушную кукурузу и усаживайтесь смотреть ваш фильм.


а) Щелкните по кнопке Rewind на Control Panel.

б) Щелкните по кнопке Play на Control Panel.

в) На сцене щелкните по кнопке Forward. Продвигайтесь вперед, пока не достигнете последнего слайда.

г) На сцене щелкните по кнопке Backup. Продвигайтесь назад, пока не достигнете слайда Title (Заголовок).

д) Если вы способны успешно продвигаться вперед и назад по программе слайдов, то примите поздравления! Вы только что создали ваше первое средство навигации.

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