Leggere e scrivere file sul filesystem con ActionScript 3

Una delle maggiori limitazioni di Flash, dovuta essenzialmente alla
sicurezza, è sempre stata quella della lettura e soprattutto del
salvataggio di file: per queste operazioni si affiancava
all'applicazione Flash un supporto lato server.

La classe FileReference del Flash Player 10 - che
già veniva usata per l'upload in combinata con linguaggi server-side
nelle ultime versioni - è stata potenziata ed è ora possibile usarla
anche per salvare dati sul computer dell'utente senza la necessità di
passare da altri linguaggi.

Ovviamente per motivi di sicurezza l'operazione deve essere confermata dall'utente, che sceglierà anche il percorso locale del file.

Si tratta di una caratteristica molto interessante, specie se unita con alcune librerie esterne come la Actionscript 3 Core Library, sviluppata da Adobe e che include delle classi per l'encoding in JPG o in PNG.

L'accoppiata ci permetterebbe, ad esempio, di prendere uno
screenshot della nostra applicazione (o di un componente) e salvarlo in
formato JPG o PNG sul pc dell'utente. Per ottenere lo stesso
comportamento con Flash CS3 e Flash Player 9 avremmo dovuto passare le
informazioni dallo stage ad una applicazione lato server, che si
sarebbe poi occupata di convertire i dati ricevuti da Flash in immagine.

Ora tutto è molto più semplice e in questo articolo creeremo una
piccola applicazione che permetterà all'utente di caricare un'immagine,
elaborarla in Flash e salvarla poi modificata, il tutto sfruttando la
classe FileReference e la Actionscript 3 Core Library.

Caricare un file dal pc dell'utente



È bene precisare innanzitutto che il caricamento del file non comporta un parallelo upload del file sul server, ma il file viene letto e i caricato all'interno del player in un oggetto di tipo ByteArray,
classe anch'essa introdotta in Actionscript 3. Per motivi di sicurezza
infatti il player riceve solo il nome e i contenuti del file ma non ad
esempio il path in cui è memorizzato.

Anzitutto creiamo un pulsante sul nostro stage e gli diamo nome istanza carica;
questo pulsante dovrà aprire la finestra di scelta del file da caricare
nella nostra applicazione. Il codice da utilizzare è il seguente:



Visualizza il codice
Stampa?

01.var _loadFile:FileReference;
02.
03.carica.addEventListener(MouseEvent.CLICK, caricaFile);
04.
05.function caricaFile(evt:MouseEvent)
06.{
07. // creiamo l'oggetto FileReference
08. _loadFile = new FileReference();
09.
10. // associamo la funzione scegliFile alla selezione
11. _loadFile.addEventListener(Event.SELECT, scegliFile);
12.
13. // impostiamo il filtro che permetta la scelta di sole immagini
14. var filtro:FileFilter = new FileFilter("Immagini: (*.jpeg, *.jpg, *.gif, *.png)", "*.jpeg; *.jpg; *.gif; *.png");
15.
16. // apriamo la finestra di scelta
17. _loadFile.browse([filtro]);
18.}
19.
20.function scegliFile(evt:Event)
21.{
22. // azioni successive alla scelta del file
23.}






I commenti dovrebbero essere sufficienti a comprendere il codice,
fin qui non c'è nulla di complesso, semplicemente sfruttiamo il metodo browse della classe FileReference
per aprire una finestra di scelta del file. Tale metodo accetta un
parametro che possiamo usare per impostare dei filtri sulla scelta dei
file, in questo caso la variabile filtro (di tipo FileFilter) permetterà la scelta di sole immagini nei formati jpg, gif o png (gli unici che il player legge nativamente).

Una volta che l'utente avrà selezionato un file, sarà chiamata la funzione scegliFile, che si occuperà di caricare i dati del file nel player:



Visualizza il codice
Stampa?

01.function scegliFile(evt)
02.{
03. // rimuoviamo l'evento di scelta file non più necessario
04. _loadFile.removeEventListener(Event.SELECT, scegliFile);
05.
06. // creiamo il listener per l'evento COMPLETE che verrà
07. // lanciato una volta completato il caricamento del file
08. _loadFile.addEventListener(Event.COMPLETE, fileCaricato);
09.
10. // carichiamo il file all'interno del player
11. _loadFile.load();
12.}
13.
14.function fileCaricato(evt:Event)
15.{
16. // azioni da eseguire a caricamento completato
17.}





