Blätterkatalog per Flash-Export

24
Publisher 4 · 2009
Prepress
InDesign CS4
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.
n 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 InDesignDokument 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 InDesignTransparenz 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
Beispiel-Buttons
sind in InDesign CS4
bereits dabei.
Oben: das PDF für den Druck. Unten: die Flash-Animation, erstellt über den XFLExport aus InDesign CS4 und anschliessend in Flash CS4 Professional verfeinert.
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 «RechtsButton» ebenso, bei Ereignis wählen
Sie jedoch Gehe zu nächster Seite. Anschliessend definieren Sie den «HomeButton», 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
Das Definieren von
Buttons in InDesign.
Prepress
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ätternEffekt». 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 SWFDatei 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.
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-
Publisher 4 · 2009
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
n
Der
FlashExport­
dialog.
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.
Der Autor
Klassischer Blätterneffekt im Webbrowser, der in InDesign CS4 zugewiesen wurde.
Haeme Ulrich, ulrich-media.
ulrich-media ist bekannt für InDesign- und Photoshop-Wissen.
www.ulrich-media.ch
Kostenloser Tricks-Blog:
http://blogs.ulrich-media.ch
Der IKEA-Katalog im Internet war einer der ersten Blätterkataloge überhaupt.
25