Umblättereffekte mit Flash

Gedruckte Formate lassen sich nur unzureichend in das Web übertragen. Doch auch hier gibt sich Design kreativ. Das Umblättern gehört dazu. Diesen Effekt haben Sie ganz sicher schon gesehen.

Dieser Effekt ist mehr Spielerei denn hilfreiche Technik, doch kann er zweckmäßig eingesetzt eine Website bereichern. Mit Turnpages gibt es einen kommerziellen Spezialisten, der das Umblättern von Seiten per Flash zum Kinderspiel macht. Magazine, Kataloge und Prospekte liegen gewöhnlich auch als PDF-Versionen vor. Turnpages kann diese Daten nutzen und das Look&Feel der Publikationen ins Web übertragen. Dazu können mit dem Shopping-Modul Produkte Mausklick-sensitiv gemacht und somit auf Wunsch gleich vom Kunden in den Warenkorb befördert werden. Ein Inhaltsverzeichnis, die Druck-Option, ein Auswertungsmodul für die Nutzung des Services und die Einbindung von Formularen werten dieses Produkt noch auf.

Das Lizenzmodell ist leider Haken. So startet der „Full Service“, bei dem das Unternehmen die Erstellung und Betreuung für ein Prospekt übernimmt, mit 500,00 Euro. Mit dem „Self Service“ kann man die Turnpages-Technik kaufen. Das kostet etwa 3000,00 Euro, ermöglicht aber auch den Wiederverkauf. Dazu benötigt man allerdings die Wiederverkäuferlizenz, für den Einsatz auf dem eigenen Server wiederum eine TurnPages-Softwarelizenz, die auch noch je Unternehmen, je Sprache und je Internetdomain differiert. Die Gebühr für eine Lizenz beginnt mit 2000,- Euro. Das alle ist undurchsichtig, weshalb wir eine Alternative empfehlen möchten.

Screenshot
Umblättereffekte mit Turnpages

Pageflip – Die kostenlose Alternative
Als Open Source Software steht Pageflip ohne Kosten zum Download bereit und liefert mehr Features als das Produkt Turnpages. So bietet die Version 2.2 neben dem Umblättern auf Knopfdruck auch das manuelle Blättern an, transparente Bereiche für „Löcher“ in und das Ausreißen einer Seite sowie Animationen innerhalb der Präsentation, Umblättergeräusche und das Erstellen eines Inhaltsverzeichnisses. Da die Website einzig ein für sich sprechendes Beispiel bietet, sei an diese Stelle auf den unscheinbaren Link „download sourcecode“ am Ende der Seite verwiesen.

Screenshot
„Blätterbeispiel“ der Pageflip-Website

Der Anfang
Für diesen Effekt benötigt man nur das angesprochene „pageflip_v22_source.zip“, das die Datei „pageflip_v22.fla“ enthält. Die Datei wird in Flash geladen und kann nach Geschmack verändert werden. Wichtigster Anlaufpunkt ist dazu die Ebene „actions“, worüber man ab Bild 5 ins Geschehen eingreifen kann. So steht die Variable „pw“ für „page width“ und „ph“ für „page height“, wobei die voreingestellte Seitengröße 300 x 400 Pixel beträgt. Ändert man die Größe ab, müssen natürlich auch alle Seiten in der Bibliothek (F11) dazu passend gestaltet werden. Zum Glück nur die Seiten. Alles andere, wie etwa die Bereiche, die der Anwender später zum Umblättern anklicken kann, wird automatisch festgelegt.

Screenshot
Die Größenänderung erfordert eine Anpassung der Seiten

Seitenweise
In der Bibliothek sind die Seiten als Movieclips abgespeichert, die sich allesamt im Ordner „PageElements“ befinden. Ein Klick auf „page1“ und schon kann die Ebene „content“ gefüllt werden. Für mehr Übersicht legt man in der Bibliothek einen neuen Ordner an, in dem die einzelnen Seiten als JPEG gespeichert werden, die man zuvor etwa mit Photoshop gefertigt hat. Das entsprechende Bild für das Cover würde man also daraus in „page1“ einfügen. Auch andere Formate oder spezielle Movieclips sind möglich.

