iMasters | Por uma internet mais criativa e dinâmica

• ActionScript
• Flash

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 2 comentários

Muitas vezes precisamos que o Flash e o navegador se comuniquem, e, para isso, poderíamos usar JavaScript no navegador e o fscommand no Flash. Mas seria necessário colocar uma rotina especial em JavaScript e VBScript para realizar essa interação. Porém, isso não é mais necessário, pois agora podemos usar a classe ExternalInterface, que nos permite uma manipulação com o HTML ou um aplicativo desktop. Neste artigo, vamos usar essa classe para uma comunicação com o navegador através do JavaScript.

Verificando o navegador

Podemos dizer que a classe ExternalInterface não está embutida no Flash, como, por exemplo, a classe MovieClip; por essa razão, é necessário importá-la antes de usar. Então, colocamos uma caixa de texto dinâmica no palco e a instanciamos como “mensagem_txt”. Em seguida, colocamos esse script no frame:

// Importando o pacote external.
import flash.external.*;
// Exibimos na caixa de texto se o navegador tem ou não acesso a esse recurso.
mensagem_txt.text = ExternalInterface.available;

Salve o arquivo. Agora geramos o swf e o HTML; vamos abrir no navegador e pronto: saberemos se o navegador tem acesso a esse recurso ou se precisaremos atualizá-lo. Isso não significa que irá funcionar testando em nossas máquinas, e sim na web. Para que funcione em navegação local, precisamos dar permissão especial para isso e, para dar esse acesso, damos um clique com o botão direito do mouse sobre o swf no navegador e vamos em “Settings...”. Em seguida, clicamos em “Advanced...” e, por fim, em “Global Security Settings Painel”. Depois disso, pode demorar um pouco para carregar a página.

Por fim, veremos uma tela como esta acima, em que poderemos escolher uma lista de arquivos ou diretórios em nossa máquina, onde podemos dar as permissões. Mas isso não é necessário, a não ser que queiramos que um aplicativo tenha esse acesso em nosso computador. Já para a web, isso não é necessário, isto é, uma vez acessado de um servidor na internet, e não diretamente de nossos computadores, esse procedimento não é necessário. Agora, fazer isso não significa que demos permissão para funcionar em qualquer lugar, e sim apenas em nossos computadores; cada usuário que utilizar o arquivo teria de dar essa mesma permissão. Por essa razão, não acredito que seja realmente necessário, já que nesse caso queremos que funcione na web, e não por um diretório local.

Flash executando métodos no JavaScript

Agora que já sabemos como verificar se o usuário pode ou não usar esse recurso, faremos com que o Flash envie dados para o JavaScript e receba um retorno. Veja o exemplo abaixo: digite um texto e clique em enviar.

Para obtermos esse resultado, primeiro vamos colocar o script a seguir no frame, e também colocaremos no palco uma caixa de entrada instanciada como "mensagem_txt" e um botão instanciado como "enviar_btn":

// Importando pacote external.
import flash.external.*;
// Vamos usar o método onRelease, que é executado depois de o botão ser pressionado.
enviar_btn.onRelease = function() {
// No método call() definimos o método JavaScript a ser executado e o valor a ser enviado (nesse caso, o valor da caixa de texto). O método call() retorna o valor retornado pelo método JavaScript, o qual estamos exibindo direto na caixa de texto.
mensagem_txt.text = String(ExternalInterface.call("FlashJavaScript", mensagem_txt.text));
// FlashJavaScript é o nome do método JavaScript a ser executado no navegador.
}

Depois de gerar o HTML e o swf, vamos abrir o código fonte do HTML e acrescentar o seguinte método JavaScript:

<!-- Abaixo das tags do Flash, colocamos o botão e o JavaScript. -->
<script language="javascript">
// Método a ser executado pelo Flash.
function FlashJavaScript($parametro){
// Apenas para ficar mais interativo, vamos usar o "confirm" para exibir a variável enviada e verificar se o usuário quer ou não enviar uma variável para o Flash.
if(confirm("Você enviou: " + $parametro + "\n Deseja enviar algo para o Flash?")){
// Se sim, usamos a janela de "prompt" para digitar o valor a ser retornado para o Flash.
var $pronpt = prompt("Retornando dados para o Flash:","digite seu texto aqui");
// Se o prompt tiver algum valor, colocar na variável a ser enviada.
if($pronpt) $parametro = $pronpt;
}
// Retornando um valor para o Flash.
return $parametro;
}
</script>

Tendo colocado o script, é só executar e ver a interação em ação. Agora não são mais necessários scripts intermediários como em VBScript para a comunicação, deixando esse tipo de recurso mais prático e fácil de manipular.

Não podemos deixar de notar que em navegadores como Opera e Firefox (no Internet Explorer isso não ocorre), quando executamos esse exemplo, o tempo de resposta ao se digitar algo na caixa de texto no Flash se perde um pouco, as alterações não aparecem a não ser que passemos o mouse sobre o botão no Flash ou cliquemos no swf, por exemplo. Isso ocorre porque usamos o pronpt e o alert no JavaScript. Se utilizarmos outro meio que não o prompt para definirmos um valor a retornar para o Flash e deixarmos as mensagens para serem exibidas pelo Flash, podemos evitar esse problema.

JavaScript executando métodos no Flash

Continuando, vejamos agora como fazer para que o JavaScript execute um método feito no Flash. Veja no exemplo abaixo que, ao clicar no botão que está no HTML, aparecerá um prompt para definirmos o intervalo de tempo que o círculo vai demorar para se mover. Em seguida, ele executará a função dentro do Flash para fazer o movimento no intervalo de tempo especificado.

