Cerchi articoli, tutorial e guide su Photoshop CS3, Flash CS3, Premiere Pro CS3, Actionscript 3, Flex 3 e Adobe AIR, Java e Microsoft Silverlight ? Dall'ultima verisione di Flash (oggi dovremmo quasi dire la "penultima"), è stato aggiunto un pannello di gestione dei filtri (ombra esterna, bagliore, ecc...) applicabile direttamente a MovieClip o Pulsanti.
In realtà il pannello in questione nega proprio ad ActionScript 2 ulteriori possibilità di effetti. Alcune "derivate", come nel nostro caso usando una BitMapData per creare un filtro, altre più "dirette". Con quest'ultima mi riferisco alla classe "DisplacementMapFilter" (in italiano: immagine della mappa di spostamento) che permette di applicare un effetto di deformazione o screziato a un'istanza specifica e utilizzabile solo attraverso ActionScript.
Per ora affronteremo il primo punto, cioè creare un effetto partendo dalla classe BitmapData.
Nei prossimi giorni invece vedremo come si usa questa nuova classe "DisplacementMapFilter".
Il risultato che otterremo da questo articolo/tutorial sarà la creazione di un file contenente un'immagine caricata in remoto da un URL dato. Spostando il mouse sullo stage vedremo aumentare o diminuire l'effetto di disturbo sull'immagine, un effetto simile ai vecchi televisori che ricevevano male il messaggio. Come da immagine.
Faremo quindi in modo che muovendo il mouse sullo stage l'effetto aumenti verso il basso e diminuisca verso l'alto. Una targhetta (come si vede in basso all'immagine) ci indicherà i valori del filtro.
Partiamo proprio dalla targhetta.
Creiamo un campo di testo dinamico che seguirà il mouse nei suoi spostamenti (onMouseMove).
this.createTextField("status_txt", 90, 0, 0, 100, 20);
status_txt.selectable=false;
status_txt.background=0xFFFFFF;
status_txt.autoSize="left";
function onMouseMove(){
status_txt._x=_xmouse;
status_txt._y=_ymouse-20;
updateAfterEvent();
}
Creiamo poi una clip che caricherà esternamente l'immagine:
this.createEmptyMovieClip("img_mc", 10);
img_mc.loadMovie("http://blog.augitaly.com/flashCS3.jpg");
Ora però prima di proseguire, aggiungiamo alla prima riga (sopra a tutto lo script precedente) questa riga:
import flash.display.BitmapData;
Importeremo così tutta la classe BitmaData, altrimenti non potremmo utilizzare i suoi metodi o proprietà. Infatti non tutte le classi vengono incorporate automaticamente nei filmati flash, come potrebbe essere ad esempio per MovieClip o Button,... ecc....
Proseguiamo.
Creiamo un'istanza di BitmapData:
var noiseBmp:BitmapData=new BitmapData(Stage.width, Stage.height, true);
Ora, cosa fa esattamente la classe BitmapData? Questa classe consente di creare immagini bitmap trasparenti e opache da manipolarlsi in fase di runtime. Infatti quello che faremo sarà applicare il disturbo a questa bitmap trasparente sopra l'immagine caricata.
Ecco la funzione:
function myNoise():Void{
var low:Number=30*_xmouse/Stage.width;
var high:Number=200*_ymouse/Stage.height;
status_txt.text="low:"+Math.round(low)+", high:"+Math.round(high);
noiseBmp.noise(Math.round(Math.random()*100000), low, high, 8, true);
}
Creiamo due variabili, che cambiano in base alla posizione del mouse. Le ritracciamo sul campo di testo dinamico, quindi applichiamo il filtro alla bitmap utilizzando i due parametri.
I due valori "low" e "high" sono rispettivamente il valore più basso e quello più alto da generare tra 0 e 255 per ogni canale RGB. Il valore 8 riguarda il parametro "channelOption" e riguarda il canale "alfa" (in alterniativa avremmo potuto usare 1 per rosso, 2 per verde, 4 per blu ma avremmo avuto un quadrato del colore prescelto) Il valore booleano finale indica il parametro di "grayScale". Ovvero sia l'effetto di disturbo sarà in scala di grigio.
Chiudiamo "attaccando" la bitmap allo stage e impostando l'intervallo dell'applicazione del filtro.
this.attachBitmap(noiseBmp,20);
setInterval(myNoise, 100);
AUGItaly Feed