Bl�tterkatalog per Flash-Export

Immer häufiger erscheinen gedruckte Produkte im Web als interaktive «Blätterkataloge». Mit der Flash-Unterstützung von InDesign CS4 können einfache Kataloge aus InDesign ausgegeben werden. Aufwendigere werden in Flash CS4 Professional veredelt.

HAEME ULRICH Schon mal im IKEA-Katalog geblättert? Ich meine online, im Blätterkatalog auf www.ikea.ch! IKEA war eine der ersten Firmen, die ihren Internetauftritt dem «Look and Feel» des gedruckten Kataloges angeglichen hat. Dabei hat IKEA schon sehr früh einen Weg eingeschlagen, der mittlerweilen im Versandhandel Schule gemacht hat: Layout und Navigation dem gedruckten Produkt anpassen.

Nach wie vor ist es bei den meisten Versandhäusern so, dass der gedruckte Katalog vor der Website produziert wird, er ist also quasi das Original. Mit diesem Original wird anschliessend die Website aufbereitet. Zum Teil kommen die Daten für die Website aus der Betriebsdatenbank, nicht selten aber dient die InDesign-Datei als Quelle. Den Blätterkatalog für die Website weitestgehend in InDesign zu produzieren, ist nichts als die logische Entwicklung. Dem kommt InDesign CS4 mit dem Flash-Export sehr nahe.

In diesem Artikel zeige ich, wie Sie aus der InDesign-Datei des Printprodukts einen interaktiven Blätterkatalog im Flash-Format für die Website erstellen.

Interaktive Funktionen in CS4

In Sachen Interaktivität ist mit dem Upgrade von InDesign CS3 auf CS4 sehr viel hinzugekommen. Das Erstellen von Schaltflächen (Buttons) wurde erheblich vereinfacht. Seitenübergänge kamen hinzu, die den Effekt steuern, wie in der exportierten Datei von einer Seite zur nächsten geblättert wird. Neu sind auch der Export von fixfertigen Flashdateien (swf) und das Austauschformat XFL, um ganze InDesign-Layouts nach Flash CS4 Professional zu überführen. Zudem sind die mit CS4 eingeführten Querverweise interaktiv und können in der exportierten Datei angeklickt werden.

Vom Printlayout ins Web

Ein paar Überlegungen allgemeiner Natur. Printprodukte sind meist in Hochformat angelegt, während Web­sites, bedingt durch die Monitore, querformatig sind. Beim Blätterkatalog ist dies kein Problem, weil er sowieso offen (doppelseitig) publiziert wird und dadurch automatisch aus dem gedruckten Hochformat das Querformat für die Website entsteht.

Farbraum im Web ist sRGB und die Bildauflösung ist weit geringer als beim gedruckten Produkt. Auch das ist kein Problem: InDesign wandelt den Inhalt beim Flash-Export in sRGB um und auch die Bildauflösung wird reduziert.

Navigation erstellen

Machen wir uns also daran, aus dem für die Printausgabe fertigen InDesign-Dokument den Blätterkatalog zu erstellen. Überlegen Sie sich zuerst, wo Sie die Navigationsbuttons am besten platzieren. In der Praxis ist alles anzutreffen: oben, unten, links oder rechts. Auf jeden Fall erstellen Sie für die Navigation im InDesign-Dokument eine neue Ebene (Fenster > Ebenen). Achten Sie darauf, diese ganz oben zu positionieren, damit die Buttons nicht ungewollt von Seitenobjekten abgedeckt werden. Hinzu kommt, dass beim Export zu Flash die InDesign-Transparenz reduziert wird. Liegt die Navigation nun ganz oben, sollte sie in allen Fällen den Transparenzreduzierungsvorgang beim Exportvorgang heil überstehen.

Buttons erstellen

Wechseln Sie jetzt auf die Mustervorlage, um dort die Buttons zum Blättern der Seite anzulegen. Achten Sie darauf, dass die Navigationsebene aktiviert ist. Öffnen Sie sich über Fenster > Inter­aktiv das Schaltflächen-Panel.

