For the livestream, MES produced 4 hours of exclusive live web content on-location on several floors in the O2 World, starting with a Red Carpet Pre-Show with hosts Joko Winterscheid and Joss Stone, which was played out with a 30 minutes delay to close the gap to the main show. Within the TV ad breaks of the gigantic main show, MES produced the All Access Show with rocker Pete Wentz where stars and starlets got comfortable on a couch and helped themselves at the bar.

For the first time, the EMA web show production ran completely tapeless and was produced in HD 1080i. Signals from Ikegami fiber camera systems, OB feed, video inserts and GFX were mixed and then time shifted and recorded with EVS XT2. In parallel, Final Cut systems were used to produce VOD packages from the EVS live feed, which were then sent to a VOD encoding cluster. This allowed all VOD content for web and mobile to be published as soon as the show finished. The Red Carpet Show was also distributed to video cubes in the O2 World as well as to MTV News for further editing. 8 dual-quadcore live encoding boxes pushed out 16 live streams for Facebook and the local MTV sites via 2 CDNs. At the end of the day, 5 TB of video data were produced and the livestream had accumulated not less than 1.03 million views.

For the first time, Daimler sends a daily 3-hour livestream from the International Motor Show (IAA) that everyone can participate in. Users post questions, and Daimler’s employees and moderators answer and demonstrate details directly on the vehicle. Banners on the German portals Welt Online and Autobild.de show a preview of the livestream and generate a broad viewership.

The project is a successful collaboration between fischerAppelt (TV-production), Scholz & Volkmer (Web application) and tv-on web/MES (livestream).

Since August, MES puts the weekly live show “MTV Home” on the net for MTV Networks Germany.
MTV Home fans from the Facebook community can directly participate in the show via a live chat with the hosts Joko, Klaas and Palina. Strategic use of Facebook promotion features (events, ads, fan page) provides for optimal coverage. Work can be so much fun!

• MTV Home

• Watch the show in the HUGO BOSS eMAG

You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! Or better yet, try the fullscreen example.

Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included in the download).
03/28/2008: Updated to Slideflow 1.1 – image cropping and gradient direction fixed!

Download Slideflow 1.1 including gallery demo

We’re excited to hear where Slideflow is used, so let us know in the comments!

Credits:

• Based on code by Michael L Perry
• Photoshop actions originally created by Marcus Strehlow
• Photos by Nicholas_T
• Tigra Slider control
• Scriptaculous and Prototype

How to use it in your scripts

The gallery example is a good starting point. Have a look at slideflow.js; we tried to document all important aspects in the code. Initial settings, such as image locations and DOM parent node are passed on initialization. The control exposes a set of methods to change the display at runtime; it provides callbacks to allow the application to react to Slideflow movement and clicks on the center slide. Note that the control requires some specific CSS (slideflow.css) to work.

How to use the Photoshop Actions

You need to run your batch of pictures through the Photoshop actions (originally by Marcus Strehlow) in order to create left, right and center thumbnails. These need to go in different directories, which will later be provided to the control as pathLeft, pathRight and pathCenter.
We opted for Photoshop’s Save for Web feature instead of the regular JPEG export because it delivers far superior quality. Unfortunately, Save for Web doesn’t work well with batches and requires one to manually update the export directories for each of the three Slideflow actions. This can be done by performing the following steps:

1. Create a blank RGB document, or open any RGB image
2. Navigate to the action’s Export command, which is second to last and double-click it
3. The Save for Web dialog opens. Save the blank document in your target folder for the respective action (i.e. left for the left action etc.)
4. If you’re like Tim and like a clean system, you may delete the JPEG you just created

All actions assume 4 : 3 ratio. If pictures have a different ratio, you need to adjust it first, or the thumbnail images will have white edges.

The interface leverages AJAX technologies to deliver a rich user experience, including a Slideflow control mimicking the popular Cover Flow navigation, across all major browsers.

It uses the recently released Microsoft Silverlight 1.0 platform to stream to Windows, Mac OS X and Internet Explorer 5, 6 und 7, Firefox 1.5 and 2 as well as Safari. That’s webcasting 2.0.

Update: The platform has since been extended to support Flash video as well!

Some screenshots:

Main screen with slideflow

Help Overlay

Lightbox slide view

• http://www.mtvema.com