FlashCanon » Adobe Flex

Making Flash and Flex talk (Part 2)

Jason — Tue, 30 Sep 2008 16:14:10 +0000

As promised in my previous post, here's part 2 of Making Flash and Flex talk. This post is going to be a bit shorter than part 1 since a lot of the code and information is the same. You'll see in the example that the user experience is the same in both this post and part 1. However, by using listeners and a custom event in this example, we lessen the chance for error that could be caused by calling a function directly by name in a child (parent) file.

This example involves a total of 4 files: FF_Talk.mxml, FFTalkEvent.as, ffTalkSwf.swf and, of course ffTalkSwf.fla.
You can view the source code either here or by right-clicking on the example and clicking "View Source". You can also grab the zip containing these files via the download link at the end of this post.

THE CODE:
Let's take a look at the source and break it down just a little.

FLEX SIDE:
As in part 1, I start by declaring the variables flashSaid and mySwfMc. This time however, I also import a new class file named FFTalkEvent which will serve as the means of communication between Flex and Flash in this case. More about FFTalkEvent below.

PLAIN TEXT

Actionscript:

import com.fincanon.events.FFTalkEvent;
[Bindable]
private var flashSaid:String = "";
private var mySwfMc:MovieClip;

Also just like in part 1, the next thing in the mxml file is the setSwfMc function. This function still casts the content of the SWFLoader as a MovieClip but now it adds an event listener to both the loaded swf and its Flex parent (instead of sending a reference of the Flex parent into the swf).

PLAIN TEXT

Actionscript:

private function setSwfMc():void{
mySwfMc = mySWFLoader.content as MovieClip;
mySwfMc.addEventListener(FFTalkEvent.TALK_TO_FLEX,listenToFlash);
this.addEventListener(FFTalkEvent.TALK_TO_FLASH,mySwfMc.listenToFlex);
}

Next are the functions listenToFlash and talkToFlash (you'll also recognize these from part 1). The big difference this time is that we're either listening for or dispatching a new FFTalkEvent instead of making the more "dangerous" move of calling a function directly by name. By NOT calling a function directly by name, some of the possibility for error is removed. In part 1, I was calling function in the child swf... but what if that function wasn't there? The results of that call could end up bringing the user's experience to a grinding halt.

PLAIN TEXT

Actionscript:

private function listenToFlash(e:FFTalkEvent):void{
flashSaid = e.said;
}
private function talkToFlash(stringToPass:String):void{
dispatchEvent(new FFTalkEvent(FFTalkEvent.TALK_TO_FLASH,false,false,stringToPass))
}

As you can see in the source, the rest of the mxml file is simply the text fields, labels, buttons, SWFLoader, etc.

FLASH SIDE:
Again, as in part 1, the code in the child swf is not that far off from the code in the parent mxml. Also, the main difference between this version and the version in Part 1 is the fact that we're importing FFTalkEvent and we're listening for or dispatching new instances of FFTalkEvent.

PLAIN TEXT

Actionscript:

import com.fincanon.events.FFTalkEvent;
function talkToFlex(me:MouseEvent):void{
dispatchEvent(new FFTalkEvent(FFTalkEvent.TALK_TO_FLEX, false, false, flashInputTxt.text));
}
function listenToFlex(e:FFTalkEvent):void{
flexSaidTxt.text = e.said;
}
talkToFlexBtn.addEventListener(MouseEvent.CLICK,talkToFlex);

FFTalkEvent:
FFTalkEvent in its current state is a simple, straight forward, bare-bones class that extends Event. It contains a couple of constants (TALK_TO_FLEX and TALK_TO_FLASH) and a String var named said. If you notice above, we call the said variable to get the value that was passed from Flex to Flash (or vice-versa).

PLAIN TEXT

Actionscript:

package com.fincanon.events{
import flash.events.Event;
public class FFTalkEvent extends Event{
public static const TALK_TO_FLEX:String = "TalkToFlex";
public static const TALK_TO_FLASH:String = "TalkToFlash";
public var said:String;
public function FFTalkEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, sentString:String="") {
this.said = sentString;
super(type, bubbles, cancelable);
}
}
}

THE EXAMPLE:

