Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Interface Design
Code

Verwenden des Kinect zur Steuerung des Flash: Eine Einführung

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Ich bin sicher, dass Sie bereits von der Kinect von Microsoft gehört haben, der revolutionären neuen Technologie, die die menschliche Form erkennt und Ihnen ermöglicht, Spiele und Apps damit zu steuern.  Als der Kinect veröffentlicht wurde, gab es große Neuigkeiten darüber, nicht was er konnte, sondern was Entwickler damit machten.  In diesem Tutorial lernen Sie, wie kann man ein Pong-Spiel erstellen, das durch Bewegen der Hände gesteuert werden kann, und eine Bildergalerie, die im Stil des Minderheitsberichts navigiert werden kann - alles im Flash Player des Browsers ohne Treiber, wenn Sie auf dem Mac sind.

Die Kinect wurde innerhalb weniger Wochen gehackt und die Entwickler begannen damit, andere Dinge als die Xbox 360 zu steuern.  Das war riesig, plötzlich wurde der Traum jedes Nerds, diese berühmte Szene aus dem Minderheitenbericht zu leben, lebendig.  Aber für uns Flash Devs konnten wir uns nicht auf die Action einlassen, ohne C++ lernen zu müssen.  Das macht es schwierig für jemanden wie mich, der nur Spiele damit machen will.

Nun, zum Glück für uns, können wir jetzt, dank etwas namens TUIO und einigen sehr netten Entwicklern, die Kinect-Erkennung haben, die Daten über TUIO ausströmen lassen.

Diese Beschreibung von TUIO wird direkt für ihre Website tuio.org übernommen:

TUIO ist ein offenes Framework, das ein gemeinsames Protokoll und API für greifbare Multitouch-Oberflächen definiert.  Das TUIO-Protokoll ermöglicht die Übertragung einer abstrakten Beschreibung von interaktiven Oberflächen, einschließlich Berührungsereignissen und materiellen Objektzuständen.  Dieses Protokoll codiert Steuerdaten von einer Tracker-Anwendung (z. B. basierend auf Computervision) und sendet sie an irgendeine Client-Anwendung, die in der Lage ist, das Protokoll zu decodieren.

Das ist eine ziemlich Beschreibung.  Im Grunde erlaubt es die Dekodierung von Touch-Interfaces wie Touch-Tabellen, durch Blob-Erkennung.  Was kluge Entwickler getan haben, ist die Kinect-Daten in "Blobs" umzucodieren, damit TUIO sie erkennen kann.  Von dort kann Flash die Daten mit Hilfe der nativen as3-Bibliotheken von TUIO lesen.

TUIO kann auch Gesten erkennen.  Das ist ein nettes Feature, da es Ihnen erlaubt, Dinge mit dem Kinect zu tun, als wäre es ein großer imaginärer Touch-Table.  Sie können Objekte verkleinern oder vergrößern, indem Sie eine größere, ausgefeiltere Version der Pinch-Geste verwenden, sie kann auch Swipe- und Touch-Gesten regonisieren.

Für einfache Implementierungen können Sie jedoch mit Kinect plus TUIO die Hände nachverfolgen, was ich zuerst behandeln werde, da ich das zuletzt in meinem Projekt Spaced Out erfolgreich eingesetzt habe.

Spaced Out ist ein sehr experimentelles Spiel.  Es hat die Kinect verwendet, um die Hände der Spieler zu verfolgen, die im Spiel als Äquivalent einer Maus dienten.  Sie können die Position der Hände auf dem Bildschirm verfolgen und ihnen einen Cursor zuweisen.  In meinem Spiel habe ich dies in Verbindung mit einem Brainwave-Headset verwendet, um Feinde auf dem Bildschirm zu explodieren, indem ich die Hände des Spielers aufspüre und deren Konzentrationslevel lese.

Sie können hier ein Video von all dem in Aktion sehen:
Spaced Gameplay

