A rendere vincente un'applicazione è spesso la sua interfaccia, spesso però si fa l'errore di pensare che un'interfaccia vincente sia quella che offre più opzioni, pannelli, possibilità di personalizzazione quando può bastare molto meno.
Torniamo alla nostra applicazione: lo slideshow viene avviato alla pressione del tasto "7", ma l'utente finale innanzitutto non saprebbe che quello è il tasto da usare, e poi non ha un riferimento visivo per vedere se lo slideshow è attivo o meno; certo, c'è lo scorrimento delle foto, ma potremmo inserire una checkbox che mostri lo stato dello slideshow.
Per prima cosa, scarichiamo il Flash Lite 1.1 CDK (Content Development Kit), reperibile sul sito Macromedia (occorre effettuare una registrazione gratuita).Questo kit contiene alcune risorse utili, tra cui alcuni elementi per interfacce già pronti.
Scompattiamo il file .zip in una cartella a piacere: ci troveremo una cartella Interface Elements, da questa selezioniamo la cartella Checkbox e apriamo infine il file Flash Lite - checkbox.fla. Dentro a questo file troviamo due quadratini e due opzioni.
Selezioniamo uno dei due quadratini, copiamolo e quindi incolliamolo nel nostro file. Posizioniamolo in basso a sinistra nella nostra area di lavoro e di fianco ad esso posizioniamo un campo di testo statico con testo "Auto". Il risultato dovrebbe essere simile a quello in figura.
Modifichiamo il nome istanza del checkbox in "auto" e analizziamo la struttura del checkbox: è un movieclip con due fotogrammi, il primo corrisponde allo stato "non selezionato", il secondo a quello di "selezionato" (e infatti presenta un segno di spunta). Quindi per passare da uno stato all'altro basta semplicemente mandare il movieclip ad un determinato fotogramma.
Interagire col checkbox
Le azioni relative all'attivazione dello slideshow sono contenute nell'ormai consueto pulsante fittizio, vediamo come modificarle in modo che all'attivazione e disattivazione dello slideshow corrisponda un cambiamento di stato da parte del nostro checkbox.
Listato 1. Aggiungere il cambiamento di stato del checkbox
on(keyPress "7"){
// impostiamo il movieclip "auto"
// come destinario delle azioni
tellTarget("auto"){
// se "auto" è al fotogramma 1
if(_currentframe == 1){
// mandiamo "auto" al fotogramma 2
gotoAndStop(2);
// impostiamo _root.slideshow su "true"
_root.slideshow = true;
// impostiamo _root.old_time al valore di getTimer()
_root.old_time = getTimer();
// altrimenti (se "auto" non è al primo fotogramma)
} else {
// mandiamo "auto" al primo fotogramma
gotoAndStop(1);
// impostiamo _root.slideshow su false
_root.slideshow = false;
}
}
}
Il codice è cambiato poco, anche se è stata modificata un po' la struttura.
Anzitutto non ci basiamo più sul valore di _root.slideshow per stabilire se lo slideshow è già attivo, ma controlliamo il fotogramma attuale del movieclip "auto": se si trova sul primo fotogramma, lo slideshow è disattivo: in questo caso mandiamo "auto" al secondo fotogramma.
Se invece "auto" si trova ad un fotogramma diverso dal primo, lo slideshow è già attivo, allora mandiamo il movieclip al primo fotogramma.
Abbiamo già visto il significato delle altre azioni (comunque riportato nei commenti).
Testando l'applicazione vediamo che il checkbox reagisce in base allo stato dello slideshow, dando all'utente un riferimento visivo, come si può notare in figura 2.
Testando l'applicazione su diversi modelli notiamo che il movieclip "auto" è sempre in corrispondenza dello stesso pulsante che in genere si trova appena sotto il display sulla destra. Per resndere più intuitiva l'interfaccia associamo a questo pulsante le azioni relative allo slideshow.
Questo pulsante è solitamente sfruttato dal cellulare, possiamo comunque attivarlo e controllarlo con il comando fscommand2("setSoftKeys"), che esamineremo più a fondo in seguito. Per ora
limitiamoci al suo utilizzo più semplice aggiungendolo nel primo fotogramma, così:
Listato 2. Abilitare le "soft keys"
// this ActionScript sets your content to be full screen
fscommand2("FullScreen", true);
foto_totali = mc._totalframes;
stop();
fscommand2("setSoftKeys");
Il pulsante in questione corrisponde al tasto PageUp, per cui possiamo modificare le azioni inserendo "
Listato 3. Rilevare la pressione di "<PageUp>"
on(keyPress "<PageUp>");
Provando l'applicazione possiamo vedere come l'interfaccia dell'applicazione, per quanto estremamente semplice, dia una migliore impressione estetica e sia molto più intuitiva per l'utente; con pochi semplici passaggi abbiamo ottenuto un risultato decisamente buono.
È possibile scaricare l'esempio sviluppato fin'ora.
