In den beiden ersten Teilen dieses Tutorials haben wir gelernt, wie die Bewegungen des Mausrads zu ermitteln und darüber Aktionen zu steuern sind. Im dritten und letzten Teil des Beitrags kommen wir zu den wirklich interessanten Effekten: Wir zoomen eine Produktbox auf einer virtuellen 3D-Ebene.

Die Website von Ricardo Dias hat in der Webdesigner-Szene viel positive Resonanz erhalten. Die Arbeiten des brasilianischen Designers gleiten als Screenshots 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 Paralax-Verschiebung, wenn sich die Maus über dem Bildschirm bewegt.

Sehenswerte Mausradnavigation auf  kasulo

Feinschliff für unser begonnenes Projekt

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.

Am Einfachsten bereiten Sie die Spiegelung im Bildbearbeitungsprogramm Ihrer Wahl vor.

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 Schatle auf die Bühne und geben Sie Ihr wie vorhin den Instanznamen „bild“. Eine Hilfsebene mit Variablenanzeige kann auch nicht schaden. Die Variable, die es zu kontrollieren gilt, heißt „bild._xscale“.

Die Programmierung

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

import mx.transitions.*;

var position;
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
	var bewegungX = new  mx.transitions.Tween(bild, "_xscale",
mx.transitions.easing.Regular.easeOut, bild._xscale,bild._xscale-delta*10,20, false);
	var bewegungY = new  mx.transitions.Tween(bild, "_yscale",
mx.transitions.easing.Regular.easeOut, bild._yscale,bild._yscale-delta*10,20, false);
position=bild._xscale;
}
Mouse.addListener(mouseListener);

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 Multiplikaiton von „delta“ sind stark abhängig von Bühnen- und Objektgröße.

Liegt der Registrierungspunkt außerhalb des Bildes, bewegt es sich diagonal

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 Script:

import mx.transitions.*;
import flash.filters.*;
var Unscharf:BlurFilter = new BlurFilter(5,5,2);
bild.filters = [Unscharf];

var position;
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
	var bewegungx = new  mx.transitions.Tween(bild, "_xscale",
mx.transitions.easing.Regular.easeOut, bild._xscale,bild._xscale-delta*10,20, false);
	var bewegungy = new  mx.transitions.Tween(bild, "_yscale",
mx.transitions.easing.Regular.easeOut, bild._yscale,bild._yscale-delta*10,20, false);
Unscharf.blurX = 15-(bild._xscale/5);
Unscharf.blurY = 15-(bild._xscale/5);
bild.filters = [Unscharf];
position=bild._xscale;
}
Mouse.addListener(mouseListener);

Die Ausgangswerte 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.

this.onEnterFrame = function(){
if (bild._xscale<0){
bild._visible=0;
}else{
bild._visible=1;
}

Fertig