Control en Flex Video Søknad Bruke Mouse Gestures
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Nesten alle PC brukergrensesnitt er designet rundt tanken om å flytte en markør og klikke på objekter. Knapper, menyer, kombinasjonsbokser, lister og alle andre standard UI kontroll arbeids på denne måten. Musen brukes til å plassere markøren, og plasseringen av markøren brukes til å utføre en handling.
Det er et design paradigme som har fungert godt, men i det siste nye teknologier som berøringsskjermer og bevegelsessensorer (tror Wii) har utfordret forestillingen om å bruke en mus, eller engang å ha en markør på skjermen i det hele tatt ..
Lenge før fokus på berøring skjermer eller Wii, programmer som Opera nettleser introduserte begrepet musebevegelser. Konseptet var enkelt: I stedet for å bruke posisjonen til markøren for å avgjøre hvilke tiltak som skal utføre, vil bevegelse av markøren i seg selv indikerer en handling. Så ved å flytte markøren i en sirkulær bevegelse du ville utløse en nettleser for å oppdatere. Ved å flytte den forlot du vil gå tilbake på siden historie, og ved å flytte det høyre du ville gå videre.
For Flash-utviklere det er en gratis mus gest bibliotek som gjør at denne type samhandling med svært liten innsats. For å demonstrere hvordan det brukes, vil vi lage en enkel video spiller som bruker musebevegelser, snarere enn knapper, for å endre videoavspillingen
Trinn 1:. Mouse Gesture Library
Last ned Didier Bruns mus gest biblioteket her (http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50540.aspx), og pakke den til et passende sted
Trinn 2:. Nytt program
Opprett en ny Flex webapplikasjon og tilsett mus gest biblioteket til listen over bygge baner. Du kan få tilgang til bygge banen eiendom ved å velge Prosjekt > Properties > Flex Bygg Sti innenfor Flex Builder
Trinn 3:. FLV
Du trenger en FLV video fil til å teste programmet med. Demoversjonen av ImTOO FLV omformer (http://www.imtoo.com/flv-converter.html) vil konvertere korte videoer fra nesten alle formater til FLV. Hvis du ikke har en samling av FLV filmer liggende rundt, er dette verktøyet ideelt for å konvertere nesten alle gratis video du kan laste ned fra nettet. Jeg har konvertert en av demo videoer som leveres med Vista for demo
Trinn 4:. Søknad attributter
Du må endre noen av attributtene til Application element, som finnes i MXML filen. Her har vi spesifisert bredde, høyde, bakgrunnsfarge (backgroundGradientColors) og gjennomsiktighet (backgroundGradientAlphas). Vi har også satt den appComplete funksjonen til å bli kalt inn som svar på applicationComplete hendelsen. Dette gir oss et inngangspunkt i søknaden hvor musebevegelser vil bli satt opp
< mx.: Søknad xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolutt" width = "600" height = "400" applicationComplete = "appComplete ()" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# 000000, # 000000]" > < /mx: Søknad >
Trinn video fremstilling id = "videospiller" autokjør = "false" bottom = "30:; 5: mx: video fremstilling
Legg til følgende mx:: video fremstilling element som et barn av MX
< Application element. "top =" 10 "igjen =" 10 "rett =" 10 "source =" Butterfly.flv "metadataReceived =" metadataReceived (event) "playheadUpdate =" playHeadUpdate (event) "/>
id attributt tildeler en navngi til video fremstilling at vi kan referere fra Actionscript.
øverst, nederst, venstre og høyre egenskaper definerer plasseringen av video fremstilling.
Autokjør-attributtet satt til false, noe som betyr at Videoen vil ikke begynne å spille med en gang.
Kildeattributtet poeng til plasseringen av videofilen. Hvis du har din egen FLV video fil, så må du endre dette attributtet til å peke på det.
De metadataReceived attributt poeng til en funksjon som skal kalles når detaljene i videoen har blitt lastet av video fremstilling. Vi bruker dette for å finne ut hvor lenge videoen er, slik at vi kan endre den maksimale verdien av HSlider.
playheadUpdate tilskriver poeng til en funksjon som vil bli kalt som videoen er spilt. Dette gir oss muligheten til å spore den aktuelle posisjonen til videofilen, og oppdatere HSlider tilsvar
Trinn 6:. Mx: HSlider
Legg til følgende mx: HSlider element som et barn av mx : Søknad Element
< mx: HSlider id = "videoPosition" aktivert = "false" bottom = "10" rett = "10" venstre = "10" change = "videoPositionChanged (event)" />
id-attributtet tildeler et navn til video fremstilling at vi kan referere fra Actionscript.
øverst, nederst, venstre og høyre egenskaper definerer plasseringen av video fremstilling.
Endringen attributtet definerer en funksjon å bli kalt når brukeren endrer glidere posisjon
Trinn 7:. Interface
Du skal nå ha en GUI som ser ut som den nedenfor
Trinn 8:. mx : Script
Legg til en mx: Script element som et barn av mx: Application. Dette elementet vil holde Actionscript-kode for søknaden vår
< mx:.! Script > < [CDATA [//koden går her]] > < /mx: Script >
Trinn 9: Import Pakker
Vi trenger å importere en rekke pakker. Dette gjøres inne i mx: Script element. Tre klasser fra mx.events pakken, MetadataEvent, SliderEvent og VideoEvent, brukes som parametere i tilfelle lytterfunksjoner. Den com.foxaweb.ui.gesture pakken inneholder klasser fra mus gest bibliotek
import mx.events.MetadataEvent;. Import mx.events.SliderEvent, import mx.events.VideoEvent; import com.foxaweb.ui.gesture . *;
Trinn 10: Definer Constants
En rekke konstanter er da definert. Den VIDEO_STEP konstant definerer hvor mye tid videoens nåværende posisjon vil bli flyttet av når vi går fremover eller bakover. De andre strenger alle definere navnene på tiltak som vil bli assosiert med musebevegelser. Generelt er det klokt å kartlegge strenger til konstanter når de brukes som en identifikasjon, som det lar kompilatoren for å plukke opp feilstavinger som if (handling == SETP_FORWARD), i stedet for å kjøre inn i problemer under kjøring med feilstavede strenger som if (handling .
== "setp_forward") private statisk konst VIDEO_STEP: Number = 1; private static konst PLAY: String = "play"; privat statisk konst STOPP: String = "stopp"; privat statisk konst PAUSE: String = "pause "; privat statisk konst STEP_FORWARD: String =" step_forward "; privat statisk konst STEP_BACKWARD: String =" step_backward ";
Trinn 11: Definer variabler
Den siste variabelen vi trenger å definere er en referanse til en MouseGesture objekt. Det er denne objekt som implementerer logikken for musebevegelser
privat Var mg. MouseGesture = null;
Trinn 12: New Function
Legg til en ny funksjon kalt appComplete. Dette er funksjonen vi tilordnet applicationComplete attributtet i mx: Søknad element. Det er her vi vil initialmusebevegelser
privat funksjon appComplete (): void {mg = new MouseGesture (this.stage);. mg.addGesture (PLAY, "0"); mg.addGesture (STOP, "4"); mg.addGesture (PAUSE, "2"); mg.addGesture (STEP_FORWARD, "67012"); mg.addGesture (STEP_BACKWARD, "65432"); mg.addEventListener (GestureEvent.GESTURE_MATCH, matchHandler); }
Trinn 13: Mouse Gestures
Først lager vi en ny MouseGesture objekt. Den MouseGesture konstruktøren må bestås en referanse til scenen for å svare på mus hendelser
mg = new MouseGesture (this.stage);.
Neste vi definerer en rekke musebevegelser. En mus gest er definert som en sekvens av musebevegelser, med tall som representerer bevegelses retninger som per bildet nedenfor. Alle musebevegelser start ved å klikke på venstre museknapp og avslutt med knappen blir utgitt.
For en enkel gest hvor musen beveges i en rett linje vi bruke en streng med et enkelt tall i den. Her på "play" mus gest er definert som musen bevegelse i én retning, høyre, som er representert med tallet 0.
mg.addGesture (PLAY, "0");
På samme måte "stopp" og "pause" musebevegelser er definert som musebevegelser ned og venstre
mg.addGesture (STOP, "4");. mg.addGesture (PAUSE, "2");
"step_forward" mus gest er mer kompleks. Det er definert som en halvsirkel musen bevegelse, som starter på venstre og deretter flytte over og til høyre. Den røde pilen viser starten av bevegelsen.
Denne bevegelse er definert av strengen "67012". Du kan se hvordan denne strengen er avledet ved å matche bevegelsen av musen med tallene som er tilordnet disse bevegelsene. Vi begynner å bevege seg opp (6), diagonalt opp og høyre (7), venstre (0), diagonalt ned og til høyre (1) og deretter nedover (2)
mg.addGesture (STEP_FORWARD, "67012");. < p> "step_backward" er definert på samme måte, bare denne gangen er det en halvsirkel musen bevegelse, som starter på høyre og deretter flytte over og til venstre.
mg.addGesture (STEP_BACKWARD, "65432");
Vi deretter tildele matchHandler funksjon å bli kalt når en mus gest har blitt oppdaget
mg.addEventListener (GestureEvent.GESTURE_MATCH, matchHandler);
Trinn 14:. Den MatchHandler Funksjon
Den matchHandler funksjonen kalles når en mus gest har blitt oppdaget. Arrangementet parameter inneholder en egenskap kalt datasett, som vil matche en av konstantene vi tildelt mus hendelser i appComplete funksjonen. Avhengig av mus gest som har blitt oppdaget vi utføre visse handlinger på video fremstilling. Stykket, stoppe og pause handlinger er alle ganske rett frem. Med step_forward og step_backward handlinger vi enten øke eller redusere playheadTime eiendommen av video fremstilling, som har effekt av å hoppe fremover eller bakover
privat funksjon matchHandler (event: GestureEvent):. Void {switch (event.datas) {case PLAY: this.videoPlayer.play (); gå i stykker; Ved STOP: this.videoPlayer.stop (); gå i stykker; case PAUSE: this.videoPlayer.pause (); gå i stykker; case STEP_FORWARD: var newFowardTime: Number = this.videoPlayer.playheadTime + VIDEO_STEP; while (newFowardTime > this.videoPlayer.totalTime) newFowardTime = this.videoPlayer.totalTime; this.videoPlayer.playheadTime = newFowardTime; gå i stykker; case STEP_BACKWARD: var newBackwardTime: Number = this.videoPlayer.playheadTime - VIDEO_STEP; if (newBackwardTime < 0) newBackwardTime = 0; this.videoPlayer.playheadTime = newBackwardTime; gå i stykker; }}}
Trinn 15: HSlider
Denne demoen handler om endring av videoavspilling bruker musebevegelser, men for enkelhets skyld en HSlider kan også brukes. Den metadataReceived funksjonen kalles når video fremstilling har lastet den meta data, som omfatter den totale lengden på videoen. I denne funksjonen setter vi den maksimale verdien av glideren til den totale lengden på videoen. Vi gjør det mulig deretter glidebryteren - før vi vet hvor lenge videoen er glideren kan ikke brukes til å angi posisjonen
privat funksjon metadataReceived (event: MetadataEvent): void {this.videoPosition.maximum = this.videoPlayer.. totalTime; this.videoPosition.enabled = true;}
Trinn 16: playHeadUpdate Funksjon
Plasseringen av glideren må holdes i synk med gjeldende spille bakre posisjon av videoen. Den playHeadUpdate funksjonen kalles med jevne mellomrom ved video fremstilling, og det er her vi setter verdien av HSlider til playheadTime av video fremstilling
privat funksjon playHeadUpdate (event: VideoEvent):. Void {this.videoPosition.value = event.playheadTime;}
Trinn 17: videoPositionChanged Funksjon
Glideren kan også brukes til å endre gjeldende avspilling posisjon av videoen. Her gjør vi det motsatte av playHeadUpdate funksjon, og sette playheadTime av video fremstilling til verdien av HSlider
privat funksjon videoPositionChanged (event: SliderEvent):. Void {this.videoPlayer.playheadTime = this.videoPosition.value; }
Konklusjon
Når du laster opp programmet du bør se videofilen. Fordi vi setter Autokjør egenskap av video fremstilling objekt til false, vil videoen bli stoppet, viser den første rammen.
Klikk på venstre museknapp, flytte musen til venstre og slipper knappen, og videoen skal spille . Klikk, beveger musen ned, og slipp, og videoen skal evne. Klikk, flytt musen i en topp halvsirkel fra venstre til høyre og slipp, og du skal se videoen hoppe over et sekund foran.
En annen fordel med musebevegelser er at de fjerner behovet for andre UI kontroller, som kan være en stor fordel når skjermplass er på et minimum (som bannerannonser). Du kan også bruke dem for de "mate apen" eller "gjøre de fleste chin-ups" bannerannonse spill.
Musebevegelser er svært enkelt å implementere i Flash, og de gir en intuitiv måte å samhandle med en PC. Med bare noen få linjer med kode kan du omdefinere hvordan brukere kommuniserer med søknaden, og de frigjøre plass på skjermen som var reservert for mer tradisjonelle UI komponenter.
Takk for lesing, jeg håper du har lært noe! Anmeldelser