Flash 8, Flex 2, LocalConnection

Well today wasn't fun. I'm not huge into graphics or Flash for that matter. Sure I've done the occasional Flash movie but generally I stay away from things that are not code heavy. The challenge today was to create a clickable imagemap. Now from what I've been able to gather there's really no simple way to insert an Image in Flex and then draw different clickable regions on it. A good example of this would be a clickable interactive map, something we see very often. This little tutorial is directed at those of you that are as flash clueless as I am.

Ok let's get to it. The quickest way to do this is to create a clickable button in Flash 8 and then add some code to it:

1. Create a new Flash Document.
2. Choose File > Import to Library. This will import an image that will become a button. Locate the image and click Open. The image will be saved in the Library.
3. Find the image in the right Column list. Select the image with the Arrow tool. Drag it to your stage.
4. Right click on image, Choose Convert to Symbol from the popup menu. Name the symbol "button", choose Button from the Behavior list and click OK.
5. Right click on the image. Choose Actions from the pop-up menu.
6. This opens up the action pane. Now this next step is important, MAKE SURE you have Script Assist ON!
7. Paste in this code:

   outgoing_lc  = new LocalConnection();
   outgoing_lc.send("lc_name", "helloFlex")
   delete outgoing_lc;

8. If Script Assist is on you should see it wrap the code into a nice on (release) {}function.
9. File Export - Export Movie .. at bottom of properties dialog box make sure you change it to Access Network Only (this is default for Flex apps and both swf's must be the same or you get a nasty error). Call it test.swf.

That pretty much sums up the Flash part of this little exercise. Once you have your test.swf file, drag that into your Flex project. Then embed it in your mxml application as so:

<mx:SWFLoader source="test.swf" x="10" y="10"/>

Then in the script section add the following code:

private var fromSWF:LocalConnection;   
private function initApp() : void{
 fromSWF = new LocalConnection();
 fromSWF.client = this;
 fromSWF.connect("lc_name");}   
public function helloFlex() : void{
 mx.controls.Alert.show("hello from flash");}

Save and Run. It should work. There's a few far more complex examples of this out there on the web like http://weblogs.macromedia.com/pent/archives/flex_2/index.cfm - scan down the page for "Using ActionScript 2 SWFs with Flex 2", which ultimately helped me figure this out. Again I like to break it down to its simplest form, and build everything else up from there.