Hinweis

Für dieses multimediale Reportage-Format nutzen wir neben Texten und Fotos auch Audios und Videos. Daher sollten die Lautsprecher des Systems eingeschaltet sein.

Mit dem Mausrad oder den Pfeiltasten auf der Tastatur wird die jeweils nächste Kapitelseite aufgerufen.

Durch Wischen wird die jeweils nächste Kapitelseite aufgerufen.

Los geht's

Pageflow Tutorial

Logo http://www.audiojournalismus.de/pageflow-tutorial

Substantiv (engl.): Multimedia-Reportage, die mit dem Scrollytellingtool Pageflow programmiert wurde.




Zum Anfang

Ein gutes Radiofeature braucht eine gute Geschichte. Das ist bei einer Multimedia-Reportage auch nicht anders.

Bildunterschrift
Vollbild

Aber wer eine gute Geschichte auch gut erzählen will, der muss die Ausdrucksmittel des Mediums kennen. Muss um die Möglichkeiten wissen, die das Medium zur Verfügung stellt. Muss das ästhetische Potential ausloten und in den Dienst der Geschichte stellen.

Hier erzählen wir leider keine spannende Geschichte. Wir wollen bloß einen ersten Überblick darüber anbieten, welche Möglichkeiten Pageflow (in der bei uns installierten Software-Version) anbietet und wie wir sie einsetzen können.

Bildunterschrift
Schließen
Zum Anfang

Multimediale Publikationen sind ein bisschen wie Container: Sie können alle Ausdrucksmittel der klassischen Medien in einem einzigen Medium zusammenführen.

Aber sind sie deswegen Radio + Fernsehen + Zeitung? Natürlich nicht. Sie sind mehr. Und weniger.

Zum Anfang

Text:
Überschrift, Unterschrift, Fließtext, Zitat, …

Video:
TV-Clip, Animation, Loop, time-lapse, …

Bild:
Foto, Zeichnung, Infographic, Karte, …

Audio:
O-Ton, Atmo, Musik, Sprecher, …

(Inter-)Aktion:
Links, Delays, Hotspots, …

Zum Anfang

Wie der Name schon sagt: Ein Pageflow ist eine lineare Abfolge von einzelnen Seiten.

Eine nach der anderen. Reihenfolge vorgegeben.

Ist das ein Vorteil oder ein Nachteil?
Falsche Frage!

Es ist so: Wer seine Geschichte non-linear erzählen will, findet Tools, die dafür besser geeignet sind.

Zum Anfang
Zum Anfang

Jede einzelne Pageflow-Seite basiert auf einer Gestaltungsvorlage, dem „Seitentyp“. Manche können Videos abspielen, andere sind für Audiodateien gedacht, wieder andere usw.

Aber ganz gleich, welchen Seitentyp Ihr wählt – immer könnt Ihr auch Texte eingeben. Und diese Texte folgen immer dem gleichen Aufbau:

Zum Anfang

Fließtext.


Texte können aus diesen vier Bereichen bestehen. Der Fließtext – und nur der – kann auch kursiv, fett und unterstrichen sein.

Aber vorsicht mit Unterstreichungen: Unterstrichener Text im Internet sieht oft aus wie ein Link.

Schriftart auswählen, Größe verändern?
Fehlanzeige. Das alles ist halt so wie es ist.






Zum Anfang

Je nach Hintergrundbild ist das eine oder das andere sinnvoller.

Zum Anfang

Es muss ja nicht so übertrieben sein wie hier. Es geht meist auch subtiler. Dieses Bild ist vielleicht auch gar nicht ideal als Hintergrund.

Zum Anfang

… ist gar kein Problem.

Vollbild

Denn es gibt einen eigenen Seitentyp, der speziell für lange Texte vorgesehen ist: „Text“. Er trennt den Titelbereich (inklusive Tagline und Untertitel) deutlicher vom Fließtextbereich. Beide können unabhängig voneinander gestaltet werden: links, mittig oder rechts; schwarz oder weiß. Und beide bekommen einen eigenen Hintergrund.

In den Textblock lassen sich außerdem Bilder einbetten, so wie bei einer Zeitung. Und ein paar visuelle Gimmicks sind auch noch mit drin. Zum Beispiel wie genau es aussieht, während man sich durch den Text durchscrollt.

Aber sind lange Texte denn überhaupt sinnvoll in multimedialen Reportagen? Eine Frage, die sich freilich nicht pauschal beantworten lässt.

Fest steht: Das tolle an der Multimedialität besteht auch darin, dass wir zeigen und erklären können. Show and tell. Zum Zeigen eignen sich Bilder und Geräusche besonders gut, zum Erklären eben Texte.

Und nur nebenbei: Wann fängt ein Text überhaupt an, „länger“ zu werden?

Schließen
Zum Anfang

Großformatige Bilder spielen für Pageflows eine zentrale Rolle. So wie großformatige Bilder zur Zeit überhaupt der Renner im Webdesign sind.

