Tramite ActionScript si possono creare immagini raster. Questo permette sia di manipolare i dati a livello di pixel, sia di trasformare complessi movieclip vettoriali in immagini più facilmente gestibili. Le due classi principali per questa tecnica sono Bitmap, che serve a visualizzare il risultato sullo schermo e BitmapData che viene invece utilizzata per manipolare i dati originali.
L'esempio che andremo ad analizzare manipola un testo immesso dall'utente fino a restituirne un'immagine che simula l'effetto delle vecchie macchine da scrivere.
Iniziamo preparando il nostro documento flash. Apriamo il menù componenti (Ctrl+F7) e inseriamo una TextArea nello Stage. Impostiamo le proprietà: altezza 380px, larghezza 120px nome dell'istanza mytxtArea.
Nello Stage, sotto la TextArea creiamo un bottone Stampa ed inseriamo il nome istanza myprint. Il primo codice che andremo a scrivere sarà molto semplice e non farà altro che prendere il testo scritto nella TextArea e stamparlo carattere per carattere sulla finestra di Output di Flash.
Le prime due righe caricano la classe eventi per il mouse e impostano un EventListener al bottone che abbiamo creato sullo stage. In questo modo quando si preme il tasto myprint viene eseguita la funzione takeText(); Quest'ultima legge il testo scritto, ne cicla i caratteri e li stampa.
La seconda funzione che andremo a creare produrrà un movieclip dal testo immesso dall'utente. Ogni singolo carattere potrà essere stampato o normalmente, o leggermente spostato e con una diversa profondità di nero. Infine alcuni caratteri verranno stampati due volte, una sopra all'altra per simulare le sbavature di inchiostro. Invece di vedere il codice completo che potete scaricare analizziamo una versione molto semplificata che tuttavia è il cuore per realizzare il movieclip.
import flash.events.MouseEvent;
myprint.addEventListener(MouseEvent.CLICK, takeText);
function takeText(e:Event):void {
var testo = mytxtArea.text;
for (var i:uint = 0; i < testo.length; i++) {
trace( testo.charAt(i));
}
}
La funzione AddChar riceve il movieclip su cui stiamo stampando i caratteri, il testo e il puntatore alla lettera a cui siamo arrivati a leggere. Non abbiamo passato direttamente il carattere per semplificare la stampa dell'accapo (charCodeAt()=13).
Le righe e le colonne sono identificate dalle variabili xx e yy mentre per poter leggere la dimensione di ogni singolo carattere utilizziamo la proprietà autoSize del TextField. Provando infatti ad omettere la riga myTextBox.autoSize = TextFieldAutoSize.LEFT; il testo verrà stampato distanziando i caratteri sempre dello stesso spazio.
Anziché stampare il testo sullo schermo con il codice addChild(mc); (ultima riga della funzione takeText) richiamiamo una funzione che trasformi questo testo in un'immagine. Per cui sostituiamo addChild(mc) con movieclipToBitmap(mc); e scriviamo l'ultima funzione.
function movieclipToBitmap(mc) {
var bmpd: BitmapData = new BitmapData(mc.width, mc.height+10, true, 0x000000);
// copio il MovieClip sulla BitmapData
bmpd.draw(mc);
var bmp:Bitmap = new Bitmap( bmpd );
bmp.smoothing=true;
addChild(bmp);
bmp.x=70;
bmp.y=90;
bmp.rotation = -10;
}
import flash.events.MouseEvent;
myprint.addEventListener(MouseEvent.CLICK, takeText);
var xx:int = 10;
var yy:int = 10;
function takeText(e:Event):void {
var testo = mytxtArea.text;
// imposto il carattere
var mc:MovieClip = new MovieClip();
for (var i:uint = 0; i < testo.length; i++) {
AddChar(mc,testo,i);
}
addChild(mc);
}
unction AddChar(mc:MovieClip,testo,i) {
var myTextBox:TextField = new TextField();
myTextBox.text = testo.charAt(i);
// il punto in cui stampare la lettera
if (testo.charAt(i).charCodeAt()==13) yy+=24;
if (testo.charAt(i-1).charCodeAt()==13) xx = 10;
if (xx >380 ) { xx = 10; yy+=18;}
myTextBox.x = xx ;
myTextBox.y = yy ;
myTextBox.autoSize = TextFieldAutoSize.LEFT;
xx += myTextBox.width ;
mc.addChild(myTextBox);
}
Abbiamo copiato così il movieclip in una variabile bmpd tramite la funzione draw. Per visualizzare poi l'immagine creata basta copiarla in una variabile Bitmap e aggiungerla allo Stage.
var bmp:Bitmap = new Bitmap( bmpd );
addChild(bmp);
Per avere un risultato accettabile poi impostiamo lo smoothing in true. Quest'ultima proprietà è per default false poiché nelle animazioni rischia di impiegare troppe risorse.
In Conclusione
Abbiamo visto com'è semplice prelevare il contenuto del componente TextArea e come creare un nuovo movieclip in cui stampare ogni singolo carattere nella giusta posizione grazie alla proprietà del TextField autoSize. Infine abbiamo introdotto i concetti base per la trasformazione di un movieclip in bitmap. Nel flash allegato il codice è leggermente più complesso per abbellire un pochino il risultato finale, comunque segue concettualmente il codice qui spiegato. Il fatto di poter trasformare un movieclip in una bitmap può essere particolarmente utile nell'uso delle matrici di trasformazioni, di effetti, se si vuole modificare a livello di pixel il clip filmato oppure per salvare il risultato finale ad esempio in jpg (serve ovviamente uno script lato server).
