Mausrad-Zoom

Die Parameter in der Tweening-Klasse gliedern sich wie folgt:Zu tweenendes Objekt, zu tweenender Parameter, Easing (Abbremsen), Ausgangswert (das ist stets die aktuelle Koordinate), Endwert (-210 für die Bewegung nach rechts), Zeitwert, Zeiteinheit (false=Frames, true=Sekunden).Beim Easing stehen folgende Varianten zur Verfügung: easeIn, easeOut, easeInOut, easeNone. EaseOut, das Abbremsen am Ende ist die wichtigste. Die Parameter für die Bewegung sind: Strong, Back, Elastic, Regular, Bounce, None. Bounce erzeugt den einmaligen "Anschlaghüpfer", Bounce das vom iPhone bekannte "Einpendeln".

Mausrad-Zoom

Die Website von Ricardo Dias hat in der Webdesigner-Szene viel positive Resonanz erhalten. Unter www.kasulo.ws gleiten die Screenshots der Arbeiten des brasilianischen Designers auf einem blank polierten Tisch dem Nutzer entgegen. Letzterer steuert das Erlebnis per Mausrad und ein Zeitstrahl im unteren Bereich des Bildschirms indiziert, in welchem Jahr man sich gerade befindet. Neben der Mausradbewegung gibt es auch noch eine kleine Parallax-Verschiebung, wenn sich die Maus über dem Bildschirm bewegt.

Wir widmen uns nur der Mausradbewegung. Zur Vorbereitung benötigen Sie das Bild einer Schachtel, CD oder eben eine Grafik. Sie wollen auf der Oberfläche des Tisches eine Spiegelung anzeigen, um ihm Glanz zu verleihen.Da die Farbe des Tisches sich dynamisch ändern wird, muss die Spiegelung schrittweise transparent werden. Das lässt sich am besten mit einem Bildbearbeitungsprogramm wie Photoshop herstellen. Montieren Sie dort einfach die Schachtel und ihr vertikal gespiegeltes Pendant zusammen und radieren Sie von unten mit einer ganz geringen Deckkraft (10 Prozent) das untere Ende der Spiegelung weg. Da die Spiegelung näher beim Nutzer ist, als der Gegenstand selbst, wird sie nach unten hin ganz leicht breiter.

Setup

Im Gegensatz zu den vorigen Übungen benötigen wir einen Hintergrund, der etwas Perspektive erzeugt. Das geht recht einfach. Erzeugen Sie zwei Hintergrundebenen. Auf die untere platzieren Sie ein Rechteck, das die oberen zwei Drittel der Bühne bedeckt. Das füllen Sie mit einem radialen Verlauf von Weiß nach Grau. Den Verlauf vergrößern Sie mit dem Werkzeug Verlauf transformieren (unter dem Skalieren-Werkzeug) und platzieren den Mittelpunkt etwas unter Bühnenmitte. Wählen Sie das Rechteck aus und kopieren Sie es.Auf der nächst höheren Ebene fügen Sie das Rechteck wieder ein und verkleinern es so, dass es von der Unterkante bis kurz unter die Bühnenmitte ragt. Dann nehmen Sie erneut das Werkzeug Verlauf transformieren und stauchen den Verlauf zu einer sehr breiten aber flachen Ellipse. Das genügt bereits, um eine Perspektive herzustellen.Nun bringen Sie Ihre Schachtel auf die Bühne und geben Sie ihr wie zuvor den Instanznamen mc_bild. Eine Hilfsebene mit Variablenanzeige kann auch nicht schaden. Die Variable, die es zu kontrollieren gilt, heißt mc_bild._xscale.

Die Programmierung

Auf einer eigenen Aktionsebene platzieren Sie folgendes Skript, das dem aus dem vorigen Workshop stark ähnelt.

Statt den Parameter X-Koordinate zu modifizieren, verändern wir nun die beiden Skalierungsparameter in X- und Y-Richtung. Die genauen Werte für die Multiplikation von delta sind stark abhängig von Bühnen und Objektgröße.

Damit das Objekt seine Skalierung entlang der Tischfläche macht, muss der Registrierungspunkt der Bildgrafik ganz leicht über der Verbindungsstelle zwischen Schachtel und Spiegelung liegen. Das ganze Movieclip wird dann am Anfang so platziert, dass dieser Registrierungspunkt etwas über dem künstlichen Horizont liegt.

Testen Sie den Film. Die Wirkung der Scrollbewegung ist bereits erstaunlich gut. Wenn Sie die Perspektive noch verstärken wollen, können Sie entweder ein Gitterraster auf den Tisch legen, das sich strahlenförmig auf eine (im Unendlichen befindliche) Mitte ausrichtet. Oder Sie platzieren die Box einfach seitlich neben dem Registrierungspunkt, dann fliegt sie letztlich am Nutzer vorbei.

Etwas Unschärfe bitte

Damit die Wirkung noch stärker ist, zeichnet Dias Objekte im Hintergrund zusätzlich unscharf. Das ist ein Leichtes mit den eingebauten Filtern von Flash. Ergänzen Sie jetzt noch die roten Zeilen zu Ihrem Skript:

Die Parameter für den Unschärfefilter lauten (BlurX, BlurY, Qualität). Die Werte für Blur liegen so zwischen 15 und 0. Die Qualität mit dem Wert 3 wäre zwar besser, ist aber hier nicht nötig.Der Umweg über das Array Unscharf ist nötig, damit die Übergabe der Werte nicht die Integrität verliert. Sonst könnte es zu hässlichen optischen Verzerrungen kommen.Zum Schluss fügen wir noch eine kleine Funktion ein, die das Clip ausblendet, sobald eine 0-Skalierung erreicht wird.