Continuiamo a lavorare sulla nostra piccola applicazione slide-show. Dopo aver inserito le diverse foto dentro al movieclip, diamo all'utente modo di muoversi tra di esse. Per farlo useremo i tasti destro e sinistro del joystick direzionale.
In questa fase dello sviluppo dobbiamo tenere presenti alcuni requisiti che la nostra piccola applicazione dovrebbe avere:
- se l'utente sta visualizzando la prima foto non potrà andare ulteriormente indietro;
- se visualizza l'ultima foto non può andare avanti.
Inoltre dobbiamo avere presenti i limiti posti dall'interfaccia del telefonino e di Flash Lite. Per catturare un evento del dispositivo mobile infatti abbiamo bisogno di creare dei pulsanti.
Dunque per soddisfare questi requisiti abbiamo bisogno di inserire un "pulsante fittizio". Questo pulsante non sarà visibile o utilizzabile dall'utente, ma servirà per inserire il codice Actionscript necessario alla gestione degli eventi di navigazione tra le foto. Collegando il codice ad un pulsante se sfruttiamo la tastiera del telefonino.
La creazione del pulsante è molto semplice: cerchiamo sul menu Inserisci>Nuovo Simbolo. Appare una maschera di creazione dove selezioniamo Plusante come tipo di simbolo da creare e gli diamo un nome a piacere, ad esempio "Bottone".
Una volta creato il bottone ci troviamo dentro alla sua timeline, ma poiché il pulsante è fittizio non è necessario inserire alcun contenuto; torniamo quindi nell'area di lavoro principale.
Apriamo la libreria premendo i tasti Ctrl+L (oppure selezionando da menu Finestra>Libreria) e trasciniamo il bottone nell'area di lavoro. Il bottone apparirà come un pallino bianco, come illustrato in figura.
Inseriamo il codice per la navigazione tra le foto. Clicchiamo con il tasto destro sul pulsante e selezioniamo la voce Azioni, si aprirà l'ormai familiare editor di actionscript. Il codice che andiamo ad scrivere è il seguente:
Listato 1. Assegnare le azioni al joystick
on(keyPress "<Left>"){
if(mc._currentframe > 1){
tellTarget("mc"){
prevFrame();
}
}
}
on(keyPress "<Right>"){
if(mc._currentframe < mc._totalframes){
tellTarget("mc"){
nextFrame();
}
}
}
Queste poche righe racchiudono il necessario per navigare da una foto all'altra, comprese le limitazioni relative alla prima e all'ultima foto che abbiamo discusso ad inizio lezione. Analizziamo in dettaglio il codice che abbiamo scritto:
Listato 2. Codice commentato per l'evento "Left"
on(keyPress "<Left>"){
// alla pressione del tasto "left" (quindi sinistra)
if(mc._currentframe > 1){
// se la clip "mc"
// sta su un fotogramma maggiore al primo
tellTarget("mc"){
// imposta la clip su cui eseguire l'azione
// (in questo caso mc)
prevFrame(); // esegui l'azione prevFrame
}
}
}
Ricapitolando: quando l'utente preme il tasto sinistro del joystick direzionale sul cellulare, lo script controlla che il movieclip "mc" contenente le foto sia ad un frame maggiore del primo (la proprietà _currentframe restituisce il fotogramma in cui si trova attualmente il clip filmato), nel qual caso porta il movieclip determinato dall'azione tellTarget (in questo caso "mc") al fotogramma precedente. Se il clip al primo fotogramma non viene eseguita nessuna azione.
Analogamente l'altra parte di codice
Listato 3. Codice commentato per l'evento "Right"
on(keyPress "<Right>"){
// alla pressione del tasto "right" (quindi destra)
if(mc._currentframe < mc._totalframes){
// se "mc" non è all'ultimo fotogramma
tellTarget("mc"){
// imposta il movieclip su cui eseguire
// l'azione (in questo caso mc)
// esegue il frame successivo
nextFrame();
}
}
}
Abbiamo usato in questo caso anche la proprietà _totalframes, che restituisce il numero totale di fotogrammi di un clip filmato.
Possiamo ora provare il filmato sull'emulatore; avviamo il test del filmato (tramite Ctrl+Invio o dall'apposito menu Control): muoviamoci col mouse sul joystick direzionale del modello selezionato e usiamone i comandi destra e a sinistra: vedremo apparire le diverse foto, come in figura.
Questo è un primo esempio di interattività di un semplice filmato. Utilizzando il joystick direzionale, che è un sistema di input molto diffuso sui dispositivi mobili, abbiamo garantito una compatibilità con un'ampia gamma di cellulari.
È possibile scaricare l'esempio sviluppato fin'ora.
