Cuando estamos trabajando en una web 100% hecha en Flash, lo que más nos preocupa a los desarrolladores es el SEO, es decir, que dicha web esté correctamente posicionada en los buscadores. El hecho de que los robots de los motores de búsqueda no puedan acceder al contenido de un archivo .swf (salvo, quizás, el caso de Google¹², pero yo no me relajaría demasiado) y, sobre todo, el problema de que una sola URL corresponda a todo el contenido del sitio, pueden acarrear serios problemas a la hora de querer aparecer en las primeras posiciones de los buscadores sin pagar. Ya que el primer punto no depende de nosotros y nada podemos hacer para remediarlo (salvo olvidarnos de Flash), vamos a aprender cómo solucionar el segundo. Para ello, nos serviremos de una pequeña pero potente librería que cambiará totalmente nuestra filosofía a la hora de enfocar nuestros nuevos proyectos: SWFAddress, la cual nos permitirá asignar a cada estado de nuestra película una URL distinta, lo que nos permitirá usar los botones atrás y adelante en Flash, asignar un título a cada sección de la web y agregar una parte concreta a favoritos, entre otras cosas.

Soy consciente de que el tema esta muy mal documentado en castellano; de hecho, yo encontré muy poca información en los buscadores cuando quise aprender a utilizar esta librería (salvo el videotutorial en DeCabeza.net, que me ayudó muchísimo). Además, los ejemplos que hay disponibles para descargar en su sitio web, aparte de estar repetidos, son, en mi opinión, malísimos. Por esta razón me ha parecido conveniente escribir mi propia aportación para gente que esté interesada en mejorar la indexación de sus webs en Flash y que tenga pereza de buscar información en inglés o que simplemente necesite una explicación detallada de cómo implementar la librería de manera sencilla.

Para este apunte voy a utilizar ActionScript 3 (ya hay un ejemplo muy bueno en AS2 en unijimpe), que es el que recomiendo utilizar. Además, necesitaremos también la librería SWFObject para incrustar nuestros archivos .swf en el documento HTML. Si lo deseas, puedes descargar ya los archivos que he utilizado para el apunte para poder comprobar cómo quedan los ejemplos:

Descargar swfaddress.zip
(66,63 KiB)

Introducción: Descargar las librerías SWFAddress y SWFObject

En primer lugar, dirígete al sitio web de SWFAddress: http://www.asual.com/swfaddress/, y haz click en el enlace “Descargar SWFAddress 2.2″ (esa es la última versión en el momento de escribir esto). El archivo contiene varias carpetas, con montones de ejemplos y documentación además de los archivos en sí, pero nos vamos a dirigir al directorio samples y, dentro de este, al de CS3. Esta carpeta contiene un ejemplo de uso de SWFAddress en ActionScript 3, al que puedes echar una ojeada, pero vamos a construir nosotros nuestro propio ejemplo. Para ello, extrae en un mismo directorio las carpetas swfaddress y swfobject y las clases de ActionScript SWFAddress.as y SWFAddressEvent.as. Ahora ya tenemos todo lo necesario para comenzar a trabajar en nuestro mini sitio web en Flash.

1. Preparar el documento Flash

Crea un nuevo documento en Flash con ActionScript 3 con las dimensiones y la velocidad de fotogramas por segundo que consideres convenientes, y titúlalo swfaddress_web.fla. Yo he utilizado el tamaño estándar de Flash, 550 px de ancho y 400 px de alto, y 30fps. Ahora vamos a incluir algunos elementos para que nuestra película tenga la pinta de un microsite en Flash. Yo he agregado los siguientes elementos:

• En una capa, un campo de texto estático con el texto “SWFAddress fácil con Juanlu” que hace las veces de título.
• En otra, tres botones para la navegación, con el texto “Inicio”, “¿Qué?” y “¿Cómo?”, y los nombres de instancia inicio_bt, que_bt y como_bt respectivamente.
• En una tercera, dos campos de texto dinámicos donde cargaremos el contenido.

