Jonas Martinez – Web Developer

Opa! Depois de muitooo tempo longe do meu blogzinho voltei, ainda preciso alterar o topo e preencher isso aqui de conteúdo!
Chega de papo, vamos ao post do dia.

Hoje explicarei de forma simples como funciona a interoperabilidade (palavrinha grande) entre o Flash Player e o JavaScript em AS3.
Pelo actionscript 3 utilizaremos a classe ExternalInterface do namespace flash.external.
Pelo Javascript, uma simples definição de função e a localização do flash através de ID.

Vamos lá, a idéia é fazer um flash com um campo de texto de entrada(InputText) chamado txtMensagem e com um botão mostrar um alert em JavaScript.

Sendo assim, em ActionScript3 iremos fazer o seguinte, usaremos o método call da classe ExternalInterface.

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

//Importa a classe ExternalInterface no namespace flash.external
import flash.external.ExternalInterface;
 
//Cria a relação evento <-> função ao clicar no botão
btnMostrar.addEventListener(MouseEvent.CLICK, mostrarEmJs);
 
//Criando a função que envia a string digitada para o javascript
function mostrarEmJs (e:MouseEvent):void
{
    //Finalmente usamos a classe ExternalInterface para chamar a função 'mostrar' que está em nosso javascript
    ExternalInterface.call("mostrar",txtMensagem.text);
}

Já em Javascript fazemos o seguinte.

1
2
3
4
5
6
7
8

<script language="javascript">
//Cria a função que mostra a mensagem vindo do Flash
function mostrar (texto)
{
    //Um simples alert
    alert(texto);
}
</script>

Um Exemplo



Agora, que tal o inverso? do JavaScript para o Flash?
Nesse caso, temos em mente um simples campo de formulário para mostrar a mensagem no Flash animado, vamos lá?
Usaremos o método addCallback da classe ExternalInterface
Em ActionScript3 fariamos uma mudança, de Input Text para Dynamic Text no campo que receberá o texto.
Ficaria assim:

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

//Importa a classe ExternalInterface no namespace flash.external
import flash.external.ExternalInterface;
 
//Setamos a função que será o método acessivel por javascript como primeiro parametro e a função que recebe em Flash como segundo parametro.
ExternalInterface.addCallback("enviar", mostrarEmFlash);
 
//Definimos a função em flash, estamos trabalhando com o parametro texto, igual em JavaScript
function mostrarEmFlash (texto:String):void
{
	//Setamos o texto do nosso dynamic text 'txtMensagem'
	txtMensagem.text = texto;
}

Agora em JavaScript faremos assim, localizaremos o movie através de uma pequena função e enviaremos atravez da função enviar.

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

//Função para localizar o objeto do flash, caso seja Internet Explorer ele usa o objeto window, se for qualquer outro, o objeto document
function thisMovie(movieName) {
         if (navigator.appName.indexOf("Microsoft") != -1) {
             return window[movieName];
         } else {
             return document[movieName];
         }
     }
//Função que recebe um valor e envia para o Flash através do método que criamos no AS3, onde FlashRecebe é a id do objeto Flash
function enviarDoForm(valor) {
     thisMovie("FlashRecebe").enviar(valor);
}

Agora, no meu campo de formulário crio uma simples função para o evento “onKeyUp” para mudar no Flash.

<!-- Chamamos a função e passamos como parametro o valor do objeto, no caso o campo de texto -->
<input type="text" name="exemplo" id="exemplo" onkeyup="javascript:enviarDoForm(this.value);" />

Exemplo

Dica: Caso utilize o DreamWeaver e não funcionar, retornar que não é uma função, confira a ID do bloco de “object” que fica dentro do primeiro “object”

OBSERVAÇÃO IMPORTANTE!
é NECESSÁRIO usar <param name="allowScriptAccess" value="sameDomain" /> nas configurações do objeto do Flash

Bem é isso galera! segue abaixo os arquivos de testes para rodar em webserver (local sem webserver ele da erro de segurança pelo flash).
Download dos Arquivos: ExternalInterfaceExample.zip

Qualquer dúvida comentai!
Abraços!