Zurück in der Anfangs beschriebenen Ebene „actions“ mit Bild 5 können einige Variablen verändert werden. So hat man mit „hcover“ die Wahl, ob man ein Soft- oder Hardcover nutzen möchte. Mit „clickarea“ wird der Klickbereich bestimmt, mit „afa“ dieser durch automatisches Knicken hervorgehoben. Weiter kann man hier bestimmen, wie schnell der Effekt ablaufen soll, ob Transparenz zugelassen ist und ob ein Sound beim Umblättern erklingt.

Screenshot
Seiten ändern

Flexire – Der Pageflip-Bruder
Der Vollständigkeit halber stellen wir auch die weiteren kommerziellen „Umblätter“-Lösungen vor. So gibt es mit Flexire von Thomas Haustein ein Pageflip-ähnliches Angebot, mit dem der Anwender sowohl per Mausklick zur gewünschten Seite springen als auch per Drag&Drop vor- und zurückblättern kann. Ebenfalls können zum Clip Animationen, Bilder oder Texte in einzelne Seiten integriert werden.

Interessant sind die Flexire Add-Ons, mit denen die Funktionalität um zusätzliche Interface-Elemente ergänzt wird. So ist „Catalog“ für den E-Commerce gedacht und ermöglich die Anbindung an das externe Bestellsystem über sensitive Bereiche, Produktdetailseiten und stufenloses Zoomen. „Album“ bringt als virtuelles Fotoalbum eine Thumbnail- und Kalender-Übersicht sowie Meta-Informationen mit, „Reading“ eine Volltextsuche und einen Textmarker, um wichtige Bereiche farblich hervorzuheben.

Screenshot
Flexire ermöglicht die Anbindung an den Online-Shop

Flippingbook
Auch das Flippingbook kann das kostenlose Pageflip nicht übertrumpfen. Die Features wie die „gotoPage“-Funktion, Autoflip, die Einstellungsoptionen für die Animation und Umblätter-Geräusche findet man auch da. Gerade für Kataloge ist die Anbindung der Produkte zum Online-Shop eine gute Eigenschaft, die leider Pageflip wie Flippingbook fehlen. Das ist der einzige Grund, sich für Flexire zu entscheiden, wenn man dieses Feature benötigt und die ActionScript-Kentnisse nicht ausreichen, um den Anwender nach dem Klick auf ein Produkt zum Online-Shop weiterzuleiten.

Screenshot
Bietet nicht mehr als Pageflip: Das Flippingbook

Puma und Pin-ups
Zum Schluß sollen zwei Beispiele zeigen, dass Eigenproduktionen ohne Verwendung vorgefertigter Flash-Effekte zu ungewöhnlichen Lösungen führen können. Puma etwa bietet einen Prospekt, der realitätsnah per Hand umgeblättert wird. Der Mauszeiger wird dabei um einen Arm mit Hand ersetzt, die beim Mausklick zugreift. Das Beispiel präsentiert auch zahlreiche Clips im Clip. So kann man eine Leine ziehen, einen Schaltknüppel bedienen und eine 3D-Brille benutzen. Pin-ups der fünfziger Jahre werden in dieser Pageflip-Variante abgebildet. Übrigens rührt die Bezeichnung Pin-up wirklich daher, dass Bilder posierender Girls aus Zeitschriften in Werkstätten und Spinde befestigt wurden. Pin-ups sind also „angepinnte Sexbomben“.

Screenshot
Einen Schritt weiter geht Puma mit „echter“ Hand

Die Übersicht zeigt, dass der kostenlose Effekt Pageflip die gleichen Features bietet wie die kommerzielle Konkurrenz. Einzig die Anbindung an den Online-Shop fehlt, kann aber mit wenig ActionScript-Kenntnissen ergänzt werden.

Erstveröffentlichung 09.12.2005

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Sortiert nach:   neueste | älteste | beste Bewertung
Björn Hahnefeld
Gast
7 Jahre 6 Monate her

Wer es gerne elegant und sehr funktional haben möchte, der sollte sich mal das „Flipping Book“ ansehen. Mit praktischer Zoom-Funktion, Download-Möglichkeit und Kapitelanzeige. Ebenfalls recht preiswert als HTML-Version oder als Entwicklerversion!

trackback

[…] und in englischer Sprache verfasst. Das Magazin wird als Flashfile mit dem onlinemagazintypischen Pageflip-Effekt […]

Corina Mandel
Gast
6 Jahre 10 Monate her

Das stimmt, Björn! Die “ FlippingBook HTML Edition“ ist nicht teuer und auch für einen Anwender ohne Flash-Kenntnisse gut einsetz- und anpassbar! Dafür werden wir uns auch entscheiden!

