Immer mehr Webseiten nutzen PagePeel als Werbemittel. Dabei rollt sich eine kleine Ecke der Website rechts oben auf und weist den Nutzer dergestalt auf weitere Inhalte hin, die dahinter verborgen sind. Teil beschäftigt sich mit der animierten Ecke. Die Animation der Ecke besteht aus einer geschickten Kombination von Tweenings, Masken und Schatteneffekten. Das Scritping ist simpel.
Die Animation selbst ist eine geschickte Kombination aus Maskierung und Farbverläufen. Die grafischen Lösungen sind durchaus unterschiedlich. Je nach vernuteter „Beleuchtung“ erscheint beim Abziehen der Ecke entweder ein Schlagschatten links und unten oder ein eher rund wirkender Schatten am oberen rechten Rand, der die Bogenspannung des Blatts unterstützt.
Die animierte Ecke
Beginn Sie auf einer neuen Ebene mit einem Dreieck. Dazu ziehen Sie einfach ein Quadrat ohne Rand auf, klicken neben die Bühne um die Auswahl aufzuheben und ziehen dann die rechte obere Ecke nach links unten. Sobald sie auf einer Linie mit den Ecken links oben und rechts unten liegt, „rastet“ sie ein. Verschieben Sie das Dreieck so nach rechts oben, dass die Ecken ganz leicht den Rand der Bühne schneiden.
Die Ecken des Dreiecks schneiden den Rand der Bühne
Wandeln Sie das Dreieck nun in ein MovieClip um. Der Instanzname lautet „eckeMC“ Wechseln Sie zum Werkzeug „Frei Transformieren“ und ziehen Sie den Mittelpunkt des Dreiecks zur rechten unteren Ecke. Nun erstellen Sie in Frame 40 und dann in Frame 20 je ein weiteres Schlüsselbild. In Frame 20 vergrößern Sie das Dreieck um 300 Prozent in jede Richtung. Drehen Sie die linke obere Ecke leicht nach unten, das gibt dem Effekt etwas „Schwerkraft“. Und jetzt platzieren Sie das gedrehte Clip irgendwo rechts oben von der Mitte Ihres Films, so dass die Ecken erneut die Grenzen der Bühne schneiden. Zwischen die Schlüsselbilder setzen Sie Bewegungs-Tweenings.
Der Mittelpunkt des Clips bestimmt die „Achse“ beim Drehen
Bevor wir die Ecke dreidimensional machen, erstellen wir zunächst noch eine Gegenanimation. Das wird die Maske für die unterste Ebene mit Ihrem Hintergrund. Wechseln Sie also auf die Hintergrundebene und erzeugen Sie von dort aus eine neue. Legen Sie nun ein großes einfarbiges Rechteck, das deutlich größer ist, als die Bühne. Auch daraus wird ein MovieClip mit dem Instanznamen „maskeMC“. Drehen Sie es so, dass der Kantenverlauf exakt gegengleich zur Ausgangsposition des Dreiecks liegt.
Nun verschieben Sie auch hier den Mittelpunkt der Maske dorthin wo das animierte Dreieck seinen Mittelpunkt besitzt. Ergänzen Sie nun die Schlüsselbilder in Frame 20 und 40 und animieren Sie das Rechte passgleich zum Dreieck. Wandeln Sie die Ebene zur Maske um und begutachten Sie die Synchronität der Animationen.
Die 3D-Ecke
An dieser Stelle wird es etwas komplizierter. Doppelklicken Sie auf die animierte Ecke. Zunächst klicken Sie neben die Bühne, um die Auswahl aufzuheben und drücken dann die beiden Seiten des Dreiecks unten und links leicht ein, um dem Seitenzipfel eine Rundung zu verleihen. Wandeln Sie die Ecke erneut in ein MovieClip mit Namen „grafikMC“ um.
Die Ecken-Animation ist einmal sichtbar und einmal fungiert sie als Maske für den Licht-Verlauf
Nun wechseln Sie erneut zum Werkzeug „Frei Transformieren“ und verschieben Sie den Mittelpunkt nach rechts unten. Erzeugen Sie Schlüsselbilder in den Frames 15 und 30 und drehen Sie die Ecke nur ganz leicht in Frame 15. Die beiden Bewegungs-Tweenings werden so wirken, also würde die Ecke „winken“ und damit zur Benutzung auffordern.
Nun markieren Sie bei gedrückter Shift-Taste alle Frames der Ebene und wählen aus dem Kontextmenü der rechten Maustaste „Bilder kopieren“. Erzeugen Sie eine neue Ebene und nennen Sie diese „Lichtmaske“. Klicken Sie mit der rechten Maustaste auf den ersten Frame und wählen Sie „Bilder einfügen“. Sie sollten die gesamte Animation an Ort und Stelle verdoppelt haben.
Erstellen Sie zwischen beiden Ebenen eine neue. Sie trägt den Namen „Licht“. Zeichnen Sie ein vertikal gestrecktes, schmales Rechteck ohne Rand. Die Füllung besteht aus einem linearen Verlauf über fünf Farbstufen. Die Stufen eins bis drei (von links gesehen) sind weiß, die fünfte ebenfalls. Nur die Vierte bekommt ein 30-Prozentiges Grau. Allerdings haben alle Farbmarker einen anderen unterschiedlichen Alphawert. Nummer 1 und 5 sind komplett transparent. Die Marker zwei und drei haben eine Deckkraft von 83 und 80 Prozent und der graue noch 76 Prozent. Nun drehen Sie den gesamten Balken so nach links, dass er an die recht obere Kante des Dreiecks anschließt. Der farbige Übergang zwischen dem recht deckenden Weiß in der Mitte des Verlaufs und dem daneben liegenden Grau erzeugt die optische Rundung. Experimentieren ist nicht nur erwünscht, sondern gefordert.
Fünf Farbmarker bilden den Verlauf, der der Ecke die dreidimensionale Rundung verleiht
Wandeln Sie das „Licht“ in ein MovieClip namens „lichtMC“ um. Nun müssen Sie das passend zur Wackelbewegung des Dreiecks animieren. Auch hier hilft die Verschiebung des Mittelpunkts nach rechts unten. Um es kurz zu machen: Die Bewegung stimmt, wenn sich das untere Dreieck und das maskierte Licht synchron bewegen.
Nun müssen Sie noch einen Schatten erzeugen. Klicken Sie doppelt auf das Dreieck und kopieren Sie dessen grafische Grundform. Gehen Sie zurück in das MovieClip „eckeMC“ wo sie eben auch gearbeitet haben. Legen Sie eine neue Ebene an und bringen Sie diese nach ganz unten. Dort fügen Sie das kopierte Dreieck ein. Verschieben Sie es im ersten Frame leicht nach links unten, verändern Sie die Farbe in Schwarz mit einer Deckkraft von 60 Prozent. Setzen Sie ein Schlüsselbild in Frame 30 und eines in Frame 15. in diesem Frame ziehen Sie einfach die Spitze des Schattens ganz leicht nach rechts. So wird der Abstand zwischen der Ecke und dem Schatten größer, was den gewünschten optischen Effekt ergibt. Auf dieser Ebene machen Sie natürlich Form-Tweenings.
Das Scripting
Fast fertig. Kehren Sie zurück zu Szene 1. Erhöhen Sie die Filmgeschwindigkeit auf 25 Frames pro Sekunde. Erzeugen Sie eine Aktions-Ebene. Platzieren Sie in einem Schlüsselbild in Frame 1 folgendes Skript:
stop();
eckeMC.onRollOver = function() {
_root.play();
_root.eckeMC.gotoAndStop(1);
_root.maskeMC.gotoAndStop(1);
}
eckeMC.onPress = function() {
getURL("http://www.spiegel.de");
}
hintergrundMC.onPress = function() {
getURL("http://www.spiegel.de");
}
Sie sehen, wir haben das Hintergrundbild auch in ein MovieClip verwandelt, um es klickbar zu machen. Beim Klick verzweigt der Film auf eine beliebige HTML-Seite. Man könnte statt eines harten Schnitts an dieser Stelle auch das weitere Aufrollen der Ecke aktivieren, doch, damit das optisch plausibel wird, muss man den Film über die ganze Seite ziehen und das gibt bei unterschiedlichen Auflösungen Probleme bei der Skalierung.
In Frame 20 erscheint folgendes Script:
stop();
eckeMC.gotoAndStop(1);
maskeMC.gotoAndStop(1);
eckeMC.onRollOut = function() {
_root.play();
}
eckeMC.onPress = function() {
getURL("http://www.spiegel.de");
}
Und im letzten Frame der Skript-Ebene wird die Winke-Animation neu gestartet:
eckeMC.play();
maskeMC.play();
Die letzte Arbeit, die wir verrichten müssen, ist das Erstellen der Winke-Bewegung in der großen (im Screenshot grünen) Rechteck-Maske auf Szene 1. Die Animation innerhalb des MovieClips „maskeMC“ ist die Gleiche, wie innerhalb des Dreiecks, doch die exakte Synchronisation der Positionen benötigt etwas Übung, sonst scheint die HTML-Seite an Stellen durch, die eigentlich zugedeckt sein sollten. Ein gutes Hilfsmittel hierfür sind kleine Linien, die die Schnittpunkte des Dreiecks mit der Bühnenkante anzeigen und zwar während der Winke-Animation. Erstellen Sie hierfür eine eigene Ebene und passen Sie die Animation der großen Maske daran an. Wenn Sie die Striche nicht mehr brauchen, wandeln Sie die Ebene einfach zur Führungsebene um. Fertig.
P.S. Browsertesting ist bei derartigen Mischkonstruktionen unverzichtbar. Unser Beispielfilm funktioniert wunderbar auf Safari/Mac, Firefox/WinXP und IE/WinXP. Der HTML-Content in der Seite ist ebenfalls in weitere DIV-Container eingebettet. ™
Links zum Thema:
- Fertiges Peel-Element zum Einbauen
Erstveröffentlichung 05.08 .2008
