Share
Dans ce didacticiel, nous allons apprendre à mettre en œuvre des gestes multitouch natifs à utiliser dans vos applications. Continuer à lire!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Remarque: Cet exemple ne fonctionnera que sur les appareils multitouch (tablettes, smartphones, ordinateurs à écran tactile et pavés tactiles multitouch sous AIR)..
Remarque pour les utilisateurs d'Android: le multitouch ne s'exécutera pas dans le fichier SWF incorporé dans une page HTML d'un navigateur Android, mais le téléchargement de Source inclut un fichier APK que vous pouvez utiliser pour l'exécuter. (Veuillez noter que l'APK sert uniquement à faire une démonstration rapide des gestes eux-mêmes et ne s'affiche pas correctement.)
Vous pouvez pincer pour zoomer, faire pivoter et faire glisser pour modifier l'image. Regardez la démonstration vidéo si vous ne parvenez pas à tester l'aperçu sur votre appareil:
Nous utiliserons le support natif Multitouch intégré à Flash Player pour créer une application d’image basée sur les gestes..
Lancez Flash et créez un nouveau document. Définissez la taille de la scène sur 600x300px et la cadence sur 24 images par seconde..
L'interface sera très simple, juste une image dans la scène qui sera ensuite modifiée par les gestes.
Nous aurons besoin d'images pour tester notre application, choisissez-les dans votre collection personnelle ou téléchargez-en quelques-unes pour les tester..
Ce sont les images de la démo, obtenues à partir de Flickr, toutes avec une licence Creative Commons.
Herbe 01 par 100kr
impact profond sur la couleur de la planète par spettacolopuro
Yosemite: couleurs d'automne par tibchris
Fleur d'Antonio Manchado
Convertissez une des images en clip et ajoutez le reste des images à ce clip dans des images différentes. Nommez le clip SlideItem et marquer le Exporter pour ActionScript boîte.
Nous utiliserons un moteur d'interpolation différent du moteur par défaut inclus dans Flash. Cela améliorera les performances et facilitera l'utilisation..
Vous pouvez télécharger TweenNano depuis son site officiel.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Créez votre structure de classe de base pour commencer à écrire votre code.
package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
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;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet.
private var slideItem: SlideItem; // Objet qui sera affecté par les gestes private var tempContainer: Sprite; // Un sprite vide qui stockera l'élément de la diapositive
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
Il effectue les actions nécessaires pour démarrer l'application.
fonction finale publique Main (): void // Code
Cette ligne indique à Flash Player d'identifier le mode multi-touch pour la gestion des événements tactiles et gestuels..
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Plus d'informations à ce sujet sur help.adobe.com.
Instancions les images qui répondront aux événements de gestes.
Accentsconagua
slideItem = new SlideItem (); / * Empêche l'image de changer * / slideItem.stop (); / * Centrer l'image * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight * 0.5; addChild (slideItem); les auditeurs ('add', slideItem); // voir l'étape suivante Cette fonction ajoute ou supprime les écouteurs de geste en fonction du paramètre spécifié..
écouteurs de fonction finale privés (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);
Cela signifie que le les auditeurs() La fonction appelée à l'étape précédente ajoutera des écouteurs d'événements à l'image glissante, pour lui permettre d'écouter les gestes de zoom, de panoramique, de rotation et de balayage..
Cette fonction répond au bien connu pincer geste. Il gère l'image zoom avant et zoom arrière.
fonction finale privée onZoom (e: TransformGestureEvent): void / * Utilisez les données d'événement pour redimensionner l'image cible * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
La rotation est gérée par cette fonction, deux doigts sont utilisés pour tourner l'image dans la scène.
fonction finale privée onRotate (e: TransformGestureEvent): void / * Utilisez les données d'événement pour faire pivoter l'image cible * / e.target.rotation + = e.rotation;
La fonction Panoramique permet de déplacer l’image pour voir les parties qui n’étaient pas sur la scène..
fonction finale privée onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Cette fonction est un peu plus grande en raison des quatre directions de balayage disponibles. Le geste est similaire à celui de l'étape précédente, mais plus ferme et au lieu de simplement déplacer l'image, il la remplace par une autre image..
Il vérifie d’abord si un élément précédent est sur la scène et le stocke dans un conteneur afin de l’interpéner et de le supprimer ultérieurement. Puis le décalage la propriété est lue pour déterminer la direction du balayage, montrant l’animation et l’image correspondantes.
fonction finale privée onSwipe (e: TransformGestureEvent): void / * Vérifie si l'image est sur la scène * / if (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Modifier les images * / if (e.offsetX == 1) // right SlideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.stageHeight * 0.5; les auditeurs ('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) // slideItem = new slideItem (); slideItem.gotoAndStop (2); slideItem.x = stage.stageWidth + slideItem.width; slideItem.y = stage.stageHeight * 0.5; les auditeurs ('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; les auditeurs ('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) // vers le bas slideItem = new SlideItem (); slideItem.gotoAndStop (4); slideItem.x = stage.stageWidth * 0.5; slideItem.y = -slideItem.height; les auditeurs ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); Une fois l'animation terminée, l'élément hors scène est détruit pour économiser de la mémoire..
fonction finale privée removeLast (): void listeners ('remove', tempContainer.getChildAt (0) en tant que Sprite); removeChild (tempContainer); tempContainer = null; 
Nous utiliserons la classe de document dans ce tutoriel. Si vous ne savez pas comment l'utiliser ou êtes un peu confus, veuillez lire ce petit conseil..
Les gestes ajoutent une belle toucher et et offrir une grande interaction dans votre application, utilisez-les!
Merci d'avoir lu ce tutoriel, j'espère que vous l'avez trouvé utile!
