The popup window should of course be as small as possible and should resize to the campaigns size. But because you never know which kind of Browsertoolbars the user have installed ( and you don’t want to disallow all tool- and browserbars ) you can’t really set the window size, because the IE does not support the innerHeight or innerWidth attribute of the window-element.

Mozilla based browsers do support it and resize the complete window that way, that all content is fully shown. The following script checks the browsers scroll attibute to resize the IE browser window step by step. Not very nice, but it works. Please let me know if there is a better way to to this. This is the first i found.

function setInnerSize(width,height) {
 
    if (window.innerWidth && window.innerWidth!="undefined") {
     	window.innerWidth = width;
     	window.innerHeight = height;
    }else{
     	run = true;
     	runHeight = height;
     	runWidth = width;
 
     	window.resizeTo( runWidth, runHeight );
     	while( run  ){
      		window.scrollTo( 1000, 1000 );
      		scrollV = (document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
      		scrollH = (document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
 
      		if( scrollH > 0 ) runWidth = runWidth+10;
      		if( scrollV > 0 ) runHeight = runHeight+10;
 
      		window.resizeTo( runWidth, runHeight );
 
      		if(  (scrollV+scrollH)<10 ) run = false;
     	}
    }
}

cheers,
Sebastian

  <param name="wmode" value="transparent" />
  <embed wmode="transparent" ...

With the transparent mode you can influence the relation between the Flash movie an the surrounding HTML. If the set the wmode to window the Flash movie will always lay on top of the rest of the page. This is absolutly helpfull if your application is “standalone”, means the only center of user interaction or if you have an full window application ( at least with full screen ).
But often you have other HTML elements around the Flash movie which are at the same level of user interaction and might be as important as the Flash movie ( Best example might by fly-out menus which has to overlay all other content. Or maybe confirm messages which are not realized by the JavaScript confirm-dialog ). If you use wmode window html elements will always behind the Flash movie (setting the html z-index has no effect ), so there is no real interaction between HTML/JavaScript an the Flash movie. For this you need wmode equals transparent.

wmode transparent allows an equal mixture between Flash and HTML/ JavaScript. Just as the parameters sounds, the Flash movie will also have an transparent background and let the behind HTML shine through. Attention: The transaparent background is expensive in performance. Use it carefully.
The third mode after window and transparent is opaque. The opaque also allows the mix of Flash and HTML/ JavaScript, but has now transparent background.

Since the introduction of these two modes (transparent, opaque) there is a bug with Mozilla based Browsers and textfields on Window plattforms. If you try to enter special character – famoused example is the @ – in text fields it wont work. This is very uncomfortable if you want to have a user login where you use e-mail adresses as username ( @see Adobe Bug Base ).

swfInput

My solution to solve this issue is called swfInputs. It uses the ExternalInterface class of the Flash player. swfInputs is a an AS3 which extends the Flex TextInput class. It communicates with an JavaScript class. This will create normal HTML Inputfields and places it exactly above the original Flash Inputfield.
On entering text in the overlay-HTML-Inputfield the text will be transfered via ExternalInterface into the Flash movie and the corresponding Flash Inputfield. For the Flash application this mechanism is transparent because the access to the field and change events on the input field will still work.

The JavaScript class will only generate the overlay input field if its necessary, means on the Mozilla-Windows-Combination. Other browsers will use the normal Flash movie inputs.

The styles (height, width, border, colors ) which you set on the Flash Input will be transfered to the HTML-Input and set via CSS styles. For further styling like background images you could of course also use standard CSS.

swfInputs also support multiple Flash movies within on HTML page and have an “point-to-point” connection between the overlaying HTML-Input and the Flash-Input. So there is no general keylogger on the complete HTML page, which might cause problems with your JavaScript functions. This also means that you could have different Flash movies on one page ( which might also communicate to each other via LocalConnection ) where each movie could have its own TextInputs.

What to do in your code?

swfInputs consists of two parts:

• The SWFTextInput AS3 Class (which create the connection to the JavaScript class)
• and the swfInputs JavaScript Class (which handles the creation and HTML communication)

To activate the JavaScript part you just need to insert two script-tags into the HTML code and call the constructor method. At the moment swfInputs uses the dojoToolkit JavaScript library for position calculation and basic connection handling. I looking forward to remove this need of dojo to reduce the filesize.

<script src="../javascript/dojo.js" language="javascript"></script>
<script src="../javascript/swfInputs.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
			swfInputs.init('swfInputTestcase');
</script>

The String-value int the constructor call is the channel-name. This is optional if you just use on single instance within the HTML-page.

Within you Flash/ Flex application you have to use the SWFTextInput class for textfields instead of TextInput. The SWFTextInput class uses the JSCallStack to optimize the JavaScript communiaction ( which could be a lot on fast typing, so its recommanded to use it ).

A basic Flash/ Flex app could look like this. You see there is nothing very special instead of the swfInputs:SWFTextInput class.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" height="400" width="600" backgroundAlpha="0.5" backgroundColor="#674523"
	initialize="init()" xmlns:swfInputs="com.nonstatics.swfInputs.*">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			//
			private function clickHandler():void{
				Alert.show("swfInput01: "+swfInput01.text+"\n"+
						   "swfInput02: "+swfInput02.text+"\n"+
						   "swfInput03: "+swfInput03.text)
			}
		]]>
	</mx:Script>
 
	<mx:VBox x="10" y="10">
 
		<mx:TextInput width="160" borderColor="#674523" text="{ swfInput01.text + swfInput02.text }" />
 
		<swfInputs:SWFTextInput id="swfInput01" borderColor="#ff0000" fontFamily="Verdana" />
		<swfInputs:SWFTextInput id="swfInput02" borderColor="#00ffff" fontFamily="Arial" />
		<swfInputs:SWFTextInput id="swfInput03" borderColor="#0000ff" fontFamily="Times" />
 
		<mx:Button label="Senden" click="clickHandler()" />
 
	</mx:VBox>
</mx:Application>

Download Files (swfInputs 1.0)

SWFTextInput.as
swfInputs.js
SWFInputs Eclipse Testproject (ZIP)

Please feal free to leave some comments and let me know if its helpful or what should be done for future releases.

cheers,
Sebastian