Para reproduzir esse exemplo, vamos criar um círculo, transformá-lo em um MovieClip e instanciá-lo como “circulo_mc”. Depois, dentro desse MovieClip, colocamos uma caixa de texto de entrada; por fim, no frame em que se encontra o MovieClip, colocamos este script:

// Importando pacote external.
import flash.external.*;

// Método a ser executado pelo JavaScript.
var MetodoFlash:Function = function($intervalo:String){
// Parar a execução do método, mover caso esteja sendo executado.
clearInterval(verificando);
// Certificando-se de que o intervalo terá um valor numérico
if(isNaN($intervalo) || $intervalo < 1) $intervalo = "1";
// Exibindo valor retornado.
mensagem = $intervalo;
// Executando o método de movimento no intervalo de tempo especificado.
verificando = setInterval(mover,Number($intervalo));
}

// Defina o nome do método JavaScript, que será o equivalente ao do método a ser executado no Flash. Esse nome é o método de acesso JavaScript; não é preciso ter o mesmo nome do método no Flash.
var nomeMetodo:String = "MetodoJavascript";
// Aqui podemos definir o objeto do método, mas neste caso não será necessário.
var instancia:Object = null;
// Nome real do método no Flash a ser executado; ele não deve ficar entre aspas, associando assim o método em si.
var metodo:Function = MetodoFlash;
// O método addCallback retornará true em caso de sucesso ou false em caso de erro, e esse valor colocamos na variável "finalizado".
var finalizado:Boolean = ExternalInterface.addCallback(nomeMetodo, instancia, metodo);
// Associamos uma caixa de texto à variável "mensagem". Essa variável foi associada à caixa de texto que está dentro do MovieClip "circulo_mc". Vamos, então, exibir se tivermos sucesso em fazer essa interação Flash JavaScript.
mensagem = finalizado.toString();

// Método que movimenta o circulo_mc cada vez que é executado.
var mover:Function = function() {
// Coordenada inicial do circulo_mc no palco em relação à posição x.
var pontoInicial:Number = 45;
// Coordenada final do circulo_mc no palco também em relação à posição x.
var pontoFinal:Number = 470;
// O objetivo dessas duas variáveis é determinar o máximo que a imagem poderá se mover tanto para a esquerda quanto para a direita.
// Quantidade de pixels a se deslocar a cada execução.
var velocidade:Number = 10;
// Movendo o circulo_mc.
circulo_mc._x += velocidade;
// Caso ela passe da coordenada final...
if(circulo_mc._x > pontoFinal){
// Mover para a coordenada inicial.
circulo_mc._x = pontoInicial;
mensagem = ""; // esvaziar a variável.
// Parar de executar esse método.
clearInterval(verificando);
}
}

Estamos prontos, então, para gerar o HTML e o swf. Feito isso, vamos abrir o código HTML e colocar o script a seguir abaixo do objeto Flash:

<!-- Abaixo das tags do Flash, colocamos o formulário, botão e o JavaScript. -->
<form>
<label>
<!-- Defina para que o botão execute o método JavaScript, que executará o método associado ao Flash. -->
<input type="button" name="executar" onMouseUp="Executar();" value="executar">
</label>
</form>
<script language="javascript">
// Esse método serve apenas para colocarmos a sintex correta para acessar o objeto Flash.
function verificarNavegador($id) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[$id];
} else {
return document[$id];
}
}
// Esse é o método executado pelo botão.
function Executar(){
// Aqui abrimos o prompt para definir a velocidade do circulo_mc.
var $velocidade = prompt("Defina a velocidade do circulo_mc:","5");
// Por fim, executamos o método que irá executar outro método dentro do Flash e lhe enviamos um valor.
verificarNavegador("javascript_flash").MetodoJavascript($velocidade);
}
</script>

Pronto, agora é só abrir o HTML e ver a interação em ação. São recursos muito úteis, principalmente para manipular janelas, o banner e a interface, quando usamos o Flash para fazer menus, interagir com editores de HTML, entre outras inúmeras aplicações.

Clique aqui para baixar todos arquivos deste artigo.

Até a próxima.

Todos os artigos de Renato Pacheco

2 comentários publicados

• 1. Não roda no IE

  Quarta-feira, 13/06/2007, por Tobias Viotto

  Renato,
  Como vai?
  Realmente você mandou muito bem nessa matéria, mas seu exemplo não rodou no meu IE, só no meu Firefox. Estou fazendo uma aplicação onde uso JS com Flash e estou enfrentando o mesmo problema. Quando o JS vai retornar o conteúdo para o Flash, o campo de texto aparece a palavra null. Não sei pq isso acontece... No Firefox rodou normal... mas no IE não.. Será que não funciona no IE6? Tenho que atualizar?
  Obrigado.

  Responder comentário

• 2. Descobri o porque não roda no IE

  Quarta-feira, 13/06/2007, por Tobias Viotto

  Pesquisei e encontrei a resposta. Para ele não retornar null nas funções vc tem que alterar as tags <OBJECT>, <EMBED> e <param name="allowScriptAccess" que o Flash chama. Em <OBJECT, vc deve adicionar: id="qualquerCoisa".
  <EMBED, vc deve adicionar:
  name="qualquerCoisa"
  <param name="allowScriptAcess, vc deve alterar o value de sameDomain para always. Isso deve ser feito também na tag <Embed>.
  
  É isso aí... Espero ter ajudado.
  
  Um abraço!

  Responder comentário

Sobre o autor

Renato Pacheco é programador e desenvolve projetos se utilizando de banco de dados, PHP, Asp, XML e, principalmente, trabalhando com Flash tanto para multimídia quanto web.

Indique para um amigo

Tags relacionadas

linux yahoo php seguranca apple tecnologia lançamento internet google 3g photoshop gerência celular iphone windows publicidade design desenvolvimento ti mercado youtube brasil microsoft mobile crescimento web

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!