Requerimientos

Prerequisitos

Desarrollo

El escenario es el sig:

En las imágenes muestro como deberá quedar la biblioteca de los 3 swf que servirán como contenedores de los assets.
Únicamente coloqué dos elementos (Header, Footer), por motivos del ejemplo, y tienen asociada su clase respectiva desde la biblioteca.

No es necesario que pongamos contenido en el escenario ya que no mostraremos el swf cargado, solo utilizaremos sus elementos.

Vamos ahora a crear el fla que servirá como principal y desde donde pondremos unos controles para cargar los assets requeridos.

Colocamos 3 componentes en el escenario: Una etiqueta, un botón y un combo box. El botón y el combo box tienen como nombres de instancia "botonCarga" y "comboSeleccion" respectivamente.

El combo tiene los datos mostrados en la imagen colocados desde el Inspector de Componentes por motivos de facilidad en el ejemplo.

Los 3 componentes se encuentran dentro de un MovieClip que está en el escenario. Ese movie clip tiene de nombre de instancia "selector". Los componentes se encuentran dentro de este clip para después poder quitarlos más fácilmente.

Ese movie clip tiene el sig código en la línea de tiempo:

//ActionScript 3.0
 
comboSeleccion.addEventListener(Event.CHANGE, onComboChange);
botonCarga.addEventListener(MouseEvent.CLICK, onBotonClick);
 
botonCarga.enabled = false;
 
function onComboChange (event:Event):void 
{
	botonCarga.enabled = event.target.selectedIndex > 0;
}
function onBotonClick(event:MouseEvent):void
{
	MovieClip(parent).cargarAssets(comboSeleccion.selectedItem.data);
}

Como se darán cuenta la carga la hace una función llamada "cargarAssets" que se encuentra en la línea de tiempo principal, es decir, el "parent" de este clip. Ahora veamos el código que se encarga de la magia el cual se encuentra en la línea de tiempo principal:

import flash.utils.getDefinitionByName;
 
var req:URLRequest = new URLRequest();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onAssetsComplete);
 
// Esta es la parte importante.
// El poner las clases cargadas dentro mismo contexto de la aplicación principal
var lc:LoaderContext = new LoaderContext();
lc.applicationDomain = ApplicationDomain.currentDomain;
 
// Esta fn se invoca desde el clip selector
function cargarAssets (seleccion:String):void 
{
	req.url = "assets/" + seleccion;
	loader.load(req, lc);// Pasándole como segundo argumento el contexto definido arriba
}
 
function onAssetsComplete (event:Event):void
{
	trace("Assets cargados y disponibles");
 
	// Definición de las clases a utilizar ( ya están disponibles )
	// Header y Footer están definidos en la biblioteca del swf cargado
	var Header:Class = getDefinitionByName("Header") as Class;
	var Footer:Class = getDefinitionByName("Footer") as Class;
 
	// Instancias de esas clases
	var _header:DisplayObject = new Header() as DisplayObject;
	var _footer:DisplayObject = new Footer() as DisplayObject;
 
	// Agregamos y acomodamos elementos
	addChild(_header);
	addChild(_footer); _footer.y = stage.stageHeight - _footer.height;
 
	// Ocultamos el componente de selección
	selector.visible = false;
}

El código muestra como carga un swf con la clase Loader. Hasta ahí todo normal. El punto importante es la instancia de "LoaderContext" que está definida justo antes de cargar los elementos y su propiedad applicationDomain. Esa instancia la utilizamos en la función load de la instancia de Loader.

var lc:LoaderContext = new LoaderContext();
lc.applicationDomain = ApplicationDomain.currentDomain;

Un ApplicationDomain es el contexto donde está disponible tu código. Normalmente se genera una instancia de ApplicationDomain por cada swf que tengamos pero con esa instrucción estamos indicando que las classes que contiene el swf de los assets queremos que esten disponibles en el mismo contexto que la película que lo carga, es decir, la película principal.

Una vez hecho eso, la clase la podemos utilizar como cualquier otra. En el ejemplo estoy obteniendo la definición de las clases "Header" y "Footer" en dos variables que después estoy instanciando y agregando al DisplayList para mostrarlas en la película principal.

El ejemplo supone que tiene una estructura de archivos similar a la sig:
- carpeta principal
  - main.swf
  - assets (carpeta)
    - assets_1.swf
    - assets_2.swf
    - assets_3.swf

Conclusión

Sabemos que existen las bibliotecas compartidas. Sabemos que podemos tener muchos elementos en la biblioteca y utilizar solo los requeridos pero, sin lugar a dudas, cuando debemos elegir entre varios elementos a cargar para una sola aplicación esta puede ser una de las mejores opciones. De esta forma no incrementan el tamaño de su aplicación principal teniendo assets en la biblioteca que podría no utilizar un usuario, ya sea por su rol asignado o por cualquier otra razón.

Esta técnica también les puede ayudar a actualizar las aplicaciones, al menos, en cuanto a los elementos gráficos mostrados debido a que con solo cambiar el/los swf de los assets podrán cambiar por completo el diseño de su aplicación.

Archivos

Aquí les dejo los archivos del ejemplo (Flash CS4):
- Carga_Assets.zip

