Share
I den här handledningen lär vi dig hur du implementerar inbyggda multitouch-gester som ska användas i dina program. Läs vidare!
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Obs! Det här exemplet fungerar bara på multitouch-enheter (tabletter, smartphones, pekskärmsdatorer och multitouch-pekplattor under AIR).
Obs för Android-användare: Multitouch kommer inte att köras i SWF-inbäddade på en HTML-sida i en Android-webbläsare, men källnedladdningen innehåller en APK som du kan använda för att kolla in den. (Observera att APK är bara för att visa en snabb demonstration av gesterna själva, och visas inte helt korrekt.)
Du kan nypa för att zooma, rotera för att rotera och svepa för att ändra bilden. Kolla in videodemo om du inte kan testa förhandsgranskningen på din enhet:
Vi använder det inbyggda Multitouch-stöd som är inbyggt i Flash Player för att skapa ett gestbaserat bildprogram.
Starta Flash och skapa ett nytt dokument. Ställ scenstorleken till 600x300px och bildhastigheten till 24fps.
Gränssnittet blir väldigt enkelt, bara en bild i scenen som sedan modifieras av gesterna.
Vi behöver några bilder för att testa vår ansökan, välja dem från din personliga samling eller ladda ner några för att testa.
Dessa är bilderna från demoen, som erhållits från Flickr, alla med en Creative Commons License.
Gräs 01 av 100kr
djup påverkan på planetfärgen av spettacolopuro
Yosemite: höstfärger av tibchris
Blomma av Antonio Manchado
Konvertera en av bilderna till ett filmklipp och lägg till resten av bilderna till det klippet i olika ramar. Namn klippet SlideItem och markera Exportera till ActionScript låda.
Vi använder en annan tween-motor från standard som ingår i Flash, vilket ökar prestandan och blir enklare att använda.
Du kan ladda ner TweenNano från sin officiella hemsida.
Skapa en ny (Cmd + N) ActionScript 3.0-klass och spara den som Main.as i din klassmapp.
Skapa din grundläggande klassstruktur för att börja skriva din kod.
paket import flash.display.Sprite; public class Main utökar Sprite public function Main (): void // constructor code
Det här är de klasser som vi behöver importera för vår klass att arbeta, importera Direktivet gör externt definierade klasser och paket tillgängliga för din kod.
importera flash.display.Sprite; importera flash.display.MovieClip; importera flash.ui.Multitouch; importera flash.ui.MultitouchInputMode; importera flash.events.TransformGestureEvent; importera com.greensock.TweenNano; importera com.greensock.easing.Strong;
Det här är de variabler vi ska använda, läs kommentarerna i koden för att få veta mer om dem.
privat var slideItem: SlideItem; // Föremålet som kommer att påverkas av gesten privat var tempContainer: Sprite; // En tom sprite som lagrar objektet
Konstruktorn är en funktion som körs när ett objekt skapas från en klass, den här koden är den första som ska utföras när du gör en förekomst av ett objekt eller körs med hjälp av dokumentklassen.
Det utför de åtgärder som krävs för att starta programmet.
allmän slutlig funktion Main (): void // Code
Den här raden berättar om Flash Player för att identifiera multi-touch-läget för hantering av handenhet och rörelsehändelser.
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Läs mer om detta på help.adobe.com.
Låt oss instansera bilderna som svarar på gesthändelserna.
Accentsconagua
slideItem = ny SlideItem (); / * Förhindrar att bilden ändras * / slideItem.stop (); / * Centrera bilden * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight * 0,5; addChild (slideItem); lyssnare ("add", slideItem); // se nästa steg Den här funktionen lägger till eller tar bort gestaltaren beroende på den angivna parametern.
privata slutliga funktion lyssnare (åtgärd: String, mål: 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); annat target.removeEventListener (TransformGestureEvent.GESTURE_ZOOM, onZoom); target.removeEventListener (TransformGestureEvent.GESTURE_ROTATE, onRotate); target.removeEventListener (TransformGestureEvent.GESTURE_PAN, onPan); target.removeEventListener (TransformGestureEvent.GESTURE_SWIPE, onSwipe);
Detta innebär att lyssnare () funktion som kallas i föregående steg kommer att lägga till händelselysare till glidbilden, för att få lyssna på zooma, panorering, rotering och svepande gester.
Denna funktion svarar mot den välkända nypa gest. Den hanterar bildzoom och zoomar ut.
privat slutlig funktion onZoom (e: TransformGestureEvent): void / * Använd händelsedata för att skala målbilden * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
Rotationen hanteras av denna funktion, två fingrar är vana vid snurra bilden i scenen.
privat slutlig funktion onRotate (e: TransformGestureEvent): void / * Använd händelsedata för att rotera målbilden * / e.target.rotation + = e.rotation;
Pan-funktionen används för att flytta bilden för att se delar som är utanför scenen.
privat slutlig funktion onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Denna funktion är lite större på grund av de fyra snabba anvisningarna som finns tillgängliga. Gesten liknar den från föregående steg, men fastare, och istället för att helt enkelt flytta bilden runt byter den den till en annan bild.
Det kontrollerar först om ett föregående föremål ligger på scenen och lagrar det i en behållare för att kunna mellanliggande det och kunna ta bort det senare. Sedan offset egenskapen läses för att bestämma riktningen för svepningen, visar motsvarande animering och bild.
privat slutlig funktion onSwipe (e: TransformGestureEvent): void / * Kontrollera om bilden är på scenen * / om (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Ändra bilder * / om (e.offsetX == 1) // right slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.stageHeight * 0,5; lyssnare ("add", slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, x: stage.stageWidth, onComplete: removeLast); TweenNano.to (slideItem, 0.5, x: stage.stageWidth * 0.5); om (e.offsetX == -1) // left slideItem = new SlideItem (); slideItem.gotoAndStop (2); slideItem.x = stage.stageWidth + slideItem.width; slideItem.y = stage.stageHeight * 0,5; lyssnare ("add", slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, x: -slideItem.width, onComplete: removeLast); TweenNano.to (slideItem, 0.5, x: stage.stageWidth * 0.5); om (e.offsetY == -1) // up slideItem = new SlideItem (); slideItem.gotoAndStop (3); slideItem.x = stage.stageWidth * 0,5; slideItem.y = stage.stageHeight + slideItem.height; lyssnare ("add", slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: -slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); om (e.offsetY == 1) // ner slideItem = ny SlideItem (); slideItem.gotoAndStop (4); slideItem.x = stage.stageWidth * 0,5; slideItem.y = -slideItem.height; lyssnare ("add", slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); När animationen är klar förstörs objektet offstage för att spara minne.
privat slutlig funktion removeLast (): void listeners ('remove', tempContainer.getChildAt (0) som Sprite); removeChild (tempContainer); tempContainer = null; 
Vi använder dokumentklassen i den här handledningen, om du inte vet hur du använder den eller är lite förvirrad, läs den här snabba tipsen.
Gester lägger till ett trevligt Rör och erbjuda bra interaktion i din ansökan, använd dem!
Tack för att du läste denna handledning, hoppas du att du har funnit det användbart!
