Иллюстрированный самоучитель по Director MX

         

Практическое упражнение 4.2: Добавление взаимодействия с пользователем


В этом упражнении вы будете работать с другим файлом Director'a и продолжать осваивать приемы помещения и изменения спрайтов. Эти приемы состоят в добавлении команд Wait, задающих время ожидания, и установке опции Wait for Mouse Click or Key Press (Ждать Щелчка Мыши или Нажатия Клавиши), которые позволяют пользователю управлять воспроизведением презентации.

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

Давайте посмотрим на завершенное упражнение.

1. Щелкните по кнопке Play на Control Panel. Эта презентация состоит из трех изображений заднего плана. Обратите внимание на следующие особенности сцены.

а) В кадрах 20, 40 и 60 фильм приостанавливается и ждет, когда вы либо нажмете клавишу, либо щелкните мышью. Изучите рис. 4.35. Мы обвели кружком значок взаимодействия, показывающий, что фильм ждет реакции пользователя. В этих кадрах головке повстречалась команда Wait for Mouse Click or Key Press.

б) В кадрах 24, 29, 34, 44, 49 и 54 головка входит в кадр с командой с заданным временем ожидания Wait seconds (Ждать, секунд), ждет три секунды, а затем идет дальше.

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

На рис. 4.35 показан экранный снимок начала презентации. Обратите внимание, что курсор изменил свой вид и показывает значок ожидания в режиме взаимодействия.



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

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

Файл  все еще должен быть открыт. Откройте окно Score, выбрав Window | Score. Ознакомьтесь с расположением спрайтов в завершенном проекте, показанном на рис. 4.36. Спрайты с заданным временем ожидания (обозначенные буквой W - примеч. перев.) помещены в кадры, предшествующие точке отметки начала каждого явления, а спрайты ожидания взаимодействия с пользователем (обозначенные буквой С - примеч. перев.) - в кадры перед следующим явлением.



Рис. 4.36. Завершенная партитура

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

1. Начнем с открытия нового файла. Выберите File | New | Movie.

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

3. Давайте изменим размеры сцены следующим образом.

а) Выберите Modify | Movie | Properties.

б) Ознакомьтесь с Property Inspector. Измените размеры сцены, напечатав 600 в поле X и 300 в поле Y, как показано на рис. 4.37.


Подсказка

Во многих случаях вы обнаружите, что полезно устанавливать свои размеры сцены. Используя окно презентации, отличающееся от стандартного окна 640x480, вы можете придать ему интересный вид простым отклонением от нормы. Многие баннеры Shockwave, размещенные на веб-сайтах, имеют короткую и широкую форму.



Рис. 4.37. Изменение размеров сцены на 600 х 300 в Property Inspector

в) В Property Inspector во вкладке Movie щелкните по ниспадающему меню Location (Положение) справа от полей ввода и затем выберите опцию Centered (В Центре), как показано на рис. 4.38 (См. Подсказку.)


Подсказка

Эта опция устанавливает сцену в центр только в авторском режиме. Для того чтобы окно Stage устанавливалось в центр в распространяемом проекте (исполняяемой программе или приложении), вам нужно будет выбрать опцию центрирования окна при выполнении процедуры вывода (См. главу 20.) Если вы выводите в Shockwave, то должны будете сгенерировать страницу HTML, которая сцентрирует ваш SWF-файл в браузере воспроизведения.

г) В Property Inspector щелкните по кнопке Color (Цвет). Должна появиться цветовая палитра.

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



Рис. 4.38. Выбор опции Centered в ниспадающем меню Location

4. Теперь наступило время использовать ранее изученный прием работы для импортирования окна External Cast (Внешняя Труппа).

а) Выберите File | Import.

б) Выберите файл труппы Airshow.cst .

в) Щелкните по Import. Airshow.cst теперь будет добавлен в виде вкладки труппы в окно Cast рядом с вкладкой труппы Internal, как показано на рис. 4.39.



Рис. 4.39. Внешняя труппа Airshow после ее импортирования

5. Изменим некоторые настройки, используемые по умолчанию.

а) Выберите Edit | Preferences | Sprite (Правка | Предпочтения | Спрайт).

б) Откроется диалоговое окно Sprite Preferences. В поле Span Duration (Интервал Показа) напечатайте 20, чтобы изменить величину интервала спрайта, как показано на рис. 4.40.



Рис. 4.40. Изменение настройки интервала показа (Span Duration) в диалоговом окне Sprite Preferences

в) Щелкните по ОК.