Questa funzione carica il file grazie al metodo load e una volta completato il caricamento (e viene scatenato l'evento COMPLETE), lancia la funzione fileCaricato. Poichè non è più necessario abbiamo rimosso il listener relativo all'evento di scelta del file.
Leggere il file caricato in memoria



Esaminiamo ora come leggere i dati caricati. L'oggetto FileReference possiede la proprietà 'data'di tipo ByteArray
che contiene i dati binari del file selezionato dall'utente. Quindi,
per utilizzare questi dati, possiamo sfruttare i metodi della classe ByteArray.

Nel nostro caso abbiamo a che fare con un file jpg, gif o png,
quindi dati direttamente interpretabili dal dal Flash Player. Questo ci
evita la necessità di implementare un parser intermedio e ci permette
di limitarci a mostrare l'immagine caricata sullo stage.

Anche questa volta facciamo uso di un evento, infatti utilizziamo un oggetto Loader per ottenere i dati contenuti nell'oggetto _loadFile e attendiamo che il trasferimento sia concluso.


Visualizza il codice
Stampa?

01.function fileCaricato(evt:Event)
02.{
03. // rimuoviamo il listener non più necessario
04. _loadFile.removeEventListener(Event.COMPLETE, fileCaricato);
05.
06. // creiamo l'oggetto Loader che caricherà l'immagine
07. var immagine:Loader = new Loader();
08.
09. // impostiamo il listener da eseguire a fine
10. // caricamento dell'immagine
11. immagine.contentLoaderInfo.addEventListener(Event.COMPLETE, immaginePronta);
12.
13. // carichiamo i bytes dall'oggetto ByteArray
14. // all'interno del Loader
15. immagine.loadBytes(evt.target.data);
16.}





Dopo aver fatto pulizia del listener non più necessario, creiamo il nostro oggetto Loader. È utile sottolineare l'utilizzo del metodo loadBytes: stiamo caricando i dati binari ricavati dal file scelto dall'utente, ed è per questo che non usiamo il più diffuso metodo load, a cui viee associato l'URL da caricare, ma sfruttiamo quest'altro metodo che carica i byte.

Al termine del caricamento, sarà scatenato l'evento COMPLETE e lanciata la funzione immaginePronta.
In questa funzione aggiungiamo prima uno sprite sullo stage, che farà
da contenitore dell'immagine e poi l'immagine da esso contenuta.

Utilizziamo proprio questo sprite per modificare graficamente
l'immagine, non sarebbe infatti possibile operare direttamente sul Loader. Ecco quindi le poche righe di codice necessarie all'operazione:



Visualizza il codice
Stampa?

01.// dichiariamo la variabile relativa allo sprite
02.var contenitore:Sprite;
03.
04.function immaginePronta(evt:Event)
05.{
06. // rimuoviamo il listener non pu necessario
07. LoaderInfo(evt.target).removeEventListener(Event.COMPLETE,immaginePronta);
08.
09. // creiamo lo sprite
10. contenitore = new Sprite();
11.
12. // aggiungiamo l'immagine caricata allo sprite
13. contenitore.addChild(evt.target.content);
14.
15. // aggiungiamo lo sprite allo stage
16. addChild(contenitore);
17.}





Anche questa volta rimuoviamo il listener, ma in questo caso per
poter rimuovere l'evento abbiamo dovuto ricavare il target dell'evento
come oggetto LoaderInfo.

Il resto è molto semplice: dichiariamo il contenitore, di tipo Sprite e vi inseriamo l'immagine (contenuta nella proprietà content del target dell'evento). Infine aggiungiamo il contenitore allo stage.

Potremmo voler applicare un ridimensionamento dell'immagine per evitare che possa essere troppo grossa per la nostra interfaccia, in questo caso basterà agire sulle proprietà width ed height dell'oggetto contenitore.
Modifica dell'immagine



Proprio l'oggetto contenitore sarà quello che
sfrutteremo anche per applicare le altre modifiche alla nostra
immagine. Poichè scopo dell'articolo è vedere il caricamento e il
salvataggio del file, non faremo particolari operazioni sull'immagine
ma ovviamente si può ampliare a proprio piacimento l'applicazione.

In questo caso ci limteremo a convertire l'immagine in scala di grigio, sfruttando il ColorMatrixFilter; anche questa opzione la associamo ad un pulsante (con nome istanza modifica).



Visualizza il codice
Stampa?

01.modifica.addEventListener(MouseEvent.CLICK,modificaImmagine);
02.
03.function modificaImmagine(evt:MouseEvent)
04.{
05. // matrice per la trasformazione in sacala di grigio
06. var grigi:Array = [0.33,0.33,0.33,0,0,0.33,0.33,0.33,0,0,0.33,0.33,0.33,0,0,0,0,0,1,0];
07.
08. // creazione del ColorMatrixFilter
09. var matriceColore:ColorMatrixFilter = new ColorMatrixFilter(grigi);
10.
11. // associazione della matrice allo sprite
12. contenitore.filters = [matriceColore];
13.}





Salvare l'immagine modificata



Eccoci quindi alla novità più interessante, ovvero la possibilità di
salvare il file. In questo caso, trattandosi di un'immagine dovremo
ricavare l'immagine modificata in scala di grigi, convertirla grazie
all'encoder della Actionscript 3 Core Library e infine salvarla,
ovviamente per altri file e altri formati i passaggi "pre-salvataggio"
potrebbero variare.

Esaminiamo il codice per questi passaggi, considerando che l'unico
"fisso" da riusare anche in altri casi per salvare un file sarà solo
quello relativo al nome del file all'oggetto FileReference salvaFile.


