Autor: Rodrigo Gonçalves

Flash CS3
Versão AS: ActionScript 3.0
Versão do Player: Flash Player 9
Package: flash.ui
Classe: public final class ContextMenu
Dificuldade: conhecimentos básicos de funcionamento do Flash, Actionscript 3.0 e lógica de programação.

ContextMenu AS3

Fala Galera! Tranqüilo?!

Vamos ver nesse tutorial como "bloquear alguns itens padrões" do famoso clique-direito do mouse sobre algum arquivo SWF surgindo um Menu o qual o usuário pode manipular Zoom, Quality, Print, etc.
Também conhecido como ContextMenu ou Menu Contextual.
O Flash por padrão tem em seu ContextMenu algumas opções, as quais podemos "desabilitá-las"/escondê-las via Actionscript.

Aqui irei falar duas maneiras/"técnicas" de esconder estes itens padrões do ContextMenu e como criar um item personalizado para este Menu.
Para construir um menu personalizado devemos utilizar duas classes mais notáveis, sendo ContextMenu() e ContextMenuItem(), as quais cada uma possui seus métodos e propriedades.

ContextMenu(), é responsável por informamos um "novo" ContextMenu a qual conseguiremos mostrar novos itens criados.
ContextMenuItem(), é responsável por criar novos itens de fato para o ContextMenu.

Iremos precisar também adicionar "Ouvintes" addEventListener ao item que for criado para ter funções quando for selecionado pelo ContextMenu.

Não entrarei em "grandes detalhes" sobre as partes técnicas. Mas, tentarei explicar seu funcionamento.
Uma sugestão que me ajuda muito é, utilizar a "Ajuda" do Flash Help (Help > Flash Help ou tecla de atalho F1), você poderá tirar muitas duvidas sobre AS3.

Veja um exemplo de ContextMenu, Antes e Depois da personalização:

Antes…

Imagem 1: ContextMenu padrão mostrando os itens.

…E depois…

Imagem 2: Contextmenu personalizado.

Viu?! Viu?!
Supimpa! Não é mesmo?!

As 3 ultimas opções da imagem 2:
Settings…, Show Redraw Regions e Debugger. São padrões do Flash.
A opção Debugger não irá aparecer quando você publicar na internet.
A não ser que, você habilite-o no painel de configurações.
Apenas para conhecimento ou curiosidade você pode habilitar está opção Debugger em File > Publisher Settings >> aba/guia "Flash" >>> na 4º opção em "Options" >>>> marcando Permiting Debugging.
Resumidamente isso permite fazer "depurar/mexer remotamente" no código. Por padrão isso fica desabilitado e manteremos desabilitado em nosso caso.

"Maõs-à-obra". Ou seria melhor "mãos-aos-teclado"?!
Em fim,
vamos ver um pouco de AS3 (Asctionscript 3.0).

Pra facilitar no entendimento dividi por duas Partes. Sendo elas:

- Parte 1: Desabilitando/escondendo os itens do Contextmenu;

- Parte 2: Construindo um menu Personalizado no ContextMenu.

Parte 1: Desabilitando/escondendo os itens do Contextmenu

Abra seu amigo Flash CS3 e crie um novo(File > New… ou atalho Ctrl + N).
Escolha o
documento Flash File (ActionsCript 3.0).

Na 1º camada, clique em seu 1º quadro e abra o painel de Actions(Window > Action ou atalho F9) . Digite:

1

stage.showDefaultContextMenu = false;

Teste o filme (Ctrl + Enter). E você perceberá que o menu fica algo assim como na imagem 2:

Imagem 3: ContextMenu com itens escondidos, apenas os 3 ultimos são padrões do Flash, a qual não podemos desabilitá-los.

Sintaxe: showDefaultContextMenu:Boolean

Inicialmente declaramos o stage (referente ao "palco" do flash), que mostra que está sendo a "raiz" do palco do flash.
Em seguida logo após seu ponto (.) utilizamos uma propriedade da classe Stage chamada showDefaultContextMenu.
Que traduzindo, poderíamos dizer algo assim: "Mostre o Menu Contextual Padrão".
Conforme a sua sintaxe, devemos informar um valor do tipo Boolean, que seria true ou false. Ou seja, um valor verdadeiro(true) ou falso(false).
Em outras palavras mais sinceras, vai mostrar ou não o menu do Flash Player quando clicar com botão direito sobre ele?!
No nosso caso. Não! Optamos por não mostrar os itens e escondê-los. Por isso o valor false.

Com isso você já pode pelo menos esconder os itens mais "pertinentes" do ContextMenu. Caso queira personalizar seu ContextMenu, siga algumas orientações na Parte 2.

Parte 2: Construindo um menu Personalizado no ContextMenu.

Vamos ver como construir um menu personalizado.
Lembrando que as 3 ultimas opções como mostrado anteriormente nas imagens não podem ser escondidas. OK?!

Ainda em seu mesmo arquivo fla. altere a única linha de código que digitamos:

1

stage.showDefaultContextMenu = false;

Por:

1
2
3

var meuContextMenu:ContextMenu = new ContextMenu();
meuContextMenu.hideBuiltInItems();
contextMenu = meuContextMenu

Se você testar o filme (Ctrl + Enter) verá que o resultado é o mesmo que feito na Parte 1 do nosso tutorial.

