Die Eröffnungs Keynote kommt von Peter Schaar, dem Bundesbeauftragten für den Datenschutz und die Informationsfreiheit, und damit dem beruflichen Feind von Google. So versteht er seine Aufgabe aber zum Glück nicht. Auch die Keynote war natürlich keineswegs der Aufruf alle tollen Apps einzustellen. Er wollte das Bewusstsein für den Datenschutz und die Selbstbestimmung des Users schaffen. Datenschutz gehört mit an den Anfang der Anwendungsentwicklung und nicht in irgendeine Phase nach dem Livestart – “Da war ja was”.

Start-up-Karussell: Innovative Multi-Device-Lösungen:
Hier gabs zweimal ein Startup für digital Publishing für verschiedene Tablets, einen Geo-Location Dienst zum Freunde finde und Prämien bei Check-Ins kassieren und wahwah.fm. Letzteres hat mich offensichtlich überzeugt, weil es genau die Komponente abbildet die mir bei grooveshark.com noch fehlt: Zusammen musik hören. Der User stellt seine Playlist mit seiner eigenen Musik zusammen ( auch die eigene Musik hochladen oder entsprechende Musikportale einbinden – derzeit nur Soundcloud ) und stellt das dann als eigene Radiostation zusammen. Die verbundenen Freunde können dann zusammen die gleiche Musik hören und sich entsprechend dazu auch austauschen. Die iPhone App befindet sich im Review. Überzeugt!

Social – Idee Heineken – The Invite:

Heineken – The Invite from Max Gebhardt on Vimeo.

Das mobile Internet im Jahr 2021:
… hier wurden keine großen Geheimnisse ausgeplaudert die sonst noch keiner weiß. Aber es war eine sehr gute Zusammenfassung aktueller Trends und vieler Studien die so zusammengenommen, ein gutes Bewusstsein für allg. Weiterentwicklung schärften.

Ganzheitliche Webseitenoptimierung – mehr als nur SEO
… klang erstmal nach allg. Performance Tipps und zumindest technisch und eben nach mehr als eine einseitige Betrachtung von SEO. Aber als man nach 15min die große Geheimformel immer noch “Man muss die wirklich wichtigen Personen im Team des Kunden herausfinden” war, fand ich das dann doch eine große Schleife zu Thema SEO. Erste Stunde Projektmanagement – wenn überhaupt, war irgendwie unangebracht.

Viral = genial? Eine Gebrauchsanleitung für virale Kommunikation
Entsprechend 15min verspätet dort angekommen – tolle Unterhaltung. Sicherlich kann man einen viralen Erfolg nur sehr schwer planen. Aber unterlegt mit viel Beispielen – was hat funktioniert, was hat nicht funktioniert und was gibt es überhaupt an viralen Kampagnen ( man bekommt ja doch nicht alles mit ) – hat der Vortrag nicht nur einen tollen Unterhaltungwert sondern auch einen echten Nährwert. Hier nochmal ein paar Beispiele:

Greenpeace vs. Nestle:
http://www.youtube.com/watch?v=ToGK3-2tZz8
http://www.youtube.com/watch?v=VaJjPRwExO8

TomTom – Break Free mit John Cleese:
http://www.youtube.com/watch?v=n0HZhM_CrSg&feature=relmfu
http://www.youtube.com/user/tomtombreakfree#p/u/1/gxMS2cSsNJo

Frank geht ran – Nummer für Deutschland ( symio ):
http://www.frank-geht-ran.de/

Canal+ Good Story:
http://www.youtube.com/watch?v=PWcc2hCwsWM

Mach du das:
http://www.youtube.com/watch?v=k6taxx5NBu0

Need a new barbeque:
http://www.ibelieveinadv.com/2006/10/vijay-sales/

