thefoundation

1LIVE - Dein Leben Lang

2010-07-16T19:13:28Z

In January the BTF Team produced a two minutes commercial for 1LIVE - the largest german youth radio station

1LIVE - Dein Leben Lang from bildundtonfabrik on Vimeo.

This film was the fastest project we ever worked on. From beginning to public release we only had two weeks. We shot on the RED One and did the editing with Final Cut Pro. Typography and animation was added with After Effect and 3d Studio Max.

The spot on the 1LIVE Website.

QuickTime Reference Movies in Python

2010-07-01T22:53:07Z

HTML5 video is on its way, and Apple likes to use reference movies to send different versions of movies to different clients. So, how do you generate these if you don't have OSX handy (for example on a server)?

This is pretty much the premise of a little tool I wrote to generate QuickTime reference movies. It is written in Python, because it is to be used in a Django app that handles video uploads and encodes. Well, that and because I love Python! There isn't much else to say, so here is the code if you are interested:

hg clone http://bitbucket.org/dmurmann/root pyqtref

This is very much alpha software, it may fail horribly for you!

The simplest possible example, generating a reference movie to 'content.mov' looks like this:

from pyqtref import * ref_mov = Movie(ReferenceMovie(Descriptor( DataReference('content.mov')))).to_bytes()

The boilerplate is necessary, because the API is pretty close to the Quicktime File Format Specification.

Björk »Wanderlust« in 3D

2009-03-17T18:37:26Z

Björk's music video of her single »Wanderlust« was produced stereoscopic and can be watched only in the internet.

This is already some time ago, but I decided to post this here anyway. Since we are planning to do some of our future project stereoscopic, we studied a lot about stereoscopic imagery and motion picture during the last few month.

You can watch the video here.

To watch the video you need to have a pair of red/cyan (blue) glasses, otherwise the two embedded images will not separate properly. You can get those glasses on ebay.

The Making of »Wanderlust«

Cheonan Architecture Visualization

2009-01-15T00:01:16Z

With Lichtkunstlicht we worked on an animated visualization of a complex, two layered media facade of a new Galleria store in Cheonan, South Korea.

Daniel, David, Julian and me met at our new production studio in Cologne. We had to complete the project within six days, so we had to start immediately. Fortunately Julian already worked on the 3d model of the building so we didn't lose too much time during our main production phase.

The idea was to previsualize a facade concept of the light design agency Licht Kunst Licht. The architects from UNStudio designed a facade consisting of two layers. Each layer has its own structural bearing so that the facade seems to be transforming while the spectator changes his perspective. LichtKunstLicht's concept was to seamlessly integrate an invisible media facade between the two layers. LEDs, placed on the inner side of the outer facade layer, projected their light onto the milky inner layer. Over the main entrances of the building a high resolution facade is also seamlessly composed into the architecture. There is also a smooth transition between the high resolution and the low resolution parts of the facade.

It was very important for the design concept that the integration of the facade would serve the art of the architecture rather than operating as a screen for information or advertisement.

CHEONAN production team

The final visualization:

AERenderer and its flaws

2008-11-01T19:24:45Z

The render system coming with After Effects provides a sophisticated set of configuration dialogs. Be careful using these options!

Working for the illuminated facade of the Spardabank Hessen e.G. headquarter in Frankfurt we have several giant (up to about 7000 pixels wide) After Effects compositions. Some of these setups take hours and hours in the process of rendering.
Due to different needs, we do not always need the full resolution. Fortunately the AERenderer has this small dialog to reduce the actual size a composition is rendered at: Render every [n]th pixel. Unfortunately this will not work as expected in every composition!

One would presume, that the rendering of just every umpteenth pixel works like a pre-rendering-resizing and besides speeds up the whole process because the pixels in between are not computed.
Not knowing exactly what causes errors at this step, I presume that there is a incompatibility of some plug-ins with this functionality of the renderer. Which is especially irksome, since some of the most performance-consuming effects will cause errors in the final display, e. g. the glow effect.

The last composition I had to render wanted to have about 50 hours of full power from my MacBook Pro (2.33 gigahertz, 2 gigabyte RAM) in full resolution. The rendering of every twentieth pixel resulted in a way darker image, than the full resolution rendering. Large parts of the composition are lightened by the mentioned glow effect. In the end I decided to render full resolution in low quality. This took about twenty hours.

