If you use website statistic tools – and thats something i guess everybody is interested in – you got well numbers about how many users visit your website and exactly which page of your website. You will also know from which other website the came and which key words they used within Google to get to your page. Each of this are very important facts for exmaple for SEO aspects, etc. For example Google Analytics is of course a great free tool for this ( include the old discussion how many more should Google know about you and your website ).

What i also want to know is where do the users navigate best on my website. What are the best places to put links, so the users will find AND click them ( no – i don’t plan to put any adds on my website – just interested ). Google Analytics has an overlay mode. But this will highlight the existing links. So it will show up which links works best. This comes close, but not perfect.

There are some enterprise tools which do such kind of overlay mode with the users mouse movements. But they are too expensive for me. I guess there will be also some free tools available out there, but programming is also fun :)

So i wrote my little tool which will save the users mouse postion each X milliseconds. If the users leavs the current page, it will make one AJAX request and save all mouse coordinates within one file ( currently not in a database, beacuse writing to filesystem is a bit faster ). When you would like to display the users mouse activity just add #overlay at the end of the current URL. It will sum up all saved mouse movements and create a grid overlay over your website. By default the grid elements are 10×10 px large. Each grid field get a color by its relative mouse overs. The more often users moved their mouse over these coords the more red the field will be ( see screenshot for example ).

Of couse this is no perfect solution. But because most users move the mouse the same way they also look over the screen this is a very easy way to track such behaviour.

How to implement:

It’S very easy to use. Just extract the ZIP below onto your webserver and put a little piece of JavaScript into your HTML code:

<script type="text/javascript" language="javascript">
	var mouseMoveTracker = new MouseMoveTracker({
			'rootNodeId':'contentNode',
			'actionURI':'../server/',
			'actionURIOverlay':'../server/result/'
		});
</script>

The MouseMoveTracker class has three major parameters:

rootNodeId: The html root node of the tracked section. Because the script id coordinate based it works best with a fixed size layout. Therefor you should enter the Id of the node which has a fixed width and sourrounds all content.

actionURI: This is the path to the serverside writing script. To this adress the AJAX requests for writing the user coords will be send.

actionURIOverlay: This is the url the script expects to get data from for creating the overlay mode. It will request data via AJAX from this URL after you enter #overlay at the end of the URL and refresh your page.

Feel free to use, modify the code and/or comment here.

Download mouse-move-tracker.zip (45kB) includes test html file

cheers,
Sebastian

[Update: Add complete Flash Builder project source files. ]
If you have dynamic content within your Flash application or you have several states or “pages” implemented, which all have different content, it might be helpful to resize your flash aplication container within the html- context. For this it’s not enough to resize the application from within the flash application. You also have to resize the surrounding html container. This is the object tag for Mozilla browsers or the embed tag, if the client uses the Internet Explorer.

In each case you have to use the ExternalInterface. You call it from the flash application with parameters for the new height and width value of the flash container. On the other side you have to define an javascript function which do the resize operation with these values.

Here is an AS3 class which already includes the JavaScript part. Soyou don’t have to define an extra JS function. So you just have to import the AS3 class into your project and your ready to resize you application from Flash.

There are three methods to call:

• resize:This method takes two parameters height and width to completly set the absolute height and width of the flash application.
• addHeight: Takes one integer parameter. The value will be added to the current height. So “50″ for 50px more height or “-20″ for 20px less in height.
• addWidth: Takes one integer parameter. The value will be added to the current width. So “50″ for 50px more width or “-20″ for 20px less in width.

/**
 * resizes the flash container to needed dimensions 
 * @param height - new needed height 
 * @param width - new needed with
 */
public function resize( height:int, width:int ):void

/**
 * adds a specific value (+/-) to current height
 * @param valueHeight
 */
public function addHeight( valueHeight:int ):void

/**
 * adds a specific value (+/-) to current width
 * @param valueHeight
 */
public function addWidth( valueWidth:int ):void

To resize your application you could add an resize event handler to check specific containers for resize and do the resizing via this class in the event handler method. If you have fixed sizes per state you could of course also do it the static way.

