La semana pasada surgió la duda en twitter de cómo pueden comunicarse dos o mas SWF's embebidos en una página y eso me dio la idea para hacer este post =)

Recordemos que por la naturaleza de los SWF’s podemos comunicarlos sin importar si fueron generados vía Flex o Flash.

Como mínimo es necesario tener 2 swf para lograr esta comunicación y uno al menos debe fungir como mensajero (sender) y otro como escucha (listener) aunque ambos pueden realizar ambas tareas y es posible tener más de 2 swf en este proceso.

Algo que podría sonar atractivo si estamos trabajando en equipo y no todos usan AS3 es el hecho de que todos los objetos de tipo LocalConnection creados con cualquier versión de AS (1, 2 o 3) son compatibles.

Esta clase tiene dos métodos importantes para lograr la comunicación entre los SWF’s: send() y connect().

El método send() se encarga de enviar la petición de comunicación y requiere de 2 parámetros, el primero que será el nombre del canal y el segundo el método que se ejecutará en el swf destino. En caso de que el método destino requiera de parámetros estos deben de agregarse después del segundo parámetro y separado por comas.

El método connect() estará en el swf destino y recibirá como parámetro el nombre de la conexión que se estableció en el método send() en el swf origen. Con esto establecido el sfw destino ya estará habilitado para escuchar las peticiones a través de un LocalConnection.

Es importante que en el swf destino el objeto LocalConnection se le indique, a través de la propiedad “client”, en donde se encuentra el método que se está invocando desde el swf origen. Esto aplica si nuestro método está dentro de un paquete o en el mismo nivel donde se está instanciando el objeto LocalConnection. Otra consideración que se debe tener con este método es que debe ser declarado público.

Si al objeto LocalConnection destino no le indicamos la ubicación del método y este no lo declaramos como público la aplicación nos arrojará un error.

Ya entendida la funcionalidad de la clase y la lógica de este tipo de aplicaciones es hora de tirar algunas líneas de código y de probar esta funcionalidad.

Tendremos 3 archivos swf’s uno generado desde Flash y otro generado desde Flex y ambos tendrán los 2 roles necesarios para esta aplicación (Mensajero y Escucha) y el tercer SWF será generado desde Flash usando AS2 y solo con el rol de Escucha. Para efectos de este tutorial los tres SWF estarán integrados en el mismo archivo HTML.

Se me ocurre que esta aplicación sea algo similar a una calculadora donde en un primer SWF se ingresen 2 datos y se envíen al segundo SWF donde se elija la operación a realizar y regrese el resultado al primer SWF donde se le sumara una cantidad y el resultado final se enviará a un tercer SWF el cual solo mostrará este resultado final. Cada SWF tendrá un color de fondo distinto para poder identificarlos y están embebidos independientemente. El SWF1 es verde, el SWF2 es azul y el SWF3 es anaranjado

El código para el SWF1 hecho en Flash con AS3 queda así:

//Creamos el objeto tipo LocalConnection
var cnxLocal:LocalConnection = new LocalConnection();
 
enviarBtn.addEventListener(MouseEvent.CLICK, enviaDatos);
 
function enviaDatos(evt:MouseEvent):void
{
/*Enviamos datos a través del canal(conexión) 'cnxIda' 
indicándole que método ejecutar y los parametros a recibir*/
	cnxLocal.send('cnxIda', 'muestraDatos', dato1.text, dato2.text);
 
/*De una vez referenciamos la conexión o canal para 
recibir los datos de regreso que enviará la app en Flex*/
	cnxLocal.connect('cnxVuelta');
	cnxLocal.client = this;
};
 
/*Este método muestra el resultado calculado en el SWF2, 
hace un nuevo calculo y envía ese resultado al SWF3*/
function muestraResultadoRegresado(resultado:String):void
{
	resultado1.text = resultado;
 
	var resultadoFinal:String;
	resultadoFinal = String(Number(resultado)*10);
 
//Aquí es donde se envían los datos al SWF3
	cnxLocal.send('cnxFinal', 'muestraDatosFinales', resultadoFinal);
}

El código para el SWF2 hecho en Flex con AS3 queda así:

 import mx.controls.Alert;
 
//Creamos el objeto tipo LocalConnection
            private var _cnxLocal:LocalConnection = new LocalConnection();
 
            private function _initApp():void
            {
//Nos conectamos a la conexión definida en el SWF 1 para este SWF
                _cnxLocal.connect('cnxIda');
//Indicamos en donde esta el método invocado en SWF1
                _cnxLocal.client = this;
            }
 
//Este es el método invocado desde SWF1 y está definido como público
            public function muestraDatos(datoE1:String, datoE2:String):void
            {
                dato1.text = datoE1;
                dato2.text = datoE2;
            }
 
            private function _realizarCalculo(evt:MouseEvent):void
            {
                var resultado:Number;
                switch (evt.currentTarget.label)
                {
                    case '+':
                        resultado = Number(dato1.text) + Number(dato2.text);
                        break;
 
                    case '-':
                        resultado = Number(dato1.text) - Number(dato2.text);
                        break;
 
                    case '*':
                        resultado = Number(dato1.text) * Number(dato2.text);
                        break;
                    case '/':
                        resultado = Number(dato1.text) / Number(dato2.text);
                        break;
                }
                _regresaDatos(String(resultado));
            }
 
//Este método regresa el resultado al SWF1
            private function _regresaDatos(resultado:String):void
            {
                Alert.show(resultado, 'Resultado del calculo:');
                _cnxLocal.send('cnxVuelta', 'muestraResultadoRegresado', resultado);
            }

El código para el SWF3 hecho en Flash con AS2 queda así:

//Creamos el objeto tipo LocalConnection
var cnxLocal:LocalConnection = new LocalConnection();
 
//Nos conectamos a la conexión definida en el SWF 1 para este SWF
cnxLocal.connect('cnxFinal');
 
cnxLocal.muestraDatosFinales = function(resultado) {
 
//Se muestran en la caja de texto los datos recibidos
    resultadoFinal.text = resultado;
};

Como puede apreciarse la comunicación entre uno o varios SWF's es muy sencilla y en este tutorial queda sentado que no importa si es AS2 o AS3, Flash o Flex donde generemos nuestras aplicaciones, la comunicación a través de LocalConnection es transparente =)

Esperamos que este tutorial te sea de utilidad y si tienes dudas o comentarios no dudes en preguntarnos, ya sea a través de los comentarios o vía twitter en @riactive.

Sean felices y... Happy Coding!!!

Sergio Brito AKA yacafx

------------------------------------------------------------------------------------------------------
Los archivos fuente generados en este tutorial están disponibles para su descarga
[Source Files]

Para la elaboración de este post usamos Flash, Flex Builder, Photoshop y Balsamiq Mockups