[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

You maybe know the Nintendo Wii and its controller the Wiimote. Joa Ebert and Thibault Imbert implement a AS3 package called WiiFlash which allows you to connect the Wiimote ( or Wii Remote Control ) with your Flash/Flex Application.

The Wiimote uses several sensors to detect different motion values. It allows you to read the acceleration value for X-,Y-, Z-axis and Roll, Pitch and Yaw, which is the rotation around the x-,y- and z-axis. So you have a lot more degrees of freedom than with a simple mouse or keyboard. A funny thing you could implement with this for example is WiiSpray, which also uses the WiiFlash Lib.

The WiiFlash package consists of two parts. The first one is the WiiFlash Server. It’s written in C++ / .NET and handles the communication with the Wiimote. The second part is the WiiFlash ActionScript API, which gives you methods and events to get and handle the Wiimote data.

The Wiimote communicates via Bluetooth with its endpoint. So the WiiFlash Server connects to your PCs or Mac Bluetooth stack and reads the data from the Bluetooth connection. This data are send via Socketconnection to the Flash Player. The WiiFlash AS3 API now converts the Wiimote binary protocoll into useable data. Which means you could directly read the values and also get update and/or change events if anything happens.

Connect the Wiimote
The WiiServer is available for PC or Mac. At first you have to connect your Wiimote with your PC or Mac. That means you have to create a Bluetooth connection between them – pair them via Bluetooth. After this step the WiiFlash Server should be able to find the Bluetooth connection and create the connection to the Flash Player. Find a detailed description how to connect your Wiimote with your PC here.

After you could pair your PC/Mac with the Wiimote, disconnect the Wiimote and start the WiiFlash Server. When the server started connect your Wiimote again ( this is done by pressing the Buttons “1″ + “2″ of your Wiimote at the same time ). After a short time you should see the connected Wiimote at the WiiFlash Server. It shows you the Batterylevel and the Wiimote-ID. Both Server versions could connect up to four Wiimotes at the same time.

I did not test the WiiFlash under Windows Vista. But wit OSX 10.5.x you’ll get an Java error when you start the server:

Cannot launch Java application.  Uncaught exception in main method: 
java.lang.IllegalStateException: Bluetooth failed to initialize.  
There is probably a problem with your local Bluetooth stack or API.

You just have to declare the WiiFlash Server as 32bit application. Just open the file properties ( Apple + i ) and check the 32bit-mode checkbox. This will fix the problem. ( Otherwise the application is launched as 64bit application ).

Unfortunately both server versions aren’t that stabel. From time to time the server crashes or the connection between server and Flash Player doesn’t seem to work any more. You just have to close the server, disconnect the Wiimote from your PC or Mac and restart the connection. This also helps if the rumble function or the LED setter method seem to quit their work.

Connect the Wiimote with your Flex App
The WiiFlash AS3 API gives you a very clear set of methods, which gives you fully access to the Wiimote data. At first you have to create an instance of the Wiimote class. Now you could create the connection to the Wiimote and access the data.

import org.wiiflash.Wiimote;
 
private var wiimote:Wiimote;
 
public function init():void{
	wiimote = new Wiimote();
 
	/* use Event.Connect NOT WiimoteEvent.CONTROLLER_CONNECT */
	wiimote.addEventListener( Event.CONNECT, connectHandler );
 
	wiimote.connect();
}
 
private function connectHandler( evt:Event ):void{
	trace( "Wiimote is connected" );
}

Read Wiimote data
The accelerator values could be accessed on to different ways. First you could read the data directly from the Wiimote-instance. This is helpful if you have an timed update interval, which handles the data. For example if you use an the enterFrame event to call a method which handles the Wiimote data:

public function init():void{
	wiimote = new Wiimote();
 
	/* get Wiimote data onEnterFrame */
	this.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
 
	wiimote.connect();
}
 
private function enterFrameHandler( evt:Event ):void{
	trace( wiimote.sensorX );
        trace( wiimote.roll );
}

The common way is to use the Wiimote Update event. This event is fired on each update update call from the Bluetooth stack. ATTENTION: The communication works with about 100Hz. This means you will get about 100 datasets per second. This is important for how you will later work with your data, and have to be aware of performance issues if you might bad datastructures or uneffective datahandling methods.

Write Wiimote data
You could not only read values from the Wiimote. You could also write two values of the Wiimote. This are the led and the rumble attribute. With the led attribute you should be able to specify which led-light on the Wiimote shines. This is not really working well, but works sometimes …
You could also use the Force-Feedback of the Wiimote. Just set the rumble value to true and the Wiimote start vibrating. If its used this way, its vibrating all time. You could also set the rumbleTimeout value. The parameter is the time in milliseconds the Wiimote starts to rumble.

/* set LEDs */
wiimote.leds = Wiimote.LED4;
 
/* set Force Feedback - for positiv direction */
// wiimote.rumble = ( wiimote.sensorX>3 || wiimote.sensorY>3 || wiimote.sensorZ>3 );
if( wiimote.sensorX>3 || wiimote.sensorY>3 || wiimote.sensorZ>3 ){
	wiimote.rumbleTimeout = 1000;
}

Interprete the Wiimote data
The Wiimote controller returns the acceleration concerning to the gravity value g. 1g means a gravity acceleration of 9.82m/s². The controller itself is able to detect values between -3.6g and +3.6g.

If the Wiimote will not be moved and rests still on the table, you will always have on value (sensorX,sensorY,sensorZ) which is -1 or +1. This is the gravity affecting on the Wiimote. This is the criteria to detect if you Wiimote is in motion or not. Therefore you could use the Euclid Normal Form. If you take the root of the sum of all squares, this will be near +1. Normally you will define a constant values which is a bit higher than exact +1 to ignore very little movements of the Wiimote.

/* const to detect motion */
private const THRESHOLD:Number = 1.01;
 
private function wiimoteUpdateHandler( evt:WiimoteEvent ):void{
 
	_x = evt.target.sensorX;
	_y = evt.target.sensorY;
	_z = evt.target.sensorZ;
 
	var euLength:Number;
 
	/* check for "NO MOTION" */
	euLength = Math.sqrt( _x*_x + _y*_y + _z*_z );
 
	/** set Force Feedback - for positiv direction **/
	wiimote.rumble = ( _x>3 || _y>3 || _z>3 );
 
	if(euLength>THRESHOLD){
		/* do something */ 
	}
}

Optimize Wiimote date
Normally you won’t directly use the rough data from the Wiimote. Because the detection is relative precise you will get a lot of little peaks and a very unsmooth curve of data. If you want to detect a specific gesture or just want to transform the Wiimote motion into a motion of objects in the Flash you should parse the data. For smoothing the input data you should use a lowpass filter. It will smooth the curve by multiply the actual value with older values. In the following example a new value will only enter 10%. 90% of the value is taken from the old value.

/* const for filtering values */
private const FILTER_FACTOR:Number = 0.1;
 
/* high pass filter */
private function highPassFilter( oldValue:Number, value:Number ):Number{
	return value - lowPassFilter( oldValue, value );
}
 
/* low pass filter */
private function lowPassFilter( oldValue:Number, value:Number ):Number{
	return  value * FILTER_FACTOR + oldValue * (1.0 - FILTER_FACTOR );
}
 
private function wiimoteUpdateHandler( evt:WiimoteEvent ):void{
	_x = this.lowPassFilter( _x, evt.target.sensorX );
	_y = this.lowPassFilter( _y, evt.target.sensorY );
	_z = this.lowPassFilter( _z, evt.target.sensorZ );
 
	/* do something with the data */	
}

Gesture detection
If you know have smooth data, which you only will process if the Wiimote is really in motion, you could start to detect gestures. One of the very simple gestures is a shift. If you just shake the Wiimote a little step right it should detect a rightshift and maybe open the next Powerpoint slide. If you shift to left left the application should go on step back.

For this examples you have to watch the x sensor values of the Wiimote. Because you got the accelation of the controller you will not just get on positive peak in x-direction, but you will get a positive peak in x-direction followed by a negative peak in the x-direction. This is because you start a motion in positive x-direction but than stop to motion, which is a negative accelaration. An right shift is a positive x peak followed by a negative x peak. Vice versa a left shift is a negative x peak followed by a positive x peak.

So the first thing to implement is a peak detection class. I do this by writing several values to a history array ( for example of the last 40 values ). I now compare the avarage of the last 2 or 3 values to the avarage of all history values. If the difference between the two avarage values exceed a specific value ( depending on how exact my motion detection should work ) a peak is detected.

/**
 * @classdescription: peak detection. detects a peak in an array of values
 * @author: Sebastian Martens - http://blog.sebastian-martens.de/
 * @SVN: $Id$
 * 
 */ 
public class PeakDetect{
	private var _history:Vector.<Number>;
	private var _historyLength:int;
	private var _kernelLength:int;
	private var _peakFactor:Number;
	private var _lastPeak:Boolean;
 
	/**
	 * @constructor 
	 * @param kernelLength Number of values which represent the actual motion
	 * @param historyLength Number of values which are taken as history of motion 
	 * @param peakFactor If distance between history and actual motion greater than this value motion is detected
	 * 
	 */		
	public function PeakDetect( kernelLength:int=2, historyLength:int=32, peakFactor:Number=0.2 ){
		var i:int;
 
		_history = new Vector.<Number>();
		_kernelLength = kernelLength;
		_historyLength = historyLength;
		_peakFactor = peakFactor;
 
		_lastPeak = false;
 
		// init with 0
		for(i=0;i<_historyLength;i++){
			_history[i] = 0;
		}
	}
 
	/**
	 * calculates the intersection value of items in the array
	 * @param startIndex to get avarage value from the history list
	 * @param length number of values which should calculate to avarage value
	 * @return avarage value
	 */  
	private function _getIntersection( startIndex:int, length:int ):Number{
		var i:int;
		var mValue:Number=0;
 
		for(i=startIndex;(i<(startIndex+length)&&i<_historyLength);i++){
			mValue += _history[i];	
		}
 
		return (mValue/length);
	}
 
	/**
	 * tries to detect a peak in the list of value
	 * @return true if a peak was detected 
	 * 
	 */		
	private function _checkForPeak():Number{
		var pValue:Number;
		var aValue:Number;
		var peakVal:Number;
		var multiPl:int;
 
		pValue = _getIntersection(0,_historyLength);
		aValue = _getIntersection( _historyLength-_kernelLength, _kernelLength );
 
		if( aValue>0 ){
			peakVal = (aValue-pValue);
			multiPl = 1;
		}else{
			peakVal = (pValue-aValue);
			multiPl = -1;
		}
 
		return ( peakVal>_peakFactor )?(peakVal*multiPl):0;
	}
 
	/**
	 * Adds a new value to item history. Return true if peak is detected.
	 * @param value Number-
	 * @return Boolean - 
	 */ 
	public function addValue( value:Number ):Number{
		_history.shift();
		_history[ (_historyLength-1) ] =  value;
 
		return this._checkForPeak();
	}
}

Finally you could now decide on the order of the different peaks which type of gesture it should be. Therefore i use a timer. If one peak is detected the timer starts. If another peak is detected within the runtime of the timer a gesture is detected if the peak order fits to a gusture.

Please find attached a example FlashBuilder Project which consists serveral steps with examples. Including the WiiFlash framework and my GestureDetection library.

WiiFlashTest – FlashBuilder Project
com.nonstatics.GestureDetection – Gesture Detection Library for WiiFlash v0.1

cheers,
Sebastian

Hallo und Humppa!,

in den letzten Tag gabs es mal wieder eine geballte Ladung von Flash und Flex für mich.

10.06.2009 – Flex User Group Meeting Hannover:
Auch wenn die Runde bei unseren Hannoveraner ( FXUG Hannover Adobe Groups ) Kollegen derzeit noch überschaubar ist, schließlich ist es noch eine ganz junge User Group, wird Engagement und Niveau groß geschrieben. An diesem Mittwoch hat sich die Gruppe bei den Projektionisten in Hannover getroffen. Dort wird gerade für Kunden an 3D-Visualisierung gearbeitet. Der erste Vortrag ging daher über die ersten Schritte in 3D im Rahmen des Flex Frameworks. Derzeit sind derzeit nur ein paar Translationen und Rotationen und wird den 3D Frameworks wie Papervision3D oder Away3D derzeit noch nicht das Wasser abgraben können, aber künftig sicher druch einer nativeren Unterstützung durch den Flash Player 10 in Sachen Performance helfen können.
Im Vortrag 2 ging es um Performance Tipps. Was sollte ich in ActionScript 3 beachten um eine saubere und schnelle Applikation zu entwickelt. Eigentlich ein Dauerbrenner in der Entwicklung. Der Vortrag entwickelte sich zu einer spannenden Diskussion, zu der jeder etwas beizutragen hatte. Wer also im Großraum Hannover an Flex interressiert ist, sei die Flex User Group Hannover ans Herz gelegt.

14.06.2009 Flash Camp Berlin
Die Flex User Group Berlin hat sich alle Mühe gegeben und ein super Community Event auf die Beine gestellt. Mit einem ausgewogenen Programm, dass sich ganz ausdrücklich nicht nur an Entwickler sondern auch an Designer und eigentlich alle anderen wendet könnte sich das Flash Summer Camp Berlin sehen lassen. Das Event ging von 11.00 Uhr bis ca. 21.30 Uhr war kostenlos und das bei freiem Essen und Getränken.
Die Palette der Vorträge ging von der Vorstellung von Flex Startups über Entwicklungsmethoden /-organisation, 3D Frameworks oder Andre Michelles immer wieder begeisternde Audio-Meisterstücke bis hin zum neuen Flash Builder und Flash Catalyst, die Duane Nickull und Sven Claar vorgestellt haben.
Noch einmal ein herzliches Dankeschön an Bettina und Mathias von der Flex UG Berlin für diesen klasse Community Tag in Berlin.

16.06.2009 Flex User Group Meeting Hamburg
Wenn Duane Nickull schon mal in Deutschland ist, dann muss man das natürlich auch ausnutzen. Da er bereits in Berlin zu Gast war hatte er sich auch bereiterklärt einen kleinen Vortrag in Hamburg zu halten. Die Mitglieder der User Group konnten auf der Webseite zwischen drei Themen abstimmen die Sie interesierten. Letztendlich siegte das Thema “Webservices”. Duane ließ sich aber nicht davon abhalten zu einem großen Rundumschlag auszuholen, der dann noch eine kleine Einfühung zu Flex 4 / Flash Builder enthielt, sowie einen kleinen Einblick in den Workflow in Flash Catalyst. An dieser Stelle noch einmal herzlichen Dank an Duane Nickull für den Vortrag und IBM / Boris Fruendt für die Location.
Das nächste Flex UG HH Meeting findet bereits am 30.06. statt. Hier wird Sven Claar dann ausgiebig über Flex 4, Flash Builder und Flash Catalyst berichten. Alle Infos wie immer auf dem Flex UG HH Blog.

Die Präsentationsunterlagen von Duane:
Flash Builder – Building Service Clients – Teachers Guide
Präsentation: Flex 4 – What’s new

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

Hallo und Humppa nach Norddeutschland,

Tag 2. Nach einem doch längeren Abend als geplant im Studio 672 – der offiziellen Aftershowparty zur FFK – ging es heute morgen weiter im Text.

“Interface Design – Best Practices” – Die FFK09 ist ja nun ausdrücklich keine reine Entwicklerkonferenz. Es geht um die Verschmelzung von Code und Design. Der für mich beste Vortrag der in die Kategorie “Design” fällt war definitiv dieser. Stefan Nitzsche die großen Probleme und die wichtigsten goldenen Regeln des Interfacedesigns ( nicht das ich mir anmaßen würde alle zu kennen und das wirklich beurteilen könnte, dass es die wichtigsten Regeln sind – aber ich alle schon mal gehört und erfolgreich wieder verdrängt ) in einem optisch inhaltlich und presentatorisch wertvollen Vortrag zusammengefasst. Prädikat besonders wertvoll.

Unter dem Titel “Einblicke in den Werkzeugkasten eines ActionScript Profis” hat Malte Beyer von den Powerflashern ( hat sich da eigentlich jemals jemand Gedanken gemacht das das im englischen schon ziemlich suboptimal ist ?! Flasher = Flitzer [ i.d.R. unbekleidet ] ) einen exemplarischen Workflow – wie er auch bei den Powerflashers vollzogen wird – für das Zusammenspiel von Designer und Entwicklern under Verwendung von FDT und Ivy-Ant-Task gegeben. Immer sehr interessant zu sehen wie man es noch machen kann, und dabei noch Zeit spart …

Während im einen Saal unter dem Titel “Silverlight 3 Sneak Peak” die Vertreter der anderen Plattform mit Sicherheit viel Platz zum Tennisspielen hatten, drängte sich das Publikum zusammen um an den “10 Hot Minutes” teilzuhaben. Denn wenn das Flashforum ruft dann folgen dem alle Großen. Und nun durften die Mal zeigen was man alles mit der Flash Plattform machen kann wenn man dem Status des Normalsterblichen entwachsen ist. Frank Reitberger, Joa Ebert, Nicolas Cannasse, André Michelle und Mario Klingemann hatten jeweils 10 Minuten Zeit das Publikum zu beeindrucken.

Frank Reitberger hat auf seine PixelBender Blobs noch eins draufgesetzt. Den Sound kann auch ein Interface sein ( was von Stefan Nitzsche allerdings ausgeklammert wurde ). Mit dem Geräusch eines Föns hat er PixelBender Effekte gesteuert die den Eindruck von Wind auf ein Bild anwendeten. In der höheren Stufe des Föns wurde die Pixel dann sogar im wahrsten Sinne des Wortes dahingefegt.

Joa Ebert hat in 14 Minuten ein Partikelsystem erstellt, dass mit mehreren Tausend Partikeln performanter lief als ein C-Code der mittels Alchemy eingebunden und eigentlich auch schon performant lief ( und das war mal wirklich SpeedCoding ) – ohne Worte.

Nicolas Cannesse hat mittels HaXe und Physics Engine den Traum eines jeden kleinen und großen Kindes erfüllt. Mit Bauklötzen auf Bauklotztürme schießen und genüßlich zusehen wie alles in sich zusammenfällt. Und der Versuch mit einer Festkörperphysik Flüssigkeiten zu simulieren…

André Michelle schafft es mit 30 Zeilen Code und einer Klasse eine Guitarre aus dem Nichts zu erzeugen. Er demonstriert wie man eine zufälliges Nichts ( White Noise ) in Bytecode so mit kleinen Filter bearbeitet, dass es wirklich wie eine echte Guitarrenseite klingt. Noch ein paar Zeilen und Regler dazu in Jimmy Hendrix konnte einpacken! ( Audio-Design! )

So wie André Michelle seinen Narren an Tönen gefressen hat kommt Mario Klingemann nicht von seiner Bildbearbeitung los. In seinen hot 10 minutes ging er unter die Fälscher und erstellte einen Van-Gough-Filter für Bilder.

Nach der Mittagspause ging es weiter mit “What is SWF?”. Nicolas Cannesse nahm einmal den SWF Bytecode auseinander, bzw. wie dieser überhaupt erstellt wird. Ein wenig Werbung für HaXe war an dieser Stelle durchaus erlaubt, das an der ein oder anderen Stelle besseren OptCode erzeugt als Adobes AS-Compiler.

In dem vorletzten Vortrag ging es bei Andrè Michelle natürlich um Töne. Hier durfte mal in den Source vom Audiotool geguckt werden. Wie erzeugt man ein Delay im AS Code und wo kommen die Töne eigentlich her. Und natürlich gabs auch eine C64 Sounddemo. Amazing :)

