Dieser Artikel bezieht sich auf meine Reportage über den bevorstehenden Abriss des Münchner Hauptbahnhofs. Er erklärt die technische Funktionsweise des von mir entwickelten Multimedia-Formats und beschreibt in einem Tutorial, wie man ohne Programmierkenntnisse und ohne Macromedia Flash solche textbasierten Multimedia-Reportagen erstellen kann. Grundkenntnisse in HTML reichen aus.

Technische Details

Um dem Text der Reportage Töne zuordnen zu können, wurde er auf Absätze unterteilt. Diese Absätze sind alle gleich groß, um eine einfachere Steuerung zu erreichen. Sie besitzen außerdem einen ungewöhnlich großen Abstand voneinander, damit sichergestellt wird, dass der Leser den Ton zu hören bekommt, dessen Absatz er gerade liest.

Um einem Absatz eine Tondatei zuzuordnen, wird die Flash-Datei spielen.swf in einem Absatz eingebunden. Sie enthält eine Menge Programmiercode und die Steuerung, die mit Javascript kommuniziert, aber noch nicht die MP3-Datei für den entsprechenden Absatz. Erst bei der Einbindung wird der Flashdatei per Parameter der Dateiname der entsprechenden MP3-Datei mitgeteilt, die mit der Reportage im selben Ordner liegt. Außerdem werden einige Parameter für Lautstärke oder die Anzahl der Wiederholungen angehängt.

Innerhalb des Javascript-Codes wird einem eingebundenen Flash-Objekt ein Start-Absatz und ein End-Absatz zugeordnet. So können Geräusche für einen Absatz spielen, oder für mehrere.

Beim Durchscrollen wird mehrmals pro Sekunde die Position der Seite auf dem Bildschrim abgefragt. Wenn ein Absatz innerhalb des Lesebereichs liegt, sendet Javascript einen Start-Befehl an das entsprechende Flash-Objekt.

Gegenüber der Vorgängerversion habe ich die Technik der Reportage komplett überholt. Mit objektorientiertem Javascript und der Parameterübergabe an Flash habe ich einen weitgehend selbstständigen Ablauf erreicht, durch den sich der Aufwand zum Einfügen von Tondokumenten erheblich reduziert.

Tutorial

Drehbuch

Der Beginn der Reportage muss zwingenderweise ein Drehbuch sein, wie ich es auch bei der Audio-Slideshow mit SMIL empfohlen habe. Dafür habe ich in einem Textverarbeitungs-Programm drei Spalten angelegt: Bild, Text, Ton. Wer ein planender Mensch ist, macht sich dieses Drehbuch bereits vor dem "Drehtag". Ich dagegen habe ein Konzept meiner Reportage ungefähr im Kopf gehabt, und danach erst das Drehbuch erstellt.
Die Bilder werden unbearbeitet in die Spalten links kopiert. Geräusche werden rechts eingetragen. O-Töne sollte man hier paraphrasiert eintragen, damit zwischen Ton und Bild nicht unfreiwillige Komik entsteht. Sehr viel Mühe sollte man für den schriftlichen Text der Reportage in der mittleren Spalte aufbringen. Im Unterschied zu einer Audio-Slideshow oder einem Film ist der Text das Trägermedium, der durch die Geschichte führt. Er muss die Narration enthalten, den Leser bei der Hand nehmen und die Bilder und Töne explizit oder implizit einleiten.

Textaufbau

Bei der Erstellung der HTML-Datei ist es am einfachsten, den Quellcode meiner bestehenden Reportage zu verwenden und abzuändern. Ein leerer Absatz sieht wie folgt aus:

<div class="absatz" id="div1" >
<!--Die grünen Pfeile und die Orientierungsleiste neben einem Absatz-->
<div class="steuer" >
<div class="rauf">
     <a href="javascript:zurueck();">
        <img src="rauf.gif" width="16" height="16" border="0" alt="Nach oben" />
     </a>
</div>
<div class="runter">
     <a href="javascript:weiter();">
        <img src="runter.gif" width="16" height="16" border="0" alt="Nach unten" />
     </a>
</div>
</div>
Hier steht der Inhalt
</div>

Jeder Absatz hat neben seiner Formatierung class="absatz" eine eindeutige ID: dieser heißt div1. Danach folgen die Div-Tags für die grünen Pfeile die gleichzeitig per CSS den grauen Balken produzieren, der als Orientierungsleiste dient: Wenn ein Absatz nur einen Satz enthält, kann der Leser beim Scrollen trotzdem intuitiv den Absatz im Lesebereich positionieren.
Von diesen leeren Absätzen werden jetzt so viele hintereinander eingefügt, wie man benötigt. Der Text und die Bilder werden bei "Hier steht der Inhalt" eingefügt. Die maximale Bildgröße ist in meinem Layout width:480px und height:260. Außerdem werden die IDs hochzählend geändert: div2, div3, div4 usw.
Um das Aussehen der Reportage zu testen, sollte man den Ladescreen vorübergehend deaktivieren. Dazu fügt man im body-Tag zusätzlich zu den anderen Javascript-Funktionen den Befehl laderweg(); ein.

