Kategorien
Design Sonstige Programme

InDesign to Flash: Pageflip ohne alles

Mit wenigen Handgriffen wird aus jedem PDF ein interaktives Flash-Dokument, entweder als Pseudo-Papier mit Blättereffekt oder als Präsentations-Format à la PowerPoint.

Mit wenigen Handgriffen wird aus jedem PDF ein interaktives Flash-Dokument, entweder als Pseudo-Papier mit Blättereffekt oder als Präsentations-Format à la PowerPoint.

Zugegeben: Wir haben uns große Mühe gegeben, Ihnen auf einfachem Weg den Pageflip-Effekt beizubringen, aber das Ergebnis wird nicht dem entsprechen, was Sie mit InDesign CS4 oder CS5 hinbekommen. Und das Beste: Es kostet Sie (einen Monat lang) keinen Pfennig und funktioniert einfacher, also das Schreiben und formatieren eines Blogbeitrags.

Achten Sie beim Veröffentlichen darauf, dass der Nutzer versteht, das es hier etwas zum Blättern gibt.

Umblättereffekte mit Flash
Workshop: Das Flash-Magazin – Links und Tipps
Umblättereffekt mit MultiFlip und Flash

Ausgangsmaterial PDF

InDesign-Nutzer haben fertige InDesign-Dokumente und auch die entsprechende Software aus dem Hause Adobe bereits zur Verfügung. Wer das nicht hat, benötigt zumindest die 30-Tage-Testversion von InDesign CS4 oder (ab Mitte Mai 2010) CS5 sowie für den einfachen Start eine Handvoll mehrseitiger PDF-Dateien.

Haben wir die letzen Jahre in Flash-Tests immer wieder kritisiert, dass das Autoren-Tool keine PDFs importieren kann, jetzt geht es, und zwar über InDesign als Umweg. InDesign CS5 kann nämlich FLA-Dateien speichern, die von Flash geöffnet und bearbeitet werden.

Das ist aber nicht unser Ziel. Wir lassen Flash außen vor und bringen die PDFs so schnell wie möglich ins Netz.

Der schnelle Import

Starten Sie ein neues Dokument mit einem Seitenformat, das zu Ihrem Dokument passt. In vielen Fällen sind das DINA-4-Dateien. Bevor Sie sich nun große Gedanken über das Endformat machen, vergessen Sie es. Die Höhe einer vertikal ausgerichteten A4-Seite hat 842 Pixel bei einer Standardauflösung von 72 dpi. Der Exportfilter von InDesign zu SWF besitzt aber die Möglichkeit zur Anpassung der Ausgabegröße, wenn Ihnen das zu viel erscheint.


Der entscheidende Kniff: Nur wenn die „Import-Options“ aktiviert sind, wird mehr als nur das Titelblatt des PDF importiert

Nun, da die Datei erstellt ist, gehen Sie auf Datei > Platzieren und suchen nach dem mehrseitigen PDF-Dokument. Im Importdialog sehen Sie links unten die Checkbox: „Import-Optionen aktivieren“ das bestätigen Sie und schon zeigt Ihnen InDesign die Möglichkeit, alle oder bestimmte ausgewählte Seiten des Dokuments zu importieren. Wählen Sie alle.


Im Optionsdialog können Sie auch dezidiert bestimmte Einzelseiten aus dem PDF auswähle.

Wenn Sie nun den Import bestätigen, rechnet InDesign einen Moment und zeigt dann die erste Seite der PDF-Datei als Thumbnail zum Einfügen an. Achten Sie darauf, dass die Hilfslinien magnetisch sind (Menü „Ansicht“) oder drücken Sie STRG + Ü, um genau das zu erreichen. Nun müssen Sie die platzierten Dateien nicht mehr ganz genau auf der linken oberen Ecke ansetzen.


Nach jedem Klick wird eine Seite platziert und die nächste „unter den Mauszeiger“ geladen.

Klicken Sie nun in eben diese Ecke und nach kurzer Zeit füllt die erste Seite der PDF-Datei die InDesign-Arbeitsfläche. Drücken Sie nun STRG + SHIFT + P, um eine neue Seite zu erstellen, und Sie sehen, dass der Thumbnail unter dem Mauszeiger nun die zweite Seite anzeigt. Sie klicken erneut in die linke obere Ecke der Seite und die zweite PDF-Seite wird platziert.

Achtung: Wechseln Sie während des Platzierens nicht das Werkzeug, sonst geht der Import verloren. Anpassungen im Layout nehmen Sie nachträglich vor.

… und wieder raus

Nehmen wir an, die Seiten stimmen perfekt. Dann speichern Sie kurz zur Sicherheit das InDesign-Dokument und gehen nun auf Datei > Exportieren >SWF. Im Exportdialog entscheiden Sie im Kopf über die Größe der fertigen Datei im Sinne der Outline-Größe.

