Бегунок «Other» Line

Бегунок «Other» Line Width в диалоговом окне Paint Window Preferences

в) С помощью «плитки» цвета переднего плана в палитре инструментов окна Paint выберите ярко-красный цвет переднего плана.

г) Выберите инструмент Rectangle (но не Filled Rectangle). Вы будете использовать для этого инструмента ранее выбранную вами 9-пикселную линию.

д) Щелкните курсором инструмента Rectangle по верхнему левому углу существующего красного прямоугольника в окне Paint и нарисуйте рамку вокруг него, как показано на рис. 9.8.

Дизайн зрительного пространства

Одним из способов представления зрительного пространства экрана вашего компьютера является понятие «экранного имущества». Положим, ваш проект в Director'е предусматривает заполнение всего экрана компьютера при разрешении 640 х 480 (и разрешение компьютера установлено в 640x480). Ваше «экранное имущество» займет все доступное пространство монитора. Однако нам нужно поделить доступное пространство и назначить одну область для средств навигации, другую область - для организационной информации, а оставшуюся область - для отображаемого контента.

Далее мы можем разбить область контента. Она является «мультимедийной», то есть мы собираемся показывать в ней одновременно видеоэлементы, графические элементы и текстовые элементы. Но мы не хотим, чтобы наш контент выглядел переполненным и неорганизованным.

Приняв во внимание все выше упомянутые факторы, мы приходим к выводу, что объем «экранного имущества» относительно ограничен. Мы должны планировать и разумно использовать доступное пространство. Основной идеей дизайна зрительного пространства является применение методов, создающих эстетически привлекательное и упорядоченное отображение, и разработка контента наиболее эффективным способом. Давайте рассмотрим несколько примеров «экранного имущества» и того, как выполняется деление экрана на области.

Создание зрительного воздействия

Глава 9. Создание зрительного воздействия

Введение Дизайн зрительного пространства Экскурсия 9А: Зрительное пространство Практическое упражнение 9.1: Создание выпуклых и утопленных объектов Экскурсия 9В: Альфа-каналы

Яркокрасная прямоугольная рамка

Ярко-красная прямоугольная рамка вокруг первоначального закрашенного прямоугольника

е) Выберите однопикселную линию в палитре инструментов окна Paint, как показано на рис. 9.9.

Экскурсия 9А Зрительное пространство

Экскурсия 9А: Зрительное пространство

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

1. Откройте файл *.dir.

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

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

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

4. Прочитайте текст на каждом экране, а затем посмотрите на зрительное пространство, чтобы определить, что описывает текст. Пример приведен на рис. 9.1.

Экскурсия 9В Альфаканалы

Экскурсия 9В: Альфа-каналы

Альфа-канал - это скрытый уровень графического изображения, используемый для выборочного наложения «масок» на цвета и эффекты прозрачности. Изображение альфа-канала в серых оттенках определяет внешние края графического изображения и свойство «непрозрачность/прозрачность» применяемых цветов, в зависимости от интенсивности серого оттенка. Альфа-канал используется для создания размытых или четких краев графического изображения, а также для придания прозрачности части изображения или всему изображению по отношению к фону. Любая черная часть альфа-канала делает отображение соответствующей ей области изображения на 100% непрозрачным. Если участок альфа-канала установлен в 50% серого оттенка, то соответствующая ему область графического изображения будет на 50% непрозрачной.

Director поддерживает альфа-канал с несколькими типами 32-битной графики. В графике PNG35 и Photoshop альфа-канал поддерживается, и Director может использовать графические изображения обоих форматов. В Director'e можно моделировать альфа-канал в других графических форматах, не поддерживающих альфа-канал, таких как растровые изображения и PICT-файлы, с использованием опции Director'a Mask для эффекта прозрачности Ink.

1. Давайте откроем файл с именем *.dir.

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

3. Спрайт Logo (Логотип) на сцене перейдет в состояние Movable (Перемещающийся).

4. Щелкните по логотипу и переместите его по сцене. Обратите внимание, что его тень прозрачна. Сквозь тень элемента труппы видно изображение фона.

5. Щелкните по кнопке Stop.

6. Дважды щелкните по элементу труппы M-logo, чтобы открыть его в окне Paint.

7. Обратите внимание, что изображение логотипа окружает черный квадрат. Он не виден в спрайте на сцене. Это происходит потому, что у спрайта на сцене для эффекта Ink установлена опция Mask. Щелкните по X в окне Paint, чтобы закрыть его.

8. Эффект прозрачности Mask заставляет изображение элемента труппы немедленно следовать за спрайтом и использует его как альфа-канал.

9. Дважды щелкните по элементу труппы M-logo's Alpha Channel в окне Cast, чтобы открыть его в окне Paint. Это маска для элемента труппы M-logo. Обратите внимание, что каждая область этого элемента труппы, имеющая черный цвет, отображает эту область спрайта на сцене, как непрозрачную, на 100%. Таким же образом, любая область, являющаяся оттенком серого цвета, отображает соответствующую ей область с таким же процентом непрозрачности.

Кнопка Rip Horizontal на линейке инструментов окна Paint