/**
 * @author: Sebastian Martens; sebastian@sebastian-martens.de
 * @copyright: Creative Commons. Free to use "as is"
 * 
 * Test Application
 */ 
package{
 
	import com.nonstatics.swfSelfResize.swfSelfResize;
 
	import flash.display.Sprite;
 
	[SWF(frameRate="31", width="500", height="100", backgroundColor="0x008866")]
	public class swfSelfResizeTest extends Sprite{
 
		private var resize:swfSelfResize;
 
		/**
		 * constructor
		 */ 
		public function swfSelfResizeTest(){
			super();
 
			this.resize = new swfSelfResize();
 
			// resize to 500px height, 400px width
			this.resize.resize( 500, 400 );
 
			// add 50px height -> 550px height 
			this.resize.addHeight( 50 );
 
			// remove 10px width -> 390px
			this.resize.addWidth( -10 );
		}
 
	}
}

Download com.nonstatics.swfSelfResize.as (12kB)
Download bin-debug (20kB)
Full Flash Builder Project (131kB)

Be aware of the security model of the flash player! This won’t work on local filesystem (file://xyz). So please use it on your server (http://www.yourdomain.com) or with your locally installed testserver (http://localhost/whatever).

Hope this helps you.

cheers,
Sebastian

The ExternalInterface class allows you to communicate with the Flash wrapping container, which is usually the HTML page with JavaScript capeability. It allows you to send data from ActionsScript to JavaScript and vice versa.

The ExternalInterface class is implemented for nearly all current browsers. Please see the documentation for a detailed list of the supported browsers here.

All five attributes and methods are static, so you don’t need an instance of this class.

Make sure ExternalInterface is available

When using the ExternalInterface you should make sure it’s available. So please test the boolean value ExternalInterface.available:

if( ExternalInterface.available ){
  ExternalInterface.call( .... )
}

Call JavaScript from ActionScript

To call a JavaScript function from ActionScript you just the the method ExternalInterface.call. First argument must be the function name of the JavaScript method you would like to call. All other parameters will hand over as parameters to the JavaScript method. These parameters should be primitive types like String, Number or even simple Object.

JavaScript:

function myJSFunction( param1, param2, param3 ){
   alert( param1 + ': ' + ( parseInt(param2,10) + parseInt(param3,10) ) );
   // parseInt is definetly the nicer way
}

ActionScript:

private function externalInterfaceTest():void{
   var a:int = 4;
   var b:int = 2;
   var c:String = "Hello World";
 
   ExternalInterface.call( "myJSFunction", c, b, a );
}

This will show up an alert window with text and calculated numbers.

The call method will also handle return values of the JavaScript method. At least for this you should be aware of the security model of the flash player, otherwise you might get an null value instead the expected result. Therefore please set the flash parameter allowScriptAccess to always and the allowed domain within your flash application.

HTML:

<param name="allowScriptAccess" value="always" />
   <embed allowScriptAccess="sameDomain" [...]

SWFObject:

var params = {};
   params.allowscriptaccess = "always";
swfobject.embedSWF("flvplayer.swf", "videoPlayer", "650", "530", "9.0.28", "expressInstall.swf", flashvars, params, attributes);

Flash App:

flash.system.Security.allowDomain( yourDomain );

If you configured that way you will be able to recieve return values from your JavaScript function and use them in your ActionScript method.

JavaScript:

function myJSFunction( val ){
   return "JavaScripts says: " + val;
}

ActionScript:

private function exInterfaceTest():void{
   if( ExternalInterface.available ){
      trace( ExternalInterface.call( "myJSFunction", "Hello World") ); 
   }
}

Call ActionScript method from JavaScript

Its also possible to start the other way round, that you call an ActionScript method from an JavaScript function. Therefor you have to register an callback function within your AS code. You will connect any method name with an existing method.

This is done with the addCallback method. First argument is any function name you like. This will be the function you could call within JavaScript. The second argument is an function reference or closure which should be handle the call. All arguments will be passed to this method.

The JavaScript side function is an object of the flash wrapping container ( Object-Element / Embed-Element ) which should be referenced by it’s id/name. Also for this direction arguments and return values are possible.

HTML/JavaScript:

 <script language="JavaScript">
     var init = false;
     var flashObjId = "myExInterfaceTest";
 
     // flash is initialised and AS methods could be called
     function flashReady(){
         init = true;
         callAsMethod();
     }
 
     function callAsMethod() {
         var objRef;
 
         if ( window[ flashObjId ] ) {
             // none microsoft
             objRef = window[flashObjId];
         } else {
             objRef = document[flashObjId];
         }
 
         alert( objRef.jsCallHandler( "myArguments" ) );
     }
 </script>
 </head>
 <body>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
             id="myExInterfaceTest" width="100" height="100"
             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
         <param name="movie" value="test.swf" />
         <param name="allowScriptAccess" value="sameDomain" />
         <embed src="test.swf" quality="high"
             width="100" height="100" name="myExInterfaceTest" align="middle"
             allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer_de">
         </embed>
     </object>
 
 </body>

ActionScript part:

// This method is called when initialisation is finished and application is ready
private function initCompleteHandler():void{
   if( ExternalInterface.available ){
       ExternalInterface.addCallback( "jsCallHandler", javaScriptHandlerMethod );
       ExternalInterface.call( "flashReady" );
   }
} 
 
private function javaScriptHandlerMethod( arg ):Boolean{
    return ( "ActionScript says:" + arg );
}

For a large number of JavaScript calls from ActionScript to JavaScript i regular use the jsCallStack class which implements an stack of javascript calls to handle this timed and avoid doubled calls.

Currently i need to know within JavaScript when a SWF-file was loaded completly. You could easily handle this with a single ExternalInterface call from within the Flash-application. This is not a very nice solution if this has to be done for each of you flash-applications. This is the neccesary way if you also have to access the flash-application from outside. But in my case i just need to know when the flash is loaded and available in the browser cache.

For this i wrote the swfJSPreLoader. This preloader accepts an array of assets you would like to preload. Internally it will create an flash-application which does the preloading. You could define several callback handlers. So JavaScript gets to know when all assets are loaded or each single asset is loaded including SWF-files.

<script type="text/javascript">
	var swfJSPreLoaderConfig = {
		'_swfPath':'./', // configure path to preloader SWF file
 
		'assets':[	'assets/teaser.swf',
				 	'assets/img2.jpg',
				 	'--error--'],
 
		'assetLoaded': function( asset, bytes, status ){
			alert( asset + ' loaded (' + bytes + ')' );
		},
 
		'loadComplete': function(){ 
			alert('all assets loaded. totally loaded bytes: ' + swfJSPreLoader.loadedBytes() ); 
		},
 
		'loadError': function(){ 
			alert('load error'); 
		},
 
		'callback': function(){
			swfJSPreLoader.addAsset('assets/teaser2.swf',function( status ){ 
															alert('teaser2 loaded status:' + status ); 
														});
		}
	}
</script>
 
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="swfJSPreLoader.js"></script>

To use the swfJSPreLoader you have to include three js files for swfObjects, JQuery and the swfJSPreLoader.js. You also have to define an JS variable swfJSPreLoaderConfig to configure the preloader. The config-variable could hold the following items:

• assets: assets is an array of the assets which should be loaded. The asset-paths must be relative the html page. If you insert wrong asset pathes you could define an error handler. The assets array is optional. You could also add assets via method call.
• assetLoaded: assetLoaded defines the callback method for each loaded asset. So this method will be called each time an asset is loaded completly. There are three parameters. asset – gives the asset-path; bytes – gives the number of loaded bytes of the current asset; status – gives the loading status ( 200: Ok, 404: Loading error )
• loadComplete:The loadComplete callback method will be called after the queue of assets to load is empty. Not all assets need be loaded successfully. If not the error-callback will be fired.
• loadError:The loadError callback will be triggered if the current asset could not be loaded correctly.
• callback:With callback you could register a method which is called after the initialization of the swfJSPreLoader. After this method is called you could use the public methods of the pre loader.

There are two public methods of the swfJSPreLoader. Both methods are ready after the callback method is called and the initialisation is ready ( the loader flash is instanziated ).

swfJSPreLoader.addAsset: The addAsset method allows you to add a single asset to add to the loading queue. It takes to parameters. The first is the path to the asset, the second is the callback handler, which will be fired after this specific asset was loaded. The callback will also be called if the loading fails. The callback gets one argument status with the loading status ( 200: Ok, 404: Loading error ).

/**
 * @public 
 * 
 * adds asset to loading queue
 * @param {String} assetPath - path to assets to load
 * @param {Function} callback - optional callback handler when loading is complete
 */
addAsset:function( assetPath, callback )

swfJSPreLoader.addAsset('assets/teaser2.swf',
						function( status ){ 
							alert('teaser2 loaded status:' + status ); 
						});

swfJSPreLoader.loadedBytes: The loadedBytes method returns the number of total loaded bytes.

Update 2009-05-17:swfJSPreLoader Flash Builder Project Sourcefiles (ZIP, 553kb)

Update 2009-05-17:swfJSPreLoader-Test (ZIP, 532kb)

I hope this is helpfull for anybody.

cheers,
Sebastian

Here is a little JavaScript Class which allows you to have timed function calls. Of course there could be different instances of these timers. Here is a example how to use it:

var timer = new Timer( {'interval':1000} );
timer.start( timedFunction );
 
function timedFunction(){
   // called every 1000 milliseconds
}

The function timedFunction will be called every 1000 milliseconds. The millisecond interval will be configured within the configuration object, which is given as parameter into the the class constructor. There is also an optional second parameter for the start function to set the scope. This allows you to use the timer within other JavaScript objects. To stop the timer use the stop function.

/** ------------------------------------------------------------------------------------------------------------ *
 * @class: Timer
 * @classDescription: implements a timer class to handle timed events
 * @author: Sebastian Martens
 ** ------------------------------------------------------------------------------------------------------------ */
function Timer( obj ){
	this.isRunning = false; // is timer currently running
	this.interval = 500; // default interval of event calls
 
	this.funcRef = null; // reference to called function
	this.scope = this; 
 
	this._timerId = 0; // global timer id
 
	/**
	 * @constructor
	 * @param {Object} obj - construction parameter
	 */
	this.construct = function( obj ){
		this.mixIn( obj, this );
		// find smallest not used timer id
		while( document[ 'myTimer'+this._timerId ]!=null ) this._timerId++;
		document[ 'myTimer'+this._timerId ] = this;
	}
 
	/**
	 * mix a given object into this object
	 * @param {Object} obj - given object with parameters
	 */	
	this.mixIn = function( obj, scope ){
		if(!scope) scope = this;
		var item = null;
		for(item in obj){
			scope[ item ] = obj[item];
		}
	}
 
	/**
	 * starts timer
	 * @param {Int} interval - time in milliseconds for time interval
	 * @param {Node} scope - the execution scope of the reference function
	 * @param {Function} funcRef - function reference of function to be called on time event
	 */
	this.start = function( funcRef, scope, interval ){
		if(interval) this.interval = interval;
 
		this.scope = scope;		
		this.funcRef = funcRef;
		this.isRunning = true;
		this.startTimer();
	}
 
	/**
	 * starts a new time event call with given time interval
	 */
	this.startTimer = function(){
		if( !this.isRunning ) return; 
		window.setTimeout("document['myTimer"+this._timerId+"'].timedHandler()",this.interval);
	}
 
	/**
	 * stopps the timer
	 */	
	this.stopp = function(){
		this.isRunning = false;
	}
 
	/**
	 * timed event handler. will be called on each time event
	 */
	this.timedHandler = function(){
		if( this.isRunning ){
			if( this.funcRef ){
				this.funcRef.apply(this.scope);
			}else this.stopp();
 
			// do next timer call
			this.startTimer();
		}
	}
 
	// constructor call
	this.construct( obj );
}

Download JavaScript Timer.js

cheers,
Sebastian

I’m really not a fan of popup windows within a website. But sometimes it really makes sense. For example for a little campaign which is more or less a microsite. But you want not to lose the website context. In this case i would “allow” to open the campaign in a popup window.

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

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" ...

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

We use the ExternalInterface of the Flash Player to let JavaScript resize the HTML-Container of the Flex application. Our App loads dynamic content via XML and builds a list of entries. But we would like the user to use the standard browser scrollbar and not a scrollbar within the flex application. So we have to resize the HTM-Container of the Flex application, depending on its actual loaded content. Each time a new entry is added to the list, we call an JavaScript method from the Flex app via ExternalInterface to resize the HTML. This is done by using the resize-Event of Flex.

But sometimes the resize event is called up to 100 times within a second. In this cases some browsers ( sorry, but the IE seems to be ok ) didn’t get all JavaScript calls we made via ExternalInterface and some of our calls weren’t handled ( the container was not resized and our Flex list was cutted off ).

In our first version of the app we made an default call, which calls the last JavaScript-resize after a specific period again. Easy but not very elegant.

What if done now is to implement an JavaScript-Call-Stack. You put in your ExternalInterface calls and the stack will process each after an other after a given pause between the calls. If you often have the same call, maybe only with updated parameters, just like our resize-Event which has different height and width values, the stack is able to clean older calls ( which aren’t processed up to than ) and only calles the latest (in our example the JavaScript method runs ~3 times and not 100 times). The disadvantage of ExternalInterface calls via such a stack is that this is no an asynchronous process and you have to define a callback-handler if you expect an return value of the JavaScript method.

How it’s done:
Create an instance of the JsCallStack class. You should set the timer for the JavaScript calls in ms (will be 500ms by default). Maybe this value could differ from browser to browser (and maybe client hardware), i didn’t test best values for that.

// init JS function call stack
this._jsCalls = new JsCallStack();
this._jsCalls.timerInterval = 30;

It is also possible to give the stack a different mode. By default the stack will be handled as FIFO-Stack (First-In-First-Out). This means that every new call will set at the last position of the queue. It’s also possible to use it as LIFO-Stack (Last-In-First-Out), means that the last call will be handled next.

// init JS function call stack as LIFO-Stack
this._jsCalls = new JsCallStack( JsCallStack.STACK_MODE_LIFO );

Second easy step: Make your JavaScript call:

this._jsCalls.addJSCall("swfInputs.swfInputInit", {}, jsInitCompleteHandler);

This will add a JavaScript method-call to your stack. First param is the method-name (here: method “swfInputInit” of the swfInputs-Object). The second parameter is an object which will be passed to the JavaScript method. This parameter is optional. The third parameter is the result-handler reference. If you expect any results from the JS-method, they will be handed over to this AS-method.
The return value of the addJSCall-method is an integer value of the stack position your call have ( 1 = will be processed next ). If the result is -1 the ExternalInterface isn’t available.

There are also two more parameters: The fourth is the skipOldCalls-parameter. If this is set to true (default is false) older calls of the same JS-method name will be ignored and removed from the stack. The fifth-parameter is convertToJSON. This will convert your given object, which should pass to the JS-method, to JSON.

Happy AS + JS coding.

Download (2009/12/19) JsCallStack.as (Vector)
Download (2009/03/29) JsCallStack.as (ArrayCollection)

cheers,
Sebastian

Doing nice code-comments allows you faster blog-posts:

/**
 * constructor method
 * @param stackMode:int - stack mode of handling stack entries
 */ 
public function JsCallStack( stackMode:int=JsCallStack.STACK_MODE_FIFO )
 
/**
 * adds an javascript function call to call stack
 * @param funcName:String - function name of js function to call
 * @param paramter:Object - object of paramters to path to the javascript function
 * 							Object will be converted to JSON and hand over an JSON-Object
 * @param resultHandler:Function - method to handler javascript results
 * @param skipOldCalls:Boolean - if true older calls in stack of the same functionname won't be 
 * 								 called any more, only latest call
 * @param convert2JSON:Boolean - if true the parameter object will be converted to JSON for the javascript call
 * @return Int value of stack position, returns -1 if External Interface is not available
 */ 
public function addJSCall( funcName:String, parameter:Object=null, resultHandler:Function=null, skipOldCalls:Boolean=false, convert2JSON:Boolean=false ):int
 
/**
 * removes an javascript call from stack
 * @param id:int - identifier position of call which was returned from addJSCall Method
 * @return Boolean - function found an removed, false if already called
 */ 
public function removeJSCall( id:int ):Boolean
 
/**
 * returns if the timer is running 
 * @return Boolean - is the execution timer running 
 */ 
public function isExecutionRunning():Boolean
 
/**
 * returns the n number of registered functions at this momment 
 * @return INT - numer of registered functions, which are not executed yet
 */ 
public function getRegisteredFunctionsCount():int
 
/**
 * setter method for timer interval value
 * @param value:Int - timer interval in milliseconds
 */ 
public function set timerInterval( value:int ):void
 
/**
 * getter method for timer interval
 * @return Int - set timer interval
 */ 
public function get timeInterval():int
 
/**
 * pauses the execution of javascript calls
 */
public function pauseExecution():void
 
/**
 * restarts the execution of javascript calls 
 */ 
public function startExecution():void

I wrote this very little pice of code several times now, because i lost it each time again. Hopefully i find it next time here…
So what to do if you want to preset an selection within an input or textarea, just to support your users a little ( which they will never recognize – of course, they are users and do expect these things ). We’re lucky, Mozilla and IE also have little methods for that:

/**
 * @description setSelection - sets an selection for end input from start to end- index
 * $Id: range_selection.js 2 2009-03-17 19:25:27Z dinnerout $
 * @param node DOM-Node/String - DOM-Node or Id of Node to set selection in
 * @param startIndex Int - Startindex od selection
 * @param length Int - length of selection
 */
function setSelection( node, startIndex, length ){
	var dNode = (typeof node == 'string')?$(node):node;
	dNode.focus();
	// IE
	if(document.selection){
		var range = document.selection.createRange();
		range.move('character',-10000000); // reset cursor position
		range.moveStart('character',startIndex);
		range.moveEnd('character',startIndex+length);
		range.select();
	}
	// Mozilla
	if(dNode.selectionStart){
		dNode.selectionStart = startIndex;
		dNode.selectionEnd = startIndex + length;
	}
}

Who ever has to support the old IE6 and is not able to ignore or to bann users with this browser (or is part of an active resistance de:”Webmaster-Aufstand-gegen-alte-Internet-Explorer” ), has to hack around things quiet often.
One big problem is that the IE6 has some render problems when you manipulate content in the DOM tree. If this happens to earlie you maybe get boxs which are cut off or your footer may have an wrong position because the IE didn’t update the box size in which you updated your content.

In my case i had an select field with the attribute “multiple”. This should haven an height of 300px set via CSS. The select-node was created via JavaScript. The first select got content via AJAX. The second should be empty as long as you don’t double click the first and copy content from left to right.  The complete construction was created and attachted on page load. The first select was displayed correctly. But the second one looks like an normal select with one line height, not 300px as expected.

To fix this problem you have to set an little timer which triggers an function which again manipulates the element to force the IE to rerender this section. So if your footer position is wrong after an update of any content, just update an little style attribute and reset it:

setTimeout("getElementById('footerId').style.height = (footerHeight+1)+'px'; getElementById('footerId').style.height = (footerHeight-1)+'px';",500);

This doesn’t work with my empty multiple select when i used the select field itself. I had to create an new DIV-Container right under the select-field which i resized a bit and removed it afterwards. This then also updated the select-field.

setTimeout("ieFixSelect('mySelect')",500);
 
function ieFixSelect( selectId ){
    var node = getElementById( selectId );
    var fixNode = document.createElement('DIV');
 
    node.parentNode.appendChild( fixNode );
 
    fixNode.style.height = '1px';
    fixNode.parentNode.removeChild( fixNode );
}