FlashDevelop è un editor ActionScript tra i più interessanti di quelli alternativi agli strumenti Adobe. A renderlo particolarmente interessate è il fatto che si tratta di un progetto opensource (licenza MIT) che permette di scrivere codice ActionScript e compilare i propri file swf anche senza installare Flash Professional o la suite Adobe.
Esaminando il software lo troviamo semplice, curato e ricco di strumenti, in questo aticolo esaminiamo alcune delle funzionalità FlashDevelop e le differenze con l'editor predefinito di Flash.
L'ultima release di FlashDevelop (3.0.3 RTM al momento in cui scriviamo) è scaricabile dal forum ufficiale.
I progetti
Diversamente da altri editor che supportano più linguaggi e, solo marginalmente, anche ActionScript, FlashDevelop è incentrato sullo sviluppo di progetti Flash/Flex. Anche se supporta nativamente anche PHP, CSS e HTML (e haXe) la maggior parte delle funzioni sono pensate principalmente per lo sviluppo e il debbuging di codice ActionScript.
Come si può notare anche dalla figura, abbiamo diverse opzioni sia per i progetti AS3 che AS2. Possiamo scegliere di lavorare a stretto contatto con Flash Pro (Flash IDE Project), o produrre in autonomia (AS3 Project), notiamo il supporto anche per AIR (anche qui la compilazione avviene mediante Flex framework). Per i più pigri, abbiamo anche un progetto che inserisce automaticamente un preload.
Rimane necessario usare Flash CS3 o CS4 per la compilazione dei progetti Flash Actionscript 3, e anche per i progetti Flex può comunque essere utile usare Flash ad esempio nel caso in cui sia necessario avere delle animazioni.
L'interfaccia
L'interfaccia è molto semplice, abbiamo la disposizione più classica: con la finestra centrale per l'editing, la finestra laterale per l'esplorazione di classi, risorse sul file system, etc. e lo spazio in basso per l'output e i messaggi di errore.
Il layout viene leggermente modificato a seconda del tipo di linguaggio utilizzato, come pure la colorazione della sintassi e il completamento automatico.
In basso troviamo altre tab per attivare pannelli come tasks, che vedremo più avanti.
L'autocompletamento
Uno dei punti di forza, rispetto all'editor di Flash CS3 o CS4, è il completamento automatico del codice (code hinting). Risulta molto precisa e potente l'autocompilazione dei costrutti, (if/else, cicli for, costruttori delle classi).
Nella creazione delle classi, FlashDevelop interpreta i metodi e le proprietà personalizzate e li integra nei suggerimenti del codice in maniera molto efficace, aspetto fondamentale per progetti medio/grandi o quando utilizziamo classi di terze parti (es. Papervision o TweenLite). Inoltre le informazioni per il code hinting vengono ricavate anche dai commenti al codice.
Queste feature ovviamente aiutano a migliorare la rapidità di sviluppo e a ridurre le possibilità di errore durante la digitazione del codice.
I pannelli
Oltre ai vantaggi inerenti la fase di digitazione, FlashDevelop mette a disposizione alcuni pannelli che permettono, ad esempio, di tenere traccia delle attività da compiere, come il pannello Tasks (i TODO sono basati sui commenti all'interno del codice).
Tra i pannelli a destra, nell'area "esplorazione", è interessante Outline che permette di esplorare le classi e i file SWF e SWC.
Si tratta di strumenti non disponibili in Flash (alcuni sono invece disponibili nel Flex/Flash Builder, che del resto è più orientato allo sviluppo).
Chiaramente finchè si lavora a piccoli file queste caratteristiche possono sembrare di poco conto, ma quando si ha a che fare con progetti di maggior complessità diventano strumenti quasi irrinunciabili.
Il Flex SDK
Spesso si fa un po' di confusione tra Flash e Flex, in realtà Flex è uno strumento della Flash Platform, fondamentalmente un framework, ovvero un sistema di classi, per facilitare lo sviluppo di applicazioni Flash. Semplificando possiamo dire che il prodotto finale è sempre un file SWF.
Alla base del malinteso c'era anche la differenza dei nomi dei prodotti: nel caso di Flex si parla di Flex Framework, Flex SDK, Flex Builder. Anche per questo motivo dalla versione 4 il Flex Builder è stato rinominato in Flash Builder.
La divisione è invero molto semplice, il Kit di sviluppo Flex (Flex SDK) che consente di realizzare applicazioni flash, da solo o in coppia con FlashDevelop, include due componenti fondamentali:
- Flex compiler - Il compilatore che può creare i file SWF partendo da file MXML o ActionScript 3
- Flex framework - Il framework basato fondamentalemte su classi per componenti visuali, networking e altre facilities
Questo kit è gratuito ma non contiene un ambiente di sviluppo e tantomeno un editor visuale.
Flash Builder (già Flex Builder) è invece l'IDE creato da Adobe e basato su Eclipse, un prodotto molto potente (a pagamento) per realizzare applicazioni Flash sfruttando il Flex SDK e semplificandone l'utilizzo.
Attualmente è possibile scaricare l'SDK sia di Flex 4 che quello di Flex 3 , alcuni utenti di FlashDevelop pare abbiamo riscontrato alcuni problemi nella compilazione con l'SDK di Flex 4 (che del resto è ancora in beta) e quindi può essere consigliabile affidarsi almeno per il momento alla versione 3 del Flex SDK.
La compilazione degli SWF
Prima dell'arrivo di ActionScript 3, per ottenere i file compilati, era possibile utilizzare Mtasc, un compilatore per ActionScript 2, anche questo gratuito ed opensource. Il compilatore viene ancora installato insieme all'IDE e permette di essere svincolati completamente dai prodotti Adobe per i progetti dedicati ai vecchi Player.
I curatori del progetto, però, non prevedono lo sviluppo del compilatore Mtasc anche per AS3, perché impegnati sul fronte di un nuovo linguaggio: haXe.
Per questo motivo, dopo l'arrivo di ActionScript 3, c'è stata una situazione di stallo: gli editor alternativi non erano pronti al supportare la nuova versione del linguaggio, e quasi nessuno di essi era in grado di interfacciarsi a Flex (inoltre il Flex Builder si presentava come un ottimo editor).
FlashDevelop però si è adeguato e permette di compilare anche codice AS3, grazie al Flex SDK. Così possiamo raggiungere il nostro scopo in maniera completamente gratuita, avvalendoci al tempo stesso di un editor di codice molto valido e di uno strumento di compilazione ufficiale e fornito da Adobe.
Nella seconda parte dell'articolo scenderemo nei dettagli della installazione e della configurazione di FlashDevelop con il Flex SDK collegando le utility del kit all'ambiente di sviluppo.
Come anticipato nella prima parte, dopo aver presentato FlashDevelop e il Flex SDK ne approfondiamo l'installazione e la configurazione. Vedremo come utilizzare il Flash SDK per compilare i nostri progetti ed esamineremo alcuni esempi pratici.
Per prima cosa installeremo FlashDevelop, che ha un vero e proprio programma di setup, quindi copieremo il Flex SDK (che invece non prevede una "classica" installazione) in una cartella a scelta del nostro sistema e infine collegheremo i due programmi.
Prima di iniziare accertiamoci di avere installato il Java runtime, versione 1.6 o successiva (requisito necessario sia per FlashDevelop che per il Flex SDK). Qualora non ne fossimo in possesso, possiamo scaricarlo dal sito ufficiale.
Installazione di FlashDevelop
FlashDevelop viene distribuito come file .exe installabile, pertanto sarà sufficiente lanciarlo per avviare il setup.
L'installazione è composta da pochi passaggi, dopo aver premuto Next nella prima schermata, dovremo accettare l'accordo di licenza, quindi ci verranno mostrate le opzioni di installazione, in cui scegliere se avere l'icona nella barra di avvio veloce delle applicazioni e l'icona sul desktop.
Dalle opzioni avanzate è anche possibile scegliere di poter eseguire più istanze di FlashDevelop o di utilizzare FlashDevelop come applicazione standalone. Interessante anche il peso dell'applicazione: circa 18 MB.
Dopo aver impostato le preferenze, andiamo avanti e scegliamo il percorso di installazione: i file saranno copiati e l'installazione completata.
Per ora abbiamo finito con FlashDevelop, lasciamolo un attimo da parte e passiamo all'installazione del Flex SDK.
Installazione del Flex SDK
Per gli esempi di questo articolo abbiamo optato per l'SDK di Flex 3, più precisamente l'ultima release disponibile tra le MileStone, scaricabile dal sito Adobe Open Source. Prima di poter peoseguire al download sarà necessario accettare l'accordo di licenza in fondo alla pagina, solo dopo apparirà la scritta "Download Zip".
Una volta scaricato l'archivio, apriamolo: si tratta di un insieme di directory e file. Non c'è setup: è sufficiente copiare tutto in una cartella del nostro sistema per renderlo utilizzabile con FlashDevelop.
Scegliamo un percorso a piacere dove estrarre l'archivio, infine torniamo su FlashDevelop.
Configurare FlashDevelop con il Flash SDK
Per prima cosa è necessario impostare il percorso del Flex SDK nelle opzioni di compilazione di FlashDevelop. Portiamoci allora sul menu Tools > Program Settings (o digitando F10).
Apparirà una schermata con un ampio numero di opzioni, selezioniamo dalla lista a sinistra la voce AS3Context, quindi cerchiamo il campo Flex SDK Location tra quelli che appaiono a destra, sotto la sezione "Language".
Cliccando sul pulsante a destra coi 3 puntini si aprirà la finestra di ricerca file: selezioniamo la cartella dove abbiamo estratto l'SDK, dopo di che possiamo chiudere il pannello delle impostazioni.
Finalmente siamo pronti a creare il nostro primo progetto con FlashDevelop e Flex SDK!
Creazione di un progetto Flex in FlashDevelop
Dal menu Project > New Project, apriamo la schermata di creazione dei progetti che abbiamo già esaminato nella prima parte dell'articolo. Selezioniamo un progetto di tipo Flex 3 Project, diamogli un nome e selezioniamo la cartella in cui inserire i file di progetto.
Una volta creato il progetto, troviamo, nella finestra Project (nell'area "esplorazione", a destra), il nome del nostro progetto e le cartelle bin, lib e src. All'interno di quest'ultima ci sarà il file Main.mxml, che possiamo aprire nell'editor con doppio click.
Per verificare che tutte le impostazioni siano corrette, che FlashDevelop e il Flex SDK siano collegati correttamente, compiliamo il progetto.
Dalla barra degli strumenti, posta appena sopra l'area del codice, possiamo premere il pulsante per la compilazione, che ha la forma di un tasto "play" blu; in alternativa possiamo digitare F5 da tastiera oppure lanciare la compilazione da menu Project > Test Movie.
Se l'installazione dell'SDK e il suo collegamento a FlashDevelop sono andati a buon fine, vedremo apparire nel pannello Output (in basso nell'interfaccia) una dicitura di questo tipo:
Running process: C:Program FilesFlashDevelopToolsfdbuildfdbuild.exe ...
Using the Flex Compiler Shell.
Building Esempio Flex SDK
mxmlc -load-config+=objEsempioFlexSDKConfig.xml -debug=true -incremental=true ...
Quindi, dopo qualche istante apparirà il Flash Player che esegue il nostro sfw, ovviamente vuoto.
Un semplice MXML
Proviamo ora a creare un piccolo esempio di MXML con FlashDevelop e verifichiamo che venga compilato correttamente e vediamo come utilizzare i componenti di Flex, anche senza il Flex Builder.
Facciamo una piccola prova utilizzando il componente TabNavigator presente nel framework (e quindi anche nell'SDK).
Con Flex Builder siamo abituati ad comodo accesso "visuale" ai componenti, ma anche FlashDevelop ci semplifica la vita se ci serviremo dell'autocompletamento del codice. Ad esempio digitando <mx: (prefisso di tutti i componenti Halo) otterremo immediatamente l'elenco dei componenti e potremo quindi scegliere facilmente per esempio il TabNavigator.
Una volta scelto TabNavigator e chiuso il tag, FlashDevelop aggiungerà automaticamente il tag di chiusura. A questo punto basta portarci all'interno dell'elemento, per ottenere l'elenco di tutti i suoi metodi, gli attributi e le proprietà.
Anche in questo caso abbiamo un'autocompilazione che appena scelto il comando che vogliamo utilizzare e inserito il simbolo = inserirà automaticamente gli apici all'interno dei quali potremo inserire il valore desiderato.
Molto apprezzabile anche l'auto-indentazione, infatti se premiamo "Invio" all'interno di un tag il cursore verrà automaticamente impostato con la corretta indentazione.
Completiamo il codice (di seguito riproponiamo l'esempio dell'articolo dedicato al TabNavigator) e proviamo a compilare il file.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="300">
<mx:TabNavigator x="80" y="68" width="200" height="200">
<mx:Canvas label="Tab 1" width="100%" height="100%">
<mx:Button x="66" y="10" label="Pulsante"></mx:Button>
</mx:Canvas>
<mx:HDividedBox label="Tab2" width="100%" height="100%" horizontalGap="5">
<mx:ComboBox width="106"></mx:ComboBox>
<mx:HSlider></mx:HSlider>
</mx:HDividedBox>
</mx:TabNavigator>
</mx:Application>
Compilare una classe ActionScript
Poichè il Flex SDK permette di compilare non solo file MXML ma anche classi ActionScript, possiamo ovviamente sfruttare questa possibilità, facciamo un piccolo esempio. Dal pannello Project clicchiamo col tasto destro sulla cartella src e dal menu a comparsa selezioniamo la voce Add->New Class:
Appare un pannello dove specificare alcune proprietà della classe, nel nostro caso è sufficiente indicare il nome.
Una volta premuto il tasto Ok, la classe sarà aggiunta al nostro progetto e verrà automaticamente aperta nell'editor, già preimpostata con il relativo costruttore. Per compilare la classe dobbiamo tornare sul pannello Project, cliccare sul nome della classe con il tasto destro e selezionare l'opzione Always compile. Ora quando proveremo a esportare il nostro file, la classe verrà correttamente compilata.
Utilizzare elementi grafici creati in Flash
Come anticipato nella prima parte dell'articolo, sebbene FlashDevelop e il Flex SDK permettano la compilazione sganciandosi completamente da Flash, Flash risulta ancora utile per la creazione di elementi grafici e animati da usare all'interno nei propri progetti, vediamo quindi come creare una piccola "libreria" di elementi grafici in Flash e usarla poi all'interno di una classe ActionScript compilata con FlashDevelop e il Flex SDK.
Per prima cosa apriamo Flash, creiamo un nuovo progetto ActionScript 3 e disegnamo un simbolo a piacere sullo stage. A questo punto convertiamolo in movieclip, impostando l'esportazione per ActionScript. Ricordiamoci il nome che andremo a specificare nel campo Class.
Ora abbiamo creato un movieclip, con classe Pentagono, che potremo utilizzare all'interno del nostro progetto FlashDevelop, prima però è necessario impostare i percorsi di salvataggio del file e creare un SWC che ci permetterà di sfruttare il pentagono (ed altri eventuali elementi grafici creati nel FLA) nel nostro progetto.
Per prima cosa salviamo il nostro file come FLA all'interno della cartella src del nostro progetto, dandogli un nome a piacere (ad esempio Libreria.fla), quindi apriamo il pannello delle impostazioni di esportazione (File > Publish settings, oppure la scorciatoia da tastiera Ctrl+Shift+F12), precisamente nella scheda Formats. Replichiamo le impostazioni mostrate in figura.
In questo modo eviteremo di esportare il file HTML (inutile per le nostre esigenze) ed esporteremo il file Libreria.swf nella cartella lib del nostro progetto (infatti tramite ../ saliamo di una cartella da src dove è stato salvato il FLA, quindi entriamo in lib/ e salviamo Libreria.swf).
Portiamoci ora nella scheda Flash dal pannello delle impostazioni di pubblicazione e nella sezione SWF Settings mettiamo il segno di spunta a Export SWC.
L'SWC verrà esportato nella stessa cartella del file SWF.
Pubblichiamo il nostro filmato (File > Publish oppure la scorciatoia Shift+F12), quindi torniamo in FlashDevelop: se dal pannello Project apriamo la cartella lib vi troveremo i file Libreria.swf e Libreria.swc. Clicchiamo con il tasto destro su quest'ultimo e selezioniamo l'opzione Add to library.
Con questa operazione abbiamo aggiunto gli elementi dell'SWC al nostro progetto, per cui ora abbiamo la possibilità di accedere all'oggetto Pentagono che abbiamo esportato per ActionScript. Per verificarlo, torniamo alla nostra classe Esempio_Classe.as e creiamo una variabile private di nome pnt, vedremo che al momento di specificare il tipo di variabile troveremo tra le possibilità anche Pentagono, segno che la classe dell'oggetto è stata correttamente implementata nella libreria del progetto.
È evidente che possiamo sfruttare il movieclip creato con Flash aggiungendolo allo stage, per esempio: completiamo la nostra classe in questo modo:
package
{
import flash.display.MovieClip
public class Esempio_Classe extends MovieClip
{
private var pnt:Pentagono;
public function Esempio_Classe()
{
pnt = new Pentagono();
addChild(pnt);
}
}
}
Infine compiliamo il file: il risultato sarà quello visibile in figura:
Chiaramente all'interno del FLA possiamo tutti i simboli di cui abbiamo bisogno (è possibile usare anche Movieclip animati e non solo statici) e lavorarci nella nostra classe con FlashDevelop.
Conclusione
Usando FlashDevelop e il Flex SDK è possibile compilare sia file MXML che AS in maniera completamente gratuita, il tutto in un'unica soluzione e con un ottimo editor dotato di feature decisamente interessanti.
Abbiamo anche visto come, grazie al formato SWC, sia possibile sfruttare elementi creati in Flash. Si potrebbe obiettare che per fare tutti quei passaggi possa essere conveniente lavorare direttamente con Flash: questo in parte è vero, tuttavia pensiamo ad esempio al caso in cui una persona si occupi dello sviluppo del codice mentre l'aspetto grafico sia delegato a un altro gruppo del team: lo sviluppatore potrà ricevere l'SWC dal grafico e potrà quindi non dover mai intervenire su Flash, di conseguenza potrebbe non averne bisogno (con conseguente risparmio in termini economici).
