Princípios elementares
Vamos começar por fazer uma abordagem a alguns princípios
elementares necessários para começares a brincar com a interacção
Javascript / Flash, ou seja, saber o que precisas para comunicar com o
filme e como o fazer.
Comecemos por analisar o seguinte script em javascript:
<script>
var IE = navigator.appName.indexOf("Microsoft") != -1;
var meumovie = IE ? window.mov : window.document.mov;
</script>
Pelo facto dos browsers tratarem os objectos de forma diferente precisamos
de tratar as variáveis também de forma diferente, ou seja,
uma para o Internet Explorer e outra para o Netscape.
A primeira linha verifica se o browser é Internet Explorer, se
for guarda na variável "IE" o valor "true"
caso não seja guarda o valor "false".
Na segunda linha vai atribuir um valor à variável "meumovie"
em função do browser detectado. Se for IE o valor é
"window.mov", se for Netscape então é "window.document.mov".
A primeira coisa que devemos explica é o que é o ".mov"
que se encontra no window.mov e no window.document.mov. Na verdade pode
ser o que entenderes, pois será o valor do ID e do NAME das tags
OBJECT e EMBED do teu filme flash.
Como está no exemplo abaixo:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=5,0,0,0" ID=mov
WIDTH=550 HEIGHT=400>
<PARAM NAME=movie VALUE=" oteufilme.swf">
<PARAM NAME=quality VALUE=high>
<EMBED NAME="mov" swLiveConnect=true
src="oteufilme.swf" quality=high WIDTH=550 HEIGHT=400 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/ shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>
É importante também lembrar que é a tag swLiveConnect
a responsável pela permissão ou não da interacção
entre o Javascript e o plugin do Netscape, se “true” é
permitido, se “false” não é. Podes obter informações
mais pormenorizadas numa Technote da Macromedia, vê
aqui.
Criar o filme Flash
Precisamos de começar por criar um filme para a nossa interacção,
para isso vamos criar uma simples animação onde um losango,
ou outro objecto ao teu gosto, vai de um lado para o outro, como no exemplo
abaixo:
Para o exemplo criámos uma animação com 30 frames,
na primeira o losango está parado, devido à action “stop”
inserida na frame 1 da layer actions, na frame 30 inverte o sentido e
na 60 volta para a posição inicial, frame 1, através
da action “gotoAndStop(1)” colocada na frame 60 da layer actions.
Esta animação foi feita com o auxilio de uma “guide
layer”, mas poderás fazer uma animação normal,
o importante é manter as actions que estão nas frames da
layer actions.
Interacção
Vamos agora para a parte interessante, a interacção entre
javascript e o filme flash. Com o script abaixo fazes o gotoAndStop()
para o frame 1, e depois o play() na raiz do filme que é onde está
a nossa animação.
<script>
var IE = navigator.appName.indexOf("Microsoft") != -1;
var meumovie = IE ? window.mov : window.document.mov;
function movieplay() {
meumovie.TGotoFrame("/", 1);
meumovie.TPlay("/");
}
</script>
Agora faz o link <a href=javascript:movieplay()>Clica
aqui para a animação começar<a>
| Dica: A interacção
com o flash ás vezes é um pouco complicada, para quem
trabalha com o javascript pode já se ter deparado com alguns
problemas e sem os entender ter procurado outra saída. Ao fazer
este tutorial deparámo-nos com um problema, se colocasse-mos
o script de javascript a cima das tags de publicação
do flash, a interacção não funcionava, passámos
para baixo das tags, e funcionou perfeitamente. Tem em atenção
esta dica, poderá ser-te útil no futuro. |
Depois de colocares numa página HTML o script de javascript,
o swf e o link basta clicar neste ultimo e a animação começará.
Parece simples, e é, bem como fazer várias outras aplicações,
como por exemplo enviar uma variável de uma form para o Flash,
controlar um movie clip que está num filme através de "tellTarget",
enfim, são possíveis dezenas de outras aplicações
interactivas entre javascript e filmes Flash.
Para ver outras funções de interacção javascript/Flash,
clica
aqui.
|