Entweder zeichnen Sie nun mit den Vektorwerkzeugen von InDesign eigene Objekte und konvertieren diese über das Schaltflächen-Panel zu Buttons oder Sie verwenden fixfertige Buttons aus der mit InDesign mitgelieferten Bibliothek. Im Beispiel hier nehmen wir die vorgefertigten. Diese finden Sie als Beispielschaltflächen im Menü des Schaltflächen-Panels. Ziehen Sie je ein Objekt für «links», «rechts» und «home» auf der linken Seite an die Stelle, an der die Navigation entstehen soll.

Wählen Sie nun den «Links-Button», der eine Seite zurückblättern soll, an. Geben Sie ihm im Schaltflächen-Panel den Namen «back». Als Ereignis wählen Sie Bei Loslassen und bei Aktionen schauen Sie, dass Gehe zu vorheriger Seite aktiv ist.

Im Bereich Statusdarstellung können Sie angeben, wie der Button aussehen soll, wenn Sie mit dem Mauscursor darüberfahren und wenn Sie ihn anklicken. Um das Aussehen eines Status zu ändern, wählen Sie den entsprechenden Status im Panel an und ändern sein Aussehen über die gewohnten InDesign-Funktionen.

Verfahren Sie nun mit dem «Rechts-Button» ebenso, bei Ereignis wählen Sie jedoch Gehe zu nächster Seite. An-schliessend definieren Sie den «Home-Button», der auf die erste Seite des Dokumentes springen soll. Weisen Sie diesem das Ereignis Gehe zu erster Seite zu.

Wählen Sie jetzt mit dem schwarzen Pfeil die drei Buttons aus und ziehen Sie diese mit gedrückter Alt-Taste auf die rechte Seite, um dort eine Kopie der Buttons abzulegen.

Erster SWF-Export

Die Navigation ist erstellt, sie muss nun getestet werden. In InDesign CS4 gibt es keine Vorschau, um Interaktivität zu testen. Vielmehr exportiert man das Layout zu Flash (oder PDF) und testet es dort.

Wählen Sie also SWF (Shockwave Flash, abspielbare Flash-Datei) als Exportformat (unter Datei > Exportieren). Exportieren Sie vorerst mit den Standardeinstellungen, die Details werden später erläutert. Schauen Sie, dass SWF nach Export anzeigen angewählt ist, damit die exportierte Datei gleich im Standardbrowser angezeigt wird. Hier können Sie Ihr Werk nun testen. Verhält sich die Navigation nicht wie erwartet, könnte dies durch die Reduzierung der Transparenz hervorgerufen worden sein. In dem Fall ändern Sie das Aussehen der Buttons und exportieren das Layout nochmals.

Seite blättern

Beim Blätterkatalog wird allgemein erwartet, dass Seiten wie echte Buchseiten «umblättern» und nicht einfach geschoben werden. Diesen Blätterneffekt können Sie bereits in InDesign CS4 zuweisen. Holen Sie im Menü des Seiten-Panels den Eintrag Seitenübergänge > Wählen… Im erscheinenden Dialog wählen Sie den «Umblättern-Effekt». Bevor Sie auf OK klicken, vergewissern Sie sich, dass der Haken Auf alle Druckbögen anwenden aktiv ist. Jetzt exportieren Sie das Layout abermals. Nun können die Seiten im Browser geblättert werden.

Mehr interaktive Möglichkeiten

Haben Sie die mit InDesign CS4 eingeführten Querverweise angelegt, sind auch diese in der exportierten Flash-Datei interaktiv. Genauso auch Hyperlinks, Stichwort- und Inhaltsverzeichnisse.

Exportstrategien

Grundsätzlich muss man sich entscheiden, ob ein SWF oder ein XFL exportiert werden soll. Beides ist im Export-Dialog von InDesign CS4 zu finden.