6. Поработаем с элементами труппы заднего плана, как показано на рис. 4.41.

а) Выберите элемент труппы Background 1 и перетащите его в кадр 1 канала 1 партитуры.

б) Выберите элемент труппы Background 2 и перетащите его в кадр 21 канала 1 партитуры.

в) Выберите элемент труппы Background 3 и перетащите его в кадр 41 канала 1 партитуры.



Рис. 4.41. Помещение спрайтов заднего плана в канал 1

7. Добавим несколько команд ожидания реакции пользователя.

а) Раскройте каналы эффектов, щелкнув по кнопке Hide/Show Effects Channels, показанной на рис. 4.42.



Рис. 4.42. Использование кнопки Hide/Show Effects Channels для раскрытия каналов эффектов

б) В канале Tempo, показанном на рис. 4.43, дважды щелкните по кадру 20. Кадр 20 является последним кадром первого явления.



Рис. 4.43. Двойной щелчок в канале Tempo в кадре 20

в) В открывшемся окне Frame Properties: Tempo щелкните по опции Wait for Mouse Click or Key Press (Ждать Щелчка Мыши или Нажатия Клавиши), как показано на рис. 4.44.

г) Щелкните по ОК.



Рис. 4.44. Выбор опции Wait for Mouse Click or Key Press

Подсказка

Если вы хотите перетащить спрайт прямо на сцену, но при этом хотите, чтобы он стартовал в правильном кадре, то щелкните по нужному кадру перед перетаскиванием спрайта. Это поможет обеспечить помещение спрайта в правильный кадр.

д) В канале Tempo дважды щелкните по кадру 40. Это последний кадр второго явления.

е) В открывшемся окне Frame Properties: Tempo щелкните по опции Wait for Mouse Click or Key Press.

ж) Щелкните по ОК.

з) Не обязательно помещать ожидание в последний кадр. Когда головка достигнет этого кадра, то она остановится или зациклится, в зависимости от выбора, сделанного в Control Panel.

8. Добавим точку отметки (bullet point).

а) Щелкните по кадру 25 в канале 2. Это место, где вы хотите поместить первый отмеченный интервал в партитуре (См. Подсказку.)

б) В окне Cast выберите элемент труппы с именем Bullet One (Первый Отмеченный Интервал).


Рис. 4.45. Спрайт Bullet One на сцене и в партитуре

в) Перетащите Bullet One на сцену и поместите ее в верхний левый угол, как показано на рис. 4.45.

г) Property Inspector должен быть уже открыт. Если нет, то выберите Window | Property Inspector.

д) Щелкните по вкладке Sprite.

е) При выбранном спрайте Bullet One используйте ниспадающее меню Ink Effect и выберите Background Transparent, как показано на рис. 4.46. Это теперь позволит показать небо заднего плана как фон текста.



Рис. 4.46. Использование меню Ink Effect для выбора Background Transparent

9. Когда вы перетаскивали Bullet One на сцену, то опция интервала показа спрайта, используемая по умолчанию в Director'e, создала для этого спрайта 20 кадров. Первым кадром стал кадр с номером 25, а последним - кадр с номером 44. Давайте уменьшим этот интервал.

а) Щелкните в партитуре по последнему кадру спрайта Bullet One (кадр 44) и удерживайте кнопку мыши нажатой.

б) Перетащите конечную точку в кадр 40.

10. Добавим второй отмеченный интервал.

а) Щелкните по кадру 30 в канале 3. Здесь вам нужно поместить второй отмеченный интервал в партитуре.

б) Выберите элемент труппы с именем Bullet Two.

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

г) В ниспадающем меню Ink Effect в Property Inspector выберите опцию Background Transparent.

11. Когда вы перетаскивали Bullet Two на сцену, то опция интервала показа спрайта, используемая по умолчанию в Director'e, создала для этого спрайта 20 кадров. Давайте уменьшим этот интервал.

а) Щелкните в партитуре по последнему кадру спрайта Bullet Two (кадр 49) и удерживайте кнопку мыши нажатой.

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



Рис. 4.47. Партитура и сцена после добавления второго текстового отмеченного интервала и его уменьшения

12. Давайте добавим третью точку отмеченного интервала.

а) Щелкните по кадру 35 в канале 4. Здесь вам нужно поместить третий . отмеченный интервал в партитуре.

б) Выберите элемент труппы с именем Bullet Three.

в) Перетащите Bullet Three на сцену и поместите его в самом низу сцены в центре между левым и правым краем.

