Share
In deze zelfstudie leren we hoe u native multitouch-bewegingen kunt implementeren voor gebruik in uw toepassingen. Lees verder!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Opmerking: dit voorbeeld werkt alleen op Multitouch-apparaten (tablets, smartphones, aanraakschermcomputers en Multitouch-trackpads onder AIR).
Opmerking voor Android-gebruikers: Multitouch wordt niet uitgevoerd in de SWF die is ingesloten in een HTML-pagina in een Android-browser, maar de brondownload bevat wel een APK die u kunt gebruiken om deze uit te checken. (Houd er rekening mee dat de APK alleen bedoeld is om de bewegingen zelf snel te demonstreren en niet helemaal correct wordt weergegeven.)
U kunt knijpen om te zoomen, draaien om te draaien en vegen om de afbeelding te wijzigen. Bekijk de videodemo als u het voorbeeld op uw apparaat niet kunt testen:
We gebruiken de ingebouwde Multitouch-ondersteuning die is ingebouwd in de Flash Player om een op bewegingen gebaseerde afbeeldingsapplicatie te maken.
Start Flash en maak een nieuw document. Stel de stage-grootte in op 600x300 px en de framesnelheid op 24 fps.
De interface zal heel eenvoudig zijn, alleen een afbeelding in de fase die vervolgens door de bewegingen wordt aangepast.
We hebben enkele afbeeldingen nodig om onze applicatie te testen, ze uit uw persoonlijke verzameling te kiezen of een paar te downloaden om te testen.
Dit zijn de afbeeldingen van de demo, verkregen van Flickr, allemaal met een Creative Commons-licentie.
Gras 01 van 100kr
diepe impact op de planeetkleur door spettacolopuro
Yosemite: herfstkleuren door tibchris
Bloem door Antonio Manchado
Converteer een van de afbeeldingen naar een filmclip en voeg de rest van de afbeeldingen toe aan die clip in verschillende kaders. Geef de clip een naam SlideItem en markeer de Exporteren voor ActionScript doos.
We gebruiken een andere tween-engine dan de standaard in Flash, dit verhoogt de prestaties en is gemakkelijker in gebruik.
Je kunt TweenNano downloaden van de officiële website.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Maak uw standaard klassenstructuur om te beginnen met het schrijven van uw code.
pakket import flash.display.Sprite; public class Hoofd breidt uit openbare functie Main (): void // constructor code
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
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;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten te komen.
privé var slideItem: SlideItem; // Het object dat wordt beïnvloed door de bewegingen private var tempContainer: Sprite; // Een lege sprite die het dia-item opslaat
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wordt uitgevoerd met behulp van de documentklasse.
Het voert de nodige acties uit om de applicatie te starten.
public final function Main (): void // Code
Deze regel vertelt de Flash Player om de multi-touch-modus te identificeren voor de afhandeling van aanraak- en gebarengebeurtenissen.
Multitouch.inputMode = MultitouchInputMode.GESTURE;
Lees hier meer over op help.adobe.com.
Laten we de afbeeldingen plaatsen die reageren op de gebarengebeurtenissen.
Accentsconagua
slideItem = nieuwe SlideItem (); / * Voorkomt dat het beeld verandert * / slideItem.stop (); / * Centreer de afbeelding * / slideItem.x = stage.stageWidth * 0.5; slideItem.y = stage.stageHeight * 0.5; addChild (slideItem); luisteraars ('add', slideItem); // zie de volgende stap Met deze functie worden de gebarenlisteners toegevoegd of verwijderd, afhankelijk van de opgegeven parameter.
private final-functie luisteraars (actie: String, doel: 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);
Dit betekent dat de luisteraars () functie die in de vorige stap is genoemd, voegt gebeurtenislisteners toe aan de glijdende afbeelding, zodat deze luistert naar zoomen, pannen, draaien en vegen met gebaren.
Deze functie reageert op het bekende knijpen gebaar. Het behandelt de afbeelding inzoomen en uitzoomen.
private finale functie onZoom (e: TransformGestureEvent): void / * Gebruik de gebeurtenisgegevens om de doelafbeelding te schalen * / e.target.scaleX * = e.scaleX; e.target.scaleY * = e.scaleY;
Rotatie wordt afgehandeld door deze functie, waaraan twee vingers gewend zijn spinnen het beeld in het werkgebied.
private final-functie onRotate (e: TransformGestureEvent): void / * Gebruik de gebeurtenisgegevens om de doelafbeelding * / e.target.rotation + = e.rotation te roteren;
De Pan-functie wordt gebruikt om de afbeelding te verplaatsen om delen te zien die off-stage zijn.
privé-finale functie onPan (e: TransformGestureEvent): void e.target.x + = e.offsetX; e.target.y + = e.offsetY;
Deze functie is iets groter vanwege de vier beschikbare veegrichtingen. Het gebaar lijkt op dat van de vorige stap, maar is steviger en in plaats van simpelweg het beeld te verplaatsen, verwisselt het het voor een ander beeld.
Het controleert eerst of een vorig item zich op het podium bevindt en slaat het op in een container om het te kunnen tweenen en later te kunnen verwijderen. Dan de compenseren eigenschap wordt gelezen om de richting van de veeg vast te stellen, waarbij de bijbehorende animatie en afbeelding worden weergegeven.
private final-functie onSwipe (e: TransformGestureEvent): void / * Controleer of afbeelding op scène staat * / if (slideItem! = null) tempContainer = new Sprite (); tempContainer.addChild (slideItem); addChild (tempContainer); / * Afbeeldingen wijzigen * / if (e.offsetX == 1) // right slideItem = new SlideItem (); slideItem.gotoAndStop (1); slideItem.x = -slideItem.width; slideItem.y = stage.stageHeight * 0.5; luisteraars ('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; luisteraars ('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; luisteraars ('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; luisteraars ('add', slideItem); addChild (slideItem); TweenNano.to (tempContainer, 0.5, y: slideItem.height, onComplete: removeLast); TweenNano.to (slideItem, 0.5, y: stage.stageHeight * 0.5); Wanneer de animatie is voltooid, wordt het item buiten het podium vernietigd om geheugen te besparen.
private laatste functie removeLast (): void listeners ('remove', tempContainer.getChildAt (0) als Sprite); removeChild (tempContainer); tempContainer = null; 
We zullen de Document Class gebruiken in deze tutorial, als je niet weet hoe je het moet gebruiken of een beetje in de war bent, lees dan dit Quick Tip.
Gebaren voegen een leuke toe aanraken en en bieden geweldige interactie in uw toepassing, gebruik ze!
Bedankt voor het lezen van deze tutorial. Ik hoop dat je het nuttig hebt gevonden!
