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

Тема в разделе "Флеш", создана пользователем Dogmat, 24 апр 2009.

Статус темы:
Закрыта.
  1. Dogmat

    Dogmat Постоялец

    Регистр.:
    16 фев 2007
    Сообщения:
    122
    Симпатии:
    38
    В этом небольшом уроке, разберем:
    1. Что такое контекстное меню и с чем его едят?
    2. Контекстная магия - как создать своё?




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

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


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

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

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

    В окне ввода кода в первом фрейме пишем следующее:
    Код:
    //создаем новый экземпляр контекстного меню
    var myContextMenu:ContextMenu=new ContextMenu();
    //прячем все меню по умолчанию
    myContextMenu.hideBuiltInItems();
    
    //подменяем корневое контекстное меню на свой экземпляр
    this.contextMenu=myContextMenu;
    
    Теперь наше меню будет выглядеть так:
    minimal.jpg

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

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

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


    Код:
    //создаем новый экземпляр контекстного меню
    var myContextMenu:ContextMenu=new ContextMenu();
    //прячем все меню по умолчанию
    myContextMenu.hideBuiltInItems();
    
    //получаем ссылку на список встроенных менюшек
    var builtInItems:ContextMenuBuiltInItems=myContextMenu.builtInItems;
    // разрешаем показ пункта меню - Print
    builtInItems.print=true;
    
    //подменяем корневое контекстное меню на свой экземпляр
    this.contextMenu=myContextMenu;
    
    В итоге получилось следующее:
    with-print.jpg

    Помимо пункта Печати - там так же присутствуют следующие свойства в переменной 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
     

    Вложения:

    • ContextMenu.zip
      Размер файла:
      605,1 КБ
      Просмотров:
      40
    sevenup, IMPERIAL. и tut нравится это.
  2. Steell

    Steell Создатель

    Регистр.:
    12 янв 2009
    Сообщения:
    23
    Симпатии:
    5
    Это применимо к АС 2.0
    А как будет для АС 3.0, там ведь все на классы завязали
     
  3. Dogmat

    Dogmat Постоялец

    Регистр.:
    16 фев 2007
    Сообщения:
    122
    Симпатии:
    38
    Для AS 2.0 Тоже применимо насколько я помню, эта часть не поменялась.

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

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

    stylehchp Писатель

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

    sevenup Создатель

    Регистр.:
    5 июл 2007
    Сообщения:
    368
    Симпатии:
    143
    Код:
    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);
     
  6. mitien

    mitien Создатель

    Регистр.:
    4 сен 2007
    Сообщения:
    27
    Симпатии:
    0
    Прикрепил в аттач самый простой способ для ас3 -убирает все кроме печати и ставит свой копирайт с сылкой на сайт.
     

    Вложения:

  7. Makc007

    Makc007 Создатель

    Регистр.:
    10 ноя 2008
    Сообщения:
    27
    Симпатии:
    0
    готовое решении где посмотреть?
     
  8. mitien

    mitien Создатель

    Регистр.:
    4 сен 2007
    Сообщения:
    27
    Симпатии:
    0
    там же в аттаче и свф-приер и флашка-сиходник
     
  9. MOZGIII

    MOZGIII Писатель

    Регистр.:
    27 апр 2009
    Сообщения:
    1
    Симпатии:
    0
    Между прочим в AIR меню для трей иконки делается почти таким-же образом
     
  10. zurkis

    zurkis Постоялец

    Регистр.:
    19 ноя 2009
    Сообщения:
    86
    Симпатии:
    8
    немного укороченый варинат, но смысл тот же
     
Статус темы:
Закрыта.