Visualizza il codice
Stampa?

01.// importiamo l'encoder
02.import com.adobe.images.JPGEncoder;
03.
04.salva.addEventListener(MouseEvent.CLICK,salvaImmagine);
05.
06.function salvaImmagine(Evt:MouseEvent)
07.{
08. // copiamo dallo sprite l'immagine modificata
09. var immagineModificata:BitmapData = new BitmapData(contenitore.width,contenitore.height);
10. immagineModificata.draw(contenitore,contenitore.transform.matrix);
11.
12. // creiamo il bytearray che conterrà l'immagine
13. var immagineCodificata:ByteArray;
14.
15. // creiamo il JPGEncoder che codificherà l'immagine
16. var jpgEncoder:JPGEncoder = new JPGEncoder(85);
17.
18. // inseriamo nelByteArray l'immagine codificata
19. immagineCodificata = jpgEncoder.encode(immagineModificata);
20.
21. // creiamo l'espressione regolare per il nome del file
22. var expNomeFile:RegExp = /^(?P<fileName>.*)\..*$/;
23.
24. // aggiungiamo al nome originale del file il suffisso _gray
25. var NomeFile:String = expNomeFile.exec(_loadFile.name).fileName + "_gray";
26.
27. // quindi l'estensione .jpg
28. nomeFile+= ".jpg";
29.
30. // creiamo l'oggetto FileReference per il salvataggio del file
31. var salvaFile:FileReference = new FileReference();
32.
33. // impostiamo i listener per salvataggio completo ed errore
34. salvaFile.addEventListener(Event.COMPLETE, fileSalvato);
35. salvaFile.addEventListener(IOErrorEvent.IO_ERROR, erroreSalvataggio);
36.
37. // salviamo il file
38. salvaFile.save(immagineCodificata, nomeFile);
39.}
40.
41.function fileSalvato(evt:Event)
42.{
43. trace("File salvato con successo");
44.}
45.
46.function erroreSalvataggio(evt:ErrorEvent)
47.{
48. trace("Errore nel salvataggio");
49.}






Per prima cosa abbiamo importato il JPGEncoder ricavato dalla Actionscript 3 Core Library (sono varie classi ed è possibile copiare nel proprio progetto solo la JPGEncoder, non è necessario averne altre nel nostro caso), quindi all'interno della funzione salvaImmagine (associata al click sul pulsante salva) eseguiamo diverse operazioni.

Per prima cosa creiamo un oggetto BitmapData delle dimensioni dello sprite contenitore, quindi vi disegniamo lo stesso sprite; notiamo che abbiamo inserito come secondo parametro la matrice di trasformazione di contenitore,
questo perchè altrimenti non avremmo copiato la versione "modificata"
ma l'originale (quindi senza nessun cambio di colore e partendo dalla
dimensione originale).








Dopo aver preparato l'immagine, impostiamo l'oggetto immagineCodificata (di tipo ByteArray), che conterrà il risultato della codifica fatta tramite il JPGEncoder (notiamo che in questo caso abbiamo impostato per l'immagine una qualità di 85, il range va da 1 a 100), quindi impostiamo il nome del file ricavando il nome originale, aggiungendo _gray e infine l'estensione (in questo caso .jpg). L'espressione regolare expNomeFile regola l'input che l'utente può inserire per il nome del file.


Come ultima operazione, creiamo l'oggetto salvaFile (di tipo FileReference), impostiamo due listener (uno per il completamento del salvataggio e uno per gli eventuali errori) e usando il metodo save salviamo il file nella posizione scelta dall'utente, come il metodo browser infatti anche il metodo save
aprirà una finestra con la quale scegliere la posizione in cui salvare
il file e specificare un nome eventualmente diverso da quello impostato
automaticamente.


Conclusioni



Abbiamo visto come la classe FileReference sia stata ulteriormente
potenziata, inoltre grazie all'abbinamento con la classe ByteArray
permette di estendere notevolmente le feature del player (ad esempio
recentemente Lee Brimelow ha riportato sul suo blog alcuni esempi
tra cui una classe per caricare file PSD in Flash). Queste
caratteristiche aumentano sempre più le potenzialità di Flash in campo
RIA, inoltre librerie come la Actionscript 3 Core Library consentono di
eseguire facilmente operazioni come l'encoding in PNG o in JPEG, usando
poche righe di codice.

La possibilità di caricare e salvare file senza l'ausilio di
linguaggi server-side consente migliori performance (il passaggio
dell'immagine al linguaggio server-side e il salvataggio tramite le
librerie grafiche di quest'ultimo è più complesso del gestire il tutto
all'interno del player) e permettono anche una più semplice diffusione
dei propri lavori: prima del Flash Player 10 sarebbe stato necessario
un hosting con supporto ASP, PHP o altro per supportare questo tipo di
applicazione, mentre ora può essere usato praticamente qualsiasi
hosting.


FONTE UFFICIALE: http://flash.html.it/articoli/leggi/3172/leggere-e-scrivere-file-sul-filesystem-con-actionscript-3/