Mit Flash was Interaktives zaubern

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.

  1. Alternatives Interface-Design
  2. Teil 2: Alternatives Interface-Design
Alternatives Interface-Design

© Archiv

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

Alternatives Interface-Design

© Archiv

Das Häkchen ist ein Movieclip mit darin enthaltener Farbanimation.

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.

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​".