Quasi tutte le interfacce utente per PC sono progettate attorno alla nozione di spostare un cursore e fare clic sugli oggetti. Pulsanti, menu, caselle combinate, elenchi e ogni altro controllo dell'interfaccia utente standard funzionano in questo modo. Il mouse viene utilizzato per posizionare il cursore e la posizione del cursore viene utilizzata per eseguire un'azione.
È un paradigma del design che ha funzionato bene, ma ultimamente nuove tecnologie come touch screen e sensori di movimento (pensa il Wii) hanno messo in discussione la nozione di usare un mouse, o addirittura di avere un cursore sullo schermo ...
Molto prima di concentrarsi sui touch screen o sul Wii, programmi come il browser web Opera hanno introdotto la nozione di gesti del mouse. Il concetto era semplice: invece di usare la posizione del cursore per determinare quale azione eseguire, il movimento del cursore stesso indicherebbe un'azione. Quindi spostando il cursore in un movimento circolare si attiverà un browser Web per l'aggiornamento. Spostandolo verso sinistra, torneresti nella cronologia delle pagine e spostandolo verso destra avresti intenzione di andare avanti.
Per gli sviluppatori Flash è disponibile una libreria di gesti mouse libera che consente questo tipo di interazione con uno sforzo minimo. Per dimostrare come viene utilizzato, creeremo un semplice lettore video che utilizza i movimenti del mouse, anziché i pulsanti, per modificare la riproduzione del video.
Passaggio 1: Libreria dei gesti del mouse
Scarica la libreria dei gesti del mouse di Didier Brun qui (http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50540.aspx) ed estraila in una posizione comoda.
Passaggio 2: nuova applicazione
Crea una nuova applicazione web Flex e aggiungi la libreria dei gesti del mouse all'elenco dei percorsi di generazione. È possibile accedere alla proprietà del percorso di generazione selezionando Progetto> Proprietà> Percorso di costruzione flessibile in Flex Builder.
Passaggio 3: FLV
Avrai bisogno di un file video FLV per testare l'applicazione con. La versione demo del convertitore IMToo FLV (http://www.imtoo.com/flv-converter.html) convertirà i video brevi da quasi tutti i formati in FLV. Se non hai una collezione di film FLV in giro, questo strumento è l'ideale per convertire quasi tutti i video gratuiti che puoi scaricare dal web. Ho convertito uno dei video dimostrativi forniti con Vista per questa demo.
Passaggio 4: attributi dell'applicazione
Dovrai modificare alcuni degli attributi dell'elemento Application, contenuti nel file MXML. Qui abbiamo specificato larghezza, altezza, colore di sfondo (backgroundGradientColors) e trasparenza (backgroundGradientAlphas). Abbiamo anche impostato la funzione di completamento dell'app da chiamare in risposta all'evento applicationComplete. Questo ci dà un punto di ingresso nell'applicazione in cui verranno configurati i gesti del mouse.
Passaggio 5: mx: VideoDisplay
Aggiungi il seguente elemento mx: VideoDisplay come figlio dell'elemento mx: Application.
L'attributo id assegna un nome al VideoDisplay a cui possiamo fare riferimento da ActionScript.
Le proprietà superiore, inferiore, sinistra e destra definiscono la posizione del VideoDisplay.
L'attributo autoPlay è impostato su false, il che significa che il video non inizierà la riproduzione immediatamente.
L'attributo source punta alla posizione del file video. Se hai il tuo file video FLV, dovrai modificare questo attributo per puntarlo.
L'attributo metadataReceived punta a una funzione che verrà richiamata una volta che i dettagli del video sono stati caricati da VideoDisplay. Usiamo questo per scoprire quanto è lungo il video, così possiamo modificare il valore massimo di HSlider.
L'attributo playheadUpdate punta a una funzione che verrà chiamata mentre il video viene riprodotto. Questo ci consente di tracciare la posizione corrente del file video e di aggiornare HSlider di conseguenza.
Passaggio 6: mx: HSlider
Aggiungi il seguente elemento mx: HSlider come figlio di mx: Application Element
L'attributo id assegna un nome al VideoDisplay a cui possiamo fare riferimento da ActionScript.
Le proprietà superiore, inferiore, sinistra e destra definiscono la posizione del VideoDisplay.
L'attributo change definisce una funzione da chiamare quando l'utente cambia la posizione dei cursori.
Passaggio 7: interfaccia
Ora dovresti avere una GUI simile a quella qui sotto.
Passaggio 8: mx: Script
Aggiungi un elemento mx: Script come figlio di mx: Application. Questo elemento manterrà il codice ActionScript per la nostra applicazione.
Passaggio 9: Importa pacchetti
Dobbiamo importare un numero di pacchetti. Questo viene fatto all'interno dell'elemento mx: Script. Tre classi del pacchetto mx.events, MetadataEvent, SliderEvent e VideoEvent, vengono utilizzate come parametri nelle funzioni listener di eventi. Il pacchetto com.foxaweb.ui.gesture include le classi dalla libreria gestuale del mouse.
Viene quindi definito un numero di costanti. La costante VIDEO_STEP definisce quanto tempo verrà spostata la posizione corrente del video quando avremo un passo avanti o indietro. Le altre stringhe definiscono tutti i nomi delle azioni che saranno associate ai gesti del mouse. In generale, è prudente mappare le stringhe alle costanti quando vengono utilizzate come identificazione, in quanto consente al compilatore di rilevare errori ortografici come if (action == SETP_FORWARD), invece di incorrere in problemi in fase di esecuzione con stringhe errate come if (action == "setp_forward").
L'ultima variabile che dobbiamo definire è un riferimento a un oggetto MouseGesture. È questo oggetto che implementa la logica per i gesti del mouse.
private var mg: MouseGesture = null;
Passaggio 12: nuova funzione
Aggiungi una nuova funzione chiamata appComplete. Questa è la funzione assegnata all'attributo applicationComplete nell'elemento mx: Application. È qui che inizializzeremo i gesti del mouse.
Per prima cosa creiamo un nuovo oggetto MouseGesture. Il costruttore MouseGesture deve essere passato un riferimento allo stage per rispondere agli eventi del mouse.
mg = new MouseGesture (this.stage);
Quindi definiamo un numero di gesti del mouse. Un gesto del mouse è definito come una sequenza di movimenti del mouse, con i numeri che rappresentano le direzioni di movimento come da immagine qui sotto. Tutti i gesti del mouse iniziano facendo clic con il pulsante sinistro del mouse e terminando con il rilascio del pulsante.
Per un semplice gesto in cui il mouse viene spostato in linea retta utilizziamo una stringa con un solo numero al suo interno. Qui il gesto del mouse "gioca" è definito come movimento del mouse in una sola direzione, a destra, che è rappresentato dal numero 0.
mg.addGesture (PLAY, "0");
Allo stesso modo i gesti del mouse "stop" e "pausa" sono definiti come movimenti del mouse verso il basso e verso sinistra.
Il gesto del mouse "step_forward" è più complesso. È definito come un movimento del mouse a mezzo cerchio, che inizia a sinistra e poi si sposta su e verso destra. La freccia rossa mostra l'inizio del movimento.
Questo movimento è definito dalla stringa "67012". Puoi vedere come viene derivata questa stringa facendo corrispondere il movimento del mouse con i numeri assegnati a quei movimenti. Iniziamo a salire (6), diagonalmente in alto e a destra (7), a sinistra (0), diagonalmente in basso ea destra (1) e poi in basso (2).
mg.addGesture (STEP_FORWARD, "67012");
Lo "step_backward" è definito allo stesso modo, solo che questa volta è un movimento del mouse a metà cerchio, che inizia a destra e poi si sposta su e verso sinistra.
mg.addGesture (STEP_BACKWARD, "65432");
Assegniamo quindi la funzione matchHandler da chiamare quando viene rilevato un gesto del mouse.
La funzione matchHandler viene chiamata quando viene rilevato un gesto del mouse. Il parametro event contiene una proprietà denominata datas, che corrisponderà a una delle costanti assegnate agli eventi del mouse nella funzione compComplete. A seconda del gesto del mouse rilevato, eseguiamo determinate azioni su VideoDisplay. Le azioni di riproduzione, stop e pausa sono tutte abbastanza semplici. Con le azioni step_forward e step_backward aumentiamo o diminuiamo la proprietà playheadTime di VideoDisplay, che ha l'effetto di saltare in avanti o indietro.
private function matchHandler (event: GestureEvent): void switch (event.datas) case PLAY: this.videoPlayer.play (); rompere; caso STOP: this.videoPlayer.stop (); rompere; caso PAUSE: this.videoPlayer.pause (); rompere; caso STEP_FORWARD: var newFowardTime: Number = this.videoPlayer.playheadTime + VIDEO_STEP; while (newFowardTime> this.videoPlayer.totalTime) newFowardTime = this.videoPlayer.totalTime; this.videoPlayer.playheadTime = newFowardTime; rompere; caso STEP_BACKWARD: var newBackwardTime: Number = this.videoPlayer.playheadTime - VIDEO_STEP; if (newBackwardTime < 0) newBackwardTime = 0; this.videoPlayer.playheadTime = newBackwardTime; break;
Step 15: HSlider
Questa demo si basa sulla modifica della riproduzione del video usando i gesti del mouse, ma per praticità è possibile utilizzare anche HSlider. La funzione metadataReceived viene chiamata una volta che VideoDisplay ha caricato i metadati, che include la lunghezza totale del video. In questa funzione impostiamo il valore massimo del cursore sulla lunghezza totale del video. Abilitiamo quindi il cursore - finché non sappiamo per quanto tempo il video non può essere utilizzato per impostare la posizione.
La posizione del cursore deve essere mantenuta sincronizzata con la posizione di riproduzione corrente del video. La funzione playHeadUpdate è chiamata ad intervalli regolari da VideoDisplay, ed è qui che impostiamo il valore di HSlider sull'headheadTime di VideoDisplay.
funzione privata playHeadUpdate (event: VideoEvent): void this.videoPosition.value = event.playheadTime;
Passaggio 17: Funzione videoPositionChanged
Il cursore può anche essere utilizzato per modificare la posizione di riproduzione corrente del video. Qui eseguiamo l'inverso della funzione playHeadUpdate e impostiamo l'indicatore di riproduzione di VideoDisplay sul valore di HSlider.
private function videoPositionChanged (event: SliderEvent): void this.videoPlayer.playheadTime = this.videoPosition.value;
Conclusione
Quando carichi l'applicazione dovresti vedere il file video. Poiché impostiamo l'attributo autoPlay dell'oggetto VideoDisplay su false, il video verrà arrestato, mostrando il primo fotogramma.
Fare clic con il tasto sinistro del mouse, spostare il mouse verso sinistra e rilasciare il pulsante, e il video dovrebbe essere riprodotto. Fare clic, spostare il mouse verso il basso e rilasciare, e il video dovrebbe mettere in pausa. Fai clic, sposta il mouse in un semicerchio superiore da sinistra a destra e rilascia, e dovresti vedere il video saltare un secondo in avanti.
Un altro vantaggio dei gesti del mouse è che rimuovono la necessità di altri controlli dell'interfaccia utente, il che può essere un vantaggio enorme quando lo spazio sullo schermo è come minimo (come gli annunci banner). Potresti persino usarli per i giochi con banner pubblicitari "dai da mangiare alla scimmia" o "fai più mazzi".
I gesti del mouse sono molto facili da implementare in Flash e forniscono un modo intuitivo per interagire con un PC. Con solo poche righe di codice puoi ridefinire il modo in cui gli utenti interagiscono con la tua applicazione e liberano lo spazio dello schermo riservato a componenti più tradizionali dell'interfaccia utente.
Grazie per la lettura, spero che tu abbia imparato qualcosa!
Share
Accentsconagua