WHERE TO GO FROM HERE:
Like I said, FFTalkEvent in its current state is a simple, straight forward, bare-bones class. While this example is simply passing a string, you can see where it could very easily be built upon to handle much more complex tasks and I'll most likely take the time to do that in down time between projects. Whether or not I post future versions may depend on how much feedback/interest I see with this version.

DOWNLOAD THE ZIP:
Source files here.

Making Flash and Flex talk (Part 1)

Jason — Mon, 29 Sep 2008 18:38:09 +0000

I recently ran into some issues making Flex talk to a loaded swf while also allowing that loaded swf to talk to its Flex parent. I had done it once before on a prior project but since it was a one-time deal, I had forgotten exactly what I did to accomplish the task. I knew it had to do with casting the SWFLoader.content as a MovieClip, but I still needed to go digging back to the old project to make sure I had all of the correct steps. That was when problem #2 showed up... I couldn't remember which project I did this in. So, as the next logical step, me and a friend started doing some research online and found less than satisfactory results/answers to our questions.This lead me to feeling the need to write this post not only for my own future reference but also in hopes that it may show up in someone else's search results and help them in the future.

This example involves a total of 3 files: FF_Talk_Simple.mxml, ffTalkSimpleSwf.swf and, of course ffTalkSimpleSwf.fla.
You can view the source code either here or by right-clicking on the example and clicking "View Source". You can also grab the zip containing these files via the download link at the end of this post.

THE CODE:
Let's take a look at the source and break it down just a little.

FLEX SIDE:
In the mxml file, I start by declaring a couple of variables (flashSaid and mySwfMc).
flashSaid will be used to populate a dynamic text field so you can see that your string has actually made it from Flash to Flex and mySwfMc will be used as a reference to your loaded swf child.

PLAIN TEXT

Actionscript:

[Bindable]
private var flashSaid:String = "";
private var mySwfMc:MovieClip;

Next, is a function named setSwfMc. This function is called from the SWFLoader when your child swf has finished loading. Once called, setSwfMc does two things. First, it casts the content of the SWFLoader as a MovieClip (this is required in order to access everything inside the child swf). Next, it passes a reference to the Flex parent into the child swf (this will be covered in the Flash code below).

PLAIN TEXT

Actionscript:

private function setSwfMc():void{
mySwfMc = mySWFLoader.content as MovieClip;
mySwfMc.myFlexParent = this;
}

The other two functions in the mxml file handle the communication on this end of the conversation. They are named listenToFlash and talkToFlash and you can probably guess what they do pretty quickly. listenToFlash will be called from the child swf and it is expecting a to recieve a string. Once called, it takes that string and assigns it as the value of the flashSaid variable mentioned earlier. Since that variable is [Bindable], the text field is updated and you know it worked. The other function here, talkToFlash, is very similar but it is sending instead of receiving. Within talkToFlash, we are calling a function named listenToFlex that resides in the child swf. Much like the listenToFlash functon, listenToFlex is expecting a string to be passed.

PLAIN TEXT

Actionscript:

public function listenToFlash(stringToShow:String):void{
flashSaid = stringToShow;
}
private function talkToFlash(stringToPass:String):void{
mySwfMc.listenToFlex(stringToPass);
}

FLASH SIDE:
The code in the child swf is not that far off from the code in the parent mxml.
If you recall from above, we passed a reference to the Flex parent into the swf and assigned it as the value of a variable named myFlexParent. So it stands to reason that we need to declare such a variable and that's the first thing that happens in the swf. Next, we do just as we did in the mxml file and set up the conversation functions (talkToFlex and listenToFlex). Since these do pretty much the same thing as their counterparts in the mxml, I'll save you the trouble of reading it twice (and me the trouble of typing it twice). The last thing you see in the code below is just the listener for the button to talk to flex.

PLAIN TEXT

Actionscript:

var myFlexParent:Object;
function talkToFlex(me:MouseEvent):void{
myFlexParent.listenToFlash(flashInputTxt.text);
}
function listenToFlex(stringToShow:String):void{
flexSaidTxt.text = stringToShow;
}
talkToFlexBtn.addEventListener(MouseEvent.CLICK,talkToFlex);

THE EXAMPLE:

UP NEXT:
Part 2 of this topic will be very similar to this post except that I will be implementing listeners and a custom event to communicate between Flex and its loaded swf child. I'll try to have that up today or tomorrow.

DOWNLOAD THE ZIP:
Source files here.