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:
Eduardo on 
Eduardo on
Hola Carla.
Muchisimas gracias por este tutorial la verdad me ha servido mucho como piedra angular de un proyecto en e-learning que voy a iniciar, Pero tengo una pregunta en particular.
Como hago para el caso contrario? Como hago para acceder a atributos o comportamientos implementados en codigo AS3 dentro de la pelicula swf?
Por ejemplo si yo desde un evento en FLEX o desde un boton en Flex quiero llamar a un metodo en la pelicula SWF embebida en el SWFLoader y hacer mover un MovieClip?
Si tienes alguna idea por favor compartela, Gracias
Hola, he seguido todos los pasos. Si copio el .swf donde dices no aparece al ejecutar la aplicación, así que lo he puesto en la ruta donde se guarda todo y ahí si que aparece. El problema está en que cuando interactúo con él me dan los siguientes errores dependiendo del botón en el que pulse:
ReferenceError: Error #1056: Cannot create property mensaje on Aplicacion.
at flash_fla::MainTimeline/pasar_valor()
ReferenceError: Error #1069: Property muestraAlert not found on Aplicacion and there is no default value.
at flash_fla::MainTimeline/llamar_funcion()
¿Que estoy haciendo mal? ¿Alguien podrñia ayudarme?
Muchas gracias
Muy bueno! gracias
http://www.vertutoriales.com
Esta todo OK en AS3, pero como podria funcionar en AS2?
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.
mx:SWFLoader id=”s1″ width=”278″ height=”251″ complete=”CargaCompleta(event)” source=”recursos/interactivos/208M-1I.swf”>
a disculpa, me faltó especificar que es s1:
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…
[...] Web Services en Flex » Cargar SWF en Flex Tags: Componente, DataGrid, Flex [...]
Gracias Ramón, te agradezco tu comentario.
Recién estoy empezando, a ver qué tal va.
Saludos.
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.