Implementering Trinn 2 vil være lett. Men sjansene er 90% at brukernes bevegelser vil mislykkes. Diagrammet nedenfor viser ofte begått gester (i midten); de sjelden er i samsvar med en stiv Vector peker til grunn høyre (venstre). Derfor er det bedre å gi lindring for gest unøyaktigheter (til høyre).

For eksempel, vi kan gi en lindring av 30 ° på begge sider av Vector peker på grunn høyre slik at vinkelen på noen gest sin Vector som faller innenfor dette området vil bli akseptert og tolkes som en gest til grunnet høyre

Nedenfor er en implementering av gest deteksjon til grunnet høyre. Trykk ned på musen, flytte musen til høyre, og slipp muse i Flash presentasjon under. Prøv å gest litt av den absolutte rett til å sjekke ut gjennomføringen av lindring

La oss se på de variablene på vår hardkodet implementering i trinn 4 . Jeg har fremhevet den viktige Vector2D variabler. Ta note av kommentarene jeg har lagt på slutten av hver variabel
privat Var t: Textfield, private Var tidligere. Vector2D //butikken mus plassering ved første clickprivate Var sistnevnte: Vector2D //butikken muse lokasjon på releaseprivate Var akkurat : Vector2D = new Vector2D (1, 0); //vektor av absolutt HØYRE

Jeg antar du allerede vet det grunnleggende å sette en Textfield inn i prosjektet så jeg skal fokusere på Action gjennomføring av mus gest . Gjennomføringen som angitt nedenfor er tungt kommentert. Viktige Vector beregninger er uthevet i tillegg. Jeg oppfordrer leserne til å undersøke disse kommentarene, særlig de fremhevet, for å forstå driften ved ulike hendelser på runtime.

