Uma prática muito boa a se adotar no desenvolvimento Flash é o uso de deep linking, ela ajuda no SEO da sua aplicação, você pode usar os botões de avançar e retroceder dos navegadores e suas páginas são incluídas separadamente no histórico e buscadores.
Aqui vai uma metodologia da aplicação dessa biblioteca. Primeiro, baixe-mos-na (eu falo bonito).
Também faremos uso do SWFObject que foi explicado pelo Igor, nesse post.
Nosso projeto ficará o seguinte:
Uma pasta comum para ele chamada swfaddress, dentro dela uma pasta src para os arquivos fonte e uma pasta js para o SWFAddress e o SWFObject.
Dentro da pasta src, teremos o FLA principal (Main.fla), a Document Class (Main.as) e a classe de navegação entre estados (ColorSquare.as).
A aplicação é bem simples, tenho um quadrado que muda de cor conforme a seta apertada no teclado. Mas a implementação não é simplesmente mudar de cor, esse quadrado altera estados em sí que são MovieClips e pode haver qualquer outra coisa dentro deles. Esse tipo de metodologia de alteração de estados é um Design Pattern chamado State, aqui você verá um exemplo mínimo dele.
Bom, vamos criar nossas cores-estados, são MovieClips com Shapes de cores diferentes, usaremos vermelho, verde a azul:

Junte-os e transforme-os em um MovieClip que chamaremos de Color Square, também ligaremos a classe ColorSquare.as:

Na ColorSquare.as veremos nosso exemplo de State que será controlado pelo SWFAddress.
Temos um Array com todos os estados, uma String que armazena o estado atual, get e set pra manipulação da variável de estado em um método com a lógica de alteração:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | package { import flash.display.MovieClip; import flash.display.Sprite; public class ColorSquare extends Sprite { private var _states:Array = ["red", "green", "blue"]; private var _state:String = _states[0]; public var red:MovieClip, green:MovieClip, blue:MovieClip; public function ColorSquare() { } private function changeState():void { if (_states.indexOf(_state) > -1) //Verifica se o estado existe { setChildIndex(getChildByName(_state), numChildren - 1); } else { /** * Se não existir, você pode mandar * para o primeiro estado ou criar um estado de erro 404 */ state = _states[0]; } } public function get state():String { return _state; } public function set state(value:String):void { _state = value; changeState(); } } } |
Agora nossa classe Main.as, com o uso do SWFAddress e a navegação por teclado:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | package { import com.asual.swfaddress.SWFAddress; import com.asual.swfaddress.SWFAddressEvent; import flash.display.Sprite; import flash.events.KeyboardEvent; public class Main extends Sprite { public var colorSquare:ColorSquare; public function Main() { /** * Change é evento de altereção da Hash * quando o valor dela é alterado esse evento é disparado * ele é usado para manipulação tanto interna como externa da Hash * Há como separar com os eventos Internal Change e External Change * para enteder melhor veja a Doc da SWFAddress no site. */ SWFAddress.addEventListener(SWFAddressEvent.CHANGE, address); stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown); } private function address(event:SWFAddressEvent):void { /** * Aqui a gente pega o valor da Hash que veio na URL * a propriedade pathNames que vem com o evento SWFAddressEvent * é um Array com os valores da Hash separados pela barra "/" * * Setamos o estado do Color Square apartir do primeiro valor que veio na Hash do endereço * E Vualá... Sempre que houver alteração na Hash esse método é executado * alterando o estado do nosso componente. */ colorSquare.state = event.pathNames[0]; } private function keyDown(event:KeyboardEvent):void { /** * setValue é o método da SWFAdress que usamos para alterar o valor da Hash. * No switch comforme a seta apertada, no setamos outro valor. */ switch (event.keyCode) { case 37: //Left Arrow - Red SWFAddress.setValue("red"); break; case 38: //Up Arrow - Green SWFAddress.setValue("green"); break; case 39: //Right Arrow - Blue SWFAddress.setValue("blue"); break; } } } } |
Inserir o SWFAddress no HTML também é super fácil, é só criar um elemento de script e referenciar ao JS:
<script src=”js/swfaddress.js” type=”text/javascript”></script>
E na barra de endereços do browser, ficará:
www.exemplo.com/#/red
Se for inserido um valor na Hash que não corresponde com o estado de um componente ou algo que era não era esperado, você pode filtrar como foi explicado no comentário da classe ColorSquare.as. No nosso exemplo, a gente manda pro primeiro estado, o vermelho.
O SWFAddress também podem usado com AJAX e essa solução de Deep linking com Hash na barra de endereços é usada por todo tipo de comunicação assincronica. O Flex da suporte a essa metodologia com a classe BrowserManager.
Vale lembrar que essa biblioteca vai muito além disso, métodos como getBaseURL, href e popUp tornam a comunicação do ActionScript com o JavaScript unica e fácil. Com SWFAddress você pode também mudar o texto da barra de status dos navegadores.
Clique aqui para baixar os arquivos de exemplo.
Update – 23/01/2010
Entrei em contato com a Asual, a equipe que desenvolve o SWFAddress, e eles linkaram esse artigo na parte de resources do site. Moralzinha pra gente, único artigo em pt-BR.

em 21 de janeiro de 2010
excelente post!!!! otimo tema…
parabens, leo! :D
em 23 de janeiro de 2010
Awesome!
Mais um grande artigo que muita gente gostaria de entender e usar.
Parabens.
em 23 de janeiro de 2010
Ae Leooo!!!
Sabia que você ia colocar um post legal sobre SWFAddress, é muito útil e o pessoal vai curtir.
Parabéns pelo excelente post! :)
em 23 de janeiro de 2010
Valeu mesmo pessoal!
em 11 de fevereiro de 2010
Existe a possibilidade de fazer essa navegação em vários níveis (exemplo: http://www.meusite.com.br/contato/rh )
Obrigado pela matéria, abraços!
Marcelo
em 31 de março de 2010
Sim, os níveis de navegação fica a critério de como você vai mapeá-los depois.
Você pode ficar mais livre e trabalhar como se fossem argumentos via GET mas dum jeito “amigável” e melhor indexável.
Um exemplo, a Zend Framework trabalha os argumentos usando classes de rota e os parâmetros vem prontos para trabalhar no MVC, (/controller/view/model) > (/produtos/menor-preco/notebooks)
em 1 de abril de 2010
Muito bom mesmo, ainda não entendia bem como usar esse recurso.
Vlw pela ótima explicação Léo.
\o
em 18 de outubro de 2010
veeeery gooodd
em 14 de março de 2011
E como ficaria pra usar com AS 2.0 e chamando os swf de fora?
em 14 de março de 2011
Recomendo você procurar o Gaia Framework Éderson, tem 2 anos que eu não digito uma função sequer em As2.
A documentação do SWFAddress também tem informações de como trabalhar em as2.
:)
em 15 de março de 2011
Então.. eu dei uma olhada na documentação do SWFAdress porém os exemplos só tem instanciados internamente e não chamando SWF’s de fora…
em 15 de março de 2011
vou dar uma olhada nesse Gaia..