г) С помощью ниспадающего меню Ink Effect в Property Inspector выберите опцию Background Transparent.

13. Давайте уменьшим интервал кадров для Bullet Three.

а) Щелкните в партитуре по последнему кадру спрайта Bullet Three (кадр 54) и удерживайте кнопку мыши нажатой.

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

14. Теперь выровняем текст отмеченных интервалов на сцене.

а) Щелкните по Bullet One в партитуре.

б) Удерживая нажатой клавишу Shift, щелкните по Bullet Two в партитуре. Теперь станут выбранными два первых отмеченных элемента труппы.

в) Откройте окно Align (Выравнивание), выбрав Window | Align. Окно Align, показанное на рис. 4.48, открывается при настройке по умолчанию в нижнем правом углу экрана.

г) Щелкните по кнопке Align Left Edge (Выровнять Левый Край).



Рис. 4.48. Окно Align в нижнем левом углу экрана

15. Зададим время ожидания для каждого отмеченного интервала.

а) В канале Tempo дважды щелкните по кадру 24. Это первый кадр непосредственно перед первым появляющимся отмеченным интервалом. Появится диалоговое окно.

б) Теперь будет открыто диалоговое окно Frame Properties: Tempo, как показано на рис. 4.49. Щелкните по опции Wait и затем установите время, равное 3 секундам, щелкая по правой стрелке или передвигая бегунок. См. рис. 4.49.



Рис. 4.49. Диалоговое окно Frame Properties: Tempo

в) Щелкните по ОК.

г) Повторите этот процесс (шаги а-в) в кадрах 29 и 34.

16. Теперь посмотрим, что у нас получилось.

а) Сделайте видимыми сцену и партитуру.

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

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

г) Фильм будет воспроизводиться от кадра 1 до кадра 20, в котором произойдет пауза. Посмотрите на мигающий значок взаимодействия, в который превратился обычный значок курсора мыши. Этот значок показывает, что вы должны либо щелкнуть мышью, либо нажать любую клавишу. На рис. 4.50 мы обвели кружком значок взаимодействия, чтобы вам было его легко найти.



Рис. 4.50. Кружком выделен значок взаимодействия на сцене

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

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

ж) Щелкните по кнопке Stop.

17. Теперь поработаем со вторым набором текстовых отмеченных интервалов, которые будут воспроизводиться с фоном background 3.

а) Щелкните по кадру 45 в канале 5. Здесь вам будет нужно начать следующую серию текстовых отмеченных интервалов в партитуре.

б) В окне Cast выберите элемент труппы с именем Bullet Four.

в) Перетащите Bullet Four на сцену и поместите его в верхнем левом углу.

г) При выбранном спрайте Bullet Four в Property Inspector выберите опцию Background Transparent в ниспадающем меню Ink Effect.

д) Перетащите конечную точку в кадр 60.

18. Теперь сделаем это для пятого отмеченного интервала.

а) Щелкните по кадру 50 в канале 6.

б) В окне Cast выберите элемент труппы с именем Bullet Five.

в) Перетащите Bullet Five на сцену и поместите его ниже предыдущего отмеченного интервала.

г) Установите прозрачный фон.

д) Перетащите конечную точку в кадр 60.

19. Теперь сделаем это для шестого отмеченного интервала.

а) Щелкните по кадру 55 в канале 7.

б) В окне Cast выберите элемент труппы с именем Bullet Six.

в) Перетащите Bullet Six на сцену и поместите его в центре нижней части сцены.

г) Установите прозрачный фон.

д) Перетащите конечную точку в кадр 60.

е) Выровняйте текстовые отмеченные интервалы, если это нужно.

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



Рис. 4.51. Сцена и партитура после добавления шести отмеченных интервалов

20. Зададим время ожидания для отмеченных интервалов второй серии.

а) В канале Tempo дважды щелкните по кадрам 44, 49 и 54.

б) В открывшемся диалоговом окне Frame Properties: Tempo выберите опцию Wait и установите время равное, 3 секундам. Щелкните по кнопке ОК.

в) В канале Tempo дважды щелкните по кадру 60 и выберите опцию Wait for Mouse Click or Key Press. Щелкните по кнопке ОК.

21. Сохраните этот файл.

22. Щелкните по кнопке Rewind на Control Panel. Щелкните по кнопке Play и наблюдайте результаты вашей работы.

23. Теперь у вас есть возможность применить полученные знания и немного поэкспериментировать. Вносите любые исправления, какие захотите.

24. Выберите Save As и назовите вашу вторую версию другим именем.



Содержание  Назад