Espero que les sirva este artículo para sus futuros proyectos.
Cualquier pregunta no duden en dejar un comentario en el post o enviarme un e-mail a: agonzalez@activ.com.mx

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

Conferencia Creative Suite Live México

El motivo de este post es invitarlos al evento denominado "Creative Suite live Mexico, 2009". Se llevará a cabo en la ciudad de México los días 28 y 29 de Septiembre de 2009 en el Centro Banamex.

"Creative Suite Live! es la conferencia más completa para diseñadores que utilizan y quieren dominar las aplicaciones de Adobe Creative Suite. Con sesiones que cubren desde Illustrator a InDesign, Photoshop, Bridge y Acrobat Professional."

Con panelistas de talla internacional, las conferencias se enfocarán en dos ramas: Impresión y web. Tocando temas como "Photoshop para Diseño y Producción de Impresos" impartida por Mariana Cabral (twitter => @marianacabralMX), "Plataforma Flash, más alla de la web" impartida por Alberto González (twitter => @albertx), conferencias inaugurales por evangelistas de Adobe Rufus Deuchler y Greg Rewis, entre otros temas como InDesign, Dreamweaver, etc.

Esperamos contar con su asistencia el día del evento.
Les dejo los enlaces directos:
Información General
Registro
Calendario
Panelistas
Lugar
Patrocinadores

Hasta la próxima.

Antes que nada espero que tengan un muy RIAño Nuevo jejejejeje con muchos proyectos y trabajo y que esta comunidad siga creciendo mas y mas!!!

Pues se me hizo la buena de ser quien cerrar el año con Post y pues tambien se me hizo ser el que lo habrá=) y que mejor que con una fabulosa serie de entrevistas/saludos de personalidades de Adobe como Ben Forta(ColdFusion Evangelist), James Ward(Flex Evangelist y gran impulsor de Tour de Flex) y Duane Nickull(a quien tambien se puede ver en Duanes World en Adobe TV)

Y por cierto antes de que se me pase, todas las sesiones del MAX fueron grabadas y han sido liberadas al publico en general en Adobe TV o desde el Adobe Media Player....

Y ya sin mas rodeos les dejo aqui los videos...

#Update: Disculpen las molestias pero ya el buen Edgar Parada nos apoyo actualizando el sistema y ya se ve el video uhuuuu!!! ahora vienen mas!!
]]> http://www.riactive.com/2009/01/07/videos-del-max-2008-sfo/feed/ 1 http://www.riactive.com/2008/12/05/adobe-webinars/ http://www.riactive.com/2008/12/05/adobe-webinars/#comments Fri, 05 Dec 2008 18:46:51 +0000 yacaFx http://www.riactive.com/?p=242 Hola Riactiveros!!!!!

Pues con la buena nueva de que Adobe nuevamente hace de las suyas y nos invita a una seria de Webinars bajo el nombre de

Adobe Flash Platform eSeminar series for Adobe AIR and Flex developers

Las cosas buenas de estos webinars son:

La diversidad de temas e interesantes que son!!

Son gratis!!!!

Son en linea!!!

Lo unico que necesitas es registrarte en www.adobe.com, accesar a sitio de los de los Webinars y seleccionar los que te interesen, recibes un correo de confirmacion, lo agendas y esperas ansiosamente el dia en que sea el Webinar!!!

Les anexo las sesiones que habrá asi como la fechas y horas en que se celebrarán.

Introduction to the Adobe Flash Platform ›
Thursday, December 11, 2008
11:00 AM - 12:00 PM US/Pacific

Zend and the Adobe Flash Platform ›
Thursday, December 18, 2008
11:00 AM - 12:00 PM US/Pacific

SAP and the Adobe Flash Platform ›
Thursday, January 8, 2009
11:00 AM - 12:00 PM US/Pacific

Java and the Adobe Flash Platform ›
Thursday, January 22, 2009
11:00 AM - 12:00 PM US/Pacific

Salesforce.com and the Adobe Flash Platform ›
Thursday, February 12, 2009
11:00 AM - 12:00 PM US/Pacific

Facebook and the Adobe Flash Platform ›
Thursday, February 26, 2009
11:00 AM - 12:00 PM US/Pacific

Y por cierto tambien habrá Adobe ColdFusion 8 eSeminar Series!!!!!!

Y pues si revisan mas en el site pueden encontrar que hay onDemand Seminars y muchisimos recursos!!!!

Bueno pues Happy Flexed!!!!

Bytes by me!

The Yacatematrix

Como previo solo algunas aplicaciones de la version previa de la suite están confirmadas en la Suite 4, tales son: Dreamweaver, Fireworks, Flash, Photoshop, SoundBooth e Indesign.

Y bueno para llamar un poquito mas la atención una de las caracteristicas a anunciar en el caso de Flash es la inclusión de rotación 3D (si por fin!!!), habrá que ver como viene.

En fin no deseo ser aguafiestas asi que si lees este post antes del 23 de Septiembre a las 9 am podras registrarte para ser de los primeros en ver la CS4 en acción!!!

Si participas en el webcast no olvides dejar tus comentarios aqui o suscribiendote gratuitamente a la lista de distribución de RIACTIVE

Saludos

Bytes by me

Sergio Brito