Spaced Out Gameplay von Jon Reid auf Vimeo.


Verschiedene TUIO-Tracker

Es gibt jetzt ein paar verschiedene TUIO-Tracker für die Kinect.  Ich werde kurz erklären, was jeder in einer Minute macht, aber alle haben ihre Vorteile und Anwendungen für verschiedene Gelegenheiten.  Es ist ein großer Vorteil für uns, die Freiheit zu haben, zu entscheiden, welche wir verwenden können.

Das Tolle an TUIO ist, dass alle denselben AS3-Code verwenden, den ich Ihnen heute zeige.  Für verschiedene Zwecke können Sie also einfach einen anderen TUIO-Tracker verwenden und Ihr Spiel oder Ihre App muss nicht neu geschrieben werden.

Der Nachteil der TUIO-Tracker für das kinect ist, dass sie in der Regel nur Mac sind.  Das ist auf Treiberprobleme zurückzuführen, als Kinect zum ersten Mal gehackt wurde.  Ich bin sicher, dass im Laufe der Zeit mehr Entwickler TUIO-Tracker für Windows veröffentlichen werden, besonders seit das offizielle Microsoft SDK für Kinect unter Windows veröffentlicht wurde.  Tatsächlich gibt es gerade einen TUIO-Client für Windows!  Aber es ist immer noch in der Beta und Sie können die Tiefe der Kamera nicht kontrollieren, also musste ich sehr weit hinten stehen, um es zur Arbeit zu bringen.  Es ist nicht so einfach zu bedienen wie die Mac-Versionen.

Der erste, der als TUIOKinect bekannt ist, verfolgt Blobs, die er als Hände definiert.  Ich persönlich finde das großartig, da es vom Benutzer keine Einrichtung oder Kalibrierung benötigt.  Ein Spieler kann einfach zu deinem Spiel gehen und es sofort benutzen.  Der Nachteil ist nicht genau wissen, was eine Hand ist, es ist nur zu erraten.  Wenn Sie also zu nah am Kinect stehen, könnte es denken, dass jeder Teil von Ihr Ihre Hand ist.  Nur ein kleines Problem beim Arbeiten mit der Nullpunktkalibrierung.


TuioKinect

Der zweite Tracker, OpenNI2TUIO, verfolgt das gesamte Skelett, um zu bestimmen, welcher Teil von Ihnen eine Hand ist.  Brilliantes, sehr genaues Tracking der Hände.  Dieser erfordert jedoch die "Superman"-Pose, also ist es gut für einzelne Apps, die Sie für längere Zeit verwenden, oder für solche, bei denen Sie eine genauere Erkennung der Hände benötigen.


OpenNI2TUIO

Die Windows-Version, wenn Sie daran interessiert sind, damit zu spielen, heißt Open Exhibits TUIO Kinect.  Ich habe das ziemlich schnell gelaufen; Sie müssen der mitgelieferten liesmich.txt folgen und einige Treiber installieren, aber es funktioniert nur.  Es gibt Ihnen nicht die gleiche Kontrolle über das, was es verfolgt wie die anderen beiden, aber es verfolgt, was es für Hände hält, genau wie die Mac-Version von TUIO kinect.  Aber Sie Windows-Jungs können auch mitspielen.

Windows TUIOKinect


Schritt 1: Herunterladen der Software

Für dieses Tutorial werde ich TUIOKinect verwenden, nur weil ich gerne an meinem Schreibtisch sitzen und trotzdem das Kinect benutzen kann.  Natürlich können Sie einen der anderen Tracker benutzen, aber wenn Sie mitgehen, wenn ich die Grundlagen behandle, dann wird hoffentlich ein anderer Tracker einfach und nett.

Laden Sie einen der Tracker von den obigen Links herunter, für Mac, die Tracker brauchen keine Installation und laufen sofort.  Unter Windows müssen Sie einige Treiber installieren.  Sie decken das in ihrer readme.txt ab, also werde ich hier nicht darauf eingehen.