Maybe Adobes hands are tied since some plug-ins are programmed by third parties, but at least the default effects supplied by Adobe should work properly. Perhaps this option is not used frequently, so that there is low interest in solving this problem. Perhaps just few people know about this possibility. Anyhow Adobe should improve the rendering process as soon as possible.

Music Video »Wolke - Kleine Lichter«

2008-10-04T16:10:02Z

Together with Dino Korati and Reto Gnad I created this low budget video clip for the Cologne based band Wolke.

Making the Video:

The title of the song means small lights so we came to the idea to work with video projections of the two singers on walls around the city. Starting with miniature projections we wanted to let them grow during the video until they fill entire buildings.
We shot the projection video for our location shoot in the KHM studio. The two singers Oliver and Benedikt performed in white suits in front of black, so our projection will not have borders where the projection ends.
We shot two days at night in Düsseldorf and we were equipped with a 220V generator, a video projector, a macbook to play back our videos and DV Camcorder. Several location later we had a lot of footage of our band performing across walls, pipes, etc. .
The postproduction of this videos was actually very easy because we only had to edit it. People keep asking me about the amount of work, because it looks like a lot of tracking and compositing work. It's actually all captured directly with the camcorder, except the last three shots, where the singers perform on large buildings.

The Foundation Showreel 2008

2008-09-21T01:42:13Z

This showreel represents our visual effects and animation work of the past 3 years. It includes 3d work from David and animation and compositing work from Daniel and me.

In April I edited this showreel with nearly all the projects we finished during the past years. From short school projects to recent compositing jobs. It mainly contains non commercial work we did, but work with our most creative output.
I especially thank Jan for his crazy intro sound mix for my title displace animation. Excluded of this showreel are short films and recent projects we are working on right now. I hope to soon find the time to update this showreel because there are several visually interesting projects nearly finished.

Integrating a plug-in into JW-Player

2008-09-20T02:06:41Z

If you spent time watching web videos in the popular FLV format you might have stumbled upon the Jeroen Wijering player. Version 4.1 features a plug-in interface – which I found pretty much undocumented.

In the following article I will try to give you a short insight on how to integrate plug-ins into the free and open-source Flash video player by Jeroen Wijering. All techniques described in this article worked with version 4.1.

JW-Player plug-ins

There are some restrictions for commercial use of the player. You have to apply for a commercial license at http://www.jeroenwijering.com/?page=order

What is JW-Player?

In my eyes this player is a masterpiece in structured programming regarding the MVC architectural pattern. The source is as modular as possible so it can easily modified to fit new requirements. As an example it can be adapted to display videos from other sources (e. g. YouTube) by adding a new class as a submodel. The player allows skinning and provides a wide range of settings as well as an useful JavaScript interface. While the majority of possibilities is documented in the Wiki I could not find any helpful information about the plug-ins. Maybe due a lack of time, perhaps because this possibility could be used to emulate the functionality of longtail video – a side project of Jeroen Wijering.
But this is just speculation so let us start over! This article will not give you turnkey sources nor will it be a full tutorial on how this or that could be realized with the JW-Player. I presume that you have already been dealing with Adobe Flash in a basic matter, so you can use my depictions as foundation for your own projects.

How to integrate plug-ins

You will need to have the kroeger 05/63 pixel font installed / activated to not break the default player skin layout!

First you should get the source files and create an HTML file which loads the JW-Player in order to set up a test-bench. In the next step we will create a Adobe Flash file to house our plug-in functionality. First and foremost the size and frame rate does not matter, however I suggest you to choose a size around 300x200 pixels – which should be ~~both, somewhat around the default as well as~~ slightly smaller than the default size and the smallest display, the video player should be used with. This way you can layout your plug-in and perhaps add a script for scalable display later. Wether you will use scripts or not, you need to define a function called initialize. Otherwise the player will throw an error!
The plug-in swf should be published somewhere relative to your test HTML file at best similar to later production environments. In the following code snippets I will assume, that the plug-in is placed in a subdirectory media/flash/plugins/ and is called plug-in.swf.
We will now pass some values to the JW-Player swf making use of the so-called flashvars. (I am sorry, I really tried to find some information about flashvars on the official sites of Adobe. I could not find anything helpful even in the livedocs. Except some outdated samples for Flash 6 and the use with ActionScript 2.0 which in this case are best of a basic use to understand what we are talking about. Perhaps someone can help out here? As there are several common ways to implement Adobe Flash in todays webpages I will attach a short paragraph containing samples of flashvar use at the end of this article.) Let us give the JW-Player a hint where to look for the plug-in. Add the flashvar plugin with the relative path to our plug-in as value, in our case media/flash/plugins/plug-in.swf. Your HTML code should look somewhat like this:

