Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Controlli e navigazione

Impostare l'interfaccia di navigazione di una applicazione per cellulari
Impostare l'interfaccia di navigazione di una applicazione per cellulari
Link copiato negli appunti

Un aspetto importantissimo nello sviluppo di un progetto è lo studio del sistema di controllo e di navigazione da utilizzare; va infatti trovato il modo più semplice ed intuitivo per consentire all'utente di muoversi all'interno dell'interfaccia, senza sacrificare le potenzialità del progetto.

Su dispositivi mobili come i cellulari abbiamo a disposizione solamente una tastiera e quindi dobbiamo prestare molta attenzione alla pianificazione dell'interfaccia e del relativo sistema di controllo.

Nelle applicazioni la maggiore attenzione va dedicata alla realizzazione dell'interfaccia, il sistema di controllo viene ridotto all'uso dei tasti direzionali ed eventualmente delle soft keys, nell'ambito dei videogiochi invece è spesso necessario eseguire più mosse e quindi ci si ingengna nel creare sistemi più originali ed innovativi.

Quindi possiamo valutare se sia meglio utilizzare un sistema "classico" ed adattarsi ad esso o, viceversa, utilizzare un sistema innovativo e dare libero sfogo alla propria fantasia, analizzando i due campi principali di sviluppo, ovvero applicazioni e videogiochi.

Applicazioni

Quando un utente utilizza un'applicazione, quale che sia, desidera uno spazio di lavoro chiaro e una navigazione intuitiva. Nel caso di Flash Lite le dimensioni ridotte dello schermo e l'assenza di un sistema di puntamento "costringono" lo sviluppatore ad ottimizzare al massimo spazio e controlli. Solitamente si tende ad adattare l'interfaccia ai classici schermi di navigazione con l'utilizzo quindi dei tasti direzionali e di selezione, così da sfruttare abitudini già acquisite dall'utente.

In questi casi si crea l'interfaccia in modo che il suo aspetto risulti intuitivo, ad esempio sistemando graficamente gli elementi in corrispondenza dei tasti che li attivano, specialmente per le "soft keys" che solitamente vengono utilizzate per comandi come il salvataggio dei dati o l'uscita dall'applicazione.

Figura 1. Soft Keys del Nokia 6600
Soft Keys del Nokia 6600

Per il resto la navigazione avviene quasi interamente tramite il joystick direzionale, posto solitamente proprio tra le soft keys. È quindi consigliabile utilizzare un sistema di navigazione classico, impostando l'interfaccia in maniera intuitiva e correlata alla disposizione dei tasti del modello di cellulare che utilizziamo come riferimento così da fornire all'utente un rapido ed immediato riferimento visivo.

È anche consigliabile rendere particolarmente evidente la selezione di un elemento così che l'utente sia sempre certo dell'opzione attualmente selezionata e non possa commettere errori.

L'unica "variazione" possibile, anzi consigliata nel caso di interfacce complesse, è l'utilizzo del tastierino numerico come scorciatoia per la selezione di determinate opzioni. In applicazioni composte da un'interfaccia semplice e con pochi comandi questo approccio è poco utile quando non controproducente, ma se abbiamo un gran numero di opzioni da gestire potrebbe rivelarsi molto comodo per l'utente.

Giochi

Il campo in cui è possibile sbizzarrirsi maggiormente con la personalizzazione della navigazione è quello dei giochi, specialmente quando si crea un progetto particolarmente originale e a cui vogliamo dare caratteristiche particolari.

Non dobbiamo strafare però, specialmente se il gioco è molto frenetico, in questo caso l'attenzione dell'utente dovrebbe essere concentrata solo su pochi tasti per poter eseguire tutte le azioni.

Per le azioni più comuni possono essere sufficienti il joystick direzionale e/o i tasti numerici, mentre è più raro l'utilizzo delle soft keys specialmente in giochi dal ritmo piuttosto veloce dove è meglio fornire al giocatore comandi vicini tra loro. Le soft keys rimangono utli per uscire dal gioco o tornare al menu iniziale.

Mentre in un gioco frenetico è meglio offrire pochi comandi e ravvicinati, nel caso di giochi dai ritmi più tranquilli e magari con più libertà di azione, come piccole avventure grafiche o un giochi di ruolo, una maggior quantità di comandi può rivelarsi necessaria, pertanto potremmo sfruttare i tasti numerici per un accesso veloce alle opzioni (oltre alla navigazione tramite il joystick direzionale).

Il vantaggio maggiore nel caso di un videogioco è che anche impostando dei controlli personalizzati, è comunque possibile inserire una schermata di istruzioni per l'utente per potergli illustrare i comandi, pratica piuttosto comune nei giochi ma assolutamente sconsigliata e poco professionale all'interno di un'applicazione.

Rilevare la pressione di un tasto

Affrontato in maniera generica e molto teorica il discorso sulla convenienza di un sistema di controllo "particolare" piuttosto che uno classico, vediamo come utilizzare Actionscript per rilevare la pressione di un tasto e come attivare e personalizzare le soft keys.

La classe Key

