Jonas Martinez – Web Developer

Salve salve!

Se você esteve procurando por um framework em javascript, para te ajudar a lidar com crossbrowser e alguns probleminhas de longaaaaaas chamadas até localizar um objeto, acabou de encontrar, jQuery que tem como slogan “Write less, do more” que em português significa, “Escreva menos, faça mais”.

Com o jQuery é possível fazer animações de estilos CSS, acessar objetos independente do browser e aproveitar os widgets e plugins disponiveis para ele.

Vamos a um exemplo. Imagine que temos um campo de texto, chamado “usuario” e queremos pegar o valor dele…
Em html seria…

1

<input type="text" id="usuario" value="teste">

e em JavaScript…

1
2

var obj = document.getElementById('usuario');
alert(obj.value);

Agora… vamos ver como fica em jQuery. Adicionamos a sua biblioteca através da tag “<script>” e começamos a mágica.

1
2

<script language="javascript" src="jquery.js"></script>
alert($("#usuario").val());

Uala! muito mais prático? Esse é o principal do jQuery, utilizar ‘$’ como ‘getElementById’ sem precisar checar browser etc, ele faz tudo por você, é super leve e dinâmico. Como você deve ter reparado, ele utiliza a mesma forma de seletores CSS para interações, ou seja é possível selecionar todos elementos de uma determinada classe apenas usando $(‘.classe’) além de outras formas, confira em jQuery Selectors. Com ele é possivel fazer toda maracutaia que você vê porai, como drag n drop, ordenar itens etc. Animações de classes além de uma vasta biblioteca de plugins, também recomendo uma busca pelo extjs + jQuery, é possível fazer coisas absurdas! por hoje é só! em breve explico como se anima um elemento e como ordenar items! Até a próxima!

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!