к) Щелкните по кнопке Flip Vertical (Вертикальное Зеркальное Обращение), расположенной на линейке инструментов окна Paint. Щелкните курсором в любом месте пустого фона, чтобы избавиться от прямоугольного выделения.

л) Зеркально обращая изображение в вертикальном и горизонтальном направлениях, вы заменили области «теней» (темно-красные) на области «отблесков» (ярко-красные). Если сосредоточить взгляд на нижнем правом углу нового изображения, то оно покажется нажатым. Это немного трудно увидеть без непосредственного сравнения с изображением кнопки в положении «Верхнее». Тем не менее, вы увидите оба этих состояния кнопки вместе в последующем материале.

м) Щелкните по X в верхнем правом углу окна Paint, чтобы его закрыть, н) Вы закончили создание первой кнопки, придав ей выпуклость скошенными краями. Вы реально создали два разных графических изображения для их дальнейшего использования, как в состоянии кнопки «Верхнее», так и в состоянии «Нижнее».

8. Теперь создадим кнопку, применив другой метод, обеспечивающий глубину с помощью тени.

а) Выберите миниатюру элемента труппы Bevel Button-Up, созданного вами ранее.

б) Выберите Edit | Copy Cast Members.

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

г) Выберите Edit | Paste для вставки скопированного элемента труппы в пустую миниатюру. Переименуйте этот элемент труппы как Shadow-Up. Этот переименованный элемент труппы показан на рис. 9.15.

Кнопка с «тенью»

н) Выберите инструмент Registration Point и щелкните по нижнему правому углу тени, чтобы изменить точку регистрации, как показано на рис. 9.19.

Кнопки Shuffle Down и Shuffle

Кнопки Shuffle Down и Shuffle Up во вкладке Behavior панели Property Inspector

19. Щелкните по кнопке Play на Control Panel. Щелкните по трехмерной кнопке на сцене.

20. Когда вы закончите щелкать, то сохраните вашу работу.

Линия проведенная в нижнем левом углу рамки

Линия, проведенная в нижнем левом углу рамки

л) Выберите инструмент Hand и передвиньте с его помощью увеличенное изображение так, чтобы было видно верхний правый угол, м) Снова выберите инструмент Line и нарисуйте линию из угла внешней границы рамки в угол внутренней границы рамки. Линия должна перекрывать всю ширину рамки, как показано на рис. 9.11.

Линия проведенная в верхнем правом углу рамки

Линия, проведенная в верхнем правом углу рамки

Новая сфера уменьшенная по сравнению

Убедитесь в том, что реакция Create 3d Button находится на верху стека реакций. Так как эта реакция отвечает за генерирование текстуры, теней и моделей, используемых в этом элементе труппы, то она должна быть инициализирована до того, как реакция 3d Button Behavior попытается повлиять на эти ресурсы. Вы можете это узнать во вкладке Behavior панели Property Inspector.

д) В панели Property Inspector щелкните по вкладке Behavior, показанной на рис. 9.22. Реакция на событие Create 3dButton должна быть выше реакции 3dButton Behavior. Если ваши реакции на события расположены неправильно, то их нужно переместить с помощью кнопок Shuffle Down (Переместить Вниз) и Shuffle Up (Переместить Вверх). См. рис. 9.22.

Новая точка регистрации

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

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

б) Выберите миниатюру новой кнопки Shadow-Up.

в) Выберите Edit | Copy Cast Members.

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

д) Выберите Edit | Paste, чтобы вставить скопированный элемент труппы в пустую миниатюру. Назовите этот элемент труппы Shadow-Down.

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

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

з) С помощью клавиш со стрелками на клавиатуре передвиньте прямоугольник вниз и вправо, пока не останется видна только небольшая часть тени из-под нижнего и правого краев.

и) Выберите инструмент Registration Point. Проверьте, является ли нижний правый угол тени точкой регистрации.

к) Щелкните по X в верхнем правом углу окна Paint, чтобы его закрыть, л) Выберите File | Save.

м) Теперь вы закончили вторую кнопку и создали для нее как состояние «Верхнее», так и состояние «Нижнее», изобразив иллюзию глубины с помощью падающей тени.

10. Давайте теперь создадим третью кнопку с иллюзией глубины при изменении размеров. Кнопка будет выглядеть сферической.

а) Выберите Insert | Media Element | Bitmap.

б) В поле Cast Member Name напечатайте Round-Up.

в) Выберите синий цвет для переднего плана с помощью «плитки» Foreground Color.

г) В палитре Pattern выберите сплошную закраску.

д) Выберите инструмент Filled Ellipse и нарисуйте круг.

е) На второй «плитке» Gradient Colors выберите белый цвет.

ж) Выберите инструмент Pabint Buckbet.

з) Щелкните по селектору градиента (средняя кнопка Grabient Colors -прим. перев.) и держите кнопку до появления меню. Из этого меню выберите Sbun Bburst (Солнечный Луч).

и) Щелкните в верхней левой части круга, чтобы заполнить его градиентным цветом, к) Мы создали «Верхнее» графическое изображение.

11. Давайте создадим «Нижнее» положение для сферической кнопки.

