Создание пользовательского контекстного меню для flash movie используя AS3

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

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



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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



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

Для того, чтобы убрать пункты меню по умолчанию, мы должны создать экземпляр класса 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.

Custom Context Menu

Метод, использованый выше, это простой способ спрятать встроенные пункты меню. Мы можем также спрятать некоторые пункты и оставить другие выбрав их как показано ниже. Для того, чтобы пункт остался видимым в меню, нужно поменять значение 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;

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

Custom Context 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;

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

Custom Context 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;

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

Custom Context 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



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

arrow вернуться к странице статей про Flash