Share
En este tutorial, aprenderemos cómo implementar gestos multitáctiles nativos para usar en sus aplicaciones. Sigue leyendo!
Echemos un vistazo al resultado final en el que trabajaremos:
Nota: este ejemplo solo funcionará en dispositivos multitáctiles (tabletas, teléfonos inteligentes, computadoras con pantalla táctil y trackpads multitáctiles en AIR).
Nota para los usuarios de Android: Multitouch no se ejecutará en el SWF incrustado en una página HTML en un navegador de Android, pero la descarga de Source incluye un APK que puede usar para verificarlo. (Tenga en cuenta que la APK es solo para el propósito de una demostración rápida de los gestos y no se muestra del todo correctamente).
Puede pellizcar para hacer zoom, girar para girar y deslizar para cambiar la imagen. Mira la demostración de video si no puedes probar la vista previa en tu dispositivo:
Usaremos el soporte nativo de Multitouch integrado en Flash Player para crear una aplicación de imagen basada en gestos.
Inicia Flash y crea un nuevo documento. Establezca el tamaño del escenario en 600x300 px y la velocidad de fotogramas en 24 fps.
La interfaz será muy simple, solo una imagen en el escenario que luego será modificada por los gestos..
Necesitaremos algunas imágenes para probar nuestra aplicación, elegirlas de su colección personal o descargar algunas para probarlas.
Estas son las imágenes de la demostración, obtenidas de Flickr, todas con una licencia de Creative Commons..
Hierba 01 por 100kr
Impacto profundo en el color del planeta por spettacolopuro.
Yosemite: colores de otoño por tibchris.
Flor de Antonio Manchado
Convierta una de las imágenes en un clip de película y agregue el resto de las imágenes a ese clip en diferentes marcos. Nombra el clip SlideItem y marca el Exportar para ActionScript caja.
Usaremos un motor de interpolación diferente del predeterminado incluido en Flash, esto aumentará el rendimiento y será más fácil de usar..
Puedes descargar TweenNano desde su sitio web oficial..
Cree una nueva clase de ActionScript 3.0 (Cmd + N) y guárdela como Main.as en la carpeta de tu clase.
Crea tu estructura de clase básica para comenzar a escribir tu código.
paquete import flash.display.Sprite; clase pública Main extiende Sprite función pública Main (): void // código constructor
Estas son las clases que necesitaremos importar para que nuestra clase funcione, la importar La directiva hace que las clases y los paquetes definidos externamente estén disponibles para su código..
importar flash.display.Sprite; importar flash.display.MovieClip; import flash.ui.Multitouch; importar flash.ui.MultitouchInputMode; importar flash.events.TransformGestureEvent; import com.greensock.TweenNano; import com.greensock.easing.Strong;
Estas son las variables que usaremos, lea los comentarios en el código para obtener más información sobre ellas..
private var slideItem: SlideItem; // El objeto que se verá afectado por los gestos private var tempContainer: Sprite; // Un sprite vacío que almacenará el elemento de diapositiva.
El constructor es una función que se ejecuta cuando un objeto se crea a partir de una clase, este código es el primero en ejecutarse cuando se crea una instancia de un objeto o se ejecuta utilizando la Clase de documento.
Realiza las acciones necesarias para iniciar la aplicación..
Función final pública Main (): void // Code
Esta línea le indica a Flash Player que identifique el modo multitáctil para el manejo de eventos táctiles y gestuales..
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Lea más sobre esto en help.adobe.com.
Instanciamos las imágenes que responderán a los eventos de gestos..
Accentsconagua
slideItem = new SlideItem (); / * Evita que la imagen cambie * / slideItem.stop (); / * Centrar la imagen * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight * 0.5; addChild (slideItem); oyentes ('add', slideItem); // ver el siguiente paso Esta función agrega o elimina los escuchas de gestos en función del parámetro especificado.
escuchas de la función final privada (acción: cadena, objetivo: Sprite): void if (acción == 'agregar') 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);
Esto significa que el oyentes () La función llamada en el paso anterior agregará escuchas de eventos a la imagen deslizante, para que escuche los gestos de zoom, desplazamiento, rotación y deslizamiento..
Esta función responde a lo bien conocido. pellizco gesto. Maneja la imagen para acercar y alejar la imagen..
función final privada enZoom (e: TransformGestureEvent): void / * Utilice los datos del evento para escalar la imagen de destino * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
La rotación es manejada por esta función, dos dedos son usados para girar la imagen en el escenario.
función final privada onRotate (e: TransformGestureEvent): void / * Use los datos del evento para rotar la imagen de destino * / e.target.rotation + = e.rotation;
La función Pan se usa para mover la imagen para ver partes que están fuera del escenario.
función final privada onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Esta función es un poco más grande debido a las cuatro direcciones de deslizamiento disponibles. El gesto es similar al del paso anterior, pero más firme, y en lugar de simplemente mover la imagen, la cambia por una imagen diferente.
Primero verifica si un elemento anterior está en el escenario y lo almacena en un contenedor para interpolarlo y poder eliminarlo más tarde. Entonces el compensar La propiedad se lee para determinar la dirección del golpe, mostrando la animación y la imagen correspondientes..
función final privada onSwipe (e: TransformGestureEvent): void / * Compruebe si la imagen está en el escenario * / if (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Cambiar imágenes * / if (e.offsetX == 1) // right slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.stageHeight * 0.5; oyentes ('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; oyentes ('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; oyentes ('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; oyentes ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); Cuando la animación termina, el elemento fuera del escenario se destruye para ahorrar memoria.
función final privada removeLast (): void escuchas ('remove', tempContainer.getChildAt (0) como Sprite); removeChild (tempContainer); tempContainer = null; 
Haremos uso de la Clase de documento en este tutorial, si no sabe cómo usarlo o está un poco confundido, lea este Consejo rápido.
Gestos añaden un bonito. toque Y y ofrece una gran interacción en su aplicación, úselos.!
Gracias por leer este tutorial, espero que lo hayas encontrado útil.!
