PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais ActionScript

Ficha Técnica
Autor: Flash Web Training
Versão: Flash 5
Dificuldade: Intermédio
Data de Publicação: 30/09/2002


Introdução

Neste tutorial vamos explicar como interagir com um filme Flash através de javascript. Para isso vamos controlar um filme com um goto e um play através de um link.

Ficheiro Swf

Clica aqui para a animação começar
 

Downloads:

Flash Player icon Ficheiro Fla e Swf Tutorial em PDF
 

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.

 
Espero que este tutorial te tenha ajudado. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.
 
Ângelo Castanheira
angelo.castanheira@flashwebtraining.com
 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados