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