а) Щелкните по кнопке «плюс» (+), расположенной в верхнем левом углу окна Paint. Добавится новый элемент труппы. Окно Paint открыто, и мы можем теперь создать этот новый элемент труппы.

б) В поле Cast Member Name, расположенном в самом верху окна Paint, напечатайте Round-Down.

Один из нескольких примеров дизайна интерфейса

5. Задержитесь в этой программе столько, сколько вам нужно.

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

Окна партитуры и Cast

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

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

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

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

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

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

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

а) Выберите Insert | Media Element | Bitmap (Добавить | Элемент Мультимедиа | Растровый).

б) Вы увидите, что откроется окно Paint, в котором мы будем создавать растровое изображение.

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

г) Выберите инструмент Filled Rectangle.

д) Посмотрите на поле Ink, расположенное в нижнем левом углу окна Paint. Установите поле Ink в Normal, как показано на рис. 9.4.

Опция Other Line Width в палитре инструментов

б) Теперь откроется диалоговое окно Paint Window Preferences (Предпочтительные Настройки Окна Paint). С помощью бегунка установите толщину линии в поле «Other» Line Width, равную 9, как показано на рис. 9.7. Щелкните по кнопке ОК, чтобы закрыть окно.

С помощью инструмента Paint Bucket

С помощью инструмента Paint Bucket вы будет заполнять темно-красным цветом только нижнюю и правую части рамки. Если при этом будет заполняться вся рамка, то выберите Undo (Отмена) и проверьте, полностью ли перекрывают нарисованные вами линии угловые зоны рамки. Если полного перекрытия нет, то темно-красный цвет проникнет в другие участки рамки. Целью проведения этих линий является разделение верхней левой части и нижней правой части рамки.
н) Щелкните по инструменту Paint Bucket. Селектором цвета переднего плана выберите темно-красный цвет. Щелкните курсором Paint Bucket внутри линии рамки в нижнем правом углу. Эта область заполнится темно-красным цветом, как показано на рис. 9.12.

битной шкалой серого цвета, чтобы

Маска должна быть изображением с 8- битной шкалой серого цвета, чтобы использоваться в опции Mask эффекта Ink. Некоторые графические файлы, такие как PNG, содержат альфа-каналы в своих графических изображениях.
10. Щелкните по X в окне Paint, чтобы закрыть его.

11. Выберите File | Import.

12. Выберите файл с именем M-logo.png и щелкните по кнопке Import.

13. Установите опцию Color Depth в 32 бита и щелкните по кнопке ОК.

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

15. Дважды щелкните по импортированному элементу труппы в окне Cast, чтобы открыть его в окне Paint. Это изображение выглядит точно так же, как и первое. Однако оно содержит альфа-канал, который спрятан и недоступен в окне Paint.

Вы можете воспользоваться различными графическими программами, такими как Macromedia Fireworks или Adobe Photoshop, чтобы создать альфа-каналы перед тем, как импортировать их в Director.

Стиль Отображения Окна Cast) установлен

Если Cast View Style ( Стиль Отображения Окна Cast) установлен в опцию List (Список), то измените ее на отображение миниатюр, щелкнув по кнопке Cast View Style в окне Cast.
а) Щелкните по кнопке X в правом верхнем углу окна Paint, чтобы его закрыть.

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

в) Найдите и выберите миниатюру новой, только что созданной вами кнопки. В поле Cast Member Name напечатайте Bevel Button-Up.

г) Выберите Edit | Copy Cast Members (Правка | Копировать Элементы Труппы).

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

е) Выберите Edit | Paste для вставки скопированного элемента труппы в пустую миниатюру. В поле Cast Member Name напечатайте Bevel Button-Down . Элемент труппы с новым именем показан на рис. 9.13.

onion skinning) является методом, использовавшимся

Многослойное рисование ( onion skinning) является методом, использовавшимся «в старые добрые времена» мультипликации. Художники-мультипликаторы использовали прозрачную бумагу-кальку (onionskin paper), для того чтобы видеть одновременно несколько разных анимационных рисунков. При этом листы бумаги накладывались друг на друга. В Director'e многослойное рисование применяется для просмотра элементов труппы, которые предшествуют текущему элементу труппы и следуют за ним в окне Cast. Вы сможете просматривать фантомное изображение (см. сноску к рис 9.1. Прим, перев.) предыдущего элемента труппы для того, чтобы определить величину сферы для «Нижнего» положения этой кнопки.

Вы можете использовать инструмент Marquee

Вы можете использовать инструмент Marquee для перетаскивания и изменения позиции нового круга в многослойном изображении.
в) Выберите View | Onion Skin (Вид | Многослойные

Поле Ink в левом нижнем углу окна Paint

е) Нарисуйте прямоугольник приблизительно трех дюймов ширины и одного дюйма высоты, как показано на рис. 9.5.

Практическое упражнение 9 1 Создание

Практическое упражнение 9.1: Создание выпуклых и утопленных объектов

В этом упражнении вы будете применять некоторые основные принципы зрительного дизайна. Для повышения зрительного интереса и привлекательности вы создадите иллюзию глубины для объектов, отображаемых на экране. В жанрах изобразительного искусства (живописи, фотографии и нынешних мультимедиа31) использование света (отблесков и теней) помогает создавать иллюзию 3D-объектов. Объясним это на следующем примере из реального мира.

