[Уроки] Контекстное меню во Flash

[Dogmat]

В этом небольшом уроке, разберем:
1. Что такое контекстное меню и с чем его едят?
2. Контекстная магия - как создать своё?



Контекстное меню возникает каждый раз когда вы кликаете правой кнопкой на работающем флешплеере(будь то самостоятельный запуск флеш ролика или в браузере). В этом случае может быть два варианта.
1. Контекстное меню состоит из одного не кликабельного элемента - "Movie not loaded"
2. Стандартное контекстное меню флеш ролика.

1ый вариант по понятным причинам нам не интересен и рассмотреть его собственно и нельзя А вот второй вариант мы как раз и разберем.


По умолчанию нам покажется меню следующего содержания


О смысле того или иного пункта в меню вполне можно догадаться, поскольку названия говорящие, если не знаете английский lingvo.yandex.ru в помощь - пригодится

По сути для нашей флешки всё это лишнее и не нужное. Поэтому первое что мы сделаем - избавимся от избыточности. Делается это совсем просто.

В окне ввода кода в первом фрейме пишем следующее:

//создаем новый экземпляр контекстного меню
var myContextMenu:ContextMenu=new ContextMenu();
//прячем все меню по умолчанию
myContextMenu.hideBuiltInItems();

//подменяем корневое контекстное меню на свой экземпляр
this.contextMenu=myContextMenu;

Теперь наше меню будет выглядеть так:


Меньше этого мы уже никак не сделаем

Но что же делать если пару пунктов мне все же нужны?
Ответ прост: Разрешить показ нужных пунктов =)

Например пункт - "Print" - согласитесь штука почти всегда нужная.

//создаем новый экземпляр контекстного меню
var myContextMenu:ContextMenu=new ContextMenu();
//прячем все меню по умолчанию
myContextMenu.hideBuiltInItems();

//получаем ссылку на список встроенных менюшек
var builtInItems:ContextMenuBuiltInItems=myContextMenu.builtInItems;
// разрешаем показ пункта меню - Print
builtInItems.print=true;

//подменяем корневое контекстное меню на свой экземпляр
this.contextMenu=myContextMenu;

В итоге получилось следующее:


Помимо пункта Печати - там так же присутствуют следующие свойства в переменной builtInItems

• forwardAndBack
• loop
• play
• print
• quality
• rewind
• save
• zoom

устанавливая значения true/false для этих свойств этой переменной вы контролируете видимость того или иного пункта.

Теперь пришло время добавить собственные пункты меню и реакцию на клик. Делается это не сложнее чем все предыдущие манипуляции.

Добавим два пункта меню:
1. Наш копирайт
2. Хеллоу ворлд - для "солидарности"


для этого нам нужно создать экземпляр класса ContextMenuItem для каждого нашего пункта и добавить его в уже существующий экземпляр ContextMenu

конструктор следующий:
ContextMenuItem(caption:String, separatorBefore:Boolean = false, enabled:Boolean = true, visible:Boolean = true);

caption - заголовок нашего пункта
separatorBefore - определяет наличие разделительной полоски перед пунктом
enabled - кликабельность пункта
visible - отображение пункта (может быть полезно различным RIA приложениям)

// На сцене добавляем текстовый компонент из левой панельки с инструментами и указываем ID=trace_txt в свойствах этого элемента
// постфикс _txt и еще несколько расширений во Flash Ide позволяют использовать автозаполнение ;)
trace_txt.appendText('Launched\n');

//создаем новый экземпляр контекстного меню
var myContextMenu:ContextMenu=new ContextMenu();
//прячем все меню по умолчанию
myContextMenu.hideBuiltInItems();

//получаем ссылку на список встроенных менюшек
var builtInItems:ContextMenuBuiltInItems=myContextMenu.builtInItems;
// разрешаем показ пункта меню - Print
// builtInItems.print=true;

//определяем переменную
var item:ContextMenuItem;

