leitura do artigo >

21
jan

Deep linking com SWFAddress

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.

Comentários (3) Comentários(4) Categorias Action Script3, Classes, Soluções

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:
screen01

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

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.

http://www.asual.com/swfaddress/resources/

Postado em 21-01-2010 por Leo Cavalcante
em Action Script3, Classes, Soluções

Share/Save/Bookmark

Comentários

  • Igor Amendola disse:
    em 21 de janeiro de 2010

    excelente post!!!! otimo tema…
    parabens, leo! :D

  • Pedro Lins disse:
    em 23 de janeiro de 2010

    Awesome!
    Mais um grande artigo que muita gente gostaria de entender e usar.
    Parabens.

  • Eder Lima disse:
    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! :)

  • Leo Cavalcante disse:
    em 23 de janeiro de 2010

    Valeu mesmo pessoal!

 Escreva um Comentário

Seu nome

E-mail (não será publicado) (obrigatório)

Website

Comente

Security Code: