Last.fm

Shoutbox

Llámame

Tablero de mensajes con Flash, XML y PHP

Como pueden ver, en la columna izquierda de esta página hay un Shoutbox o tablero de mensajes, consistente en un mini-chat para mantener conversaciones en línea con los usuarios que están visitando este blog. A continuación les dejo con un tutorial para que ustedes puedan desarrollar algo similar, valiéndose de tecnologías como Flash, ActionScript, XML y PHP.

Alguna de la gente más experta en el tema se preguntará por qué elegí Flash, siendo que existen otras alternativas como usar (X)HTML + PHP dentro de un IFRAME, o bien AJAX. Mis razones son simples: el uso de IFRAME está obsoleto y no es compatible con la norma XHTML 1.1 que estoy usando actualmente; y respecto a AJAX, considero que para implementar un simple widget o accesorio es recurso malgastado, siendo que Flash es lo más adecuado para aplicaciones pequeñas que satisfacen necesidades de segundo plano.

Lo que me hizo tomar la determinación de hacer esto por mi propia cuenta fue el hecho de ver que casi todos los servicios de tablero de mensajes ofrecidos por terceros funcionan bajo IFRAME, y el único que funcionaba con Flash tenía varios fallos que lo hacían inutilizable bajo ciertas condiciones.

Bueno, ahora pongámonos manos a la obra. Para desarrollar esto necesitamos:

• Macromedia Flash MX (si eres usuario de GNU/Linux, FreeBSD, Solaris o cualquier otro sistema basado en POSIX o UNIX, es posible instalarlo a través de WINE).
• Servidor Web con soporte para PHP.
• Si eres novato, experiencia con algún lenguaje de programación como C, PHP o JavaScript.

Para realizar esta aplicación se requiere pasar por dos fases: el diseño de la interfaz y la programación. Comenzaremos con el diseño:

• Iniciamos Macromedia Flash MX, y creamos un nuevo documento de Flash.
• En el panel de propiedades, configuramos el tamaño y el color de fondo.
• Nos vamos al panel de componentes e insertamos, arrastrando hacia el área de trabajo, los siguientes componentes:
  • TextArea (2 instancias)
  • TextInput (1 instancia)
  • Label (2 instancias)
  • Button (1 instancia)

Una vez que tengamos dichos componentes en el área de trabajo, procederemos a nombrarlos. Para ello seleccionamos el elemento y nos vamos al panel de propiedades, en donde aparecerá el lugar para asignar el nombre de instancia:

• Primer TextArea, nombre de instancia mensajes.
• Primer Label, nombre de instancia lblNombre
• TextInput, nombre de instancia nombre.
• Segundo Label, nombre de instancia lblMensaje.
• Segundo TextArea, nombre de instancia mensaje.
• Button, nombre de instancia enviar.

Ahora procederemos a ajustar algunos parámetros de ciertos elemntos. Para ello, seleccionamos el elemento, nos vamos al panel de propiedades y selecionamos la ficha correspondiente para ajustar los parámetros. Aparecerá una tabla conteniendo en la columna izquierda el nombre del atributo, y a la derecha el valor asignado que es posible modificar:

• Elemento mensajes: editable = false, html = true, wordWrap = true.
• Elemento lblNombre: caption = Nombre.
• Elemento lblMensaje: caption = lblMensaje.
• Elemento enviar: caption = Enviar mensaje.

Una vez realizado todo lo anterior, ajustamos la posición y tamaño de los elementos en el área de trabajo, utilizando las herramientas de selección, subselección y transformación libre. Con ello ya tendremos lista la interfaz del tablero de mensajes.

Antes de entrar de lleno en la programación, agregaremos un sonido para que sirva de alerta cada vez que ingrese un mensaje nuevo al tablero. Procedemos a importar a la biblioteca un sonido breve (recomendado de 1 segundo de duración, en formato MP3). Luego nos vamos al panel de biblioteca, en donde hay una lista de los recursos de la aplicación. Seleccionamos el sonido que acabamos de importar, y mediante el menú contextual accedemos a las opciones de vinculación, en donde estableceremos las siguientes propiedades:

• Identificador: Alerta.mp3.
• Vinculación: Exportar para ActionScript.

Con ello ya tenemos un sonido que podremos manejar según lo que programaremos a continuación.

Ahora, viene la parte de programación. Cabe destacar que el lenguaje de programación que utiliza Flash es el ActionScript, el cual es un lenguaje semi orientado a objetos basado en ECMAscript, al igual que JavaScript. Por lo tanto, si conocemos JavaScript, entender ActionScript no será complicado.

Para comenzar a editar el código fuente, seleccionamos cualquier punto del área de trabajo en donde no hayan otros componentes, y lanzamos el panel de acciones (F9). Aparecerá un editor de código para el fotograma actual. En él insertaremos el siguieente código:

 20) {
			/* Se borrarán mensajes viejo hasta mantener 20 o menos */
			datos.firstChild.firstChild.removeNode();
		}
		/* Enviamos los datos al almacenaje y rescatamos la respuesta por el receptor */
		datos.sendAndLoad(base + "mensajes.php", receptor);
		/* Borramo el campo del mensaje escrito debido a que ya se envió */
		mensaje.text = "";
		/* Restauramos el botón */
		this.caption = "Enviar mensaje";
	}
}
/* Función prototipo para mostrar los mensajes en el tablero */
XML.prototype.showXML = function() {
	/* Contamos la cantidad de mensajes alamcenados */
	cantidad = this.firstChild.childNodes.length;
	mensajes.scroll = 1;
	/* Vigilamos el contenido del tablero antes de actualizar */
	anterior = mensajes.text;
	/* Si el tablero estaba vacío, la alerta no sonará */
	if (anterior == "")
		_root.aviso = false;
	tope = (cantidad - 20 > 0)? cantidad - 20: 0;
	/* Vaciamos el tablero */
	mensajes.text = "";
	/* Rellenamos el tablero con el nuevo contenido */
	for (i = cantidad - 1; i >= tope; i—) {
		mensajes.text+= "<" + this.firstChild.childNodes[i].attributes.nombre + "> ";
		mensajes.text+= "" + this.firstChild.childNodes[i].firstChild.firstChild.nodeValue + "\n";
	}
	/* Vigilamos el contenido del tablero después de actualizar */
	actual = mensajes.text;
	/* Si los contenidos antes y después de actualizar son distintos pero el
	tablero no estaba vacío, suena la alerta de nuevo mensaje */
	if (anterior != actual && _root.aviso == true) {
		sonido.start();
	}
	/* Reestablecemos el flag de alerta */
	_root.aviso = true;
}]]>

Una vez creado tal código, procederemos a guardar y publicar el proyecto. Luego crearemos los otros dos archivos necesarios para que la aplicación pueda funcionar:

mensajes.xml

Probando]]>

mensajes.php

]]>

Guardamos estos archivos en el mismo directorio de nuestra aplicación, y para probar su funcionamiento, los colocaremos junto al archivo SWF en un servidor Web, asegurándonos que el archivo mensajes.xml tenga permisos de lectura y escritura para todos los usuarios (CHMOD 666).

Una vez hecho esto, accedemos a la URL del archivo SWF en nuestro servidor, y podremos ver en funcionamiento nuestro propio tablero de mensajes

Espero que este tutorial les haya servido de gran ayuda, y cualquier duda o consulta, háganla mediante los comentarios

Lunes 03 de Septiembre de 2007, 20:48:07
Categorías: Hágalo usted mismo
Comentar...

Actualmente hay 5 comentarios, ¡falta el tuyo!

macloviw, 19 Oct 2007 @17:44:04 dice: #1

hola, hize tu tutorial porque quiero poner un shoutbox flash en mi sitio, me gustaria que me ayudaras porque mi shoutbox no me funciono.

gracias vladimir

rokociber, 06 Feb 2008 @13:24:51 dice: #2

Ey man pon los archivos fuente p' pa poder descargarlos ,rapidshare o megaupload

Mr_Trukit0, 07 Feb 2008 @19:11:35 dice: #3

Puedes descargarlos desde aquí.

rokociber, 15 Feb 2008 @14:07:50 dice: #4

Se agradece tio, gracias por el manual y la ayudita de la descarga

Ángel78, 24 Sep 2008 @09:14:42 dice: #5

Gracias por este tuto. Voy a desarrollarlo, si tengo algún problema lo trataré de resolver y pondré la solución a manera de comentario.

Gracias