Und jede Pageflow-Seite, egal welcher Seitentyp, kann solche Fullscreen-Bilder darstellen.

(Bei Videoseiten sind das dann Posterbilder, aber dazu später.)

Zum Anfang

Das Bild ist der Hintergrund zum Text. Mehr passiert zunächst mal nicht.

Aber das ist schon eine ganze Menge. Denn beide bilden eine Einheit, sie treffen eine gemeinsame Aussage.

Deswegen gilt: Schon beim Fotografieren den Text einplanen!

Zum Anfang

Wo genau der Text über dem Bild erscheint, hängt vom Bildschirmformat und dem verwendeten Gerät ab. Das kann man nicht fest planen.

Es lohnt sich daher, seinen Pageflow auch mal auf dem Smartphone anzuschauen oder im Browser verschiedene Bildschirmgrößen zu simulieren.

Zum Anfang

Immerhin: Pageflow kann dafür sorgen, dass der wesentliche Kern jedes Bildes, seine zentrale Aussage, immer zu sehen bleibt, unabhängig von der Bildgestaltung und vom Bildschirmformat.

Dafür müsst Ihr aber für jedes einzelne Bild diesen Mittelpunkt definieren.

Zum Anfang

Vordergrundbild statt Hintergrundbild? Bild ohne Text?

Ja, wer ein Bild zeigen will, kann den Text auch weglassen.

Entweder ganz – dann schreibt einfach keinen Fließtext. Und den Titel könnt Ihr über eine Checkbox verbergen. (Es ist aus organisatorischen Gründen sinnvoll, trotzdem einen Titel anzugeben!)

Oder, so wie hier: Der Text erscheint mit einer Verzögerung. Das ist übrigens bei allen Seitentypen möglich.


Zum Anfang

Es muss nämlich nicht immer ein Bild sein.
Es geht statt dessen auch mit 1000 Worten. Oder weniger.

In schwarz oder in weiß.


So, und jetzt lassen wir Bewegung rein:

Zum Anfang

Was wäre das Netz ohne Videos?

Zum Anfang

Gerade haben wir uns daran gewöhnt, dass responsives Webdesign gern mit vollformatigen Bildern arbeitet. Und dann das:

Die Bilder fangen an, sich zu bewegen!

Nur ein bisschen. Unauffällig. Aber es sind eben keine Fotos mehr, sondern Videos. Im Hintergrund. Subtil.

In Pageflow geht das mit dem Seitentyp „Hintergrund-Video“.

Zum Anfang

Ausprobieren! Das kommt sicher darauf, wie lebendig das Video ist. Und auf den vordergründigen Text, von dem es ablenken könnte.

Hintergrund-Videos werden übrigens geloopt. Einmal durchgelaufen, beginnen sie wieder von vorne. Da kann man nichts dagegen tun. Man kann sich aber bemühen, das Video so zu schneiden, dass der Schnitt möglichst nicht auffällt.

Zum Anfang

Auch diese Infobox verschwindet nach kurzem.

Was hier gut reinpasst: Metadaten wie Urheber oder Autor.
Aber auweia: Wenn es dumm läuft, verdeckt die Infobox den Seitentext!

0:00
/
0:00
Video jetzt starten

Man kann das Video starten und stoppen.
Und der Text verschwindet nach wenigen Sekunden vom Schirm.

Nach wenigen Sekunden erst.

Und nur, solange man die Maus nicht bewegt.

Zum Anfang

Naja, das erste Bild des Videos. Normalerweise.

Aber nicht jedes Video fängt direkt mit einer schönen Einstellung an. Deswegen können wir eigens ein „Posterbild“ hochladen.

Zum Anfang

Soll das Video von alleine starten? Kein Problem. Könnt Ihr für jedes Video separat aktivieren.

Und ein weiterer Automatismus lässt sich zuschalten: Nach Ende des Videos kann Pageflow von alleine zur darauffolgenden Seite weiterblättern.



Zum Anfang

Ja, darüber sollte man kurz nachdenken. Besonders wenn das Video automatisch startet.

Welchen Text gebe ich einem Video mit? Und wieviel davon? Muss der Betrachter den Text gelesen haben, bevor das Video losläuft? Oder kann man den Text lesen und gleichzeitig dem Video folgen?

Das hängt alles immer vom Video und vom Text ab. Es ist aber ganz gut, sich einmal bewusst in die Rolle des Rezipienten hineinzubegeben und zu prüfen, ob die verschiedenen Medien sich nicht gegenseitig kannibalieren.

Zum Anfang

Audios spielen im Netz bislang nicht die große Rolle. Aber viele Multimedia-Reportagen haben gerade die Wirkung von Atmos für sich entdeckt. Und Pageflow unterstützt uns dabei.

Zum Anfang

Jeder Seitentyp kann ein „Atmo-Audio“ abspielen, einen Sound, der losläuft, sobald man auf die Seite kommt. Und erst wieder aufhört, wenn man die Seite wieder verlässt.