Schritt 2: Laden Sie die Bridge herunter

Das Herunterladen von TUIO kinect ist nicht der einzige Schritt. Sie müssen diese Daten speziell an Flash senden.  Es gibt Bridge, die genau das tut und sehr einfach zu betreiben ist.  udp-flashlc-bridge von Georg Kaindl ist die Software, die ich heute verwenden werde.  Sie können das hier bekommen:

udp-flashlc-bridge

HINWEIS: Wenn Sie die Windows-Version ausführen, benötigen Sie diese nicht, da sie mit ähnlicher Software geliefert wird.


Schritt 3: Flash Bridge entpacken

Nachdem Sie das heruntergeladen haben, extrahieren Sie es zu einem Ordner wie Ihrem Desktop oder Ihrem Dokumentenordner, der leicht zu erreichen ist.  Ich sage das, weil wir diese Brücke über einen Terminalbefehl ausführen müssen.


Schritt 4: Benennen Sie den Ordner um

Benennen Sie den Ordner ohne Anführungszeichen in "flashBridge" um, nur weil der Standardname sehr lang ist.


Schritt 5: Führen Sie die Bridge aus

Lassen Sie uns das jetzt machen, wir können es jetzt starten und es wird für den Rest des Tutorials laufen.  Sobald es läuft, müssen Sie sich keine Sorgen mehr machen, es ist eine sehr stabile Software.

Öffnen Sie das Terminal und geben Sie Folgendes ein: Ich benutze den Desktop hier, aber ersetze ihn mit dem Ort, an dem Sie Ihren Ordner abgelegt haben:

Ihr Terminalfenster sollte nun zwei zusätzliche Zeilen anzeigen und bestätigen, dass es einwandfrei läuft.  Wenn das nicht der Fall ist, wird es Ihnen sagen, also stellen Sie sicher, dass Sie die letzten Schritte durchgegangen sind und bestätigen Sie, dass Sie ihnen genau folgen.

Es sollte ungefähr so aussehen:



Schritt 6: Laden Sie die benötigten Bibliotheken herunter

Laden Sie die neueste TUIO-Bibliothek von diesem Link herunter: TUIO-Bibliothek
Wenn Sie den Ordner entpacken, haben Sie zwei Ordner, von denen einer Demos ist, einer ist org.  Wir wollen nur den Org-Ordner.  Sie müssen es noch nirgends verschieben, ich komme gleich dazu, Sie müssen es nur dort bereit haben.

Sie müssen auch die GreenSock Tweening-Bibliothek, TweenMax herunterladen.  Sie können das hier finden: TweenMax.

Erstellen Sie einen neuen Ordner, in den wir unseren gesamten Code speichern.  Nennen Sie es KinectGame.  Sie müssen den Org-Ordner aus der TUIO-Bibliothek in diesen Ordner und auch den com-Ordner aus der TweenMax-Bibliothek kopieren.


Schritt 7: Starten des Codes

Downloade meinen Quellcode und öffne den Ordner KinectGameStart.  Sie werden eine FLA namens Main finden, die alle benötigten Assets enthält.  Kopieren Sie das in Ihren Build-Ordner und öffnen Sie es.


Geben Sie die Klassenbox Main ein und klicken Sie auf das Stiftsymbol.


Speichern Sie die Datei als Main.as.

Fügen Sie nun oben in Ihrer Datei, in die wir andere Klassen importieren, folgendes hinzu:

Das importiert nur die grundlegenden TUIO-Klassen, mit denen wir vorerst arbeiten.


Schritt 8: Variablen hinzufügen

Als nächstes fügen wir einige Variablen und Konstanten hinzu:

Diese behandeln nur die grundlegenden Parameter, um die Einrichtung unserer TUIO-Verbindung zu erleichtern.


Schritt 9: Die Konstruktormethode

Als Nächstes möchten Sie Folgendes in Ihre Konstruktormethode einfügen:

Sie möchten auch die folgende Zeile ändern:

Zu dem Folgenden:

Dadurch können wir Grafiken erstellen und die Listener-Funktion hinzufügen, so dass wir direkt auf die TUIO-Daten in dieser Klasse zugreifen können.

Im Moment war alles ziemlich einfach, aber auch nichts Spannendes ist passiert.  Lassen Sie uns das ändern, sollen wir? Beginnen wir mit dem Zugriff auf die Kinect-Daten.


Schritt 10: Erstellen einer Cursor-Klasse

Wenn wir unsere Hände in der Luft bewegen, wie es uns einfach egal ist, müssen wir etwas in Flash sehen, das uns zeigt, wo unsere Hände sind.  Es macht keinen Spaß, ein Spiel zu spielen, in dem man den Cursor nicht sehen kann.

Fürs Erste werden wir einfach eine einfache Klasse erstellen, die jedes Mal, wenn sie eine Hand findet, einen MovieClip zur Bühne hinzufügt.

Machen Sie weiter und erstelle eine neue ActionScript-Datei.  Rufen Sie den Cursor auf und speichern Sie ihn im selben Verzeichnis, in dem Sie Main.as gespeichert haben.



Kopieren Sie den folgenden Code und fügen Sie ihn in diese Klasse ein:

All dieser Code fügt einen Movieclip hinzu und ermöglicht Ihnen, ihn aus der Anzeigeliste zu löschen.  Ziemlich einfache Sachen.

Sie werden auch die moveTo-Funktion bemerken.  Wenn wir dien Aktualisierung in der Main.as-Klasse aufrufen, wird der Cursor um den Bildschirm bewegt und auf die neuen Koordinaten gebracht.  Es macht es nur ein bisschen schöner.


Schritt 11: Cursor zum Bildschirm hinzufügen

Jetzt, wo wir etwas auf dem Bildschirm hinzufügen müssen, können Sie die Fähigkeit, den Ball zum Bildschirm hinzuzufügen und dann entfernen, abhängig davon, ob sich Ihre Hände in oder außerhalb der Reichweite von Kinect befinden, programmieren.

Nun, das ist nicht allzu kompliziert, Sie müssen nur einige Funktionen in Ihrer Main-Klasse haben.  Diese nehmen die Daten von TUIO entgegen und weisen dann das Cursor-Objekt an, seine X- und Y-Position jedes Bild zu aktualisieren.

Das Aktualisieren der Position ist in der Datei Cursor.as für Sie bereits erledigt. Sie müssen lediglich angeben, wohin sie gehen soll.

Gehen Sie zurück in Ihre Main.as-Datei.

Kopieren Sie den folgenden Code nach der Konstruktormethode in Ihre Main.as-Datei.

Wenn Sie nun versuchen, es so auszuführen, wie es ist, erhalten Sie eine Handvoll Fehler, die sagen, dass einige zusätzliche Funktionen fehlen.  Das liegt daran, dass die TUIO-Bibliothek die Verwendung aller verschiedenen Tracker-Ausgabemethoden von Cursor zu Blobs erlaubt.  Was wir tun müssen, ist eine Datei in TUIO zu bearbeiten, so dass wir nur diese drei Funktionen benötigen.

In der org-Ordner finden Sie den Ordner tuio.  Öffnen Sie in diesem Ordner die Datei ITuioListener.as


Was Sie tun müssen, ist die folgenden Zeilen zu kommentieren:

Und jetzt speichern Sie die Datei.

Es sollte ungefähr wie folgt aussehen:


Sie können die Datei jetzt ausführen, aber Sie werden sehen, dass Sie nichts steuern können.  Das ist okay; Führen Sie TuioKinect aus, müssen Sie die weite Schwelle so einstellen, dass TuioKinect bei ausgestreckten Händen so aussieht:


Als vage Anleitung setze ich mich etwa einen halben Meter von meiner Kinect entfernt, und ich muss meine Fernschwelle auf 90 setzen.

