Using Native flerberøringsbevegelser i Actionscript 3.0
to
Del
3
Del
Dette Cyber Mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter GreenSock Tweening Platform.Creating en virtuell joystick for berørings DevicesWeekend Presentasjon. GreenSock ThrowProps Plugin
I denne opplæringen vil vi lære å implementere innfødte flerberøringsbevegelser å bruke i programmene dine. Les videre
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Merk: Denne eksempel vil fungere bare på multitouch-enheter (tabletter, smarttelefoner, Berøringsskjerm Datamaskiner og multitouch styreflater under luft).
Merk for Android-brukere: Multitouch vil ikke kjøre i SWF innebygd i en HTML-side i en Android-nettleseren, men Source nedlastingen gjør inkluderer APK du kan bruke til å sjekke det ut. (Vær oppmerksom på at APK er bare for hensikten med en rask demonstrasjon av bevegelsene selv, og viser ikke helt riktig.)
Du kan knipe for å zoome, spin å rotere, og sveip for å endre image . Sjekk ut videoen demo hvis du ikke klarer å teste forhåndsvisning på enheten:
Trinn 1: Kort oversikt
Vi vil bruke morsMultiTouch-støtte innebygd i Flash Player for å skape en gest-baserte bilde søknad
Trinn 2:. Flash Dokumentinnstillinger
Launch Flash og opprette et nytt dokument. Satt scenen størrelse til 600x300px, og bildefrekvensen til 24fps
Trinn 3:. Interface
Grensesnittet vil være svært enkelt, bare et bilde i den fasen som vil bli modifiserte av gester
Trinn 4:. Få Noen Images
Vi trenger noen bilder for å teste vår søknad, velger dem fra din personlige samling eller laste noen for testing.
Dette er bildene fra demoen, hentet fra Flickr, alle med en Creative Commons License.
Grass 01 av 100kr
dyp innflytelse på planeten farge ved spettacolopuro
Yosemite: høstfarger ved tibchris
< p> Flower av Antonio Manchado
Trinn 5: Eksport For Action
Konverter et av bildene til et filmklipp, og tilsett resten av bildene til det klippet i ulike rammer . Navn klippet SlideItem Hotell og markere Eksporter for Action Vi vil bruke en annen tween-motoren fra standard inkludert i Flash, vil dette øke ytelsen samt å være enklere å bruke. Du kan laste TweenNano fra sin offisielle hjemmeside. Anmeldelser Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Main.as Lag din grunnleggende klassestrukturen for å begynne å skrive kode Dette er de klassene vi trenger å importere for vår klasse til å arbeide, import Dette er de variablene vi? ll bruk, lese kommentarene i koden for å finne ut mer om dem Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse, er den første til å utføre denne koden . når du gjør en forekomst av et objekt eller kjører ved hjelp av Document Class Det utfører de nødvendige tiltak for å starte programmet Denne linjen forteller Flash Player for å identifisere den multi-touch-modus for berøring og bevegelse hendelseshåndtering Les. mer om dette på help.adobe.com La oss instantiate bildene som vil svare til de gest hendelser Denne funksjonen legger til eller fjerner gest lyttere avhengig av angitte parameter Dette betyr at lyttere () Denne funksjonen reagerer på den velkjente klype Rotasjon håndteres av denne funksjonen, to fingre brukes til spin Pan-funksjonen brukes for å flytte bildet for å se deler som er off-stage Denne funksjonen er litt større på grunn av de fire swipe retninger. Gest er lik som fra forrige trinn, men fastere, og i stedet for bare å flytte bildet rundt, bytter det det for et annet bilde. Det første sjekker om en tidligere varen er på scenen og butikker det i en beholder for å lom det og være i stand til å fjerne det senere. Deretter offset Når animasjonen er ferdig, elementet utenfor scenen er ødelagt for å spare minne Vi vil gjøre bruk av dokument klasse i denne opplæringen, hvis du ikke vet hvordan du skal bruke det eller er litt forvirret kan du lese dette Quick Tips. Gestures legge til en fin trykk Hotell og og tilbyr god samhandling i programmet, bruk dem! Takk for at du leser denne opplæringen, jeg håper du har funnet det nyttig! Anmeldelser
boks
Trinn 6:. TweenNano
Trinn 7:. New Action Class
i klassen mappen Anmeldelser
Trinn 8:. Class Struktur
pakke {import flash.display.Sprite; public class Hoved strekker Sprite {offentlig funksjon main (): void {//konstruktør kode}}}
Trinn 9: Må Classes
direktivet gjør eksternt definerte klasser og pakker tilgjengelig i koden
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;
Trinn 10: Variabler
privat Var slideItem: SlideItem;. //Objektet som vil bli berørt av gesturesprivate Var tempContainer: Sprite; //En tom sprite som vil lagre lysbilde elementet
Trinn 11: Constructor
offentlig endelige funksjonen main (). void {//Kode}
Trinn 12: Aktiver Gestures Input
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Trinn 13:.. Slide Sak
slideItem = new SlideItem ( ); /* Hindrer bildet fra skiftende * /slideItem.stop (); /* Sentrer bilde * /slideItem.x = stage.stageWidth * 0,5; slideItem.y = stage.stageHeight * 0,5; addChild (slideItem); lyttere ("Legg til", slideItem); //se neste trinn
Trinn 14: Legg Lyttere
private endelige funksjons lyttere (handling. String, target: Sprite): void {if (handling == 'legge') {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); }}
funksjon kalt i forrige trinn vil legge hendelsen lyttere å skyve bildet, for å gjøre det lytte for zooming, panorering, rotering og sveipe bevegelser.
Trinn 15: Knip for å zoome
gest. Det håndterer bilde zoome inn og ut
privat endelige funksjon onZoom (e: TransformGestureEvent):. Void {/* Bruk hendelsesdata for å skalere målbildet * /e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;}
Trinn 16: Spin å Roter
image i den fasen
private endelige funksjon onRotate (e: TransformGestureEvent):. void {/* Bruk hendelsesdata for å rotere målbildet * /e.target.rotation + = e.rotation;}
Trinn 17:. Slide til Pan
privat endelige funksjon onPan (e: TransformGestureEvent): void {e.target. x + = e.offsetX; e.target.y + = e.offsetY;}
Trinn 18: Sveip til Bytt
eiendom blir lest for å bestemme retningen av sveip, viser den tilsvarende animasjon og bilde
privat endelige funksjon onSwipe. (E: TransformGestureEvent): void {/* Sjekk om bildet er på stadium * /if (! slideItem = null) {tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); } /* Endre Images * /if (e.offsetX == 1) {//høyre slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.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}); } If (e.offsetX == -1) {//venstre slideItem = new SlideItem (); slideItem.gotoAndStop (2); slideItem.x = stage.stageWidth + slideItem.width; slideItem.y = stage.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}); } If (e.offsetY == -1) {//opp slideItem = new 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}); } If (e.offsetY == 1) {//ned slideItem = new 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}); }}
Trinn 19: Fjern Siste Slide Sak
privat endelige funksjon removeLast (). void {lyttere ( "fjern", tempContainer.getChildAt (0) som Sprite); removeChild (tempContainer); tempContainer = null;}
Trinn 20: Sett Hoved Class
Konklusjon