Explicando:

Na 1º linha criamos uma variável com nome de meuContextMenu do tipo Contextmenu a partir da classe ContextMenu().
Na 2º linha utilizamos um método da classe ContextMenu(), que é o hideBuiltInItems(), que terá seus itens escondidos.
Na 3º linha utilizamos a propriedade da classe Stage, com a contextMenu (com inicial em letra minúsculas) que associa/recebe (=) a nossa variável meuContextMenu. Que como sabemos, é do tipo ContextMenu e terá seus itens escondidos pelo hideBuiltInItems().

Agora altere as 3 linhas digitadas:

1
2
3

var meuContextMenu:ContextMenu = new ContextMenu();
meuContextMenu.hideBuiltInItems();
contextMenu = meuContextMenu

Por:

1
2
3
4
5
6
7
8
9
10
11
12

var meuContextMenu:ContextMenu = new ContextMenu();
meuContextMenu.hideBuiltInItems();
 
var meuItem:ContextMenuItem = new ContextMenuItem("Meu Item Link - ALVO WEB");
meuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, mostraLink);
meuContextMenu.customItems.push(meuItem);
 
function mostraLink (meuEventoTipo:ContextMenuEvent):void {
	var minhaURL:URLRequest = new URLRequest("http://www.alvoweb.com");
	navigateToURL(minhaURL, "_blank");
}
contextMenu = meuContextMenu;

Ao testar o filme (Ctrl+ Enter), você deve ver algo do tipo:

Imagem4: ContextMenu com Item personalizado.

Explicando:

Na 1º linha criamos uma variável com nome de meuContextMenu do tipo Contextmenu a partir da classe ContextMenu().
2º linha utilizamos um método da classe ContextMenu(), que é o hideBuiltInItems(), que terá seus itens escondidos.
4º linha criamos uma variável do tipo ContextMenuItem() que tem seus parâmetros pela sintaxe:

meuMenuItem.ContextMenuItem(caption:String, separatorBefore:Boolean, enable:Boolean, visible:Boolean)

* caption:String - Especifíca o texto que irá aparecer como "item" no ContextMenu. Por padrão deve ser declarado um texto do tipo String.

* separatorBefore:Boolean ( por padrão é = false) - Específica quando utilizar uma barra separadora aparece acima do item que você criar no ContextMenu. Por padrão é desabilitado(false).

* enabled:Boolean (por padrão é = true) — Específica quando o meu Item é habilitado(opaco) ou desabilitado(meio aspecto de transparente) no Contextmenu. Por padrão é habilitado(enable). Esse parâmetro é opcional.

* visible:Boolean (por padrão é = true) — Específica quando o meu Item será visível(se marcado como true) ou invisível( se marcado como false). Por padrão é visivel(true).

5º linha adicionamos um Ouvinte para o meuItem meuItem.addEventListener que verifica quando o item(meuItem) for selecinado pelo tipo de Evento que verifica o Contextmenu, ContextMenuEvent.MENU_ITEM_SELECT, em seguida executa/chama uma função que denominamos de mostraLink, a qual terá um link externo de uma pagina de Web.

6º linha informamos ao nosso ContextMenu (meuContextMenu), utilizando a propriedade customItems.push nosso Item(meuItem) que será adicionado a lista personalizada de ContextMenu.

Na 8º linha temos a função mostraLink que corresponde ao tipo de Evento ContextMenuEvent, quando for chamado pelo Ouvinte addEventListener irá executar o que estiver dentro de suas chaves { }
No nosso caso, determinamos uma variável minhaURL do tipo URLRequest() que recebe entre os parênteses ( ) o valor tipo "String" de um endereço http://www…
Em seguida utilizamos a função/método navigateToURL(que precisa de um endereço que determinamos URLResquest:String a qual recebe em sua variavel minhaURL um link e após sua virgula determinamos o tipo de janela window:String, que irá abrir, no nosso caso abrirá o link em uma janela nova "_blank". Esta parte de janela do link lembra o comportamento de um link HTML.

E na ultima linha, mas não menos importante. Utilizamos a propriedade da classe Stage, a contextMenu (com inicial em letra minusculas) que associa/recebe (=) a nossa variável meuContextMenu. Que como sabemos, é do tipo ContextMenu e terá seus itens padrões escondidos pelo hideBuiltInItems() e agora passará a mostrar o novo Item(meuItem) determinado pela ContextMenuItem().

Em outras palavras você terá seu menu personalizado pelo Context Menu.

Para acrescentar mais itens a esta lista do ContextMenu. Basta inserir mais itens (ex: meuItem2, meuItem3, etc) do tipo ContextMenuItem() e Ouvintes para eles serem verificados quando forem selecionado pelo usuário e executar uma determinada função. Em seguida, criar uma nova função para o mesmo e adicionar o item dentro do meuContextMenu.custom.push(meuItem1, meuItem2, meuItem3, etc) e seguindo uma ordem e assim por diante.

Lembra-se, a ordem do código é importante para a leitura do código AS.

Considerações:
Vimos como esconder opções padrões do ContextMenu e como personalizar o mesmo. Com isso você pode criar um aspecto mais "profissional" em seu projeto Flash.
Nosso topo em Flash do Alvo Web foi utilizado um ContextMenu personalizado.

Abraços e até a próxima!

Rodrigo Gonçalves
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.