Tag 2
NUI Usability – Zur Gestaltung des Nichts
Spitzenklasse. Wolfgang Henseler – Professor und Creative Managing Director von Sensory Minds hat einen sehr interessanten Vortrag zum Thema “Natural User Interface” gehalten. Er beschrieb die Entwicklung das Wie und Warum, von dem Command Line Interface (CLI) über das heutige Graphical User Interface (GUI) hin zu der nächsten Station der Interfaces dem Natural Uer Interface. Wenn von der Eingabe hin zu situativen Diensten ohne spezielle Eingabemedien. Es bedarf keiner künstlichen Abstraktionsebene mehr für eine Operation sondern das Object wird direkt bearbeitet ( “Zur Gestaltung des Nichts” ). Jetzt muss man mal wieder was mit Touch bauen. ( Nachtrag: Video von der FFK10 http://vimeo.com/18400281 )

ring°wall from SENSORY-MINDS on Vimeo.

Einblicke in die Fußangeln der weltweiten Browserspieleentwicklung
… war kein technischer Vortrag, sondern ein Walk-Through durch alle Schritte einer Browsergame Entwicklung. Worauf muss ich achten, woran sollte ich denken. Alles kein Hexenwerk und eigentlich bekannt, aber gut zusammengefasst und gut das man es mal wieder hört. Auch andere haben deine Probleme :)

Dawning Age of Mobile Internet
… war leider so gar nicht Keynote. Mobile Blabla, das irgendwie in anderen Vorträgen besser rüber kommt / kam.

Webdesigntrends 2011
Klingt natürlich ein wenig hochtraben, war aber letztlich doch ganz gut. Vitaly Friedman vom Smashing Magazin erzählte nicht darüber welche Designelemente jetzt gerade “In” sind oder nicht, sondern darüber wie Webseiten aufgebaut sein sollten um heutigen Richtlinien stand zu halten. Besonders das Thema Multi-Device, sprich unterschiedliche Auflösungen war ein Thema: Stichwort Fluid Layout und CSS3 Media Quiries.

JavaScript: Best Practise zur Qualitätssicherung
Cool: Ich mach das schon wie die ( abgesehen von der automatisierten Einbindung von JS Unit Tests ).
Eigentlich ging es in dem Vortrag um den klassischen Aufbau eines Softwareprojektes ( Modular, Testing, Refactoring, Coding Guidelines, … ) angewendet auf JavaScript.

Tag 3
Das digitale Paradies uns seine Sklaven
Gernot Pflüger stellt seine Erfahrungen der letzten 20 Jahre mit einem ganz anderen Firmenmodell vor. Der erste Vortrag seit langem der völlig ohne Slides auskommt. Einfach toll und inspirierend.

Strategie ist Trump – Neue Maßstäbe für Browsergames
Holger Nathrath von Blue Byte/ Ubisoft stellt die online Version des Klassikers “Die Siedler” vor. Umgesetzt wurde das Spiel mit Adobes Flash Plattform. Interessante Einblicke in die Planung und die Gründe für die Flash Plattform. Klasse Umsetzung.

Der virale Faktor
Schon der zweite Vortrag der ohne Slides auskommt. Aber keines Falls schlechter auch hier ein klasse Abriss über die Medienlandschaft aus der Sicht von Martin Oetting. Sehr empfehlenswert.

Fighting Layout Bugs
… war die Vorstellung von http://code.google.com/p/fighting-layout-bugs/ einer Scriptsammlung zur automatischen Erkennung von Layoutbugs, wie z.B. dem Herausragen von Texten über Kanten, überflüssiger horizontale Scrollbalken o.ä. Die Scripte setzen dabei auf dem Selenium 2 Framework auf.

Wer Gewinnspiele braucht, hat keine Botschaften – Social Media uns so !
Love It !! Vielen Dank Christoph Bornschein von Torben, Lucie und die gelbe Gefahr. Nicht nur das ich den Firmenname liebe, sondern auch den Vortrag. Die 60 “blanker Hass” gegen Facebook Gewinnspiele ohne Sinn und Verstand waren ein wahrhaft krönender Abschluss für mich für die Konferenz. Was bringen mir xy-Tausend Friends auf Facebook die ich über ein Gewinnspiel “angelockt” habe ? Die reine Anzahl bringt mein Unternehmen keines wegs weiter. Vielleicht nur schlecht gelaunte Freunde die auf das nächste Gewinnpspiel warten. Aber keiner von denen identifiziert sich mit meiner Marke.