Per intercettare la pressione di un qualsiasi tasto della tastiera del cellulare è necessario utilizzare la classe Key e i suoi metodi, oltre ai "listener" ovvero quegli oggetti che rimangono "in ascolto" durante l'esecuzione del filmato e invocano delle funzioni che gestiscono il verificarsi di determinati eventi. Per la classe Key i gestori di eventi sono due:

  • onKeyDown - invocato quando viene premuto un pulsante
  • onKeyUp - invocato quando viene rilasciato un pulsante

Per poter sfruttare un listener bisogna creare un oggetto, stabilire il gestore per gli eventi, ovvero assegnare al gestore di evento una funzione e quindi collegarlo alla classe Key.

1. Struttura base del controllo dei tasti

// crea l'oggetto

tasto = new Object();


// assegna una funzione al gestore di eventi
// del tasto premuto

tasto.onKeyDown = function(){
  // azioni

}

// aggiunge il listener

Key.addListener(tasto)
}

Con questo codice creiamo un listener che verrà invocato alla pressione di ogni tasto ed eseguirà le azioni contenute nel blocco //azioni.

A questo punto non ci resta che rilevare quale sia il tasto premuto ed eseguire i relativi comandi. Per i tasti relativi al joystick direzionale abbiamo a disposizione delle costanti dell'oggetto Key.

  • Key.UP
  • Key.DOWN
  • Key.LEFT
  • Key.RIGHT
  • Key.ENTER

Per i tasti numerici invece possiamo utilizzare il loro codice ASCII (rilevabile con il comando Key.getAscii). Queste costanti (o il codice ASCII) vanno utilizzati come parametro del metodo isDown(codice), che controlla appunto se il tasto premuto è quello specificato come codice.

Listato 2. Esempio di rilevazione del tasto premuto

tasto = new Object()
tasto.onKeyDown = function(){
  if(Key.isDown(Key.UP)){
    trace("Hai premuto la freccia su");
  }
  if(Key.isDown(Key.DOWN)){
    trace("Hai premuto la freccia giù");
  }
  if(Key.isDown(Key.LEFT)){
    trace("Hai premuto la freccia sinistra");
  }
  if(Key.isDown(Key.RIGHT)){
    trace("Hai premuto la freccia destra");
  }
  if(Key.isDown(Key.ENTER)){
    trace("Hai premuto l'invio");
  }
}
Key.addListener(tasto);

Quindi con isDown() e le costanti controlliamo il joystick, mentre con i codici ASCII possiamo sfruttare il tastierino numerico. Se abbiamo bisogno di conoscere un codice ASCII ci avvaliamo della funzione getAscii().

Listato 3. Rilevare il codice ASCII di un tasto

tasto = new Object();
tasto.onKeyDown = function(){
  trace(Key.getAscii());
}
Key.addListener(tasto);

Una volta ottenuto il codice ASCII di un tasto, potremo controllare quando questo viene premuto.

Listato 4. Assegnare una funzione ad un tasto

tasto = new Object();
tasto.onKeyDown = function(){
  if (Key.getAscii() == <i>codice Ascii</i>){
    // azioni

  }
}
Key.addListener(tasto);

Le soft keys

Come abbiamo visto anche in questa lezione della Guida Flash Lite 1.1 questi tasti hanno alcune particolarità.

Questi testi infatti devono essere attivati con un apposito comando, di default non sono attivi. In secondo luogo, la pressione delle soft keys viene rilevata utilizzando il metodo getCode(), il metodo getAscii() alla pressione di un softkey restituisce 0, come se nessun tasto fosse stato premuto.

Listato 5. Attivare le soft keys

fscommand2("setSoftKeys","tasto1","tasto2")

I parametri tasto1 e tasto2 indicano il testo da mostrare come descrizione del pulsante: tale caratteristica è visibile solo quando l'applicazione non viene eseguita a schermo intero e non è pertanto testabile sull'emulatore.

Come per il joystick direzionale, per i softKey abbiamo delle costanti:

  • ExtendedKey.SOFT1
  • ExtendedKey.SOFT2
  • ...

e così via (sono supportate fino a 12 soft keys, nel caso di tastiere esterne).

Listato 6. Assegnare funzioni alle soft keys

fscommand2("SetSoftKeys","testo1","testo2");
tasto = new Object();
tasto.onKeyDown = function(){
  if(Key.getCode() == ExtendedKey.SOFT1){
    trace("Premuta soft key destra");
  }

  if(Key.getCode() == ExtendedKey.SOFT2){
    trace("Premuta soft key sinistra");
  }
}
Key.addListener(tasto);

Conclusioni

Il sistema per controllare la pressione di un tasto, fosse anche una soft key, è semplice. Basta utilizzare un listener e gli eventi onKeyUp oppure onKeyDown. I tasti usati abitualmente sono quelli del joystick, per questo sono previste delle costanti apposite mentre per i tasti numerici è necessario sfruttare il codice ASCII o il codice tasto, tuttavia essendo pochi i pulsanti che compongono la tastiera del cellulare il problema è decisamente irrisorio.

Ricordiamo che l'emulatore permette il test dei controlli e della navigazione in maniera pressoché totale, l'unico limite è quello già citato relativo al cambio dei testi descrittivi delle soft keys poiché il test viene eseguito sempre con l'applicazione a tutto schermo.


Ti consigliamo anche