<object type="application/x-shockwave-flash"
	  data="player.swf"
	  width="300px"
	  height="200px" >
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf" />
	<param name="quality" value="high" />

	<p>Please get the Adobe Flash Player!</p>
</object>

Be sure to use the relative path originated at the HTML document – not the swf!

Yes, it is as easy as that! Now your plug-in should be loaded automatically. But wait! Offline everything works fine, but the Flash player is not able to find the plug-in on the server. After some investigation, we know why there are troubles: We have to navigate through the ActionScript package of the JW-Player to the main view class (com → jeroenwijering → player → View.as). Just at the end of the class header there is a private string directory with an URL assigned as value: http://plugins.longtailvideo.com/. Perhaps this is a hint at how the plug-in interface usually gains utilization. If you set the directory value to be an empty string (like this private var directory:String = "";) the whole thing should work online. (Better way to solve this problem would be, take the deep dive into this piece of code and understand what really is happening here before removing some hardcoded value.)
From now on the rest is just some ActionScript wherewith we can do some magic! Since the code of the video player is well-structured and nearly every event you could imagine is dispatched all you have to do is: listen to the certain part (Model, View, Controller) and invoke some action!

The fun part – ActionScript!

Here we go: Include the View-class and declare a variable to hold the reference to the players View-instance:

	// includes
import com.jeroenwijering.player.View;

	// variables
	// Reference to View-instance of video player
var v_player:View;

At this point, lazy guys, there is no short version, no init, no programmers stenography!

And again, Jeroen Wijering made life with plug-ins easy. If you set up a function called initialize it will be called as soon as your plug-in is properly loaded by the player:

…
	// Called after loading of plugin is completed
function initialize( par_playerView:View ) {
	v_player = View( par_playerView );

	trace( "do something useful" );
}

The simple call to do something does not help much. I will give you an example of what could come next. For example it would be handy if the plug-in content would be centered if the player is resized! Let us assume we have a movie clip containing a graphic (mc_content, movie clip registration point should be on the top left) which should be horizontally centered and positioned somewhere above the vertical center (since there is this nice button to start the playback). But this graphic should disappear on playback start. We have to start with adding some lines to our plug-ins code header, furthermore we will instantiate a transition manager to handle a nice fade out of our plug-in content:

	// imports
	// video player stuff






import com.jeroenwijering.player.View;
import com.jeroenwijering.events.ModelEvent;
import com.jeroenwijering.events.ModelStates;
import com.jeroenwijering.events.ControllerEvent;

	// eye candy
import fl.transitions.Fade;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.Transition;
import fl.transitions.TransitionManager;

	// variables
	// Reference to View-instance of video player
var v_player:View;

	// Transition manager
var trnsmngr_content:TransitionManager = new TransitionManager( mc_content );

	// functions
	// Configure standard transitions used to fade plugin content in and out
var obj_contentFadeOut:Object = new Object();
obj_contentFadeOut.type = Fade;
obj_contentFadeOut.direction = Transition.OUT;
obj_contentFadeOut.duration = .7;
obj_contentFadeOut.easing = Regular.easeOut;

var obj_contentFadeIn:Object = new Object();
obj_contentFadeIn.type = Fade;
obj_contentFadeIn.direction = Transition.IN;
obj_contentFadeIn.duration = .7;
obj_contentFadeIn.easing = Regular.easeOut;
…

Now we have to set up some functions to handle the positioning of the content elements and kick-off the vanishing of this content element on playback.

…
	// Invoked on resize
function onPlayerResize( par_arg ) {
	alignContent( Number( par_arg.data.width ), Number( par_arg.data.height ) );
}
	// Align content movie clip
function alignContent( par_width:Number, par_height:Number ) {
	mc_content.x = Number( par_width / 2 - mc_content.width / 2 );
	mc_content.y = Number( par_height / 2 - ( mc_content.height + 40 ) );
}

	// Invoked on status change of video player
	//	- if playback has finished: fade in plugin content
	//	- if playback is (re-)started: hide plugin content
function onPlayerStateChange( par_arg ) {
	if( par_arg.data.newstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeIn );
	}else if( par_arg.data.newstate == "PLAYING" && par_arg.data.oldstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeOut );
	}
}
…

Obviously, the next thing to care about: event listeners! The listeners are registered in our initialize function:

