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.
Another new exciting project I’m working on is the newspaper editor. This project is built for dutch newspapers (starting with the Leeuwarder Courant) who want to make their archived frontpages available and customizable.
The idea is that you select the newspaper frontpage of your favourite date (say your birthdate). You will be presented with the real vintage frontpage. You can then choose to order a print straight away, but it’s more fun to choose the second option: customize.
Start by placing a box on top of the newspaper image, and then choose to fill it with your own photo or text. After uploading your image, you can crop it and see the cropping result in realtime in your newspaper.
Selecting an image.
Cropping an image.
You can also create text boxes and save them to your newspaper. As with the image, you see your text editing work appear in realtime on your newspaper frontpage.
The last step is ordering your customized frontpage and hanging it above your couch!
Of course these few images don’t really do justice to the real project, you can try out the application for yourself at http://lc.eigenvoorpagina.nl
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.
My latest project of 2008 is all about showing rich video content made by an ad agency. The website is set up as if it was a TV station, showing not only video commercials but also videos about the employees that work there.
Using the CMS
Although the entire site is built in flash there is an elaborate backend where site administrators can upload videos, edit text content, and even edit the entire layout of the website using pixel coordinates to place content on screen.
Check www.dizain.nl to see this project in action.
I often wonder why the Web 2.0 revolution hardly ever involves Flash. Although more and more data can be called up using RSS feeds, these feeds are still mostly used in HTML pages. Just look at Facebook, Last.fm or even Blogspot.
Strangely, it’s not that hard to implement a blog post, a twitter update or even CMS content in a Flash site. Just call the blog’s RSS feed and parse it. As an example I’m parsing this very blog on my portfolio site: www.eerkmans.nl
When connecting to an external domain, flash needs to find a so-called ‘crossdomain.xml’ file on that domain. If flash can’t find this xml file, it won’t connect to the domain and just hang. But fear not! You can redirect your RSS feed through Feedburner. They have a crossdomain.xml so you can still access any RSS feed that Feedburner can access.
If that doesn’t work either, you’ll have to write your own PHP file that sits next to your SWF, and does the connecting to the external domain. Flash then accesses the PHP file and thinks it’s getting it’s data from it’s own domain…
