Создание всплывающего меню (pop-up menus)

Процесс создания всплывающего меню требует соблюдения двух условий:

— Включения переключателя Track As Menu Item в окне диалога свойств всех кнопок всплывающего меню. В результате все другие кнопки в меню смогут получать события от мыши.
— Включения в меню большой кнопки, которая закрывает его, когда пользователь отводит курсор в сторону и отпускает кнопку мыши.

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

Создание кнопки для всплывающего меню:

1 Создайте новый символ-кнопку для пункта меню.
2 В Up-кадре нарисуйте прямоугольник залитый белым цветом.
3 Создайте ключевой кадр в Over-кадре
4 Залейте прямоугольник другим цветом для подсветки пункта меню. Кадры Down и Hit определять не надо.

Создание анимационного клипа всплывающего меню

1 Создайте новый символ-клип
2 Поместите образец символа-кнопки, который Вы только что создали, в первой кадр этого анимационного клипа.
3 Двойным нажатием мыши на кнопку, откройте окно диалога свойств и выберете закладку Actions.
4 Нажмите на + (плюс), выберете On MouseEvent из появившегося меню и включите Press на закладке с параметрами. Для указанной линии On (Press), выберете Go To из выпадающего меню. В поле Frame Number введите цифру 2.
Это действие заставит клип перейти к следующему кадру, когда пользователь
нажимает на кнопку. Следующий кадр покажет открытое меню. Применение условия On (Press) вызвано тем, что передача параметра всплывающему меню происходит в момент нажатия, а не отпускания кнопки, так же как и в настоящей кнопке.
5 Двойным щелчком на первый кадр на монтажной линейке (Timeline) откройте окно диалога со свойствами кадра и выберете закладку Actions. Нажмите на + (плюс) и в появившемся меню выберете Go To. Для параметра Frame Number укажите 1.
Это зациклит анимацию на первом кадре до тех пор пока пользователь не нажмет на кнопку. Нажатие на кнопку переместит клип на второй кадр.
6 Создайте ключевой кадр в кадре 2.
7 Создайте несколько образцов символа-кнопки, который Вы сделали ранее.
Выровняйте их в столбик ниже той кнопки, которую Вы создали в первом кадре.
8 Используйте Modify > Align для выравнивания.
9 Добавьте текстовые надписи для каждой кнопки.
10 Дважды щелкните на каждой кнопке включая ту, которую Вы создали в первом кадре. В отрывающемся окне диалога свойств сделайте следующее:

— Откройте закладку Definition (Описание) и включите опцию Track as Menu Item. (Когда Track as Menu Item включено, нажатие кнопки позволяет другим кнопкам получать событие от мыши.)
Перейдите на закладку Actions и выберете те операторы, которые должны исполняться при нажатии кнопки. После них вставьте Go To оператор, который перешлет клип в первый кадр. Выполняемые кнопкой команды могут выглядеть следующим образом:

On (Release)
Trace («Сработал пункт меню»)
Go To and Stop (1)
End On

Оператор Go To закроет меню после того как пользователь сделает свой выбор.
11 Для тестирования меню создайте образец анимационного клипа с всплывающим меню и выберете пункт Control > Test Movie в меню Flash’а.

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

Закрытие всплывающего меню:

1 Создайте новую символ-кнопку.
В кадре Hit создайте ключевой кадр и нарисуйте в нем прямоугольник. Залейте его каким-нибудь цветом. В остальных кадрах Up, Over и Down ничего помещать не надо, т.к. эта кнопка не должна быть видна.
2 Откройте анимационный клип с заготовкой меню в режиме редактирования символа и создайте новый уровень ниже того уровня, в котором работали до этого. Во втором кадре этого уровня создайте ключевой кадр.
3 В этот ключевой кадр поместите образец той кнопки, которую только что сделали, придав ей такие размеры, чтобы кнопка не только перекрывала все меню в открытом виде, но ее края выходили бы за его пределы. Обратите внимание, что эта кнопка, при помещении ее на рабочее поле, выглядит как полупрозрачный объект голубого цвета. Тем самым Flash сигнализирует, что это невидимый объект.
4 Дважды кликните на ней.
5 Включите Track as Menu Item опцию в открывшемся окне диалога свойств и назначьте кнопке команду Go To, которая переведет анимацию назад на первый кадр. Установите курсор на команде On(…) и на закладке свойств включите Roll Over. Теперь кнопка будет срабатывать при движении курсора над ней.

Для тестирования всплывающего меню, создайте образец символа-клипа на рабочем поле и выберете пункт Control > Test Movie в меню Flash’а.

You may also like...