…
	// Called after loading of plugin is completed
function initialize( par_playerView:View ) {
	v_player = View( par_playerView );

	v_player.addControllerListener( ControllerEvent.RESIZE, onPlayerResize );
	v_player.addModelListener( ModelEvent.STATE, onPlayerStateChange );

	alignContent( v_player.config.width, v_player.config.height );
}

Now everything should work fine. The content will be realigned if the player should ever be resized on runtime (not very likely) and faded out on playback start or in respectively on playback end. To initially align the content, there is one line added, which calls alignContent. For convenience, the whole clump of code:

	// imports
	// video player stuff
import com.jeroenwijering.player.View;
import com.jeroenwijering.events.ModelEvent;
import com.jeroenwijering.events.ModelStates;
import com.jeroenwijering.events.ControllerEvent;

	// eye candy
import fl.transitions.Fade;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.Transition;
import fl.transitions.TransitionManager;

	// variables
	// Reference to View-instance of video player
var v_player:View;

	// Transition manager
var trnsmngr_content:TransitionManager = new TransitionManager( mc_content );

	// functions
	// Configure standard transitions used to fade plugin content in and out
var obj_contentFadeOut:Object = new Object();
obj_contentFadeOut.type = Fade;
obj_contentFadeOut.direction = Transition.OUT;
obj_contentFadeOut.duration = .7;
obj_contentFadeOut.easing = Regular.easeOut;

var obj_contentFadeIn:Object = new Object();
obj_contentFadeIn.type = Fade;
obj_contentFadeIn.direction = Transition.IN;
obj_contentFadeIn.duration = .7;
obj_contentFadeIn.easing = Regular.easeOut;

	// Invoked on resize
function onPlayerResize( par_arg ) {
	alignContent( Number( par_arg.data.width ), Number( par_arg.data.height ) );
}
	// Align content movie clip
function alignContent( par_width:Number, par_height:Number ) {
	mc_content.x = Number( par_width / 2 - mc_content.width / 2 );
	mc_content.y = Number( par_height / 2 - ( mc_content.height + 40 ) );
}

	// Invoked on status change of video player
	//	- if playback has finished: fade in plugin content
	//	- if playback is (re-)started: hide plugin content
function onPlayerStateChange( par_arg ) {
	if( par_arg.data.newstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeIn );
	}else if( par_arg.data.newstate == "PLAYING" && par_arg.data.oldstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeOut );
	}
}

	// Called after loading of plugin is completed
function initialize( par_playerView:View ) {
	v_player = View( par_playerView );

	v_player.addControllerListener( ControllerEvent.RESIZE, onPlayerResize );
	v_player.addModelListener( ModelEvent.STATE, onPlayerStateChange );

	alignContent( v_player.config.width, v_player.config.height );
}

There are some additional things you should know while working with this nice player and its plug-in possibilities. Let me give you some arbitrary dodges!

v_player.config.[any name]: If you pass your own flashvars to the JW-Player, you can get the value of certain variables by this path plus your variable name at the end. It would be easy to display the videos title if you pass the flashvar title. You just need a textfield and assign the value v_player.config.title.
v_player.config.volume, v_player.config.width, v_player.config.height, v_player.config.fullscreen: There is a bunch of information in the config object of the View-instance. Here you can get the current value, width and height of the player, as well the configuration wether fullscreen is allowed and implemented or not (Nevertheless you cannot alter the state of fullscreen here! See below). To get information about the current display state watch v_player.skin.stage[ "displayState" ]
If you want to know more, have a look in the Player class' (com → jeroenwijering → player → Player.as) defaults object!
v_player.sendEvent( [event], [value] ): Using the function sendEvent you can take control of various parts of the player. Set volume to 50 % by using following code: v_player.sendEvent( "VOLUME", 50 ), set player into fullscreen mode: v_player.sendEvent( "FULLSCREEN", true ) or seek to closest keyframe to second two: v_player.sendEvent( "SEEK", 2 ).
v_player.addViewListener, v_player.addModelListener, v_player.addControllerListener: Like shown in the sample, you have the possibility to add listeners to every part of the player (Model, View, Controller). For further information about the various events, have a look at the events part of the player class package (com → jeroenwijering → events → *).

In the above samples, I assume you work in the plug-in of this tutorial. Otherwise the v_player has to be replaced by your reference to the View-instance of the JW-Player!

