Share
I denne veiledningen lærer vi hvordan du implementerer innfødte multitouch-bevegelser som skal brukes i programmene dine. Les videre!
La oss se på det endelige resultatet vi vil jobbe for:
Merk: Dette eksemplet fungerer bare på multitouch-enheter (tabletter, smarttelefoner, berøringsskjerm datamaskiner og multitouch-styreflater under AIR).
Merknad for Android-brukere: Multitouch kjøres ikke i SWF-en innebygd i en HTML-side i en Android-nettleser, men Kilde-nedlastingen inneholder en APK du kan bruke til å sjekke den ut. (Vær oppmerksom på at APK bare er beregnet til en rask demonstrasjon av bevegelsene selv, og vises ikke helt riktig.)
Du kan klemme for å zoome, rotere for å rotere og sveipe for å endre bildet. Sjekk ut videodemoen hvis du ikke kan teste forhåndsvisningen på enheten din:
Vi bruker den innfødte Multitouch-støtten som er innebygd i Flash Player, for å lage et gestasjonsbasert bildeprogram.
Start Flash og opprett et nytt dokument. Still scenestørrelsen til 600x300px, og bildefrekvensen til 24fps.
Grensesnittet vil være veldig enkelt, bare et bilde i scenen som vil bli endret av bevegelsene.
Vi trenger noen bilder for å teste applikasjonen vår, velge dem fra din personlige samling eller last ned noen for testing.
Dette er bildene fra demoen, hentet fra Flickr, alle med en Creative Commons License.
Gress 01 av 100kr
dyp innvirkning på planetfargen av spettacolopuro
Yosemite: fallfarger ved tibchris
Blomst av Antonio Manchado
Konverter et av bildene til et filmklipp, og legg resten av bildene til klippet i forskjellige rammer. Navn klippet SlideItem og merk av Eksporter for ActionScript eske.
Vi bruker en annen tween-motor fra standard som er inkludert i Flash, dette vil øke ytelsen, så vel som å være enklere å bruke.
Du kan laste ned TweenNano fra sitt offisielle nettsted.
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Lag din grunnklassestruktur for å begynne å skrive koden din.
pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code
Dette er klassene vi må importere for vår klasse for å jobbe, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importer flash.display.MovieClip; importere flash.ui.Multitouch; importer flash.ui.MultitouchInputMode; importer flash.events.TransformGestureEvent; importer com.greensock.TweenNano; importere com.greensock.easing.Strong;
Dette er variablene vi skal bruke, les kommentarene i koden for å finne ut mer om dem.
privat var slideItem: SlideItem; // Objektet som vil bli påvirket av bevegelsene private var tempContainer: Sprite; // En tom sprite som vil lagre lysbildet
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt eller kjører ved hjelp av dokumentklassen.
Det utfører de nødvendige tiltak for å starte applikasjonen.
offentlig sluttfunksjon Main (): void // Code
Denne linjen forteller Flash Player for å identifisere multi-touch-modusen for berøring og håndtering av hendelser.
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Les mer om dette på help.adobe.com.
La oss instansere bildene som vil reagere på bevegelsesbegivenhetene.
Accentsconagua
slideItem = ny SlideItem (); / * Forhindrer at bildet endres * / slideItem.stop (); / * Senter bildet * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = scene.stageHeight * 0,5; addChild (slideItem); lyttere ('legg til', slideItem); // se neste trinn Denne funksjonen legger til eller fjerner gestuslytterne avhengig av den angitte parameteren.
private endelige funksjonslyttere (handling: 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); 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);
Dette betyr at lyttere () funksjonen som ble kalt i det forrige trinnet, vil legge til hendelseslyttere til glidebildet, for å få det til å lytte etter zooming, panorering, rotering og sveiping av bevegelser.
Denne funksjonen reagerer på den kjente klype gest. Den håndterer bildzoom inn og zoomer ut.
privat endelig funksjon onZoom (e: TransformGestureEvent): void / * Bruk hendelsesdataene til å målrette målbildet * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
Rotasjon håndteres av denne funksjonen, to fingre er vant til snurre rundt bildet i scenen.
privat endelig funksjon onRotate (e: TransformGestureEvent): void / * Bruk hendelsesdataene til å rotere målbildet * / e.target.rotation + = e.rotation;
Pan-funksjonen brukes til å flytte bildet for å se deler som er utenfor scenen.
privat endelig funksjon onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Denne funksjonen er litt større på grunn av de fire trekkveiledningene som er tilgjengelige. Bevegelsen ligner den fra forrige trinn, men fastere, og i stedet for å bare flytte bildet rundt, bytter det det til et annet bilde.
Det kontrollerer først om et forrige element er på scenen og lagrer det i en beholder for å kunne tween det og kunne fjerne det senere. Og så offset Egenskapen leses for å bestemme retningen for strekningen, viser tilsvarende animasjon og bilde.
privat endelig funksjon onSwipe (e: TransformGestureEvent): void / * Sjekk om bildet er på scenen * / hvis (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Endre bilder * / hvis (e.offsetX == 1) // right slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = scene.stageHeight * 0,5; lyttere ('legg til', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, x: stage.stageWidth, onComplete: removeLast); TweenNano.to (slideItem, 0.5, x: stage.stageWidth * 0.5); hvis (e.offsetX == -1) // left slideItem = new SlideItem (); slideItem.gotoAndStop (2); slideItem.x = stage.stageWidth + slideItem.width; slideItem.y = scene.stageHeight * 0,5; lyttere ('legg til', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, x: -slideItem.width, onComplete: removeLast); TweenNano.to (slideItem, 0.5, x: stage.stageWidth * 0.5); hvis (e.offsetY == -1) // opp slideItem = ny SlideItem (); slideItem.gotoAndStop (3); slideItem.x = stage.stageWidth * 0,5; slideItem.y = stage.stageHeight + slideItem.height; lyttere ('legg til', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: -slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); hvis (e.offsetY == 1) // ned slideItem = ny SlideItem (); slideItem.gotoAndStop (4); slideItem.x = stage.stageWidth * 0,5; slideItem.y = -slideItem.height; lyttere ('legg til', 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 animasjonen er ferdig, blir elementet offstage ødelagt for å lagre minne.
privat endelig funksjon removeLast (): void listeners ('remove', tempContainer.getChildAt (0) som Sprite); removeChild (tempContainer); tempContainer = null; 
Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne Quick Tip.
Gester legger til en fin ta på og og gi stor interaksjon i søknaden din, bruk dem!
Takk for at du har lest denne opplæringen, håper jeg du har funnet det nyttig!