«Я собираюсь сфотографировать тихую жизнь яблока. Я помещаю яблоко на стол и устанавливаю камеру на штатив-треногу перед яблоком. Затем я закрепляю фотолампу сверху и слева от яблока и направляю свет прямо на него. Когда я смотрю на яблоко через камеру при освещении сверху и слева от него, то я вижу следующее.

На верхней части и на левой части яблока имеются отблески (небольшие области яркого света, исходящего от яблока). Другими словами, отблесками являются участки яблока, на которые прямо падает свет.

Яблоко отбрасывает тень на стол, немного вправо и на то место стола, которое находится под яблоком. Другими словами, тени находятся на стороне, противоположной источнику света».

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

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

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

1. Убедитесь в том, что на Control Panel кнопка Loop Playback установлена в опцию Loop.

2. Щелкните по кнопке Rewind. Щелкните по кнопке Play.

3. Щелкните по первой кнопке на сцене. Щелкните по второй, третьей и четвертой кнопкам. В каждом случае будет видно, как кнопка «утапливается», когда по ней щелкают.

4. Обратите внимание на следующие особенности завершенного фильма.

а) Программа отображает на сцене статические изображения каждой кнопки.

б) На сцене имеются четыре различные кнопки.

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

Иллюзия глубины также значительно усиливается с помощью иллюзии движения при нажатии кнопок. Иллюзия того, что кнопка «утапливается», создается при помощи замены графического изображения кнопки в состоянии «Верхнее» графическим изображением кнопки в состоянии «Нижнее». «Нижнее» состояние кнопки затем заменяется состоянием «Верхнее» после отпускания кнопки мыши.

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

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

Когда упражнение будет завершено, сцена должна походить на рис. 9.2.

Прямоугольник в окне Paint

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

а) Внизу палитры инструментов окна Paint, дважды щелкните по опции Other Line Width, как показано на рис. 9.6.

Рисунки Откроется панель Onion

Рисунки. Откроется панель Onion Skin.

г) Щелкните по кнопке Onion Skinning, показанной на рис. 9.20, чтобы включить функцию Onion Skinning. Вы увидите тусклый вариант ранее нарисованной вами круглой кнопки.

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

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

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

Скопированный элемент труппы Bevel ButtonDown

Скопированный элемент труппы Bevel Button-Down

ж) Дважды щелкните по элементу труппы Bevel Button-Down, чтобы открыть его в окне Paint.

з) Дважды щелкните по инструменту Marquee, чтобы выделить, изображение в окне Paint. Вы увидите, как линия прямоугольного выделения «опоясывает» выбранную кнопку.

и) Щелкните по кнопке Flip Horizontal (Горизонтальное Зеркальное Обращение), расположенной на линейке инструментов окна Paint, как показано на рис. 9.14.

Скопированный элемент труппы ShadowUp

Скопированный элемент труппы Shadow-Up

д) Дважды щелкните по элементу труппы Shadow-Up, чтобы открыть его в окне Paint.

е) Выберите черный цвет с помощью «плитки» цвета переднего плана и белый цвет - с помощью «плитки» заднего плана.

ж) Щелкните по опции No Line, находящейся сразу под инструментом Gradient Colors в палитре инструментов. Мы не хотим, чтобы «тень» имела видимую границу.

з) Щелкните по «плитке» Pattern и держите кнопку мыши нажатой, пока не появится палитра узоров. Выберите узор из мелких точек, расположенный в первом ряду на предпоследнем месте, как показано на рис. 9.16.

Узор из мелких точек в палитре узоров

и) Выберите инструмент Filled Rectangle и нарисуйте еще один прямоугольник ниже существующего прямоугольника, но немного меньший по размерам, как показано на рис. 9.17. Он будет заполнен узором из мелких точек и будет «тенью» кнопки.

Второй прямоугольник будет «тенью»

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

Попытайтесь зрительно представить мультимедийный экран

Введение

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

Хороший дизайн интерфейса помогает пользователю легче перемещаться тю . программе и быстрее определять свое текущее положение относительно остальной части программы. Он помогает программисту представить контент в эстетически привлекательной и эффективной манере. В Экскурсии 9А вы пройдете по нескольким «хорошим» и «не совсем хорошим» примерам экранного дизайна.

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

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

Выбор однопиксельной линии

ж) Выберите инструмент Line.

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

и) Давайте начнем с нижнего левого угла ярко-красного прямоугольника, который вы только что нарисовали. Выберите инструмент Zoom и щелкните по нижнему левому углу прямоугольника, чтобы увеличить вашу кнопку.

к) В этом углу при нажатой клавише Shift нарисуйте линию из угла внешней границы рамки в угол внутренней границы рамки. Линия должна перекрывать всю ширину рамки, как показано на рис. 9.10.

Заполните темнокрасным цветом

Заполните темно-красным цветом нижний и правый края линии рамки

о) Выберите View | Zoom | 100%. Посмотрите на кнопку в окне Paint.

Кнопка теперь будет выглядеть трехмерной и выпуклой на белом фоне.

Вы только что создали изображение кнопки, часто называемое кнопкой в нормальном положении («Верхнем» состоянии).

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

