Контекстное меню — это меню в графическом пользовательском интерфейсе, которое появляется при взаимодействии с пользователем, например, при щелчке правой кнопкой мыши. Контекстное меню Flash Player позволяет добавлять пользовательские элементы меню, управлять отображением встроенных элементов контекстного меню (например, «Увеличение» и «Печать») и создавать копии меню.
В этом уроке мы узнаем, как использовать эти предметы.
Окончательный результат предварительного просмотра
Давайте посмотрим на конечный результат, к которому мы будем стремиться:
Щелкните правой кнопкой мыши по различным областям SWF, чтобы увидеть, как меняется контекстное меню.
Шаг 1: Краткий обзор
Мы будем использовать класс ContextMenu для создания приложения, показывающего различные методы и свойства этого класса.
Шаг 2: Создать новый документ
Откройте Flash и создайте новый файл Flash (ActionScript 3.0).
Установите размер сцены 600×300 и добавьте черный радиальный фон (от # 555555 до # 252525).
Шаг 3: Добавить целевой ролик
Мы создадим четыре мувиклипа, каждый из которых при щелчке правой кнопкой мыши отобразит свое контекстное меню.
Выберите инструмент Rectangle Tool (R) и создайте четыре квадрата по 100×100 пикселей каждый, с небольшим количеством надписей внутри. Преобразуйте их в отдельные символы MovieClip и выровняйте их по углам сцены; используйте изображение ниже в качестве руководства. Имена экземпляров выделены курсивом.
Шаг 4: Добавить простые инструкции
Добавьте текст на сцену, чтобы указать пользователю, какое действие выполнить.
Шаг 5: Создайте класс документа
Создайте новый документ ActionScript и сохраните его как Main.as. Это сформирует наш класс документов. Если вы не знаете, как использовать класс документа, прочитайте этот Быстрый совет .
Шаг 6: Начните писать класс документа
Ключевое слово package позволяет вам организовать ваш код в группы, которые могут быть импортированы другими сценариями, рекомендуется именовать их, начиная со строчной буквы, и использовать межстрочные буквы для последующих слов, например, myClasses .
Если вы не хотите группировать файлы в пакет или у вас есть только один класс, вы можете использовать его прямо из исходной папки.
|
1
2
|
package
{
|
Шаг 7: Импортируйте необходимые классы
Мы будем использовать следующие классы, поэтому импортируем их в класс документа:
|
1
2
3
4
5
6
|
import flash.display.Sprite;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
|
Шаг 8: Расширить Спрайт
Мы собираемся использовать специфичные для Sprite методы и свойства, чтобы расширить этот класс.
|
1
2
|
public class Main extends Sprite
{
|
Шаг 9: Определите переменные
Эти переменные мы будем использовать. В основном это экземпляры ContextMenu и ContextMenuItem.
|
01
02
03
04
05
06
07
08
09
10
11
|
/* When a ContextMenu item is created you can specify: the name of the item, whether to use a separator line,
whether the item should be enabled by default, and whether it is visible to the user */
var builtInItems:ContextMenu = new ContextMenu();
var customItemEnabled:ContextMenu = new ContextMenu();
var customEnabled:ContextMenuItem = new ContextMenuItem(‘ActiveTuts+’);
var customItemDisabled:ContextMenu = new ContextMenu();
var customDisabled:ContextMenuItem = new ContextMenuItem(‘Disabled Item’, false, false);
var linkedItem:ContextMenu = new ContextMenu();
var linkText:ContextMenuItem = new ContextMenuItem(‘Go to TutsPlus.com’, true);
var textCM:ContextMenu = new ContextMenu();
|
Шаг 10: написать функцию конструктора Main ()
Эта функция выполняется, когда класс загружен. Он вызывает функции, которые будут обрабатывать элементы ContextMenu.
|
1
2
3
4
5
6
7
8
|
public function Main():void
{
handleBuiltIn();
handleCustom();
handleDisabled();
handleLink();
handleClipboard();
}
|
Мы напишем эти функции в следующих шагах.
Шаг 11: Напишите функцию handleBuiltIn ()
Это функция, которая обрабатывает встроенные элементы. Здесь мы берем buildInItems, ContextMenu, которое мы определили ранее, удаляем встроенные элементы и устанавливаем его как контекстное меню для встроенного квадратного символа.
|
1
2
3
4
5
|
private function handleBuiltIn():void
{
builtInItems.hideBuiltInItems();
builtIn.contextMenu = builtInItems;
}
|
Вы можете увидеть список встроенных пунктов меню здесь .
Кроме того, вы можете включить / отключить определенные пункты меню, используя свойство builtInItems, как показано в следующем коде:
|
1
2
|
var defaultItems:ContextMenuBuiltInItems = myContextMenu.builtInItems;
defaultItems.print = true;
|
Снова, посетите liveocs.adobe.com для списка таких пунктов.
Шаг 12: добавь пользовательский элемент
Чтобы добавить пользовательский элемент в контекстное меню, мы будем использовать две переменные, которые мы создали.
|
1
|
private function handleCustom():void { customItemEnabled.customItems.push(customEnabled);
|
Как вы можете видеть, мы можем push () ContextMenuItem в свойство customItems контекстного меню, потому что это массив.
Шаг 13: добавь отключенный предмет
Эта функция выполняет то же действие, но с использованием параметра customItemDisabled в ContextMenuItem.
|
1
2
3
4
5
|
private function handleDisabled():void
{
customItemDisabled.customItems.push(customDisabled);
disabled.contextMenu = customItemDisabled;
}
|
Это заставляет элемент выглядеть серым и не щелкающим.
Шаг 14: Добавить действие
Мы знаем, как добавить пользовательский элемент в список контекстного меню, поэтому его можно использовать в качестве сообщения или уведомления, но он будет более полезен, если при щелчке можно выполнить действие. Посмотрим, как это сделать.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
//A webpage will be opened when the menu is clicked
private function handleLink():void
{
linkedItem.customItems.push(linkText);
linkText.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onMenuSelect);
link.contextMenu = linkedItem;
}
private function onMenuSelect(e:ContextMenuEvent):void
{
navigateToURL(new URLRequest(‘http://tutsplus.com’))
}
|
Шаг 15: измени контекстное меню буфера обмена
Класс ContextMenuClipboardItems определяет, какие элементы включены или отключены в контекстном меню буфера обмена. Эти параметры используются, когда ContextMenu.clipboardMenu = true и когда объект с фокусом не является TextField.
|
1
2
3
4
5
6
|
private function handleClipboard():void
{
textCM.clipboardMenu = true;
textCM.clipboardItems.selectAll = false;
contextMenu = textCM;
}
|
Обратите внимание, что эти параметры применяются только в Flash Player 10, поэтому их нельзя использовать в Flash CS3 (они могут вызвать ошибку компилятора, если вы попытаетесь их использовать).
Шаг 16: Класс документа
Вернитесь к файлу .fla и на панели свойств установите в поле Class значение «Main», чтобы сделать этот класс документа.
Вывод
Настройка контекстного меню в ваших фильмах или приложениях может расширить его функциональные возможности очень удобным способом, попробуйте!
Спасибо за прочтение!