Alternatives Interface-Design
Mit den Interaktionsmöglichkeiten von Flash eröffnen sich neue Chancen für innovative Interfaces. Immer mehr Webdesigner wagen den großen Schritt.
- Alternatives Interface-Design
- Teil 2: Alternatives Interface-Design
Die Websites und Banner, die versuchen, neue Wege im Interfacing zu gehen, häufen sich. Coke arbeitet in einer Kampagne mit allen Techniken gleichzeitig und steuert eine künstlerische Anwendung mit Tastatur, Maus, Webcam und Mikro. Das italienische Projekt dontclick.it konterkariert bewusst eta...
Die Websites und Banner, die versuchen, neue Wege im Interfacing zu gehen, häufen sich. Coke arbeitet in einer Kampagne mit allen Techniken gleichzeitig und steuert eine künstlerische Anwendung mit Tastatur, Maus, Webcam und Mikro. Das italienische Projekt dontclick.it konterkariert bewusst etablierte Benutzungsgewohnheiten: Der User darf nicht klicken, sondern nur die Maus darüber halten, um Menüs zu öffnen oder gar fertige Formulare abzuschicken. Entscheidend für das Entstehen eines intuitiv reagierenden Interface ist das tiefere Verständnis für die unterschiedlichen Mausreaktionen. Rollover ist in der Regel ein Übergangszustand. Auf 99 Prozent aller Websites weist er darauf hin, dass ein Element klickbar ist oder zeigt Zusatzinformationen als Tooltip an.
Für unsere Anwendung wird es zwei Formen des Rollover geben. Einen flüchtigen und einen endgültigen. Letzterer entsteht, wenn der Nutzer den Mauszeiger längere Zeit über der Aktionsfläche verweilen lässt. Der reine Rollover erzielt also eine indirekte Wirkung, indem er einen Countdown startet und an dessen Ende erst die eigentliche Funktion.
Actiongeladen
Starten Sie einen neuen Film. Zeichnen Sie einen breiten Farbbalken quer über die Arbeitsfläche, machen Sie ein Movieclip daraus und nennen Sie es farbe sowohl als Symbol- wie auch als Instanzname. Klicken Sie doppelt auf die Farbfläche. Entwerfen Sie eine kleine Farbanimation zu einem anderen Farbton.
Kopieren Sie alle Frames der Animation, fügen Sie sie nach dem letzten Schlüsselbild ein, markieren Sie die Frames erneut und wählen Sie aus dem Kontextmenü: Bilder umkehren. Die Animation läuft nun vor- und rückwärts.
Setzen Sie im ersten und im mittleren Frame folgende Programmierung:
stop();
_root.inhalt.button.onRollOver =
_root.oeffnen;Der zweite Befehl dient dazu, den MouseOver beim Button wieder zu erlauben, den wir während der Animation verbieten.
Der Rollover-Button
Kehren Sie zurück zur Szene 1. Schreiben Sie einen auffordernden Text wie: Bitte berühren rechts oben über den Farbstreifen auf einer eigenen, neuen Ebene. Dieser Text wird in ein Movieclip namens inhalt verwandelt. Klicken Sie ihn doppelt an, um ihn zu bearbeiten. Wandeln Sie nun den Text in ein Grafiksymbol um. Es bekommt den Instanznamen button.
Auf einer neuen Ebene erstellen Sie ein Schlüsselbild im zweiten Frame. Dort schreiben Sie einen Text wie Verweilen Sie über diesem Symbol. Setzen Sie auch in diesem Movieclip zwei Stopps, nämlich im ersten Frame und im letzten.
Zeichnen Sie eine Checkbox und fügen Sie ein rotes Häkchen ein. Wandeln Sie beides zum Movieclip, geben Sie ihm den Instanznamen sign und klicken Sie doppelt darauf. Kopieren Sie das Häkchen auf eine neue Ebene und färben Sie es dort grün. Eine Ebene höher sitzt ein einfaches Rechteck unter dem grünen Haken. Das Rechteck wird zur Maske konvertiert. Es bekommt eine Animation in der es zum Schluss den Haken verdeckt. Im ersten Frame steht ebenfalls ein stop();. Im letzten erscheint in einem eigenen Schlüsselbild folgende Programmierung:
_root.zumachen();Die Programmierung
Damit sind die Vorarbeiten abgeschlossen. Der Rest ist Programmierung im ersten Frame von Szene 1. Fügen Sie alle folgenden Codezeilen zusammen.
var offen=0;
import mx.transitions.Tween;
import mx.transitions.easing.*;Statt die Position des Buttons per Tweening zu verändern, tun wir dies mit einer Tweeningklasse aus Actionscript. Die zweite Zeile lädt alle Verzögerungsvarianten in einem Rutsch (easing.*).
inhalt.button.onRollOver = oeffnen;Das ist der Auslöser der Aniimaationen.
inhalt.sign.onRollOver = function(){
inhalt.sign.play();}
inhalt.sign.onRollOut = function(){
inhalt.sign.gotoAndStop(1);}Diese Funktion löst die Farbveränderung bei unserem kleinen roten Häkchen aus. Verlässt der Mauszeiger den Haken, bevor er sich ganz gefüllt hat, so wird er wieder rot und sonst passiert nichts.
function oeffnen(){
if (offen==1){
delete inhalt.button.onRollOver;
inhalt.play();Wenn die erste Farbanimation stattgefunden hat, steht die Variable offen auf 1. Sobald dann ein Rollover auf dem Button ausgeführt wird, sperren wir diese Aktion, damit sie nicht versehentlich wiederholt wird. Durch den Play-Befehl erscheint der Bestätigungstext rechts vom Button.
}else{
delete inhalt.button.onRollOver;
var bewegung = new mx.
transitions.Tween(inhalt, "_x", mx.transitions.easing.Elastic.easeOut, inhalt._x, 10, 2, true);
var bewegung2 = new mx.
transitions.Tween(inhalt, "_y", mx.transitions.easing.Elastic.easeOut, inhalt._y, 110, 2, true);
offen=1;
inhalt.button.text="Touch
to close";Das ist die Startsequenz. Auch hier wird der Rollover sofort deaktiviert. Dann animieren wir das Movieclip inhalt. Die Klasse Elastic.easeOut erzeugt einen leichten Bounce-Effekt am Ende der Animation. Am Ende der Befehle sehen Sie die Parameter-Zielkoordinate und verfügbarer Zeitrahmen. Steht der letzte Parameter auf True, wird in Sekunden gemessen, sonst in Frames. Sodann wird die Variable offen verändert und wir ersetzen den alten Text im Button durch einen neuen.
bewegung.onMotionStopped
= function() { farbe.play();
}}}Eine herrliche Funktion, die es erlaubt, die nächste Animation erst nach Beendigung der ersten zu starten. Farbe.play() startet natürlich den Farbwechsel.
function zumachen(){
inhalt.gotoAndStop(1);
var bewegung = new mx.
transitions.Tween(inhalt, "_x", mx.transitions.easing.Elastic.easeOut, inhalt._x, 365, 2, true);
var bewegung2 = new mx.
transitions.Tween(inhalt, "_y", mx.transitions.easing.Elastic.easeOut, inhalt._y, 70, 2, true);
offen=0;
inhalt.button.text="Touch
to open";
bewegung.onMotionStopped =
function() { farbe.play();} }Achten Sie darauf, dass zumachen() erst nach dem Ablauf der Häckchen- Animation gestartet wird.
Die Webcam
Beim Einbinden einer Webcam in einen Flash-Film muss man eine Reihe von Aspekten beachten. Ein Flashfilm zeigt stets ein Dialogfenster an, sobald er versucht, auf Kamera oder Mikrofon zuzugreifen. Diese Dialogbox ist 215 Pixel breit und 138 Pixel hoch und bestimmt damit die Mindestmaße des Films.
Hinsichtlich der Erfassung und Umwandlung der Daten gibt es weitere Einschränkungen. Grundsätzlich ist es dem SWF-Film nicht erlaubt, Daten in größerem Umfang auf der Festplatte zu speichern. Das muss entweder eine AIR-Anwendung machen oder ein Server, der das aufgezeichnete File zum Download anbietet. Wir beschränken uns daher auf die reine Aktivität vor Kamera und Mikrofon.
