Nesten alle PC brukergrensesnitt er utformet rundt ideen om å flytte en markør og klikke på objekter. Knapper, menyer, kombinationsbokser, lister og alle andre standardbrukerstyringsarbeid på denne måten. Musen brukes til å plassere markøren, og posisjonen til markøren brukes til å utføre en handling.
Det er et designparadigm som har fungert bra, men i det siste har nye teknologier som berøringsskjerm og bevegelsessensorer (tenk Wii) utfordret ideen om å bruke en mus, eller til og med å ha en markør på skjermen i det hele tatt ...
Langt før fokus på berøringsskjermene eller Wii introduserte programmer som Opera-nettleseren forestillingen om musebevegelser. Konseptet var enkelt: i stedet for å bruke posisjonen til markøren for å bestemme hvilken handling som skal utføres, ville bevegelsen av markøren selv indikere en handling. Så ved å flytte markøren i en sirkelbevegelse, vil du utløse en nettleser for å oppdatere. Ved å flytte den igjen, ville du gå tilbake i sideloggen, og ved å flytte den riktig ville du gå videre.
For Flash-utviklere er det et gratis musebibliotek som muliggjør denne typen interaksjon med svært liten innsats. For å demonstrere hvordan den brukes, oppretter vi en enkel videospiller som bruker musebevegelser, i stedet for knapper, for å endre videoavspillingen.
Trinn 1: Musbibliotek
Last ned Didier Bruns musbevegelsesbibliotek her (http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50540.aspx), og hent det til et passende sted.
Trinn 2: Ny applikasjon
Opprett et nytt Flex-webprogram og legg til musebevegelsesbiblioteket på listen over byggestier. Du kan få tilgang til egenskapen for byggevogn ved å velge Prosjekt> Egenskaper> Fleksibel byggevogn i Flex Builder.
Trinn 3: FLV
Du trenger en FLV-videofil for å teste programmet med. Demo-versjonen av IMToo FLV-konverteren (http://www.imtoo.com/flv-converter.html) vil konvertere korte videoer fra nesten alle format til FLV. Hvis du ikke har en samling av FLV-filmer som ligger rundt, er dette verktøyet ideelt for å konvertere nesten hvilken som helst gratis video du kan laste ned fra nettet. Jeg har konvertert en av demo-videoene som leveres med Vista for denne demoen.
Trinn 4: Programattributter
Du må endre noen av attributter til programelementet, som finnes i MXML-filen. Her har vi angitt bredden, høyden, bakgrunnsfarge (backgroundGradientColors) og gjennomsiktighet (backgroundGradientAlphas). Vi har også angitt appComplete-funksjonen som skal kalles som svar på programmetComplete-hendelsen. Dette gir oss et inngangspunkt i applikasjonen der musens gestus vil bli satt opp.
Trinn 5: mx: VideoDisplay
Legg til følgende mx: VideoDisplay-element som barn av mx: Programelement.
ID-attributtet tilordner et navn til VideoDisplay som vi kan referere fra ActionScript.
Øverst, bunn, venstre og høyre egenskaper definerer posisjonen til VideoDisplay.
Egenskapen AutoPlay er satt til falsk, noe som betyr at videoen ikke begynner å spilles med en gang.
Kildetributtet peker på plasseringen av videofilen. Hvis du har din egen FLV-videofil, må du endre denne attributtet for å peke på det.
MetadataReceived attributt peker på en funksjon som vil bli kalt en gang detaljene i videoen er lastet av VideoDisplay. Vi bruker dette for å finne ut hvor lenge videoen er, slik at vi kan endre maksimalverdien til HSlider.
PlayheadUpdate-attributten peker på en funksjon som vil bli kalt som videoen spilles. Dette tillater oss å spore den aktuelle posisjonen til videofilen, og oppdatere HSlider tilsvarende.
Trinn 6: mx: HSlider
Legg til følgende mx: HSlider element som barn av mx: Application Element
ID-attributtet tilordner et navn til VideoDisplay som vi kan referere fra ActionScript.
Øverst, bunn, venstre og høyre egenskaper definerer posisjonen til VideoDisplay.
Endringsattributtet definerer en funksjon som skal kalles når brukeren endrer glidebryterens posisjon.
Trinn 7: Grensesnitt
Du bør nå ha en GUI som ser ut som den nedenfor.
Trinn 8: mx: Skript
Legg til et mx: Script element som et barn av mx: Application. Dette elementet vil inneholde ActionScript-koden for vår søknad.
Trinn 9: Importer pakker
Vi må importere en rekke pakker. Dette gjøres inne i mx: Script-elementet. Tre klasser fra mx.events-pakken, MetadataEvent, SliderEvent og VideoEvent, brukes som parametere i hendelseslytterfunksjoner. Pakken com.foxaweb.ui.gesture inkluderer klassene fra musebasert biblioteket.
En rekke konstanter er da definert. VIDEO_STEP-konstanten definerer hvor mye tid videoens nåværende posisjon vil bli flyttet av når vi går fremover eller bakover. De andre strengene definerer alle navnene på handlinger som vil bli knyttet til musebevegelser. Generelt er det forsiktig å kartlegge strenger til konstanter når de brukes som en identifikasjon, da det tillater kompilatoren å hente feilstavinger som hvis (handling == SETP_FORWARD), i stedet for å kjøre inn problemer ved kjøring med feilstavede strenger som hvis (handling == "setp_forward").
Den siste variabelen vi må definere, er en referanse til et MouseGesture-objekt. Det er dette objektet som implementerer logikken for musebevegelsene.
private var mg: MouseGesture = null;
Trinn 12: Ny funksjon
Legg til en ny funksjon kalt appComplete. Dette er den funksjonen vi tilordnet til ApplicationComplete-attributtet i mx: Programelement. Det er her at vi vil initialisere musebevegelsene.
Først oppretter vi et nytt MouseGesture-objekt. MouseGesture-konstruktøren må sendes en referanse til scenen for å kunne reagere på museventyr.
mg = ny MouseGesture (this.stage);
Deretter definerer vi et antall musebesetninger. En musebevegelse er definert som en sekvens av musebevegelser, med tall som representerer bevegelsesretninger som i bildet nedenfor. Alle musebevegelser starter ved å klikke på venstre museknapp og slutte med at knappen slippes ut.
For en enkel gest hvor musen flyttes i en rett linje, bruker vi en streng med et enkelt nummer i den. Her er "spill" musebevegelsen definert som musebevegelse i en enkelt retning, høyre, som er representert ved tallet 0.
mg.addGesture (PLAY, "0");
På samme måte er "stopp" og "pause" -musebesetningen definert som musebevegelser ned og til venstre.
Den "step_forward" musebevegelsen er mer kompleks. Det er definert som en halv sirkel musbevegelse, starter til venstre og deretter flyttes over og til høyre. Den røde pilen viser starten på bevegelsen.
Denne bevegelsen er definert av strengen "67012". Du kan se hvordan denne strengen er avledet ved å matche bevegelsen av musen med tallene som er tildelt disse bevegelsene. Vi går oppover (6), diagonalt opp og til høyre (7), venstre (0), diagonalt ned og til høyre (1) og deretter ned (2).
mg.addGesture (STEP_FORWARD, "67012");
"Step_backward" er definert på samme måte, bare denne gangen er det en halv sirkelmusbevegelse, starter til høyre og deretter flyttes over og til venstre.
mg.addGesture (STEP_BACKWARD, "65432");
Vi tilordner deretter matchHandler-funksjonen som skal ringes når en musebeslutning er blitt oppdaget.
MatchHandler-funksjonen kalles når en musebevegelse er oppdaget. Hendelsesparameteren inneholder en egenskap som heter data, som vil matche en av konstantene vi tilordnet museventilene i appComplete-funksjonen. Avhengig av musebevegelsen som har blitt oppdaget, utfører vi bestemte handlinger på VideoDisplay. Spillet, stopp og pause handlinger er helt rett fremover. Med step_forward og step_backward handlingene øker eller reduserer du enten playheadTime-egenskapen til VideoDisplay, noe som medfører at du hopper fremover eller bakover.
private funksjon matchHandler (event: GestureEvent): void switch (event.datas) tilfelle PLAY: this.videoPlayer.play (); gå i stykker; tilfelle STOP: this.videoPlayer.stop (); gå i stykker; tilfelle PAUSE: this.videoPlayer.pause (); gå i stykker; tilfelle STEP_FORWARD: var newFowardTime: Number = this.videoPlayer.playheadTime + VIDEO_STEP; mens (newFowardTime> this.videoPlayer.totalTime) newFowardTime = this.videoPlayer.totalTime; this.videoPlayer.playheadTime = newFowardTime; gå i stykker; tilfelle STEP_BACKWARD: var newBackwardTime: Number = this.videoPlayer.playheadTime - VIDEO_STEP; hvis (newBackwardTime < 0) newBackwardTime = 0; this.videoPlayer.playheadTime = newBackwardTime; break;
Trinn 15: HSlider
Denne demoen handler om å modifisere videoavspillingen ved hjelp av musebesetninger, men for enkelhets skyld kan en HSlider også brukes. MetadataReceived-funksjonen kalles når VideoDisplay har lastet metadataene, som inkluderer videoens totale lengde. I denne funksjonen setter vi den maksimale verdien av skyveknappen til total lengde på videoen. Vi aktiverer deretter glidebryteren - til vi vet hvor lenge videoen er, kan glidebryteren ikke brukes til å stille inn posisjonen.
Posisjonen til glidebryteren må holdes synkronisert med videoens nåværende avspillingsposisjon. Funksjonen playHeadUpdate kalles jevnlig av VideoDisplay, og det er her at vi setter verdien av HSlider til playheadTime of VideoDisplay.
Skyvekontrollen kan også brukes til å endre videoens nåværende avspillingsposisjon. Her gjør vi omvendt av playHeadUpdate-funksjonen, og stiller PlayheadTime av VideoDisplay til verdien av HSlider.
Når du laster opp søknaden, bør du se videofilen. Fordi vi stiller AutoPlay-attributtet til VideoDisplay-objektet til feil, stoppes videoen, og viser den første rammen.
Klikk på venstre museknapp, flytt musen til venstre og slipp knappen, og videoen skal spilles av. Klikk, flytt musen ned og slipp, og videoen skal pause. Klikk, flytt musen i en topp halvcirkel fra venstre til høyre og slipp, og du bør se videoen hoppe et sekund fremover.
En annen fordel med musebevegelser er at de fjerner behovet for andre brukergrensesnittkontroller, noe som kan være en stor fordel når skjermrommet er minst (som bannerannonser). Du kan til og med bruke dem til de "feed the monkey" eller "gjøre de fleste chin-ups" bannerannons spill.
Musbevegelser er veldig enkle å implementere i Flash, og de gir en intuitiv måte å samhandle med en PC på. Med bare noen få linjer med kode kan du omdefinere hvordan brukere samhandler med søknaden din, og de frigjør skjermrommet som var reservert for mer tradisjonelle brukergrensesnittkomponenter.
Share
Accentsconagua
