Blättereffekt mit FlashSeltener Effekt

Einsatzgebiet

Blättereffekt mit Flash

Zugegeben, manche Flash-Effekte kann man kaum noch sehen. Umblättereffekte gehören allerdings nicht dazu, da sie noch relativ selten sind. Ein Umblättereffekt bedeutet, dass Inhalte in meist zweidimensionaler Form seitenweise angeordnet werden. Der Nutzer sieht auf das Buch oder Magazin quasi von oben herab. Per Klick oder Drag and Drop auf die rechte (meist untere) Ecke der rechten Seite startet der Benutzer dann den Umblätter-Vorgang.

Bei einem solchen Effekt gilt erhöhte Vorsicht: Der reine Transport von Katalogen ins Web bringt kaum einen Werbeeffekt. Mehr als zehn oder zwanzig Seiten am Bildschirm durchzublättern ermüdet den Nutzer doch rasch. Ganz abgesehen davon bietet Flash hier sicherlich völlig andere und individuelle Navigationsmöglichkeiten. Durchaus sinnvoll kann die Magazin- oder Buchform aber aus optischen Gründen sein. Denkbar wäre zum Beispiel eine Bildergalerie oder ein künstlerischer Ansatz mit eigenen multimedialen Werken.

Vorgefertigt

Blättereffekt mit Flash

Den Blätter-Effekt komplett in Eigenregie zu realisieren, ist zwar möglich, aber auch mit gehörigem Aufwand verbunden. Deswegen fällt der erste Blick auf bestehende Lösungen. Im Open-Source-Bereich hat sich Pageflip ? mittlerweile in der Version 2.13 ? einen Namen gemacht. Zu finden ist die Originalversion auf der ungarischen Website www.iparigrafika.hu/pageflip direkt beim Autor, der das Pseudonym Macc trägt. Die Heft-CD enthält nicht nur die in diesem Workshop angepasste Version, sondern auch das Original in der Rubrik Listings.

Auch eine spezialisierte kommerzielle Lösung tummelt sich in diesem Bereich: Die holländische Firma Forward Thinking liefert mit Turnpages (www.turnpages.de) ein entsprechendes Produkt. In den gezeigten Beispielanwendungen erlaubt es allerdings nur das Blättern auf Knopfdruck und ist mit einem Lizenzmodell beginnend bei 2000 Euro sehr teuer. Dafür bietet Turnpages gegen Aufpreis auch den kompletten Prozess vom PDF bis hin zum Online-Katalog. Diese Schritte sind bei Pageflip natürlich von Hand zu erledigen. Für das vorliegende Beispiel soll dennoch die Open-Source-Version zum Einsatz kommen, da sie optisch mehr bietet und sich für kleinere und mittlere Anwendungen deutlich besser rentiert.

Aufbau des Flash-Films

Blättereffekt mit Flash

Öffnen Sie zuerst die Grunddatei von Pageflip. Sie heißt pageflip_v213.fla und besteht aus einer Szene, in der sich alles ? über mehrere Ebenen hinweg ? abspielt. Es gibt zwei Ebenen labels. In der obersten finden Sie ab Bild 15 die Hilfe in Form von Actionscript-Kommentaren. Die Markierungen für einzelne Bilder haben ebenfalls reinen Informations-Charakter.

Die wichtigste Ebene in Sachen Funktionalität ist actions mit allen benötigen Skripts. Die Stelle, an der Sie eingreifen können, ist Bild 5 in dieser Ebene. Dort finden Sie oben einen Kommentar vom Entwickler mit Hinweisen auf die aktuellsten Änderungen und außerdem noch eine Bitte um Spenden. Danach folgen die Werte, die geändert werden können.

Größenfrage

Blättereffekt mit Flash

Als Erstes legen die Variablen pw und ph die Seitengröße in Pixeln fest. Für das vorliegende Beispiel ändern sich die Werte in 400×400 Pixel statt 300×400 Pixel. Dies passt natürlich nicht mit den Seiten in der Bibliothek, die über [F11] aufgerufen wird, zusammen. Deswegen müssen Sie als Nächstes in die Bibliothek wechseln und dort eigene Seiten gestalten, die die richtige Größe haben.

Alle anderen Informationen, also die Bereiche, an denen der Nutzer klicken muss, um umzublättern, werden vom Skript automatisch anhand der Größen angepasst. Wenn die Abmessungen aber zu groß und breit werden, sollten Sie die Größe der Bühne noch von Hand ändern.

Eigene Seiten

Blättereffekt mit Flash