Im letzten Vortrag hat Mario Klingemann nochmal den Werdegang eines digitalen Kunstwerks vollzogen. Welche kleinen Gedankenspiele und Codeschnipsel sind nötig, bzw. fügen sich später zu einem Großen und Ganzen zusammen – es gab also jede Menge bunte Bilder zu sehen – sehr passend und ein eindrucksvoller Abschluss für die FFK09 im Mediapark in Köln.

Vielen, vielen Dank an Marc Thiele und Sasche Wolter. Great Job. Well done. See you next year.

cheers,
Sebastian

Hallo und Humppa nach Norddeutschland,

für alle die die es in diesem Jahr nicht zur großartigen Flashforum Konferenz nach Köln geschafft haben sei versichert – ihr habt etwas verpasst! Wieder einmal haben sich Marc Thiele und Sascha Wolters alle Mühe gegeben ein bunten Strauss an Vorträgen Rund um Kreativität in der Flash-Welt zu organisieren – es ist erst Tag 1, aber es ist bereits gelungen.

Die Keynote hielt Adobe Evangelist Serge Jespers. Er gab eine breite Übersicht über die Flash Plattform. Wie weit ist Flash verbreitet und welche tollen Beispiele gibt es für jeden Bereich. Besonderen anklang fanden natürlich die Augmented Reality Beispiele (war mir auch neu: http://www.livingsasquatch.com/, und natürlich GE http://ge.ecomagination.com/smartgrid/). Dann gabs natürlich noch den Klassiker der aktuellen Adobe Präsentationen: der tolle Workflow von Photoshop über Catalyst zu Flex Builder …

Unter dem Titel “The Return of the Blob” zeigte Frank Reitberger was man nicht alles mit den klassischen Flash Filtern machen kann und eine ganze Reihe von Filtern für die man scheinbar nie echte Anwendung gefunden hat. Es müssen eben nicht immer nur animierte Quadrate sein, es geht auch mit Runden Ecken. Also ganz im Sinne von Web 2.0 tauschte man für eine Stunde in die Demo-Szene ab ( spitze Zungen behaupteten, die Blobs ( runde Gebilde ) erinneren mehr an aktuelle Schweinegrippe-Viren ).

Hinter “Audiotool Private Parts” versteckte sich der Vortrag von Joa Ebert der zeigte, was er eigentlich alles nicht am Audiotool von Hobnox macht. Wirklich eindrucksvoll demonstrierte er was man alles schon mal im Informatikstudium gemacht hat und es auch durchaus einsieht und für sinnvoll hält, aber in den eigenen Projekten zu wenig einsetzt: vernünftige Datenstrukturen! Das Audiotool lebt in den wenigsten Fällen tatsächlich durch hochoptimierten Code sondern durch die Wahl der geeignten Datenstruktur, wie sie auch in Joas ActionScript- Wiki einzug halten sollen oder brereits haben. Aber nicht nur hier hat das Audiotool Team guten Code produziert. Auch an anderen Stellen werden ungünstige Frameworkbestandteile durch eigene Entwicklungen ersetzt ( z.B. das Eventmodell ). Getreu dem Motto “Open minds. Open source.” wurden und werden Teile der Projekte als Open Source unter http://opensource.hobnox.com/. bereitgestellt. Danke Hobnox ( die auch die Party gleich sponsoren ).

“Die Flash Video Plattform” – Sven Brencher at its best. Das Adobe Tools universal Genie fasste den Workflow von Video innerhalb der Adobe Welt zusammen – das Ganze aber unter dem Aspekt der Semantik. Adobe Premiere liest ein Video ein und ermittelt via Speech to Text den textuellen Inhalt. Dies wird auf die Timeline gemappt – ich passe evtl. noch Keywords an. Ab durch den Media Encoder damit rein in meinen Streamingserver und in meiner Flex Endanwendung tippe ich ein Suchwort ein, dass mich dann direkt an die Stelle springen lässt, an der der Sprecher das Wort benutzt hat – wenn doch alles soooo einfach wäre … :)
( Die Slides gibt es hier )

Ein hab ich noch: “Creating Realtime Flash Apps” …. war im Grunde der Anschlussvortrag zu Sven. Tom Krcha ging hier allerdings nochmal ein wenig tiefer auf die verschieden (Streaming) Server von Adobe ein. Was geht mit Blaze DS / LiveCycle oder FMS und welche Protokolle erlauben mir was und warum. Immer wieder toll ist aber natürlich die Kommunikation der einzelnen Flashplayer 10 untereinander. Einmal durch Adobe Stratus aufeinander aufmerksam gemacht kann das P2P-Netzwerk losgehen …

Auf einen spannenden zweiten Tag !

cheers,
Sebastian