Communicate with JavaScript, send-receive

Actually its quite simple to communicate with Javascript from Flash, simply by importing the externalInterface library. The following code displays a simple use, from which the Javascript “reads” the available space within the browser window and sends it to the flex application, which draws a panel to match this space, so you can have a full screen application no matter the screen resolution and/or browser…

&lt?xml version=”1.0″ encoding=”utf-8″?&gt

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html”&gt

<mx:Script&gt
&lt![CDATA[
import mx.controls.Alert;
import mx.events.*;
import mx.controls.*;
import flash.external.*;

public var w:uint;
public var h:uint;
public function callWrapper(event:MouseEvent):void
{

var jsWidth:String = “getWidth”;
var jsHeight:String = “getHeight”;
w = ExternalInterface.call(jsWidth);
h = ExternalInterface.call(jsHeight);
//testPanel.width=w/2;
//testPanel.height=h/2;
Alert.show(w.toString()+”*”+h.toString());
resizeMe.widthTo=w;
resizeMe.heightTo=h;
resizeMe.play();
}

public function original():void
{
resizeMe.widthTo=200;
resizeMe.heightTo=300;
resizeMe.play();
}
]]>
&lt/mx:Script&gt

<mx:Resize id=”resizeMe” target=”{testPanel}”/&gt

<mx:Canvas height=”100%” width=”100%”&gt

<mx:Button label=”Expand!” click=”callWrapper(event);” horizontalCenter=”0″/&gt

<mx:Panel id=”testPanel” width=”200″ height=”300″ backgroundColor=”#BDE018″ y=”0″ x=”0″ borderStyle=”none”&gt
<mx:Button label=”Return” click=”original();”/&gt
&lt/mx:Panel&gt

&lt/mx:Canvas&gt

&lt/mx:Application&gt

add this 2 functions to your html that contains the produced .swf

<script language=”JavaScript” type=”text/javascript”&gt

function getWidth() { return document.body.clientWidth; }
function getHeight() { return document.body.clientHeight; }

View working example here