This article is not meant as a full featured tutorial to a full working this-and-that-performing plug-in, rather an insight on the different parts of plug-in programming for JW-Player with some short examples.

I am not quite sure about the legal matters on the use of JW-Player with altered code. So please check the information on Jeroen Wijerings homepage or contact him to assure you are not cracking anything besides the legal regulations here!

Flashvars in todays webpages

As mentioned before, there are several ways of integrating Flash files into webpages. Today a lot of people use JavaScript to embed Flash movies, there is the famous swfobject as well as the Standard Adobe Flash way to use AC_FL_RunContent. One main reason to use JavaScript is the outline rectangle the InternetExplorer shows up and which forces you to click on the Flash movie once, before you can interact with the movie. Moreover there is a check if the correct version of Adobe Flash Player is installed on the client machine.
Next we have the former standard way using markup with object- and embed-tags to integrate flash. Finally there is one possibility, first shown in an A List Apart article (for more information please visit: http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml) to integrate Flash XHTML-Strict valid with markup and without the embed-tag which is in fact a relic from times with Netscape.
For each of these methods I will give you a short code snippet on how to pass Flashvars. This is known and far from being new, but get this as a compact reference for the most popular ways to integrate Flash.

Flashvars and markup methods for Flash integration

First the markup methods, in the following example the former standard way:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
		codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
		width="300px"
		height="200px" >
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="movie" value="player.swf" />
	<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm" />

	<embed src="player.swf"
		flashvars="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm"
		quality="high"
		width="300px"
		height="200px"
		allowScriptAccess="sameDomain"
		allowFullScreen="true" 
		type="application/x-shockwave-flash"
		pluginspage="http://www.macromedia.com/go/getflashplayer" />
	<param name="quality" value="high" />

	<p>Please get the Adobe Flash Player!</p>
</object>

In this example we pass the variables plugin and title to the swf. You can append as much variables as you needed, as long as you keep the pattern: seperate the variables using the ampersand &, assign value by using the equal sign =: &[variable name]=[value].
Now for the XHTML-Strict compatible method. Analogue to the sample at the beginning of this article, passing Flashvars would look like this:

<object type="application/x-shockwave-flash"
	  data="player.swf"
	  width="300px"
	  height="200px">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm" />
	<param name="quality" value="high" />

	<p>Please get the Adobe Flash Player!</p>
</object>

Variable names must not contain any special characters (as usual in ActionScript), the values should be URL-encoded.

In the first example you have to declare the variables and values twice to assure, that every browser (using either the object- or the embed-tag) gets the correct values!

The JavaScript way

Since the JavaScript methods are kinda proprietary, you have to find the correct solution for every specific JavaScript Flash integration. So, the following examples feature specific code for the AS_FL_RunContent (first) and the swfobject (second) method:

<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires \"AC_RunActiveContent.js\".");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '300',
			'height', '200',
			'src', 'player',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'id', 'player',
			'name', 'player',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'player',
			'FlashVars', 'plugin=media/flash/plugins/plug-in.swf&title=A%20shortfilm'
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
			codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
			width="300"
			height="200"
			id="player"
			align="middle" >
		<param name="allowScriptAccess" value="sameDomain" />
		<param name="allowFullScreen" value="true" />
		<param name="movie" value="player.swf" />
		<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm" />

		<embed src="player.swf"
			flashvars="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm"
			quality="high"
			width="300"
			height="200"
			name="player"
			allowScriptAccess="sameDomain"
			allowFullScreen="true"
			type="application/x-shockwave-flash"
			pluginspage="http://www.macromedia.com/go/getflashplayer" />
		<param name="quality" value="high" />

		<p>Please get the Adobe Flash Player!</p>
	</object>

Be sure to pass the Flashvars in the JavaScript code, as well as in the object-tag as param-tag and in the embed-tag as attribute flashvars.
Finally, the swfobject method:

<script type="text/javascript" src="swfobject.js"></script>

<div id="playerContainer">
  This is a flash video player.
</div>

<script type="text/javascript">
   var so = new SWFObject("player.swf", "player", "300", "200", "9");
   so.addVariable("plugin", "media/flash/plugins/plug-in.swf");
   so.addVariable("title", "A shortfilm");

   so.write("playerContainer");
</script>

Sample sources

The Flash source codes are uploaded here:
ZIP file containing plugin.fla
Set up an HTML document with flashvars plugins and title:

plugins=[path to plug-in.swf without extension]&title=[video title]

Outcome should be a headline showing the video title on the JW-Player splash screen.