Share
In diesem Lernprogramm erfahren Sie, wie Sie native Multitouch-Gesten zur Verwendung in Ihren Anwendungen implementieren. Weiter lesen!
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Hinweis: Dieses Beispiel funktioniert nur auf Multitouch-Geräten (Tablets, Smartphones, Touchscreen-Computer und Multitouch-Trackpads unter AIR)..
Hinweis für Android-Benutzer: Multitouch wird nicht in der SWF-Datei ausgeführt, die in einer HTML-Seite in einem Android-Browser eingebettet ist. Der Source-Download enthält jedoch eine APK, die Sie zum Auschecken verwenden können. (Bitte beachten Sie, dass die APK nur zum Zweck einer schnellen Demonstration der Gesten selbst ist und nicht ganz korrekt angezeigt wird.)
Sie können zum Zoomen zusammendrücken, drehen, drehen und streichen, um das Bild zu ändern. Schauen Sie sich die Video-Demo an, wenn Sie die Vorschau auf Ihrem Gerät nicht testen können:
Wir verwenden die in Flash Player integrierte native Multitouch-Unterstützung, um eine gestenbasierte Bildanwendung zu erstellen.
Starten Sie Flash und erstellen Sie ein neues Dokument. Stellen Sie die Bühnengröße auf 600x300px und die Bildrate auf 24fps ein.
Die Oberfläche wird sehr einfach sein, nur ein Bild in der Bühne, das dann durch die Gesten geändert wird.
Wir werden einige Bilder benötigen, um unsere Anwendung zu testen, aus Ihrer persönlichen Sammlung auszuwählen oder einige zum Testen herunterzuladen.
Dies sind die von Flickr erhaltenen Bilder der Demo, die alle eine Creative Commons-Lizenz besitzen.
Gras 01 von 100kr
tiefe Auswirkungen auf die Planetenfarbe durch Spettacolopuro
Yosemite: Herbstfarben von Tibchris
Flower von Antonio Manchado
Wandeln Sie eines der Bilder in einen Movieclip um, und fügen Sie die restlichen Bilder diesem Clip in verschiedenen Frames hinzu. Benennen Sie den Clip SlideItem und markieren Sie das Export für ActionScript Box.
Wir verwenden eine andere Tween-Engine als die in Flash enthaltene Standardeinstellung. Dies erhöht die Leistung und ist einfacher zu verwenden.
Sie können TweenNano von der offiziellen Website herunterladen.
Erstellen Sie eine neue (Cmd + N) ActionScript 3.0-Klasse, und speichern Sie sie als Main.as in Ihrem Klassenordner.
Erstellen Sie Ihre grundlegende Klassenstruktur, um mit dem Schreiben Ihres Codes zu beginnen.
package import flash.display.Sprite; public class Main erweitert Sprite öffentliche Funktion Main (): void // constructor code
Dies sind die Klassen, die wir importieren müssen, damit unsere Klasse funktionieren kann einführen Die Direktive macht extern definierte Klassen und Pakete für Ihren Code verfügbar.
import flash.display.Sprite; import flash.display.MovieClip; import flash.ui.Multitouch; import flash.ui.MultitouchInputMode; import flash.events.TransformGestureEvent; import com.greensock.TweenNano; import com.greensock.easing.Strong;
Diese Variablen verwenden wir. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren.
private var slideItem: SlideItem; // Das Objekt, auf das sich die Gesten auswirken. Private var tempContainer: Sprite; // Ein leeres Sprite, in dem das Folienelement gespeichert wird
Der Konstruktor ist eine Funktion, die ausgeführt wird, wenn ein Objekt aus einer Klasse erstellt wird. Dieser Code wird als erster ausgeführt, wenn Sie eine Instanz eines Objekts erstellen oder die Dokumentklasse verwendet.
Es führt die notwendigen Aktionen aus, um die Anwendung zu starten.
öffentliche abschließende Funktion Main (): void // Code
Diese Zeile weist den Flash Player an, den Multitouch-Modus für die Handhabung von Berührungs- und Gestenereignissen zu identifizieren.
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Weitere Informationen hierzu finden Sie unter help.adobe.com.
Lassen Sie uns die Bilder instanziieren, die auf die Gestenereignisse reagieren.
Accentsconagua
slideItem = new SlideItem (); / * Verhindert, dass sich das Bild ändert * / slideItem.stop (); / * Bild zentrieren * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight * 0.5; addChild (slideItem); Listener ('add', slideItem); // siehe nächsten Schritt Diese Funktion fügt die Gestenlistener hinzu oder entfernt sie je nach dem angegebenen Parameter.
Listener für private Endfunktionen (action: String, target: Sprite): void if (action == 'add') target.addEventListener (TransformGestureEvent.GESTURE_ZOOM, onZoom); target.addEventListener (TransformGestureEvent.GESTURE_ROTATE, onRotate); target.addEventListener (TransformGestureEvent.GESTURE_PAN, onPan); target.addEventListener (TransformGestureEvent.GESTURE_SWIPE, onSwipe); else target.removeEventListener (TransformGestureEvent.GESTURE_ZOOM, onZoom); target.removeEventListener (TransformGestureEvent.GESTURE_ROTATE, onRotate); target.removeEventListener (TransformGestureEvent.GESTURE_PAN, onPan); target.removeEventListener (TransformGestureEvent.GESTURE_SWIPE, onSwipe);
Dies bedeutet, dass die Zuhörer() Die im vorherigen Schritt aufgerufene Funktion fügt dem verschiebbaren Bild Ereignis-Listener hinzu, damit das Gleiten nach Zoomen, Schwenken, Drehen und Wischen erfolgt.
Diese Funktion reagiert auf das Bekannte Prise Geste. Das Bild wird vergrößert und verkleinert.
private letzte Funktion onZoom (e: TransformGestureEvent): void / * Verwenden Sie die Ereignisdaten, um das Zielbild zu skalieren. * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
Die Rotation wird von dieser Funktion ausgeführt, an die zwei Finger gewöhnt sind Dreh das bild auf der bühne.
private letzte Funktion onRotate (e: TransformGestureEvent): void / * Verwenden Sie die Ereignisdaten, um das Zielbild zu drehen. * / e.target.rotation + = e.rotation;
Mit der Pan-Funktion können Sie das Bild verschieben, um Teile zu sehen, die sich außerhalb der Bühne befinden.
private letzte Funktion onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Diese Funktion ist aufgrund der vier verfügbaren Wischrichtungen etwas größer. Die Geste ähnelt der des vorherigen Schritts, ist jedoch fester. Statt das Bild einfach nur zu verschieben, wird es für ein anderes Bild ausgetauscht.
Er prüft zuerst, ob sich ein vorheriger Gegenstand auf der Bühne befindet, und speichert ihn in einem Container, um ihn zu wechseln und später wieder entfernen zu können. Dann ist die Versatz Diese Eigenschaft wird gelesen, um die Richtung des Streichen zu bestimmen und die entsprechende Animation und das entsprechende Bild anzuzeigen.
private letzte Funktion onSwipe (e: TransformGestureEvent): void / * Prüfen Sie, ob das Bild auf der Bühne steht * / if (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Bilder ändern * / if (e.offsetX == 1) // right slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.stageHeight * 0.5; Listener ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, x: stage.stageWidth, onComplete: removeLast); TweenNano.to (slideItem, 0.5, x: stage.stageWidth * 0,5); if (e.offsetX == -1) // left slideItem = new SlideItem (); slideItem.gotoAndStop (2); slideItem.x = stage.stageWidth + slideItem.width; slideItem.y = stage.stageHeight * 0.5; Listener ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, x: -slideItem.width, onComplete: removeLast); TweenNano.to (slideItem, 0.5, x: stage.stageWidth * 0,5); if (e.offsetY == -1) // up slideItem = new SlideItem (); slideItem.gotoAndStop (3); slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight + slideItem.height; Listener ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: -slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0,5); if (e.offsetY == 1) // down slideItem = new SlideItem (); slideItem.gotoAndStop (4); slideItem.x = stage.stageWidth * 0.5; slideItem.y = -slideItem.height; Listener ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0,5); Wenn die Animation beendet ist, wird das Objekt außerhalb der Bühne zerstört, um Speicherplatz zu sparen.
private letzte Funktion removeLast (): void listeners ('remove', tempContainer.getChildAt (0) as Sprite); removeChild (tempContainer); tempContainer = null; 
In diesem Lernprogramm verwenden wir die Dokumentenklasse. Wenn Sie nicht wissen, wie Sie sie verwenden sollen oder ein wenig verwirrt sind, lesen Sie bitte diesen Quick Tip.
Gesten fügen ein schönes hinzu berühren und und bieten eine großartige Interaktion in Ihrer Anwendung, verwenden Sie sie!
Vielen Dank für das Lesen dieses Tutorials. Ich hoffe, Sie fanden es nützlich!