Die Seiten sind Movieclips in der Bibliothek. Sie finden Sie im Ordner PageElements. Klicken Sie auf page1. Die Seite enthält aktuell eine Instanz des Movieclips back aus dem Ordner pageContents in der Bibliothek. Für die vorliegenden Zwecke dient ein neuer Ordner Seitenelemente, der die Gestaltung der meisten Seiten als JPEG aufnimmt. Aus diesem Ordner fügen Sie das JPEG für den Titel in den Movieclip von page1 ein. Dafür steht standardmäßig die Ebene content bereit. Alternativ zu einem JPEG können Sie auch einen Movieclip oder andere Elemente einfügen. In den Movieclips der Seiten fügen Sie also Ihre Gestaltung zusammen.

Danach geht es an die Funktionalität. Auf der zweiten Seite bietet die Beispielanwendung einen Umschalter zwischen Hard- und Softcover. Dies ist die Eigenschaft hcover mit den Werten true (für Hardcover) und false (für Softcover). Die Position der Schaltfläche ändern Sie auf der Ebene btn, content enthält den Inhalt und actions das Skript für den Wechsel zwischen den Cover-Varianten.

Seiten überblättern

Blättereffekt mit Flash

Auf Seite 3 der Anwendung finden Sie eine andere Funktionalität, nämlich das Überspringen von Seiten. Dies erreichen Sie mit einer Schaltfläche und der Methode gotoPage(). Die Funktion erwartet als Parameter die Nummer der Seite. Der zweite Parameter steuert, ob die Seiten dazwischen einfach übersprungen (true) oder optisch durchgeblättert werden (false). Um zum Beispiel auf Seite 9 zu springen, fügen Sie folgenden Code ein:

on (release) {
_root.gotoPage(9, true);
}

Auf diese Weise lässt sich auch recht einfach ein Inhaltsverzeichnis realisieren. Ein Beispiel hierfür finden Sie im Original von Pageflip.

Mausarbeit

Blättereffekt mit Flash

Die nächsten zwei Seiten illustrieren optisch die Aktionsradien der Maus und die Zone, in der umgeblättert wird. Letztere können Sie auch in Bild 5 der Ebene actions ändern. Die Eigenschaft clickarea gibt die Breite des Klickbereichs in Pixeln an, afa liefert die Breite des Bereichs, in dem dann automatisch umgeblättert wird.

clickarea = 64;
afa = 56;

Die Seiten 7 und 8 illustrieren den Einsatz von Transparenz innerhalb des Buches. Dazu legen Sie eine Maske über die Ebene mit dem Inhalt (content). Diese Maske setzen Sie auf der nächsten Seite gespiegelt ebenso ein, damit der Transparenzeffekt auch beim Umblättern erhalten bleibt.

Seitenverwaltung

Blättereffekt mit Flash

Wenn Sie neue Seiten einsetzen möchten, geschieht dies auch über das zentrale Bild 5 in der actions-Ebene. Hier wird die Reihenfolge der Seiten mittels der Methode addPage() geregelt. Vor der ersten Seite müssen Sie addPage() mit dem String start aufrufen, nach der letzten mit end beenden:

addPage(“start”);
//Alle anderen Seiten
addPage(“end”);

Dazwischen kommen die einzelnen Seiten immer paarweise. Vorsicht, nur eine Seite alleine klappt nicht. Als ersten Parameter geben Sie hier den Exportnamen des Bibliothekselements der Seite an, zum Beispiel addPage(?page1?);. Wichtig ist, dass jedes Element, das als Seite verwendet werden soll, für Actionscript exportiert ist. Dies erledigen Sie in der Bibliothek über das Kontextmenü unter Eigenschaften. Klicken Sie dann auf Erweitert, wenn noch nicht der ganze Dialog sichtbar ist. Aktivieren Sie Export für ActionScript. Bei Bezeichner geben Sie den Exportnamen an. Die Option In erstes Bild exportieren muss deaktiviert sei
n, da sonst der Preloader gestört wird.

In Pageflip gibt es noch einen optionalen Parameter für addPage(). Sie können angeben, ob eine Seite ausgerissen werden kann (true). Im vorliegenden Beispiel sind die Seiten 11 bis 14 mit Ausrissmöglichkeit versehen. Eine ausreißbare Seite wird vom Nutzer nach unten weggezogen und verschwindet dann bis zum Neustart des Films.

Vorsicht

Blättereffekt mit Flash

Wichtig ist immer, dass Sie nicht einfach nur Ihr Offline-Medium in Flash konvertieren, sondern sich Gedanken machen, wie Sie dem Nutzer optischen und funktionalen Mehrwert bieten.

Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.