Behavior Inspector

7. В открывшееся диалоговое окно Name Behavior (Имя Реакции) введите имя реакции на событие, напечатав myBehavior в поле Behavior. Щелкните по кнопке ОК, чтобы закрыть окно.

8. Войдите в окно Script, щелкнув по кнопке Script Window на панели Behavior Inspector, как показано на рис. 10.2.

Начинаем работать с LINGO

Глава 10. Начинаем работать с LINGO

Введение Знакомство с обработчиками событий Экскурсия 10А: Скрипты спрайтов Экскурсия 10В: Скрипты трупп Экскурсия 10С: Скрипты кадров Экскурсия 10D: Скрипты фильмов Подробнее об обработчиках событий Практическое упражнение 10.1: Использование окна Message

Информационная кнопка в окне Script

2. Теперь откроется Property Inspector (справа на экране) с вкладкой Script наверху.

3. Во вкладке Script откройте ниспадающее меню Туре (показанное на рис. 10.9) и выберите опцию Movie, если она уже не выбрана.

Экскурсия 10А Скрипты спрайтов

Экскурсия 10А: Скрипты спрайтов

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

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

Скрипты спрайтов могут быть подключены ко всему спрайту или к одному или нескольким кадрам спрайта. К одному спрайту можно подключать несколько скриптов спрайтов. Скрипт спрайта используется, если вы:

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

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

1. Создайте новый фильм Director'a, выбрав File | New | Movie.

2. В палитре Tools выберите инструмент Filled Rectangle.

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

4. Для создания нового скрипта спрайта выберите спрайт прямоугольника в партитуре (одним щелчком по спрайту в партитуре).

5. Если Behavior Inspector (Инспектор Реакций На События) не открыт (в правой части экрана), то откройте его, выбрав Window | Behavior Inspector.

6. В панели Behavior Inspector, показанной на рис. 10.1, щелкните по кнопке «плюс» (+) в левом верхнем углу инспектора, а затем выберите New Behavior (Создать Реакцию) во всплывающем окне.

Экскурсия 10D Скрипты фильмов

Экскурсия 10D: Скрипты фильмов

Скрипты фильма «глобально» доступны в пределах всего фильма. Доступ к ним осуществляется при наступлении некоторых событий. Например, у вас есть скрипт фильма on mouseDown. Этот скрипт будет вызываться каждый раз, когда производится щелчок мыши, независимо от того, в каком месте партитуры произошло это действие. Скрипт фильма служит библиотекой всех скриптов, доступных на протяжении всего фильма.

Скрипт фильма часто используется для хранения индивидуально созданных обработчиков реакций, которые могут быть вызваны другими скриптами спрай-тов, труппы или кадров. Скрипты фильма также используются для инициализации фильма с помощью скрипта Prepare Movie (Подготовка Фильма) или On StartMovie (В Начале Фильма).

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

Использование скриптов фильмов изучается в последующих главах. А теперь важно только то, что вы узнаете, где их найти и как они запускаются. Используйте скрипты фильмов, когда вы хотите:

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

Эта экскурсия поможет вам ознакомиться с процессом создания нового скрипта фильма.

1. Выберите Window | Script. Щелкните по информационной кнопке в окне Script, как показано на рис. 10.8.

Экскурсия 10С Скрипты кадров

Экскурсия 10С: Скрипты кадров

Скрипты кадров подключаются к кадру в канале Script партитуры. Эти скрипты являются элементами труппы и могут использоваться в любом кадре. Используйте скрипт кадра, когда вы хотите:

Управлять головкой воспроизведения. Например, вы хотите перевести головку в паузу или переместить в определенный кадр. Сделать что-либо на сцене интерактивным (включая и пустые области), когда головка находится в одном из кадров.

Эта экскурсия поможет вам ознакомиться с процессом создания нового скрипта кадра.

1. Используйте рабочий файл из Экскурсии 10В. Если вы не создавали этот файл, то выберите File | New | Movie и нарисуйте закрашенный прямоугольник.

2. Для создания нового скрипта кадра в партитуре вам нужно выбрать кадр в канале Script (расположенном выше номеров кадров и головки). Дважды щелкните по кадру 5 (это произвольный выбор) в канале Script в партитуре, как показано на рис. 10.7. Откроется окно Script.

Экскурсия 10В Скрипты трупп

Экскурсия 10В: Скрипты трупп

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

1. Используйте фильм, открытый в Экскурсии 10А. Как вы помните, мы удалили скрипт, но myBehavior все еще остается в окне Cast как элемент труппы.

2. Если вы этот файл не открывали, то выберите File | New | Movie и создайте на сцене прямоугольник с помощью инструмента Filled Rectangle из палитры Tools.

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

4. Выберите первый элемент труппы (прямоугольник) в окне Cast.

5. Щелкните по кнопке Script в окне Cast, как показано на рис. 10.6. В панели Behavior Inspector щелкните по кнопке «плюс» (+) и выберите New Behavior. В диалоговом окне Name Behavior введите имя реакции на событие.

Кнопка «минус» для удаления реакции на событие

Кнопка Recompile All Modified Scripts