(The Vector2D klassen er det samme som jeg har brukt i tidligere tutorials, som denne.)
offentlig funksjon Faste () {//Opprette en tekstboks t = new Textfield (); t.selectable = false; t.width = 300; t.x = stage.stageWidth /2; hets = stage.stageHeight - 30; addChild (t); //Start gest deteksjon stage.addEventListener (MouseEvent.MOUSE_DOWN, start);} //Sett muse lokasjon på muse downprivate funksjon start (e: MouseEvent): void {//Sett muse undertrykke sted tidligere = new Vector2D (e.localX , e.localY); //Start å trekke linjen graphics.lineStyle (3); graphics.moveTo (earlier.x, earlier.y); //legge mus flytte og mus utslipp lyttere stage.addEventListener (MouseEvent.MOUSE_MOVE, flytte); stage.addEventListener (MouseEvent.MOUSE_UP, opp);} //Tegn figur på musen moveprivate funksjon flytte (e: MouseEvent): void {graphics.lineTo (e.localX, e.localY);} //Evaluere gest på musen releaseprivate fungere up (e: MouseEvent): void {//Sett musen utgivelsen plassering sistnevnte = new Vector2D (e.localX, e.localY); //Beregning vektor av mus gest Var resultat: Vector2D = latter.minus (tidligere); //Beregning vinkel fra absolutt rett til å gest vektor. Var avvik: Number = RIGHT.angleBetween (resultat); avvik = Math2.degreeOf (avvik); //Tolke gest med lindring if (Math.abs (avvik) < 30) t.text = "RIGHT gest oppdaget"; annet t.text = ""; //Clear skjermen på forrige tegning. graphics.clear (); //fjerne mus flytte og mus opp lyttere stage.removeEventListener (MouseEvent.MOUSE_MOVE, flytte); stage.removeEventListener (MouseEvent.MOUSE_UP, opp);}

For avklarings formål, her er et summmary av hardkodet gjennomføring:

Når musen ned, begynner gest deteksjon.

På mus flytte, oppdatere den siste plasseringen av musepekeren.

På musen opp, evaluere hele gest siden (1).



---


Trinn 8: Gesture Angle lettelser


Å gjøre en nøyaktig gest å bruke en mus er vanskelig. Det er vanskelig å lage rette linjer (Øst, Syd, vest, nord), men det er enda vanskeligere å lage diagonale linjer (Sør-Øst, Sør-vest, nord-vest, nord-øst) fordi vi må anslå at ekstra 45 °. Så jeg har gitt diagonale linjer flere lettelser enn rette linjer. Legg merke til den større grått for vinkel for diagonal Vector sammenlignet med den rette Vector


---


Trinn 9: Gesture Sensitivity


Jeg hadde å påpeke et annet problem - sensitive gester.. Sensitive gester identifiserer gest retninger når musepekeren gjør de minste endringer i plassering, selv til nærliggende piksler. Diagrammet nedenfor illustrerer scenarier av sensitive gester.


Hvis brukeren ombestemmer seg etter mus presse og mus utgivelser umiddelbart, vil en gest fortsatt bli oppdaget hvis hans pekeren gjør en minste flytte til tilstøtende piksler. Vi bør tillate brukere å angre gest deteksjon. I denne opplæringen, har jeg gjennomført en minimum størrelse på Vektor av dagens gest må overstige for å være gyldig. Jeg har tatt et diagram som nedenfor


---


Trinn 10. Klasse Variabler


For å detektere enkeltmusebevegelser jeg har implementert MGesture. Må laste ned og undersøke dette Actionscript-fil. Jeg skal gå gjennom sine klassevariabler først, deretter klassemetoder.
VariableDatatypePurposemainBoxDisplayObjectContainerContainer som gester er detecteddirectionsVector.Vectors av standard directions_deviationFromMainsNumberAngle lindring tillatt gest Vector fra 4 hovedretninger (0 ~ 3 i retninger) _deviationFromDiagonalsNumberAngle lindring tillatt gest Vector fra 4 diagonale retninger (4 ~ 7 i retninger) _minDistNumberMinimum magnitude på nåværende gest Vector å være valid_earlierVector2DLocation av første click_latterVector2DContinuous pekerposisjonen etter første klikk

Nedenfor er koden gjennomføringen av klassevariabler. Jeg har tillatt et avvik på 10 ° fra hovedretninger. For eksempel, -10 ° -10 ° anses grunn East, -80 ° -100 ° anses på grunn sør, etc. Jeg har også tillatt et avvik på 30 ° fra diagonale retninger. Så en Vector med orientering mellom 15 ° -75 ° vil bli vurdert på grunn av Sør-Øst, og så videre. Dessuten er den minste størrelsen å overgå 10px
privat Var mainBox: Display; private Var retninger. Vector < Vector2D >. = Ny < Vector2D > [ny Vector2D (1, 0), //East ny Vector2D (0, 1), //South ny Vector2D (-1, 0), //West ny Vector2D (0, -1), //North ny Vector2D (1, 1), //Sør - øst ny Vector2D (-1, 1), //Sør - vest ny Vector2D (-1, -1), //nord - vest ny Vector2D (1, -1) //nord - øst]; private Var diagonaler: Boolean = false; private Var _deviationFromMains: Number = Math2.radianOf (10), private Var _deviationFromDiagonals: Number = Math2.radianOf (30); privat Var _minDist: Number = 10; private Var _earlier: Vector2D; private Var _latter: Vector2D;

---


Trinn 11: Nummerering beskrivelser


Du har kanskje gjettet det allerede fra henvisning til kode implementering av retninger. For avklaring, her er de viktigste retningene 'heltall representasjoner


---


Trinn 12. Klasse Måter og amp; Eiendom


Her er klassemetoder for MGesture.
MethodsInputOutputDescriptionMGestureContainer der bevegelsene er detectedvoidClass initiering, sette container som gester er detectedstartvoidvoidVariables for gest deteksjon (_earlier, _latter) initiatesupdatevoidCurrent gest sin Vector (uten å ta hensyn _minDist), Vector2DUpdates _latter og returnerer nåværende gest Vector (_earlier til _latter) validMagnitudevoidCurrent gest sin Vector (oppfyller minimum omfanget av _minDist), Vector2DChecks hvis nåværende gest magnitude er mer enn _minDistevalDirectionsvoidInteger indikerer retning, intEvaluates nåværende gest ved å sammenligne sin Vector til de i retninger

---


Trinn 13: Metoder


De essensielle metoder fremmet i trinn 12 er alt dokumentert her. Har lest gjennom kommentarene Twitter /** * Initiere variabler *param container hvor mus blir oppdaget fra * /public funksjon MGesture (container: Display). {//Innstilling beholder som musen beveger mainBox = beholder; } /** * Metode for å registrere første mus beliggenhet * /public funksjon start (): void {var startMX: Number = mainBox.mouseX; Var startMY: Number = mainBox.mouseY; _earlier = new Vector2D (startMX, startMY); //pekerposisjonen, først _latter = new Vector2D (startMX, startMY); //pekerposisjonen, for å bli oppdatert senere} /** * Metode for å oppdatere mus beliggenhet *return en Vector2D av gjeldende muse plassering i forhold til at når start () kalles; * /public funksjon oppdateringen (): Vector2D {_latter = new Vector2D (mainBox.mouseX, mainBox.mouseY); Var vecUpdate: Vector2D = _latter.minus (_earlier); returnere vecUpdate;} /** * Metode for å validere en gest. *param NewLoc Vector2D til ny mus beliggenhet *return null hvis ugyldig gest, en Vector2D hvis gyldig * /private funksjon validMagnitude (): Vector2D {var gestureVector: Vector2D = oppdateringen (); Var newMag: Number = gestureVector.getMagnitude (); //hvis magnitude vilkåret ikke er oppfylt, reset gestureVector til null if (newMag < _minDist) gestureVector = null; returnere gestureVector; } /** * Metode for å evaluere gest retning *return Integer indikasjon på retningen. Ugyldig gest, -1. * /offentlig funksjon evalDirections (): int {//Pessimistisk søk ​​(initial med mislykket søk) Var detectedDirection: int = 1; //validere magnitude tilstand Var newDirection: Vector2D = validMagnitude (); //hvis gest stiger minste magnitude if (newDirection = null) {//evaluering mot alle retninger for (var i: int = 0; i < directions.length; i ++) {var vinkel: Number = retninger [i]. angleBetween (newDirection); vinkel = Math.abs (vinkel); //sjekke mot hovedretninger hvis (i < 4 & & vinkel < _deviationFromMains) {detectedDirection = i; gå i stykker; } //Sjekke mot diagonale retninger else if (i > 3 & & vinkel < _deviationFromDiagonals) {detectedDirection = i; gå i stykker; }} //Oppdatering musen sted for neste evaluering _earlier = _latter; } //Returnere oppdaget retning tilbake detectedDirection}

---


Trinn 14: Photo Gallery


Nå som MGesture klassen er satt, skal vi fortsette med en demo applikasjon (bildegalleri) av det. Jeg har tatt en kilde fil her. Må laste ned og følge med. Først av alt, får alle bildene inn i "lib" -mappen i din eksisterende prosjekt. Bilder jeg har brukt her er gjengitt med tillatelse av min kone og datter


---


Trinn 15:. Embed Images

Opprett en ny Action klasse og gi den navnet Photo. Vi skal bruke disse bildene for å bygge vårt galleri.



generere koden av bilder. De vil bli gjenkjent som en generisk klasse objekt.

1. Cast Class inn Bitmap objektene slik at vi kan manipulere det videre.
   
2. Sett alle disse Bitmap objekter i en Vector array for enkelt valg senere.
   product: [Bygg (kilde = '../lib/Week3.jpg')]private Var Week3: Klasse [Embed (kilde =' ../lib/Family.jpg')]private Var Familie: Klasse [ ,,,0],embed (kilde = '../lib/FatherDaughter.jpg')]private Var Datter: Klasse [embed (kilde =' ../lib/Jovial.jpg')]private Var Jovial: Klasse [embed (kilde = '. ./lib/NewBorn.jpg')]private Var nyfødte: Klasse [Bygg (kilde = '../lib/Posing.jpg')]private Var Posering: Klasse [Embed (kilde =' ../lib/Smile .jpg ')] private Var Smile: Klasse [Embed (kilde =' ../lib/Surrender.jpg')]private Var Surrender: Classprivate Var liste. Vector < Bitmap > = Ny < Bitmap > [Ny Week3 som Bitmap, ny familie som Bitmap, ny datter som Bitmap, ny Jovial som Bitmap, ny NewBorn som Bitmap, ny Posering som Bitmap, ny Smile som Bitmap, ny Week3 som Bitmap, ny Surrender som Bitmap]

   ---

   < h2> Trinn 16: Vis List Management
   

   Det er viktig å avklare her forvaltningen av Photovisningslisten. Jeg har tatt med en Flash-presentasjon her. For å bruke det, gjør en gest til høyre eller venstre. For ytterligere informasjon, se trinn 2.
   

   ---

   
   Trinn 17: Posisjonering Bilde
   

   
   

   I Photo konstruktør, initiere vi alle nødvendige visningsobjekter og plassere dem inn plass. Plus, initiere vi MGesture og fest arrangementer lytterne til å starte gest deteksjon. Jeg har fremhevet hendelsen lyttere. Sine detaljer er forklart i løpet av de to neste trinnene
   offentlig funksjon Photo () {panel = new Sprite (.); //Sette igang panel panel.x = stage.stageWidth /2; //Sentre panel horisontalt panel.y = stage.stageHeight /2; //Sentre panel vertikalt addChild (panel); Var currentBmp: int = 0; //Nåværende bilde valgt for posisjonering Var bmpGaps: Number = 60; //Mellomrom mellom bilder Var bmpOnX: int = 3; //Antall bilder på horisontale aksen Var bmpOnY: int = 3; //Antall bilder på vertikal akse Var bmp: Bitmap; //Bitmap objekt å holde image Var container: Sprite; //Sprite beholder å holde bmp //bla gjennom Y for (var j: int = -1 * Math.floor (bmpOnY /2); j < Math.ceil (bmpOnY /2); j ++) {//bla gjennom X for (var i: int = -1 * Math.floor (bmpOnX /2); i < Math.ceil (bmpOnX /2); i ++) {bmp = liste [currentBmp]; bmp.x = -1 * bmp.width /2; //Bitmap sentrert horisontalt i container bmp.y = -1 * bmp.height /2; //Bitmap sentrert vertikalt i container container = new Sprite (); container.x = (bmp.width + bmpGaps) * i; //Positioning container på x tilsvar container.y = (bmp.height + bmpGaps) * j; //Positioning container på y tilsvar container.addChild (bmp); //Legg bitmap inn container container.addEventListener (MouseEvent.MOUSE_DOWN, velg); panel.addChild (container); //Legg container i panelet currentBmp ++ //Bla til neste bitmap}} gest = new MGesture (scene); //Start MGesture for gest deteksjon stage.addEventListener (MouseEvent.MOUSE_DOWN, start);}

   ---

   
   Trinn 18: Velge bilde å skalere
   

   Linje 99 uthevet er ikke relatert til deteksjon av gest, men bare å velge bilde for skalering & . plassere den på toppen av alle andre bilder
   privat funksjon velge (e: MouseEvent): void {//Stille gjeldende bildet for å skalere & amp; //Å plassere den på toppen av alle andre bilder ImgSelected = e.currentTarget som Sprite; panel.swapChildrenAt (panel.numChildren - 1, panel.getChildIndex (ImgSelected));}

   ---

   
   Trinn 19: Start, End og evaluere Mouse Gesture
   

   Først funksjonen nedenfor er utført på mus ned. Den andre er utført på mus opp. Jeg har uthevet start () og evalGesture () samt vante lyttere
   privat funksjon start (e: MouseEvent):. Void {//Start gest deteksjon & amp; //Lytt etter musen opp hendelsen gesture.start (); stage.addEventListener (MouseEvent.MOUSE_UP, end);} private funksjon enden (e: MouseEvent): void {//Forbered nåværende gest magnitude for animasjon formål //gjennomføre et maksimalt tak på gest magnitude gestureMag = gesture.update () getMagnitude. () /2; gestureMag = Math.min (gestureMag, maxMag); //Evaluere dagens gest retning = gesture.evalGesture (); //Når en gyldig gest oppdages, utfører animasjons //Ingen ytterligere bevegelser vil bli oppdaget før animasjon avsluttes hvis (retning > -1) {stage.addEventListener (Event.ENTER_FRAME, flytte); stage.removeEventListener (MouseEvent.MOUSE_DOWN, start); }}

   ---

   
   Trinn 20: Animere panelet og Images

   Når skiltene har blitt oppdaget, animasjon vil begynne. Avhengig av gest gjort, kan hele panelet bevege seg i fire retninger eller ett enkelt bilde kan forstørre eller forminske
   privat funksjon flytte (e: Hendelses):. Void {var currentMag: Antall //Motion av panel oversettelse if (retning < 4) {//Funksjon lettelser bevegelse currentMag = gestureMag * Math.cos (currentAngle + = 0,1); if (retning == 0) panel.x + = currentMag; else if (retning == 1) panel.y + = currentMag; else if (retning == 2) panel.x - = currentMag; else if (retning == 3) panel.y - = currentMag; } //Motion bildeskalering else {//Innstilling maksimalt tak på bevegelse gestureMag = Math.min (0,30, gestureMag); //Funksjon lettelser bevegelse currentMag = gestureMag * Math.cos (currentAngle + = 0,1); //Forhold til å skalere opp: //Gesture er til Sør-Øst & amp; //Bildet er ikke skaleres opp allerede if (retning == 4 & & ImgSelected.scaleX < 1,30) {ImgSelected.scaleX = ImgSelected.scaleY = -1 * currentMag + 1,30} //betingelser for å skalere ned: //Gesture er til Nord-West & amp; //Bildet er skalert opp else if (retning == 6 & & ImgSelected.scaleX > 1) {ImgSelected.scaleX = ImgSelected.scaleY = currentMag + 1; }} //Hvis vinkel lettelser funksjon stiger 90 grader /0,5 Pi radian, //stop animasjon & amp; Aktiver gest deteksjon if (currentAngle > Math.PI /2) {stage.removeEventListener (Event.ENTER_FRAME, flytte); stage.addEventListener (MouseEvent.MOUSE_DOWN, start); retning = 1; //Reset retning currentAngle = 0; //Reset vinkel}}

   ---

   
   Trinn 21: Publiser Photoview
   

   Nå er alt er satt. Du kan endelig publisere arbeidet ved å trykke Ctrl + Enter på FlashDevelop. En gang til. her er en del av det endelige produktet.
   

   ---

   
   Konklusjon
   

   Dette er ikke slutten på det. I neste del skal vi se på påvisning av en gest sekvens, som vil bli enda mer interessant enn denne delen (som egentlig bare viste det grunnleggende). Må slippe kommentarer og gi meg beskjed hvis MGesture hadde vært nyttig for deg, samt eventuelle feil, hvis du møtt noen. Endelig terima kasih for lesing. Jeg håper å underholde mine andre lesere i del 2.
   

   
   
   
   Previous:Euklidske Vektorer i Flash
   Next Page:Effektivt Organisere Games Development Med en Game Design Document