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

Но на этом все сходства заканчиваются, основное отличие между кнопками и видеоклипами заключается в том, что временная шкала кнопок всегда состоит только из четырех кадров, каждый из которых имеет свое название. Давайте сначала научимся создавать и редактировать кнопки. Кнопки как и другие типы символов можно создавать нажав сочетание CTRL+F8 или нрисовать что-нибудь на полотне, а затем конвертировать в символ кнопки с помощью клавиши F8. Итак, нажмем CTRL+F8, дадим имя символу Button 1, назначим также тип Button и щелкнем по кнопке ОК. Теперь мы вошли в режим редактирования кнопки.

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

экземпляр другого типа. Но чаще всего для кнопок используются прямоугольные или округлые формы. Выберем инструмент прямоугольник, сбросим цвет контура, щелкнем по модификатору и в появившемся окне установим радиус скругления углов равным 10. Теперь рисуем. Выберем инструмент Стрелка, выделим объект и с помощью панели Align при активном переключателе To Stage, отцентрируем его относительно начала координат.

Затем займемся кадром Over, которому соответствует состояние кнопки при наведении на нее курсора. Можно клавишей F7 вставит пустой ключевой кадр и нарисовать в нем любое изображение. но проще вставить ключевой кадр клавишей F6. И изменить в этом кадре форму или, скажем, цвет фигуры, нпример на зеленый. Теперь при наведении курсора кнопка должна выглядеть именно так. Аналогичным образом поступим с кадром Down, который отображается, когда пользователь нажимает в области кнопки левую кнопку мыши. Скопируем клавишей F6 предыдущий кадр и изменим цвет прямоугольника на красный.

Кадр Hit - Область наведения никогда не отображается, но часто он очень важен, поскольку именно этот кадр определяет область действия кнопки. Если оставить кадр Hit пустым, то по умолчанию его содержимое считается совпадающим с предыдущим непустым ключевым кадром. Пока не будем ничего рисоват в кадре Hit. В учебных целях изобразим также надписи на кнопке. Перейдем в первый кадр и выберем инструмент Текст. На пнели Properties установим черный цвет, полужирное начертание и выравнивание по центру. Щелкнем на полотне и напишем название кадра.

Закончим ввод выбором инструмента Стрелка. При необходимости подберем подходящий размер шрифта и отцентрируем текст относительно начала координат. Чтобы больше не заниматься выравниванием надписи в других кадрах, поступим следующим образом. Скопируем текст в буфер обмена, затем перейдем во второй кадр и выполним команду Edit Paste in Place - вставить на место. Теперь выберем снова инструмент Текст, щелкнем по надписи и заменим название кадра. Перейдем в третий кадр, вставим сюда скопированное текстовое поле и проделаем аналогичные манипуляции с заменой имени кадра. Все простейшая кнопка готова и можно вернуться к основной сцене. Клавишей F11 отобразим окно Библиотеки и претащим символ кнопки на рабочее полотно.

Теперь протестируем ролик. Когда курсор находится вне кнопки он имеет голубой цвет, т.е. отображается кадр Up. Наведем указатель на кнопку. Вы видите, что она стала зеленой, т.е. отобразился кадр Over. Обратите внимание, что курсор при наведении на кнопку, приобретает вид руки. Если теперь нажать клавишу мыши, то отобразится кадр Down и кнопка станет красной. Закроем тестовое окно. Кстати, говоря, если в меню Control включить опцию

Enable Simple Button, то можно посмотреть как работает кнопка прямо на рабочей сцене. Убедимся, что это так. Довольно удобно. Однако в этом случае объект нельзя выделить и следовательно премещать, масштабировать и вообще производить какие-либо модификации.

Кроме того, эта установка работает, если в кадрах кнопки, содержится только статическая графика. Теперь разберемся подробно с назначением 4 кадра кнопки кадра Hit. Его особенно важно определять если мы используем кнопку сложной формы, например, в виде текста. Выберем инструмент Текст, щелкнем на полотне и введем буквы ОК. Выберем инструмент стрелка и на панели Properties увеличим размер кегля, нажмем клавишу F8, зададим имя, например такое, сокращенное от ButtonText и конвертируем текст в символ кнопки.

Дважды щелкнем по значку нового символа в Библиотеке, скопируем клавишей F6 в кадр Over, содержимое кадра Up и изменим цвет букв на зеленый. Определим также кадр Down и сделаем цвет красным. Кадр Hit также пока определять не будем. Перейдем к основной шкале и протестируем кнопку. В видите, что кнопка реагирует на указател мыши, только в том случае, когда последний находится точно на контуре символов. Центральная область буквы О, а также промежутки между буквами не являются активной областью. Согласитесь, что это не очень то удобно, поскольку при работе с такой кнопкой потребуется хирургическая точность наведения. Давайте исправим положение и создадим область Hit. Войдем в режим редактирования текстовой кнопки, клавишей F6 создадим ключевой кадр Hit.

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

⇐Графические символы и символы видеоклипов | TeachPro WEB-дизайн | Принципы работы со специальными слоями.применение сцен - з.1. общие принципы работы со слоями, опорные слои⇒