11. Когда скрипт спрайта добавляется с помощью создания реакции на событие, то он становится элементом труппы. Этот элемент труппы реакции на событие затем может использоваться другими спрайтами. Каждая новая реакция на событие будет также доступна для выбора во всплывающем окне скриптов на панели инструментов Sprite (в партитуре - прим. перев.).

12. Щелкните по партитуре. Выберите View | Sprite Toolbar. Ознакомьтесь с окном Score. Вы увидите, что при таком вхождении в меню вверху окна Score добавилась информация. Щелкните по ниспадающему меню Behaviors и просмотрите все опции. Вы увидите только что созданную вами реакцию на событие myBehavior. См. рис. 10.4. Выберите ее.

Кнопка Script в окне Cast

6. Director начнет писать ваш скрипт, добавив команду-обработчик on mouseUp и закончив код программы словом end. Вы должны будете поместить команды между первой написанной строкой и последней строкой. Весь скрипт будет исполняться при щелчке мыши (и отпускании ее кнопки) по любому спрайту, содержащему это элемент труппы.

Кнопка Script Window на панели Behavior Inspector

9. Напечатайте следующий скрипт в открывшемся окне.
on mousedown Alert «Click OK to continue» end mousedown
10.Щелкните по кнопке Recompile All Modified Scripts (Перекомпилировать Все Измененные Скрипты), показанной на рис. 10.3 (вам, может быть, придется расширить окно Script, чтобы ее увидеть). Щелкните по X в правом верхнем углу окна, чтобы закрыть его.

Ниспадающее меню Behaviors на панели инструментов Sprite

14. Давайте уберем реакцию на событие из спрайта прямоугольника. Для удаления реакции из спрайта выберите спрайт и щелкните по кнопке «минус» (-) на вкладке Behavior. Выберите Remove Behavior (Удалить Реакцию На Событие), как показано на рис. 10.5.

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

Имеются два типа обработчиков событий: системные предопределенные обработчики и обработчики событий, определяемые пользователем. Системные предопределенные обработчики

Системные предопределенные обработчики являются стандартными программами Lingo для обработки событий, встроенными в Director (например, mouseUp или exitFrame). To есть эти обработчики предопределены в пределах программирования для Director'a. Ниже приведен пример системного обработчика, который вы можете обнаружить при нажатии кнопки. on mouseDown Put «This button has been pressed!» end
Обработчики событий, определяемые пользователем Обработчики событий, определяемые пользователем, также называются индивидуальными обработчиками, или глобальными обработчиками. Они вызываются не событием, а действием, определяемым разработчиком (программистом). Вот пример индивидуального обработчика.
on myCustomAction //По определенному мной действию Alert «Click OK to continue» end

Окно Message

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

На рис. 10.11 показано окно Script для скрипта фильма, в котором вы будете создавать скрипты в этом упражнении.

Окно Script для скрипта фильма

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

1. Создайте новый фильм, выбрав File | New | Movie.

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

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

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

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

а) Выберите Window | Script.

б) Напечатайте приведенный ниже скрипт. После каждой строки нажимайте клавишу Enter.
on doAlert Alert «Click OK to continue» put «You just activated an Alert dialog box!» end
6. Щелкните по кнопке Recompile All Modified Scripts.

Director упорядочит скрипт: настроит отступы, проведет цветовое выделение текста скрипта и автоматически пронумерует строки скрипта, если перед этим установлены соответствующие флажковые кнопки. Оставьте окно Script (показанное на рис. 10.12) открытым, но передвиньте его в сторону.

Окно Script с новым скриптом фильма

7. Откройте окно Message, выбрав Window | Message.

8. В окне будет отображено сообщение по умолчанию (-Welcome to Director-). Удалите это сообщение, напечатайте команду индивидуального обработчика doAlert и нажмите клавишу Enter. Director исполнит обработчик doAlert.

9. Давайте создадим индивидуальный обработчик, который будет обращаться к другому индивидуальному обработчику. По мере вашего совершенствования в Lingo вы обнаружите, что вами написано много скриптов, которые можно использовать в ряде других мест в пределах вашего фильма. Если вы создадите индивидуальные обработчики для вызова этих многократно используемых скриптов, то сократите объем необходимой для вас работы. В окне Script ниже предыдущего скрипта фильма напечатайте следующий код Lingo.
on ExecuteAlert doAlert end
10. Если окно Message не открыто, откройте его, выбрав Window | Message. Напечатайте команду индивидуального обработчика ExecuteAlert и нажмите клавишу Enter. Director исполнит обработчик ExecuteAlert, который, в свою очередь, исполнит обработчик doAlert.

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

Подробнее об обработчиках событий

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

Обработчики событий являются командами языка Lingo, из которых составляются процедуры или группы процедур. Перед обработчиком события ставится слово on и имя сообщения или события, на которое должен отреагировать обработчик (например, on mouseUp). Обработчики событий также называются процедурами или подпрограммами. Ниже перечислены правила присвоения имени обработчику события.

Оно должно быть алфавитно-цифровым. Оно должно начинаться с буквы. Оно должно быть одним словом.

