Macromedia Flash

Výuka Flash (24.)

Úvodem  |  Výuka Flash |  Odkazy  |  Aplikace  |  Otázky a odpovědi

Kontextové menu

Jednou z dalších novinek, které najdeme ve Flashi verze MX 2004 jsou kontextové menu. Nyní můžeme vytvořit vlastní menu, které se zobrazí po kliknutí pravým tlačítkem nad animací, tlačítkem nebo textovým polem. Této vlastnosti můžeme využít zejména pokud budeme vytvářet uživatelsky zajímavější rozhraní. Nyní můžeme do kontextového menu přidávat nové položky, oddělovací pruhy atd. Jako příklad si můžete vyzkoušet následující ukázku.

Třída ContextMenu

Hlavní činnost obstarává třída ContextMenu, která umožňuje vytvoření nového kontextového menu. Pro vytvoření nového menu musíme nejprve vytvořit novou instanci třídy ContextMenu.

// Vytvoření instance
var testovaciMenu:ContextMenu = new ContextMenu();

Nyní můžeme pracovat s touto instancí a přidávat nové položky do menu pomocí vlastnosti CustomItems. Každou položku charakterizuje třída ContextMenuItem, pomocí které můžeme nastavit vlastnosti přidávané položky. Nové položky se zobrazí vždy nahoře a musí obsahovat alespoň jeden znak (mezery, zalomení a jiné znaky jsou ignorovány). Maximální délka položky je 100 znaků. U každé nové položky můžeme nastavit následující vlastnosti.

• caption - Název (text) nově přidané položky.
• enabled - Specifikuje, zda budeme moci tuto položku vybrat nebo ne.
• separatorBefore - Umožňuje přidat nový oddělovací pruh před položku.
• visible - Umožňuje nastavit viditelnost položky.

Nyní přidáme novou položku do našeho testovacího menu pomocí vlastnosti CustomItems. Pro přidání využijeme metodu push, protože pracujeme s polem.

// Vytvoření instance
var testovaciMenu:ContextMenu = new ContextMenu();

// Přidáme novou položku u které nastavíme všechny vlastnosti na hodnotu true
testovaciMenu.customItems.push(new ContextMenuItem("První položka", vyberPolozku, 
true, true, true));

Abychom mohli reagovat na událost, kdy uživatel klikne na námi přidanou položku, tak jsme specifikovali jako druhý parametr konstruktoru ContextMenuItem událost vyberPolozku:

// Vytvoření instance
var testovaciMenu:ContextMenu = new ContextMenu();

// Přidáme novou položku u které nastavíme všechny vlastnosti na hodnotu true
testovaciMenu.customItems.push(new ContextMenuItem("První položka", vyberPolozku, 
true, true, true));

// Událost po klinutí na položku
function vyberPolozku(objekt:Object, menu:ContextMenu)
{
	trace("Kliknutí na položku");
}

První parametr obsahuje odkaz na objekt, nad kterým bylo vyvoláno kliknutí tlačítka a druhým parametrem je odkaz na kontextové menu, pomocí kterého můžeme zpětně nastavit jeho vlastnosti.

Nyní již stačí jenom přiřadit naše nové kontextové menu existujícímu objektu (tlačítko, textové pole, movie clip).

// Vytvoření instance
var testovaciMenu:ContextMenu = new ContextMenu();

// Přidáme novou položku u které nastavíme všechny vlastnosti na hodnotu true
testovaciMenu.customItems.push(new ContextMenuItem("První položka", vyberPolozku, 
true, true, true));

// Událost po klinutí na položku
function vyberPolozku(objekt:Object, menu:ContextMenu)
{
	trace("Kliknutí na položku");
}

// Přiřadíme naše menu hlavnímu klipu
_root.menu = testovaciMenu;

Po spuštění klipu a kliknutím pravým tlačítkem na jeho plochu se nám zobrazí menu a v něm naše nová položka. Avšak spolu s naší položkou se zobrazí i spousta dalších, které si tam nepřejeme. Využijeme tedy metody hideBuiltInItems() třídy ContextMenu, která odstraní všechny ostatní položky kromě Settings a Debugger v debug módu.

// Vytvoření instance
var testovaciMenu:ContextMenu = new ContextMenu();

// Přidáme novou položku u které nastavíme všechny vlastnosti na hodnotu true
testovaciMenu.customItems.push(new ContextMenuItem("První položka", vyberPolozku, 
true, true, true));

// Událost po klinutí na položku
function vyberPolozku(objekt:Object, menu:ContextMenu)
{
	trace("Kliknutí na položku");
}

// Přiřadíme naše menu hlavnímu klipu
_root.menu = testovaciMenu;

// Skryjeme ostatní položky
testovaciMenu.hideBuiltInItems();

Na závěr si ještě ukážeme, že můžeme některé z vestavěných položek přidat nebo skrýt individuálně. Právě k tomuto slouží vlastnost builtInItems třídy ContextMenu, pomocí které můžeme nastavit viditelnost položek save, zoom, quality, play, loop, rewind, forward_back a print.

// Vytvoření instance
var testovaciMenu:ContextMenu = new ContextMenu();

// Přidáme novou položku u které nastavíme všechny vlastnosti na hodnotu true
testovaciMenu.customItems.push(new ContextMenuItem("První položka", vyberPolozku, 
true, true, true));

// Událost po klinutí na položku
function vyberPolozku(objekt:Object, menu:ContextMenu)
{
	trace("Kliknutí na položku");
}

// Přiřadíme naše menu hlavnímu klipu
_root.menu = testovaciMenu;

// Skryjeme ostatní položky
testovaciMenu.hideBuiltInItems();

// Zobrazíme print položku
testovaciMenu.builtInItems.print = true;

Pro kopírovaní obsahují třídy ContextMenu a ContextMenuItem metodu copy(), pomocí které můžeme zkopírovat jednotlivé menu.

Celý příklad je možné si stáhnout zde.

Závěr

Pro tento díl to bude vše. V příštím díle budeme pokračovat v poznávání Flashe.