As you probably know the Flash Player uses three different types of modes an Flash movie is embedded in the browser window. Its is set via the wmode parameter in the embed or param tag.

  <param name="wmode" value="transparent" />
  <embed wmode="transparent" ...
</pre/>
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 <em>wmode</em> 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 <em>wmode</em> equals <em>transparent</em>.
<span id="more-159"></span>
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 <em>window</em> and <em>transparent</em> is <em>opaque</em>. The opaque also allows the mix of Flash and HTML/ JavaScript, but has now transparent background.
 
Since the introduction of these two modes (<em>transparent, opaque</em>) 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 <a href="http://bugs.adobe.com/jira/browse/FP-479">Adobe Bug Base</a> ).
 
<h3>swfInput</h3>
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.
 
<h3>What to do in your code?</h3>
swfInputs consists of two parts:
<ul>
<li>The SWFTextInput AS3 Class (which create the connection to the JavaScript class)</li>
<li>and the swfInputs JavaScript Class (which handles the creation and HTML communication)</li>
</ul>
 
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 }"></mx:textinput>
 
		<swfinputs:swftextinput id="swfInput01" borderColor="#ff0000" fontFamily="Verdana"></swfinputs:swftextinput>
		<swfinputs:swftextinput id="swfInput02" borderColor="#00ffff" fontFamily="Arial"></swfinputs:swftextinput>
		<swfinputs:swftextinput id="swfInput03" borderColor="#0000ff" fontFamily="Times"></swfinputs:swftextinput>
 
		<mx:button label="Senden" click="clickHandler()"></mx:button>
 
	</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

6 thoughts on “ swfInputs: Solving Mozilla + Transparent Mode + Win + Special Chars within inputs ”

  1. hi sabrina,

    thanks for your comment. yes it should work for all keyboard layouts. it just like a copy & and paste from a html input element into the Flash Player :-)

    cheers,
    Sebastian

  2. Hi Sebastian,

    I’m trying to make your swfTextInput to accept characters like ોવમ્ાિુપગરકતસલદજૌીેૂહનૈંબ. Any idea if this is possible? I’d think it would be, but I can’t really get it to work, all I get is plain old US characters when I switch ‚Gujarati‘ on my Mac. So, before I start pouring in lots of time I’d like to now: is it possible to solve this using your tool and how can i enable it on mac?

    Regards,

    Huib.

  3. Hi Huib,

    as far as i know there should be no problems on Mac, so swfInputs isn’t needed. This special char bug only happens on Win systems. But i’ve tested it and within my testproject it also works fine. But i just saw that i out a debut version online with the latest update which will show up swfInputs each time, even if it’s not needed. I just updated this.
    In both cases standard charcters should not be shown.

    cheers,
    Sebastian

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert