Neues Interface mit Flash

Wir benutzen das Mausrad wie selbstverständlich. Das Scrollen von Listen und Webseiten geht nicht mehr ohne und wenn doch eine Software diese Funktion mal nicht unterstützt, ist der "Griff" zum kleinen Scrollbalken auf der rechten Seite stets ein Ärgernis. Windows 7 zum Beispiel hat die Eigenschaft, gelegentlich die Fenster neu geöffneter Programme zwar oben anzuzeigen aber dennoch nicht ins Visier zu nehmen, sodass unmittelbares Scrollen nicht funktioniert.Der Flash-eigene Scrollbalken im Rahmen der Interface-Komponenten scrollt von ganz alleine. Doch mithilfe weniger Zeilen Code können Sie alles zum Scrollen bringen, was Sie wollen. Sie können eine Bildergalerie mit dem Mausrad durchscrollen. Sie können eine Spielfigur steuern (denken Sie beispielsweise an einen Spieleklassiker wie Pong) und natürlich können Sie auch Dokumente navigieren. Das Heraus- und wieder Hineinzoomen wird zur Standardnavigationsform für das mobile Web.

Überraschend simpel

So weit sind wir noch nicht, wir werden uns aber in diesem Workshop dieser Idee annähern. Wir beginnen mit einem einfachen Panoramafoto, dass nach rechts und links gescrollt werden kann, um alles zu sehen. Beginnen Sie bei der Vorbereitung mit einem Bildmotiv mit Panorama-Charakter. Ein Digitalfoto aus dem Urlaub mit etwas Küstenlinie oder Skyline könnte das sein. Öffnen Sie das Bild im Bildbearbeitungsprogramm und beschneiden Sie es nur in der Höhe. Bei den gängigen Kameraauflösungen heute, wird das Bild vielleicht 3.000 Pixel breit sein und lässt sich herrlich scrollen.

Importieren Sie das Bild in Flash und wandeln Sie es sofort in ein MovieClip um. Tragen Sie als Symbolnamen mc_bild ein. Nach der Bestätigung gehen Sie sofort rechts oben in den Eigenschaftsinspektor und geben dort den Instanznamen ein. Wie üblich, wenn ein Objekt nur einmal im Film verwendet wird, nehmen wir hier ebenfalls mc_bild, um keine Probleme mit Falschschreibung zu bekommen.Nun legen Sie eine neue Ebene an und platzieren dort ein Textfeld. Wandeln Sie dieses Textfeld zu einem dynamischen Textfeld um. CS4- und CS5-Benutzer aufgepasst: Die Variablenverknüpfung befindet sich im Eigenschaftsinspektor ganz unten in den Optionen. Nicht mit dem Instanznamen verwechseln. Hängen Sie das Textfeld an die Variable position.Nun erstellen Sie eine weitere Ebene und platzieren folgenden Code ins ActionScriptfenster im ersten Frame:

var position;
var mouseListener:Object = new
Object();
mouseListener.onMouseWheel = function
(delta) {
mc_bild._x += delta;
position = mc_bild._x;
}
Mouse.addListener(mouseListener);

In der ersten Zeile definieren wir die Variable für die X-Position. Das Textfeld selbst benötigen wir nur zu Kontrollzwecken. Dann wird ein neues MouseListener-Objekt erstellt und mit dem vordefinierten Listener MouseWheel verknüpft. Dieser bringt den Parameter delta mit. Der gibt einen positiven oder negativen Wert zurück, je nachdem ob das Mausrad nach vorne oder hinten gedreht wird.Dieses Delta setzen wir unmittelbar in X-Koordinatenbewegung des Bildes um. Mit der letzten Zeile wird der Listener geladen. Vor allem bei größeren Projekten ist es wichtig, dass der Flash-Film nicht zu früh auf Ereignisse zugreifen kann, sonst drohen Bedienungsfehler.Testen Sie den Film. Sie werden sehen, dass sich das Bild je nach Scrollbewegung nach rechts oder links bewegt. Allerdings müssen Sie vorher einmal in den Film klicken, um ihn zu fokussieren. Variieren Sie die Schrittgröße, indem Sie delta zum Beispiel mit 2 multiplizieren. Oder ändern Sie die zu scrollende Eigenschaft von _x auf _alpha oder _yscale und _xscale für einen Zoom.

