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

FlashDevelop e Flex SDK: l'ambiente di sviluppo gratuito per flash

L'ambiente di sviluppo gratuito per flash
L'ambiente di sviluppo gratuito per flash
Link copiato negli appunti

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.

Figura 1. Tipi di progetto
Tipi di progetto

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.

Figura 2. Le zone dell'interfaccia
Le zone dell'interfaccia

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).

Figura 3. Il pannello Tasks
Il pannello Tasks

Tra i pannelli a destra, nell'area "esplorazione", è interessante Outline che permette di esplorare le classi e i file SWF e SWC.

Figura 4. Il pannello Outline
Il pannello Outline

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.

Figura 5. Opzioni di installazione di FlashDevelop
Schermata di installazione

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".

Figura 6. Download del Flex SDK
Schermata di donwload SDK

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.

Figura 7. Contenuto dello ZIP del Flex SDK
Contento archivio Flex SDK

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).

Figura 8. Impostazioni di FlashDevelop
Menu Tools

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".

Figura 9. Impostazioni di FlashDevelop
Schermata Program Settings

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.

Figura 10. Impostazione di un nuovo progetto Flex 3 da FlashDevelop
Creazione del 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.

Figura 11. I file e le cartelle del progetto
Pannello Project

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.

Figura 12. Tasto per la compilazione del progetto
Barra menu FlashDevelop

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.

Figura 13. Code hinting di un file MXML in FlashDevelop
Code hinting in FlashDevelop

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à.

Figura 14. Code hinting di un file MXML in FlashDevelop
Code hinting in FlashDevelop

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.

Figura 15. Autoindentazione del codice
Auto indentazione in FlashDevelop

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"  >
  <mx:TabNavigator x="80" y="68"  >
    <mx:Canvas label="Tab 1"  >
      <mx:Button x="66" y="10" label="Pulsante"></mx:Button>
    </mx:Canvas>
    <mx:HDividedBox label="Tab2"   horizontalGap="5">
      <mx:ComboBox ></mx:ComboBox>
      <mx:HSlider></mx:HSlider>
    </mx:HDividedBox>
  </mx:TabNavigator>
</mx:Application>

Figura 16. Il file MXML compilato
Il risultato finale

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:

Figura 17. Aggiunta di una classe ActionScript al progetto
Aggiunta di una classe

Appare un pannello dove specificare alcune proprietà della classe, nel nostro caso è sufficiente indicare il nome.

Figura 18. Pannello di creazione di una classe in FlashDevelop
Aggiunta di una classe

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.

Figura 19. Impostazione dell'opzione di compilazione di una classe
Scelta opzione Always compile

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.

Figura 20. Conversione in movieclip con esportazione per ActionScript
Pannello conversione in simbolo

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.

Figura 21. Impostazione dei formati di esportazione del FLA
Pannello impostazioni di pubblicazione

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.

Figura 22. Impostazione dell'esportazione dell'SWC
Pannello impostazioni di pubblicazione

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.

Figura 24. Aggiunta dell'SWC alla libreria del progetto
Pannello project

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.

Figura 24. Il tipo di variabile Pentagono caricato nel progetto
Code hinting per tipo pentagono

È 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:

Figura 25. Il pentagono aggiunto sullo stage

File esportato con il simbolo tratto da flash

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).

Ti consigliamo anche