Ниже приведен пример обработчика события. on Event Lingo statements //Операторы Lingo end
А вот еще один пример обработчика событий. on mouseUp Alert «Click OK to continue» end
Если обработчик одного и того же события подключен к спрайту, элементу труппы, кадру и/или фильму, то будет исполняться только один из этих обработчиков. Иерархия (очередность приоритетов) исполнения Director'ом обработчиков событий следующая.

1. Спрайт.

2. Элемент труппы.

3. Кадр.

4. Фильм.

Если только что созданная вами

Если только что созданная вами реакция на событие не выбрана для спрайта прямоугольника, то выберите myBehavior из ниспадающего меню.
13. Убедитесь в том, что на Control Panel установлен режим воспроизведения Loop. Щелкните по кнопке Play на Control Panel. Когда вы щелкнете по прямоугольнику мышью, то будет вызван обработчик события on mouseDown. Реакция на событие содержит скрипт Alert, который будет исполняться при щелчке мыши. Щелкните по прямоугольнику, чтобы исполнить ваш новый скрипт. Фильм Director'а будет показывать окно предупреждения каждый раз, когда вы щелкаете по прямоугольнику!

Нет необходимости заканчивать обработку события

Нет необходимости заканчивать обработку события указанием операции обработчика в конце (end mouseUp). Тем не менее, это помогает увидеть, где заканчивается данный обработчик. Необходимость в этом становится очевидной, когда в скрипте содержится несколько операций обработки.
7. Введите вторую строку скрипта так, чтобы по окончании написания скрипт выглядел следующим образом.
on mouseUp Alert «Click OK to continue» end
8. Щелкните по кнопке Recompile All Modified Scripts. Щелкните по X, чтобы закрыть окно.

9. Щелкните по кнопке Play внизу сцены. Щелкните по прямоугольнику, чтобы исполнить новый скрипт. Фильм Director'а будет издавать звуковой сигнал и будет открывать диалоговое окно предупреждения каждый раз, когда вы щелкнете по прямоугольнику.

10. Для удаления скрипта труппы, откройте скрипт труппы, как указывалось ранее. Выделите весь текст в окне Cast Script и нажмите клавишу Delete. Закройте окно.

Практическое упражнение 10 1 Использование окна Message

Практическое упражнение 10.1: Использование окна Message

Окно Message (Окно Сообщений) является полезным инструментом для тестирования скриптов в Director'e. Вы можете использовать окно Message для вызова обработчиков событий или для просмотра сообщений, активированных командами. В этом упражнении вы научитесь работать с окном Message.

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

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

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

2. Обратите внимание на следующие особенности завершенного фильма.

а) На сцене и в партитуре нет спрайтов.

б) В окне Cast имеется скрипт фильма.

в) В окне Cast дважды щелкните по элементу труппы Movie Script, чтобы посмотреть скрипт фильма. Закройте окно.

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

3. Откройте окно Message, выбрав Window | Message.

4. Напечатайте ExecuteAlert и нажмите клавишу Enter. Фильм Director'a издаст звуковой сигнал, откроется окно предупреждений, и, после того как вы щелкнете по кнопке ОК, в окне Message появится сообщение «You just activated an Alert dialog box!» («Вы только что активировали диалоговое окно предупреждений!»).

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

На рис. 10.10 показано окно Message, которое вы будете использовать для отображения сообщений на сцене в этом упражнении.

События определенные в системе

События, определенные в системе

События, определенные в системе, также называются встроенными событиями. В таблице 10.1 приведены обработчики событий Director MX. Некоторые события будут обрабатываться, только если они находятся в определенных типах скриптов. Primary Events (Основные События) могут использоваться во всех типах скриптов. «Галочками» отмечены связи событий и скриптов37.

Встроенные обработчики событий

Таблица 10.1. Встроенные обработчики событий

Обработчик события	Основное событие	Событие спрайта	Скрипт труппы	Скрипт кадра	Скрипт фильма
prepareMovie	&nbsp	&nbsp	&nbsp	&nbsp	V
prepareFrame	&nbsp	&nbsp	&nbsp	V	&nbsp
startMovie	&nbsp	&nbsp	&nbsp	&nbsp	V
stopMovie	&nbsp	&nbsp	&nbsp	&nbsp	V
beginSprite	&nbsp	V	&nbsp	V	&nbsp
EndSprite	&nbsp	V	&nbsp	V	&nbsp
enterFrame	&nbsp	V	&nbsp	V	V
exitFrame	&nbsp	V	&nbsp	V	V
mouseDown	V	V	V	V	V
MouseUp	V	V	V	V	V
mouseEnter	&nbsp	V	V	&nbsp	&nbsp
mouseLeave	&nbsp	V	V	&nbsp	&nbsp
mouseUpOutside	&nbsp	V	V	&nbsp	V
mouseWithin	&nbsp	V	V	&nbsp	V
rightMouseDown	V	V	V	V	V
rightMouseUp	V	V	V	V	V
KeyDown	V	V	V	V	V
keyUp	V	V	V	V	V
timeout	&nbsp	&nbsp	&nbsp	&nbsp	V
idle	&nbsp	&nbsp	&nbsp	V	V

В канале Script выбран кадр

В канале Script выбран кадр 5

