Cargar SWF en Flex
Flex Builder incluye dentro de su librería de componentes el SWFLoader. Este componente nos permite cargar archivos SWF dentro de nuestras aplicaciones en Flex. En esta entrada además de aprender a usarlo verás cómo llamar una función dentro de Flex desde el SWF.
Para este ejercicio usaremos Flex Builder 3, que puedes bajarlo de aquí.
Tutorial
1. Abre Flex Builder 3 y crea un nuevo proyecto (En tipo de aplicación selecciona Aplicación Web). Ponle como nombre de proyecto FLEXSwfLoader. Haz click en el botón de Finalizar.
2. Da click en el botón vista de Diseño y arrastra una etiqueta o Label al área de diseño. Asígnale las siguientes propiedades al botón:
- Width: 200 pixeles de ancho
- Color de fuente: Blanco #FFFFFF
- Bold / Verdana / 12px
- ID: resultado
- Borra el texto de la etiqueta
2. Busca el componente SWFLoader dentro de la lista de Controles del panel Componentes. Arrastra el componente al área de Diseño.
3. Baja el siguiente archivo SWF (ActionScript 3.0) y guardalo en la carpeta raíz de tu proyecto (en este caso deberá ir en la carpeta FLEXSwfLoader). Este archivo lo cargaremos en nuestra aplicación de Flex:
 |
 |
En el archivo Flash tenemos un campo de introducción de texto cuyo nombre de instancia es texto_txt; el texto que introduzcamos aquí se mostrará en la etiqueta (Label) resultado en Flex. Debajo de este campo está el botón "Pasar valor a Flex" con nombre de instancia pasar_txt; este botón se encargará de modificar el valor de la variable mensaje, la cual se mostrará en la etiqueta resultado. Por último hay un botón con "Llamar función" como letrero y nombre de instancia llamar_txt; este botón mostrará un mensaje de alerta de Flex.
El código del archivo de Flash es el siguiente:
-
pasar_btn.addEventListener(MouseEvent.CLICK, pasar_valor);
-
llamar_btn.addEventListener(MouseEvent.CLICK, llamar_funcion);
-
-
function pasar_valor(evento:MouseEvent):void {
-
root.parent.parent['parentApplication']['mensaje'] = texto_txt.text; /* En nuestra aplicación de Flex tendremos definida la variable mensaje. Aquí le estamos modificando su valor de acuerdo al texto introducido por el usuario */
-
}
-
-
function llamar_funcion(evento:MouseEvent):void {
-
root.parent.parent['parentApplication'].muestraAlert(); /* En nuestra aplicación de Flex tendremos una función llamada muestraAlert, la cual mostrará un mensaje de Alerta en Flex */
-
}
4. Selecciona el SWFLoader y en el panel de propiedades haz click en el botón Browse del lado derecho de Source (Fuente). Selecciona el archivo SWF que acabas de bajar (flash-in-flex.swf) y haz click en el botón abrir.
5. Cámbiate a la vista de Código (Source) y agrega las siguientes líneas de código:
-
<mx:Script>
-
<![CDATA[
-
import mx.controls.Alert; /* Importamos la librería para mostrar el mensaje de Alerta */
-
-
[Bindable]
-
public var mensaje:String = ""; /* Variable que modificaremos por medio del SWF. OJO: La variable debe ser pública */
-
-
public function muestraAlert():void { /* Esta función la llamaremos desde el SWF */
-
Alert.show("Mensaje de Alerta en Flex"); /* Muestra el mensaje de Alerta */
-
}
-
]]>
-
</mx:Script>
Además, asígnale al tag del Label la siguiente propiedad de texto:
-
<mx:Label text="{mensaje}" ...
Eso es todo lo que tienes que hacer para llamar a la aplicación de Flex desde el SWF embebido.
 |
 |
Enlaces recomendados:
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.
Comentarios
Hola que onda, estoy iniciando con Flash CS3 y Flex Builder 2 y tengo la siguiente duda: ¿Cómo puedo hacer la comunicación correctamente de Flex Builder 2 con Flash CS3? tengo un SWFLoader que carga un archivo de Flash CS3 y dicho archivo tiene 1 evento, el cual atrapo en Flex Builder 2 y después de ello cargo otro archivo al mismo SWFLoader, pero me truena cuando intento accesar a una propiedad del 2° archivo, eso pasa cuando llamo al evento Complete del SWFLoader:
public function CargaCompleta(e:Event):void
{
try
{
e.target.content.objeto_salida.addEventListener(Event.COMPLETE,uno);
}
catch(er:Error) {Alert.show(er.message,"Error");}
}
public function uno(e:Event):void
{
try
{
s1.content["objeto_salida"].removeEventListener(MouseEvent.CLICK,s1.content["Finaliza"]);
s1.source = null;
s1.source = "recursos/reactivos/208M-1R.swf";
}
catch(er:Error) {Alert.show(er.message,"Error");}
}
Y el código en flash CS3 es este:
import flash.events.*;
import flash.events.MouseEvent;
var objeto_salida:SimpleButton = new SimpleButton();
boton_salir.addEventListener(Event.ADDED, init);
function init(e:Event):void
{
boton_salir.addEventListener(MouseEvent.CLICK,Finaliza);
}
function Finaliza(evento:Event)
{
var e:Event = new Event(Event.COMPLETE);
objeto_salida.dispatchEvent( e );
trace("END");
}
Espero me puedas ayudar, de antemano y por tu tiempo gracias...
mx:SWFLoader id="s1" width="278" height="251" complete="CargaCompleta(event)" source="recursos/interactivos/208M-1I.swf">
Hola Jorge,
No había podido revisar tu código hasta hoy.
El problema es que se está haciendo el siguiente ciclo:
1. Cargas el primer SWF (208M-1I.swf)
2. Se llama a la función CargaCompleta
3. Haces click en el botón boton_salir
4. Se llama a la función uno
5. Se carga el segundo SWF (208M-1R.swf)
6. Se llama a la función CargaCompleta
Ahí truena porque de seguro en la segundo SWF no tienes un objeto botón que se llame objeto_salida; y en la función CargaCompleta lo estás llamando:
e.target.content.objeto_salida.addEventListener(Event.COMPLETE,uno);
Lo que puedes ver es revisar la propiedad source del target del evento que se generó para ver si agregas o no el listener. Ejemplo:
-
public function CargaCompleta(e:Event):void
-
{
-
try
-
{
-
if(e.currentTarget.source != "208M-1R.swf")
-
e.target.content.objeto_salida.addEventListener(Event.COMPLETE,uno);
-
}
-
catch(er:Error) {Alert.show(er.message,"Error");}
-
}
Saludos.
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.
Me parecen muy buenos tus codigos te felicito de verdad, se nota que sabes lo que haces, muchas felicidades carla y muchas gracias por ese aporte que haces en la red.