El aspecto de la película en este momento es este:

Ya tenemos preparada nuestra película; vamos ahora a añadirle funcionalidad.

2. Agregar el código para el manejo de SWFAddress

Vamos a crear un nuevo documento de ActionScript llamado Document.as y se lo vamos a asignar como clase de documento a nuestra película. Para empezar, escribe las siguientes líneas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import SWFAddress;
	import SWFAddressEvent;
 
	public class Document extends Sprite
	{
		var webXMLData:XML;
 
		function Document():void
		{
			// Función constructora
		}
	}
}

No tiene ningún misterio. Ahora, vamos a definir en una variable XML el contenido de la web para después cargar la parte que corresponda mediante tres listener que se activen al hacer clic en cada uno de los botones que tenemos en el escenario. Hay que añadir este código a la clase:

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

function Document():void
{
	// Definimos el contenido de la web
	webXMLData =
 
			/
 
			<![CDATA[Cuando estamos trabajando en una web 100% hecha en Flash, lo que más nos preocupa a los desarrolladores es el <u>SEO</u>, es decir, que dicha web esté <i>correctamente posicionada en los buscadores</i>. Para mejorar este aspecto, nos serviremos de una pequeña pero potente librería que cambiará totalmente nuestra filosofía a la hora de enfocar nuestros nuevos proyectos: <b>SWFAddress</b>, la cual nos permitirá asignar a cada estado de nuestra película una URL distinta.
			]]>
			</content>
		</seccion>
		<seccion>
 
			<url>/que/</url>
			<content>
			<! [CDATA[Qué 			]]>
			</content>
		</seccion>
		<seccion>
 
			<url>/como/</url>
			<content>
			<![CDATA[Cómo 			]]>
 
	;
 
	// Añadimos los listener
	inicio_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
	que_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
	como_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
}
 
function mouseHandler(e:MouseEvent):void
{
	// Manejo de los botones
}

Ahora es cuando viene lo interesante: en la función mouseHandler que acabamos de definir, para no complicarnos más la vida ya podríamos cargar en nuestro campo de texto la sección correspondiente al botón en el que se hizo click, pero con SWFAddress esto no se hace así. Este es el código de la función mouseHandler:

1
2
3
4
5
6
7
8
9
10
11

function mouseHandler(e:MouseEvent):void
{
	var _url:String = (String(e.target.name) == "inicio_bt") ? "/" : "/" + String(e.target.name).replace("_bt", "/");
	// Este código producirá, en función del nombre del botón, esto:
	// nombre_bt --> /nombre/
	// que será lo que tomemos como "url"
	// NOTA: El condicional terciario es para transformar /inicio/ en /, más útil
 
	// Línea clave
	SWFAddress.setValue(_url);
}

Este es un punto importante en el flujo del programa: aunque si ahora probamos la película no notaremos ningún cambio, le estamos diciendo a la clase SWFAddress que estamos en la URL definida en la variable _url. Ahora escribiremos la función que manejará esos cambios de URL, la pieza central de nuestro apunte:

1
2
3
4
5
6
7
8

function Document():void
{
	// Añadimos un listener para la función
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onSWFAddressChange);
	// El valor al inicio es /
 
	// [...]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function onSWFAddressChange(e:SWFAddressEvent):void
{
	// URL actual
	var _url:String = e.value;
 
	// Almacenamos en una variable XMLList la sección actual
	var seccion:XMLList = webXMLData.seccion.(url == _url);
 
	trace("SWFAddress value: " + _url);
 
	// Cargamos el contenido
	contenido.htmlText = seccion.content;
 
	// Cambiamos el título
	titulo.text = seccion.title;
	SWFAddress.setTitle("SWFAddress Fácil - " + seccion.title);
}