Mausrad-Navigation

So einfach die Implementierung der einfachen Mausradsteuerung war, so plump ist sie auch. Das Bild kann unendlich weit nach rechts verschoben werden, auch wenn es längst nicht mehr auf der Bühne zu sehen ist.

Wir benötigen also zunächst eine Grenze für die Bewegung. Und hier kommt das Textfeld mit der Variablenanzeige ins Spiel. Notieren Sie sich die X-Koordinate, sobald das Bild die Bühne nach links oder rechts verlässt. Das sind natürlich die Bewegungsgrenzen.Da wir eine Schrittgröße delta gehen und diese von der Justierung der Maus abhängt (delta beschreibt, wie viel Zeilen geschaltet werden sollen für einen Rastensprung im Mausrad), dürfen wir keinesfalls zu nahe an das Limit herangehen, sonst könnte die Grenze übersprungen werden und man würde erneut den Hintergrund zu Gesicht bekommen.Eine einfache if-Abfrage, die eine Bewegung nur zulässt, wenn die aktuelle Koordinate kleiner (oder größer) als das Limit ist, genügt also nicht. Wir müssen zusätzlich die Richtung der Bewegung erfassen. Um es anders auszudrücken: In dem Moment, in dem das Bild bei einer Linksbewegung das Limit erreicht, ist nur noch eine Rechtsbewegung zulässig. Ansonsten bleibt das Bild stehen. Zur Messung der Bewegungsrichtung taugt wunderbar delta selbst, denn das ist je nach Mausraddrehung entweder negativ oder positiv.Das neue Script sieht also wie folgt aus:

var position;
var mouseListener:Object = new
Object();
mouseListener.onMouseWheel = function
(delta) {
if((mc_bild._x<-1)and(delta<0)){
mc_bild._x += 30;
position = delta;
}else if((mc_bild._x>-1)and
(delta<0)){
mc_bild._x = mc_ bild._x;
}else if ((mc_bild._x>-990)and
(delta>0)){
mc_bild._x -= 30;
position = delta;
}else if((mc_bild._x<-990)and
(delta>0)){
mc_bild._x = mc_bild._x;
}
}
Mouse.addListener(mouseListener);

Wir bilden vier Fälle:Wir bilden vier Fälle:

• Bewegung nach rechts und Limit nicht erreicht: Bewegung geht weiter
• Bewegung nach rechts und Limit erreicht: Bewegung stoppt
• Bewegung nach links und Limit nicht erreicht: Bewegung geht weiter
• Bewegung nach links und Limit erreicht: Bewegung stoppt

Statt des delta-Sprungs setzen wir nun den festen Wert 30 ein. Testen Sie den Film: Die Bewegung stoppt am jeweiligen Rand des Bildes. Aus Usability-Perspektive wäre eine solche unerklärte Veränderung des Interfacing zweifellos heikel. Im vorliegenden Fall kann der Nutzer aber auf Lernerfahrung aus anderen Anwendungen zurückgreifen. Wer es ganz genau machen will, blendet eine Miniatur des Bildes am unteren Rand ein und zeigt mit einem animierten Rechteck, welcher Ausschnitt gerade beleuchtet wird.

Weiche Bewegung

Mithilfe eines recht simplen Tricks lässt sich das etwas spröde Interfacing deutlich weicher gestalten. Statt der festen Pixelschritte, die notwendigerweise ein Ruckeln verursachen, verwenden wir ab sofort ein kleines gescriptetes Tweening für die Bewegung. Hier müssen Sie etwas mit den Limits ausprobieren, da bei sehr schnellem Scrollen ansonsten der Rand erneut überfahren wird. Setzen Sie an den Kopf der Programmierung:

import mx.transitions.*;

und dann ersetzen Sie die Bewegung:

mc_bild._x -= 30;

durch Folgendes:

var bewegung = new mx.transitions.
Tween(mc_bild, "_x",
mx.transitions.easing.Regular.
easeOut, mc_bild._x,
mc_bild._x+210,20, false);