SWF: Ist eine Shockwave-Flash-Datei, die ohne weiteres Zutun im Browser abgespielt werden kann. Sie ist «kompiliert» und damit, wenn einmal exportiert, nicht mehr veränderbar. Das bedeutet: Eine solche Datei kann an Funktionen nur beinhalten, was in InDesign bereits hinterlegt werden kann. Eine Nachbearbeitung im Programm Flash CS4 Professional ist nicht mehr möglich.

XFL: Exchange for Flash ist ein Transferformat für Flash CS4 Professional. Darüber können InDesign-Layouter ihren Inhalt an Flash-Programmierer übergeben. Diese öffnen das XFL direkt in Flash und veredeln da die Datei mit Action Script (Scriptsprache für die Entwicklung interaktiver Flash-Websites) und bauen Funktionen wie interaktives Zoomen oder die Anbindungen an Shop­systeme ein.

Exportoptionen

In unserem Fall gehen wir davon aus, den Blätterkatalog direkt in InDesign fertigzustellen. Darum wählen Sie in Datei > Exportieren das SWF als Format. Hier die SWF-Exportoptionen im Überblick.

Grösse: Da können Sie bei Einpassen eine Standardmonitorauflösung wählen. Dabei ist es glücklicherweise nicht möglich, das Layout zu verzerren, es wird immer proportional skaliert.

Seiten: Druckbögen meint hier, dass Doppelseiten exportiert werden. Das macht beim Blätterkatalog natürlich Sinn. Seiten rastern sollten Sie nur verwenden, wenn das Design in Flash nicht umgesetzt werden kann. HTML-Datei generieren erstellt eine HTML-Datei, die Sie im Browser öffnen können. In dieser HTML-Datei steht dann der Aufruf der SWF-Datei. Dies ist notwendig, weil SWF-Dateien bei den meisten Browsern nicht direkt geöffnet werden können.

Text: Da sollten Sie InDesign-Text in Flash-Text auswählen, damit der Text als solcher auch in der exportierten Datei erhalten bleibt. Diese Option bietet den Vorteil, dass die SWF-Datei von den Suchmaschinen Google und Yahoo indexiert und damit auch gefunden wird.

Interaktivität: Da müssen Sie natürlich sämtliche Register ziehen, um die gesamte Interaktivität in der SWF-Datei zu haben. Eine witzige Option ist Interaktives Aufrollen der Seiten einschliessen. Ist diese aktiv, können Seiten in der exportierten SWF-Datei an den Ecken gepackt und umgeblättert werden, dies unabhängig vom gewählten Seitenübergang.

Stand der Dinge – wie weiter

Mit CS4 hat Flash nun auch in InDesign Einzug gehalten. Für diesen ersten Wurf geht erstaunlich viel. Wer aber meint, den gesamten Blätterkatalog für das Grossversandhaus direkt in InDesign zu erstellen, liegt falsch. Noch bedarf es für komplexe Einbindungen der Nachbearbeitung in Flash CS4 Professional. Doch auch da spielt InDesign CS4 dank des XFL-Exports mit.

Heute wird im InDesign-Layout platziertes Audio- und Videomaterial beim Flash-Export (SWF und XFL) nicht ausgegeben. Auch gehen die in InDesign gesetzten Hyperlinks beim XFL-Export verloren.

InDesign und Flash in der Praxis

Es wird deutlich, dass InDesign aus der klassischen Printschiene ausgebrochen ist, ohne sie zu vernachlässigen. Alle, die heute in InDesign Printlayouts erstellen, werden bald auch andere Medien bedienen.

Sehr schön zeigt der Jahresbericht von «Unitus», was durch die nahtlose Flash-Integration von InDesign CS4 möglich wurde. Die NonProfit-Organisation hat ihren Jahresbericht in InDesign erstellt. Die Webversion, ein Blätterkatalog, wurde über XFL nach Flash übernommen und dort fertig programmiert. Schauen Sie vorbei unter:

http://tributes.unitus.com/AR/index.html