Share
In questo tutorial, impareremo come implementare i gesti multitouch nativi da utilizzare nelle tue applicazioni. Continuare a leggere!
Diamo un'occhiata al risultato finale su cui lavoreremo:
Nota: questo esempio funziona solo su dispositivi Multitouch (tablet, smartphone, computer touch screen e trackpad multitouch sotto AIR).
Nota per gli utenti Android: Multitouch non verrà eseguito nel file SWF incorporato in una pagina HTML in un browser Android, ma il download di origine include un APK che è possibile utilizzare per verificarlo. (Si prega di notare che l'APK è solo a scopo di una rapida dimostrazione dei gesti stessi, e non viene visualizzato completamente correttamente.)
Puoi pizzicare per ingrandire, ruotare per ruotare e scorrere per cambiare l'immagine. Guarda la demo del video se non riesci a testare l'anteprima sul tuo dispositivo:
Useremo il supporto nativo Multitouch integrato in Flash Player per creare un'applicazione di immagine basata su gesti.
Avvia Flash e crea un nuovo documento. Imposta la dimensione dello stage su 600x300 px e la frequenza fotogrammi su 24 fps.
L'interfaccia sarà molto semplice, solo un'immagine nel palco che verrà poi modificata dai gesti.
Avremo bisogno di alcune immagini per testare la nostra applicazione, selezionarle dalla tua collezione personale o scaricarne alcune per testare.
Queste sono le immagini della demo, ottenute da Flickr, tutte con una licenza Creative Commons.
Grass 01 di 100kr
impatto profondo sul colore del pianeta da parte di spettacolopuro
Yosemite: colori autunnali di tibchris
Fiore di Antonio Manchado
Converti una delle immagini in un clip filmato e aggiungi il resto delle immagini a quella clip in fotogrammi diversi. Dai un nome alla clip SlideItem e segnare il Esporta per ActionScript scatola.
Useremo un motore di interpolazione diverso dal predefinito incluso in Flash, questo aumenterà le prestazioni e sarà più facile da usare.
È possibile scaricare TweenNano dal suo sito Web ufficiale.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Crea la tua struttura di base per iniziare a scrivere il tuo codice.
pacchetto import flash.display.Sprite; public class Main estende Sprite public function Main (): void // constructor code
Queste sono le classi che dovremo importare affinché la nostra classe funzioni, il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
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;
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
private var slideItem: SlideItem; // L'oggetto che sarà interessato dai gestures private var tempContainer: Sprite; // Uno sprite vuoto che memorizzerà l'elemento della diapositiva
Il costruttore è una funzione che viene eseguita quando viene creato un oggetto da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o viene eseguita utilizzando la classe documento.
Esegue le azioni necessarie per avviare l'applicazione.
funzione pubblica finale Main (): void // Code
Questa riga indica a Flash Player di identificare la modalità multi-touch per la gestione di eventi tattili e gestuali.
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Maggiori informazioni su questo su help.adobe.com.
Istanziamo le immagini che risponderanno agli eventi del gesto.
Accentsconagua
slideItem = new SlideItem (); / * Impedisce all'immagine di cambiare * / slideItem.stop (); / * Centra l'immagine * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight * 0.5; addChild (slideItem); ascoltatori ('aggiungi', diapositiva); // vedi il prossimo passo Questa funzione aggiunge o rimuove i listener di gesti in base al parametro specificato.
ascoltatori di funzioni finali private (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);
Ciò significa che il ascoltatori () la funzione chiamata nel passaggio precedente aggiungerà i listener di eventi all'immagine scorrevole, per far sì che ascolti lo zoom, la panoramica, la rotazione e lo scorrimento dei gesti.
Questa funzione risponde al ben noto pizzico gesto. Gestisce l'ingrandimento e l'ingrandimento dell'immagine.
funzione finale privata onZoom (e: TransformGestureEvent): void / * Usa i dati dell'evento per ridimensionare l'immagine di destinazione * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
La rotazione è gestita da questa funzione, due dita sono abituate rotazione l'immagine sul palco.
funzione finale privata onRotate (e: TransformGestureEvent): void / * Usa i dati dell'evento per ruotare l'immagine di destinazione * / e.target.rotation + = e.rotation;
La funzione Pan è usata per spostare l'immagine per vedere le parti fuori dal palco.
funzione finale privata onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Questa funzione è leggermente più grande a causa delle quattro direzioni di scorrimento disponibili. Il gesto è simile a quello del passaggio precedente, ma più saldo, e invece di spostare semplicemente l'immagine attorno, lo scambia per un'immagine diversa.
Prima controlla se un elemento precedente è sul palco e lo memorizza in un contenitore per poterlo interpolare ed essere in grado di rimuoverlo in un secondo momento. Poi il compensare la proprietà viene letta per determinare la direzione dello scorrimento, mostrando l'animazione e l'immagine corrispondenti.
funzione finale privata onSwipe (e: TransformGestureEvent): void / * Verifica se l'immagine è in scena * / if (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Cambia immagini * / if (e.offsetX == 1) // right slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.stageHeight * 0.5; ascoltatori ('aggiungi', diapositiva); 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; ascoltatori ('aggiungi', diapositiva); 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; ascoltatori ('aggiungi', diapositiva); 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; ascoltatori ('aggiungi', diapositiva); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); Al termine dell'animazione, l'elemento fuori scena viene distrutto per risparmiare memoria.
funzione finale privata removeLast (): void listener ('remove', tempContainer.getChildAt (0) as Sprite); removeChild (tempContainer); tempContainer = null; 
Faremo uso della Document Class in questo tutorial, se non sai come usarlo o sei un po 'confuso per favore leggi questo Quick Tip.
I gesti aggiungono un bel toccare e offre una grande interazione nella tua applicazione, usali!
Grazie per aver letto questo tutorial, spero che tu l'abbia trovato utile!