Wenn das eingestellt ist, sollten Sie in der Lage sein, Kugeln in der Flash-Datei auf dem Bildschirm zu sehen, wo Ihre Hände sind!  Fantastisches Zeug, Sie steuern eine Flash-Datei mit Ihten Händen!  Stellen Sie sich die Möglichkeiten vor, was Sie damit tun können.



Schritt 12: Pong Kinect

Nun, da Sie mit Ihrer Kinect die Kontrolle über Flash haben, was können Sie damit tun?  Nun, Sie können mit Kinect alle möglichen Dinge in Flash steuern.  Oft können Sie damit ein Objekt ersetzen, das mit der Maus oder der Tastatur gesteuert werden kann.

Was ich Ihr jetzt zeigen werde, wie man ein Pong-Spiel macht, bei dem beide Paddels Kinect-gesteuert sind.  Zwei Spieler Kinect Pong!  Ein tolles Partyspiel.

Um die Paddles zu steuern, müssen Sie den folgenden Code in die Funktion updateTuioCursor in Main.as einfügen; Das geschieht in der Methode try { } nach der hands.moveTo-Zeile:

Fügen Sie unter den anderen Variablendefinitionen Folgendes hinzu.

Fügen Sie außerdem der Konstruktormethode Folgendes hinzu:

Probieren Sie es aus, was Sie jetzt haben, ist ein Kontrollmechanismus, der das linke Paddel steuert, wenn sich Ihre Hand in der linken Hälfte des Bildschirms befindet, und das rechte Paddel steuert, wenn sich Ihre Hand in der rechten Hälfte des Bildschirms befindet.  Es ist eine sehr einfach zu bedienende und intuitive Möglichkeit, Pong mit zwei Spielern ohne Setup zu steuern, und genau darum geht es mir.


Ich habe hier nichts Besonderes gemacht, was ich getan habe, ist einen Check zu machen, um zu sehen, ob die Position des Balls auf dem linken Teil der Bühne oder auf der rechten Seite ist.  Es steuert dann das geeignete Paddel in Bezug auf Ihre Handbewegungen auf und ab.

Einige von Ihnen fragen sich vielleicht, worum es in der folgenden Zeile geht:

Das ist ein grundlegender Beschleunigungscode, den ich beim Lesen des brillianten Foundation Actionscript 3.0 Animationsbuches von Keith Peters gelernt habe.  Es wird nur berechnet, wo das Paddel in Relation zu sich selbst stehen soll. Dann wird ein Betrag hinzugefügt, die "Lockerungs"-Zahl, um den Übergang zu glätten.  Keith kann es viel besser erklären, als ich es kann, ich finde nur heraus, wo ich es hinbekomme.

Sie wundern sich vielleicht, warum Sie überhaupt einen Beschleunigungscode eingeben, wenn er ohne ihn ganz gut auf und ab geht.  Nun, das ist alles, um es netter zu machen, es fügt dem Paddel ein wenig Gewicht hinzu, nur um ihm ein Gefühl zu geben.  Nur eine kleine Spielerpsychologie, die Dinge, die Sie kontrollieren, fühlen Sie echt.


Schritt 13: Springende Bälle

Jetzt werde ich nicht durchgehen und erklären, was dieser Code tut, da ich kein Tutorial über die Herstellung von Pong mache. In diesem Tutorial geht es darum, ein Spiel mit einem Kinect zu steuern.

Dieser Code lässt einen Ball von den Paddeln und der Ober- und Unterseite des Bildschirms abprallen, den grundlegenden Komponenten, die für die Arbeit mit Pong benötigt werden.  Mit diesem und den Kinect-Steuerelementen können Sie selbst sehen, wie einfach es ist, ein Spiel mit Kinect zu betreiben.

Fügen Sie Ihren Variablen Folgendes hinzu:

Fügen Sie im Konstruktor Folgendes hinzu:

Fügen Sie nach dem Konstruktor Folgendes hinzu:

Was es tut, ist, dass es den Ball um die Bühne herum bewegt und von den Paddles und dem oberen und unteren Bildschirmrand springt.  Der Code legt auch den Startpunkt des Balls zufällig fest und fügt ihn der Bühne hinzu.  Um repetitiven Code zu sparen, füge ich dem Ball einen "Add-to-stage"-Hörer hinzu, sodass, wenn wir den Ball entfernen und ihn dann wieder zur Bühne hinzufügen, er der Bewegung des Balls eine zufällige Geschwindigkeit und Richtung zuweist.

Das funktioniert gut für unser kleines Spiel, und es verwaltet den Ball für uns.

Sie können weitermachen und das alles mit dem Kinect ausprobieren.  Der Ball springt zwischen den beiden Paddeln herum, die Sie mit Ihren Händen kontrollieren.  Ziemlich gut ay?


Wenn Sie damit Probleme haben und Fehler bekommen, schauen Sie sich meinen Quellcode im Ordner KinectGameFinished an.  Dort können Sie den gesamten Quellcode für dieses kleine Spiel sehen und es mit dem vergleichen, was Sie bereits haben.


Schritt 14: Gesten

Einige von Ihnen werden sich an den Film Minority Report erinnern, insbesondere an die Szene, in der Tom Cruise vor einem riesigen transparenten Display steht und mit ein paar Wellen seiner Hände Bilder und Daten über den Bildschirm bewegt.



Quelle: http://www.bitrebels.com/technology/kinect-hack-minority-report-user-interface-duplicated/

Schauen Sie sich dieses Interface an, es ist großartig.  Es ist sehr aufregend, dass das jetzt von uns in unseren eigenen Häusern gemacht werden kann.

Nun, mit Hilfe von TUIO, Kinect und Flash können Sie solche Apps erstellen.  Ich werde Ihnen zeigen, wie Sie eine einfache Foto-Viewer-App erstellen, mit der Sie die Fotos auf dem Bildschirm verschieben, sie mit einer "Pinch"-Geste größer und kleiner machen und die Bilder mit einer anderen Geste drehen können.

Es funktioniert ähnlich wie Gesten auf einem Touchscreen oder Touch-Tisch, aber größer und mit zwei Armen.  Tatsächlich nutzt der Code, den ich Ihnen zeige, den integrierten Gestenhandler in Flash.

Öffnen Sie in den Quelldateien, die ich für Sie bereitgestellt habe, den Ordner KinectGesturesStart.  Das enthält alle Dateien, mit denen Sie beginnen müssen.

Wenn Sie die Klasse Main.as öffnen, können Sie sehen, dass ich Ihnen eine Basisklasse bereitgestellt habe, die der Datei ähnelt, die wir zuvor für das kinect-Spiel erstellt haben.  Dieses Mal werden wir unseren Händen kein Objekt zuweisen, sondern stattdessen die Debug-Funktion, um sie zu sehen.

In einem früheren Schritt haben wir nur die Funktionen add, remove und updateTuioCursor verwendet.  Jetzt können Sie sehen, dass es viele leere Funktionen für Objekt und Blob gibt, von denen ich Ihnen gesagt habe, dass Sie früher aus TUIO kommentieren müssen.  Sie wundern sich vielleicht, warum sie plötzlich zurück sind.  Es ist einfach weil Gesten ohne sie nicht funktionieren.  Ich bin mir nicht sicher, warum das so ist, aber wenn ich damit herumspiele, würde es nicht funktionieren, wenn nicht alle Funktionen laufen.

Sie müssen sich keine Sorgen machen, dass Sie zurückgehen und alles auskommentieren müssen. Das habe ich bereits in der TUIO-Bibliothek in diesem Ordner für Sie erledigt.

Lassen Sie uns sich mit einer Gestensteuerung einrichten.


Schritt 15: Gesten einrichten