InDesign verwendet für leere Seiten die normale „Papierfarbe“ weiß. Wollen Sie diese ändern, dann müssen Sie vor dem Export die Palette Swatches beziehungsweise Farbfelder öffnen, dort auf Papier doppelklicken und aus dem Weiß ein Schwarz machen.


InDesign CS5 beherrscht eine Reihe von Standardübergängen zwischen den Einzelseiten

Zurück im Exportfilter. Der untere Bereich ist in CS5 neu gestaltet. Wenn Sie das Drop-Down-Menü öffnen und die Option „Page Turn“ auswählen, entspricht das dem Standardexport aus CS4. Und das ist auch der direkte Weg zum blätterbaren Online-Magazin.

Texte als Vektoren einbinden

Nun können Sie noch im Register Erweitert die Optionen für die Bildkompression festlegen und ob sie Texte als Text oder Vektoren eingebunden haben wollen. Letzteres ist sicherer in Sachen Kompatibilität.

Wenn nun Ihr PDF gar kein Papiermagazin war, sondern eine Präsentation, dann wählen Sie statt Page Turn einen der vielen anderen Animationseffekte. Sie können auch innerhalb vo InDesign Übergänge anlegen wie in PowerPoint, aber so weit wollen wir hier nicht gehen.

Wenn Sie nun den Export-Knopf drücken, generiert InDesign ein handliches Flash-Filmchen nebst tragender HTML-Seite (Demo), dessen Seiten sich mit der Maus entweder per Klick oder durch Ziehen der Seitenecke umblättern lassen.

Ein Klick aufs Bild öffnet die Demo. Zum Blättern klicken Sie links oder unten rechs unten auf die „Buchseiten“.

Und noch ein letzter Tipp: Wie Sie an der Demo schon selbst gemerkt haben, ist dieser Effekt erklärungsbedüftig. Bringen Sie einen Hinweis an, damit die Nutzer nicht denken, es handele sich um ein statisches Bild.

(mm), ™

Von Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

16 Antworten auf „InDesign to Flash: Pageflip ohne alles“

Ich hätte auch mal eine Frage zu dem ganzen PageFlip kram. Kann ich in Indesign auch einen Luupen effekt oder zoom auf den PageFlip anwenden bzw. rein Programmieren?

Hat jemand eine Idee?

Danke für die Hilfe Nicola

Danke für das kleine Tutorial, sehr hilfreich!
Ich habe es gerade mit CS4 probiert, bekomme jedoch nur eine lausige Qualität des PDFs nach dem Import als Ergebnis. Hat jemand eine Idee, was die Ursache hierfür sein könnte?

Wie kann ich einstellen für welche Flash-Version dies kompatibel sein sollte?

Merci & guten Tag noch,
Nikki

Es geht natürlich auch ohne InDesign – wie?

Mit Adobe FlashPageFlip (hier gibt’s sogar eine kostenlose Version). Ohne Flash-Kenntnisse einfach Bilder in den entsprechenden Ordner packen und fertig!

Viel Erfolg!

Eine Frage hierzu … wenn ich doppelseiten mit 1 coverseite in indesign angelegt habe, was bei einer broschüre üblich ist, kommen die erste und letzte seite als doppelseite raus, jedoch nur zur hälfte gefüllt, was den bucheffekt sehr unschön macht. gibt es hierfür eine lösung?

Keine Lösung, aber ein Work-around: In InDesign auch die erste Seite als Doppelseite anlegen (Dafür „Neue Dokumentseitenanordnung zulassen“ weghaken), und diese mit 52% grau füllen. Dann sieht’s so aus, wie auf meiner Seite (siehe Link oben).
Grüße, Miralys

@Paul: stimmt – aber beim Export als swf kann man beliebig einstellen, wie groß das Endprodukt sein soll.
Hab´s ausprobiert, funktioniert super!
Weshalb das Demo so ungünstig groß veröffentlicht wird, weiß ich nicht, jedenfalls darf man das nicht als Maßsstab ansehen!

Was sich auf den ersten Blick ganz interessant liest sieht dann (ich meine das Demo) nicht so beeindruckend aus:
Links sind tot, also überflüssig
Das Gesamtlayout ist viel zu breit, wie FAZ im Querformat mit 2-Spaltensatz.
So etwas würde ich weder selbst lesen geschweige denn jemandem anbieten wollen.

sieht nett aus, ich finde aber das licht/schatten-verhältniss stimmt nicht ganz, sonst wie gesagt „nett“.
lg.

Danke Frank!

Ein schöner Artikel, habe diese Funktion in ID noch gar nicht gekannt : )
Mein Kunde wird sich freuen zu erfahren, dass er seinen Flip nun sogar ohne Flashkenntnisse erstellen kann.

Gruss
Sascha

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.