Mausradsteuerung

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.

image.jpg

© Internet Magazin

Sehenswerte Mausrad-Navigation auf www.kasulo.ws.

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.

import mx.transitions.*;
var position;
var mouseListener:Object = new
Object();
mouseListener.onMouseWheel = function
(delta) {
var bewegungX = new mx.transitions.
Tween(mc_bild, "_xscale",
mx.transitions.easing.Regular.
easeOut, mc_bild._xscale, mc_bild._
xscale-delta*10,20, false);
var bewegungY = new mx.transitions.
Tween(mc_bild, "_yscale",
mx.transitions.easing.Regular.
easeOut, mc_bild._yscale, mc_bild._
yscale-delta*10,20, false);
position= mc_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 Multiplikation von delta sind stark abhängig von Bühnen und Objektgröße.

image.jpg

© Internet Magazin

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

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

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.

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

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".