Me and the guys from Bureau BlauwGeel have been working together on their new website: http://www.bureaublauwgeel.nl
The CMS-based website uses video files to create a dynamic, living and breathing background.
Each menu item has a background image that slowly zooms in to keep that dynamic feel.
Although the background and interface always adjust to the size of [...]
Me and the guys from Bureau BlauwGeel have been working together on their new website: http://www.bureaublauwgeel.nl
The CMS-based website uses video files to create a dynamic, living and breathing background.
Each menu item has a background image that slowly zooms in to keep that dynamic feel.
Although the background and interface always adjust to the size of the browser window, the content is allowed to run off screen. The flash scrollbar allows viewing all content.
By using a custom URL for every project and page in the flash site, the site becomes searchable for Google and allows direct linking to a specific project, for example: http://www.bureaublauwgeel.nl/#/werk/website-en-shop-dutchspirit
Tracking pageviews from flash allows the use of Google Analytics.
The 1st of january was a special day for Twitterfountain users since the new version of Twitterfountain went live.
The update incorporates:
A list of twitter messages on a slideshow background.
Single twitter message on a photostack background.
Video experience website www.scholtenhuis.nl has won a “Gouden Reiger” media award at the Keying into the brain festival for communication and interactive media.
The festival is organised for communication professionals, creatives and non-profit organisations like museums, heritage foundations and the government.
For Motion Sickness‘ next VJ Gig, at Hoorspel Amsterdam, I want to mix live Twitter messages into our VJ set. I’ve already built several Twitter tools in Flash, and Modul8 (our favorite VJ tool) supports SWF files.
I started by experimenting with various animations you can apply to the Twitter messages. You can see a demo here: http://www.motionsickness.nl/tweejay/
When the SWF is used as a movie inside Modul8, you don’t want the audience to see the control panel. To solve this I built an external SWF controller. This way the audience won’t see the settings of the Twitter animation. The external controller is opened with the regular flash player, and connects to the flash animation inside Modul8 using a LocalConnection.
I discovered that a SWF inside Modul8 won’t connect to the internet, but this was solved by using the external controller to retrieve twitter messages, and then pass them on to Modul8. The only problem left is that images can’t be transferred this way, so Modul8 can’t use flash to retrieve images from the internet.
This screenshot shows the modul8 environment with the SWF Twitter layer on top of an image. You can see the external controller in it’s own window. (click image to enlarge).
UPDATE 1: the beta test of the tool is downloadable at http://www.eerkmans.nl/bestanden/tweejay_m8_beta.zip
UPDATE 2: Since the SWF movies do not play in a browser they need to be permitted to connect to the internet.
You can do this by opening the SWF files with adobe’s standalone flash player (right click > open with flash player). You will be presented with the following dialog box:
This popup appears when you open the SWF’s in adobe’s standalone SWF player.
Click ‘Settings’ and you will be taken to the security page. In this page, click ‘edit locations’ and then ‘add location’. Browse to the folder where your SWF’s are and add them.
The security settings for standalone flash movies.
If you don’t have the standalone flash player you can go to the settings screen directly.
Or you can download the flash player pack as a zip file here.
I will try to make this process less complicated, perhaps by exporting the controller as an adobe AIR app in the next version.
On april the 28th the flash project “Scholtenhuis” went officially live. The opening of the website was performed at a press conference in the Groningen Archives Building and was hosted by Gijs Wanders (former NOS news reporter).
The project book, DVD and website tell the story of the “Scholtenhuis”, which was the head office of the SD (“Sicherheits Dienst”) in World War II in Groningen, The Netherlands.
Image: Press conference at Groningen Archives.
The project is based on archive materials from WOII and on interviews with surviving witnesses. These interviews were filmed and helped tremendously to virtually recreate the Scholtenhuis building.
The project itself started with recreating and rendering the entire building using 3D software. These environments were used as backdrops for live action sequences, filmed in an Amsterdam studio with the help of professional actors.
Image: A scene is being filmed in a bluescreen environment.
A major decision was not to create a movie with a storyline, but instead to recreate the atmosphere of the Scholtenhuis. While virtually exploring the Scholtenhuis website, you get an impression of everyday activities, and of the people that worked there.
Image: The scene is integrated into the 3D environment.
While all of the movie loops were being filmed, work on the website started. We wanted the interface to be as simple as possible, but at the same time provide access to the incredible amount of media, interviews, audio fragments and documents that are available for every scene.
This was accomplished by carefully designing the interface for the rooms. A room provides access to related interviews and media, and also to persons that worked in that room. When watching a person’s details, links to other rooms and media become available, and this way you can navigate throughout the entire Scholtenhuis.
Image: Each scene contains its own links to interviews, persons and documents.
This way we were able to keep the main interface quite simple. Just by showing the floorplans of the building and the chain of command of the SD officers, you can reach every part of the website.
Technically, the main challenge was to build a system that allows navigating between many different kinds of media, using either the main interface, or through crosslinks that appear dynamically. There’s lots of interface elements, media players, and popup windows that influence the behavior of underlying parts of the site, and thorough testing was necessary to ensure a smooth user experience.
We were able to keep the site content continually up to date by building a database that contains all written text, documents, photography and links to all the interviews and movie loops. Apart from that, the database also shows the relationships between all this information. The flash website is able to build up the entire environment using this database information.
Image: a custom CMS is used to link the many project elements together.
This way the development of the user interface and the development of the actual content could progress simultaneously, which has saved us a tremendous amount of time, and also enabled us to work separately.
The project has gotten a lot of media attention, being featured in newspapers, on the NOS website, radio 1, and RTV Noord.
One thing that this website really proves is how a big project like this doesn’t necessarily need to be executed by a big media agency. Instead, all of the people who worked on this project are self-employed / freelancers.
The main team consists of a filmmaker, writer, 3D artist, database specialist, graphic designer, and flash interaction designer, which is me 
. Apart from that there were actors, sound engineers, a bluescreen keying specialist, and many more.
Visit the scholtenhuis website here!
To learn more about how this project came off the ground and how all the parts came together, please watch the “making of…” movie!
UPDATE: the project is currently being featured on dutch design magazine Publish.nl.
Adobe’s KULER service is a perfect tool for creating balanced color schemes in dynamic flash applications, especially in apps where you want the user to have as much control as possible. Strangely, Kuler’s terms of use state that the service can’t be used commercially (although it’s beyond me why Adobe offers an API that you can’t use…). You can still use the service in non-profit flash apps and experiments.
Demo
To make using Kuler with flash actionscript 2 quick ‘n easy I created a simple XML parser specifically for parsing Kuler’s RSS feeds. You can download it here. You’ll need to request your own Kuler API key from adobe here
.
How to use
Just copy and paste this code into your project. Put your own Kuler API key in there and add the name of the function you want executed after the feed has been parsed. The function will receive an array of themes. Each theme will have an array of colors in hex values.
var kulerlink = "http://kuler-api.adobe.com/rss/get.cfm?listtype=rating&key=YOUR_KEY_HERE";
var myKulerParser = new KulerParser();
myKulerParser.loadThemes(kulerlink, Delegate.create(this, initDemo));
function initDemo(aThemes : Array):Void {
trace("theme colors: " + aThemes.toString());
}
