vorweg einmal vielen Dank an Adobe, dass ich dieses Jahr die Eintrittskarte zur Adobe MAX für mich kostenlos gab.

Auch wenn es in diesem Jahr nicht so einen großen Hype um neue Ankündigungen zur MAX im Vorwege gab wie im letzten Jahr, sollte es doch zumindest eine Reise nach L.A. Wert sein. Zumindest das Opening der ersten Keynote auch rein von der Show her sehr überzeugt. Mit 48 HD Beamern wurde hier eine große Show auf eine riesiege Leinwand im Nokia-Theater gebracht:

Der Sonntag startete mit dem Community Summit. Für die User Group Manager gab es ein gemeinsames Treffen mit vielen Infos rund um die Community Arbeit bei Adobe. Wer macht was, was ist neu, sowie eine Open-Mic-Session für die vertretenen User Groups. Aber auch für nicht User Group Manager gab es eine vielzahl an Präsentationen, Vorträge und Preconference Labs.

An Annehmlichkeiten wurde von Adobe nicht gespart. Selbst an der Eingangstür gab es drei Herren, deren Job es war, die Leute willkommen zu heißen – sonst nichts. Auch das Essen hätte schlechter sein können, schließlich wollen hier mehr als 5000 Personen gleichzeitig versorgt werden.

Der erste Tag der Kernkonferenz begann mit der Keynote von Adobe CEO Kevin Lynch im Nokia Theater an. Wirkliche technische Neuerung gabe es eigentliche keine zu bewundern. Die wesentlichen Neuerungen waren eher die neuen Ausrichtungen des Konzernz. Zum einen die mobilen Anwendungen präsentiert in Form der Touch Apps. Sowie die dahinter stehende Cloud Landschaft die die bisherigen Adobe Formate versteht und für die mobilen Endgeräte entsprechend zugänglich macht. Ebenfalls neu sind die Abomodelle der klassischen Software in Verbindung mit der Adobe Cloud. So wird man sich nicht mehr die klassischen Create Suite Pakete kaufen müssen, sondern kann, zu Anfang einen begrenzten Umfang an Software, auch je nach Gebrauch über eine Abo-Modell beziehen (SaaS).

In wie Weit die Touchvarianten für den Alltagsgebrauch sinnvoll einsetzen lassen wird sich zeigen wenn die Software Anfang 2012 für den Endkunden verfügbar sein wird.

Auch musste man sowohl in der Keynote am ersten wie am zweiten Tag auf das Thema Flashj Plattform warten. Adobe präsentierte sich ganz klar als HTML5 Company. Dies heißt natürlich nicht, dass die Flash Plattform fallen gelassen wird, allerdings wird der Focus öffentlichkeitswirksam eher auf das Thema HTML + JavaScript gelegt.

Leider waren die meisten der Vorträge die ich besucht habe häufig sehr oberflächlich und nur sehr selten tiefgreifend ( amerikanisch ?! ).

Was dagegen richtig gelungen war, waren wie gesagt die Eröffnungspräsentation und die MAX Bash, die Party nach dem zweiten Konferenztag. Buffet über mindestens 150m, 10 Imbisswagen mit verschiedensten Köstlichkeiten, Performance-Künstlern, Nerd-Spielen und die Band Weezer als Abendhighlight – eben richtig Hollywood.

Schlussendlich also eine super Show, aber leider inhaltlich wenig Neues und auch leider nicht die reichlichen Geschenke wie im vergangenen Jahr.

cheers.
Sebastian

Of course there will be a lot people who might say that it’s bullshit to include JavaScript into a Flash file (.swf) to obfuscate the JavaScript code – and your right. This is just one thing you can do which has some advantages and also some disadvantages.

In case you want to hide your JavaScript source code not to be seen by other people because it takes you so much time or even money to develop this code – sorry to say, but this will not finally work. There are a lot websites out their which “encrypt” your JavaScript code and make it less readable for humans. But there are as well sites which do the opposit and make it really well readable again. So it will always be possible to have a look at your source code. Also hiding the JavaScript in a flash file will just makes it more difficult, but not impossible, because you could also decompile the flash file.

The worst disadvantage of executing the JavaScript code from within an flash file is of course that this requires flash support at the client side. So this is applicable if you already use flash on your site or at least for all JavaScript parts that are directly related to the flash application. This also encapsulates all application parts in one file ( and reduced the number of loaded files ).

Do it