<body onload="initialisieren(); ladenstarten(1); laderweg();">

Steuerkasten einfügen

Überall dort, wo ein Tondokument abgespielt werden soll, bindet man das Flash-Objekt "spielen.swf" ein, das im selben Ordner liegen muss. Sinnvollerweise fügt man es in den Absatz ein, wo es zu spielen beginnen soll, und zwar vor dem Inhalt. Allerdings wird der Startzeitpunkt erst später im Javascript festgelegt. Die Position, an der das Flash-Objekt eingefügt wird, entscheidet also nicht über den Startpunkt. Unser Absatz sieht nun so aus:

<div class="absatz" id="div1" >
<!--Die grünen Pfeile und die Orientierungsleiste neben einem Absatz-->
<div class="steuer" >
<div class="rauf">
     <a href="javascript:zurueck();">
        <img src="rauf.gif" width="16" height="16" border="0" alt="Nach oben" />
     </a>
</div>
<div class="runter">
     <a href="javascript:weiter();">
        <img src="runter.gif" width="16" height="16" border="0" alt="Nach unten" />
     </a>
</div>
</div>
<div class="flashpos">
<object class="flash"
       classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="ton_1">
       <param name="movie" value="spielen.swf" />
       <param name="play" value="true" />
       <param name="loop" value="false" />
       <param name="quality" value="high" />
       <param name="swLiveConnect" value="true" />
       <embed class="flash"
             play="true"
             swliveconnect="true"
             name="ton_1"
             src="spielen.swf"
             quality="high"
             type="application/x-shockwave-flash"
             pluginspage="http://www.macromedia.com/go/getflashplayer">
       </embed>
</object>
</div>
Hier steht der Inhalt
</div>

Wer schonmal Flash-Objekt eingebunden hat, der weiß, dass hier doppelt eingebunden werden muss: Einmal mit dem object-Tag für den IExplorer und einmal mit embed für Opera und Mozilla/Firefox. Auch wenn die Browser mittlerweile teilweise auch die jeweils andere Einbindung verstehen, empfehle ich, genau meine Einbindung zu verwenden. Ich habe einen halben Tag damit verbracht, verschiedene Einbindungen zu testen und nur bei dieser klappt die Steuerung des Objekts per Javascript für alle Browser.
Das Flash-Objekt wird von einem div-Tag der Klasse "flashpos" umschlossen. Es gibt die Position des Objekts an. Wenn man in einen Absatz zwei Ton-Dokumente einfügt, muss man eines nach oben oder nach unten verschieben, indem man diesem div-Tag eine style-Angabe einfügt, z.B. style="top:30px".
Die Tonobjekte bekommen nun auch alle ihren eindeutigen Namen. Im object geben wir an: id="ton1", im embed dagegen name="ton1".
Bitte beachten, dass der Loop-Parameter des Flash-Objekts auf false stehen muss, selbst wenn das MP3 wiederholt werden soll. Wie man das erreicht erkläre ich im nächsten Absatz.

Einfügen der MP3-Datei und weitere Parameter

Bis jetzt ist aber nur der Steuerungskasten in den Absatz eingefügt worden. Per Parameter müssen wir ihm jetzt mitteilen, welche MP3-Datei er laden soll. Dafür notieren wir hinter spielen.swf einen Parameter, und zwar sowohl im object als auch im embed.

<param name="movie" value="spielen.swf?ton=atmo_aussen_128.mp3" />
...
src="spielen.swf?ton=atmo_aussen_128.mp3

Außerdem stehen nun weitere Parameter zur Verfügung, die mit einem Kaufmanns-Und "&" hinter den Dateinamen gehängt werden. Die komplette Liste der Paramter ist:

ton=atmo_innen.mp3
Gibt das Soundfile an, das gespielt werden soll

fadein=10
fadeout=10
Wenn eingefadet werden soll, gibt fadein die Schritte an, in denen hochgefadet wird. Ein kleine Zahl bedeutet langsames einfaden. Sinnvoll sind Zahlen zwischen 1 und 25.

volmax=30
Beschränkt die Lautstärke auf einen Prozentwert.

loop=1
Spielt das Stück eine bestimmte Anzahl oft ab. Wird nichts angegeben, wird es 9999 mal wiederholt.

titel=Vogelgezwitscher
Zeigt in der Steuerung einen Titel anstatt des MP3-Files an. Hier können Leerzeichen verwendet werden, aber keine Umlaute (damit hat Opera Probleme).

