Команды коннтекстного меню flash по умолчанию позволяют пользователю изменить масштаб и настройки воспроизведения таким образом, что нарушит оригинальную задумку дезайнера. В этой статье мы покажем Вам как создать пользовательское контекстное меню заменяя команды по умолчанию своими собственными. Для этого потребуется использование классов ContextMenuClass и ContextMenuitemClass.

Эта статья разделена на следующие части:
1. Как спрятать пункты меню по умолчанию.
2. Как добавить пользовательские пункты меню.
3. Как добавить функционал в пользовательские пункты меню.

Кликните правой кнопкой мыши на flash ролике, чтобы увидеть пользовательские пункты меню.

Как спрятать пункты меню по умолчанию

Для того, чтобы убрать пункты меню по умолчанию, мы должны создать экземпляр класса ContextMenuClass и затем просто установить его как контекстное меню нашего flash ролика.

Начнем с того, что создадим экземпляр класса ContextMenuClass и дадим ему имя my_menu.

CODE:

var my_menu:ContextMenu = new ContextMenu();

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

CODE:

var my_menu:ContextMenu = new ContextMenu();
	my_menu.hideBuiltInItems();

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

CODE:

var my_menu:ContextMenu = new ContextMenu();
	my_menu.hideBuiltInItems();
	contextMenu = my_menu;

Если мы сейчас протестируетем наш ролик, то увидим, что пункты контекстного меню, такие как zoom и playback settings успешно убраны оттуда. Вы так же должны заметить, что такие пункты как Settings и About Adobe Flash Player не могут быть убраны из контекстного меню. Некоторые добавочные команды, предназначенные для тестирования ролика на ошибки также не могут быть убраны, пока вы тестируете ролик в программе Adobe Flash.

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

CODE:

	var my_menu:ContextMenu = new ContextMenu();
	my_menu.builtInItems.forwardAndBack = false;
	my_menu.builtInItems.loop = false;
	my_menu.builtInItems.play = false;
	my_menu.builtInItems.print = false;
	my_menu.builtInItems.quality = false;
	my_menu.builtInItems.rewind = false;
	my_menu.builtInItems.save = false;
	my_menu.builtInItems.zoom = false;
	contextMenu = my_menu;

Как добавить пользовательские пункты меню

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

CODE:

	var my_menu:ContextMenu = new ContextMenu();
	my_menu.hideBuiltInItems();

	var my_notice = new ContextMenuItem("Alex Design Studio");
	my_menu.customItems.push(my_notice);

	contextMenu = my_menu;

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

Возможно создать несколько пунктов и затем добавить их в пользовательский массив в один прием.

CODE:

	var my_menu:ContextMenu = new ContextMenu();
	my_menu.hideBuiltInItems();

	var my_notice = new ContextMenuItem("Alex Design Studio");
	var my_email = new ContextMenuItem("admin@alexdesignstudio.ru");
	var my_copyright = new ContextMenuItem("Copyright - Alex Design 
    Studio");
	my_menu.customItems.push(my_notice, my_email, my_copyright);

	contextMenu = my_menu;

У вас должно получиться так.

Существует возможность настройки этих пунктов, используя следующие свойства:
1. caption - меняет текст пункта
2. enabled - делает пункт кликабельным
3. separatorBefore - добавляет разделитель перед пунктом
4. visible - показывает или прячет пункт

Эти свойства довольно легко использовать. Например, если мы хотим сделать пункт "Copyright" неактивным и установить разделитель перед ним, то нужно сделать следующее:

CODE

	var my_menu:ContextMenu = new ContextMenu();
	my_menu.hideBuiltInItems();

	var my_notice = new ContextMenuItem("Alex Design Studio");
	var my_email = new ContextMenuItem("admin@alexdesignstudio.ru");
	var my_copyright = new ContextMenuItem("Copyright - Alex Design 
    Studio");

	my_copyright.enabled = false;
	my_copyright.separatorBefore = true;

	my_menu.customItems.push(my_notice, my_email, my_copyright);

	contextMenu = my_menu;

В результате должно получиться так:

Как добавить функционал в пользовательские пункты меню.

Для того, чтобы заставить пункт контекстного меню производить какое-либо действие, когда по нему кликнут, мы должны использовать слушатель событий. Чтобы сделать это, нам просто нужно зарегистрировать пользовательский пункт меню для события MENU_ITEM_SELECT, используя метод addEventListener().

Например, если мы хотим, чтобы пункт my_notice открывал ссылку на домашнюю страницу Alex Design Studio, мы должны создать функцию слушателя событий для исполнения этой задачи и затем зарегистрировать ее следующим образом:

CODE

	var my_menu:ContextMenu = new ContextMenu();
	my_menu.hideBuiltInItems();

	var my_notice = new ContextMenuItem("Alex Design Studio");
	var my_email = new ContextMenuItem("admin@alexdesignstudio.ru");
	var my_copyright = new ContextMenuItem("Copyright - Alex Design 
    Studio");

	my_copyright.enabled = false;
	my_copyright.separatorBefore = true;

	function openLink(e:ContextMenuEvent):void{
		navigateToURL(new URLRequest("http://www.alexdesignstudio.ru"));
		}
	my_notice.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, 
    openLink);

	my_menu.customItems.push(my_notice, my_email, my_copyright);

	contextMenu = my_menu;

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

Перевод с английского языка: Солнцев А.

Оригинал статьи на английском языке:   www.republicofcode.com

Комментарии ВКонтакте