Bijna alle pc-gebruikersinterfaces zijn ontworpen rond het idee een cursor te verplaatsen en op objecten te klikken. Knoppen, menu's, keuzelijsten met invoervak, lijsten en elke andere standaard UI-besturing werken op deze manier. De muis wordt gebruikt om de cursor te plaatsen en de positie van de cursor wordt gebruikt om een actie uit te voeren.
Het is een ontwerpparadigma dat goed heeft gewerkt, maar de laatste tijd hebben nieuwe technologieën zoals touchscreens en bewegingssensoren (denk aan de Wii) het idee van het gebruik van een muis uitgedaagd, of zelfs helemaal een cursor op het scherm ...
Lang voor de focus op touchscreens of de Wii introduceerden programma's zoals de Opera-webbrowser het begrip muisbewegingen. Het concept was eenvoudig: in plaats van de positie van de cursor te gebruiken om te bepalen welke actie moest worden uitgevoerd, zou de beweging van de cursor zelf een actie aangeven. Dus door de cursor in een cirkelvormige beweging te verplaatsen, activeert u een webbrowser om deze te vernieuwen. Door deze naar links te verplaatsen, ga je terug in de paginageschiedenis en door naar rechts te gaan, kom je verder.
Voor Flash-ontwikkelaars is er een gratis muisbewegingsbibliotheek die dit soort interactie met zeer weinig inspanning mogelijk maakt. Om te demonstreren hoe het wordt gebruikt, maken we een eenvoudige videospeler die muisbewegingen gebruikt in plaats van knoppen om de video te wijzigen.
Stap 1: Mouse Gesture Library
Download de muisgebarenbibliotheek van Didier Brun hier (http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50540.aspx) en pak het uit op een handige locatie.
Stap 2: Nieuwe applicatie
Maak een nieuwe Flex-webtoepassing en voeg de muisbewegingsbibliotheek toe aan de lijst met buildpaden. U hebt toegang tot de eigenschap build path door Project> Properties> Flex Build Path te selecteren in Flex Builder.
Stap 3: FLV
U hebt een FLV-videobestand nodig om de toepassing mee te testen. De demoversie van de IMToo FLV-converter (http://www.imtoo.com/flv-converter.html) converteert korte video's van bijna elk formaat naar FLV. Als u geen verzameling FLV-films rondslingeren, is deze tool ideaal voor het converteren van bijna elke gratis video die u van internet kunt downloaden. Ik heb een van de demovideo's die met Vista worden geleverd voor deze demo geconverteerd.
Stap 4: Applicatieattributen
U moet enkele kenmerken van het Application-element wijzigen in het MXML-bestand. Hier hebben we de breedte, hoogte, achtergrondkleur (backgroundGradientColors) en transparantie (backgroundGradientAlphas) opgegeven. We hebben ook de functie appComplete ingesteld om te worden aangeroepen als reactie op de gebeurtenis applicationComplete. Dit geeft ons een toegangspunt in de toepassing waar de muisbewegingen worden ingesteld.
Stap 5: mx: VideoDisplay
Voeg het volgende mx: VideoDisplay-element toe als onderliggende component van het mx: Application-element.
Het id-attribuut geeft een naam aan het VideoDisplay waaraan we kunnen refereren vanuit ActionScript.
De eigenschappen boven, onder, links en rechts bepalen de positie van het VideoDisplay.
Het kenmerk autoPlay is ingesteld op false, wat betekent dat de video niet meteen wordt afgespeeld.
Het bronattribuut verwijst naar de locatie van het videobestand. Als je een eigen FLV-videobestand hebt, moet je dit kenmerk wijzigen om ernaar te verwijzen.
Het attribuut MetadataReceived verwijst naar een functie die wordt aangeroepen zodra de details van de video door het VideoDisplay zijn geladen. We gebruiken dit om uit te zoeken hoe lang de video is, zodat we de maximale waarde van de HSlider kunnen wijzigen.
Het kenmerk playheadUpdate verwijst naar een functie die wordt aangeroepen terwijl de video wordt afgespeeld. Dit stelt ons in staat om de huidige positie van het videobestand te volgen en de HSlider dienovereenkomstig bij te werken.
Stap 6: mx: HSlider
Voeg de volgende mx toe: HSlider-element als een onderliggende waarde van de mx: Application Element
Het id-attribuut geeft een naam aan het VideoDisplay waaraan we kunnen refereren vanuit ActionScript.
De eigenschappen boven, onder, links en rechts bepalen de positie van het VideoDisplay.
Het wijzigingskenmerk definieert een functie die moet worden aangeroepen wanneer de gebruiker de positie van de schuifregelaar wijzigt.
Stap 7: Interface
U zou nu een GUI moeten hebben die er als volgt uitziet.
Stap 8: mx: Script
Voeg een mx toe: Script element als een kind van mx: Application. Dit element bevat de ActionScript-code voor onze toepassing.
Stap 9: Pakketten importeren
We moeten een aantal pakketten importeren. Dit gebeurt in het mx: Script-element. Drie klassen van het pakket mx.events, MetadataEvent, SliderEvent en VideoEvent, worden gebruikt als de parameters in de listenerfuncties van de gebeurtenis. Het pakket com.foxaweb.ui.gesture bevat de klassen uit de muisbewegingsbibliotheek.
Een aantal constanten worden vervolgens gedefinieerd. De constante VIDEO_STEP bepaalt hoeveel tijd de huidige positie van de video wordt verplaatst wanneer we naar voren of naar achteren gaan. De andere tekenreeksen definiëren allemaal de namen van acties die aan muisbewegingen worden gekoppeld. In het algemeen is het verstandig strings toe te wijzen aan constanten wanneer ze worden gebruikt als een identificatie, omdat het de compiler toelaat om spelfouten op te nemen zoals if (actie == SETP_FORWARD), in plaats van het tegenkomen van problemen tijdens runtime met verkeerd gespelde strings zoals if (action == "setp_forward").
De laatste variabele die we moeten definiëren, is een verwijzing naar een MouseGesture-object. Het is dit object dat de logica implementeert voor de muisbewegingen.
private var mg: MouseGesture = null;
Stap 12: Nieuwe functie
Voeg een nieuwe functie toe, appComplete. Dit is de functie die we hebben toegewezen aan het kenmerk applicationComplete in het element mx: Application. Hier zullen we de muisbewegingen initialiseren.
Eerst maken we een nieuw MouseGesture-object. De MouseGesture-constructor moet een verwijzing naar de fase worden doorgegeven om te reageren op muisgebeurtenissen.
mg = nieuw MouseGesture (dit.stage);
Vervolgens definiëren we een aantal muisbewegingen. Een muisgebaar wordt gedefinieerd als een reeks muisbewegingen, waarbij de cijfers de bewegingsrichtingen weergeven volgens de onderstaande afbeelding. Alle muisbewegingen beginnen met het klikken op de linkermuisknop en eindigen met het loslaten van de knop.
Voor een eenvoudig gebaar waarbij de muis in een rechte lijn wordt verplaatst, gebruiken we een reeks met een enkel nummer erin. Hier wordt de muismogelijkheid "afspelen" gedefinieerd als muisbeweging in een enkele richting, rechts, die wordt vertegenwoordigd door het cijfer 0.
mg.addGesture (PLAY, "0");
Evenzo worden de muisbewegingen "stop" en "pauze" gedefinieerd als bewegingen van de muis naar beneden en naar links.
Het "step_forward" muisgebaar is complexer. Het wordt gedefinieerd als een muisbeweging van een halve cirkel, beginnend aan de linkerkant en dan over en naar rechts. De rode pijl geeft het begin van de beweging aan.
Deze beweging wordt gedefinieerd door de tekenreeks "67012". U kunt zien hoe deze tekenreeks wordt afgeleid door de beweging van de muis aan te passen aan de nummers die aan die bewegingen zijn toegewezen. We gaan omhoog (6), diagonaal naar boven en naar rechts (7), naar links (0), diagonaal naar beneden en naar rechts (1) en dan naar beneden (2).
mg.addGesture (STEP_FORWARD, "67012");
De "step_backward" wordt op dezelfde manier gedefinieerd, alleen deze keer is het een halve cirkel muisbeweging, beginnend aan de rechterkant en dan bewegend naar links.
mg.addGesture (STEP_BACKWARD, "65432");
Vervolgens wijzen we de matchHandler-functie toe die moet worden aangeroepen wanneer een muisbeweging is gedetecteerd.
De matchHandler-functie wordt aangeroepen wanneer een muisbeweging is gedetecteerd. De parameter event bevat een eigenschap met de naam data, die overeenkomt met een van de constanten die is toegewezen aan de muisgebeurtenissen in de functie appComplete. Afhankelijk van de muisgebaar die is gedetecteerd, voeren we bepaalde acties uit op het VideoDisplay. De acties voor afspelen, stoppen en pauzeren zijn allemaal redelijk eenvoudig. Met de step_forward- en step_backward-acties verhogen of verlagen we de eigenschap playheadTime van het VideoDisplay, waardoor het vooruit of achteruit springen overheerst.
private function matchHandler (event: GestureEvent): void switch (event.datas) case PLAY: this.videoPlayer.play (); breken; case STOP: this.videoPlayer.stop (); breken; geval PAUSE: this.videoPlayer.pause (); breken; case STEP_FORWARD: var newFowardTime: Number = this.videoPlayer.playheadTime + VIDEO_STEP; while (newFowardTime> this.videoPlayer.totalTime) newFowardTime = this.videoPlayer.totalTime; this.videoPlayer.playheadTime = newFowardTime; breken; case STEP_BACKWARD: var newBackwardTime: Number = this.videoPlayer.playheadTime - VIDEO_STEP; if (newBackwardTime < 0) newBackwardTime = 0; this.videoPlayer.playheadTime = newBackwardTime; break;
Stap 15: HSlider
Deze demo gaat helemaal over het wijzigen van het afspelen van video met behulp van muisbewegingen, maar voor het gemak kan een HSlider ook worden gebruikt. De metadataReceived-functie wordt opgeroepen zodra het VideoDisplay de metadata heeft geladen, inclusief de totale lengte van de video. In deze functie stellen we de maximale waarde van de schuifregelaar in op de totale lengte van de video. Vervolgens schakelen we de schuifregelaar in - totdat we weten hoe lang de video is, kan de schuif niet worden gebruikt om de positie in te stellen.
De positie van de schuifregelaar moet worden gesynchroniseerd met de huidige afspeelpositie van de video. De functie playHeadUpdate wordt met regelmatige tussenpozen door het VideoDisplay genoemd, en hier stellen we de waarde van de HSlider in op de playheadTime van het VideoDisplay.
De schuifregelaar kan ook worden gebruikt om de huidige afspeelpositie van de video te wijzigen. Hier doen we het omgekeerde van de functie playHeadUpdate en stellen de playheadTime van het VideoDisplay in op de waarde van de HSlider.
private function videoPositionChanged (event: SliderEvent): void this.videoPlayer.playheadTime = this.videoPosition.value;
Conclusie
Wanneer je de applicatie laadt, zou je het videobestand moeten zien. Omdat we het kenmerk autoPlay van het object VideoDisplay op false hebben ingesteld, wordt de video gestopt en wordt het eerste frame weergegeven.
Klik met de linkermuisknop, beweeg de muis naar links en laat de knop los, en de video zou moeten spelen. Klik, beweeg de muis naar beneden en laat los, en de video zou moeten pauzeren. Klik, beweeg de muis in een bovenste halve cirkel van links naar rechts en laat los, en je zou de video een seconde verderop moeten zien overslaan.
Een ander voordeel van muisbewegingen is dat ze de behoefte aan andere UI-bedieningselementen verwijderen, wat een enorm voordeel kan zijn als de schermruimte minimaal is (zoals banneradvertenties). Je zou ze zelfs kunnen gebruiken voor de banneradvertentiespellen "voer de aap" of "doe de meeste chin-ups".
Muisbewegingen zijn heel eenvoudig in Flash te implementeren en bieden een intuïtieve manier om met een pc te communiceren. Met slechts enkele coderegels kunt u opnieuw definiëren hoe gebruikers omgaan met uw toepassing en maken zij de schermruimte vrij die gereserveerd was voor traditionelere UI-componenten.
Bedankt voor het lezen, ik hoop dat je iets hebt geleerd!
Share
Accentsconagua