//  пункт для копирайта
item=new ContextMenuItem('© Nulled.ws');
// подписываемся на клик
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,nulledClickHandler);
// добавляем в наше меню
myContextMenu.customItems.push(item);

// пункт Hello World
item=new ContextMenuItem('Hello World!!!',true);
// подписываемся на клик
item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,helloClickHandler);
// добавляем в наше меню
myContextMenu.customItems.push(item);


//подменяем корневое контекстное меню на свой экземпляр
this.contextMenu=myContextMenu;


function nulledClickHandler(e:ContextMenuEvent):void{
	// переходим на nulled.ws =)
	navigateToURL(new URLRequest('http://nulled.ws'),'nulled.ws window');
}

function helloClickHandler(e:ContextMenuEvent):void{
	trace_txt.appendText('Hello world!\n');
}

Вот и всё. Никаких танцев с бубнами.
Начал с простого по совету tut. Принимаются заявки на туториалы по Flash/Flex (ActionsScript 3.0)

Исходный проект во *.fla

 

[Steell]

Это применимо к АС 2.0
А как будет для АС 3.0, там ведь все на классы завязали

 

[Dogmat]

Для AS 2.0 Тоже применимо насколько я помню, эта часть не поменялась.

По поводу 3.0 - ничего там не завязали =) классы были и в AS 2.0 да функционал расширился, но впринципе ничего сильно кардинального нет. Из Flash IDE пока еще никто не убирал таймлайн - в любой фрейм какой-надо кидай этот код и он будет рабочий.

Последний аттач исходник *.fla формате. Программка Adobe Flash CS3. Можешь качнуть и посмотреть

 

[stylehchp]

А вот в Silverlight народ как-то делает контекстное меню через DOM на джаваскрипте. В этоге вместо стандартного контекстного меню отображается пользовательское.
А во Флэше никак нельзя избавиться от стандартных пунктов меню??? Кто-нить видел такое? Да и вообще можно ли как-нить обрабатывать правую кнопку мыши на AS?

 

[sevenup]

А вот в Silverlight народ как-то делает контекстное меню через DOM на джаваскрипте. В этоге вместо стандартного контекстного меню отображается пользовательское.
А во Флэше никак нельзя избавиться от стандартных пунктов меню??? Кто-нить видел такое? Да и вообще можно ли как-нить обрабатывать правую кнопку мыши на AS?

var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
_root.menu = myMenu;
var myMenuItem1:ContextMenuItem = new ContextMenuItem("Закрыть", func, true);
var myMenuItem2:ContextMenuItem = myMenuItem1.copy();
var myMenuItem3:ContextMenuItem = myMenuItem1.copy();
myMenuItem3.caption = "Мой сайт";
myMenuItem2.caption = "Напишите мне";
function func(obj, menu_item:ContextMenuItem):Void {
if (menu_item == myMenuItem1) {
fscommand("quit", "");
} else if (menu_item == myMenuItem2) {
getURL("mailto:yourmail@yoursite.com");
} else {
getURL("http://yoursite.com");
}
}
myMenu.customItems.push(myMenuItem1, myMenuItem2, myMenuItem3);

 

[mitien]

Прикрепил в аттач самый простой способ для ас3 -убирает все кроме печати и ставит свой копирайт с сылкой на сайт.

 

[Makc007]

готовое решении где посмотреть?

 

[mitien]

там же в аттаче и свф-приер и флашка-сиходник

 

[MOZGIII]

Между прочим в AIR меню для трей иконки делается почти таким-же образом

 

[zurkis]

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();
var my_notice = new ContextMenuItem("Здесь был Вася");
var my_email = new ContextMenuItem("my@mail.ru");
var my_copyright = new ContextMenuItem("Copyright © 2010");
my_copyright.enabled = false;
my_email.enabled = false;
my_copyright.separatorBefore = true;

function openLink(e:ContextMenuEventvoid{
navigateToURL(new URLRequest("http://goodle.com"));
}
my_notice.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);

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

немного укороченый варинат, но смысл тот же