Folgen zwei Seiten mit demselben Atmo-Audio aufeinander, dann läuft das Audio einfach ohne Unterbrechung weiter.

Sinn ergibt das wohl nur bei Hintergrund-Sounds; neben Atmos könnte das auch Musik sein.

Zum Anfang

Bei Videos kann man sogar auswählen:
Läuft die Atmo weiter, gleichzeitig mit dem Video? Oder wird sie solange runter- oder ganz rausgeblendet?

Hier ausprobieren!

Zum Anfang

… und natürlich die Infobox

Anders als bei Videos verschwindet die Box allerdings nicht. Um so wichtiger ist es darauf zu achten, dass sich Audio und Text nicht gegenseitig in die Quere kommen.

0:00
/
0:00
Audio jetzt starten

Analog zu den Videos:
Der Seitentyp „Audio“ kann einen Audioclip wiedergeben.
Ideal für einen O-Ton.
Den kann man dann Starten und Stoppen.
Es gibt auch die Autoplay-Funktion …

Zum Anfang

Das soll so laufen: Während ein Sprecher zu hören ist, sehen wir nicht nur ein einziges Standbild im Hintergrund, sondern mehrere Bilder – als Slideshow.

Hm. Erwischt. Das kann Pageflow nicht.

Außer natürlich, man baut vorher aus Fotos und Audio eine Slideshow als Video zusammen. Zum Beispiel mit iMovie. Dann hat man eben ein Video.

Nachteil: Man kann nicht selbst durch die Slideshow klicken.
Vorteil: Man muss nicht selbst durch die Slideshow klicken.







Zum Anfang

Vollbild

Nun, zuerst einmal: Man kann selbst von Seite zu Seite blättern, Videos und Audios starten und stoppen, kurz: sein eigenes Tempo bestimmen. Das ist doch schon mal was, oder? Naja, stimmt, das kann auch lästig sein.

Dann haben wir gesehen, dass sich der Text verzögert einblenden lässt. So dass er erst nach einigen Sekunden erscheint. Ist zwar nicht Inter-, aber Aktion. Wow!

Drittens können wir Links setzen, auf die man dann draufklicken kann. Entweder innerhalb der Pageflow oder nach außen in die Wunderbare Weite Welt des WWW – Internet at its best!

Zugegeben: So richtig viel kommt dann auch nicht mehr. Aber eins haben wir noch:

Schließen
Zum Anfang

Für die einen das einzige genuin interaktive Element in Pageflow. Für die anderen eine unnötige Spielerei nach dem Motto: Ich setz’ es ein, weil ich es kann. Entscheidet selbst!

Vorher/Nachher kann übrigens auch Früher/Heute, Tag/Nacht, Grün/Rot, Männlein/Weiblein oder sonst was sein. Überlegt Euch halt, was Ihr damit erzählen wollt.

Zum Anfang

Am rechten Rand sehen wir eine Navigationsleiste. Die kleinen Bilder sind Miniaturversionen der Hintergrundbilder. Wir können für jede Seite aber auch gezielt ein eigenes Thumbnail-Bild hochladen. Das kann unter Umständen sehr sinnvoll sein.

Oben gibt es einen Button für die Übersicht. Hier erscheint für jede Seite auch eine kleine Beschreibung. Die könnt und solltet Ihr jeder einzelnen Pageflow-Seite unter „Optionen“ mitgeben.

Zum Anfang

Es ist ein wenig wie bei Powerpoint: Schiebt sich die eine Folie über die andere, blenden wir sanft über oder machen wir einen harten Schnitt wie im Film?

Verschiedene Varianten sind möglich. Aber so wie eine Folie reinkommt so geht sie auch wieder raus. Die Varianz ist recht eingeschränkt. Was schade ist, denn über die Form der Übergänge kann man den Folien durchaus einen Subtext mitgeben.

Zum Anfang

Ist der Pageflow fertig? Mit drei Klicks ist das Ding veröffentlicht.

Aber wann veröffentlichen wir überhaupt? Meißeln wir die Story in Stein, bevor wir sie in die Welt setzen?

Oder lassen wir unseren Pageflow fluide, ergänzen, korrigieren und aktualisieren wir ihn regelmäßig?

Beide Strategien haben ihr Für und Wider.

Zum Anfang

Sind für alle Bilder, Videos und Audios die Rechte eingetragen?
Sind die Bildausschnitte sinnvoll eingestellt?
Sind die automatisch generierten Thumbnails gut, oder lieber eigene Thumbnails hochladen?
Hat jedes Video ein gutes Posterbild?
Stimmen die Übergänge?
Hat jede Seite einen Beschreibungstext für die Übersicht?
Ist das Impressum eingetragen? (Impressumspflicht!)
Einmal auf dem Smartphone angeschaut?









Zum Anfang
Scrollen, um weiterzulesen
Wischen, um Text einzublenden