3. Вы видите, что часть программного кода уже написана по умолчанию. Введите код, чтобы текст программы выглядел следующим образом.
on exitFrame me go frame(2) end
4. Щелкните по кнопке Recompile All Modified Scripts. Закройте окно Script.

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

6. Давайте удалим этот скрипт кадра. Выделите скрипт кадра (спрайт в канале Script партитуры) и нажмите клавишу Delete.

Вкладка Script и опции ниспадающего меню Туре

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

4. Напечатайте в окне Movie Script следующий скрипт.
On myCustomHandler Put «Hello World» End
5. Щелкните по кнопке Recompile All Modified Scripts и затем закройте окно Script.

6. Откройте окно Message, выбрав Window | Message.

7. Замените текст, имеющийся по умолчанию, напечатав myCustomHandler, а затем нажмите клавишу Enter.

8. Вы увидите, что сообщение «Hello World» переместилось в нижнее окно Message, в соответствии с написанным вами скриптом в шаге 4.

Этот индивидуальный обработчик события может быть вызван из другого обработчика событий скрипта, например, on MouseDown. Мы используем окно Message для тестирования исполнения индивидуальных обработчиков событий, перед тем как использовать их в рабочем фильме Director'а. Напечатав имя обработчика в окне Message, Director выполнил обработчик точно так же, как если бы обработчик был вызван из другого действия.

Он построен на основе слов

Введение

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

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

Ниже следует обзор принципов работы Lingo. Прежде всего, нужен скрипт. Скрипт подобен особому текстовому элементу труппы с программным кодом Lingo, который указывает Director'y, что делать. Затем должно быть событие. Событие может быть каким-либо действием пользователя (например, щелчком мыши или нажатием на клавишу) или каким-либо фактом внутри самого Director'a (например, вхождением головки в определенный кадр).

Когда событие зафиксировано, Director ищет в скриптах команду-обработчик этого события. Обработчик, в свою очередь, приказывает Director'y запустить соответствующий скрипт. Ниже приведены примеры обработчиков событий.

on mouseDown (по нажатию кнопки мыши) on keyDown (по нажатию клавиши) on enterFrame (по вхождению в кадр)
Когда Director находит обработчик, связанный с данным событием, то он входит в скрипт через этот обработчик и исполняет все команды, найденные в скрипте. Скрипт содержит список команд, которые указывают Director'y, что делать. Director ищет и читает скрипты в иерархической последовательности.

Например, вам может понадобиться, чтобы появились кнопки «Вперед» и «Назад», ведущие себя как трехмерные объекты. Они должны «утапливаться» (выглядеть нажатыми, или включенными) и становиться «выпуклыми» (выглядеть выключенными), когда пользователь щелкает по ним. Вы ознакомились с этим типом реакции кнопок в главе 9. Для создания иллюзии трехмерности и движения вы можете подключить к каждой кнопке скрипт с несколькими обработчиками событий, который бы обеспечивал отображение нажатого и отжатого состояний. Вы также можете использовать Lingo для создания щелкающего звука при щелчке по кнопке. Позднее в этой книге вы будете использовать обработчики событий on mouseDown и on mouseUp для создания таких иллюзий.

Реакции на события являются автономными скриптами, которые уже созданы для вас с помощью Lingo. Реакции на события могут перетаскиваться в скрипт спрайта или скрипт кадра, как вы делали это в главе 9. В панели Library (Библиотека) имеется ряд заранее созданных реакций'на события. Эта глава поможет вам начать работать с Lingo. К концу главы вы сможете писать основные скрипты:

Скрипты Lingo. Скрипты спрайтов. Скрипты трупп. Скрипты кадров. Скрипты фильмов.

Знакомство с обработчиками событий

Перед погружением в Lingo, давайте кратко взглянем на события, вызывающие реакции на них. Событие - это действие, происходящее во время воспроизведения фильма. Ниже приведен пример простого скрипта Lingo, запускаемого событием.
Event: User clicks the mouse (mouseDown) Handler: on mouseDown Lingo Script: Put «You just clicked the mouse!» Lingo Script: Alert «Click OK to continue» End Handler: end mouseDown (Событие: пользователь щелкнул мышью(mouseDown) Обработчик: по щелчку мыши Скрипт Lingo: Вывод: «Вы только что щелкнули мышью!» Скрипт Lingo: Предупреждение: «Щелкните по ОК, чтобы продолжить» Конец обработки: Конец обработки события mouseDown.
В этом примере при щелчке пользователя кнопкой мыши происходит событие, называемое mouseDown. Затем Director ищет обработчик on mouseDown. Когда Director прочитает обработчик on mouseDown, то он исполняет скрипт, содержащийся в этом обработчике. В данном обработчике имеются две команды скрипта: Put и Alert (Вывод и Предупреждение). Команда Put читает следующий за ней скрипт и помещает текст «You just clicked the mouse!» в окно Message. После того, как Director исполнит первую строку, он продолжает читать все следующие строки, исполняя их одну за другой. Следующей строкой скрипта в данном случае является Alert «Click OK to continue». Director вызывает системный звуковой сигнал и отображает диалоговое окно предупреждения. Последняя строка end mouseDown сообщает Directory о том, что обработка события закончена.