Zuerst müssen Sie einige zusätzliche Variablen hinzufügen.  Fügen Sie Ihren Variablen Folgendes hinzu:

Fügen Sie nun der Konstruktormethode Folgendes hinzu:

Lassen Sie mich Sie nun durch den Code führen.

Dieser richtet lediglich den Gestenmanager ein und initialisiert die Bühne mit dem TUIO-Connector-Client.

Das ist eine ziemlich wichtige Zeile, da sie dem Gestenmanager sagt, dass Sie die Ziehbewegung für Objekte verwenden können.  Andere Gesten funktionieren ohne diese Linie, aber Sie können keine Objekte über den Bildschirm ziehen.  Wenn Sie also stationäre Objekte möchten, die Sie drehen oder in der Größe ändern können, entfernen Sie diese Zeile.

Das wäre nützlich für eine virtuelle DJ-App, wo Sie ein virtuelles Vinyl drehen, um die Wiedergabe von Musik zu ändern.  Mit ein paar einfachen Gesten können Sie viel erreichen.

Dadurch wird die Debug-Funktion von TUIO eingerichtet, die Sie in Kürze sehen werden.

Schließlich fügt diese for-Schleife unsere Bilder der Bühne hinzu.  Hier nutze ich die Vorteile von for-Schleifen, um eine Zahl an die Klasse weiterzuleiten, die wir gerade erstellen, um einem Movieclip mitzuteilen, welchen Frame er anzeigen soll.  Auf diese Weise verwenden wir eine for-Schleife, um alle unsere Bilder anzuzeigen.  Sparen Sie die Mühe, all den zusätzlichen Code zum Hinzufügen und Positionieren zu schreiben.


Schritt 16: In einer eigenen Klasse

Wir haben also nur auf eine Klasse namens Images verwiesen, die noch nicht existiert.  Wir sollten besser etwas tun, um das zu beheben.

Gehen Sie voran und erstellen Sie eine neue Klassendatei und nennen Sie sie Images.


Beginnen wir am Anfang der Datei und arbeiten uns nach unten.


Schritt 17: Importieren von Waren

Fügen Sie am Anfang der Datei die folgenden Importe hinzu:


Schritt 18: Variabler Erfolg

Sie müssen die Klasse mithilfe der Sprite-Klasse erweitern, sodass die Hauptklassendefinitionszeile wie folgt aussieht:

Fügen Sie nun die folgenden Variablen hinzu:

Picture ist ein Movieclip, der in der Datei Main.fla bereits eingerichtet und für Sie erstellt wurde.  Es enthält alle Bilder, die beim Laden der App angezeigt werden.  Alle Bilder sind diejenigen, die ich mir selbst genommen habe, also fühlen Sie sich frei, sie zu verwenden, wie Sie wünschen.


Schritt 19: Konstruktoren

Die Hauptkonstruktorzeile sieht momentan wie folgt aus:

Nun erinnern Sie sich vielleicht daran, dass wir dieser Funktion eine Reihe von Parametern übergeben haben, um die Position, Größe und den Rahmen des Bildes festzulegen.  Um den Import dieser Parameter zu verarbeiten, muss diese Zeile folgendermaßen geändert werden:

Jetzt können Sie den Code hinzufügen, der das gesamte Aussehen jedes Bildes festlegt.

Was dieser Code macht, ist ein weißes Feld zu zeichnen und das Bild MovieClip darin fallen zu lassen.  Das erzeugt einen schönen Foto-ähnlichen Effekt, da es jedem Bild eine Grenze gibt.

Sie können auch sehen, dass der Rahmen des Movieclips in der Position, in der er sich gerade befindet, in der for-Schleife geändert wird.

Abschließend fügen wir die Ereignis-Listener hinzu, um die verschiedenen Gesten einzurichten, die in einer Sekunde behandelt werden.


Schritt 20: Skalieren Sie das Gebäude.  Von Gesten.

Fügen Sie die folgende Funktion nach dem Konstruktor hinzu:

Diese Funktion behandelt nur die Skalierung, wenn Flash erkennt, dass Sie die Skalierungsgeste ausführen.  Dies ist die eingebaute Methode von Flash zum Skalieren von Gesten, so dass Sie keine Mathe brauchen, um etwas herauszufinden, großartig!


Schritt 21: Drehen Sie mich nach rechts

Fügen Sie diese Funktion unter dem letzten hinzu:

Auch hier wird die integrierte Funktion zur Handhabung von Rotationsgesten verwendet.  Einfach.


Schritt 22: So ein Ziehen

Fügen Sie die folgende Funktion unter dem letzten hinzu:

Diese Funktion behandelt das Ziehen-Verhalten, sodass Sie Ihre Hand über ein Objekt legen und es über den Bildschirm ziehen können.


Schritt 23: Auf und Ab

Fügen Sie folgende Funktionen hinzu:

Richtig, diese Funktionen behandeln, was passiert, wenn Sie Ihre Hand bewegen und sich auf dem Bildschirm bewegen.  Im Grunde bringt es das aktuelle Objekt, über das Sie schweben, an die Spitze der Anzeigeliste, so dass es zum obersten Objekt wird.  Dadurch können Objekte, die sich unter anderen befinden, einfacher gesteuert werden.


Schritt 24: Arbeiten Sie mit diesen Armen

Probieren Sie es aus!  Hoffentlich, wenn Sie alle Schritte sorgfältig verfolgt haben, sollten Sie jetzt in der Lage sein, Bilder auf dem Bildschirm zu bewegen, die Größe zu verändern und sie zu drehen, indem Sie einfach die Hände in der Luft bewegen!  Willkommen in der Zukunft.


Die Gesten funktionieren wie folgt:

Zoom ist zwei Hände auf ein Bild und dann erweitern Sie sie voneinander weg.

Drehen ist zwei Hände auf einem Bild, eines geht nach oben und das andere geht nach unten.

Stellen Sie sich all die coolen Apps vor, die Sie mit dieser Art von Technologie erstellen können.  Sie können eine Gestenerkennung für Ihre Kinect-fähigen Flash-Spiele hinzufügen und die beiden Dinge, die Sie heute gelernt haben, zusammenführen.  Leicht zugängliche Menüs mit einer Zoom-Geste zur Bühne, Objekte, die Sie mit der Ziehgeste bewegen können, alle möglichen Dinge.

Aber Sie müssen sich bewusst sein, dass es sehr schwierig ist, die Arme für lange Zeit in der Luft zu halten.  Also, wenn Sie ein Spiel machen, ist es am besten, wenn Sie die Bewegungen der Armstreckung auf kurze Zeit beschränken.

Es ist kein Geheimnis, dass ich kein großer Fan der Schnittstelle zum Minority Report Style bin, da sie als Schnittstelle völlig fehlerhaft ist.  Aber es in kleinen Ausbrüchen mit Ruhezeiten zu verwenden, funktioniert gut - das ist, was ich in meinem Spiel gemacht habe, Spaced Out: Jede Runde war eine Minute lang mit mindestens einer Minute, wenn nicht mehr Ruhezeit dazwischen.  Irgendwann länger und Leute klagten über Armmüdigkeit.

Was natürlich noch besser ist, ist eine Touch-Table-App, bei der Sie Kinect verwenden, um Fingerspitzenberührungen an Tabellen zu erkennen und dann Apps zu erstellen, die damit arbeiten.  Berühren Sie Tische überall!  Sie können ein Touch Table Tower Defense Spiel machen, indem Sie nur Kinect, Flash und einen Projektor benutzen.  Tabletop-Gaming mit Animationen, die auf Ihre Berührungen reagieren können.

Ich habe dir das Wissen gegeben, benutze es jetzt verantwortungsvoll und zum Guten, nicht zum Bösen.  Viel Spaß beim Spielen mit der Zukunft.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.