Ein komplettes Beispiel wären also folgende Angaben:

<param name="movie" value="spielen.swf?ton=voegel.mp3&fadein=20&fadeout=20&volmax=70&loop=4&titel=Voegel im Garten" />
...
src="spielen.swf?ton=voegel.mp3&fadein=20&fadeout=20&volmax=70&loop=4&titel=Voegel im Garten"

Praktischerweise sollte man die Parameterangaben erst nur im object oder embed machen, je nachdem ob man die Reportage im IExplorer oder in Opera/Mozilla/Firefox testet. Man wird in den Testläufen noch viel an der Lautstärke und an anderen Parametern justieren. Erst am Schluss kopiert man die Angaben dann in die andere Einbindung.

Einfügen der Objekte in Javascript

Direkt nachdem man eine MP3-Datei auf diese Weise per Flash in einen Absatz eingebunden hat, kann man das Ton-Objekt in Javascript eintragen und einem oder mehreren Absätzen zuordnen. Wie das geht, ist eigentlich selbsterklärend, wenn ich die jeweiligen Absätze aus Javascript hier zeige:

function initialisieren() {
ton_1Obj = new Multimedia("ton_1");
ton_2Obj = new Multimedia("ton_2");
ton_3Obj = new Multimedia("ton_3");
ton_4Obj = new Multimedia("ton_4");
}

function PositionAnz(){
...
ton_1Obj.pruefe("div2","div9");
ton_2Obj.pruefe("div4","div4");
ton_3Obj.pruefe("div5","div5");
ton_4Obj.pruefe("div6","div6");
...
}

Was hier genau abläuft, muss man nicht verstehen. Aber für jedes Ton-Dokument "tonx" müssen wir ein entsprechendes Objekt "tonxObj" in Javascript instanzieren und den Namen bzw. die ID, die wir ihm gegeben haben, angeben. Im zweiten Teil wird angegeben, wann dieses Objekt spielen soll. An erster Stelle steht die ID des Div-Absatzes, an dem es starten soll, im zweiten Teil, wo es stoppen soll.

Wenn auf diese Weise alle Ton-Dokumente per Flash eingefügt worden sind und in Javascript instanziert und Absätzen zugeordnet wurden, müsste die Reportage funktionieren. Allerdings er, wenn man auf den grünen-Start-Button klickt, also nicht vergessen, den Ladescreen wieder zu aktivieren.

Layout verändern

Das Layout der Seite kann problemlos geändert werden, solange nicht die Größe eines Absatzes oder die Leseposition verändert wird. Ändert man die Größe der Absätze, muss einiges beachtet werden. Folgende Details müssen immer aufeinander abgestimmt sein:

• Größe und Position des Lesebereichs, der als Hintergrund-GIF im Body untergebracht ist.
• Die Größe und der Abstand der Textabsätze, die über die Klasse absatz geändert werden.
• Größe und Position der grünen Pfeile und des grauen Orientierungsbalkens.
• Die Position des Steuerungskastens über die Klasse flashpos.
• Die Javascript-Funktionen für Vor- und Zurückblättern: weiter() und zurueck().
• Die Justierung in Javascript für das Starten und Stoppen von Tondokumenten. Diese erfolgt in der Funktion pruefe() und ist im Quelltext kurz dokumentiert.

Debugging-Modus

Falls irgendwas mal nicht klappt: Für Testzwecke ist im spielen.swf ein Debugging-Modus eingerichtet. Dafür muss man die Höhe der Klasse flash im CSS von 60px auf 120px ändern. Dann erscheinen alle Steuerungsfenster im Debugging-Modus und geben Auskunft über übergebene Parameter sowie aktuelle Zustände und Sollzustände.

.flash {
       width:200px;
       height:120px;
       }

Außerdem gibt es noch eine Positionsanzeige, die bei der Feinjustierung der Absätze hilft. Sie zeigt die aktuelle Seitenposition in Pixeln an. Der entsprechende Code ist im HTML (direkt nach dem Body-Tag) und in Javascript (in den Funktionen pruefe() und PositionAnz()) auskommentiert und kann bei Bedarf aktiviert werden.

Ausblick

Ich hoffe, dass dieses Tutorial zu weiteren Experimenten von anderen Journalisten anregt. Weder die technische noch die narrative Seite des Formats ist ausgereizt. Denkbar sind auch kurze Video-Beiträge, die in Absätzen gestartet werden, oder bewegte Flash-Animationen wie zum Beispiel zoomende oder scrollende Photos. Vor allem eine Umstellung der Kommunikation zwischen Actionscript und Javascript auf die ExternalInterface API von Macromedia würde neue Möglichkeiten bieten und das Multimedia-Format vor allem auch für Macintosh-Computer lauffähig machen.