[Tutorial]Javascript + flash

Bom hoje vou ensinar uma das maneiras de se trabalha com javascript mais flash.
Existem milhares de maneiras diferentes de como se fazer um javascript conversar com o flash.

Eu vou fazer a mais fácil utilizando o getURL(“javascript”);

Então vamos fazer assim para testar vamos criar 2 botões
E colocar instancias neles de bt1 e bt2, lembrando que para instanciar um botão você deve ir na parte de propriedades e em baixo do campo onde da para trocar para movieclip, botão ou grafico. Você tem um campo de texo e ali que você vai preencher sua instancia.

Feito isso
Crie uma nova camada, clique no primeiro frame e coloque o código:

bt1.onPress = function(){
getURL(“javascript:bo(‘azul’);”);
}

bt2.onPress = function(){
getURL(“javascript:bo(‘cinza’);”);
}

(LEMBRANDO QUE QUANDO COPIAR E COLAR O CÓDIGO DEVE ARRUMAR AS ASPAS!!!)
Bom como podem ver a minha função javascript chama-se bo e eu estou enviando uma string para ele… no caso a palavra azul e a palavra cinza.

Porque dessas palavras??? pois bem eu vou utilizar elas para mudar uma div no html normal 😉
salve seu arquivo, com o nome que quiser.
Vá nas opções de publish, crtl + shift + f12 ou file -> publish settings
Na aba de flash escolha a opção acess only network la em baixo onde tem escrito acess only local.

Assim vai evitar de dar um erro de acesso a internet.

Se você utiliza o dreamweaver abra ele e edite por lá se não tiver… use o bloco de notas mesmo 🙂

Então agora vamos editar o html que foi criado.
No começo do html entre as chamadas <header> e </header> você vai colocar o seguinte código:

<script language=”javascript”>
function bo(str){
alert(str);
if(str == ‘azul’){
document.getElementById(‘cor’).style.backgroundColor=”#0000FF”;
document.getElementById(‘cor’).innerHTML=’azul’;
} else if(str == ‘cinza’){
document.getElementById(‘cor’).style.backgroundColor=”#888888″;
document.getElementById(‘cor’).innerHTML=’cinza’;
} else {
document.getElementById(‘cor’).style.backgroundColor=”#000000″;
document.getElementById(‘cor’).innerHTML=’preto’;
}
}
</script>

Agora no html você vai colocar:

<div style=”float:right;”>
//seu objeto swf aqui
</div>
<div id=”cor” style=”width:300px; height:300px; float:left;background-color:#00FF00; color:#FFFFFF”>
Alouuuuuuuuuu
</div>

E pronto agora só salvar e testar 🙂
Você verá que a div vai mudar de cor conforme você clica nos botões.

Abraços e até a proxima

Utilizando classe externalInterface() AS2

Bom hoje vou ensinar como que se trabalha com a classe externalInterface() do flash
Trata-se de uma classe simples que comunica o flash com o javascript automaticamente ao mesmo tempo.

Então vamos lá
Meu arquivo flash se chama test.fla
O HTML dele foi feito da seguinte maneira:

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>test</title>

<script language=”javascript”>AC_FL_RunContent = 0;</script>

<script src=”AC_RunActiveContent.js” language=”javascript”></script>

<script>

function onFlashReady() {

sendToAS(“another test message”);

}

function callJS(value) {

onFlashReady();

return “Hi Flash.”;

}

function thisMovie(movieName) {

if (navigator.appName.indexOf(“Microsoft”) != -1) {

return window[movieName];

} else {

return document[movieName];

}

}

function sendToAS(value) {

thisMovie(“test”).callAS(value);

}

</script>

</head>

<body bgcolor=”#ffffff”>

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0&#8243; width=”550″ height=”400″ id=”test” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”allowFullScreen” value=”false” />

<param name=”movie” value=”test.swf” />

<param name=”quality” value=”high” />

<param name=”bgcolor” value=”#ffffff” />

<embed src=”test.swf” quality=”high” bgcolor=”#ffffff” width=”550″ height=”400″ name=”test” align=”middle” allowScriptAccess=”always” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; />

</object>

<form name=”form1″ onSubmit=”return false;”>

<input type=”button” value=”Send” onClick=”onFlashReady();” /><br />

</form>
</body>

</html>

E no action script criei um campo instanciado de tf
E o código é:

import flash.external.*;

System.security.allowDomain(“http://localhost&#8221;);

tf.text = “Flash loaded and ready!”;
tf.text += “\nEI available: ” + ExternalInterface.available;
var wasSuccessful:Boolean = ExternalInterface.addCallback(“callAS”, this, func);
tf.text += “\nAdd callback success: ” + wasSuccessful;
greeting = String(ExternalInterface.call(“callJS”, “Hello JS!”));
tf.text += “\nI called Javascript and it said: ” + greeting;

function func(value:String) {
tf.text += “\nJavascript called me, saying: ” + value;
}

E é só galera
Até a próxima