Fast alle PC-Benutzeroberflächen basieren auf dem Gedanken, einen Cursor zu bewegen und auf Objekte zu klicken. Auf diese Weise funktionieren Schaltflächen, Menüs, Kombinationsfelder, Listen und jede andere standardmäßige UI-Steuerung. Die Maus wird zum Positionieren des Cursors verwendet, und die Position des Cursors wird zum Ausführen einer Aktion verwendet.
Es ist ein Design-Paradigma, das gut funktioniert hat, aber in letzter Zeit haben neue Technologien wie Touchscreens und Bewegungssensoren (denke die Wii) die Vorstellung von der Verwendung einer Maus oder sogar eines Zeigers überhaupt auf dem Bildschirm in Frage gestellt.
Lange vor dem Fokus auf Touchscreens oder die Wii führten Programme wie der Opera-Webbrowser die Vorstellung von Mausgesten ein. Das Konzept war einfach: Anstatt die Position des Cursors zu verwenden, um die durchzuführende Aktion zu bestimmen, würde die Bewegung des Cursors selbst eine Aktion anzeigen. Indem Sie den Cursor in einer kreisförmigen Bewegung bewegen, würden Sie einen Webbrowser zum Aktualisieren auslösen. Wenn Sie es nach links verschieben, kehren Sie zum Seitenverlauf zurück, und wenn Sie es nach rechts verschieben, bewegen Sie sich vorwärts.
Für Flash-Entwickler gibt es eine kostenlose Mausgesten-Bibliothek, die diese Art der Interaktion mit sehr geringem Aufwand ermöglicht. Um zu zeigen, wie es verwendet wird, erstellen wir einen einfachen Videoplayer, der zum Ändern der Videowiedergabe statt der Tasten Mausgesten verwendet.
Schritt 1: Mausgestenbibliothek
Laden Sie die Mausgesten-Bibliothek von Didier Brun hier herunter (http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50540.aspx) und extrahieren Sie sie an einem geeigneten Ort.
Schritt 2: Neue Anwendung
Erstellen Sie eine neue Flex-Webanwendung, und fügen Sie der Liste der Erstellungspfade die Mausgestenbibliothek hinzu. Sie können auf die Buildpfad-Eigenschaft zugreifen, indem Sie in Flex Builder Projekt> Eigenschaften> Flex Build Path auswählen.
Schritt 3: FLV
Sie benötigen eine FLV-Videodatei, um die Anwendung mit zu testen. Die Demoversion des IMToo FLV-Konverters (http://www.imtoo.com/flv-converter.html) konvertiert kurze Videos aus nahezu allen Formaten in FLV. Wenn Sie nicht über eine Sammlung von FLV-Filmen verfügen, können Sie mit diesem Tool fast jedes kostenlose Video konvertieren, das Sie aus dem Internet herunterladen können. Ich habe eines der mit Vista gelieferten Demo-Videos für dieses Demo konvertiert.
Schritt 4: Anwendungsattribute
Sie müssen einige Attribute des Application-Elements in der MXML-Datei ändern. Hier haben wir Breite, Höhe, Hintergrundfarbe (backgroundGradientColors) und Transparenz (backgroundGradientAlphas) festgelegt. Außerdem haben wir die appComplete-Funktion so eingestellt, dass sie als Reaktion auf das applicationComplete-Ereignis aufgerufen wird. Dies gibt uns einen Einstiegspunkt in die Anwendung, wo die Mausgesten eingerichtet werden.
Schritt 5: mx: VideoDisplay
Fügen Sie das folgende mx: VideoDisplay-Element als untergeordnetes Element des mx: Application-Elements hinzu.
Das id-Attribut weist dem VideoDisplay einen Namen zu, auf den wir in ActionScript verweisen können.
Die Eigenschaften oben, unten, links und rechts definieren die Position des VideoDisplay.
Das autoPlay-Attribut ist auf false gesetzt, was bedeutet, dass das Video nicht sofort abgespielt wird.
Das Quellattribut zeigt auf den Speicherort der Videodatei. Wenn Sie über eine eigene FLV-Videodatei verfügen, müssen Sie dieses Attribut so ändern, dass es darauf verweist.
Das metadataReceived-Attribut verweist auf eine Funktion, die aufgerufen wird, sobald die Details des Videos von der VideoDisplay geladen wurden. Wir verwenden dies, um herauszufinden, wie lange das Video ist, sodass wir den Maximalwert des HS-Sliders ändern können.
Das playheadUpdate-Attribut zeigt auf eine Funktion, die beim Abspielen des Videos aufgerufen wird. Dies ermöglicht uns, die aktuelle Position der Videodatei zu verfolgen und den HSlider entsprechend zu aktualisieren.
Schritt 6: mx: HSlider
Fügen Sie das folgende mx: HSlider-Element als untergeordnetes Element des mx: Application Elements hinzu
Das id-Attribut weist dem VideoDisplay einen Namen zu, auf den wir in ActionScript verweisen können.
Die Eigenschaften oben, unten, links und rechts definieren die Position des VideoDisplay.
Das Änderungsattribut definiert eine Funktion, die aufgerufen werden soll, wenn der Benutzer die Position des Schiebereglers ändert.
Schritt 7: Schnittstelle
Sie sollten jetzt eine GUI haben, die wie unten dargestellt aussieht.
Schritt 8: mx: Skript
Fügen Sie ein mx: Script-Element als untergeordnetes Element von mx: Application hinzu. Dieses Element enthält den ActionScript-Code für unsere Anwendung.
Schritt 9: Pakete importieren
Wir müssen mehrere Pakete importieren. Dies geschieht im mx: Script-Element. Drei Klassen aus dem Paket mx.events, MetadataEvent, SliderEvent und VideoEvent, werden als Parameter in Ereignislistenerfunktionen verwendet. Das com.foxaweb.ui.gesture-Paket enthält die Klassen aus der Mausgestenbibliothek.
Eine Anzahl von Konstanten wird dann definiert. Die VIDEO_STEP-Konstante definiert, um wie viel Zeit die aktuelle Position des Videos verschoben wird, wenn wir vorwärts oder rückwärts gehen. Alle anderen Zeichenfolgen definieren die Namen von Aktionen, die mit Mausgesten verknüpft werden. Im Allgemeinen ist es ratsam, Zeichenketten Konstanten zuzuordnen, wenn sie als Identifikation verwendet werden, da der Compiler damit Rechtschreibfehler aufheben kann if (action == SETP_FORWARD), anstatt Probleme zur Laufzeit mit falsch geschriebenen Strings wie if (action == "setp_forward").
Die letzte zu definierende Variable ist ein Verweis auf ein MouseGesture-Objekt. Dieses Objekt implementiert die Logik für die Mausgesten.
private var mg: MouseGesture = null;
Schritt 12: Neue Funktion
Fügen Sie eine neue Funktion mit dem Namen appComplete hinzu. Dies ist die Funktion, die wir dem Attribut applicationComplete im Element mx: Application zugewiesen haben. Hier werden die Mausgesten initialisiert.
Zuerst erstellen wir ein neues MouseGesture-Objekt. Dem MouseGesture-Konstruktor muss eine Referenz an die Bühne übergeben werden, um auf Mausereignisse zu reagieren.
mg = neue MouseGesture (this.stage);
Als Nächstes definieren wir eine Reihe von Mausgesten. Eine Mausgeste ist als eine Folge von Mausbewegungen definiert, wobei Zahlen die Bewegungsrichtungen gemäß der Abbildung unten darstellen. Alle Mausgesten beginnen mit dem Klicken der linken Maustaste und enden mit dem Loslassen der Taste.
Für eine einfache Geste, bei der die Maus in einer geraden Linie bewegt wird, verwenden wir eine Zeichenfolge mit einer einzelnen Zahl. Die "Spiel" -Mausgeste ist hier definiert als Mausbewegung in eine Richtung, rechts, die durch die Ziffer 0 dargestellt wird.
mg.addGesture (PLAY, "0");
Ebenso werden die Mausbewegungen "Stopp" und "Pause" als Mausbewegungen nach unten und links definiert.
Die Mausgeste "step_forward" ist komplexer. Sie wird als eine Halbkreis-Mausbewegung definiert, die links beginnt und dann über und nach rechts bewegt wird. Der rote Pfeil zeigt den Beginn der Bewegung.
Diese Bewegung wird durch die Zeichenfolge "67012" definiert. Sie können sehen, wie diese Zeichenfolge abgeleitet wird, indem Sie die Bewegung der Maus mit den Zahlen abgleichen, die diesen Bewegungen zugewiesen sind. Wir bewegen uns aufwärts (6), diagonal nach oben und rechts (7), links (0), diagonal nach unten und rechts (1) und dann nach unten (2)..
mg.addGesture (STEP_FORWARD, "67012");
Das "step_backward" wird auf dieselbe Weise definiert, nur diesmal ist es eine Halbkreis-Mausbewegung, die rechts beginnt und dann über und nach links bewegt wird.
mg.addGesture (STEP_BACKWARD, "65432");
Wir weisen dann die matchHandler-Funktion zu, die aufgerufen werden soll, wenn eine Mausgeste erkannt wurde.
Die MatchHandler-Funktion wird aufgerufen, wenn eine Mausgeste erkannt wurde. Der Ereignisparameter enthält eine Eigenschaft namens datas, die mit einer der Konstanten übereinstimmt, die wir den Mausereignissen in der Funktion appComplete zugewiesen haben. Abhängig von der erkannten Mausgeste führen wir bestimmte Aktionen auf dem VideoDisplay aus. Die Spiel-, Stopp- und Pauseaktionen sind alle recht einfach. Mit den Aktionen step_forward und step_backward erhöhen oder verringern wir die playheadTime -Eigenschaft von VideoDisplay, wodurch das Vorwärts- oder Rückwärtsspringen bewirkt wird.
private Funktion matchHandler (event: GestureEvent): void switch (event.datas) case PLAY: this.videoPlayer.play (); brechen; Fall STOP: this.videoPlayer.stop (); brechen; case PAUSE: this.videoPlayer.pause (); brechen; case STEP_FORWARD: var newFowardTime: Number = this.videoPlayer.playheadTime + VIDEO_STEP; while (newFowardTime> this.videoPlayer.totalTime) newFowardTime = this.videoPlayer.totalTime; this.videoPlayer.playheadTime = newFowardTime; brechen; case STEP_BACKWARD: var newBackwardTime: Number = this.videoPlayer.playheadTime - VIDEO_STEP; if (newBackwardTime < 0) newBackwardTime = 0; this.videoPlayer.playheadTime = newBackwardTime; break;
Schritt 15: HSlider
In dieser Demo wird die Videowiedergabe mithilfe von Mausgesten geändert. Es kann jedoch auch ein HSlider verwendet werden. Die MetadataReceived-Funktion wird aufgerufen, sobald VideoDisplay die Metadaten geladen hat, die die Gesamtlänge des Videos enthalten. In dieser Funktion setzen wir den maximalen Wert des Schiebereglers auf die Gesamtlänge des Videos. Wir aktivieren dann den Schieberegler - bis wir wissen, wie lange das Video ist, kann der Schieberegler nicht verwendet werden, um die Position festzulegen.
Die Position des Schiebereglers muss mit der aktuellen Wiedergabeposition des Videos synchron sein. Die Funktion playHeadUpdate wird in regelmäßigen Abständen vom VideoDisplay aufgerufen. Hier setzen wir den Wert des HSliders auf die playheadTime des VideoDisplay.
Mit dem Schieberegler können Sie auch die aktuelle Wiedergabeposition des Videos ändern. Hier machen wir die umgekehrte Funktion der Funktion playHeadUpdate und setzen die playheadTime des VideoDisplay auf den Wert des HSlider.
Wenn Sie die Anwendung laden, sollten Sie die Videodatei sehen. Da wir das autoPlay-Attribut des VideoDisplay-Objekts auf false setzen, wird das Video angehalten und das erste Bild angezeigt.
Klicken Sie mit der linken Maustaste, bewegen Sie die Maus nach links und lassen Sie die Taste los. Das Video sollte wiedergegeben werden. Klicken Sie auf, bewegen Sie die Maus nach unten und lassen Sie sie los. Das Video sollte angehalten werden. Klicken Sie auf, bewegen Sie die Maus in einem oberen Halbkreis von links nach rechts und lassen Sie sie los. Das Video sollte eine Sekunde vor dem Sprung überspringen.
Ein weiterer Vorteil von Mausgesten besteht darin, dass keine anderen Benutzeroberflächen-Steuerelemente mehr erforderlich sind. Dies kann ein großer Vorteil sein, wenn der Platz auf dem Bildschirm minimal ist (wie bei Bannerwerbung). Sie können sie sogar für die Werbespiele "Füttere den Affen" oder "Die meisten Klimmzüge" verwenden.
Mausgesten sind in Flash sehr einfach zu implementieren und bieten eine intuitive Möglichkeit, mit einem PC zu interagieren. Mit nur wenigen Zeilen Code können Sie die Interaktion der Benutzer mit Ihrer Anwendung neu definieren und den Bildschirmbereich freigeben, der für traditionellere UI-Komponenten reserviert wurde.
Danke fürs Lesen, ich hoffe, Sie haben etwas gelernt!
Share
Accentsconagua
