Creare un’applicazione AIR per Android con Flash CS6
Come ho scritto nel post precedente, Flash CS6 sembra puntare molto allo sviluppo per i dispositivi mobili. Gli strumenti e le procedure di pubblicazione inserite nell’ultima versione rendono la creazione di applicazioni AIR un gioco da ragazzi.
Il tutorial che segue si basa su un banalissimo esempio per disegnare delle linee con i drawing methods di Flash. Si tratta di un’applicazione essenziale che ho sviluppato in meno di una mezz’oretta, ma che consente di testare in pochi passi l’ambiente di lavoro presente nell’ultima versione del programma.
Cominciamo un nuovo progetto AIR per Android
Fin dalla schermata di benvenuto, Flash CS6 ci mette a disposizione una serie di scorciatoie per aprire un documento ottimizzato in base al tipo di progetto. Nella sezione centrale, sotto la colonna Crea nuovo abbiamo tre alternative possibili: AIR (per desktop), AIR for Android e AIR for iOS. Clicchiamo quindi su AIR for Android. Se abbiamo regolato Flash per non mostrare la finestra di benvenuto, possiamo ottenere lo stesso risultato tramite File > Nuovo > AIR for Android.
Impostiamo la classe documento
Una volta aperto Flash, ci troviamo in un ambiente di lavoro che prevede le impostazioni standard per esportare progetti in AIR per Android. Nel nostro esempio non abbiamo bisogno di creare interpolazioni o elementi interattivi. Nel file sorgente che ho allegato a questo articolo mi sono limitato ad inserire uno sfondo, tuttavia non è un’operazione indispensabile.
Tralasciamo per adesso il documento Flash e cominciamo ad impostare la classe personalizzata che useremo nel nostro esempio. Scriviamo quindi nel campo Classe, che si trova nella finestra di ispezione proprietà, EsempioTouch. Il programma come al solito ci comunica che è impossibile trovare una definizione di classe. Ignoriamo l’avviso e premiamo OK. Infine salviamo il documento come esAir1.fla.
Scriviamo il codice della classe
Apriamo la finestra Nuovo documento da File > Nuovo > Classe ActionScript 3.0 e scriviamo nel campo Nome classe EsempioTouch. Infine premiamo OK. Modifichiamo la sintassi generica in questo modo:
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.TouchEvent;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.desktop.NativeApplication;
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;
public class EsempioTouch extends MovieClip{
private var colore:uint;
private var sp:Sprite;
private var a:Array=new Array();
public function EsempioTouch(){
Multitouch.inputMode=MultitouchInputMode.TOUCH_POINT;
stage.addEventListener(TouchEvent.TOUCH_BEGIN,inizio);
stage.addEventListener(TouchEvent.TOUCH_MOVE,muovi);
stage.addEventListener(KeyboardEvent.KEY_UP,tasti);
}
private function inizio(e:TouchEvent):void{
colore=Math.random()*0xffffff;
sp=new Sprite();
a.push(sp);
sp.filters=sp.filters.concat(new BlurFilter(5,5,4));
sp.filters=sp.filters.concat(new DropShadowFilter(10,45,0,1,10,10,.3));
addChild(sp);
sp.graphics.lineStyle(18,colore);
sp.graphics.moveTo(e.stageX,e.stageY);
}
private function muovi(e:TouchEvent):void{
sp.graphics.lineTo(e.stageX,e.stageY);
}
private function tasti(e:KeyboardEvent):void{
if((e.keyCode==Keyboard.MENU)){
for (var i:int=0;i< a.length;i++){
a[i].graphics.clear();
}
}
if((e.keyCode==Keyboard.BACK)){
NativeApplication.nativeApplication.exit();
}
}
}
}
Chi mastica un pizzico di ActionScript potrà constatare la banalità di questo codice. Si tratta del solito meccanismo basato sulle API di disegno Flash per tracciare una linea tramite gli eventi generati dall’utente. Le linee vengono arricchite da due filtri (blur e dropshadow). Inoltre, tramite il metodo Math.random(), viene fatto in modo che ogni nuova linea abbia un colore casuale.
Rispetto ad un normale file per il web, la differenza più importante riguarda gli eventi. In questo caso, dovendo interagire con dispositivi basati su tecnologia touchscreen, al posto del mouse abbiamo usato gli eventi legati al tocco e al movimento. Quando l’utente tocca lo scherma stabilisce il punto di inizio e – attraverso il successivo movimento del dito, la linea vera e proprie.
Inoltre i tasti Menu e Back del dispositivo sono stati regolati rispettivamente per cancellare i disegni e chiudere l’applicazione.
Testiamo il file con il simulatore
Una volta terminato il codice salviamo il file con File > Salva con nome. Poiché non abbiamo indicato un percorso specifico, dobbiamo salvare il file nella stessa cartella dove abbiamo salvato il file FLA. Chiudiamo la finestra relativa alla classe e torniamo nel documento Flash.
Quindi apriamo il simulatore da Controllo > Prova filmato > In AIR Debug Launcher (Mobile). Apriamo il menu TOUCH AND GESTURE e barriamo la casella Touch layer. A questo punto il mouse simulerà le dita dell’utente. Priviamo quindi a disegnare qualcosa. Per cancellare possiamo premere il tasto Menu e per uscire il tasto Back, entrambi collocati nella parte alta del simulatore.
Il certificato digitale
Una volta scritto il codice e testato il file, non ci resta che passare alle pubblicazione vera e propria.
Chiudiamo il simulatore e selezioniamo File > Impostazioni AIR 3.2 for Android per regolare le impostazioni di pubblicazione. Nella scheda Generali lasciamo i valori di default. Passiamo quindi alla scheda Distribuzione. Per poter esportare il nostro lavoro è necessario avere un certificato digitale. Se abbiamo già creato un certificato ci basterà cliccare su Sfoglia e selezionarlo, viceversa lo dovremo generare tramite il tasto Crea. Il tasto in questione apre una finestra che ci consente di creare il file da zero. Una volta compilati tutti i campi bisogna selezionare Sfoglia per individuare il luogo nel quale salvare il file e poi premere OK.
Pubblichiamo il file
Clicchiamo i due pulsati di selezione Distribuzione release dispositivo e Incorpora il runtime nell’applicazione. Il primo pulsante specifica che stiamo creando il formato apk finale, il secondo pulsante imposta il progetto per funzionare anche se l’utente non ha installato AIR sul suo Android.
La scheda Icone serve a selezionare eventuali icone da associare al progetto. Il programma prevede tre dimensioni in grado di adattarsi alle diverse esigenze visive. Per creare delle icone non è necessario generare dei file .ico. Flash è perfettamente in grado di individuare dei normali file PNG e includerli come icone. Nel mio esempio, mi sono limitato a creare delle PNG tramite Fireworks.
Tralasciamo le schede Autorizzazioni e Lingue (che in questo esempio non ci servono) e premiamo il pulsante Pubblica. Dopo l’esportazione, una finestra ci comunicherà che non abbiamo selezionato alcuna autorizzazione tra quelle disponibili, ma poiché questo applicativo non ha bisogno di particolari autorizzazioni (ad esempio poter accedere alla rete), possiamo ignorare il messaggio.
Testiamo il file sul nostro Android
Il file finale è un semplicissimo file apk. In teoria si potrebbe testare il file collegando il dispositivo al computer mentre si usa Flash. Tuttavia entrano in gioco troppe variabili legate alle caratteristiche specifiche del telefono o del tablet. Per cui, il mio consiglio personale è quello di armarsi di pazienza e installare il file manualmente. Per raggiungere lo scopo basta usare il cavo USB che abbiamo trovato nella confezione del nostro dispositivo e usare la stessa procedura con la quale spostimao file musicali o foto per trasferire il file apk.
Chiaramente questa procedura varia in base ai modelli. Ad esempio nel caso del mio telefono Samsung, mi basta collegare il cavo e attivare l’opzione Memoria di massa che si trova in Impostazioni > Wireless e rete > Impostazioni USB. Nel caso del mio Tablet Intreeo mi è sufficiente collocare il file su una penna USB e installarlo da quella posizione.
Prima di effettuare l’installazione è importante attivare l’opzione Sorgenti sconosciute. In questo modo autorizziamo l’installazione di applicazioni non provenienti dal market ufficiale. Una volta svolti tutti i compiti basta selezionare il file apk ed eseguire la solita procedura di installazione prevista nei dispositivi Android. A questo indirizzo trovate un file rar con tutti sorgenti del tutorial.
Ciao
Cercavo giusto un’applicazione AIR semplice da provare con l’emulatore AndroVM (l’unico che funziona con flash), ma con AIR mi risponde ‘L’applicazione XXX si è bloccata in modo anomalo.’
Ho provato il tuo codice ‘minimale’, ma il risultato è il medesimo.
Non conosci un emulatore che mi permetta di provare su PC?
Grazie in anticipo.
Da qualche articolo letto in giro per la rete, in teoria dovrebbe essere possibile usare l’android SDK ottimizzandolo opportunamente. Ma sinceramente, per pura pigrizia non ci ho mai provato sul serio. Quindi non saprei. Nel mio caso ho sempre usato un paio smartphone che ho a casa e quello degli amici/martiri (a cui rompo le palle) per testare l’apk sul campo.