Effekte

InDesign to Flash: Pageflip ohne alles

7. Mai 2010
von

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.

blaettern 01 foto

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.

import1 foto
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.

import options foto
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.

platzieren foto
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.

export foto
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.

demo foto

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), ™

 foto

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.

14 Kommentare zu „InDesign to Flash: Pageflip ohne alles

  1. sascha am 7. Mai 2010 um 11:12

    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

  2. Franz Meier am 9. Mai 2010 um 17:59

    Sehr guter Beitrag, dass war ja schon fast ein eigenständiges Tutorial. Mir geht es wie meinem Vorposter: Wieder was gelernt.

  3. Rauter am 9. Mai 2010 um 20:36

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

  4. Grün Weiss am 12. Mai 2010 um 12:30

    echt nicht schlecht cool

  5. ThomasO am 13. Mai 2010 um 12:36

    Hab es mal mit ID CS4 nachgemacht. Funktioniert ganz gut.

  6. Paul am 13. Mai 2010 um 21:12

    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.

  7. Swotl am 7. Juni 2010 um 17:53

    Super Beitrag!!
    Danke!

  8. Swotl am 7. Juni 2010 um 23:26

    @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!

  9. [...] den Pageflip-Effekt via InDesign erzeugt, stellt zum Beispiel Frank Puscher in einem Tutorial auf drweb.de sehr gut verständlich der Öffentlichkeit [...]

  10. Michelle am 27. Juni 2010 um 21:36

    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?

    • Miralys am 19. April 2012 um 12:24

      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

  11. izon//Design am 31. Juli 2010 um 17:27

    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!

  12. PDF flip book - Flashforum am 9. August 2010 um 21:51

    [...] dem neuen Indesign kann mann eine swf mit pageflip funktion exportieren… InDesign to Flash: Pageflip ohne alles | Effekte, Flash, PDF | Dr. Web Magazin a+ __________________ Flash MX – Mac OS [...]

  13. Niki am 2. September 2010 um 20:37

    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

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!

*