El código de la clase Document queda ahora así:

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
65
66
67
68
69

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	import SWFAddress;
	import SWFAddressEvent;
 
	public class Document extends Sprite
	{
		var webXMLData:XML;
 
		function Document():void
		{
			// Añadimos un listener para la función
			SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onSWFAddressChange);
			// El valor al inicio es /
 
			// Definimos el contenido de la web
			webXMLData =
 
					/
 
					<span style="text-decoration: underline;">SEO</span>, es decir, que dicha web esté <em>correctamente posicionada en los buscadores</em>. Para mejorar este aspecto, nos serviremos de una pequeña pero potente librería que cambiará totalmente nuestra filosofía a la hora de enfocar nuestros nuevos proyectos: <strong>SWFAddress</strong>, la cual nos permitirá asignar a cada estado de nuestra película una URL distinta.
					]]&gt;
 
					/que/
 
					/como/
 
			;
 
			// Añadimos los listener
			inicio_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
			que_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
			como_bt.addEventListener(MouseEvent.CLICK, mouseHandler);
		}
 
		function onSWFAddressChange(e:SWFAddressEvent):void
		{
			// URL actual
			var _url:String = e.value;
 
			// Almacenamos en una variable XMLList la sección actual
			var seccion:XMLList = webXMLData.seccion.(url == _url);
 
			trace("SWFAddress value: " + _url);
 
			// Cargamos el contenido
			contenido.htmlText = seccion.content;
 
			// Cambiamos el título
			titulo.text = seccion.title;
			SWFAddress.setTitle("SWFAddress Fácil - " + seccion.title);
		}
 
		function mouseHandler(e:MouseEvent):void
		{
			var _url:String = (String(e.target.name) == "inicio_bt") ? "/" : "/" + String(e.target.name).replace("_bt", "/");
			// Este código producirá, en función del nombre del botón, esto:
			// nombre_bt --&gt; /nombre/
			// que será lo que tomemos como "url"
			// NOTA: El condicional terciario es para transformar /inicio/ en /, más útil
 
			// Línea clave
			SWFAddress.setValue(_url);
		}
	}
}

Ahora sí: si probamos nuestra película, podemos ver cómo el texto de las secciones cambia al hacer clic en cada uno de los botones:

Pero la magia no acaba aquí: la gracia está en que queremos que funcione como una página web. Para eso necesitamos, como no podía ser de otra manera, un documento HTML.

3. Final: el documento HTML

Ahora, para finalizar, vamos a crear el documento HTML en el que insertaremos la película. En un nuevo archivo llamado index.htm escribe este código:

1
2
3
4
5
6
7
8
9

<!-- Importamos las dos librerías necesarias -->
<script src="swfobject/swfobject.js" type="text/javascript"><!--mce:0--></script>
<script src="swfaddress/swfaddress.js" type="text/javascript"><!--mce:1--></script>
 
<!-- Insertamos el contenido Flash -->
<script type="text/javascript"><!--mce:2--></script>
<div id="flashcontent" style="margin: 0 auto">
 
<strong>Necesitas Flash Player. </strong></div>

Y ya hemos terminado nuestro ejemplo. Para comprobar las posibilidades de SWFAddress, sigue el siguiente enlace:

Ver ejemplo terminado de SWFAddress en Flash

Ahora puedes comprobar que, cuando haces clic en las diferentes secciones, además de variar el contenido varía la URL y el título de la página. Esas distintas URL funcionan como una dirección de internet normal: por ejemplo, las puedes agregar a favoritos y acceder siempre que quieras a esa parte de la web que te interesa. Y por si fuera poco, se pueden emplear los botones atrás y adelante del navegador, algo a lo que los usuarios están muy acostumbrados y que agradecerán enormemente al visitar tu sitio.

Aquí tienes los archivos que he utilizado disponibles para descargar:

Descargar swfaddress.zip
(66,63 KiB)

Te animo a que los utilices y a que, si te he ayudado, puntúes este apunte o escribas un comentario. No olvides suscribirte a mi blog por correo o vía RSS si quieres tener noticias sobre mi actividad

¡Muchas gracias!

Notas

1. http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html [↩]
2. http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html [↩]