Die Glücklichen, die sich rechtzeitig Tickets organisiert hatten, durften sich dann noch über ein Intellibook Netbook freuen. Vielen Dank. Wieder eine wenig Spielzeug. Dann vielleicht bis zum nächsten Jahr.

cheers,
Sebastian

Endlich darf ich mal wieder raus. Dieses mal zur JavaScript Conference Europa ( jsconf.eu ) nach Berlin. Die Tickets ware relativ schnell ausverkauft – es sollte auch bewusst klein gehalten werden. Insgesamt wurde knapp 200 JS-Fans Eintritt gewährt. Man merkte auch recht schnell, dass es sich wirklich um eine europäische Konferenz handelte. Deutsche Sprache war eher die Außnahme.

Die Keynote von Dion Almaer, Ben Galbraith ( ajaxian.com ) zusammengefasst: “Das Web ist gut und ganz wichtig in der Zukunft. Die JavaScript Performance wird besser. Ende” – war also recht übersichtlich.

Als Freund von dojo habe ich mich natürlich auf Peter Higgins ( @phiggins ) gefreut. Es gab nichts großes Neues. Mehr ein “Good Parts” Version von Peter Higgins. Dazu gehörten für ihn auch die Etablierung von serverseitiges JavaScript mit node.js und CommonJS, sowie require.js.

Jenn Lukas Vortrag “JavaScript + Web Standards II: The Quickening” war im Wesentlich ein Vortrag zu Webstandards. “Halte dich an Standards. Achte darauf das deine Seite auch ohne JavaScript funktioniert. Denke an ScreenReader uns SEO.” Immer mal wieder gut sich auf den Boden der Tatsachen zurückholen zu lassen. Genauso wie man auch Test für seine Anwendung schreiben sollte ….

Tim Caswell hat in seinen “Techniques and Tools for Taming Tangled Twisted Trains of Thought” node.js vorgestellt und dessen non-blocking Architektur.

Ein wenig off topic war der Vortrag von Nicole Sullivan. Ihr Job ist die Optimierung von CSS in großen Projekten. Sie hat z.B. das CSS von Facebook optimiert. “Benutze ‘grep’ um doppelte Definitionen von Tags zu finden. Erstelle ein einheitliches Gridlayout um Seitendefinitionen nicht unnötig zu wiederholen.” -> “It’s all about pattern matching.” Sehr schön zu sehen, dass man es eigentlich schon ganz richtig macht, und sich nur häufiger mal dazu zwingen müsste aufzuräumen.

Sehr spannend und unbedingt einen Blick wert ist die Cloud9 IDE die Fabian Jakobs vorgestellt hat. Dabei handelt es sich um einen webbasierten Editor mit allem was dazugehört. Sieht gut aus und scheint flüssig zu laufen. Und das alles auch noch erweiterbar und weitestgehend opensource -> http://github.com/ajaxorg/cloud9. Give it a try !

Spannend und politisch wurde es als Microsofts Product Manager Pete LePage den neuen IE9 vorstellt. Microsoft scheint sich tatsächlich an Standards halten zu wollen und steuert dafür eine große Zahl von Testfällen bei. Auch die JavaScript Engine wurde maßgeblich verbessert. Außerdem wird der IE9 die Grafikkarte zum Rendern verwenden werden können. Man wird also wirklich gespannt sein können. Und dann darf man sich wieder über den IE ärgern, wenn man die ganzen Anpassungen für den IE wieder umbauen muss weil sie aufmal funktionieren wie in anderen Browsern.

Den Abschluss für den ersten Tag bildete Brandon Eich, einer der Schöpfer von JavaScript und immer noch tätig im ECMA Ausschuss für die Weiterentwicklung von JavaScript, Er stellt die Pläne und aktuellen Drafts zu ECMA5 vor. Dort ging es vor allem um Proxy Objecte innerhalb der JavaScript Implementationen. Die Proxy Objekte stellen eine API zu einer Meta-Ebene bereit. Dies soll z.B. die Implementationen von Getter und Setter Methode vereinfachen. Dann wird es sicher noch viel mehr Anwendungsfällen geben wenn man das alles richtig verstanden hätte. Diese Proxy- Handling ist bereits im aktuellen Firefox 4 umgesetzt. Für WebKit steht ebenfalls eine Implementation bereit.

Bevor es mit Bussen zur Party ging wurden noch die Gewinner des zuvor ausgelobten 1kB JS Wettbewerbs gekrönt. Ziel war es etwas möglichst Eindrucksvolles in maximal 1024 Zeichen JavaScript Code zu pressen. Ich hätte es nicht für möglich gehalten. Wie der erste Platz beweist bekommt man ein komplettes Jump + Run Spiel in 1024 Zeichen unter. Nur auf dem zweiten Platz: Ein komplettes Schachspiel inklusive Computergegner ( der sich zudem noch nicht schlagen lässt ). Man sollte sich die Liste der Gewinner unbedingt mal ansehen

Tag 2

Den Opener am zweiten Tag machte der JavaScript Guru Douglas Crockford der mit einem einfachen Slide die anwesenden Massen begeistern konnte ” IE6 must die! “. Es ging weiter um Schleifen innerhalb von JS und natürlich auch dort um serverseitiges JavaScript. Auch als Presenter sehr zu empfehlen.

Jens Arps stellte in “The hitchhiker’s guide to client side persistent data storage.” die verschieden aktuellen Methoden vor Daten auf dem Client dauerthaft und ggf. in größerer Menge zu speichern. Leider kommt er zum Schluss, dass man immer noch nicht über die Verknüpfung mehrer Lösungen herumkommt, da auch hier die Browserwelt zu differenziert ist und SQLite noch nicht ausreichend verbreitet und auch in der Implementation zu unterschiedlich ist.

Ryan Dahl ist der Schöpfer von node.js. In “Techniques for a single stack world” stellt er die aus seiner Sicht 10 größten TODOs für node.js vor. So fehlt z.B. im Moment noch ein richtiger SSL support und eine ausreichende Performance Test Suite.

Bei Jed Schmidt ging es um sein (fab) framework, das für einen nicht blockierenden Code sorgt, und dabei einen möglichst reibungslosen Callback- Mechnismus implementiert. Die Schreibweise des Codes ist dabei zwar bei wenigen Zeilen schnell getan und das Ergebnis vermutlich auch schnell funktionsfähig, doch bevor dafür nicht jemand einen vernünftigen Editor / Syntaxhighlighting gebaut hat, scheint es zu schnell zu unübersichtlich zu werden.

Ebenfalls etwas fürs Auge: “Robotic JavaScript”. Jörn Zaefferer & Nikolai Onken gingen der Frage nach was man mit JavaScript alles anstellen kann, wenn man den Browser erst einmal verlassen hat. In Verbindung mit node.js auf dem Server lassen sich so nicht nur Verbindung mit dem Wii- Controller herstellen, sondern auch Hardware ansteuern, wie z.B. Discokugeln -ferngesteuert mit dem iPhone.

Mark Wubben, den man sonst als Schöpfer von siFr kennt, beschäftigte sich mit der Erstellung von Browser-Extensions. Leider musste ich die Bahn rechtzeitig erwischen, sonst gäbe es vielleicht mehr zu berichten.

JSONF EU – Gerne wieder.

cheers,
Sebastian

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

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

For this i wrote the swfJSPreLoader. This preloader accepts an array of assets (jpg,gif,png,swf) 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 currently loaded bytes on each call.

Update 2011-08-07:swfJSPreLoader Flash Builder Project Sourcefiles (ZIP, 62kb)

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

Examples (added 2010-11-07, updated 2011-08-07)

After this seems to be difficult here are some more working examples. All tested at FF4.0b6/OSX; Safari5/OSX; Chrome7.0/OSX; FF3.6/WinXP; IE8/WinXP. Please not that this should be tested from an Server environment and not from local filesystem and requires an installed Flash Plugin.

Added an example for loading from other servers via crossdomain policy file and showing percent loading status.

download examples

I hope this is helpfull for anybody.

cheers,
Sebastian

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

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

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 );
}