The first thing you should do ist to compact your JavaScript to keep it small. You could use the JavaScript Compressor by Dean Edwards ( http://javascriptcompressor.com/ ), the Google Closure Compiler ( http://closure-compiler.appspot.com/home ) or other tools. Here is a little tool uses different compressors and shows the compared results: http://compressorrater.thruhere.net/. Be sure you have a clean JS code before you compress it ( JSlint – it might hurt your feelings ), otherwise the compacted JS might not work. You will end up in a single line string of compressed JavaScript code.

Here is a simple JavaScript example, which creates an new div-Container as child of an existing container. The id of the existing container is ‘myCurrentNodeID’. This should be changed dynamically. Therefore this will be replaced by an more abstract placeholder which will be replaced by an regular expression.

function myJSMethod( nodeId ){
  var node = document.getElementById( nodeId ),
  newNode;
 
  newNode = document.createElement( 'DIV' );
  node.appendChild( newNode );
 
  alert( nodeId );
}
myJSMethod( 'myCurrentNodeID' );

Compressed and with replaced node id this looks like this:

function myJSMethod(nodeId){var node=document.getElementById(nodeId),newNode;newNode=document.createElement('DIV');node.appendChild(newNode) alert(nodeId)}myJSMethod('###');

In our final implementation we will have one variable or const with the JavaScript code. In your final project you should create and ANT task for the JS processing. To include all JavaScript into one file, compress the file and paste the JS String into the ActionScript class.

public class myClass extends Sprite{
 
		// this JavaScript code will be injected first into the page
		private const JS_CODE:String = "function myJSMethod(nodeId){var node=document.getElementById(nodeId),newNode;newNode=document.createElement('DIV');node.appendChild(newNode) alert(nodeId)}myJSMethod('###');";
		private const JS_PATTERN:RegExp = /###/g;
		// node id given dynamical to the class
		private var nodeId:String;
 
		/**
		 * constructor
		 */
		public function myClass( nodeid ){
                        this.nodeId = nodeid;
			if( this.available() ){
				// injekt js code
				ExternalInterface.call("eval", this.getJSCode() );
			}
		}
 
		/**
		 * replaces a strings by pattern within the javascript code snipped
		 * @return replaced javascript code
		 */
		private function getJSCode():String{
			return this.JS_CODE.replace( this.JS_PATTERN, this.nodeId );
		}
 
                // do your stuff
}

In the class constructor the JavaScript will be executed the an eval statement via the External Interface. This will make the JavaScipt code available in the browser context. Even the JavaScript function “eval” ist evil, this will only be executed once. Be sure you don’t make to much use of it in your own code.

You can find full working demo code here – its used for my self resize class: http://blog.sebastian-martens.de/2010/06/resize-flash-application-container/

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

Die Agenda ( http://www.google.com/events/developerday/2010/munich/agenda.html ) lässt einem natürlich wieder die Qual der Wahl. Auch wenn ich zur Keynot nicht rechtzeitig gekommen bin, soll es wohl stark Android lastig gewesen sein – wer kann es Google verübeln.

Programming the Web with Native Client ( Slides ) …
war ein sehr interessanter Vortrag, wenn man – wie ich – sich mit dem Thema noch nicht befasst hat. Klasse vorgestellt von High Level bis hin zu Code. Toll zu sehen wie schnell Anwendungen laufen können wenn sie native Unterstützung bekommen. Leider so derzeit nur in Chrome.

Google Chrome Extensions …
wie der Titel schon sagt: Chrome Extensions. Klasse Einstieg. Das wars dann aber auch schon.

Practical HTML5 ( Slides )
Wenn man derzeit nur “HTML5″ in den Titel schreibt, bedeutet das natürlich sofort, dass der Raum auch voll ist. Hier wurde die bekannte HTML5 slides Demo ( http://slides.html5rocks.com/#landing-slide ) nochmal Anwenderfreundlich aufbereitet mit praktischen Tipps und Real-World Nutzen. Klasse präsentiert.

Real World Website Performance Optimization
sollte eigentlich jeder gesehen haben der irgendwie mit Webseiten arbeitet. “Performance Optimization” ist kein Thema für High End Anwendungen um die letzte Millisekunde an Ladezeiten herauszuholen. Spätestens seit dem von Google auch die Auslieferungsgeschwindigkeit mit in die Suchergebnisse einfließen soll, kann man das Thema schon fats im Bereich SEO ansiedeln. Natürlich ist das keine Rocketscience. Einfache Tipps wie “fassen Sie verschieden JS-Files zu einem zusammen, um möglichst wenig Requests zu haben” sind eigentlich bekannnt und leicht umsetzen, helfen aber auch sehr viel.

What’s New in Google Geo: Maps API V3 and Fusion Tables ( Slides )
alles neu macht V3 stimmt natürlich nicht. Aber einen Überblick von Google direkt zu bekommen lässt einen manchmal Funktionen erkennen nach denen man nicht aktiv gesucht hätte, aber doch Ihren nutzen haben können, gerade wenn es mal kleine und schnell gehen muss: So die Google Fusion Tables. Das Excel für Google Maps. Ein Blick lohnt sich.

Den letzten Block habe ich leider nicht mehr sehen können, weil der Flieger ging. Aber nächstes Jahr gerne wieder.

cheers,
Sebastian

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