trackback

[…] tante google spuckt zb das hier aus __________________ computer tun nur das was man ihnen sagt, […]

WhatAboutPixel
Gast
6 Jahre 6 Monate her

… Umblättereffekte in Flash …

trackback

[…] Hier alles lesen. szu=’http%3A%2F%2Fwww.annaberger-internet.de%2Fblog%2F2010%2F01%2F06%2Ffaq-umblattereffekte-mit-flash%2F‘; szt=’FAQ%3A+Umbl%C3%A4ttereffekte+mit+Flash‘; […]

Pageflip-interessierter
Gast
Pageflip-interessierter
6 Jahre 6 Monate her

hallo,

kann jemand etwas zur software von flipviewer.de sagen?

Gerd Schaffen
Gast
Gerd Schaffen
6 Jahre 5 Monate her

Hallo,

Pageflip – Die kostenlose Alternative ist wohl in die Jahre gekommen. Folgt man dem Link, dann ist die „Die kostenlose Alternative“ abhanden gekommen und man muss auch teuer bezahlen, will man denn was anständiges haben.

Wie = es war einmal = .
Nur eine kleine Anmerkung.
LG
Gerd

Benjamin Krämer
Gast
Benjamin Krämer
6 Jahre 5 Monate her

Wieso abhanden gekommen? Die kostenlose Variante von v2.25 ist weiterhin über http://www.pageflip.hu/free.php zu finden. Sie enthält immerhin die Features die bis dahin kostenlos Bereit gestellt wurden und wenn man es mit dem Artikel oben vergleicht, bei dem die Version 2.2 bereits angeriesen wurde, kann man denk ich durchaus auch weiterhin damit arbeiten.

Und mit 25€ für eine Seitenlizens ist PageFlip glaub ich sogar immernoch die günstigste Variante unter den Kostenpflichtigen was ich gesehen hatte.

Daniel
Gast
6 Jahre 4 Monate her

Hier gibt es eine modernere Version des „Pageflip-Effektes“. Nur hier ist es kein effekt sondern das Umblättern ist naturgetreu in FP10 echtzeit 3D nachempfunden. Hoffe es gefällt:
http://www.virtual-magazine.com

Miralys
Gast
Miralys
6 Jahre 4 Monate her

Lässt sich Pageflip auch mit dynamischen Inhalten füllen? Also beispielsweise dass die einzelnen Artikel eines Blogs auf verschiedenen Seiten dargestellt werden? Oder kennt jemand ein Script, mit dem so etwas geht?

trackback

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

Erik
Gast
5 Jahre 11 Monate her

Eine interessante Alternative zu Flash findet man unter http://www.jpageflip.de !
Es handelt sich dabei um ein jQuery-PlugIn, läuft also ohne Flash. Voraussetzung ist, dass der Browser „HTML5-Canvas“ unterstützt.

Layne Chin
Gast
5 Jahre 9 Monate her

Ich empfehle diese beiden Standorte. Sie machen wunderschöne Umblättern Wirkung. http://www.axmag.com
http://www.pdf-to-flash-magazine.com

Lukas
Gast
5 Jahre 8 Monate her

Try http://www.pressmo.com. First conversion is for free and you can host it on your own server/domain.

Sara
Gast
Sara
4 Jahre 15 Tage her

Der Weg zu machen Flipping Buch klingt ein wenig kompliziert. In der Tat könnten einige digitale Zeitschrift Software Ihnen helfen, tun dies in Sekunden, wie http://www.xflip.com/

trackback

[…] Wer trotzdem mit Flash arbeiten möchte, für den habe ich hier ein kostenloses Tutorial gefunden: http://www.drweb.de/magazin/umblattereffekte-mit-flash/ […]

Blätterkatalog
Gast
10 Monate 21 Tage her

Hey, echt cooler Artikel über „Umblättereffekte mit Flash“.
Sehr informativ und beinhaltet viele Tipps und Tricks.
Danke

Nathalie
Gast
Nathalie
6 Monate 2 Tage her

Hallo,
habe ein PDF, dass ich gerne animiert aufblättern lassen möchte. Leider ist es komplett aufgeklappt ein „+“, d.h. die zweite und vierte Seite klappen nach oben bzw nach unten auf. Gibt es dafür auch ein Tool?
Vielen Dank im Voraus

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen